Hyperapp: Codepen Examples Broken

[rbiggs]

All the Codepen examples broke due to naming changes in version 0.0.12.

[jorgebucaran]

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

[jorgebucaran]

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

[rbiggs]

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

[danigb]

Congrats! 👏

El mar., 7 feb. 2017 18:58, Robert Biggs [e-mail]
escribió:

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

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/hyperapp/hyperapp/issues/56#issuecomment-278084906,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAdIbAdSTYi5kciW7iFqoiqenasW5f4ks5raLC3gaJpZM4L501d
.

[jorgebucaran]

@rbiggs All examples updated.

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

HyperApp + JSX

[rbiggs]

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

[jorgebucaran]

@rbiggs Sweet! 👌

[rbiggs]

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

[selfup]

@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

[tzellman]

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

[selfup]

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

[selfup]

@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 😂

[jorgebucaran]

@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()... 🤔

[selfup]

@jbucaran that could be very nice! Nice thought

[tzellman]

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. :-)

[selfup]

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

const direction = e.target.classNameName;

instead of className :rofl:

Now all the colors change as they should!

False ⏰

[rbiggs]

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

[jorgebucaran]

@selfup False ⏰

You mean something's broken? 🤔

[jorgebucaran]

@rbiggs Okay.

The relevant code is probably this.

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

[selfup]

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