@dom-expressions/hyperscript 0.50.0-next.15

package/CHANGELOG.md

@@ -0,0 +1,116 @@
+# hyper-dom-expressions
+
+## 0.50.0-next.15
+
+### Patch Changes
+
+- df03fb8: Move all packages under the `@dom-expressions` npm scope with new names:
+  - `dom-expressions` → `@dom-expressions/runtime`
+  - `babel-plugin-jsx-dom-expressions` → `@dom-expressions/babel-plugin-jsx`
+  - `jsx-dom-expressions-compiler` → `@dom-expressions/jsx-compiler`
+  - `hyper-dom-expressions` → `@dom-expressions/hyperscript`
+  - `tagged-jsx-dom-expressions` → `@dom-expressions/tagged-jsx`
+
+  The old unscoped names stop receiving `next` prereleases and remain in use
+  only by the Solid 1.x maintenance line published from `main`.
+
+  `lit-dom-expressions` is dropped from the prerelease line; it has been
+  superseded by `@dom-expressions/tagged-jsx`.
+
+  `@dom-expressions/jsx-compiler` now distributes prebuilt native binaries
+  through per-platform packages (`@dom-expressions/jsx-compiler-darwin-x64`,
+  `-darwin-arm64`, `-linux-x64-gnu`, `-linux-arm64-gnu`, `-win32-x64-msvc`)
+  resolved automatically via `optionalDependencies`, instead of shipping a
+  binary inside the main package.
+
+## 0.50.0-next.14
+
+## 0.50.0-next.13
+
+## 0.50.0-next.12
+
+### Patch Changes
+
+- 64e9aee: Delegated events are now owned by render roots instead of the document by default. `render()` installs and disposes its delegated listeners with the root, `delegateEvents()` now only declares event demand, and additional listener containers can be registered explicitly for framework features that render outside the root.
+
+## 0.50.0-next.11
+
+### Patch Changes
+
+- d5cd499: Remove `on:` namespace event support from compiler, runtime, JSX types, and renderer packages.
+
+## 0.50.0-next.10
+
+## 0.50.0-next.9
+
+## 0.50.0-next.8
+
+## 0.50.0-next.7
+
+## 0.50.0-next.6
+
+## 0.50.0-next.5
+
+## 0.50.0-next.4
+
+### Patch Changes
+
+- ecd7803: Fix render-prop consumers re-mounting stable children on parent updates in hyperscript. `mapArray`-style helpers (`For`, `Index`, `Show`, etc.) and any third-party JSX-compiled component that re-invokes a callback prop with arguments store whatever the callback returns and re-flatten it on every parent change. With the lazy / tagged-thunk `h(...)` design, returning `h(Row, ...)` from such a callback would store a thunk — re-flattening would re-invoke it and re-run the row component, re-create its DOM, and fire its `onCleanup` even for rows the diff would have kept.
+
+  `h(...)` now materializes any tagged thunks that function props with arity ≥ 1 return — covering 1-arity render-callbacks (`children: row => h(Row, …)`, `header: tab => h(Tab, …)`), 2-arity `mapArray` row callbacks (`(item, index) => h(Row, …)`), event handlers, and higher-arity callbacks alike — so what the consumer stores is already the rendered tree, matching what JSX-compiled call sites produce. Behavior of zero-arity function props (`dynamicProperty` wrap) is unchanged. Arity (so consumers that introspect `cb.length`, e.g. `mapArray` deciding whether to allocate an index signal, see the original signature), `this`-binding when forwarded as a DOM event handler, and identity once the wrap is in place are all preserved. The wrap is idempotent across nested components.
+
+## 0.50.0-next.3
+
+### Patch Changes
+
+- 4c4fb65: Fix ownership leak when composing control-flow components (`For`, `Show`, etc.) in hyperscript (solidjs/solid#2453). `h(...)` now returns a tagged zero-arity thunk whose body runs under `untrack`, so render effects created inside a child component — notably per-row effects created by `mapArray` inside `For` — are rooted under the child's owner instead of whichever `r.insert` effect happens to consume it. Mutating a parent list signal no longer disposes sibling rows' render effects.
+
+  The exported surface changes shape: `h(...)` previously returned a DOM node (or array) eagerly; it now returns a thunk you invoke. Recommended usage is `r.render(h(App), mountEl)` — `render` calls the thunk inside its root. Nested `h(...)` calls compose freely; tagged thunks auto-invoke at consumption and user accessors (`() => expr`) continue to route through `r.insert`. `props.children` is uniformly wrapped via `dynamicProperty` the same way other zero-arity function props are, matching Solid JSX's getter convention — consumers that want reactive re-reads wrap the access in a thunk (`h("p", () => props.children)`).
+
+- 4dae801: Normalize the `repository` field in every package to the standard npm
+  convention: a `git+https://github.com/ryansolid/dom-expressions.git` URL
+  with a `directory` pointing at the package within the monorepo. Restores
+  "View source" / "Open in repo" links on the npm registry and unblocks
+  tooling that resolves source from package metadata.
+
+## 0.50.0-next.2
+
+### Patch Changes
+
+- 39c207c: Fix a SyntaxError when an element has 222+ merged dynamic attributes
+  (solidjs/solid#2682). The internal identifier generator produced `in` at
+  index 221, and since these identifiers are emitted as object shorthand
+  destructuring bindings, the resulting `({ …, in }) => …` could not be parsed.
+  `getNumberedId` now shifts past any natural index that would encode to a JS
+  reserved word, keeping the mapping injective and the output at 2 characters
+  for all practical dynamic counts.
+- 305d9ce: - SSR: Duplicate attributes in JSX without spreads are now deduplicated —
+  `<div class="a" class="b" />` correctly renders as `<div class="b" />`
+  (last-wins), matching client behavior. Previously the compiler kept both
+  attributes in the output.
+  - Client: `setAttributeNS` / `removeAttributeNS` now use matching names when
+    clearing namespaced attributes (e.g. `xlink:href`). Previously removal could
+    leave the attribute in place because it used the local name while the set
+    used the qualified name.
+  - Expanded test coverage across all four packages; no other behavior changes.
+
+## 0.50.0-next.1
+
+### Patch Changes
+
+- ee365e0: - `insert()` accepts an optional 5th `options` argument that is forwarded to the
+  internal `effect()` call, letting callers (e.g. Solid's `render()`) opt into
+  transition-aware initial mounts without otherwise changing `insert`'s
+  behavior.
+  - SSR: `$dflj(ids)` now materializes every id in the list in a single call
+    instead of stopping after the first successful `$dfl`. Callers pass only the
+    keys they intend to materialize, which simplifies the primitive and composes
+    cleanly for bulk-uncollapse cases (e.g. a group activation revealing several
+    held fallbacks at once).
+  - SSR: Fix cascading async root holes in the streaming shell. When an inner
+    Loading boundary resolved its first chunk while the outer shell was still
+    pending, `flushEnd` could call `serializer.flush()` before `doShell()` had
+    written the root `_assets` module map, causing seroval to silently drop the
+    writes and client hydration to fail with "module was not preloaded". Root
+    asset serialization is now memoized and gated on both paths.
+  - Type formatting cleanup in `jsx-properties.d.ts`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Ryan Carniato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# Hyper DOM Expressions
+
+[![Build Status](https://github.com/ryansolid/dom-expressions/workflows/DOMExpressions%20CI/badge.svg)](https://github.com/ryansolid/dom-expressions/actions/workflows/main-ci.yml)
+[![NPM Version](https://img.shields.io/npm/v/@dom-expressions/hyperscript.svg?style=flat)](https://www.npmjs.com/package/@dom-expressions/hyperscript)
+![](https://img.shields.io/bundlephobia/minzip/@dom-expressions/hyperscript.svg?style=flat)
+![](https://img.shields.io/npm/dt/@dom-expressions/hyperscript.svg?style=flat)
+
+HyperScript DSL for [DOM Expressions](https://github.com/ryansolid/dom-expressions), targeting fine-grained reactive libraries that want a no-build authoring syntax.
+
+> **Performance note.** Of the DOM-expressions frontends, hyperscript is the **slowest**. Every `h(...)` call materializes a small tree at runtime, versus the precompiled constants and cloned templates emitted by [`@dom-expressions/babel-plugin-jsx`](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx), or the parse-once-then-clone caching of [`@dom-expressions/tagged-jsx`](https://github.com/ryansolid/dom-expressions/blob/main/packages/tagged-jsx). Both hyper and tagged-jsx run with no build step — if you just want a no-tooling authoring syntax, prefer `@dom-expressions/tagged-jsx`; it's considerably faster. Hyperscript's niche is interop with React-style JSX transforms and other ecosystems that already emit `h(tag, props, …children)` calls.
+
+## Compatible Libraries
+
+- [Solid](https://github.com/ryansolid/solid)
+- [ko-jsx](https://github.com/ryansolid/ko-jsx)
+- [mobx-jsx](https://github.com/ryansolid/mobx-jsx)
+
+## Getting Started
+
+Install alongside DOM Expressions and a reactive library. For Solid:
+
+```sh
+npm install @solidjs/signals dom-expressions @dom-expressions/hyperscript
+```
+
+Initialize `h` against the runtime:
+
+```js
+import { createHyperScript } from "@dom-expressions/hyperscript";
+import * as r from "dom-expressions/src/client";
+
+const h = createHyperScript(r);
+```
+
+Consumers typically re-export a pre-wired `h` — Solid exposes `solid-js/h`.
+
+## The `h` contract
+
+`h(...)` is **lazy**. Every call returns a zero-arity thunk tagged with an internal symbol; the thunk materializes DOM (or invokes the component) under the current reactive owner when called. Laziness is what keeps per-row render effects inside `For`/`mapArray` rooted under their own owners rather than the parent `insert` effect.
+
+```js
+const tree = h("div", h(Counter)); // thunk
+tree(); // materializes DOM
+```
+
+Mount via `r.render`. Pass the thunk directly; `render` invokes it inside its root so the whole tree materializes under that owner:
+
+```js
+import { render } from "dom-expressions/src/client";
+
+const App = () => h("main", h(Home));
+
+render(h(App), document.getElementById("app"));
+```
+
+Inside `h(...)` composition works without ceremony: nested `h(...)` children are invoked once at consumption, and user-supplied accessors (`() => expr`) route through `r.insert` so they stay reactive.
+
+## Components, props, and children
+
+- **Props are uniform.** Zero-arity function props are routed through `dynamicProperty` so reading them invokes the accessor and returns the current value — the same getter-style convention Solid's JSX compiler produces. Function props with arity ≥ 1 (render-callbacks like `children: row => h(Row, …)`, `header: tab => h(Tab, …)`, a `mapArray` `(item, index) => h(Row, …)` row callback, event handlers like `onClick: e => …`, etc.) are wrapped so any nested `h(...)` thunks in the return value are materialized at the call site, matching what JSX-compiled call sites store; this is what keeps `mapArray`-style consumers (`For`, `Index`, `Show`, etc.) from re-running stable row components on list mutations and gives the same property to any third-party JSX-compiled component that re-invokes a callback prop with arguments. Arity (so `cb.length` introspection still works), `this`-binding, and identity once the wrap is in place are all preserved; the wrap is idempotent across nested components.
+
+  > **Footgun (events on components).** Because zero-arity function props on components are wrapped as getters, an event handler written `onClick: () => doStuff()` is invoked at render time and its return value (`undefined`) becomes the prop — the click never fires. Take the unused argument to mark it as a 1-arity callback: `onClick: e => doStuff()`. The same goes for any other component prop you want passed by reference. Solid's `@solidjs/h` README documents this same caveat.
+
+- **`props.children`** mirrors the caller's input:
+
+  | call shape | `props.children` |
+  | --- | --- |
+  | `h(Comp)` | `undefined` |
+  | `h(Comp, { children: v })` | `v` |
+  | `h(Comp, null, a)` | `a` |
+  | `h(Comp, null, a, b, c)` | `[a, b, c]` |
+
+  Nested `h(...)` thunks flow through as-is and auto-invoke once when consumed.
+
+- **Reactive consumption.** `h("p", props.children)` reads `props.children` once at render time. For reactive re-reads, the consumer wraps in its own accessor: `h("p", () => props.children)`. `r.insert` tracks the read and re-runs on change. This mirrors Solid JSX, which compiles `{props.children}` to `insert(el, () => props.children)`.
+
+- **Fragments** are either plain arrays (`[h(...), h(...)]`) or the built-in `h.Fragment` component.
+
+- **JSX-compiler interop.** Components compiled by `@dom-expressions/babel-plugin-jsx` can be invoked from inside `h(...)`. Their bodies see the same `props` shape they expect from compiled call sites (getters for dynamic props, `children` as a value / function / array), so typical library components (e.g. Solid Router routes) work. The reverse direction — passing a hyperscript thunk to compiled call sites expecting an element — is not supported.
+
+## Example
+
+```js
+import { createHyperScript } from "@dom-expressions/hyperscript";
+import * as r from "dom-expressions/src/client";
+import { createSignal, mapArray } from "@solidjs/signals";
+
+const h = createHyperScript(r);
+
+const For = props => mapArray(() => props.each, props.children);
+
+const App = () => {
+  const [rows, setRows] = createSignal([
+    { id: 1, label: "one" },
+    { id: 2, label: "two" }
+  ]);
+  return h(
+    "table.table",
+    h(
+      "tbody",
+      h(For, { each: rows }, row =>
+        h(
+          "tr",
+          h("td.col-md-1", () => row().id),
+          h("td.col-md-4", () => row().label)
+        )
+      )
+    )
+  );
+};
+
+r.render(h(App), document.getElementById("main"));
+```
+
+## Differences from JSX
+
+- Refs are passed as a function prop (`ref: el => { … }`).
+- Reactivity is explicit: wrap expressions in a function when they should be tracked (`() => count()`), including when forwarding a component prop (`h("p", () => props.foo)`).
+- Fragments are arrays (or `h.Fragment`).
+- Tag selectors understand `#id` and `.class` shorthands (`h("div#main.sel", …)`).

package/dist/hyper-dom-expressions.js

@@ -0,0 +1,189 @@
+// Tags h() thunks so consumers can distinguish them from user-written
+// accessors and invoke them once rather than wrapping them in an effect.
+const $ELEMENT = Symbol("hyper-element");
+// Marks callback props that have already been wrapped (see the
+// prop-loop below) so re-passing them through nested `h(Comp, ...)`
+// calls is idempotent — important for identity stability across
+// component boundaries.
+const $WRAPPED = Symbol("hyper-wrapped");
+
+
+
+
+
+
+
+
+
+
+
+// Recursively invokes h() thunks (and walks arrays containing them) so a
+// callback's return value lands in the consumer pre-rendered.
+function resolveThunks(value) {
+  if (typeof value === "function" && value[$ELEMENT]) return resolveThunks(value());
+  if (Array.isArray(value)) {
+    const out = new Array(value.length);
+    for (let i = 0; i < value.length; i++) out[i] = resolveThunks(value[i]);
+    return out;
+  }
+  return value;
+}
+
+// Common arities (1 and 2) are hand-shaped so the wrapped function has
+// the right native `length` without paying for `defineProperty`. 1-arity
+// covers most render-props and 1-arity event handlers; 2-arity covers
+// `mapArray` row callbacks that take an index. Anything higher falls
+// back to rest-args + `apply` and a one-shot `defineProperty`.
+function wrapCallback(orig) {
+  let w;
+  if (orig.length === 1) {
+    w = function (a) {
+      return resolveThunks(orig.call(this, a));
+    };
+  } else if (orig.length === 2) {
+    w = function (a, b) {
+      return resolveThunks(orig.call(this, a, b));
+    };
+  } else {
+    w = function (...args) {
+      return resolveThunks(orig.apply(this, args));
+    };
+    Object.defineProperty(w, "length", { value: orig.length });
+  }
+  w[$WRAPPED] = true;
+  return w;
+}
+
+// Inspired by https://github.com/hyperhype/hyperscript
+function createHyperScript(r) {
+  function h(...rawArgs) {
+    if (rawArgs.length === 1 && Array.isArray(rawArgs[0])) return rawArgs[0];
+    const thunk = () => r.untrack(() => materialize(rawArgs));
+    thunk[$ELEMENT] = true;
+    return thunk;
+  }
+
+  function materialize(args) {
+    let e;
+    let classes = [];
+    let multiExpression = false;
+    args = args.slice();
+
+    function item(l) {
+      if (l == null) return;
+      const type = typeof l;
+      if ("string" === type) {
+        if (!e) parseClass(l);else
+        e.appendChild(document.createTextNode(l));
+      } else if (
+      "number" === type ||
+      "boolean" === type ||
+      "bigint" === type ||
+      "symbol" === type ||
+      l instanceof Date ||
+      l instanceof RegExp)
+      {
+        e.appendChild(document.createTextNode(l.toString()));
+      } else if (Array.isArray(l)) {
+        for (let i = 0; i < l.length; i++) item(l[i]);
+      } else if (l instanceof Element) {
+        r.insert(e, l, multiExpression ? null : undefined);
+      } else if ("object" === type) {
+        let dynamic = false;
+        const d = Object.getOwnPropertyDescriptors(l);
+        for (const k in d) {
+          if (k === "class" && classes.length !== 0) {
+            const value =
+            typeof d["class"].value === "function" ?
+            () => [...classes, d["class"].value()] :
+            [...classes, l["class"]];
+            Object.defineProperty(l, "class", { ...d[k], value });
+            classes = [];
+          }
+          if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
+            r.dynamicProperty(l, k);
+            dynamic = true;
+          } else if (d[k].get) dynamic = true;
+        }
+        dynamic ?
+        r.spread(e, l, !!args.length) :
+        r.assign(e, l, !!args.length);
+      } else if ("function" === type) {
+        if (!e) {
+          const first = args[0];
+          const props =
+          first == null ||
+          typeof first === "object" && !Array.isArray(first) && !(first instanceof Element) ?
+          args.shift() || {} :
+          {};
+          if (args.length) props.children = args.length > 1 ? args : args[0];
+          // Zero-arity props become getters (JSX-getter parity).
+          // Higher-arity callbacks get wrapped so any tagged thunks
+          // they return are materialized at the call site — otherwise
+          // a render-prop consumer (`mapArray`-style `For`/`Index`,
+          // any third-party JSX-compiled component that re-invokes a
+          // callback with arguments) would store the raw thunk and
+          // re-invoke it on every parent change, re-mounting stable
+          // children. `this` is preserved via `.call`/`.apply`; arity
+          // is preserved so consumers that introspect `cb.length`
+          // (e.g. `mapArray` deciding whether to allocate an index
+          // signal) see the original signature.
+          for (const k in props) {
+            const v = props[k];
+            if (typeof v === "function") {
+              if (!v.length) r.dynamicProperty(props, k);else
+              if (!v[$ELEMENT] && !v[$WRAPPED]) {
+                props[k] = wrapCallback(v);
+              }
+            }
+          }
+          e = r.createComponent(l, props);
+          // Drain nested h() thunks so downstream sees the real render result.
+          while (typeof e === "function" && e[$ELEMENT]) e = e();
+          args = [];
+        } else if (l[$ELEMENT]) item(l());else
+        r.insert(e, l, multiExpression ? null : undefined);
+      }
+    }
+
+    if (typeof args[0] === "string") detectMultiExpression(args);
+    while (args.length) item(args.shift());
+    if (e instanceof Element && classes.length) e.classList.add(...classes);
+    return e;
+
+    function parseClass(string) {
+      // Does not understand escaped CSS specials; see
+      // https://mathiasbynens.be/notes/css-escapes.
+      const m = string.split(/([\.#]?[^\s#.]+)/);
+      if (/^\.|#/.test(m[1])) e = document.createElement("div");
+      for (let i = 0; i < m.length; i++) {
+        const v = m[i],
+          s = v.substring(1, v.length);
+        if (!v) continue;
+        if (!e)
+        e = r.SVGElements.has(v) ?
+        document.createElementNS(r.Namespaces.svg, v) :
+        r.MathMLElements.has(v) ?
+        document.createElementNS(r.Namespaces.mathml, v) :
+        document.createElement(v);else
+        if (v[0] === ".") classes.push(s);else
+        if (v[0] === "#") e.setAttribute("id", s);
+      }
+    }
+    function detectMultiExpression(list) {
+      for (let i = 1; i < list.length; i++) {
+        if (typeof list[i] === "function") {
+          multiExpression = true;
+          return;
+        } else if (Array.isArray(list[i])) {
+          detectMultiExpression(list[i]);
+        }
+      }
+    }
+  }
+
+  h.Fragment = (props) => props.children;
+  return h;
+}
+
+export { createHyperScript };

package/lib/hyper-dom-expressions.js

@@ -0,0 +1,191 @@
+'use strict';
+
+// Tags h() thunks so consumers can distinguish them from user-written
+// accessors and invoke them once rather than wrapping them in an effect.
+const $ELEMENT = Symbol("hyper-element");
+// Marks callback props that have already been wrapped (see the
+// prop-loop below) so re-passing them through nested `h(Comp, ...)`
+// calls is idempotent — important for identity stability across
+// component boundaries.
+const $WRAPPED = Symbol("hyper-wrapped");
+
+
+
+
+
+
+
+
+
+
+
+// Recursively invokes h() thunks (and walks arrays containing them) so a
+// callback's return value lands in the consumer pre-rendered.
+function resolveThunks(value) {
+  if (typeof value === "function" && value[$ELEMENT]) return resolveThunks(value());
+  if (Array.isArray(value)) {
+    const out = new Array(value.length);
+    for (let i = 0; i < value.length; i++) out[i] = resolveThunks(value[i]);
+    return out;
+  }
+  return value;
+}
+
+// Common arities (1 and 2) are hand-shaped so the wrapped function has
+// the right native `length` without paying for `defineProperty`. 1-arity
+// covers most render-props and 1-arity event handlers; 2-arity covers
+// `mapArray` row callbacks that take an index. Anything higher falls
+// back to rest-args + `apply` and a one-shot `defineProperty`.
+function wrapCallback(orig) {
+  let w;
+  if (orig.length === 1) {
+    w = function (a) {
+      return resolveThunks(orig.call(this, a));
+    };
+  } else if (orig.length === 2) {
+    w = function (a, b) {
+      return resolveThunks(orig.call(this, a, b));
+    };
+  } else {
+    w = function (...args) {
+      return resolveThunks(orig.apply(this, args));
+    };
+    Object.defineProperty(w, "length", { value: orig.length });
+  }
+  w[$WRAPPED] = true;
+  return w;
+}
+
+// Inspired by https://github.com/hyperhype/hyperscript
+function createHyperScript(r) {
+  function h(...rawArgs) {
+    if (rawArgs.length === 1 && Array.isArray(rawArgs[0])) return rawArgs[0];
+    const thunk = () => r.untrack(() => materialize(rawArgs));
+    thunk[$ELEMENT] = true;
+    return thunk;
+  }
+
+  function materialize(args) {
+    let e;
+    let classes = [];
+    let multiExpression = false;
+    args = args.slice();
+
+    function item(l) {
+      if (l == null) return;
+      const type = typeof l;
+      if ("string" === type) {
+        if (!e) parseClass(l);else
+        e.appendChild(document.createTextNode(l));
+      } else if (
+      "number" === type ||
+      "boolean" === type ||
+      "bigint" === type ||
+      "symbol" === type ||
+      l instanceof Date ||
+      l instanceof RegExp)
+      {
+        e.appendChild(document.createTextNode(l.toString()));
+      } else if (Array.isArray(l)) {
+        for (let i = 0; i < l.length; i++) item(l[i]);
+      } else if (l instanceof Element) {
+        r.insert(e, l, multiExpression ? null : undefined);
+      } else if ("object" === type) {
+        let dynamic = false;
+        const d = Object.getOwnPropertyDescriptors(l);
+        for (const k in d) {
+          if (k === "class" && classes.length !== 0) {
+            const value =
+            typeof d["class"].value === "function" ?
+            () => [...classes, d["class"].value()] :
+            [...classes, l["class"]];
+            Object.defineProperty(l, "class", { ...d[k], value });
+            classes = [];
+          }
+          if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
+            r.dynamicProperty(l, k);
+            dynamic = true;
+          } else if (d[k].get) dynamic = true;
+        }
+        dynamic ?
+        r.spread(e, l, !!args.length) :
+        r.assign(e, l, !!args.length);
+      } else if ("function" === type) {
+        if (!e) {
+          const first = args[0];
+          const props =
+          first == null ||
+          typeof first === "object" && !Array.isArray(first) && !(first instanceof Element) ?
+          args.shift() || {} :
+          {};
+          if (args.length) props.children = args.length > 1 ? args : args[0];
+          // Zero-arity props become getters (JSX-getter parity).
+          // Higher-arity callbacks get wrapped so any tagged thunks
+          // they return are materialized at the call site — otherwise
+          // a render-prop consumer (`mapArray`-style `For`/`Index`,
+          // any third-party JSX-compiled component that re-invokes a
+          // callback with arguments) would store the raw thunk and
+          // re-invoke it on every parent change, re-mounting stable
+          // children. `this` is preserved via `.call`/`.apply`; arity
+          // is preserved so consumers that introspect `cb.length`
+          // (e.g. `mapArray` deciding whether to allocate an index
+          // signal) see the original signature.
+          for (const k in props) {
+            const v = props[k];
+            if (typeof v === "function") {
+              if (!v.length) r.dynamicProperty(props, k);else
+              if (!v[$ELEMENT] && !v[$WRAPPED]) {
+                props[k] = wrapCallback(v);
+              }
+            }
+          }
+          e = r.createComponent(l, props);
+          // Drain nested h() thunks so downstream sees the real render result.
+          while (typeof e === "function" && e[$ELEMENT]) e = e();
+          args = [];
+        } else if (l[$ELEMENT]) item(l());else
+        r.insert(e, l, multiExpression ? null : undefined);
+      }
+    }
+
+    if (typeof args[0] === "string") detectMultiExpression(args);
+    while (args.length) item(args.shift());
+    if (e instanceof Element && classes.length) e.classList.add(...classes);
+    return e;
+
+    function parseClass(string) {
+      // Does not understand escaped CSS specials; see
+      // https://mathiasbynens.be/notes/css-escapes.
+      const m = string.split(/([\.#]?[^\s#.]+)/);
+      if (/^\.|#/.test(m[1])) e = document.createElement("div");
+      for (let i = 0; i < m.length; i++) {
+        const v = m[i],
+          s = v.substring(1, v.length);
+        if (!v) continue;
+        if (!e)
+        e = r.SVGElements.has(v) ?
+        document.createElementNS(r.Namespaces.svg, v) :
+        r.MathMLElements.has(v) ?
+        document.createElementNS(r.Namespaces.mathml, v) :
+        document.createElement(v);else
+        if (v[0] === ".") classes.push(s);else
+        if (v[0] === "#") e.setAttribute("id", s);
+      }
+    }
+    function detectMultiExpression(list) {
+      for (let i = 1; i < list.length; i++) {
+        if (typeof list[i] === "function") {
+          multiExpression = true;
+          return;
+        } else if (Array.isArray(list[i])) {
+          detectMultiExpression(list[i]);
+        }
+      }
+    }
+  }
+
+  h.Fragment = (props) => props.children;
+  return h;
+}
+
+exports.createHyperScript = createHyperScript;

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@dom-expressions/hyperscript",
+  "description": "A Fine-Grained Rendering Runtime API using HyperScript",
+  "version": "0.50.0-next.15",
+  "author": "Ryan Carniato",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryansolid/dom-expressions.git",
+    "directory": "packages/hyperscript"
+  },
+  "main": "lib/hyper-dom-expressions.js",
+  "module": "dist/hyper-dom-expressions.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "devDependencies": {
+    "@dom-expressions/runtime": "0.50.0-next.15"
+  },
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs && tsc",
+    "test": "pnpm run build && jest",
+    "test:coverage": "pnpm run build && jest --coverage"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,28 @@
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+interface Runtime {
+    insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
+    spread(node: Element, accessor: any, skipChildren?: Boolean): void;
+    assign(node: Element, props: any, skipChildren?: Boolean): void;
+    createComponent(Comp: (props: any) => any, props: any): any;
+    dynamicProperty(props: any, key: string): any;
+    untrack<T>(fn: () => T): T;
+    SVGElements: Set<string>;
+    MathMLElements: Set<string>;
+    Namespaces: Record<string, string>;
+}
+type ExpandableNode = Node & {
+    [key: string]: any;
+};
+declare const $ELEMENT: unique symbol;
+export type HyperElement = {
+    (): ExpandableNode | ExpandableNode[];
+    [$ELEMENT]: true;
+};
+export type HyperScript = {
+    (...args: any[]): HyperElement | ExpandableNode[];
+    Fragment: (props: {
+        children: any;
+    }) => any;
+};
+export declare function createHyperScript(r: Runtime): HyperScript;
+export {};