@constela/runtime 0.12.1 → 0.13.0

package/README.md

@@ -65,6 +65,54 @@ Dynamic path with variables:
 }
 ```
 
+### String Concatenation (concat)
+
+Build dynamic strings from multiple expressions:
+
+```json
+{
+  "expr": "concat",
+  "items": [
+    { "expr": "lit", "value": "/users/" },
+    { "expr": "var", "name": "userId" },
+    { "expr": "lit", "value": "/profile" }
+  ]
+}
+```
+
+Useful for:
+- Dynamic URLs: `/api/posts/{id}`
+- CSS class names: `btn btn-{variant}`
+- Formatted messages: `Hello, {name}!`
+
+### Object Payloads for Event Handlers
+
+Pass multiple values to actions with object-shaped payloads:
+
+```json
+{
+  "kind": "element",
+  "tag": "button",
+  "props": {
+    "onClick": {
+      "event": "click",
+      "action": "toggleLike",
+      "payload": {
+        "index": { "expr": "var", "name": "index" },
+        "postId": { "expr": "var", "name": "post", "path": "id" },
+        "currentLiked": { "expr": "var", "name": "post", "path": "liked" }
+      }
+    }
+  }
+}
+```
+
+Each expression field in the payload is evaluated when the event fires. The action receives the evaluated object:
+
+```json
+{ "index": 5, "postId": "abc123", "currentLiked": true }
+```
+
 ### Key-based List Diffing
 
 Efficient list updates - only changed items re-render:

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { CompiledExpression, CompiledAction, CompiledNode, CompiledProgram } from '@constela/compiler';
+import { CompiledExpression, CompiledAction, CompiledNode, CompiledLocalAction, CompiledProgram } from '@constela/compiler';
 
 interface Signal<T> {
     get(): T;
@@ -254,6 +254,20 @@ declare function createConnectionManager(): ConnectionManager;
  * - navigate: Page navigation
  */
 
+/**
+ * Local state store interface for component-level state
+ */
+interface LocalStateStore$1 {
+    get(name: string): unknown;
+    set(name: string, value: unknown): void;
+}
+/**
+ * Extended action type with local action metadata
+ */
+interface ExtendedAction extends CompiledAction {
+    _isLocalAction?: boolean;
+    _localStore?: LocalStateStore$1;
+}
 interface ActionContext {
     state: StateStore;
     actions: Record<string, CompiledAction>;
@@ -269,7 +283,7 @@ interface ActionContext {
     imports?: Record<string, unknown>;
     connections?: ConnectionManager;
 }
-declare function executeAction(action: CompiledAction, ctx: ActionContext): Promise<void>;
+declare function executeAction(action: CompiledAction | ExtendedAction, ctx: ActionContext): Promise<void>;
 
 /**
  * Renderer - DOM rendering for compiled view nodes
@@ -281,6 +295,14 @@ declare function executeAction(action: CompiledAction, ctx: ActionContext): Prom
  * - each: List rendering with reactive updates
  */
 
+/**
+ * Local state store interface for component-level state
+ */
+interface LocalStateStore {
+    get(name: string): unknown;
+    set(name: string, value: unknown): void;
+    signals: Record<string, Signal<unknown>>;
+}
 interface RenderContext {
     state: StateStore;
     actions: Record<string, CompiledAction>;
@@ -289,6 +311,10 @@ interface RenderContext {
     cleanups?: (() => void)[];
     refs?: Record<string, Element>;
     inSvg?: boolean;
+    localState?: {
+        store: LocalStateStore;
+        actions: Record<string, CompiledLocalAction>;
+    };
 }
 declare function render(node: CompiledNode, ctx: RenderContext): Node;
 

package/dist/index.js

@@ -590,38 +590,49 @@ function createEvalContext(ctx) {
   };
 }
 async function executeAction(action, ctx) {
+  const extAction = action;
+  const isLocal = extAction._isLocalAction && extAction._localStore;
+  const localStore = extAction._localStore;
   for (const step of action.steps) {
     if (step.do === "set" || step.do === "update" || step.do === "setPath") {
-      executeStepSync(step, ctx);
+      executeStepSync(step, ctx, isLocal ? localStore : void 0);
     } else if (step.do === "if") {
-      await executeIfStep(step, ctx);
+      await executeIfStep(step, ctx, isLocal ? localStore : void 0);
     } else {
       await executeStep(step, ctx);
     }
   }
 }
-function executeStepSync(step, ctx) {
+function executeStepSync(step, ctx, localStore) {
   switch (step.do) {
     case "set":
-      executeSetStepSync(step.target, step.value, ctx);
+      if (localStore) {
+        executeLocalSetStepSync(step.target, step.value, ctx, localStore);
+      } else {
+        executeSetStepSync(step.target, step.value, ctx);
+      }
       break;
     case "update":
-      executeUpdateStepSync(step, ctx);
+      if (localStore) {
+        executeLocalUpdateStepSync(step, ctx, localStore);
+      } else {
+        executeUpdateStepSync(step, ctx);
+      }
       break;
     case "setPath":
       executeSetPathStepSync(step, ctx);
       break;
   }
 }
-async function executeIfStep(step, ctx) {
+async function executeIfStep(step, ctx, localStore) {
   const evalCtx = createEvalContext(ctx);
   const condition = evaluate(step.condition, evalCtx);
   const stepsToExecute = condition ? step.then : step.else || [];
   for (const nestedStep of stepsToExecute) {
     if (nestedStep.do === "set" || nestedStep.do === "update" || nestedStep.do === "setPath") {
-      executeStepSync(nestedStep, ctx);
+      executeStepSync(nestedStep, ctx, localStore);
     } else if (nestedStep.do === "if") {
-      await executeIfStep(nestedStep, ctx);
+      await executeIfStep(nestedStep, ctx, localStore);
     } else {
       await executeStep(nestedStep, ctx);
     }
@@ -718,6 +729,97 @@ function executeUpdateStepSync(step, ctx) {
     }
   }
 }
+function executeLocalSetStepSync(target, value, ctx, localStore) {
+  const evalCtx = createEvalContext(ctx);
+  const newValue = evaluate(value, evalCtx);
+  localStore.set(target, newValue);
+}
+function executeLocalUpdateStepSync(step, ctx, localStore) {
+  const { target, operation, value } = step;
+  const evalCtx = createEvalContext(ctx);
+  const currentValue = localStore.get(target);
+  switch (operation) {
+    case "toggle": {
+      const current = typeof currentValue === "boolean" ? currentValue : false;
+      localStore.set(target, !current);
+      break;
+    }
+    case "increment": {
+      const evalResult = value ? evaluate(value, evalCtx) : 1;
+      const amount = typeof evalResult === "number" ? evalResult : 1;
+      const current = typeof currentValue === "number" ? currentValue : 0;
+      localStore.set(target, current + amount);
+      break;
+    }
+    case "decrement": {
+      const evalResult = value ? evaluate(value, evalCtx) : 1;
+      const amount = typeof evalResult === "number" ? evalResult : 1;
+      const current = typeof currentValue === "number" ? currentValue : 0;
+      localStore.set(target, current - amount);
+      break;
+    }
+    case "push": {
+      const item = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      localStore.set(target, [...arr, item]);
+      break;
+    }
+    case "pop": {
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      localStore.set(target, arr.slice(0, -1));
+      break;
+    }
+    case "remove": {
+      const removeValue = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      if (typeof removeValue === "number") {
+        localStore.set(target, arr.filter((_2, i) => i !== removeValue));
+      } else {
+        localStore.set(target, arr.filter((x2) => x2 !== removeValue));
+      }
+      break;
+    }
+    case "merge": {
+      const evalResult = value ? evaluate(value, evalCtx) : {};
+      const mergeValue = typeof evalResult === "object" && evalResult !== null ? evalResult : {};
+      const current = typeof currentValue === "object" && currentValue !== null ? currentValue : {};
+      localStore.set(target, { ...current, ...mergeValue });
+      break;
+    }
+    case "replaceAt": {
+      const idx = step.index ? evaluate(step.index, evalCtx) : 0;
+      const newValue = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? [...currentValue] : [];
+      if (typeof idx === "number" && idx >= 0 && idx < arr.length) {
+        arr[idx] = newValue;
+      }
+      localStore.set(target, arr);
+      break;
+    }
+    case "insertAt": {
+      const idx = step.index ? evaluate(step.index, evalCtx) : 0;
+      const newValue = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? [...currentValue] : [];
+      if (typeof idx === "number" && idx >= 0) {
+        arr.splice(idx, 0, newValue);
+      }
+      localStore.set(target, arr);
+      break;
+    }
+    case "splice": {
+      const idx = step.index ? evaluate(step.index, evalCtx) : 0;
+      const delCount = step.deleteCount ? evaluate(step.deleteCount, evalCtx) : 0;
+      const items = value ? evaluate(value, evalCtx) : [];
+      const arr = Array.isArray(currentValue) ? [...currentValue] : [];
+      if (typeof idx === "number" && typeof delCount === "number") {
+        const insertItems = Array.isArray(items) ? items : [];
+        arr.splice(idx, delCount, ...insertItems);
+      }
+      localStore.set(target, arr);
+      break;
+    }
+  }
+}
 function executeSetPathStepSync(step, ctx) {
   const evalCtx = createEvalContext(ctx);
   const pathValue = evaluate(step.path, evalCtx);
@@ -13160,6 +13262,8 @@ function render(node, ctx) {
       return renderMarkdown(node, ctx);
     case "code":
       return renderCode(node, ctx);
+    case "localState":
+      return renderLocalState(node, ctx);
     default:
       throw new Error("Unknown node kind");
   }
@@ -13342,6 +13446,18 @@ function createReactiveLocals(baseLocals, itemKey, itemSignal, indexKey, indexSi
       if (prop === itemKey) return true;
       if (indexKey && prop === indexKey) return true;
       return prop in target;
+    },
+    ownKeys(target) {
+      const keys = Reflect.ownKeys(target);
+      if (!keys.includes(itemKey)) keys.push(itemKey);
+      if (indexKey && !keys.includes(indexKey)) keys.push(indexKey);
+      return keys;
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      if (prop === itemKey || indexKey && prop === indexKey) {
+        return { enumerable: true, configurable: true };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, prop);
     }
   });
 }
@@ -13535,6 +13651,100 @@ function renderCode(node, ctx) {
   ctx.cleanups?.push(cleanup);
   return container;
 }
+function createLocalStateStore(stateDefs) {
+  const signals = {};
+  for (const [name, def] of Object.entries(stateDefs)) {
+    signals[name] = createSignal(def.initial);
+  }
+  return {
+    get(name) {
+      return signals[name]?.get();
+    },
+    set(name, value) {
+      signals[name]?.set(value);
+    },
+    signals
+  };
+}
+function createLocalsWithLocalState(baseLocals, localStore) {
+  return new Proxy(baseLocals, {
+    get(target, prop) {
+      if (prop in localStore.signals) {
+        return localStore.get(prop);
+      }
+      return target[prop];
+    },
+    has(target, prop) {
+      if (prop in localStore.signals) return true;
+      return prop in target;
+    },
+    ownKeys(target) {
+      const keys = Reflect.ownKeys(target);
+      for (const key2 of Object.keys(localStore.signals)) {
+        if (!keys.includes(key2)) keys.push(key2);
+      }
+      return keys;
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      if (prop in localStore.signals) {
+        return { enumerable: true, configurable: true };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    }
+  });
+}
+function createStateWithLocalState(globalState, localStore) {
+  return {
+    get(name) {
+      if (name in localStore.signals) {
+        return localStore.get(name);
+      }
+      return globalState.get(name);
+    },
+    set(name, value) {
+      globalState.set(name, value);
+    },
+    setPath(name, path, value) {
+      globalState.setPath(name, path, value);
+    },
+    subscribe(name, fn) {
+      if (name in localStore.signals) {
+        return localStore.signals[name].subscribe(fn);
+      }
+      return globalState.subscribe(name, fn);
+    },
+    getPath(name, path) {
+      return globalState.getPath(name, path);
+    },
+    subscribeToPath(name, path, fn) {
+      return globalState.subscribeToPath(name, path, fn);
+    }
+  };
+}
+function renderLocalState(node, ctx) {
+  const localStore = createLocalStateStore(node.state);
+  const mergedLocals = createLocalsWithLocalState(ctx.locals, localStore);
+  const mergedState = createStateWithLocalState(ctx.state, localStore);
+  const mergedActions = { ...ctx.actions };
+  for (const [name, action] of Object.entries(node.actions)) {
+    mergedActions[name] = {
+      ...action,
+      _isLocalAction: true,
+      _localStore: localStore
+    };
+  }
+  const childCtx = {
+    ...ctx,
+    state: mergedState,
+    locals: mergedLocals,
+    actions: mergedActions,
+    localState: {
+      store: localStore,
+      actions: node.actions
+    }
+  };
+  return render(node.child, childCtx);
+}
 
 // src/app.ts
 function createApp(program, mount) {
@@ -13616,6 +13826,18 @@ function createReactiveLocals2(baseLocals, itemSignal, indexSignal, itemName, in
       if (prop === itemName) return true;
       if (indexName && prop === indexName) return true;
       return prop in target;
+    },
+    ownKeys(target) {
+      const keys = Reflect.ownKeys(target);
+      if (!keys.includes(itemName)) keys.push(itemName);
+      if (indexName && !keys.includes(indexName)) keys.push(indexName);
+      return keys;
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      if (prop === itemName || indexName && prop === indexName) {
+        return { enumerable: true, configurable: true };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, prop);
     }
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.12.1",
+  "version": "0.13.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.9.1",
-    "@constela/core": "0.9.1"
+    "@constela/compiler": "0.10.0",
+    "@constela/core": "0.10.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": "5.0.1"
+    "@constela/server": "6.0.0"
   },
   "engines": {
     "node": ">=20.0.0"