@constela/runtime 0.16.5 → 0.17.0

package/dist/index.js

@@ -374,6 +374,307 @@ function createTypedStateStore(definitions) {
 }
 
 // src/expression/evaluator.ts
+var SAFE_ARRAY_METHODS = /* @__PURE__ */ new Set([
+  "length",
+  "at",
+  "includes",
+  "slice",
+  "indexOf",
+  "join",
+  "filter",
+  "map",
+  "find",
+  "findIndex",
+  "some",
+  "every"
+]);
+var SAFE_STRING_METHODS = /* @__PURE__ */ new Set([
+  "length",
+  "charAt",
+  "substring",
+  "slice",
+  "split",
+  "trim",
+  "toUpperCase",
+  "toLowerCase",
+  "replace",
+  "includes",
+  "startsWith",
+  "endsWith",
+  "indexOf"
+]);
+var SAFE_MATH_METHODS = /* @__PURE__ */ new Set([
+  "min",
+  "max",
+  "round",
+  "floor",
+  "ceil",
+  "abs",
+  "sqrt",
+  "pow",
+  "random",
+  "sin",
+  "cos",
+  "tan"
+]);
+var SAFE_DATE_STATIC_METHODS = /* @__PURE__ */ new Set([
+  "now",
+  "parse"
+]);
+var SAFE_DATE_INSTANCE_METHODS = /* @__PURE__ */ new Set([
+  "toISOString",
+  "toDateString",
+  "toTimeString",
+  "getTime",
+  "getFullYear",
+  "getMonth",
+  "getDate",
+  "getHours",
+  "getMinutes",
+  "getSeconds",
+  "getMilliseconds"
+]);
+function createLambdaFunction(lambda, ctx) {
+  return (item, index) => {
+    const lambdaLocals = {
+      ...ctx.locals,
+      [lambda.param]: item
+    };
+    if (lambda.index !== void 0) {
+      lambdaLocals[lambda.index] = index;
+    }
+    return evaluate(lambda.body, { ...ctx, locals: lambdaLocals });
+  };
+}
+function callArrayMethod(target, method, args, ctx, rawArgs) {
+  if (!SAFE_ARRAY_METHODS.has(method)) {
+    return void 0;
+  }
+  switch (method) {
+    case "length":
+      return target.length;
+    case "at": {
+      const index = typeof args[0] === "number" ? args[0] : 0;
+      return target.at(index);
+    }
+    case "includes": {
+      const searchElement = args[0];
+      const fromIndex = typeof args[1] === "number" ? args[1] : void 0;
+      return target.includes(searchElement, fromIndex);
+    }
+    case "slice": {
+      const start = typeof args[0] === "number" ? args[0] : void 0;
+      const end = typeof args[1] === "number" ? args[1] : void 0;
+      return target.slice(start, end);
+    }
+    case "indexOf": {
+      const searchElement = args[0];
+      const fromIndex = typeof args[1] === "number" ? args[1] : void 0;
+      return target.indexOf(searchElement, fromIndex);
+    }
+    case "join": {
+      const separator = typeof args[0] === "string" ? args[0] : ",";
+      return target.join(separator);
+    }
+    case "filter": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction(lambdaExpr, ctx);
+      return target.filter((item, index) => !!fn(item, index));
+    }
+    case "map": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction(lambdaExpr, ctx);
+      return target.map((item, index) => fn(item, index));
+    }
+    case "find": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction(lambdaExpr, ctx);
+      return target.find((item, index) => !!fn(item, index));
+    }
+    case "findIndex": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction(lambdaExpr, ctx);
+      return target.findIndex((item, index) => !!fn(item, index));
+    }
+    case "some": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction(lambdaExpr, ctx);
+      return target.some((item, index) => !!fn(item, index));
+    }
+    case "every": {
+      const lambdaExpr = rawArgs?.[0];
+      if (!lambdaExpr || lambdaExpr.expr !== "lambda") return void 0;
+      const fn = createLambdaFunction(lambdaExpr, ctx);
+      return target.every((item, index) => !!fn(item, index));
+    }
+    default:
+      return void 0;
+  }
+}
+function callStringMethod(target, method, args) {
+  if (!SAFE_STRING_METHODS.has(method)) {
+    return void 0;
+  }
+  switch (method) {
+    case "length":
+      return target.length;
+    case "charAt": {
+      const index = typeof args[0] === "number" ? args[0] : 0;
+      return target.charAt(index);
+    }
+    case "substring": {
+      const start = typeof args[0] === "number" ? args[0] : 0;
+      const end = typeof args[1] === "number" ? args[1] : void 0;
+      return target.substring(start, end);
+    }
+    case "slice": {
+      const start = typeof args[0] === "number" ? args[0] : void 0;
+      const end = typeof args[1] === "number" ? args[1] : void 0;
+      return target.slice(start, end);
+    }
+    case "split": {
+      const separator = typeof args[0] === "string" ? args[0] : "";
+      return target.split(separator);
+    }
+    case "trim":
+      return target.trim();
+    case "toUpperCase":
+      return target.toUpperCase();
+    case "toLowerCase":
+      return target.toLowerCase();
+    case "replace": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const replace = typeof args[1] === "string" ? args[1] : "";
+      return target.replace(search, replace);
+    }
+    case "includes": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const position = typeof args[1] === "number" ? args[1] : void 0;
+      return target.includes(search, position);
+    }
+    case "startsWith": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const position = typeof args[1] === "number" ? args[1] : void 0;
+      return target.startsWith(search, position);
+    }
+    case "endsWith": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const length = typeof args[1] === "number" ? args[1] : void 0;
+      return target.endsWith(search, length);
+    }
+    case "indexOf": {
+      const search = typeof args[0] === "string" ? args[0] : "";
+      const position = typeof args[1] === "number" ? args[1] : void 0;
+      return target.indexOf(search, position);
+    }
+    default:
+      return void 0;
+  }
+}
+function callMathMethod(method, args) {
+  if (!SAFE_MATH_METHODS.has(method)) {
+    return void 0;
+  }
+  const numbers = args.filter((a) => typeof a === "number");
+  switch (method) {
+    case "min":
+      return Math.min(...numbers);
+    case "max":
+      return Math.max(...numbers);
+    case "round": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.round(num) : void 0;
+    }
+    case "floor": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.floor(num) : void 0;
+    }
+    case "ceil": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.ceil(num) : void 0;
+    }
+    case "abs": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.abs(num) : void 0;
+    }
+    case "sqrt": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.sqrt(num) : void 0;
+    }
+    case "pow": {
+      const base = numbers[0];
+      const exponent = numbers[1];
+      return base !== void 0 && exponent !== void 0 ? Math.pow(base, exponent) : void 0;
+    }
+    case "random":
+      return Math.random();
+    case "sin": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.sin(num) : void 0;
+    }
+    case "cos": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.cos(num) : void 0;
+    }
+    case "tan": {
+      const num = numbers[0];
+      return num !== void 0 ? Math.tan(num) : void 0;
+    }
+    default:
+      return void 0;
+  }
+}
+function callDateStaticMethod(method, args) {
+  if (!SAFE_DATE_STATIC_METHODS.has(method)) {
+    return void 0;
+  }
+  switch (method) {
+    case "now":
+      return Date.now();
+    case "parse": {
+      const dateString = args[0];
+      return typeof dateString === "string" ? Date.parse(dateString) : void 0;
+    }
+    default:
+      return void 0;
+  }
+}
+function callDateInstanceMethod(target, method) {
+  if (!SAFE_DATE_INSTANCE_METHODS.has(method)) {
+    return void 0;
+  }
+  switch (method) {
+    case "toISOString":
+      return target.toISOString();
+    case "toDateString":
+      return target.toDateString();
+    case "toTimeString":
+      return target.toTimeString();
+    case "getTime":
+      return target.getTime();
+    case "getFullYear":
+      return target.getFullYear();
+    case "getMonth":
+      return target.getMonth();
+    case "getDate":
+      return target.getDate();
+    case "getHours":
+      return target.getHours();
+    case "getMinutes":
+      return target.getMinutes();
+    case "getSeconds":
+      return target.getSeconds();
+    case "getMilliseconds":
+      return target.getMilliseconds();
+    default:
+      return void 0;
+  }
+}
 function evaluate(expr, ctx) {
   switch (expr.expr) {
     case "lit":
@@ -518,6 +819,33 @@ function evaluate(expr, ctx) {
       }
       return validity[property] ?? null;
     }
+    case "call": {
+      const callExpr = expr;
+      const target = evaluate(callExpr.target, ctx);
+      if (target == null) return void 0;
+      const args = callExpr.args?.map((arg) => {
+        if (arg.expr === "lambda") return arg;
+        return evaluate(arg, ctx);
+      }) ?? [];
+      if (Array.isArray(target)) {
+        return callArrayMethod(target, callExpr.method, args, ctx, callExpr.args);
+      }
+      if (typeof target === "string") {
+        return callStringMethod(target, callExpr.method, args);
+      }
+      if (target === Math) {
+        return callMathMethod(callExpr.method, args);
+      }
+      if (target === Date) {
+        return callDateStaticMethod(callExpr.method, args);
+      }
+      if (target instanceof Date) {
+        return callDateInstanceMethod(target, callExpr.method);
+      }
+      return void 0;
+    }
+    case "lambda":
+      return void 0;
     default: {
       const _exhaustiveCheck = expr;
       throw new Error(`Unknown expression type: ${JSON.stringify(_exhaustiveCheck)}`);
@@ -14539,6 +14867,8 @@ function hydrateChildren(children, parent, ctx) {
           hydrate(childNode, firstDomChild, ctx);
           domIndex += itemCount;
         }
+      } else {
+        hydrateEachEmpty(childNode, parent, domChildren[domIndex] || null, ctx);
       }
     } else {
       const domChild = domChildren[domIndex];
@@ -14766,6 +15096,162 @@ function hydrateIfWithoutDom(node, parent, nextSibling, ctx, branchInfo) {
     }
   });
 }
+function hydrateEachEmpty(node, parent, insertBefore, ctx) {
+  const anchor = document.createComment("each");
+  if (insertBefore) {
+    parent.insertBefore(anchor, insertBefore);
+  } else {
+    parent.appendChild(anchor);
+  }
+  const hasKey = !!node.key;
+  let itemStateMap = /* @__PURE__ */ new Map();
+  let currentNodes = [];
+  let itemCleanups = [];
+  const effectCleanup = createEffect(() => {
+    const items = evaluate(node.items, {
+      state: ctx.state,
+      locals: ctx.locals,
+      ...ctx.imports && { imports: ctx.imports },
+      ...ctx.route && { route: ctx.route }
+    });
+    if (!hasKey || !node.key) {
+      for (const cleanup of itemCleanups) {
+        cleanup();
+      }
+      itemCleanups = [];
+      for (const oldNode of currentNodes) {
+        if (oldNode.parentNode) {
+          oldNode.parentNode.removeChild(oldNode);
+        }
+      }
+      currentNodes = [];
+      if (Array.isArray(items)) {
+        items.forEach((item, index) => {
+          const itemLocals = {
+            ...ctx.locals,
+            [node.as]: item
+          };
+          if (node.index) {
+            itemLocals[node.index] = index;
+          }
+          const localCleanups = [];
+          const itemCtx = {
+            state: ctx.state,
+            actions: ctx.actions,
+            locals: itemLocals,
+            cleanups: localCleanups,
+            ...ctx.imports && { imports: ctx.imports }
+          };
+          const itemNode = render(node.body, itemCtx);
+          currentNodes.push(itemNode);
+          itemCleanups.push(...localCleanups);
+          if (anchor.parentNode) {
+            let refNode = anchor.nextSibling;
+            if (currentNodes.length > 1) {
+              const lastExisting = currentNodes[currentNodes.length - 2];
+              if (lastExisting) {
+                refNode = lastExisting.nextSibling;
+              }
+            }
+            anchor.parentNode.insertBefore(itemNode, refNode);
+          }
+        });
+      }
+      return;
+    }
+    const newItemStateMap = /* @__PURE__ */ new Map();
+    const newNodes = [];
+    const seenKeys = /* @__PURE__ */ new Set();
+    if (Array.isArray(items)) {
+      items.forEach((item, index) => {
+        const tempLocals = {
+          ...ctx.locals,
+          [node.as]: item,
+          ...node.index ? { [node.index]: index } : {}
+        };
+        const keyValue = evaluate(node.key, {
+          state: ctx.state,
+          locals: tempLocals,
+          ...ctx.imports && { imports: ctx.imports },
+          ...ctx.route && { route: ctx.route }
+        });
+        if (seenKeys.has(keyValue)) {
+          if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production") {
+            console.warn(`Duplicate key "${keyValue}" in each loop. Keys should be unique.`);
+          }
+        }
+        seenKeys.add(keyValue);
+        const existingState = itemStateMap.get(keyValue);
+        if (existingState) {
+          existingState.itemSignal.set(item);
+          existingState.indexSignal.set(index);
+          newItemStateMap.set(keyValue, existingState);
+          newNodes.push(existingState.node);
+        } else {
+          const itemSignal = createSignal(item);
+          const indexSignal = createSignal(index);
+          const reactiveLocals = createReactiveLocals2(
+            ctx.locals,
+            itemSignal,
+            indexSignal,
+            node.as,
+            node.index
+          );
+          const localCleanups = [];
+          const itemCtx = {
+            state: ctx.state,
+            actions: ctx.actions,
+            locals: reactiveLocals,
+            cleanups: localCleanups,
+            ...ctx.imports && { imports: ctx.imports }
+          };
+          const itemNode = render(node.body, itemCtx);
+          const newState = {
+            key: keyValue,
+            node: itemNode,
+            cleanups: localCleanups,
+            itemSignal,
+            indexSignal
+          };
+          newItemStateMap.set(keyValue, newState);
+          newNodes.push(itemNode);
+        }
+      });
+    }
+    for (const [key2, state] of itemStateMap) {
+      if (!newItemStateMap.has(key2)) {
+        for (const cleanup of state.cleanups) {
+          cleanup();
+        }
+        if (state.node.parentNode) {
+          state.node.parentNode.removeChild(state.node);
+        }
+      }
+    }
+    if (anchor.parentNode) {
+      let refNode = anchor;
+      for (const itemNode of newNodes) {
+        const nextSibling = refNode.nextSibling;
+        if (nextSibling !== itemNode) {
+          anchor.parentNode.insertBefore(itemNode, refNode.nextSibling);
+        }
+        refNode = itemNode;
+      }
+    }
+    itemStateMap = newItemStateMap;
+    currentNodes = newNodes;
+    itemCleanups = [];
+    for (const state of itemStateMap.values()) {
+      itemCleanups.push(...state.cleanups);
+    }
+  });
+  ctx.cleanups.push(effectCleanup);
+  ctx.cleanups.push(() => {
+    for (const cleanup of itemCleanups) {
+      cleanup();
+    }
+  });
+}
 function hydrateEach(node, firstItemDomNode, ctx) {
   const parent = firstItemDomNode.parentNode;
   if (!parent) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.16.5",
+  "version": "0.17.0",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,8 +18,8 @@
     "dompurify": "^3.3.1",
     "marked": "^17.0.1",
     "shiki": "^3.20.0",
-    "@constela/compiler": "0.12.0",
-    "@constela/core": "0.13.0"
+    "@constela/compiler": "0.13.0",
+    "@constela/core": "0.14.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.2.0",
@@ -29,7 +29,7 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0",
-    "@constela/server": "9.0.0"
+    "@constela/server": "10.0.1"
   },
   "engines": {
     "node": ">=20.0.0"