try to get htm to work with preact-cycle about htm

[marvinhagemeister]

@weepy you forgot to add the $-sign around the braces that is necessary when inserting values into a template string:

const foo = "world";
const str = `Hello ${foo}`;

There is a great page on mdn about template strings.

[developit]

We should have a section in the README explaining the couple things that need to be modified when going from JSX to HTM.

[Kanaye]

Hi @weepy!
You just need to import preact-cycles h-funciton and htm.bind() it.

import {  h } from "preact-cycle";
import htm from "htm";

const html = htm.bind(h);

I'ce converted preact-cycles "simple-example" to use htm instead of jsx.
You can find that example here: https://codesandbox.io/s/0q15l6no1p

[weepy]

I was having problem with importing preact-cycle outside of the jsx ecosystem. I.e. You use JSX with the in the index file : <Contextualize {...props}> Is it possible to rewrite that without the JSX ?

[weepy]

In fact I managed to get that to work, but I'm having trouble converting the more complex Todo list example. I'm getting this error : ``` preact.js:119 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '=' is not a valid attribute name. at setAccessor (http://localhost:1234/sandpit/htm/preact.js:119:143) at diffAttributes (http://localhost:1234/sandpit/htm/preact.js:285:176) at idiff (http://localhost:1234/sandpit/htm/preact.js:204:5) at innerDiffNode (http://localhost:1234/sandpit/htm/preact.js:252:15) at idiff (http://localhost:1234/sandpit/htm/preact.js:202:61) at innerDiffNode (http://localhost:1234/sandpit/htm/preact.js:252:15) at idiff (http://localhost:1234/sandpit/htm/preact.js:202:61) at diff (http://localhost:1234/sandpit/htm/preact.js:142:15) at renderComponent (http://localhost:1234/sandpit/htm/preact.js:401:20) at renderComponent (http://localhost:1234/sandpit/htm/preact.js:391:13) ``` It seems to be having trouble with the htm/jsx Have I made an error :? ``` const App = ({ text, todos, mutate, mutation }) => ( html`<div> <form onSubmit={mutation(ADD)} action="javascript:"> <input value={text} onInput={e => mutate('text', e.target.value)} /> <button action="submit">Add</button> </form> <ul> ${ todos.map( todo => ( html`<li onClick={mutation(TOGGLE, todo)}> <input type="checkbox" checked={todo.done} readonly /> <p>{ todo.text }</p> <a onClick={mutation(REMOVE, todo)}>✕</a> </li>` ))} </ul> </div>` ); ```

…

On Mon, Nov 26, 2018 at 8:54 AM Jonah Fox ***@***.***> wrote: I was having problem with importing preact-cycle outside of the jsx ecosystem. I.e. You use JSX with the in the index file : <Contextualize {...props}> Is it possible to rewrite that without the JSX ?

[marvinhagemeister]

Yup, I guess that most users of htm are coming from JSX so this may make the transition a lot easier 🙂

[weepy]

Yeah that’d be useful. Maybe a less cryptic error. Obviously it was my own foolishness but it’s kinda hard to spot it all as it’s quite a lot of line noise. Also it would be worth replacing the Jsx in the index file with ‘h’ J

…

On Mon, 26 Nov 2018 at 16:41, Jason Miller ***@***.***> wrote: We should have a section in the README explaining the couple things that need to be modified when going from JSX to HTM. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#31 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAADNA51pKoXCYFwziYlxoK_WLHzlOLqks5uzBmcgaJpZM4YyHN2> .

[developit]

This is fixed in 2.0!