Codepen Examples Broken about hyperapp HOT 20 CLOSED

Cool! I am by no means a JSX expert, I just tried the changes in your pen and it worked. TIL for me as well. :-)

from hyperapp.

I noticed. By the way, when do you sleep?

from hyperapp.

Now I did the todos example: http://codepen.io/rbiggs/pen/BpOoNz
Making this link back to here.

from hyperapp.

I'd say it's best to automatically convert case for users to avoid unintended errors. Typing habits can be hard to break.

from hyperapp.

@jbucaran I just meant False Alarm. I made a typo 😂

from hyperapp.

@rbiggs Yes, I'm fixing them now. 👍

from hyperapp.

JSX one is working already. http://codepen.io/jbucaran/pen/ggjBPE

from hyperapp.

from hyperapp.

@rbiggs All examples updated.

For those interested in the new HyperApp + JSX integration, check out this collection of pens.

HyperApp + JSX

from hyperapp.

I forked your Codepen counter example and made it pretty :-P. http://codepen.io/rbiggs/pen/zNJGNz

from hyperapp.

@rbiggs Sweet! 👌

from hyperapp.

@jbucaran @rbiggs I am running into some weird issue with JSX.

The initial component renders fine, but no events fire any updates 🤔

http://codepen.io/selfup/pen/WRgOrR?editors=0110

from hyperapp.

I believe your events should be onclick instead of onClick, and likewise for onkeyup and onkeydown.

from hyperapp.

I tried that, but I can try again. I was under the impression that JSX preffered onClick? TIL 👍

from hyperapp.

@tzellman omg that totally worked (for the most part, still having event issues haha)! I guess React prefers onClick vs. onclick so that is what i was used to 😂

from hyperapp.

@selfup JSX is transformed to createElement, which is the agent parsing the string "onClick".

Similarly, with HyperApp, when using the pragma comment directive /** jsx h */, the one parsing the event name is the function h which returns a virtual node. The function that processes that virtual node and actually creates a DOM element may be our own createElement or updateElement.

We could simply introduce a prop.toLowerCase()... 🤔

from hyperapp.

@jbucaran that could be very nice! Nice thought

from hyperapp.

Ok whew I just made a mistake editing when using cmd + d I had:

const direction = e.target.classNameName;

instead of className 🤣

Now all the colors change as they should!

False ⏰

from hyperapp.

@selfup False ⏰

You mean something's broken? 🤔

from hyperapp.

@rbiggs Okay.

The relevant code is probably this.

Can you make a PR w/ that? I'll merge-ge-ge it.

from hyperapp.