@constela/runtime 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -50,6 +50,13 @@ declare function createStateStore(definitions: Record<string, StateDefinition>):
 interface EvaluationContext {
     state: StateStore;
     locals: Record<string, unknown>;
+    route?: {
+        params: Record<string, string>;
+        query: Record<string, string>;
+        path: string;
+    };
+    imports?: Record<string, unknown>;
+    refs?: Record<string, Element>;
 }
 declare function evaluate(expr: CompiledExpression, ctx: EvaluationContext): unknown;
 
@@ -60,6 +67,9 @@ declare function evaluate(expr: CompiledExpression, ctx: EvaluationContext): unk
  * - set: Update state with value
  * - update: Increment/decrement numbers, push/pop/remove for arrays
  * - fetch: Make HTTP requests with onSuccess/onError handlers
+ * - storage: localStorage/sessionStorage operations
+ * - clipboard: Clipboard API operations
+ * - navigate: Page navigation
  */
 
 interface ActionContext {
@@ -67,6 +77,8 @@ interface ActionContext {
     actions: Record<string, CompiledAction>;
     locals: Record<string, unknown>;
     eventPayload?: unknown;
+    refs?: Record<string, Element>;
+    subscriptions?: (() => void)[];
 }
 declare function executeAction(action: CompiledAction, ctx: ActionContext): Promise<void>;
 

package/dist/index.js

@@ -172,12 +172,61 @@ function evaluate(expr, ctx) {
       }
       return value;
     }
+    case "route": {
+      const source = expr.source ?? "param";
+      const routeCtx = ctx.route;
+      if (!routeCtx) return "";
+      switch (source) {
+        case "param":
+          return routeCtx.params[expr.name] ?? "";
+        case "query":
+          return routeCtx.query[expr.name] ?? "";
+        case "path":
+          return routeCtx.path;
+      }
+    }
+    case "import": {
+      const importData = ctx.imports?.[expr.name];
+      if (importData === void 0) return void 0;
+      if (expr.path) {
+        return getNestedValue(importData, expr.path);
+      }
+      return importData;
+    }
+    case "ref":
+      return ctx.refs?.[expr.name] ?? null;
     default: {
       const _exhaustiveCheck = expr;
       throw new Error(`Unknown expression type: ${JSON.stringify(_exhaustiveCheck)}`);
     }
   }
 }
+function getNestedValue(obj, path) {
+  const forbiddenKeys = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+  const parts = path.split(".");
+  let value = obj;
+  for (const part of parts) {
+    if (forbiddenKeys.has(part)) {
+      return void 0;
+    }
+    if (value == null) {
+      return void 0;
+    }
+    if (Array.isArray(value)) {
+      const index = Number(part);
+      if (Number.isInteger(index) && index >= 0) {
+        value = value[index];
+      } else {
+        value = value[part];
+      }
+    } else if (typeof value === "object") {
+      value = value[part];
+    } else {
+      return void 0;
+    }
+  }
+  return value;
+}
 function evaluateBinary(op, left, right, ctx) {
   if (op === "&&") {
     const leftVal2 = evaluate(left, ctx);
@@ -243,7 +292,112 @@ function evaluateBinary(op, left, right, ctx) {
 // src/action/executor.ts
 async function executeAction(action, ctx) {
   for (const step of action.steps) {
-    await executeStep(step, ctx);
+    if (step.do === "set" || step.do === "update") {
+      executeStepSync(step, ctx);
+    } else {
+      await executeStep(step, ctx);
+    }
+  }
+}
+function executeStepSync(step, ctx) {
+  switch (step.do) {
+    case "set":
+      executeSetStepSync(step.target, step.value, ctx);
+      break;
+    case "update":
+      executeUpdateStepSync(step, ctx);
+      break;
+  }
+}
+function executeSetStepSync(target, value, ctx) {
+  const evalCtx = { state: ctx.state, locals: ctx.locals };
+  const newValue = evaluate(value, evalCtx);
+  ctx.state.set(target, newValue);
+}
+function executeUpdateStepSync(step, ctx) {
+  const { target, operation, value } = step;
+  const evalCtx = { state: ctx.state, locals: ctx.locals };
+  const currentValue = ctx.state.get(target);
+  switch (operation) {
+    case "increment": {
+      const evalResult = value ? evaluate(value, evalCtx) : 1;
+      const amount = typeof evalResult === "number" ? evalResult : 1;
+      const current = typeof currentValue === "number" ? currentValue : 0;
+      ctx.state.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;
+      ctx.state.set(target, current - amount);
+      break;
+    }
+    case "push": {
+      const item = value ? evaluate(value, evalCtx) : void 0;
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      ctx.state.set(target, [...arr, item]);
+      break;
+    }
+    case "pop": {
+      const arr = Array.isArray(currentValue) ? currentValue : [];
+      ctx.state.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") {
+        ctx.state.set(target, arr.filter((_, i) => i !== removeValue));
+      } else {
+        ctx.state.set(target, arr.filter((x) => x !== removeValue));
+      }
+      break;
+    }
+    case "toggle": {
+      const current = typeof currentValue === "boolean" ? currentValue : false;
+      ctx.state.set(target, !current);
+      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 : {};
+      ctx.state.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;
+      }
+      ctx.state.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);
+      }
+      ctx.state.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);
+      }
+      ctx.state.set(target, arr);
+      break;
+    }
   }
 }
 async function executeStep(step, ctx) {
@@ -257,6 +411,27 @@ async function executeStep(step, ctx) {
     case "fetch":
       await executeFetchStep(step, ctx);
       break;
+    case "storage":
+      await executeStorageStep(step, ctx);
+      break;
+    case "clipboard":
+      await executeClipboardStep(step, ctx);
+      break;
+    case "navigate":
+      await executeNavigateStep(step, ctx);
+      break;
+    case "import":
+      await executeImportStep(step, ctx);
+      break;
+    case "call":
+      await executeCallStep(step, ctx);
+      break;
+    case "subscribe":
+      await executeSubscribeStep(step, ctx);
+      break;
+    case "dispose":
+      await executeDisposeStep(step, ctx);
+      break;
   }
 }
 async function executeSetStep(target, value, ctx) {
@@ -373,13 +548,66 @@ async function executeFetchStep(step, ctx) {
         }
       }
     } else {
+      ctx.locals["error"] = {
+        message: `HTTP error: ${response.status} ${response.statusText}`,
+        name: "HTTPError"
+      };
       if (step.onError) {
         for (const errorStep of step.onError) {
           await executeStep(errorStep, ctx);
         }
       }
     }
-  } catch (_error) {
+  } catch (err) {
+    ctx.locals["error"] = {
+      message: err instanceof Error ? err.message : String(err),
+      name: err instanceof Error ? err.name : "Error"
+    };
+    if (step.onError) {
+      for (const errorStep of step.onError) {
+        await executeStep(errorStep, ctx);
+      }
+    }
+  }
+}
+async function executeStorageStep(step, ctx) {
+  const evalCtx = { state: ctx.state, locals: ctx.locals };
+  const key = evaluate(step.key, evalCtx);
+  const storage = step.storage === "local" ? localStorage : sessionStorage;
+  try {
+    switch (step.operation) {
+      case "get": {
+        const value = storage.getItem(key);
+        if (step.result) {
+          try {
+            ctx.locals[step.result] = value !== null ? JSON.parse(value) : null;
+          } catch {
+            ctx.locals[step.result] = value;
+          }
+        }
+        break;
+      }
+      case "set": {
+        const setValue = step.value ? evaluate(step.value, evalCtx) : void 0;
+        const valueToStore = JSON.stringify(setValue);
+        storage.setItem(key, valueToStore);
+        break;
+      }
+      case "remove": {
+        storage.removeItem(key);
+        break;
+      }
+    }
+    if (step.onSuccess) {
+      for (const successStep of step.onSuccess) {
+        await executeStep(successStep, ctx);
+      }
+    }
+  } catch (err) {
+    ctx.locals["error"] = {
+      message: err instanceof Error ? err.message : String(err),
+      name: err instanceof Error ? err.name : "Error"
+    };
     if (step.onError) {
       for (const errorStep of step.onError) {
         await executeStep(errorStep, ctx);
@@ -387,6 +615,145 @@ async function executeFetchStep(step, ctx) {
     }
   }
 }
+async function executeClipboardStep(step, ctx) {
+  const evalCtx = { state: ctx.state, locals: ctx.locals };
+  try {
+    switch (step.operation) {
+      case "write": {
+        const value = step.value ? evaluate(step.value, evalCtx) : "";
+        const text = typeof value === "string" ? value : String(value);
+        await navigator.clipboard.writeText(text);
+        break;
+      }
+      case "read": {
+        const readText = await navigator.clipboard.readText();
+        if (step.result) {
+          ctx.locals[step.result] = readText;
+        }
+        break;
+      }
+    }
+    if (step.onSuccess) {
+      for (const successStep of step.onSuccess) {
+        await executeStep(successStep, ctx);
+      }
+    }
+  } catch (err) {
+    ctx.locals["error"] = {
+      message: err instanceof Error ? err.message : String(err),
+      name: err instanceof Error ? err.name : "Error"
+    };
+    if (step.onError) {
+      for (const errorStep of step.onError) {
+        await executeStep(errorStep, ctx);
+      }
+    }
+  }
+}
+async function executeNavigateStep(step, ctx) {
+  const evalCtx = { state: ctx.state, locals: ctx.locals };
+  const url = evaluate(step.url, evalCtx);
+  const target = step.target ?? "_self";
+  if (target === "_blank") {
+    window.open(url, "_blank");
+  } else if (step.replace) {
+    window.location.replace(url);
+  } else {
+    window.location.assign(url);
+  }
+}
+async function executeImportStep(step, ctx) {
+  try {
+    const module = await import(
+      /* @vite-ignore */
+      step.module
+    );
+    ctx.locals[step.result] = module;
+    if (step.onSuccess) {
+      for (const successStep of step.onSuccess) {
+        await executeStep(successStep, ctx);
+      }
+    }
+  } catch (err) {
+    ctx.locals["error"] = {
+      message: err instanceof Error ? err.message : String(err),
+      name: err instanceof Error ? err.name : "Error"
+    };
+    if (step.onError) {
+      for (const errorStep of step.onError) {
+        await executeStep(errorStep, ctx);
+      }
+    }
+  }
+}
+async function executeCallStep(step, ctx) {
+  const evalCtx = { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs } };
+  try {
+    const target = evaluate(step.target, evalCtx);
+    const args = step.args?.map((arg) => evaluate(arg, evalCtx)) ?? [];
+    if (typeof target === "function") {
+      const result = await target(...args);
+      if (step.result) {
+        ctx.locals[step.result] = result;
+      }
+    } else {
+      throw new Error(`Target is not callable: received ${typeof target}`);
+    }
+    if (step.onSuccess) {
+      for (const successStep of step.onSuccess) {
+        await executeStep(successStep, ctx);
+      }
+    }
+  } catch (err) {
+    ctx.locals["error"] = {
+      message: err instanceof Error ? err.message : String(err),
+      name: err instanceof Error ? err.name : "Error"
+    };
+    if (step.onError) {
+      for (const errorStep of step.onError) {
+        await executeStep(errorStep, ctx);
+      }
+    }
+  }
+}
+async function executeSubscribeStep(step, ctx) {
+  const evalCtx = { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs } };
+  const target = evaluate(step.target, evalCtx);
+  if (target && typeof target === "object" && step.event in target) {
+    const eventMethod = target[step.event];
+    if (typeof eventMethod === "function") {
+      const disposable = eventMethod.call(target, async (eventData) => {
+        const action = ctx.actions[step.action];
+        if (action) {
+          const subscriptionCtx = {
+            ...ctx,
+            locals: { ...ctx.locals, event: eventData }
+          };
+          await executeAction(action, subscriptionCtx);
+        }
+      });
+      if (ctx.subscriptions) {
+        if (disposable && typeof disposable === "object" && "dispose" in disposable && typeof disposable.dispose === "function") {
+          ctx.subscriptions.push(() => disposable.dispose());
+        } else if (typeof disposable === "function") {
+          ctx.subscriptions.push(disposable);
+        }
+      }
+    }
+  }
+}
+async function executeDisposeStep(step, ctx) {
+  const evalCtx = { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs } };
+  const target = evaluate(step.target, evalCtx);
+  if (target && typeof target === "object") {
+    const obj = target;
+    if (typeof obj["dispose"] === "function") {
+      obj["dispose"]();
+    } else if (typeof obj["destroy"] === "function") {
+      obj["destroy"]();
+    }
+  }
+}
 
 // src/renderer/markdown.ts
 import { marked } from "marked";
@@ -716,6 +1083,17 @@ function createApp(program, mount) {
     locals: {},
     cleanups
   };
+  const actionCtx = {
+    state,
+    actions,
+    locals: {}
+  };
+  if (program.lifecycle?.onMount) {
+    const onMountAction = actions[program.lifecycle.onMount];
+    if (onMountAction) {
+      void executeAction(onMountAction, actionCtx);
+    }
+  }
   const rootNode = render(program.view, ctx);
   mount.appendChild(rootNode);
   let destroyed = false;
@@ -723,6 +1101,12 @@ function createApp(program, mount) {
     destroy() {
       if (destroyed) return;
       destroyed = true;
+      if (program.lifecycle?.onUnmount) {
+        const onUnmountAction = actions[program.lifecycle.onUnmount];
+        if (onUnmountAction) {
+          void executeAction(onUnmountAction, actionCtx);
+        }
+      }
       for (const cleanup of cleanups) {
         cleanup();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.7.0",
+  "version": "0.9.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.4.0",
-    "@constela/core": "0.4.0"
+    "@constela/compiler": "0.6.0",
+    "@constela/core": "0.6.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": "0.1.2"
+    "@constela/server": "2.0.0"
   },
   "engines": {
     "node": ">=20.0.0"