@fictjs/runtime 0.9.0 → 0.10.0

package/dist/index.dev.js

@@ -181,8 +181,35 @@ 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) {
+  if (!isDev2) return;
+  const hook = getDevtoolsHook();
+  if (!hook?.registerRoot) return;
+  const id = ++nextRootDevtoolsId;
+  rootDevtoolsIds.set(root, id);
+  hook.registerRoot(id);
+}
+function disposeRootDevtools(root) {
+  if (!isDev2) return;
+  const id = rootDevtoolsIds.get(root);
+  if (id === void 0) return;
+  const hook = getDevtoolsHook();
+  hook?.disposeRoot?.(id);
+  rootDevtoolsIds.delete(root);
+}
+function setRootSuspendDevtools(root, suspended) {
+  if (!isDev2) return;
+  const id = rootDevtoolsIds.get(root);
+  if (id === void 0) return;
+  const hook = getDevtoolsHook();
+  hook?.rootSuspend?.(id, suspended);
+}
 function createRootContext(parent) {
-  return { parent, cleanups: [], destroyCallbacks: [], suspended: false };
+  const root = { parent, cleanups: [], destroyCallbacks: [], suspended: false };
+  registerRootDevtools(root);
+  return root;
 }
 function pushRoot(root) {
   if (!enterRootGuard(root)) {
@@ -262,6 +289,7 @@ function destroyRoot(root) {
   if (globalSuspenseHandlers.has(root)) {
     globalSuspenseHandlers.delete(root);
   }
+  disposeRootDevtools(root);
 }
 function createRoot(fn, options2) {
   const parent = options2?.inherit ? currentRoot : void 0;
@@ -398,7 +426,10 @@ function handleSuspend(token, startRoot) {
         const handler = handlers[i];
         const handled = handler(token);
         if (handled !== false) {
-          if (originRoot) originRoot.suspended = true;
+          if (originRoot) {
+            originRoot.suspended = true;
+            setRootSuspendDevtools(originRoot, true);
+          }
           return true;
         }
       }
@@ -411,7 +442,10 @@ function handleSuspend(token, startRoot) {
       const handler = globalForRoot[i];
       const handled = handler(token);
       if (handled !== false) {
-        if (originRoot) originRoot.suspended = true;
+        if (originRoot) {
+          originRoot.suspended = true;
+          setRootSuspendDevtools(originRoot, true);
+        }
         return true;
       }
     }
@@ -420,7 +454,7 @@ function handleSuspend(token, startRoot) {
 }
 
 // src/effect.ts
-function createEffect(fn) {
+function createEffect(fn, options2) {
   let cleanups = [];
   const rootForError = getCurrentRoot();
   const doCleanup = () => {
@@ -447,7 +481,7 @@ function createEffect(fn) {
     });
     cleanups = bucket;
   };
-  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options2);
   const teardown = () => {
     runCleanupList(cleanups);
     disposeEffect();
@@ -455,7 +489,7 @@ function createEffect(fn) {
   registerRootCleanup(teardown);
   return teardown;
 }
-function createRenderEffect(fn) {
+function createRenderEffect(fn, options2) {
   let cleanup;
   const rootForError = getCurrentRoot();
   const doCleanup = () => {
@@ -481,7 +515,7 @@ function createRenderEffect(fn) {
       throw err;
     }
   };
-  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options2);
   const teardown = () => {
     if (cleanup) {
       cleanup();
@@ -759,6 +793,15 @@ function purgeDeps(sub) {
   while (dep !== void 0) dep = unlink(dep, sub);
 }
 function disposeNode(node) {
+  if (isDev4) {
+    if ("fn" in node && typeof node.fn === "function") {
+      disposeEffectDevtools(node);
+    } else if ("getter" in node && typeof node.getter === "function") {
+      disposeComputedDevtools(node);
+    } else if ("currentValue" in node) {
+      disposeSignalDevtools(node);
+    }
+  }
   node.depsTail = void 0;
   node.flags = 0;
   purgeDeps(node);
@@ -812,6 +855,7 @@ function runEffect(e) {
   const flags = e.flags;
   const runCleanup = () => {
     if (!e.runCleanup) return;
+    if (isDev4) effectCleanupDevtools(e);
     inCleanup = true;
     activeCleanupFlushId = currentFlushId;
     try {
@@ -824,7 +868,6 @@ function runEffect(e) {
   if (flags & Dirty) {
     runCleanup();
     ++cycle;
-    if (isDev4) effectRunDevtools(e);
     e.depsTail = void 0;
     e.flags = WatchingRunning;
     const prevSub = activeSub;
@@ -862,7 +905,6 @@ function runEffect(e) {
     if (isDirty) {
       runCleanup();
       ++cycle;
-      if (isDev4) effectRunDevtools(e);
       e.depsTail = void 0;
       e.flags = WatchingRunning;
       const prevSub = activeSub;
@@ -896,19 +938,30 @@ function scheduleFlush() {
 }
 function flush() {
   beginFlushGuard();
+  let flushReported = false;
+  const finishFlush = () => {
+    if (flushReported && isDev4) {
+      flushEndDevtools();
+    }
+    endFlushGuard();
+  };
   if (batchDepth > 0) {
     scheduleFlush();
-    endFlushGuard();
+    finishFlush();
     return;
   }
   const hasWork = highPriorityQueue.length > 0 || lowPriorityQueue.length > 0;
   if (!hasWork) {
     flushScheduled = false;
-    endFlushGuard();
+    finishFlush();
     return;
   }
   currentFlushId++;
   flushScheduled = false;
+  if (isDev4) {
+    flushStartDevtools();
+    flushReported = true;
+  }
   let highIndex = 0;
   while (highIndex < highPriorityQueue.length) {
     const e = highPriorityQueue[highIndex];
@@ -928,7 +981,7 @@ function flush() {
       highPriorityQueue.length = 0;
       lowPriorityQueue.length = 0;
       flushScheduled = false;
-      endFlushGuard();
+      finishFlush();
       return;
     }
     highIndex++;
@@ -943,7 +996,7 @@ function flush() {
         lowPriorityQueue.length -= lowIndex;
       }
       scheduleFlush();
-      endFlushGuard();
+      finishFlush();
       return;
     }
     const e = lowPriorityQueue[lowIndex];
@@ -963,14 +1016,14 @@ function flush() {
       highPriorityQueue.length = 0;
       lowPriorityQueue.length = 0;
       flushScheduled = false;
-      endFlushGuard();
+      finishFlush();
       return;
     }
     lowIndex++;
     runEffect(e);
   }
   lowPriorityQueue.length = 0;
-  endFlushGuard();
+  finishFlush();
 }
 function signal(initialValue, options2) {
   const s = {
@@ -1043,6 +1096,7 @@ function computed(getter, options2) {
   if (options2?.equals !== void 0) c.equals = options2.equals;
   if (options2?.name !== void 0) c.name = options2.name;
   if (options2?.devToolsSource !== void 0) c.devToolsSource = options2.devToolsSource;
+  if (options2?.internal === true) c.devToolsInternal = true;
   if (isDev4) registerComputedDevtools(c);
   const bound = computedOper.bind(
     c
@@ -1093,7 +1147,7 @@ function computedOper() {
   if (activeSub !== void 0) link(this, activeSub, cycle);
   return this.value;
 }
-function effectWithCleanup(fn, cleanupRunner, root) {
+function effectWithCleanup(fn, cleanupRunner, root, options2) {
   const e = {
     fn,
     subs: void 0,
@@ -1102,6 +1156,8 @@ function effectWithCleanup(fn, cleanupRunner, root) {
     depsTail: void 0,
     flags: WatchingRunning,
     runCleanup: cleanupRunner,
+    ...options2?.name !== void 0 ? { name: options2.name } : {},
+    ...options2?.devToolsSource !== void 0 ? { devToolsSource: options2.devToolsSource } : {},
     __id: void 0
   };
   const resolvedRoot = root ?? getCurrentRoot();
@@ -1109,14 +1165,14 @@ function effectWithCleanup(fn, cleanupRunner, root) {
     e.root = resolvedRoot;
   }
   if (isDev4) registerEffectDevtools(e);
+  e.fn = wrapEffectFnWithDevtoolsTiming(e, fn);
   const prevSub = activeSub;
   if (prevSub !== void 0) link(e, prevSub, 0);
   activeSub = e;
   let didThrow = false;
   let thrown;
   try {
-    if (isDev4) effectRunDevtools(e);
-    fn();
+    e.fn();
   } catch (err) {
     didThrow = true;
     thrown = err;
@@ -1137,7 +1193,11 @@ function effectOper() {
   disposeNode(this);
 }
 function batch(fn) {
+  const enteringOuterBatch = batchDepth === 0;
   ++batchDepth;
+  if (enteringOuterBatch && isDev4) {
+    batchStartDevtools();
+  }
   let result;
   let error;
   try {
@@ -1147,6 +1207,9 @@ function batch(fn) {
   } finally {
     --batchDepth;
     if (batchDepth === 0) {
+      if (isDev4) {
+        batchEndDevtools();
+      }
       try {
         flush();
       } catch (flushErr) {
@@ -1195,18 +1258,49 @@ function setTransitionContext(value) {
 var registerSignalDevtools = () => void 0;
 var updateSignalDevtools = () => {
 };
+var disposeSignalDevtools = () => {
+};
 var registerComputedDevtools = () => void 0;
 var updateComputedDevtools = () => {
 };
+var disposeComputedDevtools = () => {
+};
 var registerEffectDevtools = () => void 0;
 var effectRunDevtools = () => {
 };
+var wrapEffectFnWithDevtoolsTiming = (_node, fn) => fn;
+var effectCleanupDevtools = () => {
+};
+var disposeEffectDevtools = () => {
+};
 var trackDependencyDevtools = () => {
 };
 var untrackDependencyDevtools = () => {
 };
+var batchStartDevtools = () => {
+};
+var batchEndDevtools = () => {
+};
+var flushStartDevtools = () => {
+};
+var flushEndDevtools = () => {
+};
+var clearDevtoolsSignalSetters = () => {
+};
 if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
   let nextDevtoolsId = 0;
+  const getSignalSetterMap = () => {
+    if (typeof globalThis === "undefined") return void 0;
+    const global = globalThis;
+    if (!global.__FICT_DEVTOOLS_SIGNALS__) {
+      global.__FICT_DEVTOOLS_SIGNALS__ = /* @__PURE__ */ new Map();
+    }
+    return global.__FICT_DEVTOOLS_SIGNALS__;
+  };
+  const getExistingSignalSetterMap = () => {
+    if (typeof globalThis === "undefined") return void 0;
+    return globalThis.__FICT_DEVTOOLS_SIGNALS__;
+  };
   registerSignalDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
@@ -1218,6 +1312,9 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     if (ownerId !== void 0) options2.ownerId = ownerId;
     hook.registerSignal(id, node.currentValue, options2);
     node.__id = id;
+    getSignalSetterMap()?.set(id, (value) => {
+      signalOper.call(node, value);
+    });
     return id;
   };
   updateSignalDevtools = (node, value) => {
@@ -1226,9 +1323,19 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     const id = node.__id;
     if (id) hook.updateSignal(id, value);
   };
+  disposeSignalDevtools = (node) => {
+    const identifiable = node;
+    const id = identifiable.__id;
+    if (!id) return;
+    const hook = getDevtoolsHook();
+    hook?.disposeSignal?.(id);
+    getExistingSignalSetterMap()?.delete(id);
+    delete identifiable.__id;
+  };
   registerComputedDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
+    if (node.devToolsInternal) return void 0;
     const id = ++nextDevtoolsId;
     const options2 = {};
     if (node.name !== void 0) options2.name = node.name;
@@ -1246,20 +1353,55 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     const id = node.__id;
     if (id) hook.updateComputed(id, value);
   };
+  disposeComputedDevtools = (node) => {
+    const identifiable = node;
+    const id = identifiable.__id;
+    if (!id) return;
+    const hook = getDevtoolsHook();
+    hook?.disposeComputed?.(id);
+    delete identifiable.__id;
+  };
   registerEffectDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
     const id = ++nextDevtoolsId;
+    const options2 = {};
     const ownerId = __fictGetCurrentComponentId();
-    hook.registerEffect(id, ownerId !== void 0 ? { ownerId } : void 0);
+    if (ownerId !== void 0) options2.ownerId = ownerId;
+    if (node.devToolsSource !== void 0) options2.source = node.devToolsSource;
+    hook.registerEffect(id, Object.keys(options2).length > 0 ? options2 : void 0);
     node.__id = id;
     return id;
   };
-  effectRunDevtools = (node) => {
+  effectRunDevtools = (node, duration) => {
     const hook = getDevtoolsHook();
     if (!hook) return;
     const id = node.__id;
-    if (id) hook.effectRun(id);
+    if (id) hook.effectRun(id, duration);
+  };
+  wrapEffectFnWithDevtoolsTiming = (node, fn) => {
+    return () => {
+      const startedAt = performance.now();
+      try {
+        fn();
+      } finally {
+        effectRunDevtools(node, performance.now() - startedAt);
+      }
+    };
+  };
+  effectCleanupDevtools = (node) => {
+    const hook = getDevtoolsHook();
+    if (!hook) return;
+    const id = node.__id;
+    if (id) hook.effectCleanup?.(id);
+  };
+  disposeEffectDevtools = (node) => {
+    const identifiable = node;
+    const id = identifiable.__id;
+    if (!id) return;
+    const hook = getDevtoolsHook();
+    hook?.disposeEffect?.(id);
+    delete identifiable.__id;
   };
   trackDependencyDevtools = (dep, sub) => {
     const hook = getDevtoolsHook();
@@ -1275,6 +1417,25 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     const subId = sub.__id;
     if (depId && subId) hook.untrackDependency(subId, depId);
   };
+  batchStartDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.batchStart?.();
+  };
+  batchEndDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.batchEnd?.();
+  };
+  flushStartDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.flushStart?.();
+  };
+  flushEndDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.flushEnd?.();
+  };
+  clearDevtoolsSignalSetters = () => {
+    getExistingSignalSetterMap()?.clear();
+  };
 }
 
 // src/memo.ts
@@ -1331,7 +1492,11 @@ function useTransition() {
       throw thrown;
     }
     if (result && typeof result.then === "function") {
-      Promise.resolve(result).finally(() => {
+      void Promise.resolve(result).catch((error) => {
+        if (typeof console !== "undefined" && typeof console.error === "function") {
+          console.error("[fict/transition] Async transition failed.", error);
+        }
+      }).finally(() => {
         endPending();
       });
       return;
@@ -2651,6 +2816,32 @@ var SVG_NS = "http://www.w3.org/2000/svg";
 var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
 var isDev7 = true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 var nextComponentId = 1;
+function collectComponentMountElements(node) {
+  if (node instanceof DocumentFragment) {
+    return Array.from(node.childNodes).filter(
+      (child) => child instanceof HTMLElement
+    );
+  }
+  if (node instanceof HTMLElement) {
+    if (node.hasAttribute("data-fict-host")) {
+      const children = Array.from(node.children).filter(
+        (child) => child instanceof HTMLElement
+      );
+      if (children.length > 0) return children;
+    }
+    return [node];
+  }
+  return [];
+}
+function annotateComponentElements(elements, componentId, componentName) {
+  for (const element of elements) {
+    element.setAttribute("data-fict-component", componentName);
+    element.setAttribute("data-fict-component-id", String(componentId));
+    const annotated = element;
+    annotated.__fict_component_id__ = componentId;
+    annotated.__fict_component_name__ = componentName;
+  }
+}
 function render(view, container) {
   const root = createRootContext();
   const prev = pushRoot(root);
@@ -2762,10 +2953,11 @@ function createElementWithContext(node, namespace) {
     });
     const props = createPropsProxy(baseProps);
     const hook = isDev7 ? getDevtoolsHook() : void 0;
+    const componentName = vnode.type.name || "Anonymous";
     const parentId = hook ? __fictGetCurrentComponentId() : void 0;
     const componentId = hook ? nextComponentId++ : void 0;
     if (hook?.registerComponent && componentId !== void 0) {
-      hook.registerComponent(componentId, vnode.type.name || "Anonymous", parentId);
+      hook.registerComponent(componentId, componentName, parentId);
     }
     const ctx = __fictPushContext();
     if (componentId !== void 0) {
@@ -2776,9 +2968,13 @@ function createElementWithContext(node, namespace) {
     }
     try {
       const rendered = vnode.type(props);
+      let mountElements;
+      if (hook && componentId !== void 0) {
+        hook.componentRender?.(componentId);
+      }
       if (hook && componentId !== void 0) {
         onMount(() => {
-          hook.componentMount?.(componentId);
+          hook.componentMount?.(componentId, mountElements);
         });
         onCleanup(() => hook.componentUnmount?.(componentId));
       }
@@ -2801,9 +2997,18 @@ function createElementWithContext(node, namespace) {
         } else {
           host.appendChild(content);
         }
+        if (hook && componentId !== void 0) {
+          mountElements = collectComponentMountElements(host);
+          annotateComponentElements(mountElements, componentId, componentName);
+        }
         return host;
       }
-      return createElementWithContext(rendered, namespace);
+      const componentRoot = createElementWithContext(rendered, namespace);
+      if (hook && componentId !== void 0) {
+        mountElements = collectComponentMountElements(componentRoot);
+        annotateComponentElements(mountElements, componentId, componentName);
+      }
+      return componentRoot;
     } catch (err) {
       if (handleSuspend(err)) {
         return document.createComment("fict:suspend");