@jxsuite/runtime 2.0.5 → 3.0.0

package/README.md

@@ -4,7 +4,7 @@
 
 ## Overview
 
-The runtime mounts Jx documents into the browser DOM. It walks the JSON tree, constructs DOM nodes, and wires reactive effects using [`@vue/reactivity`](https://github.com/vuejs/core/tree/main/packages/reactivity). State is tracked automatically — no virtual DOM, no diffing.
+The runtime mounts Jx documents into the browser DOM. It walks the JSON tree, constructs DOM nodes, and wires reactive effects using [`@vue/reactivity`](https://github.com/vuejs/core/tree/main/packages/reactivity). State is tracked automatically: no virtual DOM, no diffing.
 
 ## Installation
 
@@ -55,7 +55,7 @@ Each document goes through four steps:
 | Map item | `{ "$ref": "$map/item" }`      | Current item in `Array` iteration                           |
 | Parent   | `{ "$ref": "parent#/color" }`  | Prop passed via `$props`                                    |
 | Window   | `{ "$ref": "window#/config" }` | Window global                                               |
-| External | `{ "$ref": "./card.json" }`    | Component doc — via `$switch`/`$elements`, not a bare child |
+| External | `{ "$ref": "./card.json" }`    | Component doc (via `$switch`/`$elements`, not a bare child) |
 
 ## Custom element support
 

package/dist/runtime.js

@@ -2032,6 +2032,47 @@ function isPrivateStateKey(key) {
   return key.startsWith("#");
 }
 
+// ../schema/src/asset-paths.ts
+var URL_TERMINATOR = String.raw`"'\s<>()\\`;
+function parseSrcset(value) {
+  const out = [];
+  let i = 0;
+  while (i < value.length) {
+    while (i < value.length && (/\s/.test(value[i]) || value[i] === ",")) {
+      i += 1;
+    }
+    if (i >= value.length) {
+      break;
+    }
+    const start = i;
+    while (i < value.length && !/\s/.test(value[i])) {
+      i += 1;
+    }
+    let url = value.slice(start, i);
+    if (url.endsWith(",")) {
+      out.push({ descriptor: "", url: url.replace(/,+$/, "") });
+      continue;
+    }
+    while (i < value.length && /\s/.test(value[i])) {
+      i += 1;
+    }
+    const descStart = i;
+    while (i < value.length && value[i] !== ",") {
+      i += 1;
+    }
+    const descriptor = value.slice(descStart, i).trim();
+    i += 1;
+    url = url.replace(/,+$/, "");
+    if (url !== "") {
+      out.push({ descriptor, url });
+    }
+  }
+  return out;
+}
+function formatSrcset(candidates) {
+  return candidates.map(({ url, descriptor }) => descriptor ? `${url} ${descriptor}` : url).join(", ");
+}
+
 // src/statements.ts
 function statementKind(statement) {
   if ("operator" in statement) {
@@ -2153,7 +2194,7 @@ function checkSchemaVersion($schema) {
   }
 }
 async function Jx(source, target = document.body, options) {
-  const base = typeof source === "string" ? new URL(source, location.href).href : location.href;
+  const base = options?.base ? new URL(options.base, location.href).href : typeof source === "string" ? new URL(source, location.href).href : location.href;
   const doc = await resolve(source);
   checkSchemaVersion(doc.$schema);
   if (doc.$elements) {
@@ -2268,6 +2309,52 @@ function canvasAttrName(el, key) {
   }
   return key;
 }
+var _canvasAssetResolver = null;
+function setCanvasAssetResolver(fn) {
+  _canvasAssetResolver = fn;
+}
+var ASSET_KEYS = new Set(["src", "poster", "data"]);
+var SRCSET_KEYS = new Set(["srcset", "imagesrcset"]);
+var HREF_ASSET_TAGS = new Set(["LINK"]);
+function isAssetKey(tagName, key) {
+  return ASSET_KEYS.has(key) || key === "href" && HREF_ASSET_TAGS.has(tagName);
+}
+function canvasAssetValue(tagName, key, value) {
+  if (!_canvasAssetResolver || value === "") {
+    return value;
+  }
+  const name = key.toLowerCase();
+  if (SRCSET_KEYS.has(name)) {
+    const candidates = parseSrcset(value);
+    let changed = false;
+    const next = candidates.map((candidate) => {
+      const resolved = _canvasAssetResolver?.(candidate.url, name) ?? null;
+      if (resolved === null || resolved === candidate.url) {
+        return candidate;
+      }
+      changed = true;
+      return { descriptor: candidate.descriptor, url: resolved };
+    });
+    return changed ? formatSrcset(next) : value;
+  }
+  if (!isAssetKey(tagName, name)) {
+    return value;
+  }
+  return _canvasAssetResolver(value, name) ?? value;
+}
+var CSS_URL_RE = /\burl\(\s*(?<q>["']?)(?<u>[^"')]*)\k<q>\s*\)/g;
+function canvasStyleUrls(value) {
+  if (!_canvasAssetResolver || !value.includes("url(")) {
+    return value;
+  }
+  return value.replaceAll(CSS_URL_RE, (whole, quote, url) => {
+    const resolved = url === "" ? null : _canvasAssetResolver?.(url, "url()") ?? null;
+    return resolved === null ? whole : `url(${quote}${resolved}${quote})`;
+  });
+}
+function canvasStyleValue(value) {
+  return transposeCanvasUnits(canvasStyleUrls(value));
+}
 var _stampPropBindings = false;
 function setStampPropBindings(on) {
   _stampPropBindings = on;
@@ -2441,6 +2528,32 @@ function evaluateTemplate(str, state) {
   const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
   return fn(state, $map, $map?.item, $map?.index);
 }
+function isSingleExpression(str) {
+  if (!str.startsWith("${") || !str.endsWith("}")) {
+    return false;
+  }
+  let depth = 0;
+  for (let i = 1;i < str.length; i += 1) {
+    const c = str[i];
+    if (c === "{") {
+      depth += 1;
+    } else if (c === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return i === str.length - 1;
+      }
+    }
+  }
+  return false;
+}
+function evaluateAttrTemplate(str, state) {
+  if (!isSingleExpression(str)) {
+    return evaluateTemplate(str, state);
+  }
+  const $map = state?.$map;
+  const fn = new Function("state", "$map", "item", "index", `return (${str.slice(2, -1)})`);
+  return fn(state, $map, $map?.item, $map?.index);
+}
 var _moduleCache = new Map;
 async function resolveFunction(def2, state, key, base) {
   if (def2.body && def2.$src) {
@@ -2544,6 +2657,17 @@ var RESERVED_KEYS = new Set([
   "observedAttributes"
 ]);
 var warnedRefChildren = new Set;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+function elementNamespace(tagName, inherited) {
+  if (tagName === "svg") {
+    return SVG_NS;
+  }
+  if (tagName === "math") {
+    return MATHML_NS;
+  }
+  return inherited ?? null;
+}
 function renderNode(def2, state, options) {
   const path = options?._path ?? [];
   if (typeof def2 === "string" || typeof def2 === "number" || typeof def2 === "boolean") {
@@ -2586,7 +2710,9 @@ function renderNode(def2, state, options) {
   if (def2.$switch) {
     return renderSwitch(def2, localState, options);
   }
-  const el = document.createElement(tagName);
+  const ns = elementNamespace(tagName, options?._ns);
+  const childNs = tagName === "foreignObject" ? null : ns;
+  const el = ns ? document.createElementNS(ns, tagName) : document.createElement(tagName);
   if (options?.onNodeCreated) {
     options.onNodeCreated(el, path, def2, localState);
   }
@@ -2595,12 +2721,12 @@ function renderNode(def2, state, options) {
   applyAttributes(el, def2.attributes ?? {}, localState);
   const kids = def2.children;
   if (isMappedArray(kids)) {
-    const arrOpts = options ? { ...options, _path: [...path, "children"] } : undefined;
+    const arrOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children"] } : undefined;
     renderMappedArrayInto(el, kids, localState, arrOpts);
   } else if (Array.isArray(kids)) {
     for (let i = 0;i < kids.length; i++) {
       const child = kids[i];
-      const childOpts = options ? { ...options, _path: [...path, "children", i] } : undefined;
+      const childOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children", i] } : undefined;
       if (isMappedArray(child)) {
         renderMappedArrayInto(el, child, localState, childOpts);
       } else {
@@ -2659,6 +2785,15 @@ function bindProperty(el, key, val, state) {
   if (boundProp) {
     el.dataset.jxBoundProp = boundProp;
   }
+  const asAsset = (resolved) => typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+  const write = (resolved) => {
+    const node = el;
+    if (key === "className" && !(node instanceof HTMLElement)) {
+      node.setAttribute("class", resolved == null ? "" : String(resolved));
+      return;
+    }
+    target[key] = resolved;
+  };
   if (isRefObj(val)) {
     const refVal = val;
     if (key === "id") {
@@ -2666,17 +2801,17 @@ function bindProperty(el, key, val, state) {
       return;
     }
     effect(() => {
-      target[key] = resolveRef(refVal.$ref, state);
+      write(asAsset(resolveRef(refVal.$ref, state)));
     });
     return;
   }
   if (isTemplateString(val)) {
     effect(() => {
-      target[key] = evaluateTemplate(val, state);
+      write(asAsset(evaluateTemplate(val, state)));
     });
     return;
   }
-  target[key] = val;
+  write(asAsset(val));
 }
 function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   const nested = {};
@@ -2711,19 +2846,19 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (prop.startsWith("--")) {
       if (isTemplateString(val)) {
         effect(() => {
-          el.style.setProperty(prop, transposeCanvasUnits(evaluateTemplate(val, state)));
+          el.style.setProperty(prop, canvasStyleValue(evaluateTemplate(val, state)));
         });
       } else {
-        el.style.setProperty(prop, transposeCanvasUnits(scalar));
+        el.style.setProperty(prop, canvasStyleValue(scalar));
       }
     } else if (isTemplateString(val)) {
       effect(() => {
-        el.style[prop] = transposeCanvasUnits(evaluateTemplate(val, state));
+        el.style[prop] = canvasStyleValue(evaluateTemplate(val, state));
       });
     } else if (mediaOverriddenProps.has(prop)) {
       baseDecls[prop] = scalar;
     } else {
-      el.style[prop] = transposeCanvasUnits(scalar);
+      el.style[prop] = canvasStyleValue(scalar);
     }
   }
   const hasNested = Object.keys(nested).length > 0;
@@ -2782,7 +2917,7 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (key === "@--") {
       continue;
     }
-    const query = key.startsWith("@--") ? mediaQueries[key.slice(1)] ?? key.slice(1) : key.startsWith("@(") ? key.slice(1) : null;
+    const query = resolveAtQuery(key, mediaQueries);
     const atRule = query === null ? key : `@media ${query}`;
     const scope = `[data-jx="${uid}"]`;
     const scheme = query === null ? null : pureSchemeOf(query);
@@ -2815,15 +2950,35 @@ function reapplyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   delete el.dataset.jx;
   applyStyle(el, styleDef ?? {}, mediaQueries, state);
 }
+var ENUMERATED_ATTRS = new Set(["contenteditable", "draggable", "spellcheck"]);
+function booleanAttrValue(name, value) {
+  const lower = name.toLowerCase();
+  if (lower.startsWith("aria-") || ENUMERATED_ATTRS.has(lower)) {
+    return String(value);
+  }
+  return value ? "" : null;
+}
 function applyAttributes(el, attrs, state) {
   for (const [k, v] of Object.entries(attrs)) {
     const attr = canvasAttrName(el, k);
+    const write = (resolved) => {
+      if (typeof resolved === "boolean") {
+        const text = booleanAttrValue(attr, resolved);
+        if (text === null) {
+          el.removeAttribute(attr);
+        } else {
+          el.setAttribute(attr, text);
+        }
+        return;
+      }
+      el.setAttribute(attr, canvasAssetValue(el.tagName, k, String(resolved ?? "")));
+    };
     if (isRefObj(v)) {
-      effect(() => el.setAttribute(attr, String(resolveRef(v.$ref, state) ?? "")));
+      effect(() => write(resolveRef(v.$ref, state)));
     } else if (isTemplateString(v)) {
-      effect(() => el.setAttribute(attr, String(evaluateTemplate(v, state))));
+      effect(() => write(evaluateAttrTemplate(v, state)));
     } else {
-      el.setAttribute(attr, String(v));
+      write(v);
     }
   }
 }
@@ -3502,7 +3657,18 @@ function camelToKebab(s) {
   return s.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 }
 function toCSSText(rules) {
-  return Object.entries(rules).filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${camelToKebab(p)}: ${transposeCanvasUnits(String(v))}`).join("; ");
+  return Object.entries(rules).filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${camelToKebab(p)}: ${canvasStyleValue(String(v))}`).join("; ");
+}
+var MEDIA_TYPES = new Set(["all", "print", "screen", "speech"]);
+function resolveAtQuery(atKey, mediaQueries) {
+  if (atKey.startsWith("@--")) {
+    return mediaQueries[atKey.slice(1)] ?? atKey.slice(1);
+  }
+  if (atKey.startsWith("@(")) {
+    const inner = atKey.slice(2, -1).trim();
+    return MEDIA_TYPES.has(inner.toLowerCase()) ? inner : atKey.slice(1);
+  }
+  return null;
 }
 var COLOR_SCHEME_ATTR = "data-color-scheme";
 var COLOR_SCHEME_STORAGE_KEY = "jx-color-scheme";
@@ -3564,9 +3730,14 @@ function injectHead(entries, _base) {
     const attrs = { ...entry.attributes };
     for (const key of ["href", "src"]) {
       const v = attrs[key];
-      if (typeof v === "string" && v && !v.startsWith("/") && !v.startsWith(".") && !v.startsWith("http")) {
+      if (typeof v !== "string" || v === "") {
+        continue;
+      }
+      if (!v.startsWith("/") && !v.startsWith(".") && !v.startsWith("http")) {
         attrs[key] = `/node_modules/${v}`;
+        continue;
       }
+      attrs[key] = canvasAssetValue(tag.toUpperCase(), key, v);
     }
     const selector = `${tag}${attrs.href ? `[href="${attrs.href}"]` : ""}${attrs.src ? `[src="${attrs.src}"]` : ""}`;
     if (selector !== tag && document.head.querySelector(selector)) {
@@ -3681,6 +3852,9 @@ async function defineElement(source, baseUrl) {
       }
       applyStyle(this, def2.style ?? {}, state["$media"] ?? {}, state);
       applyAttributes(this, def2.attributes ?? {}, state);
+      if (!Array.isArray(def2.children) && def2.textContent !== undefined) {
+        bindProperty(this, "textContent", def2.textContent, state);
+      }
       const children = Array.isArray(def2.children) ? def2.children : [];
       for (const childDef of children) {
         this.append(renderNode(childDef, state));
@@ -3727,19 +3901,21 @@ function renderCustomElementWithProps(def2, state, options, path) {
     if (refusePrivateProp(key, "$props")) {
       continue;
     }
+    const write = (resolved) => {
+      el[key] = typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+    };
     if (isRefObj(val)) {
       const refVal = val;
-      const resolved = resolveRef(refVal.$ref, state);
-      el[key] = resolved;
+      write(resolveRef(refVal.$ref, state));
       effect(() => {
-        el[key] = resolveRef(refVal.$ref, state);
+        write(resolveRef(refVal.$ref, state));
       });
     } else if (isTemplateString(val)) {
       effect(() => {
-        el[key] = evaluateTemplate(val, state);
+        write(evaluateTemplate(val, state));
       });
     } else {
-      el[key] = val;
+      write(val);
     }
   }
   applyStyle(el, def2.style ?? {}, state["$media"] ?? {}, state);
@@ -3791,22 +3967,27 @@ export {
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
   applyStyle,
+  booleanAttrValue,
   buildScope,
   camelToKebab,
+  canvasStyleValue,
   defineElement,
   elementStyleTags,
   hasSchemaKeywords,
   isSignal,
+  isSingleExpression,
   observeScope,
   pureSchemeOf,
   reapplyStyle,
   renderNode,
   resolve,
+  resolveAtQuery,
   resolvePrototype,
   resolveRef,
   resolveTagName,
   runScoped,
   schemeSelectors,
+  setCanvasAssetResolver,
   setCanvasDelinkAnchors,
   setCanvasViewportTranspose,
   setResolveToken,
@@ -3819,5 +4000,5 @@ export {
   transposeCanvasUnits
 };
 
-//# debugId=619B22D180EBAE7164756E2164756E21
+//# debugId=33CA9AA2BD53687064756E2164756E21
 //# sourceMappingURL=runtime.js.map