[2.0] @solidjs/html - `on` property for <Loading> does not apply getter

[danielrkling]

Describe the bug

@solidjs/html will turn functions ()=>... into getters for a component if the function has no args and the prop name isn't ref or start with on. For native elements this works well. For Components it can produce unexpected.

Case 1: Property converts to a getter even though props expects a function for props not starting with on. Solvable with an extra ()=>

html`<${SomeComp} render=${()=>"Render"} />`
function SomeComp(props){
   props.render //will be string not function
}

Case 2: Property doesn't converts to a getter even because prop name starts with on

html`<${Loading} on=${()=>count()} />`

Not solvable. Produces incorrect behavior: https://s.olid.uk/id/vek1rmWHT12W_HzgrTb7yw

Possible solutions:

1. Special case for plain "on" fixes it for loading, problem still exists for other names like "only" that are not events
2. wrapper function that attaches brand/symbol to the anonymous function to force applying a getter. possibly a similar one for not applying the getter although less of a issue. Needs good name get or getter or asGetter and fn, callback, asFunction
3. prefix in the template that does the same as above

2 Seems like the most reasonable approach.

Your Example Website or App

https://s.olid.uk/id/vek1rmWHT12W_HzgrTb7yw

Steps to Reproduce the Bug or Issue

https://s.olid.uk/id/vek1rmWHT12W_HzgrTb7yw

create an html template trying to use Loading with on

Expected behavior

Users need a way to force behavior of property getters in html templates

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[AdarshYadav9]

Could you please assign this issue to me? I have a fix ready in PR #3728.