@solidjs/web 2.0.0-rc.0 → 2.0.0-rc.2

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-rc.0",
+  "version": "2.0.0-rc.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -378,10 +378,11 @@
     "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-rc.0"
+    "solid-js": "^2.0.0-rc.2"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-rc.0"
+    "@codspeed/vitest-plugin": "^5.4.0",
+    "solid-js": "2.0.0-rc.2"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",

package/serialization/dist/decode.cjs

@@ -8,6 +8,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -20,9 +23,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -36,9 +40,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -56,6 +61,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = seroval.createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
 web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
 web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin,
@@ -79,12 +96,24 @@ function resolveCodecOptions({
 function createJSONDeserializer(options) {
   const refs = new Map();
   const resolved = resolveCodecOptions(options);
-  return function deserializeJSONChunk(node) {
+  function deserializeJSONChunk(node) {
     return seroval.fromCrossJSON(node, {
       refs,
       ...resolved
     });
+  }
+  deserializeJSONChunk.abort = function abort(error) {
+    for (const value of refs.values()) {
+      if (value === null || typeof value !== "object") continue;
+      if (value.__SEROVAL_STREAM__) {
+        value.throw(error);
+      } else if (typeof value.s === "function" && typeof value.f === "function" && value.p instanceof Promise) {
+        value.p.then(undefined, () => {});
+        value.f(error);
+      }
+    }
   };
+  return deserializeJSONChunk;
 }
 function createJSONDataTable(options) {
   const deserialize = createJSONDeserializer(options);

package/serialization/dist/decode.js

@@ -1,4 +1,4 @@
-import { Feature, fromCrossJSON } from 'seroval';
+import { Feature, fromCrossJSON, createStream } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
 const STATE = Symbol.for("dom-expressions.container-trace-state");
@@ -6,6 +6,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -18,9 +21,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -34,9 +38,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -54,6 +59,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
 CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
 FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin,
@@ -77,12 +94,24 @@ function resolveCodecOptions({
 function createJSONDeserializer(options) {
   const refs = new Map();
   const resolved = resolveCodecOptions(options);
-  return function deserializeJSONChunk(node) {
+  function deserializeJSONChunk(node) {
     return fromCrossJSON(node, {
       refs,
       ...resolved
     });
+  }
+  deserializeJSONChunk.abort = function abort(error) {
+    for (const value of refs.values()) {
+      if (value === null || typeof value !== "object") continue;
+      if (value.__SEROVAL_STREAM__) {
+        value.throw(error);
+      } else if (typeof value.s === "function" && typeof value.f === "function" && value.p instanceof Promise) {
+        value.p.then(undefined, () => {});
+        value.f(error);
+      }
+    }
   };
+  return deserializeJSONChunk;
 }
 function createJSONDataTable(options) {
   const deserialize = createJSONDeserializer(options);

package/serialization/dist/serialization.cjs

@@ -8,6 +8,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -20,9 +23,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -36,9 +40,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -56,6 +61,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = seroval.createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
 web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
 web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin,
@@ -79,12 +96,24 @@ function resolveCodecOptions({
 function createJSONDeserializer(options) {
   const refs = new Map();
   const resolved = resolveCodecOptions(options);
-  return function deserializeJSONChunk(node) {
+  function deserializeJSONChunk(node) {
     return seroval.fromCrossJSON(node, {
       refs,
       ...resolved
     });
+  }
+  deserializeJSONChunk.abort = function abort(error) {
+    for (const value of refs.values()) {
+      if (value === null || typeof value !== "object") continue;
+      if (value.__SEROVAL_STREAM__) {
+        value.throw(error);
+      } else if (typeof value.s === "function" && typeof value.f === "function" && value.p instanceof Promise) {
+        value.p.then(undefined, () => {});
+        value.f(error);
+      }
+    }
   };
+  return deserializeJSONChunk;
 }
 function createJSONDataTable(options) {
   const deserialize = createJSONDeserializer(options);

package/serialization/dist/serialization.js

@@ -1,4 +1,4 @@
-import { Feature, fromCrossJSON, toCrossJSONStream, Serializer, getCrossReferenceHeader } from 'seroval';
+import { Feature, fromCrossJSON, createStream, toCrossJSONStream, Serializer, getCrossReferenceHeader } from 'seroval';
 export { OpaqueReference, createPlugin } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
@@ -7,6 +7,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -19,9 +22,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -35,9 +39,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -55,6 +60,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
 CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
 FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin,
@@ -78,12 +95,24 @@ function resolveCodecOptions({
 function createJSONDeserializer(options) {
   const refs = new Map();
   const resolved = resolveCodecOptions(options);
-  return function deserializeJSONChunk(node) {
+  function deserializeJSONChunk(node) {
     return fromCrossJSON(node, {
       refs,
       ...resolved
     });
+  }
+  deserializeJSONChunk.abort = function abort(error) {
+    for (const value of refs.values()) {
+      if (value === null || typeof value !== "object") continue;
+      if (value.__SEROVAL_STREAM__) {
+        value.throw(error);
+      } else if (typeof value.s === "function" && typeof value.f === "function" && value.p instanceof Promise) {
+        value.p.then(undefined, () => {});
+        value.f(error);
+      }
+    }
   };
+  return deserializeJSONChunk;
 }
 function createJSONDataTable(options) {
   const deserialize = createJSONDeserializer(options);

package/server-functions/dist/client.cjs

@@ -18,6 +18,7 @@ function withMeta(fn, meta) {
   Object.assign(metadata, meta);
   return fn;
 }
+const LIVE_SOURCE = Symbol.for("solid.LiveSource");
 const SERVER_FUNCTION_RPC = Symbol.for("solid.ServerFunctionRPC");
 function provideServerFunctionRPC(rpc) {
   globalThis[SERVER_FUNCTION_RPC] || (globalThis[SERVER_FUNCTION_RPC] = rpc);
@@ -138,7 +139,7 @@ const BodyFormat = {
   Uint8Array: "7",
   Json: "8"
 };
-const JSON_SAFE_DEPTH_LIMIT = 10000;
+const JSON_SAFE_DEPTH_LIMIT = 4096;
 const EXIT = {};
 function isJSONSafe(value) {
   const stack = [value];
@@ -165,6 +166,7 @@ function isJSONSafe(value) {
     } else {
       const proto = Object.getPrototypeOf(v);
       if (proto !== Object.prototype && proto !== null) return false;
+      if (Symbol.asyncIterator in v || Symbol.iterator in v) return false;
       for (const k in v) stack.push(v[k]);
     }
   }
@@ -366,7 +368,7 @@ async function deserializeStream(source, codecOptions) {
     function interpretChunk(chunk) {
       return deserializeChunk(JSON.parse(chunk));
     }
-    void reader.drain(interpretChunk);
+    reader.drain(interpretChunk).then(() => deserializeChunk.abort(new Error("Server function stream ended unexpectedly.")), error => deserializeChunk.abort(error));
     return interpretChunk(result.value);
   }
   return undefined;
@@ -394,6 +396,30 @@ const config = {
   responseHandler: undefined,
   serializeArgs: undefined
 };
+const CALL_OBSERVERS = new Set();
+function notifyCallObservers(type, id, instance, value, meta) {
+  if (CALL_OBSERVERS.size === 0) return;
+  const field = type === "request" ? "request" : "response";
+  const time = performance.now();
+  for (const observer of new Set(CALL_OBSERVERS)) {
+    try {
+      observer({
+        type,
+        id,
+        instance,
+        [field]: value.clone(),
+        meta,
+        time
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+function observeServerFunctionCalls(observer) {
+  CALL_OBSERVERS.add(observer);
+  return () => CALL_OBSERVERS.delete(observer);
+}
 function serializeArguments(args) {
   if (!config.serializeArgs) {
     throw new Error("Server function arguments are sent as JSON by default and these " + "arguments are not JSON-serializable. Call enableRichArguments() " + '(from "@solidjs/web/server-functions/rich-args") once at startup ' + "to send Dates, Maps, Sets, typed arrays, etc. through the codec — " + "or pass a single Blob/FormData/File argument, which has a native " + "HTTP encoding.");
@@ -423,13 +449,18 @@ function provideRPC() {
     decodeResponse
   });
 }
+function serverFunctionFailure(response, value) {
+  const error = value ?? new Error(`Server function call failed with status ${response.status}`);
+  if (error instanceof Error && !("status" in error)) error.status = response.status;
+  return error;
+}
 async function createRequest(base, id, instance, options, meta) {
   const headers = {
     ...options.headers,
     [FUNCTION_HEADER]: id,
     [INSTANCE_HEADER]: instance
   };
-  if (getFlightDataConsumer() && (!options.method || options.method.toUpperCase() !== "GET")) {
+  if (getFlightDataConsumer() && !options.read && (!options.method || options.method.toUpperCase() !== "GET")) {
     headers[SINGLE_FLIGHT_HEADER] = "true";
   }
   let init = {
@@ -443,7 +474,12 @@ async function createRequest(base, id, instance, options, meta) {
       meta
     })) || init;
   }
-  return fetch(base, init);
+  if (CALL_OBSERVERS.size === 0) return fetch(base, init);
+  const request = new Request(new URL(base, globalThis.location?.href || "http://localhost"), init);
+  notifyCallObservers("request", id, instance, request, meta);
+  const response = await fetch(request);
+  notifyCallObservers("response", id, instance, response, meta);
+  return response;
 }
 async function initializeResponse(base, id, instance, options, args, meta) {
   if (args.length === 0) {
@@ -511,6 +547,11 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
     id,
     meta
   }) : undefined;
+  const controller = options.signal ? undefined : new AbortController();
+  if (controller) options = {
+    ...options,
+    signal: controller.signal
+  };
   const response = await initializeResponse(base, id, instance, options, args, meta);
   if (handler) {
     const handled = handler.handle(response, {
@@ -521,6 +562,7 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
     });
     if (handled !== undefined) return handled;
   }
+  const failed = response.headers.has(ERROR_HEADER) || response.status >= 500;
   if (response.headers.has(SINGLE_FLIGHT_HEADER)) {
     const consumer = getFlightDataConsumer();
     if (consumer) {
@@ -528,8 +570,8 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
       await consumer(payload.data, {
         response
       });
-      if (response.headers.has(ERROR_HEADER) && !response.headers.has("Location") && !response.headers.has(REVALIDATE_HEADER)) {
-        throw payload.value;
+      if (failed && !response.headers.has("Location") && !response.headers.has(REVALIDATE_HEADER)) {
+        throw serverFunctionFailure(response, payload.value);
       }
       return payload.value;
     }
@@ -538,8 +580,22 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
     return response;
   }
   const result = await decodeResponse(response.clone());
-  if (response.headers.has(ERROR_HEADER)) {
-    throw result;
+  if (failed) {
+    throw serverFunctionFailure(response, result);
+  }
+  if (controller && result?.[Symbol.asyncIterator]) {
+    return {
+      [Symbol.asyncIterator]() {
+        const it = result[Symbol.asyncIterator]();
+        return {
+          next: () => it.next(),
+          return: value => (controller.abort(), Promise.resolve({
+            done: true,
+            value
+          }))
+        };
+      }
+    };
   }
   return result;
 }
@@ -609,6 +665,136 @@ function GET(fn) {
     method: "GET"
   });
 }
+function live(fn) {
+  if (!isServerFunction(fn)) {
+    throw new Error("live expects a server function reference");
+  }
+  const id = fn.id;
+  const metadata = {
+    ...getServerFunctionMetadata(fn),
+    live: true
+  };
+  const wrapped = (...args) => {
+    const iterable = {
+      [LIVE_SOURCE]: true,
+      [Symbol.asyncIterator]() {
+        let it;
+        let connected = false;
+        let attempts = 0;
+        let stopped = false;
+        let ended = false;
+        let timer, wake;
+        const DONE = {
+          done: true,
+          value: undefined
+        };
+        const emit = (state, error) => {
+          try {
+            iterable.onstatus && iterable.onstatus(state, error);
+          } catch {}
+        };
+        const emitClosed = error => {
+          if (ended) return;
+          ended = true;
+          emit("closed", error);
+        };
+        const closeIt = value => {
+          const current = it;
+          it = undefined;
+          if (current) {
+            try {
+              const r = current.return && current.return(value);
+              if (r && typeof r.then === "function") r.then(undefined, () => {});
+            } catch {}
+          }
+        };
+        const callOnce = () => {
+          if (metadata.method === "GET") return fn(...args);
+          const handler = config.responseHandler;
+          if (handler && handler.intercept) {
+            const hit = handler.intercept({
+              id,
+              meta: metadata,
+              args
+            });
+            if (hit !== undefined) return hit;
+          }
+          return fetchServerFunction(fn.url, id, {
+            read: true
+          }, args, metadata, args);
+        };
+        const pull = async () => {
+          while (!stopped) {
+            try {
+              if (!it) {
+                const result = await callOnce();
+                connected = true;
+                it = result !== null && typeof result === "object" && result[Symbol.asyncIterator] ? result[Symbol.asyncIterator]() : async function* () {
+                  yield result;
+                }();
+                if (stopped) {
+                  closeIt();
+                  return DONE;
+                }
+                emit("connected");
+              }
+              const r = await it.next();
+              if (r.done) {
+                emitClosed();
+                return DONE;
+              }
+              if (stopped) return DONE;
+              attempts = 0;
+              return r;
+            } catch (error) {
+              if (!connected) throw error;
+              if (error !== null && typeof error === "object" && typeof error.status === "number" && error.status >= 400 && error.status < 500) {
+                stopped = true;
+                emitClosed(error);
+                throw error;
+              }
+              it = undefined;
+              emit("reconnecting", error);
+              await new Promise(resolve => {
+                wake = resolve;
+                timer = setTimeout(resolve, Math.min(500 * 2 ** attempts++, 10000));
+                if (typeof addEventListener === "function") addEventListener("online", resolve, {
+                  once: true
+                });
+              });
+              clearTimeout(timer);
+              if (typeof removeEventListener === "function") removeEventListener("online", wake);
+              timer = wake = undefined;
+            }
+          }
+          return DONE;
+        };
+        return {
+          next: () => pull(),
+          return(value) {
+            stopped = true;
+            if (timer !== undefined) clearTimeout(timer);
+            if (wake) wake();
+            closeIt(value);
+            emitClosed();
+            return Promise.resolve({
+              done: true,
+              value
+            });
+          }
+        };
+      }
+    };
+    return iterable;
+  };
+  wrapped[SERVER_FUNCTION_METADATA] = metadata;
+  wrapped.id = id;
+  Object.defineProperty(wrapped, "url", {
+    get: () => fn.url,
+    configurable: true
+  });
+  return wrapped;
+}
 function registerServerReference() {
   throw new Error("registerServerReference must not be called in the client build");
 }
@@ -640,6 +826,8 @@ exports.getServerFunctionMetadata = getServerFunctionMetadata;
 exports.getServerFunctionsCodec = getServerFunctionsCodec;
 exports.hasFlashCookie = hasFlashCookie;
 exports.isServerFunction = isServerFunction;
+exports.live = live;
+exports.observeServerFunctionCalls = observeServerFunctionCalls;
 exports.registerServerReference = registerServerReference;
 exports.serializeString = serializeString;
 exports.subscribeFlightData = subscribeFlightData;