solid-js 2.0.0-experimental.14 → 2.0.0-experimental.15

package/dist/dev.js

@@ -1,5 +1,5 @@
-import { getContext, createMemo as createMemo$1, flatten, createRoot, setContext, getOwner, untrack, getNextChildId, createSignal as createSignal$1, createLoadBoundary, flush, runWithOwner, mapArray, repeat, createErrorBoundary } from '@solidjs/signals';
-export { $PROXY, $TRACK, NotReadyError, action, createEffect, createOptimistic, createOptimisticStore, createProjection, createReaction, createRenderEffect, createRoot, createStore, createTrackedEffect, deep, flatten, flush, getObserver, getOwner, isEqual, isPending, isRefreshing, isWrappable, mapArray, merge, omit, onCleanup, onSettled, pending, reconcile, refresh, repeat, resolve, runWithOwner, snapshot, untrack } from '@solidjs/signals';
+import { getContext, createMemo as createMemo$1, flatten, getOwner, createRoot, setContext, untrack, setStrictRead, createLoadBoundary, onCleanup, isDisposed, runWithOwner, createOptimistic as createOptimistic$1, createOptimisticStore as createOptimisticStore$1, createProjection as createProjection$1, createSignal as createSignal$1, createStore as createStore$1, setSnapshotCapture, releaseSnapshotScope, getNextChildId, createErrorBoundary as createErrorBoundary$1, markSnapshotScope, flush, clearSnapshots, peekNextChildId, mapArray, repeat } from '@solidjs/signals';
+export { $PROXY, $TRACK, NotReadyError, action, createEffect, createReaction, createRenderEffect, createRoot, createTrackedEffect, deep, flatten, flush, getObserver, getOwner, isEqual, isPending, isRefreshing, isWrappable, mapArray, merge, omit, onCleanup, onSettled, pending, reconcile, refresh, repeat, resolve, runWithOwner, snapshot, untrack } from '@solidjs/signals';
 
 const $DEVCOMP = Symbol("COMPONENT_DEV" );
 function createContext(defaultValue, options) {
@@ -38,8 +38,15 @@ function devComponent(Comp, props) {
       Object.assign(Comp, {
         [$DEVCOMP]: true
       });
-      return Comp(props);
+      setStrictRead(`<${Comp.name || "Anonymous"}>`);
+      try {
+        return Comp(props);
+      } finally {
+        setStrictRead(false);
+      }
     });
+  }, {
+    transparent: true
   });
 }
 function registerGraph(value) {
@@ -59,8 +66,44 @@ const sharedConfig = {
     return getNextChildId(o);
   }
 };
+let _hydrationEndCallbacks = null;
+let _pendingBoundaries = 0;
+let _hydrationDone = false;
+let _snapshotRootOwner = null;
+function markTopLevelSnapshotScope() {
+  if (_snapshotRootOwner) return;
+  let owner = getOwner();
+  if (!owner) return;
+  while (owner._parent) owner = owner._parent;
+  markSnapshotScope(owner);
+  _snapshotRootOwner = owner;
+}
+function drainHydrationCallbacks() {
+  if (_hydrationDone) return;
+  _hydrationDone = true;
+  _doneValue = true;
+  clearSnapshots();
+  setSnapshotCapture(false);
+  flush();
+  const cbs = _hydrationEndCallbacks;
+  _hydrationEndCallbacks = null;
+  if (cbs) for (const cb of cbs) cb();
+  setTimeout(() => {
+    if (globalThis._$HY) globalThis._$HY.done = true;
+  });
+}
+function checkHydrationComplete() {
+  if (_pendingBoundaries === 0) drainHydrationCallbacks();
+}
+let _hydratingValue = false;
+let _doneValue = false;
 let _createMemo;
 let _createSignal;
+let _createErrorBoundary;
+let _createOptimistic;
+let _createProjection;
+let _createStore;
+let _createOptimisticStore;
 class MockPromise {
   static all() {
     return new MockPromise();
@@ -96,14 +139,110 @@ function subFetch(fn, prev) {
   try {
     window.fetch = () => new MockPromise();
     Promise = MockPromise;
-    return fn(prev);
+    const result = fn(prev);
+    if (result && typeof result[Symbol.asyncIterator] === "function") {
+      result[Symbol.asyncIterator]().next();
+    }
+    return result;
   } finally {
     window.fetch = ogFetch;
     Promise = ogPromise;
   }
 }
+function consumeFirstSync(ai) {
+  const iter = ai[Symbol.asyncIterator]();
+  const r = iter.next();
+  const value = !(r instanceof Promise) && !r.done ? r.value : undefined;
+  return [value, iter];
+}
+function applyPatches(target, patches) {
+  for (const patch of patches) {
+    const path = patch[0];
+    let current = target;
+    for (let i = 0; i < path.length - 1; i++) current = current[path[i]];
+    const key = path[path.length - 1];
+    if (patch.length === 1) {
+      Array.isArray(current) ? current.splice(key, 1) : delete current[key];
+    } else if (patch.length === 3) {
+      current.splice(key, 0, patch[1]);
+    } else {
+      current[key] = patch[1];
+    }
+  }
+}
+function scheduleIteratorConsumption(iter, apply) {
+  const consume = () => {
+    while (true) {
+      const n = iter.next();
+      if (n instanceof Promise) {
+        n.then(r => {
+          if (r.done) return;
+          apply(r.value);
+          consume();
+        });
+        return;
+      }
+      if (n.done) break;
+      apply(n.value);
+    }
+  };
+  consume();
+}
+function isAsyncIterable(v) {
+  return v != null && typeof v[Symbol.asyncIterator] === "function";
+}
+function hydrateSignalFromAsyncIterable(coreFn, compute, value, options) {
+  const parent = getOwner();
+  const expectedId = peekNextChildId(parent);
+  if (!sharedConfig.has(expectedId)) return null;
+  const initP = sharedConfig.load(expectedId);
+  if (!isAsyncIterable(initP)) return null;
+  const [firstValue, iter] = consumeFirstSync(initP);
+  const [get, set] = createSignal$1(firstValue);
+  const result = coreFn(() => get(), firstValue, options);
+  scheduleIteratorConsumption(iter, v => {
+    set(() => v);
+    flush();
+  });
+  return result;
+}
+function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
+  const parent = getOwner();
+  const expectedId = peekNextChildId(parent);
+  if (!sharedConfig.has(expectedId)) return null;
+  const initP = sharedConfig.load(expectedId);
+  if (!isAsyncIterable(initP)) return null;
+  const [firstState, iter] = consumeFirstSync(initP);
+  const [store, setStore] = coreFn(() => {}, firstState ?? initialValue, options);
+  scheduleIteratorConsumption(iter, patches => {
+    setStore(d => {
+      applyPatches(d, patches);
+    });
+  });
+  return [store, setStore];
+}
 function hydratedCreateMemo(compute, value, options) {
   if (!sharedConfig.hydrating) return createMemo$1(compute, value, options);
+  markTopLevelSnapshotScope();
+  const ssrSource = options?.ssrSource;
+  if (ssrSource === "client") {
+    const [hydrated, setHydrated] = createSignal$1(false);
+    const memo = createMemo$1(prev => {
+      if (!hydrated()) return prev ?? value;
+      return compute(prev);
+    }, value, options);
+    setHydrated(true);
+    return memo;
+  }
+  if (ssrSource === "initial") {
+    return createMemo$1(prev => {
+      if (!sharedConfig.hydrating) return compute(prev);
+      subFetch(compute, prev);
+      return prev ?? value;
+    }, value, options);
+  }
+  const aiResult = hydrateSignalFromAsyncIterable(createMemo$1, compute, value, options);
+  if (aiResult !== null) return aiResult;
   return createMemo$1(prev => {
     const o = getOwner();
     if (!sharedConfig.hydrating) return compute(prev);
@@ -115,6 +254,26 @@ function hydratedCreateMemo(compute, value, options) {
 }
 function hydratedCreateSignal(fn, second, third) {
   if (typeof fn !== "function" || !sharedConfig.hydrating) return createSignal$1(fn, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client") {
+    const [hydrated, setHydrated] = createSignal$1(false);
+    const sig = createSignal$1(prev => {
+      if (!hydrated()) return prev ?? second;
+      return fn(prev);
+    }, second, third);
+    setHydrated(true);
+    return sig;
+  }
+  if (ssrSource === "initial") {
+    return createSignal$1(prev => {
+      if (!sharedConfig.hydrating) return fn(prev);
+      subFetch(fn, prev);
+      return prev ?? second;
+    }, second, third);
+  }
+  const aiResult = hydrateSignalFromAsyncIterable(createSignal$1, fn, second, third);
+  if (aiResult !== null) return aiResult;
   return createSignal$1(prev => {
     if (!sharedConfig.hydrating) return fn(prev);
     const o = getOwner();
@@ -124,17 +283,215 @@ function hydratedCreateSignal(fn, second, third) {
     return init != null ? (subFetch(fn, prev), init) : fn(prev);
   }, second, third);
 }
+function hydratedCreateErrorBoundary(fn, fallback) {
+  if (!sharedConfig.hydrating) return createErrorBoundary$1(fn, fallback);
+  markTopLevelSnapshotScope();
+  const parent = getOwner();
+  const expectedId = peekNextChildId(parent);
+  if (sharedConfig.has(expectedId)) {
+    const err = sharedConfig.load(expectedId);
+    if (err !== undefined) {
+      let hydrated = true;
+      return createErrorBoundary$1(() => {
+        if (hydrated) {
+          hydrated = false;
+          throw err;
+        }
+        return fn();
+      }, fallback);
+    }
+  }
+  return createErrorBoundary$1(fn, fallback);
+}
+function hydratedCreateOptimistic(fn, second, third) {
+  if (typeof fn !== "function" || !sharedConfig.hydrating) return createOptimistic$1(fn, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client") {
+    const [hydrated, setHydrated] = createSignal$1(false);
+    const sig = createOptimistic$1(prev => {
+      if (!hydrated()) return prev ?? second;
+      return fn(prev);
+    }, second, third);
+    setHydrated(true);
+    return sig;
+  }
+  if (ssrSource === "initial") {
+    return createOptimistic$1(prev => {
+      if (!sharedConfig.hydrating) return fn(prev);
+      subFetch(fn, prev);
+      return prev ?? second;
+    }, second, third);
+  }
+  const aiResult = hydrateSignalFromAsyncIterable(createOptimistic$1, fn, second, third);
+  if (aiResult !== null) return aiResult;
+  return createOptimistic$1(prev => {
+    const o = getOwner();
+    if (!sharedConfig.hydrating) return fn(prev);
+    let initP;
+    if (sharedConfig.has(o.id)) initP = sharedConfig.load(o.id);
+    const init = initP?.v ?? initP;
+    return init != null ? (subFetch(fn, prev), init) : fn(prev);
+  }, second, third);
+}
+function wrapStoreFn(fn, ssrSource) {
+  if (ssrSource === "initial") {
+    return draft => {
+      if (!sharedConfig.hydrating) return fn(draft);
+      subFetch(fn, draft);
+      return undefined;
+    };
+  }
+  return draft => {
+    const o = getOwner();
+    if (!sharedConfig.hydrating) return fn(draft);
+    let initP;
+    if (sharedConfig.has(o.id)) initP = sharedConfig.load(o.id);
+    const init = initP?.v ?? initP;
+    return init != null ? (subFetch(fn, draft), init) : fn(draft);
+  };
+}
+function hydratedCreateStore(first, second, third) {
+  if (typeof first !== "function" || !sharedConfig.hydrating) return createStore$1(first, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client" || ssrSource === "initial") {
+    return createStore$1(second ?? {}, undefined, third);
+  }
+  const aiResult = hydrateStoreFromAsyncIterable(createStore$1, second ?? {}, third);
+  if (aiResult !== null) return aiResult;
+  return createStore$1(wrapStoreFn(first, ssrSource), second, third);
+}
+function hydratedCreateOptimisticStore(first, second, third) {
+  if (typeof first !== "function" || !sharedConfig.hydrating) return createOptimisticStore$1(first, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client" || ssrSource === "initial") {
+    return createOptimisticStore$1(second ?? {}, undefined, third);
+  }
+  const aiResult = hydrateStoreFromAsyncIterable(createOptimisticStore$1, second ?? {}, third);
+  if (aiResult !== null) return aiResult;
+  return createOptimisticStore$1(wrapStoreFn(first, ssrSource), second, third);
+}
+function hydratedCreateProjection(fn, initialValue, options) {
+  if (!sharedConfig.hydrating) return createProjection$1(fn, initialValue, options);
+  markTopLevelSnapshotScope();
+  const ssrSource = options?.ssrSource;
+  if (ssrSource === "client" || ssrSource === "initial") {
+    return createProjection$1(draft => draft, initialValue, options);
+  }
+  const aiResult = hydrateStoreFromAsyncIterable(createStore$1, initialValue, options);
+  if (aiResult !== null) return aiResult[0];
+  return createProjection$1(wrapStoreFn(fn, ssrSource), initialValue, options);
+}
 function enableHydration() {
   _createMemo = hydratedCreateMemo;
   _createSignal = hydratedCreateSignal;
+  _createErrorBoundary = hydratedCreateErrorBoundary;
+  _createOptimistic = hydratedCreateOptimistic;
+  _createProjection = hydratedCreateProjection;
+  _createStore = hydratedCreateStore;
+  _createOptimisticStore = hydratedCreateOptimisticStore;
+  _hydratingValue = sharedConfig.hydrating;
+  _doneValue = sharedConfig.done;
+  Object.defineProperty(sharedConfig, "hydrating", {
+    get() {
+      return _hydratingValue;
+    },
+    set(v) {
+      const was = _hydratingValue;
+      _hydratingValue = v;
+      if (!was && v) {
+        _hydrationDone = false;
+        _doneValue = false;
+        _pendingBoundaries = 0;
+        setSnapshotCapture(true);
+        _snapshotRootOwner = null;
+      } else if (was && !v) {
+        if (_snapshotRootOwner) {
+          releaseSnapshotScope(_snapshotRootOwner);
+          _snapshotRootOwner = null;
+        }
+        checkHydrationComplete();
+      }
+    },
+    configurable: true,
+    enumerable: true
+  });
+  Object.defineProperty(sharedConfig, "done", {
+    get() {
+      return _doneValue;
+    },
+    set(v) {
+      _doneValue = v;
+      if (v) drainHydrationCallbacks();
+    },
+    configurable: true,
+    enumerable: true
+  });
 }
 const createMemo = (...args) => (_createMemo || createMemo$1)(...args);
 const createSignal = (...args) => (_createSignal || createSignal$1)(...args);
+const createErrorBoundary = (...args) => (_createErrorBoundary || createErrorBoundary$1)(...args);
+const createOptimistic = (...args) => (_createOptimistic || createOptimistic$1)(...args);
+const createProjection = (...args) => (_createProjection || createProjection$1)(...args);
+const createStore = (...args) => (_createStore || createStore$1)(...args);
+const createOptimisticStore = (...args) => (_createOptimisticStore || createOptimisticStore$1)(...args);
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  if (!hy.modules) hy.modules = {};
+  if (!hy.loading) hy.loading = {};
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
+function createBoundaryTrigger() {
+  setSnapshotCapture(false);
+  const [s, set] = createSignal$1(undefined, {
+    equals: false
+  });
+  s();
+  setSnapshotCapture(true);
+  return set;
+}
+function resumeBoundaryHydration(o, id, set) {
+  _pendingBoundaries--;
+  if (isDisposed(o)) {
+    checkHydrationComplete();
+    return;
+  }
+  sharedConfig.gather(id);
+  _hydratingValue = true;
+  markSnapshotScope(o);
+  _snapshotRootOwner = o;
+  set();
+  flush();
+  _snapshotRootOwner = null;
+  _hydratingValue = false;
+  releaseSnapshotScope(o);
+  flush();
+  checkHydrationComplete();
+}
 function Loading(props) {
   if (!sharedConfig.hydrating) return createLoadBoundary(() => props.children, () => props.fallback);
   return createMemo$1(() => {
     const o = getOwner();
     const id = o.id;
+    let assetPromise;
+    if (sharedConfig.hydrating && sharedConfig.has(id + "_assets")) {
+      const mapping = sharedConfig.load(id + "_assets");
+      if (mapping && typeof mapping === "object") assetPromise = loadModuleAssets(mapping);
+    }
     if (sharedConfig.hydrating && sharedConfig.has(id)) {
       let ref = sharedConfig.load(id);
       let p;
@@ -142,24 +499,38 @@ function Loading(props) {
         if (typeof ref !== "object" || ref.s !== 1) p = ref;else sharedConfig.gather(id);
       }
       if (p) {
-        const [s, set] = createSignal$1(undefined, {
-          equals: false
+        _pendingBoundaries++;
+        onCleanup(() => {
+          if (!isDisposed(o)) return;
+          sharedConfig.cleanupFragment?.(id);
         });
-        s();
+        const set = createBoundaryTrigger();
         if (p !== "$$f") {
-          p.then(() => {
-            sharedConfig.gather(id);
-            sharedConfig.hydrating = true;
+          const waitFor = assetPromise ? Promise.all([p, assetPromise]) : p;
+          waitFor.then(() => resumeBoundaryHydration(o, id, set), err => {
+            _pendingBoundaries--;
+            checkHydrationComplete();
+            runWithOwner(o, () => {
+              throw err;
+            });
+          });
+        } else {
+          const afterAssets = () => {
+            _pendingBoundaries--;
             set();
-            flush();
-            sharedConfig.hydrating = false;
-          }, err => runWithOwner(o, () => {
-            throw err;
-          }));
-        } else queueMicrotask(set);
+            checkHydrationComplete();
+          };
+          if (assetPromise) assetPromise.then(() => queueMicrotask(afterAssets));else queueMicrotask(afterAssets);
+        }
         return props.fallback;
       }
     }
+    if (assetPromise) {
+      _pendingBoundaries++;
+      const set = createBoundaryTrigger();
+      assetPromise.then(() => resumeBoundaryHydration(o, id, set));
+      return undefined;
+    }
     return createLoadBoundary(() => props.children, () => props.fallback);
   });
 }
@@ -167,11 +538,24 @@ function Loading(props) {
 function createComponent(Comp, props) {
   return devComponent(Comp, props || {});
 }
-function lazy(fn) {
+function lazy(fn, moduleUrl) {
   let comp;
   let p;
   const wrap = props => {
-    comp = createMemo$1(() => (p || (p = fn())).then(mod => mod.default));
+    if (sharedConfig.hydrating && moduleUrl) {
+      const cached = globalThis._$HY?.modules?.[moduleUrl];
+      if (!cached) {
+        throw new Error(`lazy() module "${moduleUrl}" was not preloaded before hydration. ` + "Ensure it is inside a Loading boundary.");
+      }
+      comp = () => cached.default;
+    }
+    if (!comp) {
+      p || (p = fn());
+      p.then(mod => {
+        comp = () => mod.default;
+      });
+      comp = createMemo$1(() => p.then(mod => mod.default));
+    }
     let Comp;
     return createMemo$1(() => (Comp = comp()) ? untrack(() => {
       Object.assign(Comp, {
@@ -196,6 +580,7 @@ function For(props) {
   } : {
     keyed: props.keyed
   };
+  options.name = "<For>";
   return mapArray(() => props.each, props.children, options);
 }
 function Repeat(props) {
@@ -203,6 +588,7 @@ function Repeat(props) {
     fallback: () => props.fallback
   } : {};
   options.from = () => props.from;
+  options.name = "<Repeat>";
   return repeat(() => props.count, index => typeof props.children === "function" ? props.children(index) : props.children, options);
 }
 function Show(props) {
@@ -219,10 +605,17 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(() => {
-        if (!untrack(condition)) throw narrowedError("Show");
-        return conditionValue();
-      })) : child;
+      return fn ? untrack(() => {
+        setStrictRead("<Show>");
+        try {
+          return child(() => {
+            if (!untrack(condition)) throw narrowedError("Show");
+            return conditionValue();
+          });
+        } finally {
+          setStrictRead(false);
+        }
+      }) : child;
     }
     return props.fallback;
   }, undefined, {
@@ -255,10 +648,17 @@ function Switch(props) {
     const [index, conditionValue, mp] = sel;
     const child = mp.children;
     const fn = typeof child === "function" && child.length > 0;
-    return fn ? untrack(() => child(() => {
-      if (untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
-      return conditionValue();
-    })) : child;
+    return fn ? untrack(() => {
+      setStrictRead("<Match>");
+      try {
+        return child(() => {
+          if (untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
+          return conditionValue();
+        });
+      } finally {
+        setStrictRead(false);
+      }
+    }) : child;
   }, undefined, {
     name: "eval conditions"
   } );
@@ -285,4 +685,4 @@ if (globalThis) {
   if (!globalThis.Solid$$) globalThis.Solid$$ = true;else console.warn("You appear to have multiple instances of Solid. This can lead to unexpected behavior.");
 }
 
-export { $DEVCOMP, DEV, Errored, For, Loading, Match, Repeat, Show, Switch, children, createComponent, createContext, createMemo, createSignal, createUniqueId, enableHydration, lazy, sharedConfig, ssrHandleError, ssrRunInScope, useContext };
+export { $DEVCOMP, DEV, Errored, For, Loading, Match, Repeat, Show, Switch, children, createComponent, createContext, createMemo, createOptimistic, createOptimisticStore, createProjection, createSignal, createStore, createUniqueId, enableHydration, lazy, sharedConfig, ssrHandleError, ssrRunInScope, useContext };