@miqro/jsx-dom

browser runtime for @miqro/jsx. define Web Components.

define

wrap a JSX component as a custom element.

import JSX, { useState } from "@miqro/jsx";
import { define } from "@miqro/jsx-dom";

function Counter(props) {
  const [n, setN] = useState(Number(props.initial) || 0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

define("my-counter", Counter, {
  observedAttributes: ["initial"],  // re-render on attribute change
  shadowInit: false                  // or { mode: "open" | "closed" }
});

use in HTML:

<my-counter initial="5"></my-counter>
<script src="/js/counter.js"></script>

props from attributes are always strings. parse manually for other types.

$element$ prop gives access to the raw HTMLElement:

function MyComponent(props) {
  const el = props["$element$"]; // HTMLElement
}

child nodes passed as children prop:

<my-card>
  <p>this becomes children</p>
</my-card>

createDOMContainer

mount any JSX component into a DOM element without defining a custom element.

import { createDOMContainer } from "@miqro/jsx-dom";
import { createElement } from "@miqro/jsx";

const root = document.getElementById("root");
const container = createDOMContainer(root, {
  shadowInit: false,
  runtimeOptions: {
    disableEffects: false,
    disableEvents: false
  }
});

container.render(createElement(MyComponent, { title: "hello" }));
container.disconnect(); // cleanup