@dom-expressions/runtime 0.50.0-next.15

package/src/constants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Flags
+ *
+ * - 1 - Stateful property - value derives from reactive state
+ * - 2 - Locked to property - value not specially treated
+ */
+export const DOMWithState: Record<string, Record<string, 1 | 2>>;
+
+export const ChildProperties: Set<string>;
+
+export const DelegatedEvents: Set<string>;
+
+export const SVGElements: Set<string>;
+
+export const MathMLElements: Set<string>;
+
+export const VoidElements: Set<string>;
+
+export const RawTextElements: Set<string>;
+
+export const Namespaces: Record<string, string>;
+
+export const DOMElements: Set<string>;

package/src/constants.js

@@ -0,0 +1,517 @@
+/**
+ * Flags
+ *
+ * - 1 - Stateful property - value derives from reactive state
+ * - 2 - Locked to property - value not specially treated
+ */
+const DOMWithState = {
+  INPUT: { value: 1, defaultValue: 2, checked: 1, defaultChecked: 2 },
+  SELECT: { value: 1 },
+  OPTION: { value: 1, selected: 1, defaultSelected: 2 },
+  TEXTAREA: { value: 1, defaultValue: 2 },
+  VIDEO: { muted: 1, defaultMuted: 2 },
+  AUDIO: { muted: 1, defaultMuted: 2 }
+};
+
+const ChildProperties = /*#__PURE__*/ new Set([
+  "innerHTML",
+  "textContent",
+  "innerText",
+  "children"
+]);
+
+// Per-node tag identifying the owning slot's marker. Set on every runtime
+// insertion site so that subsequent reconcile / cleanup work can distinguish
+// "the node still belongs to my slot" from "the node has migrated to another
+// slot in the same parent" without consulting external bookkeeping.
+const $$SLOT = /*#__PURE__*/ Symbol("slot");
+
+// Guard companion to the `_$host` getter applied by `insert`'s `host` option:
+// records which host accessor a node was last tagged with so unchanged nodes
+// skip the `defineProperty` on subsequent updates.
+const $$HOST = /*#__PURE__*/ Symbol("host");
+
+// list of Element events that will be delegated
+const DelegatedEvents = /*#__PURE__*/ new Set([
+  "beforeinput",
+  "click",
+  "dblclick",
+  "contextmenu",
+  "focusin",
+  "focusout",
+  "input",
+  "keydown",
+  "keyup",
+  "mousedown",
+  "mousemove",
+  "mouseout",
+  "mouseover",
+  "mouseup",
+  "pointerdown",
+  "pointermove",
+  "pointerout",
+  "pointerover",
+  "pointerup",
+  "touchend",
+  "touchmove",
+  "touchstart"
+]);
+
+const SVGElements = /*#__PURE__*/ new Set([
+  // "a",
+  "altGlyph",
+  "altGlyphDef",
+  "altGlyphItem",
+  "animate",
+  "animateColor",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "color-profile",
+  "cursor",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "font",
+  "font-face",
+  "font-face-format",
+  "font-face-name",
+  "font-face-src",
+  "font-face-uri",
+  "foreignObject",
+  "g",
+  "glyph",
+  "glyphRef",
+  "hkern",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "missing-glyph",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  // "script",
+  "set",
+  "stop",
+  // "style",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  // "title",
+  "tref",
+  "tspan",
+  "use",
+  "view",
+  "vkern"
+]);
+
+const MathMLElements = /*#__PURE__*/ new Set([
+  "annotation",
+  "annotation-xml",
+  "maction",
+  "math",
+  "menclose",
+  "merror",
+  "mfenced",
+  "mfrac",
+  "mi",
+  "mmultiscripts",
+  "mn",
+  "mo",
+  "mover",
+  "mpadded",
+  "mphantom",
+  "mprescripts",
+  "mroot",
+  "mrow",
+  "ms",
+  "mspace",
+  "msqrt",
+  "mstyle",
+  "msub",
+  "msubsup",
+  "msup",
+  "mtable",
+  "mtd",
+  "mtext",
+  "mtr",
+  "munder",
+  "munderover",
+  "semantics"
+]);
+
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace"
+};
+
+const VoidElements = /*#__PURE__*/ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+
+const RawTextElements = /*#__PURE__*/ new Set([
+  "style",
+  "script",
+  "noscript",
+  "template",
+  "textarea",
+  "title"
+]);
+
+const DOMElements = /*#__PURE__*/ new Set([
+  "html",
+  "base",
+  "head",
+  "link",
+  "meta",
+  "style",
+  "title",
+  "body",
+  "address",
+  "article",
+  "aside",
+  "footer",
+  "header",
+  "main",
+  "nav",
+  "section",
+  "body",
+  "blockquote",
+  "dd",
+  "div",
+  "dl",
+  "dt",
+  "figcaption",
+  "figure",
+  "hr",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "ul",
+  "a",
+  "abbr",
+  "b",
+  "bdi",
+  "bdo",
+  "br",
+  "cite",
+  "code",
+  "data",
+  "dfn",
+  "em",
+  "i",
+  "kbd",
+  "mark",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "time",
+  "u",
+  "var",
+  "wbr",
+  "area",
+  "audio",
+  "img",
+  "map",
+  "track",
+  "video",
+  "embed",
+  "iframe",
+  "object",
+  "param",
+  "picture",
+  "portal",
+  "source",
+  "svg",
+  "math",
+  "canvas",
+  "noscript",
+  "script",
+  "del",
+  "ins",
+  "caption",
+  "col",
+  "colgroup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "button",
+  "datalist",
+  "fieldset",
+  "form",
+  "input",
+  "label",
+  "legend",
+  "meter",
+  "optgroup",
+  "option",
+  "output",
+  "progress",
+  "select",
+  "textarea",
+  "details",
+  "dialog",
+  "menu",
+  "summary",
+  "details",
+  "slot",
+  "template",
+  "acronym",
+  "applet",
+  "basefont",
+  "bgsound",
+  "big",
+  "blink",
+  "center",
+  "content",
+  "dir",
+  "font",
+  "frame",
+  "frameset",
+  "hgroup",
+  "image",
+  "keygen",
+  "marquee",
+  "menuitem",
+  "nobr",
+  "noembed",
+  "noframes",
+  "plaintext",
+  "rb",
+  "rtc",
+  "shadow",
+  "spacer",
+  "strike",
+  "tt",
+  "xmp",
+  "a",
+  "abbr",
+  "acronym",
+  "address",
+  "applet",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "basefont",
+  "bdi",
+  "bdo",
+  "bgsound",
+  "big",
+  "blink",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "center",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "content",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "dir",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "font",
+  "footer",
+  "form",
+  "frame",
+  "frameset",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "image",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "marquee",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "nobr",
+  "noembed",
+  "noframes",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "plaintext",
+  "portal",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "shadow",
+  "slot",
+  "small",
+  "source",
+  "spacer",
+  "span",
+  "strike",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "tt",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  "xmp",
+  "input",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+
+  // special
+  "webview",
+
+  // deprecated
+  "isindex",
+  "listing",
+  "multicol",
+  "nextid",
+  "noindex",
+  "search"
+]);
+
+export {
+  DOMWithState,
+  ChildProperties,
+  DelegatedEvents,
+  SVGElements,
+  MathMLElements,
+  VoidElements,
+  RawTextElements,
+  Namespaces,
+  DOMElements,
+  $$SLOT,
+  $$HOST
+};

package/src/jsx-customize.mjs

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+
+const args = process.argv.slice(2);
+
+function readOption(name) {
+  const index = args.indexOf(`--${name}`);
+  if (index === -1) return undefined;
+  const value = args[index + 1];
+  if (!value || value.startsWith("--")) throw new Error(`Missing value for --${name}`);
+  return value;
+}
+
+const input = readOption("input");
+const output = readOption("output") ?? input;
+const element = readOption("element");
+const imports = args
+  .flatMap((arg, index) => (arg === "--import" ? [args[index + 1]] : []))
+  .filter(Boolean);
+
+if (!input || !element) {
+  throw new Error(
+    [
+      "Usage: jsx-customize --input <jsx.d.ts> --element <type> [--output <jsx.d.ts>] [--import <statement>...]",
+      "",
+      "Example:",
+      '  jsx-customize --input ./src/jsx.d.ts --element "SolidElement | Node | ArrayElement" --import "import type { Element as SolidElement } from \\"solid-js\\";"'
+    ].join("\n")
+  );
+}
+
+let source = fs.readFileSync(input, "utf8");
+
+for (const statement of imports) {
+  source = source.replace(new RegExp(`^${escapeRegExp(statement)}\\n`, "gm"), "");
+}
+
+const importAnchor = 'import type { PropKey, WidenPropValue } from "./jsx-properties.js";';
+if (!source.includes(importAnchor)) {
+  throw new Error(`Unable to find JSX properties import in ${input}`);
+}
+source = source.replace(importAnchor, [importAnchor, ...imports].join("\n"));
+
+const nextSource = source.replace(
+  /type Element =[\s\S]*?\n  \/\/ END - difference between `jsx\.d\.ts` and `jsx-h\.d\.ts`/,
+  `type Element = ${element};\n  // END - difference between \`jsx.d.ts\` and \`jsx-h.d.ts\``
+);
+if (nextSource === source) {
+  throw new Error(`Unable to find JSX.Element declaration block in ${input}`);
+}
+source = nextSource;
+
+fs.writeFileSync(output, source);
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}