@constela/runtime 0.6.0 → 0.8.0

package/dist/index.d.ts

@@ -26,6 +26,7 @@ declare function createEffect(fn: EffectFn): () => void;
 interface StateStore {
     get(name: string): unknown;
     set(name: string, value: unknown): void;
+    subscribe(name: string, fn: (value: unknown) => void): () => void;
 }
 interface StateDefinition {
     type: string;
@@ -49,6 +50,12 @@ 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>;
 }
 declare function evaluate(expr: CompiledExpression, ctx: EvaluationContext): unknown;
 
@@ -59,6 +66,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 {

package/dist/index.js

@@ -111,6 +111,13 @@ function createStateStore(definitions) {
         throw new Error(`State field "${name}" does not exist`);
       }
       signal.set(value);
+    },
+    subscribe(name, fn) {
+      const signal = signals.get(name);
+      if (!signal) {
+        throw new Error(`State field "${name}" does not exist`);
+      }
+      return signal.subscribe(fn);
     }
   };
 }
@@ -165,12 +172,59 @@ 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;
+    }
     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);
@@ -236,7 +290,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) {
@@ -250,6 +409,15 @@ 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;
   }
 }
 async function executeSetStep(target, value, ctx) {
@@ -380,6 +548,90 @@ async function executeFetchStep(step, 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 (_error) {
+    if (step.onError) {
+      for (const errorStep of step.onError) {
+        await executeStep(errorStep, 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 (_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);
+  }
+}
 
 // src/renderer/markdown.ts
 import { marked } from "marked";
@@ -709,6 +961,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;
@@ -716,6 +979,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.6.0",
+  "version": "0.8.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.5.0",
+    "@constela/core": "0.5.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": "1.0.0"
   },
   "engines": {
     "node": ">=20.0.0"