Vanilla JavaScript

[kobeaerts]

Well, the title says is all.
We have some wonderful bindings for React & Vue but sadly we live in an imperfect world with projects that don't use / need React or Vue.

Any chance we can get a Headless UI version for Vanilla JavaScript?

[adamwathan]

Hey! Can you share some examples of what you think the code would actually look like from a user-facing API perspective? Everyone kind of has different definitions of "vanilla JS".

My gut feeling is that this is not something we would ever pursue, but mostly because I can't for the life of me imagine what sort of APIs we could provide that would actually feel helpful and ergonomic. We are planning to build a version of Headless UI for Alpine.js which is what I think of as the vanilla version in my mind, as it's an extremely lightweight library that sits on top of regular old server-rendered HTML.

[marshalhayes]

I've come up with marshalhayes/headless-webcomponents so far. The code is admittedly kinda terrible at the moment, but I'm curious to see if the idea is there.

The component I started with is called @hui/switch and is a typical toggle/switch implemented as a custom web component. Put simply, all it does is add a click event that toggles HuiSwitch.checked. It's value is reflected as an attribute in the DOM, and can be initially set there as well.

<hui-switch checked></hui-switch>

In order to support similar functionality to headlessui, such as adding/removing classes based on the state for example, there are two other attributes available (checked-class, and unchecked-class) both on <hui-switch /> itself and any of its children.

<hui-switch 
  class="relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200"
  checked-class="bg-blue-600"
  unchecked-class="bg-gray-200"
>
   <span class="translate-x-1 inline-block w-4 h-4 transform bg-white rounded-full"
      checked-class="translate-x-6"
      unchecked-class="translate-x-1"
  >
  </span>
</hui-switch>

The above is equivalent to this example in the headlessui/react docs.

import { useState } from 'react'
import { Switch } from '@headlessui/react'

function MyToggle() {
  const [enabled, setEnabled] = useState(false)

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

The onChange handler isn't required for <hui-switch />; however, if you need to perform actions when the switch is toggled, listen for the hui.switch.toggle event. It supports cancellation but doesn't bubble past the component itself.

This approach is limited to only classes, so doing something more complex - especially with components more feature-rich than this simple example - might be difficult, but I'm curious to see what people think.

[marshalhayes]

The only reason I'm even considering an approach like this is because, like @kobeaerts said, not every application uses or needs React or Vue. An AlpineJS option would be interesting, but I'm toying with the idea of a zero-dependency custom web component library. No framework needed, just drop the script tag to load the component and use it just like a native element.

No idea if that's possible (or wise) though 🤷🏻‍♂️

[inwardmovement]

@adamwathan do you still plan to make an Alpine.js version?

[adamwathan]

No plans for it I’m afraid, don’t have the resources for it.

[maitijoanne]

After a year of working with my team on integrating the French government's design system as web components, I am convinced that web components are the ultimate solution for unstyled and fully accessible ui components, you can use everywhere. It's a perfect match with headlessui/tailwindcss.
We use StencilJs. Apart many optimizations, it generates component wrappers for vue, react and angular.
The headlessui's code is a bit hard for me, but I can try to make a POC with StencilJs, if you are interested.