https://vanillajsx.com/

A case for vanilla JSX

What if JSX just returned DOM elements?

View source

export default function ClickMe() {
  let i = 0;
  const el = <button>Click me</button> as HTMLButtonElement;
  el.onclick = (e) => {
    el.textContent = `Clicked ${++i} times`;
  };
  return el;
}

Would they be reusable?

Could they keep their own state?

View source

import ClickMe from "./sample1.js";

export default () => <>
  <p><ClickMe /></p>
  <p><ClickMe /></p>
  <p><ClickMe /></p>
</>;

How would they work together?

Could they create an interactive DOM tree?

View source

function TodoInput(attrs: { add: (v: string) => void }) {
  const input = <input /> as HTMLInputElement;
  input.placeholder = 'Add todo item...';
  input.onkeydown = (e) => {
    if (e.key === 'Enter') {
      attrs.add(input.value);
      input.value = '';
    }
  };
  return input;
}

class TodoList {
  ul = <ul class='todolist' /> as HTMLUListElement;
  add(v: string) {
    const item = <li>{v}</li> as HTMLLIElement;
    item.onclick = () => item.remove();
    this.ul.append(item);
  }
}

export default () => {
  const list = new TodoList();
  list.add('foo');
  list.add('bar');
  return <>
    <TodoInput add={(v) => list.add(v)} />
    {list.ul}
  </>;
};

How would they handle large data?

Could they be convenient without a virtual dom?

View source

import { data } from "../fetch-dataset.js";

export default function FindNames() {
  const status = <p style='margin:1em 0' /> as HTMLParagraphElement;
  const results = <ul /> as HTMLUListElement;
  const input = <input
    value='eri(c|k)a?'
    autocomplete='new-password'
  /> as HTMLInputElement;

  const updateMatches = () => {
    const matched = (data.entries()
      .filter(([k]) => k.match(input.value))
      .toArray());

    const matches = (Iterator.from(matched)
      .map(match => <Item regex={input.value} match={match} />)
      .take(30));

    results.replaceChildren(...matches);
    status.textContent = `${matched.length} / ${data.size}`;
  };

  input.oninput = updateMatches;
  updateMatches();

  return <div class='sample4'>
    {input}
    {status}
    {results}
  </div>;
}

function Item(attrs: { match: [string, number], regex: string }) {
  const [name, count] = attrs.match;
  const total = <small style='color:#fff3'>({count})</small>;
  return <li>
    <span innerHTML={highlight(name, attrs.regex)} /> {total}
  </li>;
}

function highlight(str: string, regex: string) {
  if (!regex) return str;
  const r = new RegExp(`(${regex})`, 'gi');
  return str.replace(r, '<span class="match">$1</span>');
}

That's why I wrote imlib (src).

It came out of my work on immaculatalibrary.com (src).

I started using it to build minigamemaker.com (src).

I also used it to build the website you're reading (<-- src).

It was created because the status quo wasn't good enough for my site.

It is now my favorite way to make apps.

(Also, here's a much better imlib todo-list app (src)).