Backend-Agnostic Use of van.hydrate?

[kennyfrc]

Hi There! First of all, thanks @Tao-VanJS for creating such a great library. I'm in a similar position and I almost created my own reactive framework that's similar in spirit to vanjs (i.e. I'm also a backend dev mainly, and I wanted to avoid the complexity of most front-end frameworks).

Recently, I was exploring how I could use van.hydrate to sprinkle reactivity to html rendered by other backends (e.g. ruby erb templates, python jinja templates, etc.). I currently use alpine.js for some of our apps, and I'm looking to migrate everything to van.js (not just the interactive parts, but also some SPAs on some pages).

I have an example below, but I wanted to get thoughts from the community if there were other recommendations for a cleaner implementation.

Let's assume that we have this html:

    <div role="menu">
      <button aria-controls="menu-content" aria-expanded="false">Menu</button>
      <div id="menu-content" role="menuitem" hidden aria-hidden="true" >
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </div>

This is how the js would look like:

import van from './van';

const initDropdown = (attr) => {
  const menu = document.querySelector(`[${attr}]`);

  van.hydrate(menu, (dom) => {
    const open = van.state(false);
    const toggle = dom.querySelector("[aria-controls]");
    const content = dom.querySelector('[role="menuitem"]');

    toggle.onclick = () => {
      open.val = !open.val;
      toggle.setAttribute("aria-expanded", open.val);
      content.hidden = open.val;
      content.setAttribute("aria-hidden", open.val);
    };

    return dom;
  });
};

initDropdown('role="menu"');

Here's the link to codesandbox.

[Tao-VanJS]

VanJS positions itself as an unopinionated framework where people can choose from a procedural style or a declarative style of programming for each specific problem they're trying to solve. Thus the style of your code is definitely recommended.

Alternatively, you can also build the app in a declarative style, like that:

const Menu = () => {
  const open = van.state(false)
  return div({role: "menu"},
    button({"aria-controls": "menu-content", "aria-expanded": open, onclick: () => open.val = !open.val},
      "Menu",
    ),
    div({id: "menu-content", role: "menuitem", hidden: "", "aria-hidden": () => !open.val},
      ul(
        li(a({href: "#"}, "Home")),
        li(a({href: "#"}, "About")),
      ),
    ),
  )
}

van.hydrate(document.querySelector('[role="menu"]'), Menu)

A minor downside (most likely negligible) is a slight overhead at hydration time due to the re-rendering of the DOM tree for Menu.

[kennyfrc]

Great! Thank you.