Using headless-ui with Fresh

[ClaudiuCeia]

Hi,

I'm trying to use the Headless UI Tabs component in a Fresh project, but I'm running into issues. Headless UI seemed like a natural go-to since Fresh ships with tailwind (via twind). It doesn't work out of the box since it's made for React, so I get:

This JSX tag's 'children' prop expects a single child of type 'ReactNode | ((bag: TabsRenderPropArg) => ReactElement<any, string | JSXElementConstructor<any>>)', but multiple children were provided.deno-ts(2746)

Since this is a React library, I tried using the Preact compat layer, like so:

import { Tabs } from "https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat";

This got rid of the Typescript errors I had, but I get runtime errors:

TypeError: Cannot read properties of undefined (reading '__H')
    at f (https://esm.sh/v87/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/hooks.js:2:217)
    at A (https://esm.sh/v87/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/hooks.js:2:935)
    at R (https://esm.sh/v87/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/hooks.js:2:695)
    at C (https://esm.sh/v87/@headlessui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/react.js:2:6377)
    at https://esm.sh/v87/@headlessui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/react.js:5:66648
    at Object.t (https://esm.sh/v87/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/compat.js:2:1609)
    at h (https://esm.sh/v86/[email protected]/X-ZC9wcmVhY3RAMTAuOC4y/deno/preact-render-to-string.js:4:1003)
    at h (https://esm.sh/v86/[email protected]/X-ZC9wcmVhY3RAMTAuOC4y/deno/preact-render-to-string.js:9:66)
    at h (https://esm.sh/v86/[email protected]/X-ZC9wcmVhY3RAMTAuOC4y/deno/preact-render-to-string.js:9:66)
    at h (https://esm.sh/v86/[email protected]/X-ZC9wcmVhY3RAMTAuOC4y/deno/preact-render-to-string.js:9:66)

Then I check the Preact documentation again and added all of the rest of the aliases:

import { Tab } from "https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom/test-utils:preact/test-utils,react-dom:preact-compat,react/jsx-runtime:preact/jsx-runtime";

But that brings back the Typescript errors as well as the runtime error (slightly different paths due to different aliases).

So I'm at a loss here - can I even get this to work?

[lucacasonato]

Importing https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&[email protected] works for me.

Ideally https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact would work, but that seems to be running into some esm.sh bug. cc @ije: the external=preact is not applying to most imports it seems.

[ije]

instead of complex ?alias, i added external all pattern in latest updates:

{
  "imports": {
    "react": "http://localhost:8080/[email protected]/compat",
    "preact": "http://localhost:8080/[email protected]",
    "preact/": "http://localhost:8080/[email protected]/",
    "preact-render-to-string": "http://localhost:8080/*[email protected]",
    "swr": "http://localhost:8080/*[email protected]"
  }
}

[OldManFroggy]

@ClaudiuCeia did you get headless-ui working well, I seem to be having issues with trapping event/state on headless ui controls, for example when toggling the state of a Switch, the switch state seems to break after first assignment. (using doc example from headless-ui site).

[ClaudiuCeia]

Thanks @lucacasonato - your suggestion works for me too. I'm not sure what the external all pattern is, @ije? I'd love to simplify my import map but the only way I got it working is with:

"@headlessui/react": "https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&[email protected]"

Slightly offtopic - I'd love it if there was a way for me to pin some dependency down to a version and have that reused all over (ie: [email protected] in your example)

---

@scott-ling

I tried it, seems to work fine for me with:

const [checked, setChecked] = useState(false);
const toggleChecked = () => setChecked(!checked);
// ... 

<Switch
    checked={checked}
    onChange={toggleChecked}
    class={tw`${
        checked ? "bg-blue-600" : "bg-gray-200"
    } relative inline-flex h-6 w-11 items-center rounded-full`}
    >
    <span class={tw`sr-only`}>Enable notifications</span>
    <span
        class={tw`${
        checked ? "translate-x-6" : "translate-x-1"
        } inline-block h-4 w-4 transform rounded-full bg-white`}
    />
</Switch>

[OldManFroggy]

oh crud... all I needed to do was a manual refresh of deno cache... now its working as it should...

now to test all headlessui primitives, before start some serious UI work,

@lucacasonato @ClaudiuCeia appreciate the assist, reach out anytime.

-S

[neezer]

@ClaudiuCeia I think what @ije was saying is that you can omit ?alias= and instead prefix your dependency with * (as in @ije 's example). Couple that with the entry for "react": "https://esm.sh/[email protected]/compat" and most of the query string goes away for the following imports.

I tried doing something similar importing downshift in my Fresh project and it worked. Here's what my import_map.json looks like now:

{
  "imports": {
    "$fresh/": "https://deno.land/x/[email protected]/",
    "react": "https://esm.sh/[email protected]/compat",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/*[email protected]",
    "clsx": "https://esm.sh/[email protected]",
    "downshift": "https://esm.sh/*[email protected]",
    "compute-scroll-into-view": "https://esm.sh/*[email protected]",
    "prop-types": "https://esm.sh/*[email protected]",
    "react-is": "https://esm.sh/*[email protected]",
    "tslib": "https://esm.sh/*[email protected]"
  }
}

Note that you do have to do the same for the dependencies for your packages in import_map.json though, so that's a bit of a bummer... otherwise you'll see errors like

Relative import path "[package-name]" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v91/[email protected]/deno/downshift.external.js"

In my case, compute-scroll-into-view, prop-types, react-is, and tslib are all required by downshift. Might see if I can write import_map.json in JSON5 to add some organizational comments or something.

I looked through the esm.sh docs (well, the homepage and a few terse searches through the GH issue list) and couldn't find mention of this feature, so it might be kinda bleeding edge right now. If you've got a link with more details, @ije , that would be handy.

[ije]

try deno run -A https://esm.sh add downshift, it will resolve the dependencies automatically:

{
  "imports": {
    "downshift": "https://esm.sh/v96/*[email protected]"
  },
  "scopes": {
    "downshift": {
      "@babel/runtime": "https://esm.sh/v96/@babel/[email protected]",
      "compute-scroll-into-view": "https://esm.sh/v96/[email protected]",
      "prop-types": "https://esm.sh/v96/[email protected]",
      "react-is": "https://esm.sh/v96/[email protected]",
      "tslib": "https://esm.sh/v96/[email protected]"
    }
  }
}

[alisabzevari]

This command didn't work for me:

$ deno run -A https://esm.sh add downshift   
error: Uncaught (in promise) SyntaxError: Expected double-quoted property name in JSON at position 476
      const { imports, scopes } = JSON.parse(raw);
                                       ^
    at JSON.parse (<anonymous>)
    at loadImportMap (https://esm.sh/:256:40)
    at async Object.add (https://esm.sh/:33:21)
    at async https://esm.sh/:451:5

[ije]

seems your import maps is not valid JSON

[TranquilMarmot]

This doesn't seem to work with all of @headless-ui/react.

For example, if you take the example for the menu component and put it into an island:

https://headlessui.com/react/menu

It will fail when you click it with:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

This seems to be happening in createRootFragment:

fresh/src/runtime/main.ts

Lines 4 to 25 in fd4e2bb

	function createRootFragment(
	parent: Element,
	replaceNode: Node | Node[],
	) {
	replaceNode = ([] as Node[]).concat(replaceNode);
	const s = replaceNode[replaceNode.length - 1].nextSibling;
	function insert(c: Node, r: Node) {
	parent.insertBefore(c, r || s);
	}
	// @ts-ignore this is fine
	return parent.__k = {
	nodeType: 1,
	parentNode: parent,
	firstChild: replaceNode[0],
	childNodes: replaceNode,
	insertBefore: insert,
	appendChild: insert,
	removeChild: function (c: Node) {
	parent.removeChild(c);
	},
	};
	}

I figured out that if you wrap <Menu.Items> in a <div> it works fine. I was able to use render props to set display: none; on the <div> when the dropdown is closed, so it's not a huge deal but it is ugly and unintuitive.

This seems to be because fresh doesn't like rendering empty fragments in islands. See also this issue: #502

[fro-profesional]

For any one that still having issues wtih some of the components, this import worked for me

https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact/compat

Got it from here #432 (reply in thread)
Thanks @czottmann