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

@@ -2194,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) {
@@ -2528,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) {
@@ -2924,16 +2950,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);
     }
@@ -3924,6 +3967,7 @@ export {
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
   applyStyle,
+  booleanAttrValue,
   buildScope,
   camelToKebab,
   canvasStyleValue,
@@ -3931,6 +3975,7 @@ export {
   elementStyleTags,
   hasSchemaKeywords,
   isSignal,
+  isSingleExpression,
   observeScope,
   pureSchemeOf,
   reapplyStyle,
@@ -3955,5 +4000,5 @@ export {
   transposeCanvasUnits
 };
 
-//# debugId=632439861BE4D5D264756E2164756E21
+//# debugId=33CA9AA2BD53687064756E2164756E21
 //# sourceMappingURL=runtime.js.map