jotai + deno + fresh + preact

[lveillard]

I saw some discussions about this, and it took me a while to make them work. Also there are some weird little bugs, but it works!

Update deno.json imports:

//deno.json
...
 "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.2.0/",
    "jotai/vanilla": "https://deno.land/x/jotai@v2.2.2/src/vanilla.ts",
    "jotai/react": "https://deno.land/x/jotai@v2.2.2/src/react.ts",
    "preact": "https://esm.sh/preact@10.16.0",
    "preact/": "https://esm.sh/preact@10.16.0/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
    "react": "https://esm.sh/preact@10.16.0/compat",
    "react/": "https://esm.sh/preact@10.16.0/compat/",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "$std/": "https://deno.land/std@0.190.0/"
  },

And then you can define your atoms in files:

//atoms/test.ts
import { atom } from 'jotai/vanilla';
export const testAtom = atom(8)

And use them in preact components like this:

import { useAtom, useAtomValue } from 'jotai/react';
import { testAtom } from '../atoms/test.ts';

export default function Counter(props: CounterProps) {
  const [testVal, setTestVal] = useAtom(testAtom);
  console.log('rendering');

  return (
    <div class='flex gap-2 w-full'>
      <p> {testVal} </p>
      <button onClick={() => setTestVal((prev) => prev + 1)}> hey! </button>
    </div>
  );
}

Some key things to consider:

• Versions of preact and preact/compat must use the same version
• No need for complicated ?alias & deps apparently adding those 2 react lines with preact does the job (maybe i'm naive on this one...)

Some bugs i've encountered

• I was not able to add the @Version when importing the react.ts of jotai... but it works in the map
• I can't pass an atom from the page to the island component in the same way a Fresh fresh example passes a signal, I get this error:

Something happens here that escapes my pay grade

Also when this error happens, all the atoms stop working, so if your atoms are not working, check your console ;)

Other than that, you can define your atoms in other files and it seems to properly work.