HTM doesn't work

[zlumyo]

I've created example project with deno run -A -r https://fresh.deno.dev my-project and tried to replace JSX with HTM. It renders fine but there is no interactivity. As I can see no JS related to Counter is sending to browser (e.g. no related <source> tag). I suppose it's a wrong behaviour.

Here are my changes:

// islands/Counter.ts (not tsx!)

import { html } from "htm/preact";
import { useState } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts";
import { tw } from "@twind";

interface CounterProps {
  start: number;
}

export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(props.start);
  const btn = tw`px-2 py-1 border(gray-100 1) hover:bg-gray-200`;
  return html`
    <div class=${tw`flex gap-2 w-full`}>
      <p class=${tw`flex-grow-1 font-bold text-xl`}>${count}</p>
      <button
        class=${btn}
        onClick=${() => setCount(count - 1)}
        disabled=${!IS_BROWSER}
      >
        -1
      </button>
      <button
        class=${btn}
        onClick=${() => setCount(count + 1)}
        disabled=${!IS_BROWSER}
      >
        +1
      </button>
    </div>
  `;
}

// routes/index.ts (not tsx!)

import { html } from "htm/preact";
import { tw } from "@twind";
import Counter from "../islands/Counter.ts";

export default function Home() {
  return html`
    <div class=${tw`p-4 mx-auto max-w-screen-md`}>
      <img
        src="/logo.svg"
        height="100px"
        alt="the fresh logo: a sliced lemon dripping with juice"
      />
      <p class=${tw`my-6`}>
        Welcome to \`fresh\`. Try update this message in the ./routes/index.tsx
        file, and refresh.
      </p>
      <${Counter} start=${3} />
    </div>
  `;
}

[lucacasonato]

I never tested htm. It should work as long as it invokes the same VNode hooks as preact with JSX. Islands can not work if it doesn't invoke the vnode creation options hook.

[zlumyo]

Thanks for the clue! Looks like HTM really has problems with hooks.

So, if get it right, this issue can be closed - Fresh doesn't relate to this.

[lucacasonato]

Actually, I think that issue gave me an idea of something you can try. Can you try import htm like this: https://esm.sh/htm@3.1.1/preact?deps=preact@10.8.1?

[zlumyo]

Yes, it's working now!

// import_map.json
...
    "preact": "https://esm.sh/preact@10.8.1",
    "preact/": "https://esm.sh/preact@10.8.1/",
    "htm": "https://esm.sh/htm@3.1.1",
    "htm/preact": "https://esm.sh/htm@3.1.1/preact?deps=preact@10.8.1",
...    

Then I'll close issue. Solution is using same version of preact.