Hyperapp: onCreate doesn't work, but onClick does

[FlorianWendelborn]

When using JSX:

onCreate doesn't work. oncreate works.

onClick and onclick both work.

[jorgebucaran]

@dodekeract Correct. Actually, I am not so happy about onEvent like names. It's not consistent with the DOM API. The reason is there is for "so-called" React component support, but then again what other things does React do we don't support (and will likely not to).

I recommend you use onclick, oncreate, etc.

[FlorianWendelborn]

It should at least be consistent though.

[jorgebucaran]

Agree. Let's get rid of onEvents and support only onevents.

[FlorianWendelborn]

@jbucaran Is it really that much overhead to support both properly? It's basically just .toLowerCase(). I think it improves readability a lot.

[FlorianWendelborn]

Well, properly would imply that we're checking for onCreate vs oncReate. Hmm.

[jorgebucaran]

@dodekeract I've reversed this fix, and now (not published yet, but will with 0.5.0) HyperApp will no longer support camelCase for events.

It's all lowercase.

Reason:

• It's a performance hit not worth paying.
• DOM events are always lowercase.

[tunnckoCore]

DOM events are always lowercase.

Exactly. No matter how they are written, they always are lowercased then written to the dom node.

[FlorianWendelborn]

@jbucaran Where is the performance difference? In .toLowerCase()? Do you think that's even noticeable?

Also - can't we do that at transpile-time?

[jorgebucaran]

Not there, but here: https://github.com/hyperapp/hyperapp/blob/f9bc9653ff0bf87e152945c6c858866a0c7ed9e8/src/h.js#L10

[FlorianWendelborn]

@jbucaran Unrelated but shouldn't we use Object.keys() or object.hasOwnProperty() there to avoid issues when libraries extend the prototype? Object.keys() is actually supported by IE10, so even that is fine.

[jorgebucaran]

We could, but why would we? And, wrt to hasOwnProperty, there are several instances where for-in is used in the code, to which one are you referring?

[FlorianWendelborn]

@jbucaran https://github.com/hyperapp/hyperapp/blob/f9bc9653ff0bf87e152945c6c858866a0c7ed9e8/src/h.js#L10

We could but why would we?

It's a best practice and should avoid odd issues with libraries that mess with prototypes.

[jorgebucaran]

We're only using for-in with user objects like vnode's data object and the model. Those objects are safe.

[adriengibrat]

Hi @JorgeBucaran,
I'm using hyperapp with typescript and I :heart: it!
I 100% get your point about being closer to the DOM syntax and that there is no point in being React compatible, but I have issues with JSX types that only accept camelCase event !
The issue make using hyperapp with typescript & JSX almost impossible :/
Could you consider to reintroduce compatibility with camelCase events ?

Seems it could be pretty light (byte-wise):

element[/^on[A-Z]/.test(name) ? name.toLowerCase() : name] = null == value ? "" : value

instead of
https://github.com/hyperapp/hyperapp/blob/36c97702e388ec9a2b093950ca435276fcbb2229/src/index.js#L135
is doing the trick ;)

[jorgebucaran]

It's a perf hit, but I'll see what I can do! Thanks @adriengibrat.

I'll reopen here to track our progress.

[jorgebucaran]

@adriengibrat What are those JSX types that only accept camelCase?

[Swizz]

Can we do something about JSX typing directly or this is due to the Typescript compiler ?

The current JSX namespace is the following, the most simple we can do IMHO.

/** @namespace [JSX] */

declare global {
  namespace JSX {
    interface Element<Data> extends VNode<Data> {}
    interface IntrinsicElements {
      [elemName: string]: any
    }
  }
}

[adriengibrat]

Oops, I did not check where the typings came from!
I thought they where provided by a plugin or from typescript, but actually they came from https://github.com/ionic-team/stencil/blob/master/src/util/jsx-interfaces.ts#L916 I was also testing... it's much more exotic than I thought ;)
Sorry about the false alarm, without stencil in my node_modules everything is back to normal.

[Swizz]

JSX namespaces are overriding each others.

We made the most agnostic JSX typing to do not force you to use a specific convention by typing. The Vnode and the h function are doing the rest.

If you have some great ideas about typing and Hyperapp do not hesitate to contribute.

Can we close this issue ?

[adriengibrat]

Yes, you can close the issue, thanks