@fictjs/runtime 0.16.0 → 0.17.1

package/dist/index.dev.js

@@ -179,8 +179,6 @@ var reportCycle = (reason, detail = void 0) => {
 var isDev2 = true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 var currentRoot;
 var currentEffectCleanups;
-var globalErrorHandlers = /* @__PURE__ */ new WeakMap();
-var globalSuspenseHandlers = /* @__PURE__ */ new WeakMap();
 var rootDevtoolsIds = /* @__PURE__ */ new WeakMap();
 var nextRootDevtoolsId = 0;
 function registerRootDevtools(root) {
@@ -255,18 +253,27 @@ function onCleanup(fn) {
 function flushOnMount(root) {
   const cbs = root.onMountCallbacks;
   if (!cbs || cbs.length === 0) return;
+  try {
+    withRootContext(root, () => {
+      for (let i = 0; i < cbs.length; i++) {
+        const cleanup = cbs[i]();
+        if (typeof cleanup === "function") {
+          root.cleanups.push(cleanup);
+        }
+      }
+    });
+  } finally {
+    cbs.length = 0;
+  }
+}
+function withRootContext(root, fn) {
+  if (!root) return fn();
   const prevRoot = currentRoot;
   currentRoot = root;
   try {
-    for (let i = 0; i < cbs.length; i++) {
-      const cleanup = cbs[i]();
-      if (typeof cleanup === "function") {
-        root.cleanups.push(cleanup);
-      }
-    }
+    return fn();
   } finally {
     currentRoot = prevRoot;
-    cbs.length = 0;
   }
 }
 function registerRootCleanup(fn) {
@@ -275,26 +282,20 @@ function registerRootCleanup(fn) {
   }
 }
 function clearRoot(root) {
-  runCleanupList(root.cleanups);
+  runCleanupList(root.cleanups, root);
   if (root.onMountCallbacks) {
     root.onMountCallbacks.length = 0;
   }
 }
 function destroyRoot(root) {
   clearRoot(root);
-  runCleanupList(root.destroyCallbacks);
+  runCleanupList(root.destroyCallbacks, root);
   if (root.errorHandlers) {
     root.errorHandlers.length = 0;
   }
-  if (globalErrorHandlers.has(root)) {
-    globalErrorHandlers.delete(root);
-  }
   if (root.suspenseHandlers) {
     root.suspenseHandlers.length = 0;
   }
-  if (globalSuspenseHandlers.has(root)) {
-    globalSuspenseHandlers.delete(root);
-  }
   disposeRootDevtools(root);
 }
 function createRoot(fn, options2) {
@@ -329,21 +330,23 @@ function registerEffectCleanup(fn) {
     registerRootCleanup(fn);
   }
 }
-function runCleanupList(list) {
+function runCleanupList(list, root) {
   let error;
-  for (let i = list.length - 1; i >= 0; i--) {
-    try {
-      const cleanup = list[i];
-      if (cleanup) cleanup();
-    } catch (err) {
-      if (error === void 0) {
-        error = err;
+  withRootContext(root, () => {
+    for (let i = list.length - 1; i >= 0; i--) {
+      try {
+        const cleanup = list[i];
+        if (cleanup) cleanup();
+      } catch (err) {
+        if (error === void 0) {
+          error = err;
+        }
       }
     }
-  }
+  });
   list.length = 0;
   if (error !== void 0) {
-    if (!handleError(error, { source: "cleanup" })) {
+    if (!handleError(error, { source: "cleanup" }, root)) {
       throw error;
     }
   }
@@ -363,12 +366,6 @@ function registerErrorHandler(fn) {
     currentRoot.errorHandlers = [];
   }
   currentRoot.errorHandlers.push(fn);
-  const existing = globalErrorHandlers.get(currentRoot);
-  if (existing) {
-    existing.push(fn);
-  } else {
-    globalErrorHandlers.set(currentRoot, [fn]);
-  }
 }
 function registerSuspenseHandler(fn) {
   if (!currentRoot) {
@@ -379,12 +376,6 @@ function registerSuspenseHandler(fn) {
     currentRoot.suspenseHandlers = [];
   }
   currentRoot.suspenseHandlers.push(fn);
-  const existing = globalSuspenseHandlers.get(currentRoot);
-  if (existing) {
-    existing.push(fn);
-  } else {
-    globalSuspenseHandlers.set(currentRoot, [fn]);
-  }
 }
 function handleError(err, info, startRoot) {
   let root = startRoot ?? currentRoot;
@@ -406,20 +397,6 @@ function handleError(err, info, startRoot) {
     }
     root = root.parent;
   }
-  const globalForRoot = startRoot ? globalErrorHandlers.get(startRoot) : currentRoot ? globalErrorHandlers.get(currentRoot) : void 0;
-  if (globalForRoot && globalForRoot.length) {
-    for (let i = globalForRoot.length - 1; i >= 0; i--) {
-      const handler = globalForRoot[i];
-      try {
-        const handled = handler(error, info);
-        if (handled !== false) {
-          return true;
-        }
-      } catch (nextErr) {
-        error = nextErr;
-      }
-    }
-  }
   return false;
 }
 function handleSuspend(token, startRoot) {
@@ -442,20 +419,6 @@ function handleSuspend(token, startRoot) {
     }
     root = root.parent;
   }
-  const globalForRoot = startRoot && globalSuspenseHandlers.get(startRoot) ? globalSuspenseHandlers.get(startRoot) : currentRoot ? globalSuspenseHandlers.get(currentRoot) : void 0;
-  if (globalForRoot && globalForRoot.length) {
-    for (let i = globalForRoot.length - 1; i >= 0; i--) {
-      const handler = globalForRoot[i];
-      const handled = handler(token);
-      if (handled !== false) {
-        if (originRoot) {
-          originRoot.suspended = true;
-          setRootSuspendDevtools(originRoot, true);
-        }
-        return true;
-      }
-    }
-  }
   return false;
 }
 
@@ -464,7 +427,7 @@ function createEffect(fn, options2) {
   let cleanups = [];
   const rootForError = getCurrentRoot();
   const doCleanup = () => {
-    runCleanupList(cleanups);
+    runCleanupList(cleanups, rootForError);
     cleanups = [];
   };
   const run = () => {
@@ -489,26 +452,26 @@ function createEffect(fn, options2) {
   };
   const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options2);
   const teardown = () => {
-    runCleanupList(cleanups);
+    runCleanupList(cleanups, rootForError);
     disposeEffect();
   };
   registerRootCleanup(teardown);
   return teardown;
 }
 function createRenderEffect(fn, options2) {
-  let cleanup;
+  let cleanups = [];
   const rootForError = getCurrentRoot();
   const doCleanup = () => {
-    if (cleanup) {
-      cleanup();
-      cleanup = void 0;
-    }
+    runCleanupList(cleanups, rootForError);
+    cleanups = [];
   };
   const run = () => {
     try {
       const maybeCleanup = fn();
       if (typeof maybeCleanup === "function") {
-        cleanup = maybeCleanup;
+        cleanups = [maybeCleanup];
+      } else {
+        cleanups = [];
       }
     } catch (err) {
       if (handleSuspend(err, rootForError)) {
@@ -523,10 +486,7 @@ function createRenderEffect(fn, options2) {
   };
   const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options2);
   const teardown = () => {
-    if (cleanup) {
-      cleanup();
-      cleanup = void 0;
-    }
+    runCleanupList(cleanups, rootForError);
     disposeEffect();
   };
   registerRootCleanup(teardown);
@@ -865,7 +825,9 @@ function runEffect(e) {
     inCleanup = true;
     activeCleanupFlushId = currentFlushId;
     try {
-      e.runCleanup();
+      withRootContext(e.root, () => {
+        e.runCleanup();
+      });
     } finally {
       activeCleanupFlushId = 0;
       inCleanup = false;
@@ -1925,11 +1887,26 @@ function withHydration(root, fn) {
     owner
   });
   try {
-    fn();
+    return fn();
   } finally {
     hydrationStack.pop();
   }
 }
+function claimText(value, fallback) {
+  const ctx = hydrationStack[hydrationStack.length - 1];
+  if (!ctx || !ctx.cursor || ctx.cursor === ctx.boundary || ctx.cursor.nodeType !== Node.TEXT_NODE) {
+    return fallback();
+  }
+  const text = ctx.cursor;
+  ctx.cursor = text.nextSibling;
+  if (text.data !== value) {
+    text.data = value;
+  }
+  return text;
+}
+function isHydratingActive() {
+  return hydrationStack.length > 0;
+}
 
 // src/node-ops.ts
 function toNodeArray(node, ownerDocument = document) {
@@ -2149,7 +2126,9 @@ var PROP_CACHE = Symbol("fict:prop");
 var STYLE_CACHE = Symbol("fict:style");
 var CLASS_STATE_CACHE = Symbol("fict:class-state");
 var CLASS_VALUE_CACHE = Symbol("fict:class-value");
-var EVENT_TUPLE_LISTENER_CACHE = Symbol("fict:event-tuple-listener-cache");
+var EVENT_LISTENER_CACHE = Symbol("fict:event-listener-cache");
+var REF_ASSIGN_CACHE = Symbol("fict:ref-assign-cache");
+var CHILDREN_BINDING_CACHE = Symbol("fict:children-binding-cache");
 var NON_REACTIVE_FN_MARKER = Symbol.for("fict:non-reactive-fn");
 var REACTIVE_FN_MARKER = Symbol.for("fict:reactive-fn");
 var NON_REACTIVE_FN_REGISTRY_KEY = Symbol.for("fict:non-reactive-fn-registry");
@@ -2168,6 +2147,10 @@ function isExplicitReactiveFn(value) {
   if (typeof value !== "function") return false;
   return value[REACTIVE_FN_MARKER] === true;
 }
+var registeredCreateElement;
+function registerCreateElement(fn) {
+  registeredCreateElement = fn;
+}
 function isReactive(value) {
   if (typeof value !== "function") return false;
   if (isNonReactiveFn(value)) return false;
@@ -2440,26 +2423,18 @@ function globalEventHandler(e) {
     if (!node) return false;
     const handler = node[key];
     if (handler && !node.disabled) {
-      const resolveData = (value) => {
-        if (typeof value === "function") {
-          try {
-            const fn = value;
-            return fn.length > 0 ? fn(e) : fn();
-          } catch {
-            return value();
-          }
-        }
-        return value;
-      };
       const rawData = node[dataKey];
       const hasData = rawData !== void 0;
-      const resolvedNodeData = hasData ? resolveData(rawData) : void 0;
+      const resolvedNodeData = hasData ? resolveEventData(rawData, e) : void 0;
       batch2(() => {
         if (typeof handler === "function") {
           callEventHandler(handler, e, node, hasData ? resolvedNodeData : void 0);
         } else if (Array.isArray(handler)) {
-          const tupleData = resolveData(handler[1]);
-          callEventHandler(handler[0], e, node, tupleData);
+          const tupleHandler = resolveEventHandlerValue(
+            handler[0]
+          );
+          const tupleData = resolveEventData(handler[1], e);
+          callEventHandler(tupleHandler, e, node, tupleData);
         }
       });
       if (e.cancelBubble) return false;
@@ -2507,34 +2482,104 @@ function globalEventHandler(e) {
   }
   retarget(oriTarget);
 }
-function bindEvent(el, eventName, handler, options2) {
-  if (handler == null) return () => {
-  };
+function addEventListener(node, name, handler, delegate, options2) {
+  if (delegate) {
+    const key = `$$${name}`;
+    const dataKey = `${key}Data`;
+    const rootRef2 = getCurrentRoot();
+    const delegationDocument = resolveDelegationDocument(node, rootRef2);
+    delegateEvents([name], delegationDocument);
+    if (handler == null) {
+      ;
+      node[key] = void 0;
+      node[dataKey] = void 0;
+      return;
+    }
+    ;
+    node[key] = createEventInvoker(
+      name,
+      handler,
+      node,
+      rootRef2
+    );
+    node[dataKey] = void 0;
+    return;
+  }
+  removeStoredEventListener(node, name, options2);
+  if (handler == null) return;
   const rootRef = getCurrentRoot();
-  const shouldDelegate = options2 == null && DelegatedEvents.has(eventName);
-  if (shouldDelegate) {
-    const key = `$$${eventName}`;
-    delegateEvents([eventName]);
-    const resolveHandler = isStrictlyReactive(handler) ? handler : () => handler;
-    el[key] = function(...args) {
-      try {
-        const fn = resolveHandler();
-        callEventHandler(fn, args[0], el);
-      } catch (err) {
-        if (!handleError(err, { source: "event", eventName }, rootRef)) {
-          throw err;
-        }
-      }
-    };
-    return () => {
-      el[key] = void 0;
-    };
+  const wrapped = createEventInvoker(name, handler, node, rootRef);
+  node.addEventListener(name, wrapped, options2);
+  getStoredEventListenerStore(node).set(getEventListenerStoreKey(name, options2), {
+    listener: wrapped,
+    options: options2
+  });
+}
+function resolveDelegationDocument(node, rootRef) {
+  const nodeDocument = node.ownerDocument ?? void 0;
+  if (rootRef?.ownerDocument && nodeDocument?.defaultView == null) {
+    return rootRef.ownerDocument;
   }
-  const getHandler = isStrictlyReactive(handler) ? handler : () => handler;
-  const wrapped = (event) => {
+  return nodeDocument ?? rootRef?.ownerDocument ?? document;
+}
+function getStoredEventListenerStore(node) {
+  const host = node;
+  if (!host[EVENT_LISTENER_CACHE]) {
+    host[EVENT_LISTENER_CACHE] = /* @__PURE__ */ new Map();
+  }
+  return host[EVENT_LISTENER_CACHE];
+}
+function getEventListenerStoreKey(name, options2) {
+  const capture = typeof options2 === "boolean" ? options2 : options2?.capture === true;
+  const passive = typeof options2 === "object" && options2?.passive === true;
+  const once = typeof options2 === "object" && options2?.once === true;
+  return `${name}:${capture ? 1 : 0}:${passive ? 1 : 0}:${once ? 1 : 0}`;
+}
+function removeStoredEventListener(node, name, options2) {
+  const host = node;
+  const store = host[EVENT_LISTENER_CACHE];
+  if (!store) return;
+  const entry = store.get(getEventListenerStoreKey(name, options2));
+  if (!entry) return;
+  node.removeEventListener(name, entry.listener, entry.options);
+  store.delete(getEventListenerStoreKey(name, options2));
+  if (store.size === 0) {
+    delete host[EVENT_LISTENER_CACHE];
+  }
+}
+function resolveEventData(value, event) {
+  if (typeof value !== "function") return value;
+  if (isReactive(value)) {
+    return value();
+  }
+  try {
+    const fn = value;
+    return fn.length > 0 ? fn(event) : fn();
+  } catch {
+    return value();
+  }
+}
+function resolveEventHandlerValue(value) {
+  if (isStrictlyReactive(value)) {
+    return value();
+  }
+  return value;
+}
+function createEventInvoker(eventName, handler, node, rootRef) {
+  return (event) => {
     try {
-      const resolved = getHandler();
-      callEventHandler(resolved, event, el);
+      if (Array.isArray(handler)) {
+        const resolvedHandler2 = resolveEventHandlerValue(
+          handler[0]
+        );
+        const data = resolveEventData(handler[1], event);
+        callEventHandler(resolvedHandler2, event, node, data);
+        return;
+      }
+      const resolvedHandler = resolveEventHandlerValue(
+        handler
+      );
+      callEventHandler(resolvedHandler, event, node);
     } catch (err) {
       if (handleError(err, { source: "event", eventName }, rootRef)) {
         return;
@@ -2542,11 +2587,70 @@ function bindEvent(el, eventName, handler, options2) {
       throw err;
     }
   };
-  el.addEventListener(eventName, wrapped, options2);
-  const cleanup = () => el.removeEventListener(eventName, wrapped, options2);
+}
+function bindEvent(el, eventName, handler, options2) {
+  if (handler == null) return () => {
+  };
+  const shouldDelegate = options2 == null && DelegatedEvents.has(eventName);
+  if (shouldDelegate) {
+    addEventListener(el, eventName, handler, true);
+    return () => {
+      addEventListener(el, eventName, null, true);
+    };
+  }
+  addEventListener(
+    el,
+    eventName,
+    handler,
+    false,
+    options2
+  );
+  const cleanup = () => removeStoredEventListener(el, eventName, options2);
   registerRootCleanup(cleanup);
   return cleanup;
 }
+function bindRef(el, ref, registerCleanup = true) {
+  if (ref == null) return () => {
+  };
+  const getRef = isReactive(ref) ? ref : () => ref;
+  let currentRef;
+  const applyRefValue = (refValue, value) => {
+    if (refValue == null) return;
+    if (typeof refValue === "function") {
+      ;
+      refValue(value);
+    } else if (typeof refValue === "object" && "current" in refValue) {
+      ;
+      refValue.current = value;
+    }
+  };
+  const clearCurrentRef = () => {
+    if (currentRef == null) return;
+    applyRefValue(currentRef, null);
+    currentRef = void 0;
+  };
+  const syncRef = (nextRef) => {
+    if (nextRef === currentRef) return;
+    clearCurrentRef();
+    currentRef = nextRef;
+    applyRefValue(currentRef, el);
+  };
+  let disposeTracking;
+  if (isReactive(ref)) {
+    disposeTracking = createRenderEffect(() => {
+      syncRef(getRef());
+    });
+  } else {
+    syncRef(getRef());
+  }
+  if (registerCleanup) {
+    registerRootCleanup(clearCurrentRef);
+  }
+  return () => {
+    disposeTracking?.();
+    clearCurrentRef();
+  };
+}
 function createPortal(container, render2, createElementFn) {
   const parentRoot = getCurrentRoot();
   const markerOwnerDocument = container.ownerDocument ?? document;
@@ -2882,6 +2986,7 @@ function render(view, container) {
 function createElement(node) {
   return createElementWithContext(node, null, resolveOwnerDocument());
 }
+registerCreateElement(createElement);
 function resolveNamespace(tagName, namespace) {
   if (tagName === "svg") return "svg";
   if (tagName === "math") return "mathml";
@@ -2893,22 +2998,28 @@ function resolveNamespace(tagName, namespace) {
 function resolveOwnerDocument(ownerDocument) {
   return ownerDocument ?? getCurrentRoot()?.ownerDocument ?? document;
 }
+function createTextNodeWithHydration(value, ownerDocument) {
+  if (!isHydratingActive()) {
+    return ownerDocument.createTextNode(value);
+  }
+  return claimText(value, () => ownerDocument.createTextNode(value));
+}
 function createElementWithContext(node, namespace, ownerDocument) {
   if (node instanceof Node) {
     return node;
   }
   if (node === null || node === void 0 || node === false) {
-    return ownerDocument.createTextNode("");
+    return createTextNodeWithHydration("", ownerDocument);
   }
   if (isReactive(node)) {
     const resolved = node();
     if (resolved === node) {
-      return ownerDocument.createTextNode("");
+      return createTextNodeWithHydration("", ownerDocument);
     }
     return createElementWithContext(resolved, namespace, ownerDocument);
   }
   if (typeof node === "function") {
-    return ownerDocument.createTextNode("");
+    return createTextNodeWithHydration("", ownerDocument);
   }
   if (typeof node === "object" && node !== null && !(node instanceof Node)) {
     if ("marker" in node) {
@@ -2935,10 +3046,10 @@ function createElementWithContext(node, namespace, ownerDocument) {
     return frag;
   }
   if (typeof node === "string" || typeof node === "number") {
-    return ownerDocument.createTextNode(String(node));
+    return createTextNodeWithHydration(String(node), ownerDocument);
   }
   if (typeof node === "boolean") {
-    return ownerDocument.createTextNode("");
+    return createTextNodeWithHydration("", ownerDocument);
   }
   const vnode = node;
   if (typeof vnode.type === "function") {
@@ -3083,7 +3194,7 @@ function appendChildNode(parent, child, namespace, ownerDocument) {
   }
   let domNode;
   if (typeof child !== "object" || child === null) {
-    domNode = parentOwnerDocument.createTextNode(String(child ?? ""));
+    domNode = createTextNodeWithHydration(String(child ?? ""), parentOwnerDocument);
   } else {
     domNode = createElementWithContext(child, namespace, parentOwnerDocument);
   }
@@ -3119,33 +3230,12 @@ function appendChildren(parent, children, namespace, ownerDocument) {
   appendChildNode(parent, children, namespace, ownerDocument);
 }
 function applyRef(el, value) {
-  if (typeof value === "function") {
-    const refFn = value;
-    refFn(el);
-    const root = getCurrentRoot();
-    if (root) {
-      registerRootCleanup(() => {
-        refFn(null);
-      });
-    } else if (isDev7) {
-      console.warn(
-        "[fict] Ref applied outside of a root context. The ref cleanup (setting to null) will not run automatically. Consider using createRoot() or ensure the element is created within a component."
-      );
-    }
-  } else if (value && typeof value === "object" && "current" in value) {
-    const refObj = value;
-    refObj.current = el;
-    const root = getCurrentRoot();
-    if (root) {
-      registerRootCleanup(() => {
-        refObj.current = null;
-      });
-    } else if (isDev7) {
-      console.warn(
-        "[fict] Ref applied outside of a root context. The ref cleanup (setting to null) will not run automatically. Consider using createRoot() or ensure the element is created within a component."
-      );
-    }
+  if (!getCurrentRoot() && isDev7) {
+    console.warn(
+      "[fict] Ref applied outside of a root context. The ref cleanup (setting to null) will not run automatically. Consider using createRoot() or ensure the element is created within a component."
+    );
   }
+  bindRef(el, value);
 }
 function applyProps(el, props, isSVG = false) {
   props = unwrapProps(props);
@@ -3400,6 +3490,12 @@ function ErrorBoundary(props) {
     renderValue(toView(null));
   };
   renderValue(props.children ?? null);
+  registerRootCleanup(() => {
+    if (cleanup) {
+      cleanup();
+      cleanup = void 0;
+    }
+  });
   registerErrorHandler((err) => {
     renderValue(toView(err));
     props.onError?.(err);
@@ -3577,6 +3673,12 @@ function Suspense(props) {
     return false;
   });
   renderView(props.children ?? null);
+  registerRootCleanup(() => {
+    if (cleanup) {
+      cleanup();
+      cleanup = void 0;
+    }
+  });
   if (props.resetKeys !== void 0) {
     const isGetter = typeof props.resetKeys === "function" && props.resetKeys.length === 0;
     const getter = isGetter ? props.resetKeys : void 0;
@@ -3659,7 +3761,9 @@ function createContext(defaultValue) {
     };
     createRenderEffect(() => {
       contextMap.set(id, props.value);
-      renderChildren(props.children);
+      untrack(() => {
+        renderChildren(props.children);
+      });
     });
     return fragment;
   };