@jxsuite/runtime 1.1.0 → 1.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Shenk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -49,13 +49,13 @@ Each document goes through four steps:
 
 ## `$ref` bindings
 
-| Pattern  | Example                        | Meaning                           |
-| -------- | ------------------------------ | --------------------------------- |
-| State    | `{ "$ref": "#/state/count" }`  | Reactive state binding            |
-| 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" }`    | Another Jx component              |
+| Pattern  | Example                        | Meaning                                                     |
+| -------- | ------------------------------ | ----------------------------------------------------------- |
+| State    | `{ "$ref": "#/state/count" }`  | Reactive state binding                                      |
+| 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 |
 
 ## Custom element support
 

package/dist/runtime.js

@@ -616,7 +616,7 @@ function track(target, type, key) {
         type,
         key
       });
-    }
+    } else {}
   }
 }
 function trigger(target, type, key, newValue, oldValue, oldTarget) {
@@ -636,7 +636,7 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
           oldValue,
           oldTarget
         });
-      }
+      } else {}
     }
   };
   startBatch();
@@ -1301,7 +1301,7 @@ class RefImpl {
         type: "get",
         key: "value"
       });
-    }
+    } else {}
     return this._value;
   }
   set value(newValue) {
@@ -1319,7 +1319,7 @@ class RefImpl {
           newValue,
           oldValue
         });
-      }
+      } else {}
     }
   }
 }
@@ -1921,6 +1921,12 @@ var SCHEMA_KEYWORDS = new Set([
 function isMappedArray(value) {
   return isJsonObject(value) && value.$prototype === "Array";
 }
+function isTemplateString(value) {
+  return typeof value === "string" && value.includes("${");
+}
+function bodyReturnsValue(body) {
+  return /\breturn\b/.test(body);
+}
 function paramNames(parameters) {
   if (!parameters) {
     return [];
@@ -1997,9 +2003,22 @@ async function runStatements(statements, state, event, opts = {}) {
 }
 
 // src/runtime.ts
+var SUPPORTED_SCHEMA_VERSION = 1;
+var _schemaVersionWarned = false;
+function checkSchemaVersion($schema) {
+  if (_schemaVersionWarned || typeof $schema !== "string") {
+    return;
+  }
+  const match = $schema.match(/\/schema\/v(\d+)\b/);
+  if (match && Number(match[1]) !== SUPPORTED_SCHEMA_VERSION) {
+    _schemaVersionWarned = true;
+    console.warn(`Jx: document $schema is version v${match[1]} but this runtime supports ` + `v${SUPPORTED_SCHEMA_VERSION}. Behavior may be undefined; there is no format migrator yet.`);
+  }
+}
 async function Jx(source, target = document.body, options) {
   const base = typeof source === "string" ? new URL(source, location.href).href : location.href;
   const doc = await resolve(source);
+  checkSchemaVersion(doc.$schema);
   if (doc.$elements) {
     await registerElements(doc.$elements, base);
   }
@@ -2331,9 +2350,9 @@ async function resolveFunction(def2, state, key, base) {
   let isComputed = false;
   if (!hasParams) {
     if (typeof def2.body === "string") {
-      isComputed = /\breturn\b/.test(def2.body);
+      isComputed = bodyReturnsValue(def2.body);
     } else if (fn) {
-      isComputed = fn.length <= 1 && /\breturn\b/.test(fn.toString());
+      isComputed = fn.length <= 1 && bodyReturnsValue(fn.toString());
     }
   }
   if (isComputed) {
@@ -2379,6 +2398,7 @@ var RESERVED_KEYS = new Set([
   "cases",
   "observedAttributes"
 ]);
+var warnedRefChildren = new Set;
 function renderNode(def2, state, options) {
   const path = options?._path ?? [];
   if (typeof def2 === "string" || typeof def2 === "number" || typeof def2 === "boolean") {
@@ -2399,6 +2419,13 @@ function renderNode(def2, state, options) {
       localState[key] = isRefObj(val) ? resolveRef(val.$ref, state) : val;
     }
   }
+  if ("$ref" in def2 && !def2.tagName) {
+    const refTarget = String(def2.$ref ?? "");
+    if (!warnedRefChildren.has(refTarget)) {
+      warnedRefChildren.add(refTarget);
+      console.warn(`Jx: a $ref child ("${refTarget}") is not a supported component instance; register the ` + `component in $elements and use its custom-element tag instead (spec §13).`);
+    }
+  }
   const tagName = def2.tagName ?? "div";
   const isCustomEl = tagName.includes("-") && customElements.get(tagName);
   if (def2.$props && isCustomEl) {
@@ -2435,9 +2462,6 @@ function renderNode(def2, state, options) {
   }
   return el;
 }
-function isTemplateString(val) {
-  return typeof val === "string" && val.includes("${");
-}
 function applyProperties(el, def2, state) {
   for (const [key, val] of Object.entries(def2)) {
     if (RESERVED_KEYS.has(key)) {
@@ -2610,11 +2634,21 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (key === "@--") {
       continue;
     }
-    const atRule = key.startsWith("@--") ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}` : key.startsWith("@(") ? `@media ${key.slice(1)}` : key;
+    const query = key.startsWith("@--") ? mediaQueries[key.slice(1)] ?? key.slice(1) : key.startsWith("@(") ? key.slice(1) : null;
+    const atRule = query === null ? key : `@media ${query}`;
     const scope = `[data-jx="${uid}"]`;
-    css += `${atRule} { ${scope} { ${toCSSText(rules)} } }
+    const scheme = query === null ? null : pureSchemeOf(query);
+    if (scheme) {
+      const { auto, forced } = schemeSelectors(scope, scheme);
+      css += `${atRule} { ${auto} { ${toCSSText(rules)} } }
+`;
+      emitMediaNested(atRule, auto, rules);
+      emitNested(forced, rules);
+    } else {
+      css += `${atRule} { ${scope} { ${toCSSText(rules)} } }
 `;
-    emitMediaNested(atRule, scope, rules);
+      emitMediaNested(atRule, scope, rules);
+    }
   }
   const tag = document.createElement("style");
   tag.textContent = css;
@@ -3305,6 +3339,24 @@ function camelToKebab(s) {
 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("; ");
 }
+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) {
@@ -3560,12 +3612,14 @@ export {
   setResolveToken,
   setCanvasViewportTranspose,
   setCanvasDelinkAnchors,
+  schemeSelectors,
   runScoped,
   resolveRef,
   resolvePrototype,
   resolve,
   renderNode,
   reapplyStyle,
+  pureSchemeOf,
   observeScope,
   isSignal,
   hasSchemaKeywords,
@@ -3574,9 +3628,12 @@ export {
   camelToKebab,
   buildScope,
   applyStyle,
+  SUPPORTED_SCHEMA_VERSION,
   RESERVED_KEYS,
-  Jx
+  Jx,
+  COLOR_SCHEME_STORAGE_KEY,
+  COLOR_SCHEME_ATTR
 };
 
-//# debugId=B1BA44E09A6FC37E64756E2164756E21
+//# debugId=B1869F964FD5CCA664756E2164756E21
 //# sourceMappingURL=runtime.js.map