@solidjs/web 2.0.0-beta.27 → 2.0.0-beta.29

package/frames/dist/server.js

@@ -1,5 +1,5 @@
+import { runWithOwner, createOwner, sharedConfig, createRoot, ssrHandleError, getOwner, NoHydration, runInServerComponentScope, Hydration } from 'solid-js';
 import { toCrossJSONStream, Feature, Serializer, getCrossReferenceHeader, createPlugin } from 'seroval';
-import { runWithOwner, createOwner, sharedConfig, createRoot, ssrHandleError, getOwner, NoHydration, Hydration } from 'solid-js';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
 const runWithHydrationScope = (id, fn) => runWithOwner(createOwner({
@@ -54,6 +54,21 @@ function resolveCodecOptions({
     depthLimit: depthLimit === undefined ? JSON_CODEC_DEPTH_LIMIT : depthLimit
   };
 }
+function serializeJSON(value, {
+  onParse,
+  onDone,
+  onError,
+  ...codecOptions
+}) {
+  const resolved = resolveCodecOptions(codecOptions);
+  return toCrossJSONStream(value, {
+    onParse,
+    onDone,
+    onError,
+    ...resolved,
+    disabledFeatures: resolved.disabledFeatures | serializeOnlyDisabledFeatures()
+  });
+}
 function createJSONSerializer({
   onData,
   onDone,
@@ -218,7 +233,24 @@ function createAssetTracking() {
     }
   };
 }
-function applyAssetTracking(context, tracking, manifest) {
+function warnUnresolvedModuleAssets(moduleUrl, warned) {
+  if (warned.has(moduleUrl)) return;
+  warned.add(moduleUrl);
+  console.error(`Asset manifest returned no client assets for module "${moduleUrl}". ` + "If this module is a server-rendered lazy() component, its entry will be missing from " + "the serialized hydration asset map, the client will be unable to preload it, and " + "hydration will fail with 'lazy() module \"…\" was not preloaded before hydration'. " + "This means the integration's asset resolver (dev manifest bridge or build client " + "manifest) failed to answer for this module — check the integration's server logs, " + "restart the dev server, or verify the module is included in the client build.");
+}
+function guardResolvedAssets(moduleUrl, result, warned) {
+  if (result && typeof result.then === "function") {
+    return result.then(assets => {
+      if (!assets || !assets.js || !assets.js.length) warnUnresolvedModuleAssets(moduleUrl, warned);
+      return assets;
+    });
+  }
+  if (!result || !result.js || !result.js.length) warnUnresolvedModuleAssets(moduleUrl, warned);
+  return result;
+}
+function applyAssetTracking(context, tracking, manifest, noScripts) {
+  const warned = new Set();
+  const guard = noScripts ? resolve => resolve : resolve => moduleUrl => guardResolvedAssets(moduleUrl, resolve(moduleUrl), warned);
   Object.defineProperty(context, "_currentBoundaryId", {
     get() {
       return tracking.currentBoundaryId;
@@ -232,15 +264,15 @@ function applyAssetTracking(context, tracking, manifest) {
   context.registerModule = tracking.registerModule;
   context.getBoundaryModules = tracking.getBoundaryModules;
   if (typeof manifest === "function") {
-    context.resolveAssets = manifest;
+    context.resolveAssets = guard(manifest);
   } else if (manifest && typeof manifest.resolve === "function") {
-    context.resolveAssets = key => manifest.resolve(key);
+    context.resolveAssets = guard(key => manifest.resolve(key));
     if (typeof manifest.resolveSync === "function") {
       context.resolveAssetsSync = key => manifest.resolveSync(key);
     }
   } else if (manifest) {
     const resolve = moduleUrl => resolveAssets(moduleUrl, manifest);
-    context.resolveAssets = resolve;
+    context.resolveAssets = guard(resolve);
     context.resolveAssetsSync = resolve;
   }
 }
@@ -519,7 +551,7 @@ function renderToStream(code, options = {}) {
       });
     }
   };
-  applyAssetTracking(context, tracking, manifest);
+  applyAssetTracking(context, tracking, manifest, noScripts);
   registerEntryAssets(manifest);
   let html = createRoot(d => {
     dispose = d;
@@ -616,6 +648,51 @@ function renderToStream(code, options = {}) {
     drainTurn = 0;
     progressed ? queue(attempt) : setTimeout(attempt);
   };
+  let cachedReadable;
+  let consumer;
+  const claimConsumer = name => {
+    if (consumer && consumer !== name) {
+      throw new Error(`renderToStream result was already consumed via \`${consumer}\`; cannot also consume it via \`${name}\`. Use exactly one of \`pipe\`, \`pipeTo\`, or \`readable\`.`);
+    }
+    consumer = name;
+  };
+  const pipeToImpl = w => {
+    let resolve;
+    const p = new Promise(r => resolve = r);
+    function flush() {
+      allSettled(blockingPromises).then(() => {
+        scheduleFlush(() => {
+          doShell();
+          if (!shellCompleted) return flush();
+          const encoder = new TextEncoder();
+          const writer = w.getWriter();
+          let pendingWrites = Promise.resolve();
+          writable = {
+            end() {
+              pendingWrites.then(() => {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              });
+            }
+          };
+          buffer = {
+            write(payload) {
+              pendingWrites = pendingWrites.then(() => writer.write(encoder.encode(payload))).catch(() => {});
+            }
+          };
+          buffer.write(tmp);
+          firstFlushed = true;
+          if (completed) {
+            dispose();
+            writable.end();
+          } else flushEnd();
+        });
+      });
+    }
+    flush();
+    return p;
+  };
   return {
     then(fn) {
       function complete() {
@@ -640,6 +717,7 @@ function renderToStream(code, options = {}) {
       flush();
     },
     pipe(w) {
+      claimConsumer("pipe");
       function flush() {
         allSettled(blockingPromises).then(() => {
           scheduleFlush(() => {
@@ -658,38 +736,17 @@ function renderToStream(code, options = {}) {
       flush();
     },
     pipeTo(w) {
-      let resolve;
-      const p = new Promise(r => resolve = r);
-      function flush() {
-        allSettled(blockingPromises).then(() => {
-          scheduleFlush(() => {
-            doShell();
-            if (!shellCompleted) return flush();
-            const encoder = new TextEncoder();
-            const writer = w.getWriter();
-            writable = {
-              end() {
-                writer.releaseLock();
-                w.close().catch(() => {});
-                resolve();
-              }
-            };
-            buffer = {
-              write(payload) {
-                writer.write(encoder.encode(payload)).catch(() => {});
-              }
-            };
-            buffer.write(tmp);
-            firstFlushed = true;
-            if (completed) {
-              dispose();
-              writable.end();
-            } else flushEnd();
-          });
-        });
+      claimConsumer("pipeTo");
+      return pipeToImpl(w);
+    },
+    get readable() {
+      claimConsumer("readable");
+      if (!cachedReadable) {
+        const t = new TransformStream();
+        pipeToImpl(t.writable);
+        cachedReadable = t.readable;
       }
-      flush();
-      return p;
+      return cachedReadable;
     }
   };
 }
@@ -1134,6 +1191,51 @@ function resolveSSRSync(node) {
   throw new Error("This value cannot be rendered synchronously. Are you missing a boundary?");
 }
 
+function frameAddress(id, args) {
+  return args && args.length ? id + ":" + hashArguments(args) : id;
+}
+function hashArguments(args) {
+  let hash = 0;
+  const text = stableString(args);
+  for (let i = 0; i < text.length; i++) {
+    hash = (hash << 5) - hash + text.charCodeAt(i);
+    hash |= 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+function stableString(value, seen) {
+  if (value === null || typeof value !== "object") {
+    return typeof value === "bigint" ? value + "n" : String(value);
+  }
+  if (value instanceof Date) return "Date:" + value.getTime();
+  seen || (seen = new Set());
+  if (seen.has(value)) return "~";
+  seen.add(value);
+  if (value instanceof Map) {
+    const entries = [];
+    for (const [k, v] of value) {
+      entries.push(stableString(k, seen) + "=>" + stableString(v, seen));
+    }
+    return "Map{" + entries.sort().join(",") + "}";
+  }
+  if (value instanceof Set) {
+    const members = [];
+    for (const v of value) members.push(stableString(v, seen));
+    return "Set{" + members.sort().join(",") + "}";
+  }
+  if (Array.isArray(value)) {
+    let out = "[";
+    for (let i = 0; i < value.length; i++) out += (i ? "," : "") + stableString(value[i], seen);
+    return out + "]";
+  }
+  const keys = Object.keys(value).sort();
+  let out = "{";
+  for (let i = 0; i < keys.length; i++) {
+    out += (i ? "," : "") + keys[i] + ":" + stableString(value[keys[i]], seen);
+  }
+  return out + "}";
+}
+const SINGLE_FLIGHT_HEADER = "X-Single-Flight";
 function createChunk(data) {
   const encodeData = new TextEncoder().encode(data);
   const bytes = encodeData.length;
@@ -1145,16 +1247,138 @@ function createChunk(data) {
   chunk.set(encodeData, 12);
   return chunk;
 }
+class ChunkReader {
+  constructor(stream) {
+    this.reader = stream.getReader();
+    this.buffer = new Uint8Array(0);
+    this.done = false;
+  }
+  async readChunk() {
+    const chunk = await this.reader.read();
+    if (!chunk.done) {
+      const newBuffer = new Uint8Array(this.buffer.length + chunk.value.length);
+      newBuffer.set(this.buffer);
+      newBuffer.set(chunk.value, this.buffer.length);
+      this.buffer = newBuffer;
+    } else {
+      this.done = true;
+    }
+  }
+  async next() {
+    while (this.buffer.length < 12) {
+      if (this.done) {
+        if (this.buffer.length === 0) return {
+          done: true,
+          value: undefined
+        };
+        throw new Error("Malformed server function stream.");
+      }
+      await this.readChunk();
+    }
+    const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
+    const bytes = Number.parseInt(head, 16);
+    if (Number.isNaN(bytes)) {
+      throw new Error("Malformed server function stream.");
+    }
+    while (bytes > this.buffer.length - 12) {
+      if (this.done) {
+        throw new Error("Malformed server function stream.");
+      }
+      await this.readChunk();
+    }
+    const partial = new TextDecoder().decode(this.buffer.subarray(12, 12 + bytes));
+    this.buffer = this.buffer.subarray(12 + bytes);
+    return {
+      done: false,
+      value: partial
+    };
+  }
+  async drain(interpret) {
+    while (true) {
+      const result = await this.next();
+      if (result.done) {
+        break;
+      }
+      interpret(result.value);
+    }
+  }
+}
+function serializeStream(value, codecOptions) {
+  return new ReadableStream({
+    start(controller) {
+      serializeJSON(value, {
+        ...codecOptions,
+        onParse(node) {
+          controller.enqueue(createChunk(JSON.stringify(node)));
+        },
+        onDone() {
+          controller.close();
+        },
+        onError(error) {
+          controller.error(error);
+        }
+      });
+    }
+  });
+}
 
 const ENVELOPE = Symbol.for("solid.ResponseEnvelope");
 function isResponseEnvelope(value) {
   return !!(value && typeof value === "object" && value[ENVELOPE]);
 }
 
+const INVOCATIONS = new WeakMap();
+function getEventServerFunctionInvocation(event) {
+  return event && INVOCATIONS.get(event);
+}
+
 const FRAME_STREAM_HEADER = "X-Frame-Stream";
 function isFrameStreamResponse(response) {
   return response.headers.has(FRAME_STREAM_HEADER);
 }
+const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("dom-expressions.server-component");
+const SERVER_COMPONENT_SOURCE = /*#__PURE__*/Symbol.for("dom-expressions.server-component-source");
+const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("dom-expressions.server-component-address");
+function parseServerComponent(value, ctx) {
+  return {
+    id: ctx.parse(value[SERVER_COMPONENT]),
+    address: ctx.parse(value[SERVER_COMPONENT_ADDRESS])
+  };
+}
+const ServerComponentPlugin = /*#__PURE__*/createPlugin({
+  tag: "dom-expressions/server-component",
+  test(value) {
+    return typeof value === "function" && SERVER_COMPONENT in value;
+  },
+  parse: {
+    sync: parseServerComponent,
+    async async(value, ctx) {
+      return {
+        id: await ctx.parse(value[SERVER_COMPONENT]),
+        address: await ctx.parse(value[SERVER_COMPONENT_ADDRESS])
+      };
+    },
+    stream: parseServerComponent
+  },
+  serialize(node, ctx) {
+    return "self._$SC.r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
+  },
+  deserialize(node, ctx) {
+    const id = ctx.deserialize(node.id);
+    ctx.deserialize(node.address);
+    return globalThis._$SC.r(id);
+  }
+});
+function flightCodec(codec) {
+  const plugins = codec && codec.plugins || [];
+  for (const plugin of plugins) {
+    if (plugin && plugin.tag === "dom-expressions/server-component") return codec;
+  }
+  return {
+    ...codec,
+    plugins: [...plugins, ServerComponentPlugin]
+  };
+}
 
 function serverOwned(render) {
   return NoHydration ? NoHydration({
@@ -1163,6 +1387,9 @@ function serverOwned(render) {
     }
   }) : render();
 }
+function serverComponentScope(render) {
+  return runInServerComponentScope ? runInServerComponentScope(render) : render();
+}
 function createFrameSink(emit, frame) {
   const {
     id,
@@ -1344,7 +1571,7 @@ function renderToFrameStream(code, options = {}) {
 function renderServerComponent(component, options = {}) {
   return frameStream((sink, frame) => {
     const props = createSlotProps(sink, frame);
-    return () => component(props);
+    return () => serverComponentScope(() => component(props));
   }, options);
 }
 function frameStream(makeCode, options) {
@@ -1537,16 +1764,23 @@ function frameElementOpen(id) {
 }
 const FRAME_ELEMENT_CLOSE = `</${FRAME_TAG}>`;
 function frameTransformDirectResult(value, {
-  id
+  id,
+  args
 }) {
   if (typeof value !== "function") return value;
   const component = value;
   const wrapped = props => [{
     t: frameElementOpen(id)
-  }, serverOwned(() => component(createDocumentSlotProps(props, id))), {
+  },
+  serverOwned(() => {
+    const slotProps = createDocumentSlotProps(props, id);
+    return serverComponentScope(() => component(slotProps));
+  }), {
     t: FRAME_ELEMENT_CLOSE
   }];
   wrapped[SERVER_COMPONENT] = id;
+  wrapped[SERVER_COMPONENT_SOURCE] = component;
+  wrapped[SERVER_COMPONENT_ADDRESS] = frameAddress(id, args);
   return wrapped;
 }
 function resolveRegionHtml(ctx, node) {
@@ -1563,37 +1797,7 @@ function resolveRegionHtml(ctx, node) {
     return out;
   });
 }
-const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("dom-expressions.server-component");
-const ServerComponentPlugin = /*#__PURE__*/createPlugin({
-  tag: "dom-expressions/server-component",
-  test(value) {
-    return typeof value === "function" && SERVER_COMPONENT in value;
-  },
-  parse: {
-    sync(value, ctx) {
-      return {
-        id: ctx.parse(value[SERVER_COMPONENT])
-      };
-    },
-    async async(value, ctx) {
-      return {
-        id: await ctx.parse(value[SERVER_COMPONENT])
-      };
-    },
-    stream(value, ctx) {
-      return {
-        id: ctx.parse(value[SERVER_COMPONENT])
-      };
-    }
-  },
-  serialize(node, ctx) {
-    return "self._$SC.r(" + ctx.serialize(node.id) + ")";
-  },
-  deserialize(node, ctx) {
-    return globalThis._$SC.r(ctx.deserialize(node.id));
-  }
-});
-const SERVER_COMPONENT_BOOTSTRAP = "self._$SC={c:{},r(i){return this.c[i]||(this.c[i]=(p)=>self._$SC.impl(i,p))}};";
+const SERVER_COMPONENT_BOOTSTRAP = "self._$SC={c:{},a:{},r(i,a){a&&(this.a[a]=i,this.reg&&this.reg(a,i));return this.c[i]||(this.c[i]=(p)=>self._$SC.impl(i,p))}};";
 function isServerContent(value) {
   if (value && typeof value === "object") {
     if ("t" in value) return true;
@@ -1702,7 +1906,7 @@ function serverComponentResponse(component, options = {}, init = {}) {
     headers
   });
 }
-function frameTransformResult(event, result) {
+function frameTransformResult(event, result, context) {
   let init;
   if (isResponseEnvelope(result)) {
     const {
@@ -1717,12 +1921,106 @@ function frameTransformResult(event, result) {
     result = value;
   }
   if (typeof result !== "function") return result;
-  const meta = event && event.locals && event.locals.serverFunctionMeta;
+  if (context && context.collectsFlight) return init ? {
+    response: init,
+    value: result
+  } : result;
+  const invocation = getEventServerFunctionInvocation(event);
   return serverComponentResponse(result, {
     frame: {
-      id: meta && meta.id || ""
+      id: invocation && invocation.id || ""
     }
   }, init);
 }
+async function frameTransformFlightResult(event, outcome, context) {
+  const {
+    value,
+    data
+  } = outcome;
+  const regions = [];
+  let serialized = data;
+  if (data && typeof data === "object") {
+    serialized = {};
+    const keys = Object.keys(data);
+    const values = await Promise.all(keys.map(key => data[key]));
+    for (let i = 0; i < keys.length; i++) {
+      const entry = values[i];
+      serialized[keys[i]] = entry;
+      if (typeof entry === "function") {
+        regions.push({
+          id: entry[SERVER_COMPONENT_ADDRESS] || keys[i],
+          component: entry[SERVER_COMPONENT_SOURCE] || entry
+        });
+      }
+    }
+  }
+  const invocation = getEventServerFunctionInvocation(event);
+  const primary = typeof value === "function" ? {
+    id: invocation && invocation.id || "",
+    component: value
+  } : undefined;
+  if (!primary && !regions.length) return undefined;
+  return frameFlightResponse({
+    primary,
+    regions,
+    outcome: {
+      value: primary ? undefined : value,
+      data: serialized
+    },
+    codec: context && context.codec
+  });
+}
+function frameFlightResponse({
+  primary,
+  regions = [],
+  outcome,
+  codec
+}, init = {}) {
+  const frames = primary ? [primary, ...regions] : regions;
+  const headers = new Headers(init.headers);
+  headers.set("Content-Type", "application/x-frame-stream");
+  headers.set(FRAME_STREAM_HEADER, primary ? primary.id : "");
+  headers.set("X-Content-Raw", "1");
+  headers.set(SINGLE_FLIGHT_HEADER, "true");
+  const body = new ReadableStream({
+    async start(controller) {
+      const write = chunk => controller.enqueue(createChunk(JSON.stringify(chunk)));
+      try {
+        for (const {
+          id,
+          component
+        } of frames) {
+          await new Promise(resolve => {
+            renderServerComponent(component, {
+              frame: {
+                id,
+                version: 1
+              }
+            }).pipe({
+              write,
+              end: resolve
+            });
+          });
+        }
+        if (outcome) {
+          const reader = new ChunkReader(serializeStream(outcome, flightCodec(codec)));
+          for (let node = await reader.next(); !node.done; node = await reader.next()) {
+            write({
+              type: "outcome",
+              payload: node.value
+            });
+          }
+        }
+        controller.close();
+      } catch (err) {
+        controller.error(err);
+      }
+    }
+  });
+  return new Response(body, {
+    status: init.status || 200,
+    headers
+  });
+}
 
-export { FRAME_STREAM_HEADER, SERVER_COMPONENT_BOOTSTRAP, ServerComponentPlugin, createFrameSink, frameTransformDirectResult, frameTransformResult, isFrameStreamResponse, renderServerComponent, renderToFrameStream, serverComponentResponse };
+export { FRAME_STREAM_HEADER, SERVER_COMPONENT_BOOTSTRAP, ServerComponentPlugin, createFrameSink, frameTransformDirectResult, frameTransformFlightResult, frameTransformResult, isFrameStreamResponse, renderServerComponent, renderToFrameStream, serverComponentResponse };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.29",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -316,10 +316,10 @@
     "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.27"
+    "solid-js": "^2.0.0-beta.29"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.27"
+    "solid-js": "2.0.0-beta.29"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",