@jxsuite/runtime 1.3.2 → 2.0.0

package/dist/runtime.js

@@ -44,7 +44,7 @@ var toHandlerKey = cacheStringFunction((str) => {
 });
 var hasChanged = (value, oldValue) => !Object.is(value, oldValue);
 var specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
-var isBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
+var isBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
 
 // ../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
 function warn(msg, ...args) {
@@ -1384,6 +1384,80 @@ function computed(getterOrOptions, debugOptions, isSSR = false) {
   return cRef;
 }
 
+// ../schema/src/intl.ts
+var DEFAULT_FORMAT_LOCALE = "en-US";
+var DEFAULT_TIME_ZONE = "UTC";
+var INTL_HELPERS = [
+  {
+    api: "Intl.NumberFormat",
+    params: ["value", "locale", "options"],
+    path: "Intl/formatNumber",
+    summary: "Format a number for a locale — grouping, decimals, currency, percent, units."
+  },
+  {
+    api: "Intl.DateTimeFormat",
+    params: ["value", "locale", "options"],
+    path: "Intl/formatDate",
+    summary: "Format a date or timestamp for a locale. Pass `timeZone` in options."
+  },
+  {
+    api: "Intl.RelativeTimeFormat",
+    params: ["value", "unit", "locale", "options"],
+    path: "Intl/formatRelativeTime",
+    summary: 'Format a relative time — `-3, "day"` becomes "3 days ago".'
+  },
+  {
+    api: "Intl.ListFormat",
+    params: ["values", "locale", "options"],
+    path: "Intl/formatList",
+    summary: 'Join a list the way a locale does — "a, b, and c", not a hand-written comma join.'
+  },
+  {
+    api: "Intl.PluralRules",
+    params: ["value", "locale", "options"],
+    path: "Intl/plural",
+    summary: 'Which plural category a number falls in ("one", "few", "other") — many languages have ' + "more than two, so a ternary on `n === 1` is wrong outside English."
+  },
+  {
+    api: "Intl.Collator",
+    params: ["a", "b", "locale", "options"],
+    path: "Intl/compare",
+    summary: "Compare two strings for sorting. `<` and `sort()` order by UTF-16 code unit, which puts " + '"Zebra" before "apple" and sorts every accented word into the wrong place.'
+  },
+  {
+    api: "Intl.DisplayNames",
+    params: ["code", "type", "locale", "options"],
+    path: "Intl/displayName",
+    summary: 'The name of a language, region, script or currency in a locale — "de" as "German" or ' + '"Deutsch", from CLDR rather than a hand-kept table.'
+  },
+  {
+    api: "Intl.Segmenter",
+    params: ["value", "granularity", "locale"],
+    path: "Intl/segment",
+    summary: "Split text into graphemes, words or sentences (UAX #29). `[...str]` splits code points, " + "so it cuts an emoji with a skin-tone modifier in half."
+  }
+];
+var INTL_HELPER_PATHS = INTL_HELPERS.map((helper) => helper.path);
+var INTL_LOCALE_PARAM = Object.fromEntries(INTL_HELPERS.map((helper) => [helper.path, helper.params.indexOf("locale")]));
+
+// src/pointer.ts
+function unescapeToken(token) {
+  return token.replaceAll("~1", "/").replaceAll("~0", "~");
+}
+function refSegments(path) {
+  if (path === "") {
+    return [];
+  }
+  return path.split("/").map((token) => unescapeToken(token));
+}
+function readPath(root, path) {
+  let current = root;
+  for (const key of refSegments(path)) {
+    current = current?.[key];
+  }
+  return current;
+}
+
 // src/expression.ts
 function scopeMap(state) {
   const map = state.$map;
@@ -1504,15 +1578,42 @@ var BLESSED_GLOBALS = new Set([
   "Array/of",
   "String/fromCharCode",
   "String/fromCodePoint",
-  "Intl/formatNumber",
-  "Intl/formatDate",
-  "Intl/formatRelativeTime"
+  ...INTL_HELPER_PATHS
 ]);
 var BLESSED_HELPERS = {
-  "Intl/formatDate": (value, locale, options) => new Intl.DateTimeFormat(locale, options).format(new Date(value)),
-  "Intl/formatNumber": (value, locale, options) => new Intl.NumberFormat(locale, options).format(value),
-  "Intl/formatRelativeTime": (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale, options).format(value, unit)
+  "Intl/compare": (a, b, locale, options) => new Intl.Collator(locale ?? DEFAULT_FORMAT_LOCALE, options).compare(a, b),
+  "Intl/displayName": (code, type, locale, options) => new Intl.DisplayNames(locale ?? DEFAULT_FORMAT_LOCALE, {
+    ...options,
+    type: type ?? "language"
+  }).of(code),
+  "Intl/formatDate": (value, locale, options) => new Intl.DateTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, {
+    timeZone: DEFAULT_TIME_ZONE,
+    ...options
+  }).format(new Date(value)),
+  "Intl/formatList": (values, locale, options) => new Intl.ListFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(values),
+  "Intl/formatNumber": (value, locale, options) => new Intl.NumberFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value),
+  "Intl/formatRelativeTime": (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value, unit),
+  "Intl/plural": (value, locale, options) => new Intl.PluralRules(locale ?? DEFAULT_FORMAT_LOCALE, options).select(value),
+  "Intl/segment": (value, granularity, locale) => [
+    ...new Intl.Segmenter(locale ?? DEFAULT_FORMAT_LOCALE, {
+      granularity: granularity ?? "grapheme"
+    }).segment(value)
+  ].map((part) => part.segment)
 };
+function withPageLocale(path, args, state) {
+  const index = INTL_LOCALE_PARAM[path];
+  if (index === undefined || index < 0 || args[index] != null) {
+    return args;
+  }
+  const page = state.$page;
+  const locale = page?.locale;
+  if (typeof locale !== "string" || locale === "") {
+    return args;
+  }
+  const filled = [...args];
+  filled[index] = locale;
+  return filled;
+}
 function isBlessedGlobal(ref2) {
   return ref2.startsWith("window#/") && BLESSED_GLOBALS.has(ref2.slice("window#/".length));
 }
@@ -1584,15 +1685,10 @@ function resolveExprRef(ref2, state, event, iterCtx) {
     return parts.length > 2 ? getPath(base, parts.slice(2).join("/")) : base;
   }
   if (ref2.startsWith("#/state/")) {
-    const sub = ref2.slice("#/state/".length);
-    const slash = sub.indexOf("/");
-    if (slash === -1) {
-      return state[sub];
-    }
-    return getPath(state[sub.slice(0, slash)], sub.slice(slash + 1));
+    return readPath(state, ref2.slice("#/state/".length));
   }
   if (ref2.startsWith("parent#/")) {
-    return state[ref2.slice("parent#/".length)];
+    return readPath(state, ref2.slice("parent#/".length));
   }
   if (ref2.startsWith("window#/")) {
     return getPath(globalThis.window, ref2.slice("window#/".length));
@@ -1600,7 +1696,7 @@ function resolveExprRef(ref2, state, event, iterCtx) {
   if (ref2.startsWith("document#/")) {
     return getPath(globalThis.document, ref2.slice("document#/".length));
   }
-  return state[ref2] ?? null;
+  return readPath(state, ref2) ?? null;
 }
 function resolveWritableRef(ref2, state, _event, iterCtx) {
   if (ref2.startsWith("$map/")) {
@@ -1632,7 +1728,7 @@ function resolveWritableRef(ref2, state, _event, iterCtx) {
     if (slash === -1) {
       return { key: sub, obj: state };
     }
-    const parts = sub.split("/");
+    const parts = refSegments(sub);
     const lastKey = parts.pop();
     let obj = state;
     for (const p of parts) {
@@ -1678,7 +1774,7 @@ function evaluateNode(node, state, event, iterCtx, trace) {
       const globalPath = calleeRef.slice("window#/".length);
       const helper = BLESSED_HELPERS[globalPath];
       if (helper) {
-        return helper(...argValues);
+        return helper(...withPageLocale(globalPath, argValues, state));
       }
       const fn = getPath(globalThis.window, globalPath);
       const lastSlash = globalPath.lastIndexOf("/");
@@ -1867,11 +1963,7 @@ function evaluateNode(node, state, event, iterCtx, trace) {
   return;
 }
 function getPath(obj, path) {
-  let current = obj;
-  for (const k of path.split(/[./]/)) {
-    current = current?.[k];
-  }
-  return current;
+  return readPath(obj, path);
 }
 function evaluateOperand(operand, state, event, iterCtx) {
   return resolveOperand(operand, state, event, iterCtx);
@@ -1933,6 +2025,12 @@ function paramNames(parameters) {
   }
   return parameters.map((p) => typeof p === "string" ? p : p.name);
 }
+function isTagExpression(tagName) {
+  return isJsonObject(tagName) && isJsonObject(tagName.$expression);
+}
+function isPrivateStateKey(key) {
+  return key.startsWith("#");
+}
 
 // src/statements.ts
 function statementKind(statement) {
@@ -2002,6 +2100,45 @@ async function runStatements(statements, state, event, opts = {}) {
   }
 }
 
+// src/cookie.ts
+var HOST_PREFIX = "__Host-";
+var SECURE_PREFIX = "__Secure-";
+function readCookie(header, name) {
+  for (const pair of header.split(";")) {
+    const eq = pair.indexOf("=");
+    if (eq === -1) {
+      continue;
+    }
+    if (pair.slice(0, eq).trim() === name) {
+      return pair.slice(eq + 1);
+    }
+  }
+  return null;
+}
+function serializeCookie(name, value, options) {
+  const hostPrefixed = name.startsWith(HOST_PREFIX);
+  const parts = [`${name}=${encodeURIComponent(JSON.stringify(value))}`];
+  if (options.maxAge !== undefined) {
+    parts.push(`Max-Age=${options.maxAge}`);
+  }
+  const path = hostPrefixed ? "/" : options.path;
+  if (path) {
+    parts.push(`Path=${path}`);
+  }
+  if (options.domain && !hostPrefixed) {
+    parts.push(`Domain=${options.domain}`);
+  }
+  const { sameSite } = options;
+  const secure = options.secure === true || hostPrefixed || name.startsWith(SECURE_PREFIX) || sameSite?.toLowerCase() === "none";
+  if (secure) {
+    parts.push("Secure");
+  }
+  if (sameSite) {
+    parts.push(`SameSite=${sameSite}`);
+  }
+  return parts.join("; ");
+}
+
 // src/runtime.ts
 var SUPPORTED_SCHEMA_VERSION = 1;
 var _schemaVersionWarned = false;
@@ -2430,7 +2567,7 @@ function renderNode(def2, state, options) {
       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 tagName = resolveTagName(def2.tagName, localState);
   const isCustomEl = tagName.includes("-") && customElements.get(tagName);
   if (def2.$props && isCustomEl) {
     return renderCustomElementWithProps(def2, localState, options, path);
@@ -2730,9 +2867,23 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     });
   });
 }
+function resolveTagName(tagName, scope) {
+  if (typeof tagName === "string") {
+    return tagName;
+  }
+  if (!isTagExpression(tagName)) {
+    return "div";
+  }
+  const expression = tagName.$expression;
+  if (expression.operator === "?:") {
+    return evaluateOperand(expression.target, scope, null) ? expression.value : expression.initial;
+  }
+  const key = evaluateOperand(expression.target, scope, null);
+  return expression.cases[String(key)] ?? expression.default;
+}
 function renderSwitch(def2, state, options) {
   const path = options?._path ?? [];
-  const container = document.createElement(def2.tagName ?? "div");
+  const container = document.createElement(resolveTagName(def2.tagName, state));
   if (options?.onNodeCreated) {
     options.onNodeCreated(container, path, def2, state);
   }
@@ -2741,7 +2892,7 @@ function renderSwitch(def2, state, options) {
   applyAttributes(container, def2.attributes ?? {}, state);
   let generation = 0;
   effect(() => {
-    container.innerHTML = "";
+    container.replaceChildren();
     if (!isRefObj(def2.$switch)) {
       return;
     }
@@ -2751,7 +2902,8 @@ function renderSwitch(def2, state, options) {
       return;
     }
     if (isRefObj(caseDef)) {
-      const gen = generation += 1;
+      generation += 1;
+      const gen = generation;
       const { href } = new URL(caseDef.$ref, location.href);
       resolve(href).then(async (doc) => {
         if (gen !== generation) {
@@ -2761,7 +2913,7 @@ function renderSwitch(def2, state, options) {
         if (gen !== generation) {
           return;
         }
-        container.innerHTML = "";
+        container.replaceChildren();
         const childOpts2 = options ? { ...options, _path: [...path, "cases", key] } : undefined;
         container.append(renderNode(doc, childScope, childOpts2));
       }).catch((error) => console.error("Jx $switch: failed to load external case", caseDef.$ref, error));
@@ -2862,36 +3014,19 @@ async function resolvePrototype(def2, state, key, base) {
     case "Cookie": {
       const name = def2.name ?? key;
       const read = () => {
-        const m = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-        if (!m) {
+        const raw = readCookie(document.cookie, name);
+        if (raw === null) {
           return null;
         }
         try {
-          return JSON.parse(decodeURIComponent(m[1]));
+          return JSON.parse(decodeURIComponent(raw));
         } catch {
-          return m[1];
+          return raw;
         }
       };
       const cookieState = ref(read() ?? def2.default ?? null);
       effect(() => {
-        const v = cookieState.value;
-        let s = `${name}=${encodeURIComponent(JSON.stringify(v))}`;
-        if (def2.maxAge !== undefined) {
-          s += `; Max-Age=${def2.maxAge}`;
-        }
-        if (def2.path) {
-          s += `; Path=${def2.path}`;
-        }
-        if (def2.domain) {
-          s += `; Domain=${def2.domain}`;
-        }
-        if (def2.secure) {
-          s += `; Secure`;
-        }
-        if (def2.sameSite) {
-          s += `; SameSite=${def2.sameSite}`;
-        }
-        document.cookie = s;
+        document.cookie = serializeCookie(name, cookieState.value, def2);
       });
       return cookieState;
     }
@@ -3299,15 +3434,10 @@ function resolveRef(refPath, state) {
     return parts.length > 2 ? getPath2(base, parts.slice(2).join("/")) : base;
   }
   if (refPath.startsWith("#/state/")) {
-    const sub = refPath.slice("#/state/".length);
-    const slash = sub.indexOf("/");
-    if (slash === -1) {
-      return state[sub];
-    }
-    return getPath2(state[sub.slice(0, slash)], sub.slice(slash + 1));
+    return readPath(state, refPath.slice("#/state/".length));
   }
   if (refPath.startsWith("parent#/")) {
-    return state[refPath.slice("parent#/".length)];
+    return readPath(state, refPath.slice("parent#/".length));
   }
   if (refPath.startsWith("window#/")) {
     return getPath2(globalThis.window, refPath.slice("window#/".length));
@@ -3315,7 +3445,7 @@ function resolveRef(refPath, state) {
   if (refPath.startsWith("document#/")) {
     return getPath2(globalThis.document, refPath.slice("document#/".length));
   }
-  return state[refPath] ?? null;
+  return readPath(state, refPath) ?? null;
 }
 function isSignal(v) {
   return isRef(v);
@@ -3327,15 +3457,29 @@ function isNestedSelector(k) {
   return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
 }
 function getPath2(obj, path) {
-  let current = obj;
-  for (const k of path.split(/[./]/)) {
-    current = current?.[k];
+  return readPath(obj, path);
+}
+var _privatePropWarned = new Set;
+function refusePrivateProp(key, where) {
+  if (!isPrivateStateKey(key)) {
+    return false;
   }
-  return current;
+  const seen = where === undefined ? key : `${where}:${key}`;
+  if (!_privatePropWarned.has(seen)) {
+    _privatePropWarned.add(seen);
+    console.warn(`Jx: "${key}" is private state (spec.md §5.6) and cannot be set through $props` + `${where === undefined ? "" : ` (${where})`}. The write was ignored; rename the entry without the leading # to make it part of the component's interface.`);
+  }
+  return true;
+}
+function _resetPrivatePropWarnings() {
+  _privatePropWarned.clear();
 }
 function mergeProps(def2, parentState) {
   const child = Object.create(parentState);
   for (const [k, v] of Object.entries(def2.$props ?? {})) {
+    if (refusePrivateProp(k, "$props")) {
+      continue;
+    }
     child[k] = isRefObj(v) ? resolveRef(v.$ref, parentState) : v;
   }
   return child;
@@ -3419,7 +3563,7 @@ function injectHead(entries, _base) {
       el.setAttribute(k, String(v));
     }
     if (entry.textContent) {
-      el.textContent = entry.textContent;
+      el.textContent = typeof entry.textContent === "object" ? JSON.stringify(entry.textContent, null, 2) : entry.textContent;
     }
     document.head.append(el);
   }
@@ -3471,6 +3615,9 @@ async function defineElement(source, baseUrl) {
         try {
           const props = JSON.parse(propsAttr);
           for (const [key, val] of Object.entries(props)) {
+            if (refusePrivateProp(key, "data-jx-props")) {
+              continue;
+            }
             if (key in (def2.state ?? {})) {
               state[key] = val;
             }
@@ -3481,17 +3628,27 @@ async function defineElement(source, baseUrl) {
       const propAttrNames = this.getAttributeNames().filter((name) => name.startsWith("props.") && name.length > "props.".length);
       for (const name of propAttrNames) {
         const key = name.slice("props.".length);
+        if (refusePrivateProp(key, "props.* attribute")) {
+          this.removeAttribute(name);
+          continue;
+        }
         if (key in (def2.state ?? {})) {
           state[key] = this.getAttribute(name);
           this.removeAttribute(name);
         }
       }
       for (const key of Object.keys(def2.state ?? {})) {
+        if (isPrivateStateKey(key)) {
+          continue;
+        }
         if (key in this && this[key] !== undefined) {
           state[key] = this[key];
         }
       }
       for (const key of Object.keys(def2.state ?? {})) {
+        if (isPrivateStateKey(key)) {
+          continue;
+        }
         if (!(key in HTMLElement.prototype)) {
           Object.defineProperty(this, key, {
             configurable: true,
@@ -3504,7 +3661,7 @@ async function defineElement(source, baseUrl) {
       }
       this._state = state;
       const slottedChildren = [...this.childNodes];
-      this.innerHTML = "";
+      this.replaceChildren();
       if (!this.style.display) {
         this.style.display = "block";
       }
@@ -3548,11 +3705,14 @@ async function defineElement(source, baseUrl) {
   customElements.define(tagName, ElementClass);
 }
 function renderCustomElementWithProps(def2, state, options, path) {
-  const el = document.createElement(def2.tagName ?? "div");
+  const el = document.createElement(resolveTagName(def2.tagName, state));
   if (options?.onNodeCreated) {
     options.onNodeCreated(el, path ?? [], def2, state);
   }
   for (const [key, val] of Object.entries(def2.$props ?? {})) {
+    if (refusePrivateProp(key, "$props")) {
+      continue;
+    }
     if (isRefObj(val)) {
       const refVal = val;
       const resolved = resolveRef(refVal.$ref, state);
@@ -3602,7 +3762,7 @@ function distributeSlots(host, slottedChildren) {
     const name = slot.getAttribute("name");
     const matches = name ? named.get(name) ?? [] : unnamed;
     if (matches.length > 0) {
-      slot.innerHTML = "";
+      slot.replaceChildren();
       for (const child of matches) {
         slot.append(child);
       }
@@ -3622,6 +3782,7 @@ export {
   setCanvasDelinkAnchors,
   schemeSelectors,
   runScoped,
+  resolveTagName,
   resolveRef,
   resolvePrototype,
   resolve,
@@ -3636,6 +3797,7 @@ export {
   camelToKebab,
   buildScope,
   applyStyle,
+  _resetPrivatePropWarnings,
   SUPPORTED_SCHEMA_VERSION,
   RESERVED_KEYS,
   Jx,
@@ -3643,5 +3805,5 @@ export {
   COLOR_SCHEME_ATTR
 };
 
-//# debugId=6FDC0E14ACE1C87E64756E2164756E21
+//# debugId=38D6F60E1C2F6F7A64756E2164756E21
 //# sourceMappingURL=runtime.js.map