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

package/dist/server.cjs

@@ -25,12 +25,24 @@ function getObserver() {
 }
 function createSignal(first, second, third) {
   if (typeof first === "function") {
+    const ssrSource = third?.ssrSource;
+    if (ssrSource === "initial" || ssrSource === "client") {
+      signals.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 => {
@@ -45,14 +57,19 @@ function createMemo(compute, value, options) {
     value: value,
     compute: compute,
     error: undefined,
-    computed: false
+    computed: false,
+    disposed: false
   };
+  signals.runWithOwner(owner, () => signals.onCleanup(() => {
+    comp.disposed = true;
+  }));
   function update() {
+    if (comp.disposed) return;
     try {
       comp.error = undefined;
       const result = signals.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 signals.NotReadyError) {
         err.source?.then(() => update());
@@ -61,7 +78,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 () => {
@@ -74,16 +94,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 signals.NotReadyError(result);
     }
@@ -92,14 +175,46 @@ 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 signals.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 signals.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 signals.NotReadyError(firstReady);
+      }
     }
     return;
   }
@@ -117,7 +232,8 @@ function createRenderEffect(compute, effectFn, value, options) {
       value: value,
       compute: compute,
       error: undefined,
-      computed: true
+      computed: true,
+      disposed: false
     }, () => compute(value)));
     effectFn(result, value);
   } catch (err) {
@@ -133,7 +249,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;
@@ -141,16 +257,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 signals.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 = signals.createOwner();
   const [state] = createStore(initialValue);
-  fn(state);
+  if (options?.ssrSource === "initial" || options?.ssrSource === "client") {
+    return state;
+  }
+  let disposed = false;
+  signals.runWithOwner(owner, () => signals.onCleanup(() => {
+    disposed = true;
+  }));
+  const ssrSource = options?.ssrSource;
+  const useProxy = ssrSource !== "hybrid";
+  const patches = [];
+  const draft = useProxy ? createDeepProxy(state, patches) : state;
+  const result = signals.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) {
@@ -202,15 +447,18 @@ const ErrorContext = {
   defaultValue: null
 };
 function createErrorBoundary(fn, fallback) {
+  const ctx = sharedConfig.context;
   const owner = signals.createOwner();
   return signals.runWithOwner(owner, () => {
     let result;
     signals.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;
@@ -299,9 +547,9 @@ 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 => {
@@ -311,15 +559,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 signals.NotReadyError(p);
+    return createMemo(() => {
+      if (!p.v) throw new signals.NotReadyError(p);
+      return p.v(props);
+    });
   };
   wrap.preload = load;
   return wrap;
@@ -402,18 +665,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 signals.runWithOwner(o, () => {
+    serializeBuffer = [];
+    ctx.serialize = (id, p, deferStream) => {
+      serializeBuffer.push([id, p, deferStream]);
+    };
+    const prevBoundary = ctx._currentBoundaryId;
+    ctx._currentBoundaryId = id;
+    const result = signals.runWithOwner(o, () => {
       try {
-        return ctx.resolve(signals.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 = signals.createOwner({
     id
   });
@@ -421,19 +701,30 @@ 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 = signals.runWithOwner(o, () => ctx.ssr(ret.t, ...ret.h));
+        }
+        done(ret.t[0]);
+      } catch (err) {
+        done(undefined, err);
       }
-      done(ret.t[0]);
     })();
     return signals.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 signals.runWithOwner(fallbackOwner, () => props.fallback);
 }
@@ -505,6 +796,7 @@ exports.action = action;
 exports.children = children;
 exports.createComponent = createComponent;
 exports.createContext = createContext;
+exports.createDeepProxy = createDeepProxy;
 exports.createEffect = createEffect;
 exports.createMemo = createMemo;
 exports.createOptimistic = createOptimistic;