@constela/runtime 0.13.0 → 0.14.0

package/dist/index.d.ts

@@ -275,6 +275,7 @@ interface ActionContext {
     eventPayload?: unknown;
     refs?: Record<string, Element>;
     subscriptions?: (() => void)[];
+    cleanups?: (() => void)[];
     route?: {
         params: Record<string, string>;
         query: Record<string, string>;

package/dist/index.js

@@ -428,6 +428,18 @@ function evaluate(expr, ctx) {
         return val == null ? "" : String(val);
       }).join("");
     }
+    case "validity": {
+      const element2 = ctx.refs?.[expr.ref];
+      if (!element2) return null;
+      const formElement = element2;
+      if (!formElement.validity) return null;
+      const validity = formElement.validity;
+      const property = expr.property || "valid";
+      if (property === "message") {
+        return formElement.validationMessage || "";
+      }
+      return validity[property] ?? null;
+    }
     default: {
       const _exhaustiveCheck = expr;
       throw new Error(`Unknown expression type: ${JSON.stringify(_exhaustiveCheck)}`);
@@ -593,15 +605,24 @@ async function executeAction(action, ctx) {
   const extAction = action;
   const isLocal = extAction._isLocalAction && extAction._localStore;
   const localStore = extAction._localStore;
+  const delayPromises = [];
   for (const step of action.steps) {
     if (step.do === "set" || step.do === "update" || step.do === "setPath") {
       executeStepSync(step, ctx, isLocal ? localStore : void 0);
     } else if (step.do === "if") {
       await executeIfStep(step, ctx, isLocal ? localStore : void 0);
+    } else if (step.do === "delay") {
+      const delayPromise = executeDelayStep(step, ctx);
+      delayPromises.push(delayPromise);
+    } else if (step.do === "interval") {
+      await executeIntervalStep(step, ctx);
     } else {
       await executeStep(step, ctx);
     }
   }
+  if (delayPromises.length > 0) {
+    await Promise.all(delayPromises);
+  }
 }
 function executeStepSync(step, ctx, localStore) {
   switch (step.do) {
@@ -892,6 +913,18 @@ async function executeStep(step, ctx) {
     case "close":
       await executeCloseStep(step, ctx);
       break;
+    case "delay":
+      await executeDelayStep(step, ctx);
+      break;
+    case "interval":
+      await executeIntervalStep(step, ctx);
+      break;
+    case "clearTimer":
+      await executeClearTimerStep(step, ctx);
+      break;
+    case "focus":
+      await executeFocusStep(step, ctx);
+      break;
   }
 }
 async function executeSetStep(target, value, ctx) {
@@ -1258,6 +1291,137 @@ async function executeCloseStep(step, ctx) {
   if (!ctx.connections) return;
   ctx.connections.close(step.connection);
 }
+async function executeDelayStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const msValue = evaluate(step.ms, evalCtx);
+  const ms = typeof msValue === "number" ? Math.max(0, msValue) : 0;
+  return new Promise((resolve) => {
+    let resolved = false;
+    const timeoutId = setTimeout(async () => {
+      if (resolved) return;
+      resolved = true;
+      for (const thenStep of step.then) {
+        if (thenStep.do === "set" || thenStep.do === "update" || thenStep.do === "setPath") {
+          executeStepSync(thenStep, ctx);
+        } else if (thenStep.do === "if") {
+          await executeIfStep(thenStep, ctx);
+        } else {
+          await executeStep(thenStep, ctx);
+        }
+      }
+      resolve();
+    }, ms);
+    const numericId = typeof timeoutId === "number" ? timeoutId : Number(timeoutId);
+    if (step.result) {
+      ctx.locals[step.result] = numericId;
+    }
+    if (!ctx.locals["_timerResolvers"]) {
+      ctx.locals["_timerResolvers"] = /* @__PURE__ */ new Map();
+    }
+    ctx.locals["_timerResolvers"].set(numericId, () => {
+      if (!resolved) {
+        resolved = true;
+        clearTimeout(timeoutId);
+        resolve();
+      }
+    });
+    if (ctx.cleanups) {
+      ctx.cleanups.push(() => {
+        if (!resolved) {
+          resolved = true;
+          clearTimeout(timeoutId);
+          resolve();
+        }
+      });
+    }
+  });
+}
+async function executeIntervalStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const msValue = evaluate(step.ms, evalCtx);
+  const ms = typeof msValue === "number" ? Math.max(0, msValue) : 0;
+  const intervalId = setInterval(async () => {
+    const action = ctx.actions[step.action];
+    if (action) {
+      await executeAction(action, ctx);
+    }
+  }, ms);
+  const numericId = typeof intervalId === "number" ? intervalId : Number(intervalId);
+  if (step.result) {
+    ctx.locals[step.result] = numericId;
+  }
+  if (ctx.cleanups) {
+    ctx.cleanups.push(() => clearInterval(intervalId));
+  }
+}
+async function executeClearTimerStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const timerId = evaluate(step.target, evalCtx);
+  if (timerId == null) {
+    return;
+  }
+  const numericId = typeof timerId === "number" ? timerId : Number(timerId);
+  const timerResolvers = ctx.locals["_timerResolvers"];
+  if (timerResolvers?.has(numericId)) {
+    const resolver = timerResolvers.get(numericId);
+    if (resolver) {
+      resolver();
+    }
+    timerResolvers.delete(numericId);
+  }
+  clearTimeout(timerId);
+  clearInterval(timerId);
+}
+async function executeFocusStep(step, ctx) {
+  const evalCtx = createEvalContext(ctx);
+  const targetValue = evaluate(step.target, evalCtx);
+  let element2;
+  if (targetValue instanceof Element) {
+    element2 = targetValue;
+  } else if (typeof targetValue === "string") {
+    element2 = ctx.refs?.[targetValue];
+  }
+  try {
+    if (!element2) {
+      const refName = typeof targetValue === "string" ? targetValue : "unknown";
+      throw new Error(`Ref "${refName}" not found`);
+    }
+    switch (step.operation) {
+      case "focus":
+        if (typeof element2.focus === "function") {
+          element2.focus();
+        }
+        break;
+      case "blur":
+        if (typeof element2.blur === "function") {
+          element2.blur();
+        }
+        break;
+      case "select":
+        if (typeof element2.select === "function") {
+          element2.select();
+        } else {
+          throw new Error(`Element does not support select operation`);
+        }
+        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);
+      }
+    }
+  }
+}
 
 // ../../node_modules/.pnpm/marked@17.0.1/node_modules/marked/lib/marked.esm.js
 function L() {
@@ -2691,14 +2855,14 @@ function createDOMPurify() {
     DocumentFragment,
     HTMLTemplateElement,
     Node: Node2,
-    Element,
+    Element: Element2,
     NodeFilter,
     NamedNodeMap = window2.NamedNodeMap || window2.MozNamedAttrMap,
     HTMLFormElement,
     DOMParser,
     trustedTypes
   } = window2;
-  const ElementPrototype = Element.prototype;
+  const ElementPrototype = Element2.prototype;
   const cloneNode = lookupGetter(ElementPrototype, "cloneNode");
   const remove = lookupGetter(ElementPrototype, "remove");
   const getNextSibling = lookupGetter(ElementPrototype, "nextSibling");
@@ -3152,7 +3316,7 @@ function createDOMPurify() {
       _forceRemove(currentNode);
       return true;
     }
-    if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {
+    if (currentNode instanceof Element2 && !_checkValidNamespace(currentNode)) {
       _forceRemove(currentNode);
       return true;
     }
@@ -13248,6 +13412,188 @@ function isSvgTag(tag) {
 function isEventHandler(value) {
   return typeof value === "object" && value !== null && "event" in value && "action" in value;
 }
+function debounce(fn, wait, ctx) {
+  let timeoutId = null;
+  const debouncedFn = (event) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      fn(event);
+    }, wait);
+  };
+  ctx.cleanups?.push(() => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  });
+  return debouncedFn;
+}
+function throttle(fn, wait, ctx) {
+  let lastTime = 0;
+  let timeoutId = null;
+  let lastEvent = null;
+  const throttledFn = (event) => {
+    const now = Date.now();
+    const remaining = wait - (now - lastTime);
+    if (remaining <= 0) {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      lastTime = now;
+      fn(event);
+    } else {
+      lastEvent = event;
+      if (timeoutId === null) {
+        timeoutId = setTimeout(() => {
+          timeoutId = null;
+          lastTime = Date.now();
+          if (lastEvent) {
+            fn(lastEvent);
+            lastEvent = null;
+          }
+        }, remaining);
+      }
+    }
+  };
+  ctx.cleanups?.push(() => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  });
+  return throttledFn;
+}
+function createEventCallback(handler, ctx) {
+  return async (event) => {
+    const action = ctx.actions[handler.action];
+    if (!action) return;
+    const eventLocals = {};
+    const target = event.target;
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+      eventLocals["value"] = target.value;
+      if (target instanceof HTMLInputElement && target.type === "checkbox") {
+        eventLocals["checked"] = target.checked;
+      }
+      if (target instanceof HTMLInputElement && target.type === "file") {
+        eventLocals["files"] = Array.from(target.files || []).map((f) => ({
+          name: f.name,
+          size: f.size,
+          type: f.type,
+          _file: f
+        }));
+      }
+    }
+    if (event instanceof KeyboardEvent) {
+      eventLocals["key"] = event.key;
+      eventLocals["code"] = event.code;
+      eventLocals["ctrlKey"] = event.ctrlKey;
+      eventLocals["shiftKey"] = event.shiftKey;
+      eventLocals["altKey"] = event.altKey;
+      eventLocals["metaKey"] = event.metaKey;
+    }
+    if (event instanceof MouseEvent) {
+      eventLocals["clientX"] = event.clientX;
+      eventLocals["clientY"] = event.clientY;
+      eventLocals["pageX"] = event.pageX;
+      eventLocals["pageY"] = event.pageY;
+      eventLocals["button"] = event.button;
+    }
+    const touchEvent = event;
+    if (touchEvent.touches && touchEvent.changedTouches) {
+      eventLocals["touches"] = Array.from(touchEvent.touches).map((t) => ({
+        clientX: t.clientX,
+        clientY: t.clientY,
+        pageX: t.pageX,
+        pageY: t.pageY
+      }));
+      eventLocals["changedTouches"] = Array.from(touchEvent.changedTouches).map((t) => ({
+        clientX: t.clientX,
+        clientY: t.clientY,
+        pageX: t.pageX,
+        pageY: t.pageY
+      }));
+    }
+    if (handler.event === "scroll" && event.target instanceof Element) {
+      eventLocals["scrollTop"] = event.target.scrollTop;
+      eventLocals["scrollLeft"] = event.target.scrollLeft;
+    }
+    let payload = void 0;
+    if (handler.payload) {
+      payload = evaluatePayload(handler.payload, {
+        state: ctx.state,
+        locals: { ...ctx.locals, ...eventLocals },
+        ...ctx.imports && { imports: ctx.imports }
+      });
+    }
+    const actionCtx = {
+      state: ctx.state,
+      actions: ctx.actions,
+      locals: { ...ctx.locals, ...eventLocals, payload },
+      eventPayload: payload
+    };
+    await executeAction(action, actionCtx);
+  };
+}
+function wrapWithDebounceThrottle(callback, handler, ctx) {
+  if (handler.debounce !== void 0 && handler.debounce >= 0) {
+    return debounce(callback, handler.debounce, ctx);
+  }
+  if (handler.throttle !== void 0 && handler.throttle >= 0) {
+    return throttle(callback, handler.throttle, ctx);
+  }
+  return callback;
+}
+function setupIntersectionObserver(el, handler, ctx) {
+  const options = {};
+  if (handler.options?.threshold !== void 0) {
+    options.threshold = handler.options.threshold;
+  }
+  if (handler.options?.rootMargin !== void 0) {
+    options.rootMargin = handler.options.rootMargin;
+  }
+  let hasTriggered = false;
+  const observer = new IntersectionObserver((entries2) => {
+    for (const entry of entries2) {
+      if (entry.target !== el) continue;
+      if (handler.options?.once && hasTriggered) {
+        continue;
+      }
+      const action = ctx.actions[handler.action];
+      if (!action) continue;
+      const intersectLocals = {
+        isIntersecting: entry.isIntersecting,
+        intersectionRatio: entry.intersectionRatio
+      };
+      let payload = void 0;
+      if (handler.payload) {
+        payload = evaluatePayload(handler.payload, {
+          state: ctx.state,
+          locals: { ...ctx.locals, ...intersectLocals },
+          ...ctx.imports && { imports: ctx.imports }
+        });
+      }
+      const actionCtx = {
+        state: ctx.state,
+        actions: ctx.actions,
+        locals: { ...ctx.locals, ...intersectLocals, payload },
+        eventPayload: payload
+      };
+      executeAction(action, actionCtx);
+      if (handler.options?.once) {
+        hasTriggered = true;
+        observer.unobserve(el);
+      }
+    }
+  }, options);
+  observer.observe(el);
+  ctx.cleanups?.push(() => {
+    observer.disconnect();
+  });
+}
 function render(node, ctx) {
   switch (node.kind) {
     case "element":
@@ -13262,6 +13608,8 @@ function render(node, ctx) {
       return renderMarkdown(node, ctx);
     case "code":
       return renderCode(node, ctx);
+    case "portal":
+      return renderPortal(node, ctx);
     case "localState":
       return renderLocalState(node, ctx);
     default:
@@ -13284,34 +13632,13 @@ function renderElement(node, ctx) {
       if (isEventHandler(propValue)) {
         const handler = propValue;
         const eventName = handler.event;
-        el.addEventListener(eventName, async (event) => {
-          const action = ctx.actions[handler.action];
-          if (action) {
-            const eventLocals = {};
-            const target = event.target;
-            if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
-              eventLocals["value"] = target.value;
-              if (target instanceof HTMLInputElement && target.type === "checkbox") {
-                eventLocals["checked"] = target.checked;
-              }
-            }
-            let payload = void 0;
-            if (handler.payload) {
-              payload = evaluatePayload(handler.payload, {
-                state: ctx.state,
-                locals: { ...ctx.locals, ...eventLocals },
-                ...ctx.imports && { imports: ctx.imports }
-              });
-            }
-            const actionCtx = {
-              state: ctx.state,
-              actions: ctx.actions,
-              locals: { ...ctx.locals, ...eventLocals, payload },
-              eventPayload: payload
-            };
-            await executeAction(action, actionCtx);
-          }
-        });
+        if (eventName === "intersect") {
+          setupIntersectionObserver(el, handler, ctx);
+        } else {
+          const eventCallback = createEventCallback(handler, ctx);
+          const wrappedCallback = wrapWithDebounceThrottle(eventCallback, handler, ctx);
+          el.addEventListener(eventName, wrappedCallback);
+        }
       } else {
         const cleanup = createEffect(() => {
           const value = evaluate(propValue, { state: ctx.state, locals: ctx.locals, ...ctx.imports && { imports: ctx.imports } });
@@ -13651,6 +13978,41 @@ function renderCode(node, ctx) {
   ctx.cleanups?.push(cleanup);
   return container;
 }
+function renderPortal(node, ctx) {
+  let targetElement = null;
+  if (node.target === "body") {
+    targetElement = document.body;
+  } else if (node.target === "head") {
+    targetElement = document.head;
+  } else {
+    targetElement = document.querySelector(node.target);
+  }
+  if (!targetElement) {
+    return document.createComment("portal:target-not-found");
+  }
+  const portalContainer = document.createElement("div");
+  portalContainer.setAttribute("data-portal", "true");
+  portalContainer.style.display = "contents";
+  const portalCleanups = [];
+  const portalCtx = {
+    ...ctx,
+    cleanups: portalCleanups
+  };
+  for (const child of node.children) {
+    const childNode = render(child, portalCtx);
+    portalContainer.appendChild(childNode);
+  }
+  targetElement.appendChild(portalContainer);
+  ctx.cleanups?.push(() => {
+    for (const cleanup of portalCleanups) {
+      cleanup();
+    }
+    if (portalContainer.parentNode) {
+      portalContainer.parentNode.removeChild(portalContainer);
+    }
+  });
+  return document.createComment("portal");
+}
 function createLocalStateStore(stateDefs) {
   const signals = {};
   for (const [name, def] of Object.entries(stateDefs)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.13.0",
+  "version": "0.14.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.10.0",
-    "@constela/core": "0.10.0"
+    "@constela/compiler": "0.11.0",
+    "@constela/core": "0.11.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": "6.0.0"
+    "@constela/server": "7.0.0"
   },
   "engines": {
     "node": ">=20.0.0"