@dom-expressions/runtime 0.50.0-next.15

package/src/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;

package/src/jsx-update.mjs

@@ -0,0 +1,96 @@
+/**
+ * This node script naively takes `jsx-h.d.ts` as source and writes a new `jsx.d.ts`:
+ *
+ * - Takes `jsx-h.d.ts` as source
+ * - Removes `FunctionElement` from `type Element`
+ * - Strips `FunctionMaybe` from elements attributes
+ * - Writes a new `jsx.d.ts`
+ *
+ * @see https://github.com/ryansolid/dom-expressions/issues/408
+ */
+
+import fs from "fs";
+import { execSync as $ } from "child_process";
+
+process.chdir("packages/runtime/src");
+
+// ensures source is always pretty printed at commit and free of errors
+
+$(`prettier "./jsx-h.d.ts" --write`);
+
+// copy source to temp file
+
+fs.copyFileSync("./jsx-h.d.ts", "./jsx-h.temp.d.ts");
+
+// make each property a one liner in temp file
+
+$(`prettier "./jsx-h.temp.d.ts" --write --no-editorconfig --print-width 100000`);
+
+// read source
+
+const source = fs.readFileSync("./jsx-h.temp.d.ts").toString().split("\n");
+
+// remove `-h` types
+
+/**
+ * Unwraps every occurrence of `FunctionMaybe<X>` → `X` in a line, with balanced `<>`
+ * matching. Handles nested generics like `FunctionMaybe<WidenPropValue<T[K]>>`, which
+ * the previous `[^>]+` regex could not match.
+ */
+function unwrapFunctionMaybe(line) {
+	const marker = "FunctionMaybe<";
+	let out = "";
+	let i = 0;
+	while (i < line.length) {
+		const idx = line.indexOf(marker, i);
+		if (idx === -1) {
+			out += line.slice(i);
+			break;
+		}
+		out += line.slice(i, idx);
+		let depth = 1;
+		let j = idx + marker.length;
+		while (j < line.length && depth > 0) {
+			const c = line[j];
+			if (c === "<") depth++;
+			else if (c === ">") depth--;
+			if (depth > 0) j++;
+		}
+		// `j` now points at the closing `>` that matches `FunctionMaybe<`.
+		out += line.slice(idx + marker.length, j);
+		i = j + 1;
+	}
+	return out;
+}
+
+for (let i = 0; i < source.length; i++) {
+	const line = source[i].trim();
+
+	if (line.startsWith("type Element")) {
+		// remove `| FunctionElement` from 'type Element'
+		source[i] = line.replace("| FunctionElement", "");
+	} else if (!line.startsWith("type FunctionMaybe") && line.includes("FunctionMaybe")) {
+		// unwrap `FunctionMaybe<X>`
+		source[i] = unwrapFunctionMaybe(source[i]);
+	}
+}
+
+// write result
+
+const banner = `/**
+	THIS FILE IS GENERATED BY \`./jsx-update.mjs\`.
+	PLEASE UPDATE \`jsx-h.d.ts\` INSTEAD AND RUN \`pnpm jsx-sync-types\`.
+*/
+
+`;
+fs.writeFileSync("./jsx.d.ts", banner + source.join("\n"));
+
+// reformat file
+
+$(`prettier "./jsx.d.ts" --write`);
+
+// discard temporal file
+
+fs.unlink("./jsx-h.temp.d.ts", () => {
+	console.log("DONE\n");
+});