@fictjs/runtime 0.4.0 → 0.5.1

package/dist/index.dev.js

@@ -22,7 +22,7 @@ var enterRootGuard = () => true;
 var exitRootGuard = () => {
 };
 var defaultOptions = {
-  enabled: true,
+  enabled: isDev,
   maxFlushCyclesPerMicrotask: 1e4,
   maxEffectRunsPerFlush: 2e4,
   windowSize: 5,
@@ -495,8 +495,10 @@ function createRenderEffect(fn) {
 // src/hooks.ts
 var isDev3 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 var ctxStack = [];
+var preparedContext = null;
 function __fictPushContext() {
-  const ctx = { slots: [], cursor: 0 };
+  const ctx = preparedContext ?? { slots: [], cursor: 0 };
+  preparedContext = null;
   ctxStack.push(ctx);
   return ctx;
 }
@@ -524,6 +526,8 @@ var cycle = 0;
 var batchDepth = 0;
 var activeSub;
 var flushScheduled = false;
+var currentFlushId = 0;
+var activeCleanupFlushId = 0;
 var highPriorityQueue = [];
 var lowPriorityQueue = [];
 var isInTransition = false;
@@ -769,6 +773,8 @@ function updateSignal(s) {
   const current = s.currentValue;
   const pending = s.pendingValue;
   if (valuesDiffer(s, current, pending)) {
+    s.prevValue = current;
+    s.prevFlushId = currentFlushId;
     s.currentValue = pending;
     return true;
   }
@@ -787,6 +793,8 @@ function updateComputed(c) {
     c.flags &= ~Running;
     purgeDeps(c);
     if (valuesDiffer(c, oldValue, newValue)) {
+      c.prevValue = oldValue;
+      c.prevFlushId = currentFlushId;
       c.value = newValue;
       if (isDev4) updateComputedDevtools(c, newValue);
       return true;
@@ -800,15 +808,19 @@ function updateComputed(c) {
 }
 function runEffect(e) {
   const flags = e.flags;
-  if (flags & Dirty) {
-    if (e.runCleanup) {
-      inCleanup = true;
-      try {
-        e.runCleanup();
-      } finally {
-        inCleanup = false;
-      }
+  const runCleanup = () => {
+    if (!e.runCleanup) return;
+    inCleanup = true;
+    activeCleanupFlushId = currentFlushId;
+    try {
+      e.runCleanup();
+    } finally {
+      activeCleanupFlushId = 0;
+      inCleanup = false;
     }
+  };
+  if (flags & Dirty) {
+    runCleanup();
     ++cycle;
     if (isDev4) effectRunDevtools(e);
     e.depsTail = void 0;
@@ -826,14 +838,6 @@ function runEffect(e) {
       throw err;
     }
   } else if (flags & Pending && e.deps) {
-    if (e.runCleanup) {
-      inCleanup = true;
-      try {
-        e.runCleanup();
-      } finally {
-        inCleanup = false;
-      }
-    }
     let isDirty = false;
     try {
       isDirty = checkDirty(e.deps, e);
@@ -853,6 +857,7 @@ function runEffect(e) {
       throw err;
     }
     if (isDirty) {
+      runCleanup();
       ++cycle;
       if (isDev4) effectRunDevtools(e);
       e.depsTail = void 0;
@@ -898,6 +903,7 @@ function flush() {
     endFlushGuard();
     return;
   }
+  currentFlushId++;
   flushScheduled = false;
   let highIndex = 0;
   while (highIndex < highPriorityQueue.length) {
@@ -1002,6 +1008,12 @@ function signalOper(value) {
       if (subs !== void 0) shallowPropagate(subs);
     }
   }
+  if (inCleanup) {
+    if (this.prevFlushId === activeCleanupFlushId) {
+      return this.prevValue;
+    }
+    return this.currentValue;
+  }
   let sub = activeSub;
   while (sub !== void 0) {
     if (sub.flags & 3) {
@@ -1035,7 +1047,12 @@ function computed(getter, options2) {
   return bound;
 }
 function computedOper() {
-  if (inCleanup) return this.value;
+  if (inCleanup) {
+    if (this.prevFlushId === activeCleanupFlushId) {
+      return this.prevValue;
+    }
+    return this.value;
+  }
   const flags = this.flags;
   if (flags & Dirty) {
     if (updateComputed(this)) {
@@ -1673,6 +1690,22 @@ var unitlessList = isDev5 ? [
 ] : ["opacity", "zIndex"];
 var UnitlessStyles = new Set(unitlessList);
 
+// src/hydration.ts
+var hydrationStack = [];
+function withHydration(root, fn) {
+  const owner = root.ownerDocument ?? document;
+  hydrationStack.push({
+    cursor: root.firstChild,
+    boundary: null,
+    owner
+  });
+  try {
+    fn();
+  } finally {
+    hydrationStack.pop();
+  }
+}
+
 // src/node-ops.ts
 function toNodeArray(node) {
   try {
@@ -1816,6 +1849,40 @@ function removeNodes(nodes) {
   }
 }
 
+// src/resume.ts
+var ssrEnabled = false;
+var resumableEnabled = false;
+var hydrating = false;
+var scopeCounter = 0;
+var scopeRegistry = /* @__PURE__ */ new Map();
+function __fictIsResumable() {
+  return ssrEnabled || resumableEnabled;
+}
+function __fictIsHydrating() {
+  return hydrating;
+}
+function __fictRegisterScope(ctx, host, type, props) {
+  if (!__fictIsResumable()) return "";
+  const id = `s${++scopeCounter}`;
+  ctx.scopeId = id;
+  if (type !== void 0) {
+    ctx.scopeType = type;
+  }
+  host.setAttribute("data-fict-s", id);
+  if (type) {
+    host.setAttribute("data-fict-t", type);
+  }
+  const record = { id, ctx, host };
+  if (type !== void 0) {
+    record.type = type;
+  }
+  if (props !== void 0) {
+    record.props = props;
+  }
+  scopeRegistry.set(id, record);
+  return id;
+}
+
 // src/binding.ts
 var isDev6 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 function isReactive(value) {
@@ -2400,14 +2467,22 @@ var nextComponentId = 1;
 function render(view, container) {
   const root = createRootContext();
   const prev = pushRoot(root);
-  let dom;
+  let dom = void 0;
   try {
     const output = view();
-    dom = createElement(output);
+    if (__fictIsHydrating()) {
+      withHydration(container, () => {
+        dom = createElement(output);
+      });
+    } else {
+      dom = createElement(output);
+    }
   } finally {
     popRoot(prev);
   }
-  container.replaceChildren(dom);
+  if (!__fictIsHydrating()) {
+    container.replaceChildren(dom);
+  }
   container.setAttribute("data-fict-fine-grained", "1");
   flushOnMount(root);
   const teardown = () => {
@@ -2434,6 +2509,13 @@ function createElementWithContext(node, namespace) {
   if (node === null || node === void 0 || node === false) {
     return document.createTextNode("");
   }
+  if (isReactive(node)) {
+    const resolved = node();
+    if (resolved === node) {
+      return document.createTextNode("");
+    }
+    return createElementWithContext(resolved, namespace);
+  }
   if (typeof node === "object" && node !== null && !(node instanceof Node)) {
     if ("marker" in node) {
       const handle = node;
@@ -2510,6 +2592,27 @@ function createElementWithContext(node, namespace) {
         });
         onCleanup(() => hook.componentUnmount?.(componentId));
       }
+      if (__fictIsResumable() && !__fictIsHydrating()) {
+        const content = createElementWithContext(rendered, namespace);
+        const host = namespace === "svg" ? document.createElementNS(SVG_NS, "fict-host") : namespace === "mathml" ? document.createElementNS(MATHML_NS, "fict-host") : document.createElement("fict-host");
+        host.setAttribute("data-fict-host", "");
+        if (namespace === null && host.style) {
+          ;
+          host.style.display = "contents";
+        }
+        const meta = vnode.type.__fictMeta;
+        const typeKey = (meta?.id ?? vnode.type.name) || "Anonymous";
+        __fictRegisterScope(ctx, host, typeKey, rawProps);
+        if (meta?.resume) {
+          host.setAttribute("data-fict-h", meta.resume);
+        }
+        if (content instanceof DocumentFragment) {
+          host.append(...Array.from(content.childNodes));
+        } else {
+          host.appendChild(content);
+        }
+        return host;
+      }
       return createElementWithContext(rendered, namespace);
     } catch (err) {
       if (handleSuspend(err)) {