@constela/runtime 6.0.1 → 7.0.0

package/dist/index.js

@@ -13489,6 +13489,69 @@ async function highlightCode(code, language) {
   });
 }
 
+// src/transition/index.ts
+function applyEnterTransition(el, config) {
+  const duration = config.duration ?? 300;
+  let cancelled = false;
+  el.classList.add(config.enter);
+  requestAnimationFrame(() => {
+    if (cancelled) return;
+    el.classList.add(config.enterActive);
+    let done = false;
+    const cleanup = () => {
+      if (done) return;
+      done = true;
+      el.classList.remove(config.enter);
+      el.classList.remove(config.enterActive);
+      el.removeEventListener("transitionend", onEnd);
+    };
+    const onEnd = (e) => {
+      if (e.target !== el) return;
+      cleanup();
+    };
+    el.addEventListener("transitionend", onEnd);
+    setTimeout(cleanup, duration);
+  });
+  return () => {
+    cancelled = true;
+  };
+}
+function applyExitTransition(el, config) {
+  const duration = config.duration ?? 300;
+  let cancelled = false;
+  const promise = new Promise((resolve) => {
+    el.classList.add(config.exit);
+    requestAnimationFrame(() => {
+      if (cancelled) {
+        resolve();
+        return;
+      }
+      el.classList.add(config.exitActive);
+      let done = false;
+      const cleanup = () => {
+        if (done) return;
+        done = true;
+        el.classList.remove(config.exit);
+        el.classList.remove(config.exitActive);
+        el.removeEventListener("transitionend", onEnd);
+        resolve();
+      };
+      const onEnd = (e) => {
+        if (e.target !== el) return;
+        cleanup();
+      };
+      el.addEventListener("transitionend", onEnd);
+      setTimeout(cleanup, duration);
+    });
+  });
+  const cancel = () => {
+    cancelled = true;
+    el.classList.remove(config.exit);
+    el.classList.remove(config.exitActive);
+  };
+  return { promise, cancel };
+}
+
 // src/renderer/index.ts
 var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 var SVG_TAGS = /* @__PURE__ */ new Set([
@@ -13860,17 +13923,34 @@ function renderIf(node, ctx) {
   let currentNode = null;
   let currentBranch = "none";
   let branchCleanups = [];
+  let pendingExitCancel = null;
   const effectCleanup = createEffect(() => {
     const condition = evaluate(node.condition, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } });
     const shouldShowThen = Boolean(condition);
     const newBranch = shouldShowThen ? "then" : node.else ? "else" : "none";
     if (newBranch !== currentBranch) {
+      if (pendingExitCancel) {
+        pendingExitCancel();
+        pendingExitCancel = null;
+      }
       for (const cleanup of branchCleanups) {
         cleanup();
       }
       branchCleanups = [];
-      if (currentNode && currentNode.parentNode) {
-        currentNode.parentNode.removeChild(currentNode);
+      const oldNode = currentNode;
+      if (oldNode && oldNode.parentNode) {
+        if (node.transition && oldNode instanceof HTMLElement) {
+          const { promise, cancel } = applyExitTransition(oldNode, node.transition);
+          pendingExitCancel = cancel;
+          promise.then(() => {
+            pendingExitCancel = null;
+            if (oldNode.parentNode) {
+              oldNode.parentNode.removeChild(oldNode);
+            }
+          });
+        } else {
+          oldNode.parentNode.removeChild(oldNode);
+        }
       }
       const localCleanups = [];
       const branchCtx = { ...ctx, cleanups: localCleanups };
@@ -13886,6 +13966,9 @@ function renderIf(node, ctx) {
       if (currentNode && anchor.parentNode) {
         anchor.parentNode.insertBefore(currentNode, anchor.nextSibling);
       }
+      if (currentNode && node.transition && currentNode instanceof HTMLElement) {
+        applyEnterTransition(currentNode, node.transition);
+      }
       currentBranch = newBranch;
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "6.0.1",
+  "version": "7.0.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.15.22",
-    "@constela/core": "0.22.1"
+    "@constela/compiler": "0.16.0",
+    "@constela/core": "0.23.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.2.0",
@@ -29,10 +29,10 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0",
-    "@constela/server": "18.0.1"
+    "@constela/server": "19.0.0"
   },
   "peerDependencies": {
-    "@constela/ai": "7.0.1"
+    "@constela/ai": "8.0.0"
   },
   "peerDependenciesMeta": {
     "@constela/ai": {