@jxsuite/runtime 2.1.0 → 3.1.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

@@ -1384,6 +1384,40 @@ function computed(getterOrOptions, debugOptions, isSSR = false) {
   return cRef;
 }
 
+// src/css.ts
+function camelToKebab(s) {
+  return s.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+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";
+function pureSchemeOf(query) {
+  const m = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim());
+  return m?.[1] ?? null;
+}
+function schemeSelectors(selector, scheme) {
+  if (selector === ":root" || selector === "html") {
+    return {
+      auto: `${selector}:where(:not([${COLOR_SCHEME_ATTR}]))`,
+      forced: `${selector}:where([${COLOR_SCHEME_ATTR}="${scheme}"])`
+    };
+  }
+  return {
+    auto: `:where(:root:not([${COLOR_SCHEME_ATTR}])) ${selector}`,
+    forced: `:where(:root[${COLOR_SCHEME_ATTR}="${scheme}"]) ${selector}`
+  };
+}
+
 // ../schema/src/intl.ts
 var DEFAULT_FORMAT_LOCALE = "en-US";
 var DEFAULT_TIME_ZONE = "UTC";
@@ -2194,7 +2228,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) {
@@ -2528,6 +2562,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) {
@@ -2924,16 +2984,33 @@ 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(() => write(resolveRef(v.$ref, state)));
     } else if (isTemplateString(v)) {
-      effect(() => write(evaluateTemplate(v, state)));
+      effect(() => write(evaluateAttrTemplate(v, state)));
     } else {
       write(v);
     }
@@ -3610,41 +3687,9 @@ function mergeProps(def2, parentState) {
   }
   return child;
 }
-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)}: ${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";
-function pureSchemeOf(query) {
-  const m = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim());
-  return m?.[1] ?? null;
-}
-function schemeSelectors(selector, scheme) {
-  if (selector === ":root" || selector === "html") {
-    return {
-      auto: `${selector}:where(:not([${COLOR_SCHEME_ATTR}]))`,
-      forced: `${selector}:where([${COLOR_SCHEME_ATTR}="${scheme}"])`
-    };
-  }
-  return {
-    auto: `:where(:root:not([${COLOR_SCHEME_ATTR}])) ${selector}`,
-    forced: `:where(:root[${COLOR_SCHEME_ATTR}="${scheme}"]) ${selector}`
-  };
-}
 var _rootMedia = {};
 var _elementDefs = new Map;
 function setRootMedia(map) {
@@ -3924,6 +3969,7 @@ export {
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
   applyStyle,
+  booleanAttrValue,
   buildScope,
   camelToKebab,
   canvasStyleValue,
@@ -3931,6 +3977,7 @@ export {
   elementStyleTags,
   hasSchemaKeywords,
   isSignal,
+  isSingleExpression,
   observeScope,
   pureSchemeOf,
   reapplyStyle,
@@ -3955,5 +4002,5 @@ export {
   transposeCanvasUnits
 };
 
-//# debugId=632439861BE4D5D264756E2164756E21
+//# debugId=899C7FD9D6AF1F1D64756E2164756E21
 //# sourceMappingURL=runtime.js.map