@solidjs/h 2.0.0-experimental.9 → 2.0.0-rc.1

package/README.md

@@ -6,31 +6,37 @@ HyperScript function takes a few forms. The 2nd props argument is optional. Chil
 
 ```js
 // create an element with a title attribute
-h("button", { title: "My button" }, "Click Me")
+h("button", { title: "My button" }, "Click Me");
 
 // create a component with a title prop
-h(Button, { title: "My button" }, "Click Me")
+h(Button, { title: "My button" }, "Click Me");
 
 // create an element with many children
-h("div", { title: "My button" }, h("span", "1"), h("span", "2"), h("span", "3"))
+h("div", { title: "My button" }, h("span", "1"), h("span", "2"), h("span", "3"));
 ```
 
 This is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).
 
+> `h(...)` returns a tagged zero-arity thunk rather than a DOM node directly.
+> Pass a function reference (or `() => h(App)`) to `render(...)` so the thunk
+> is invoked inside the root. Nested `h(...)` thunks auto-invoke when consumed,
+> so composition with control-flow components like `<For>` and `<Show>` works
+> without extra wrapping.
+
 ## Example
 
 ```js
-import { render } from "solid-js/web";
-import h from "solid-js/h";
+import { render } from "@solidjs/web";
+import h from "@solidjs/h";
 import { createSignal } from "solid-js";
 
 function Button(props) {
-  return h("button.btn-primary", props)
+  return h("button.btn-primary", props);
 }
 
 function Counter() {
   const [count, setCount] = createSignal(0);
-  const increment = (e) => setCount(c => c + 1);
+  const increment = e => setCount(c => c + 1);
 
   return h(Button, { type: "button", onClick: increment }, count);
 }
@@ -38,6 +44,21 @@ function Counter() {
 render(Counter, document.getElementById("app"));
 ```
 
+## TypeScript JSX
+
+When using TypeScript's automatic JSX runtime with hyperscript, point `jsxImportSource` at `@solidjs/h`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@solidjs/h"
+  }
+}
+```
+
+`solid-js` does not provide JSX runtime types in 2.0. Web JSX should use `@solidjs/web`; hyperscript JSX should use `@solidjs/h`.
+
 ## Differences from JSX
 
 There are a few differences from Solid's JSX that are important to note. And also apply when attempting use any transformation that would compile to HyperScript.
@@ -46,22 +67,22 @@ There are a few differences from Solid's JSX that are important to note. And als
 
 ```js
 // jsx
-<div id={props.id}>{firstName() + lastName()}</div>
+<div id={props.id}>{firstName() + lastName()}</div>;
 
 // hyperscript
-h("div", { id: () => props.id }, () => firstName() + lastName())
+h("div", { id: () => props.id }, () => firstName() + lastName());
 ```
 
 2. Merging spreads requires using the merge props helper to keep reactivity
 
 ```js
 // jsx
-<div class={selectedClass()} {...props} />
+<div class={selectedClass()} {...props} />;
 
 // hyperscript
-import { mergeProps } from "solid-js"
+import { merge } from "solid-js";
 
-h("div", mergeProps({ class: selectedClass }, props))
+h("div", merge({ class: selectedClass }, props));
 ```
 
 3. Events on components require explicit event in the arguments
@@ -70,10 +91,10 @@ Solid's HyperScript automatically wraps functions passed to props of components
 
 ```js
 // good
-h(Button, { onClick: (e) => console.log("Hi")});
+h(Button, { onClick: e => console.log("Hi") });
 
 // bad
-h(Button, { onClick: () => console.log("Hi")})
+h(Button, { onClick: () => console.log("Hi") });
 ```
 
 4. All refs are callback form
@@ -83,17 +104,17 @@ We can't do the compiled assignment trick so only the callback form is supported
 ```js
 let myEl;
 
-h(div, { ref: (el) => myEl = el });
+h(div, { ref: el => (myEl = el) });
 ```
 
 5. There is a shorthand for static id and classes
 
 ```js
-h("div#some-id.my-class")
+h("div#some-id.my-class");
 ```
 
 6. Fragments are just arrays
 
 ```js
-[h("span", "1"), h("span", "2")]
+[h("span", "1"), h("span", "2")];
 ```

package/dist/h.cjs

@@ -2,15 +2,54 @@
 
 var web = require('@solidjs/web');
 
+const $ELEMENT = Symbol("hyper-element");
+const $WRAPPED = Symbol("hyper-wrapped");
+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;
+}
+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;
+}
 function createHyperScript(r) {
-  function h() {
-    let args = [].slice.call(arguments),
-      e,
-      classes = [],
-      multiExpression = false;
+  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 (l == null) ;else if ("string" === type) {
+      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()));
@@ -35,29 +74,27 @@ function createHyperScript(r) {
             dynamic = true;
           } else if (d[k].get) dynamic = true;
         }
-        dynamic ? r.spread(e, l, e instanceof SVGElement, !!args.length) : r.assign(e, l, e instanceof SVGElement, !!args.length);
+        dynamic ? r.spread(e, l, !!args.length) : r.assign(e, l, !!args.length);
       } else if ("function" === type) {
         if (!e) {
-          let props,
-            next = args[0];
-          if (next == null || typeof next === "object" && !Array.isArray(next) && !(next instanceof Element)) props = args.shift();
-          props || (props = {});
-          if (args.length) {
-            props.children = args.length > 1 ? args : args[0];
-          }
-          const d = Object.getOwnPropertyDescriptors(props);
-          for (const k in d) {
-            if (typeof d[k].value === "function" && !d[k].value.length) r.dynamicProperty(props, k);
+          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];
+          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);
+          while (typeof e === "function" && e[$ELEMENT]) e = e();
           args = [];
-        } else {
-          r.insert(e, l, multiExpression ? null : undefined);
-        }
+        } else if (l[$ELEMENT]) item(l());else r.insert(e, l, multiExpression ? null : undefined);
       }
     }
-    if (args.length === 1 && Array.isArray(args[0])) return args[0];
-    typeof args[0] === "string" && detectMultiExpression(args);
+    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;
@@ -68,7 +105,7 @@ function createHyperScript(r) {
         const v = m[i],
           s = v.substring(1, v.length);
         if (!v) continue;
-        if (!e) e = r.SVGElements.has(v) ? document.createElementNS("http://www.w3.org/2000/svg", v) : document.createElement(v);else if (v[0] === ".") classes.push(s);else if (v[0] === "#") e.setAttribute("id", s);
+        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) {
@@ -92,7 +129,10 @@ const h = createHyperScript({
   insert: web.insert,
   createComponent: web.createComponent,
   dynamicProperty: web.dynamicProperty,
-  SVGElements: web.SVGElements
+  untrack: web.untrack,
+  SVGElements: web.SVGElements,
+  MathMLElements: web.MathMLElements,
+  Namespaces: web.Namespaces
 });
 
 module.exports = h;

package/dist/h.js

@@ -1,14 +1,53 @@
-import { spread, assign, insert, createComponent, dynamicProperty, SVGElements } from '@solidjs/web';
+import { Namespaces, MathMLElements, SVGElements, untrack, dynamicProperty, createComponent, insert, assign, spread } from '@solidjs/web';
 
+const $ELEMENT = Symbol("hyper-element");
+const $WRAPPED = Symbol("hyper-wrapped");
+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;
+}
+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;
+}
 function createHyperScript(r) {
-  function h() {
-    let args = [].slice.call(arguments),
-      e,
-      classes = [],
-      multiExpression = false;
+  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 (l == null) ;else if ("string" === type) {
+      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()));
@@ -33,29 +72,27 @@ function createHyperScript(r) {
             dynamic = true;
           } else if (d[k].get) dynamic = true;
         }
-        dynamic ? r.spread(e, l, e instanceof SVGElement, !!args.length) : r.assign(e, l, e instanceof SVGElement, !!args.length);
+        dynamic ? r.spread(e, l, !!args.length) : r.assign(e, l, !!args.length);
       } else if ("function" === type) {
         if (!e) {
-          let props,
-            next = args[0];
-          if (next == null || typeof next === "object" && !Array.isArray(next) && !(next instanceof Element)) props = args.shift();
-          props || (props = {});
-          if (args.length) {
-            props.children = args.length > 1 ? args : args[0];
-          }
-          const d = Object.getOwnPropertyDescriptors(props);
-          for (const k in d) {
-            if (typeof d[k].value === "function" && !d[k].value.length) r.dynamicProperty(props, k);
+          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];
+          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);
+          while (typeof e === "function" && e[$ELEMENT]) e = e();
           args = [];
-        } else {
-          r.insert(e, l, multiExpression ? null : undefined);
-        }
+        } else if (l[$ELEMENT]) item(l());else r.insert(e, l, multiExpression ? null : undefined);
       }
     }
-    if (args.length === 1 && Array.isArray(args[0])) return args[0];
-    typeof args[0] === "string" && detectMultiExpression(args);
+    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;
@@ -66,7 +103,7 @@ function createHyperScript(r) {
         const v = m[i],
           s = v.substring(1, v.length);
         if (!v) continue;
-        if (!e) e = r.SVGElements.has(v) ? document.createElementNS("http://www.w3.org/2000/svg", v) : document.createElement(v);else if (v[0] === ".") classes.push(s);else if (v[0] === "#") e.setAttribute("id", s);
+        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) {
@@ -90,7 +127,10 @@ const h = createHyperScript({
   insert,
   createComponent,
   dynamicProperty,
-  SVGElements
+  untrack,
+  SVGElements,
+  MathMLElements,
+  Namespaces
 });
 
 export { h as default };

package/jsx-runtime/types/index.d.ts

@@ -0,0 +1,7 @@
+export type { JSX } from "./jsx.d.ts";
+import type { JSX } from "./jsx.d.ts";
+declare function Fragment(props: {
+    children: JSX.Element;
+}): JSX.Element;
+declare function jsx(type: any, props: any): JSX.Element;
+export { jsx, jsx as jsxs, jsx as jsxDEV, Fragment };

package/jsx-runtime/types/jsx-properties.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Shared type-level helpers used to derive `prop:*` attribute typings from
+ * DOM element interfaces (e.g. `HTMLInputElement`, `HTMLButtonElement`).
+ *
+ * The wrapping of each value (`FunctionMaybe<T>` in `jsx-h.d.ts` vs. the
+ * raw value in `jsx.d.ts`) is applied by each consumer when composing its
+ * own `Properties<T>` mapped type. That way this file stays identical in
+ * both reactive and non-reactive contexts and only needs to exist once.
+ *
+ * originally from
+ * @url https://github.com/potahtml/pota
+ */
+
+/** Base-class properties shared by all elements — skipped from `prop:*`. */
+export type SkipPropsFrom = HTMLUnknownElement & HTMLElement & Element & Node;
+
+/**
+ * Value types allowed on a `prop:*`. Primitives plus the writable
+ * non-primitive DOM-object props worth exposing:
+ *
+ * - `HTMLMediaElement.srcObject`
+ * - `HTMLButtonElement.popoverTargetElement` / `commandForElement` (and the same via
+ *   `PopoverTargetAttributes` mixin on `HTMLInputElement`)
+ */
+export type PropValue =
+  | string
+  | number
+  | boolean
+  | null
+  | MediaStream
+  | MediaSource
+  | Blob
+  | File
+  | Date
+  | Element;
+
+/**
+ * Ergonomics widening for emitted `prop:*` value types:
+ *
+ * - general `string` → `string | number` (HTML coerces numbers)
+ * - string literal unions (`'on' | 'off'`) stay exact, so users still get autocomplete /
+ *   narrowing
+ * - other types pass through unchanged
+ */
+type WidenString<V> = string extends V ? string | number : V;
+export type WidenPropValue<V> = [V] extends [string] ? WidenString<V> : V;
+
+/**
+ * Structurally identical → `Y`; distinct → `N`. Used by `IsReadonlyKey` to detect
+ * readonly keys by comparing `Pick<T, K>` with `Readonly<Pick<T, K>>`.
+ */
+export type IfEquals<A, B, Y = unknown, N = never> =
+  (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? Y : N;
+
+/**
+ * True when `K` is readonly on `T`. Singleton-constant properties (e.g.
+ * `tagName: "INPUT"`, `nodeType: 1`) are always `readonly` in `lib.dom.d.ts`, so this
+ * single check covers both readonly and singleton-literal cases.
+ */
+export type IsReadonlyKey<T, K extends keyof T> = IfEquals<
+  Pick<T, K>,
+  Readonly<Pick<T, K>>,
+  true,
+  false
+>;
+
+/**
+ * Resolves to the `prop:K` string literal when `K` is a writable, element-specific
+ * property suitable for a `prop:*` attribute; otherwise resolves to `never` so the
+ * key is filtered out of the resulting mapped type.
+ *
+ * Filters out:
+ *
+ * - base-class keys (via `SkipPropsFrom`)
+ * - aria-* keys (already typed via `AriaAttributes`)
+ * - readonly keys
+ * - keys whose value types fall outside `PropValue`
+ * - the generic `string` index signature (e.g. `HTMLFormElement[name: string]: any`),
+ *   which would otherwise shadow every key with an `any`-typed `prop:*`
+ */
+export type PropKey<T, K extends keyof T> = K extends keyof SkipPropsFrom
+  ? never
+  : K extends string
+    ? string extends K
+      ? never
+      : K extends `aria${string}`
+        ? never
+        : T[K] extends PropValue
+          ? IsReadonlyKey<T, K> extends true
+            ? never
+            : `prop:${K}`
+          : never
+    : never;