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

package/dist/server.js

@@ -1,5 +1,5 @@
-import { getOwner, getNextChildId, createOwner, runWithOwner, isWrappable, NotReadyError, setContext, getContext, createRoot, flatten } from '@solidjs/signals';
-export { $PROXY, $TRACK, NotReadyError, createRoot, flatten, getOwner, isEqual, isWrappable, merge, omit, onCleanup, runWithOwner, snapshot } from '@solidjs/signals';
+import { getOwner, getNextChildId, createOwner, runWithOwner, onCleanup, NotReadyError, isWrappable, setContext, getContext, flatten, createRoot } from '@solidjs/signals';
+export { $PROXY, $TRACK, NotReadyError, createOwner, createRoot, flatten, getNextChildId, getOwner, isEqual, isWrappable, merge, omit, onCleanup, runWithOwner, snapshot, storePath } from '@solidjs/signals';
 
 const sharedConfig = {
   getNextContextId() {
@@ -24,12 +24,24 @@ function getObserver() {
 }
 function createSignal(first, second, third) {
   if (typeof first === "function") {
+    const ssrSource = third?.ssrSource;
+    if (ssrSource === "initial" || ssrSource === "client") {
+      createOwner();
+      let value = second;
+      return [() => value, v => {
+        return value = typeof v === "function" ? v(value) : v;
+      }];
+    }
+    const memoOpts = third?.deferStream || ssrSource ? {
+      deferStream: third?.deferStream,
+      ssrSource
+    } : undefined;
     const memo = createMemo(p => {
       let value = first(p ? p[0]() : second);
       return [() => value, v => {
         return value = typeof v === "function" ? v(value) : v;
       }];
-    });
+    }, undefined, memoOpts);
     return [() => memo()[0](), v => memo()[1](v)];
   }
   return [() => first, v => {
@@ -44,14 +56,19 @@ function createMemo(compute, value, options) {
     value: value,
     compute: compute,
     error: undefined,
-    computed: false
+    computed: false,
+    disposed: false
   };
+  runWithOwner(owner, () => onCleanup(() => {
+    comp.disposed = true;
+  }));
   function update() {
+    if (comp.disposed) return;
     try {
       comp.error = undefined;
       const result = runWithOwner(owner, () => runWithObserver(comp, () => comp.compute(comp.value)));
       comp.computed = true;
-      processResult(comp, result, owner, ctx);
+      processResult(comp, result, owner, ctx, options?.deferStream, options?.ssrSource);
     } catch (err) {
       if (err instanceof NotReadyError) {
         err.source?.then(() => update());
@@ -60,7 +77,10 @@ function createMemo(compute, value, options) {
       comp.computed = true;
     }
   }
-  if (!options?.lazy) {
+  const ssrSource = options?.ssrSource;
+  if (ssrSource === "initial" || ssrSource === "client") {
+    comp.computed = true;
+  } else if (!options?.lazy) {
     update();
   }
   return () => {
@@ -73,16 +93,79 @@ function createMemo(compute, value, options) {
     return comp.value;
   };
 }
-function processResult(comp, result, owner, ctx) {
+function createDeepProxy(target, patches, basePath = []) {
+  const childProxies = new Map();
+  const handler = {
+    get(obj, key, receiver) {
+      if (Array.isArray(obj)) {
+        if (key === "shift") {
+          return function () {
+            if (obj.length === 0) return undefined;
+            const removed = obj[0];
+            Array.prototype.shift.call(obj);
+            childProxies.clear();
+            patches.push([[...basePath, 0]]);
+            return removed;
+          };
+        }
+        if (key === "unshift") {
+          return function (...items) {
+            const result = Array.prototype.unshift.apply(obj, items);
+            childProxies.clear();
+            for (let i = 0; i < items.length; i++) {
+              patches.push([[...basePath, i], items[i], 1]);
+            }
+            return result;
+          };
+        }
+        if (key === "splice") {
+          return function (start, deleteCount, ...items) {
+            const len = obj.length;
+            const s = start < 0 ? Math.max(len + start, 0) : Math.min(start, len);
+            const d = deleteCount === undefined ? len - s : Math.min(Math.max(deleteCount, 0), len - s);
+            const removed = Array.prototype.splice.apply(obj, [s, d, ...items]);
+            childProxies.clear();
+            for (let i = 0; i < d; i++) patches.push([[...basePath, s]]);
+            for (let i = 0; i < items.length; i++) patches.push([[...basePath, s + i], items[i], 1]);
+            return removed;
+          };
+        }
+      }
+      const value = Reflect.get(obj, key, receiver);
+      if (value !== null && typeof value === "object" && typeof key !== "symbol") {
+        if (!childProxies.has(key)) {
+          childProxies.set(key, createDeepProxy(value, patches, [...basePath, key]));
+        }
+        return childProxies.get(key);
+      }
+      return value;
+    },
+    set(obj, key, value) {
+      childProxies.delete(key);
+      patches.push([[...basePath, key], value]);
+      return Reflect.set(obj, key, value);
+    },
+    deleteProperty(obj, key) {
+      childProxies.delete(key);
+      patches.push([[...basePath, key]]);
+      return Reflect.deleteProperty(obj, key);
+    }
+  };
+  return new Proxy(target, handler);
+}
+function processResult(comp, result, owner, ctx, deferStream, ssrSource) {
+  if (comp.disposed) return;
   const id = owner.id;
   const uninitialized = comp.value === undefined;
   if (result instanceof Promise) {
     result.then(v => {
       result.s = 1;
-      result.v = comp.value = v;
+      result.v = v;
+      if (comp.disposed) return;
+      comp.value = v;
       comp.error = undefined;
-    });
-    if (ctx?.serialize && id) ctx.serialize(id, result);
+    }, () => {});
+    if (ctx?.async && ctx.serialize && id) ctx.serialize(id, result, deferStream);
     if (uninitialized) {
       comp.error = new NotReadyError(result);
     }
@@ -91,37 +174,87 @@ function processResult(comp, result, owner, ctx) {
   const iterator = result?.[Symbol.asyncIterator];
   if (typeof iterator === "function") {
     const iter = iterator.call(result);
-    const promise = iter.next().then(v => {
-      promise.s = 1;
-      promise.v = comp.value = v.value;
-      comp.error = undefined;
-    });
-    if (ctx?.serialize && id) ctx.serialize(id, promise);
-    if (uninitialized) {
-      comp.error = new NotReadyError(promise);
+    if (ssrSource === "hybrid") {
+      const promise = iter.next().then(v => {
+        promise.s = 1;
+        promise.v = v.value;
+        if (comp.disposed) return;
+        comp.value = v.value;
+        comp.error = undefined;
+      }, () => {});
+      if (ctx?.async && ctx.serialize && id) ctx.serialize(id, promise, deferStream);
+      if (uninitialized) {
+        comp.error = new NotReadyError(promise);
+      }
+    } else {
+      const firstNext = iter.next();
+      const firstReady = firstNext.then(r => {
+        if (comp.disposed) return;
+        if (!r.done) {
+          comp.value = r.value;
+          comp.error = undefined;
+        }
+      }, () => {});
+      let servedFirst = false;
+      const tapped = {
+        [Symbol.asyncIterator]: () => ({
+          next() {
+            if (!servedFirst) {
+              servedFirst = true;
+              return firstNext.then(r => {
+                if (!r.done && !comp.disposed) comp.value = r.value;
+                return r;
+              });
+            }
+            return iter.next().then(r => r);
+          }
+        })
+      };
+      if (ctx?.async && ctx.serialize && id) ctx.serialize(id, tapped, deferStream);
+      if (uninitialized) {
+        comp.error = new NotReadyError(firstReady);
+      }
     }
     return;
   }
   comp.value = result;
 }
-function createEffect(compute, effect, value, options) {
-  const o = getOwner();
-  if (o?.id != null) getNextChildId(o);
-}
-function createRenderEffect(compute, effectFn, value, options) {
+function serverEffect(compute, effectFn, value, options) {
+  const ssrSource = options?.ssrSource;
+  if (ssrSource === "client" || ssrSource === "initial") {
+    createOwner();
+    return;
+  }
+  const ctx = sharedConfig.context;
   const owner = createOwner();
+  const comp = {
+    owner,
+    value: value,
+    compute: compute,
+    error: undefined,
+    computed: true,
+    disposed: false
+  };
+  if (ssrSource) {
+    runWithOwner(owner, () => onCleanup(() => {
+      comp.disposed = true;
+    }));
+  }
   try {
-    const result = runWithOwner(owner, () => runWithObserver({
-      owner,
-      value: value,
-      compute: compute,
-      error: undefined,
-      computed: true
-    }, () => compute(value)));
-    effectFn(result, value);
+    const result = runWithOwner(owner, () => runWithObserver(comp, () => compute(value)));
+    if (ssrSource) {
+      processResult(comp, result, owner, ctx, options?.deferStream, ssrSource);
+    }
+    effectFn?.(ssrSource ? comp.value ?? result : result, value);
   } catch (err) {
   }
 }
+function createEffect(compute, effect, value, options) {
+  serverEffect(compute, undefined, value, options);
+}
+function createRenderEffect(compute, effectFn, value, options) {
+  serverEffect(compute, effectFn, value, options);
+}
 function createTrackedEffect(compute, options) {
   const o = getOwner();
   if (o?.id != null) getNextChildId(o);
@@ -132,7 +265,7 @@ function createReaction(effectFn, options) {
   };
 }
 function createOptimistic(first, second, third) {
-  return createSignal(first, second);
+  return createSignal(first, second, third);
 }
 function setProperty(state, property, value) {
   if (state[property] === value) return;
@@ -140,16 +273,145 @@ function setProperty(state, property, value) {
     delete state[property];
   } else state[property] = value;
 }
-function createStore(state) {
-  function setStore(fn) {
-    fn(state);
+function createStore(first, second) {
+  if (typeof first === "function") {
+    const store = createProjection(first, second ?? {});
+    return [store, fn => fn(store)];
   }
-  return [state, setStore];
+  const state = first;
+  return [state, fn => fn(state)];
 }
 const createOptimisticStore = createStore;
-function createProjection(fn, initialValue = {}) {
+function createPendingProxy(state, source) {
+  let pending = true;
+  let readTarget = state;
+  const proxy = new Proxy(state, {
+    get(obj, key, receiver) {
+      if (pending && typeof key !== "symbol") {
+        throw new NotReadyError(source);
+      }
+      return Reflect.get(readTarget, key);
+    }
+  });
+  return [proxy, frozen => {
+    if (frozen) readTarget = frozen;
+    pending = false;
+  }];
+}
+function createProjection(fn, initialValue = {}, options) {
+  const ctx = sharedConfig.context;
+  const owner = createOwner();
   const [state] = createStore(initialValue);
-  fn(state);
+  if (options?.ssrSource === "initial" || options?.ssrSource === "client") {
+    return state;
+  }
+  let disposed = false;
+  runWithOwner(owner, () => onCleanup(() => {
+    disposed = true;
+  }));
+  const ssrSource = options?.ssrSource;
+  const useProxy = ssrSource !== "hybrid";
+  const patches = [];
+  const draft = useProxy ? createDeepProxy(state, patches) : state;
+  const result = runWithOwner(owner, () => fn(draft));
+  const iteratorFn = result?.[Symbol.asyncIterator];
+  if (typeof iteratorFn === "function") {
+    const iter = iteratorFn.call(result);
+    if (ssrSource === "hybrid") {
+      const promise = iter.next().then(r => {
+        promise.s = 1;
+        if (disposed) {
+          promise.v = state;
+          return;
+        }
+        if (r.value !== undefined && r.value !== state) {
+          Object.assign(state, r.value);
+        }
+        promise.v = state;
+        markReady();
+      }, () => {});
+      if (ctx?.async && !ctx.noHydrate && owner.id) ctx.serialize(owner.id, promise, options?.deferStream);
+      const [pending, markReady] = createPendingProxy(state, promise);
+      return pending;
+    } else {
+      const firstNext = iter.next();
+      const firstReady = firstNext.then(r => {
+        if (disposed) return;
+        patches.length = 0;
+        if (!r.done) {
+          if (r.value !== undefined && r.value !== draft) {
+            Object.assign(state, r.value);
+          }
+        }
+        markReady(JSON.parse(JSON.stringify(state)));
+      }, () => {
+        markReady();
+      });
+      let servedFirst = false;
+      const tapped = {
+        [Symbol.asyncIterator]: () => ({
+          next() {
+            if (!servedFirst) {
+              servedFirst = true;
+              return firstNext.then(r => {
+                if (!r.done && !disposed) return {
+                  done: false,
+                  value: state
+                };
+                return {
+                  done: r.done,
+                  value: undefined
+                };
+              });
+            }
+            return iter.next().then(r => {
+              if (disposed) return {
+                done: true,
+                value: undefined
+              };
+              const flushed = patches.splice(0);
+              if (!r.done) {
+                if (r.value !== undefined && r.value !== draft) {
+                  Object.assign(state, r.value);
+                }
+                return {
+                  done: false,
+                  value: flushed
+                };
+              }
+              return {
+                done: true,
+                value: undefined
+              };
+            });
+          }
+        })
+      };
+      if (ctx?.async && !ctx.noHydrate && owner.id) ctx.serialize(owner.id, tapped, options?.deferStream);
+      const [pending, markReady] = createPendingProxy(state, firstReady);
+      return pending;
+    }
+  }
+  if (result instanceof Promise) {
+    const promise = result.then(v => {
+      promise.s = 1;
+      if (disposed) {
+        promise.v = state;
+        return;
+      }
+      if (v !== undefined && v !== state) {
+        Object.assign(state, v);
+      }
+      promise.v = state;
+      markReady();
+    }, () => {});
+    if (ctx?.async && !ctx.noHydrate && owner.id) ctx.serialize(owner.id, promise, options?.deferStream);
+    const [pending, markReady] = createPendingProxy(state, promise);
+    return pending;
+  }
+  if (result !== undefined && result !== state && result !== draft) {
+    Object.assign(state, result);
+  }
   return state;
 }
 function reconcile(value) {
@@ -188,12 +450,23 @@ function mapArray(list, mapFn, options = {}) {
   };
 }
 function repeat(count, mapFn, options = {}) {
+  const owner = createOwner();
   const len = count();
   const offset = options.from?.() || 0;
   let s = [];
   if (len) {
-    for (let i = 0; i < len; i++) s.push(mapFn(i + offset));
-  } else if (options.fallback) s = [options.fallback()];
+    runWithOwner(owner, () => {
+      for (let i = 0; i < len; i++) {
+        const itemOwner = createOwner();
+        s.push(runWithOwner(itemOwner, () => mapFn(i + offset)));
+      }
+    });
+  } else if (options.fallback) {
+    s = [runWithOwner(owner, () => {
+      const fo = createOwner();
+      return runWithOwner(fo, () => options.fallback());
+    })];
+  }
   return () => s;
 }
 const ErrorContext = {
@@ -201,15 +474,21 @@ const ErrorContext = {
   defaultValue: null
 };
 function createErrorBoundary(fn, fallback) {
+  const ctx = sharedConfig.context;
   const owner = createOwner();
+  const parent = getOwner();
+  if (parent?.id != null) getNextChildId(parent);
+  owner.id = owner.id + "0";
   return runWithOwner(owner, () => {
     let result;
     setContext(ErrorContext, err => {
+      if (ctx && !ctx.noHydrate && owner.id) ctx.serialize(owner.id, err);
       result = fallback(err, () => {});
     });
     try {
       result = fn();
     } catch (err) {
+      if (ctx && !ctx.noHydrate && owner.id) ctx.serialize(owner.id, err);
       result = fallback(err, () => {});
     }
     return () => result;
@@ -244,7 +523,7 @@ function isPending(fn, fallback) {
     throw err;
   }
 }
-function pending(fn) {
+function latest(fn) {
   return fn();
 }
 function isRefreshing() {
@@ -278,29 +557,29 @@ function useContext(context) {
   return getContext(context);
 }
 function children(fn) {
-  const childrenMemo = createMemo(fn);
-  const memo = createMemo(() => flatten(childrenMemo()));
+  const c = createMemo(fn, undefined, {
+    lazy: true
+  });
+  const memo = createMemo(() => flatten(c()), undefined, {
+    lazy: true
+  });
   memo.toArray = () => {
-    const c = memo();
-    return Array.isArray(c) ? c : c != null ? [c] : [];
+    const v = memo();
+    return Array.isArray(v) ? v : v != null ? [v] : [];
   };
   return memo;
 }
 function ssrRunInScope(fn) {
-  if (Array.isArray(fn)) {
-    const o = createOwner();
-    return fn.map(f => runWithOwner.bind(null, o, f));
-  }
-  return runWithOwner.bind(null, createOwner(), fn);
+  return fn;
 }
 
 function enableHydration() {}
 function createComponent(Comp, props) {
   return Comp(props || {});
 }
-function lazy(fn) {
+function lazy(fn, moduleUrl) {
   let p;
-  let load = id => {
+  let load = () => {
     if (!p) {
       p = fn();
       p.then(mod => {
@@ -310,15 +589,30 @@ function lazy(fn) {
     return p;
   };
   const wrap = props => {
-    sharedConfig.getNextContextId();
+    if (!moduleUrl) {
+      throw new Error("lazy() used in SSR without a moduleUrl. " + "All lazy() components require a moduleUrl for correct hydration. " + "This is typically injected by the bundler plugin.");
+    }
+    if (!sharedConfig.context?.resolveAssets) {
+      throw new Error(`lazy() called with moduleUrl "${moduleUrl}" but no asset manifest is set. ` + "Pass a manifest option to renderToStream/renderToString.");
+    }
     load();
-    if (p.v) return p.v(props);
-    if (sharedConfig.context?.async) {
-      sharedConfig.context.block(p.then(() => {
+    const ctx = sharedConfig.context;
+    if (!ctx?.registerAsset || !ctx.resolveAssets) return;
+    const assets = ctx.resolveAssets(moduleUrl);
+    if (assets) {
+      for (let i = 0; i < assets.css.length; i++) ctx.registerAsset("style", assets.css[i]);
+      for (let i = 0; i < assets.js.length; i++) ctx.registerAsset("module", assets.js[i]);
+      ctx.registerModule?.(moduleUrl, assets.js[0]);
+    }
+    if (ctx?.async) {
+      ctx.block(p.then(() => {
         p.s = "success";
       }));
     }
-    throw new NotReadyError(p);
+    return createMemo(() => {
+      if (!p.v) throw new NotReadyError(p);
+      return p.v(props);
+    });
   };
   wrap.preload = load;
   return wrap;
@@ -344,20 +638,27 @@ function Repeat(props) {
   return repeat(() => props.count, index => typeof props.children === "function" ? props.children(index) : props.children, options);
 }
 function Show(props) {
-  const when = props.when;
-  if (when) {
-    const child = props.children;
-    if (typeof child === "function" && child.length > 0) {
-      return child(() => when);
-    }
-    return child;
+  const o = getOwner();
+  if (o?.id != null) {
+    getNextChildId(o);
+    if (!props.keyed) getNextChildId(o);
   }
-  return props.fallback;
+  return createMemo(() => {
+    const when = props.when;
+    if (when) {
+      const child = props.children;
+      if (typeof child === "function" && child.length > 0) {
+        return child(() => when);
+      }
+      return child;
+    }
+    return props.fallback;
+  });
 }
 function Switch(props) {
   const chs = children(() => props.children);
   const o = getOwner();
-  if (o) getNextChildId(o);
+  if (o?.id != null) getNextChildId(o);
   return createMemo(() => {
     let conds = chs();
     if (!Array.isArray(conds)) conds = [conds];
@@ -401,18 +702,35 @@ function Loading(props) {
   const id = o.id;
   o.id = id + "00";
   let runPromise;
+  let serializeBuffer = [];
+  const origSerialize = ctx.serialize;
   function runInitially() {
     o.dispose(false);
-    return runWithOwner(o, () => {
+    serializeBuffer = [];
+    ctx.serialize = (id, p, deferStream) => {
+      serializeBuffer.push([id, p, deferStream]);
+    };
+    const prevBoundary = ctx._currentBoundaryId;
+    ctx._currentBoundaryId = id;
+    const result = runWithOwner(o, () => {
       try {
-        return ctx.resolve(flatten(props.children));
+        return ctx.resolve(props.children);
       } catch (err) {
         runPromise = ssrHandleError(err);
       }
     });
+    ctx._currentBoundaryId = prevBoundary;
+    ctx.serialize = origSerialize;
+    return result;
   }
   let ret = runInitially();
-  if (!(runPromise || ret?.p?.length)) return ret;
+  if (!(runPromise || ret?.p?.length)) {
+    for (const args of serializeBuffer) origSerialize(args[0], args[1], args[2]);
+    serializeBuffer = [];
+    const modules = ctx.getBoundaryModules?.(id);
+    if (modules) ctx.serialize(id + "_assets", modules);
+    return ret;
+  }
   const fallbackOwner = createOwner({
     id
   });
@@ -420,23 +738,34 @@ function Loading(props) {
   if (ctx.async) {
     const done = ctx.registerFragment(id);
     (async () => {
-      while (runPromise) {
-        await runPromise;
-        runPromise = undefined;
-        ret = runInitially();
-      }
-      while (ret.p.length) {
-        await Promise.all(ret.p);
-        ret = ctx.ssr(ret.t, ...ret.h);
+      try {
+        while (runPromise) {
+          o.dispose(false);
+          await runPromise;
+          runPromise = undefined;
+          ret = runInitially();
+        }
+        for (const args of serializeBuffer) origSerialize(args[0], args[1], args[2]);
+        serializeBuffer = [];
+        while (ret.p.length) {
+          await Promise.all(ret.p);
+          ret = runWithOwner(o, () => ctx.ssr(ret.t, ...ret.h));
+        }
+        done(ret.t[0]);
+      } catch (err) {
+        done(undefined, err);
       }
-      done(ret.t[0]);
     })();
     return runWithOwner(fallbackOwner, () => ctx.ssr([`<template id="pl-${id}"></template>`, `<!--pl-${id}-->`], ctx.escape(props.fallback)));
   }
+  for (const args of serializeBuffer) origSerialize(args[0], args[1], args[2]);
+  serializeBuffer = [];
+  const modules = ctx.getBoundaryModules?.(id);
+  if (modules) ctx.serialize(id + "_assets", modules);
   ctx.serialize(id, "$$f");
   return runWithOwner(fallbackOwner, () => props.fallback);
 }
 
 const DEV = undefined;
 
-export { $DEVCOMP, DEV, Errored, For, Loading, Match, Repeat, Show, Switch, action, children, createComponent, createContext, createEffect, createMemo, createOptimistic, createOptimisticStore, createProjection, createReaction, createRenderEffect, createSignal, createStore, createTrackedEffect, createUniqueId, deep, enableHydration, flush, getObserver, isPending, isRefreshing, lazy, mapArray, onSettled, pending, reconcile, refresh, repeat, resolve, sharedConfig, ssrHandleError, ssrRunInScope, untrack, useContext };
+export { $DEVCOMP, DEV, Errored, For, Loading, Match, Repeat, Show, Switch, action, children, createComponent, createContext, createDeepProxy, createEffect, createMemo, createOptimistic, createOptimisticStore, createProjection, createReaction, createRenderEffect, createSignal, createStore, createTrackedEffect, createUniqueId, deep, enableHydration, flush, getObserver, isPending, isRefreshing, latest, lazy, mapArray, onSettled, reconcile, refresh, repeat, resolve, sharedConfig, ssrHandleError, ssrRunInScope, untrack, useContext };