@jxsuite/runtime 0.22.0 → 0.23.0

package/dist/runtime.js

@@ -1258,6 +1258,239 @@ function computed(getterOrOptions, debugOptions, isSSR = false) {
   return cRef;
 }
 
+// src/expression.js
+var MUTATING_OPS = new Set([
+  "=",
+  "+=",
+  "-=",
+  "*=",
+  "/=",
+  "push",
+  "pop",
+  "shift",
+  "unshift",
+  "splice"
+]);
+var UNARY_OPS = new Set(["!", "-"]);
+var BINARY_OPS = new Set([
+  "+",
+  "-",
+  "*",
+  "/",
+  "%",
+  "===",
+  "!==",
+  "<",
+  "<=",
+  ">",
+  ">=",
+  "&&",
+  "||"
+]);
+var ASSIGNMENT_OPS = new Set(["=", "+=", "-=", "*=", "/="]);
+var ARRAY_METHOD_OPS = new Set(["push", "pop", "shift", "unshift", "splice"]);
+var AGGREGATE_OPS = new Set(["reduce", "map", "filter"]);
+var BLESSED_OPERATORS = new Set([
+  ...MUTATING_OPS,
+  ...UNARY_OPS,
+  ...BINARY_OPS,
+  ...AGGREGATE_OPS
+]);
+function isMutating(op) {
+  return MUTATING_OPS.has(op);
+}
+function resolveOperand(operand, state, event, iterCtx) {
+  if (operand === null || operand === undefined)
+    return operand;
+  if (typeof operand === "object" && !Array.isArray(operand) && "operator" in operand) {
+    return evaluateExpression(operand, state, event, iterCtx);
+  }
+  if (typeof operand === "object" && !Array.isArray(operand) && "$ref" in operand) {
+    return resolveExprRef(operand.$ref, state, event, iterCtx);
+  }
+  if (Array.isArray(operand)) {
+    return operand.map((o) => resolveOperand(o, state, event, iterCtx));
+  }
+  return operand;
+}
+function resolveExprRef(ref2, state, event, iterCtx) {
+  if (ref2 === "$reduce/acc") {
+    return iterCtx?.acc;
+  }
+  if (ref2.startsWith("$reduce/")) {
+    return iterCtx?.acc;
+  }
+  if (ref2.startsWith("event#/")) {
+    const path = ref2.slice("event#/".length);
+    return getPath(event, path);
+  }
+  if (ref2.startsWith("$map/")) {
+    const parts = ref2.split("/");
+    const key = parts[1];
+    let base;
+    if (key === "item")
+      base = iterCtx?.item ?? state.$map?.item ?? state["$map/item"];
+    else if (key === "index")
+      base = iterCtx?.index ?? state.$map?.index ?? state["$map/index"];
+    else
+      base = state.$map?.[key] ?? state["$map/" + key];
+    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 < 0)
+      return state[sub];
+    return getPath(state[sub.slice(0, slash)], sub.slice(slash + 1));
+  }
+  if (ref2.startsWith("parent#/"))
+    return state[ref2.slice("parent#/".length)];
+  if (ref2.startsWith("window#/"))
+    return getPath(globalThis.window, ref2.slice("window#/".length));
+  if (ref2.startsWith("document#/"))
+    return getPath(globalThis.document, ref2.slice("document#/".length));
+  return state[ref2] ?? null;
+}
+function resolveWritableRef(ref2, state, event, iterCtx) {
+  if (ref2.startsWith("$map/")) {
+    const parts = ref2.split("/");
+    const key = parts[1];
+    let base;
+    if (key === "item")
+      base = iterCtx?.item ?? state.$map?.item ?? state["$map/item"];
+    else if (key === "index")
+      base = iterCtx?.index ?? state.$map?.index ?? state["$map/index"];
+    else
+      base = state.$map?.[key] ?? state["$map/" + key];
+    if (parts.length > 2) {
+      const pathParts = parts.slice(2);
+      const lastKey = pathParts.pop();
+      const obj = pathParts.length > 0 ? getPath(base, pathParts.join("/")) : base;
+      return { obj, key: lastKey };
+    }
+    return { obj: state.$map ?? state, key: key === "item" ? "$map/item" : "$map/index" };
+  }
+  if (ref2.startsWith("#/state/")) {
+    const sub = ref2.slice("#/state/".length);
+    const slash = sub.indexOf("/");
+    if (slash < 0)
+      return { obj: state, key: sub };
+    const parts = sub.split("/");
+    const lastKey = parts.pop();
+    let obj = state;
+    for (const p of parts)
+      obj = obj[p];
+    return { obj, key: lastKey };
+  }
+  return { obj: state, key: ref2 };
+}
+function evaluateExpression(node, state, event, iterCtx) {
+  const { operator, target, value, initial } = node;
+  if (!BLESSED_OPERATORS.has(operator)) {
+    throw new Error(`$expression: unknown operator "${operator}"`);
+  }
+  if (UNARY_OPS.has(operator) && !("value" in node)) {
+    const operand = resolveOperand(target, state, event, iterCtx);
+    if (operator === "!")
+      return !operand;
+    if (operator === "-")
+      return -operand;
+  }
+  if (BINARY_OPS.has(operator)) {
+    const left = resolveOperand(target, state, event, iterCtx);
+    const right = resolveOperand(value, state, event, iterCtx);
+    switch (operator) {
+      case "+":
+        return left + right;
+      case "-":
+        return left - right;
+      case "*":
+        return left * right;
+      case "/":
+        return left / right;
+      case "%":
+        return left % right;
+      case "===":
+        return left === right;
+      case "!==":
+        return left !== right;
+      case "<":
+        return left < right;
+      case "<=":
+        return left <= right;
+      case ">":
+        return left > right;
+      case ">=":
+        return left >= right;
+      case "&&":
+        return left && right;
+      case "||":
+        return left || right;
+    }
+  }
+  if (ASSIGNMENT_OPS.has(operator)) {
+    const rhs = resolveOperand(value, state, event, iterCtx);
+    const { obj, key } = resolveWritableRef(target.$ref, state, event, iterCtx);
+    switch (operator) {
+      case "=":
+        obj[key] = rhs;
+        break;
+      case "+=":
+        obj[key] += rhs;
+        break;
+      case "-=":
+        obj[key] -= rhs;
+        break;
+      case "*=":
+        obj[key] *= rhs;
+        break;
+      case "/=":
+        obj[key] /= rhs;
+        break;
+    }
+    return;
+  }
+  if (ARRAY_METHOD_OPS.has(operator)) {
+    const arr = resolveOperand(target, state, event, iterCtx);
+    switch (operator) {
+      case "push":
+        return arr.push(resolveOperand(value, state, event, iterCtx));
+      case "unshift":
+        return arr.unshift(resolveOperand(value, state, event, iterCtx));
+      case "pop":
+        return arr.pop();
+      case "shift":
+        return arr.shift();
+      case "splice": {
+        const args = resolveOperand(value, state, event, iterCtx);
+        return arr.splice(...args);
+      }
+    }
+  }
+  if (AGGREGATE_OPS.has(operator)) {
+    const arr = resolveOperand(target, state, event, iterCtx);
+    if (operator === "reduce") {
+      const seed = resolveOperand(initial, state, event, iterCtx);
+      return arr.reduce((acc, item, index) => {
+        return evaluateExpression(value, state, event, { acc, item, index });
+      }, seed);
+    }
+    if (operator === "map") {
+      return arr.map((item, index) => {
+        return evaluateExpression(value, state, event, { ...iterCtx, item, index });
+      });
+    }
+    if (operator === "filter") {
+      return arr.filter((item, index) => {
+        return evaluateExpression(value, state, event, { ...iterCtx, item, index });
+      });
+    }
+  }
+}
+function getPath(obj, path) {
+  return path.split(/[./]/).reduce((o, k) => o?.[k], obj);
+}
+
 // src/runtime.js
 async function Jx(source, target = document.body, options) {
   const base = typeof source === "string" ? new URL(source, location.href).href : location.href;
@@ -1268,6 +1501,9 @@ async function Jx(source, target = document.body, options) {
   if (doc.$head) {
     injectHead(doc.$head, base);
   }
+  if (doc.$media) {
+    _rootMedia = doc.$media;
+  }
   const state = await buildScope(doc, {}, base);
   target.appendChild(renderNode(doc, state, options));
   if (typeof state.onMount === "function")
@@ -1336,6 +1572,8 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
     if (typeof def2 === "object") {
       if (def2.$prototype)
         continue;
+      if ("$expression" in def2)
+        continue;
       if (def2.timing === "server" && def2.$src && def2.$export)
         continue;
       if ("default" in def2) {
@@ -1353,6 +1591,16 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
       state[key] = computed(() => evaluateTemplate(def2, state));
     }
   }
+  for (const [key, def2] of Object.entries(defs)) {
+    if (def2 && typeof def2 === "object" && !Array.isArray(def2) && "$expression" in def2) {
+      const node = def2.$expression;
+      if (isMutating(node.operator)) {
+        state[key] = (s, event) => evaluateExpression(node, s, event);
+      } else {
+        state[key] = computed(() => evaluateExpression(node, state, null));
+      }
+    }
+  }
   for (const [key, def2] of Object.entries(defs)) {
     if (typeof def2 === "object" && def2?.$prototype === "Function") {
       state[key] = await resolveFunction(def2, state, key, base);
@@ -1372,6 +1620,8 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
   }
   if (doc.$media) {
     state["$media"] = doc.$media;
+  } else if (!state["$media"] && Object.keys(_rootMedia).length > 0) {
+    state["$media"] = _rootMedia;
   }
   return state;
 }
@@ -1555,6 +1805,12 @@ function applyProperties(el, def2, state) {
         el.addEventListener(key.slice(2), (e) => fn(scope, e));
         continue;
       }
+      if (val && typeof val === "object" && "$expression" in val) {
+        const node = val.$expression;
+        const scope = state;
+        el.addEventListener(key.slice(2), (e) => evaluateExpression(node, scope, e));
+        continue;
+      }
     }
     bindProperty(el, key, val, state);
   }
@@ -1582,6 +1838,17 @@ function bindProperty(el, key, val, state) {
 function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   const nested = {};
   const media = {};
+  const baseDecls = {};
+  const mediaOverriddenProps = new Set;
+  for (const [prop, val] of Object.entries(styleDef)) {
+    if (prop.startsWith("@") && val && typeof val === "object") {
+      for (const k of Object.keys(val)) {
+        if (!k.startsWith(":") && !k.startsWith(".") && !k.startsWith("&") && !k.startsWith("[") && !k.startsWith("@")) {
+          mediaOverriddenProps.add(k);
+        }
+      }
+    }
+  }
   for (const [prop, val] of Object.entries(styleDef)) {
     if (prop.startsWith("@"))
       media[prop] = val;
@@ -1600,16 +1867,23 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
       effect(() => {
         el.style[prop] = evaluateTemplate(val, state);
       });
+    else if (mediaOverriddenProps.has(prop))
+      baseDecls[prop] = val;
     else
       el.style[prop] = val;
   }
   const hasNested = Object.keys(nested).length > 0;
   const hasMedia = Object.keys(media).length > 0;
-  if (!hasNested && !hasMedia)
+  const hasBaseDecls = Object.keys(baseDecls).length > 0;
+  if (!hasNested && !hasMedia && !hasBaseDecls)
     return;
   const uid = `jx-${Math.random().toString(36).slice(2, 7)}`;
   el.dataset.jx = uid;
   let css = "";
+  const baseCSS = toCSSText(baseDecls);
+  if (baseCSS)
+    css += `[data-jx="${uid}"] { ${baseCSS} }
+`;
   function emitNested(scope, rules) {
     const props = toCSSText(rules);
     if (props)
@@ -1638,16 +1912,16 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
         const resolved = sel.startsWith("&") ? sel.replace("&", parentSel) : sel.startsWith("[") ? `${parentSel}${sel}` : sel.startsWith(":") || sel.startsWith(".") ? `${parentSel}${sel}` : `${parentSel} ${sel}`;
         const props = toCSSText(sub);
         if (props)
-          css += `@media ${query} { ${resolved} { ${props} } }
+          css += `${atRule} { ${resolved} { ${props} } }
 `;
         emitMediaNested(resolved, sub);
       }
     };
     if (key === "@--")
       continue;
-    const query = key.startsWith("@--") ? mediaQueries[key.slice(1)] ?? key.slice(1) : key.slice(1);
+    const atRule = key.startsWith("@--") ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}` : key.startsWith("@(") ? `@media ${key.slice(1)}` : key;
     const scope = `[data-jx="${uid}"]`;
-    css += `@media ${query} { ${scope} { ${toCSSText(rules)} } }
+    css += `${atRule} { ${scope} { ${toCSSText(rules)} } }
 `;
     emitMediaNested(scope, rules);
   }
@@ -1674,8 +1948,7 @@ function renderMappedArray(def2, state, options) {
   applyProperties(container, def2, state);
   applyStyle(container, def2.style ?? {}, state["$media"] ?? {}, state);
   applyAttributes(container, def2.attributes ?? {}, state);
-  const { items: _items, of: _of, map: mapDef, filter: filterRef, sort: sortRef } = def2.children;
-  const itemsSrc = _items ?? _of;
+  const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef } = def2.children;
   effect(() => {
     container.innerHTML = "";
     let items;
@@ -2216,21 +2489,21 @@ function resolveRef(ref2, state) {
     const parts = ref2.split("/");
     const key = parts[1];
     const base = state.$map?.[key] ?? state["$map/" + key];
-    return parts.length > 2 ? getPath(base, parts.slice(2).join("/")) : base;
+    return parts.length > 2 ? getPath2(base, parts.slice(2).join("/")) : base;
   }
   if (ref2.startsWith("#/state/")) {
     const sub = ref2.slice("#/state/".length);
     const slash = sub.indexOf("/");
     if (slash < 0)
       return state[sub];
-    return getPath(state[sub.slice(0, slash)], sub.slice(slash + 1));
+    return getPath2(state[sub.slice(0, slash)], sub.slice(slash + 1));
   }
   if (ref2.startsWith("parent#/"))
     return state[ref2.slice("parent#/".length)];
   if (ref2.startsWith("window#/"))
-    return getPath(globalThis.window, ref2.slice("window#/".length));
+    return getPath2(globalThis.window, ref2.slice("window#/".length));
   if (ref2.startsWith("document#/"))
-    return getPath(globalThis.document, ref2.slice("document#/".length));
+    return getPath2(globalThis.document, ref2.slice("document#/".length));
   return state[ref2] ?? null;
 }
 function isSignal(v) {
@@ -2242,7 +2515,7 @@ function isRefObj(v) {
 function isNestedSelector(k) {
   return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
 }
-function getPath(obj, path) {
+function getPath2(obj, path) {
   return path.split(/[./]/).reduce((o, k) => o?.[k], obj);
 }
 function mergeProps(def2, parentState) {
@@ -2258,6 +2531,7 @@ 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)}: ${v}`).join("; ");
 }
+var _rootMedia = {};
 var _elementDefs = new Map;
 async function registerElements(elements, base) {
   for (const entry of elements) {
@@ -2481,5 +2755,5 @@ export {
   Jx
 };
 
-//# debugId=10A56E6D287D37B364756E2164756E21
+//# debugId=37F989EF6650619C64756E2164756E21
 //# sourceMappingURL=runtime.js.map