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

package/frames/dist/server.js

@@ -1264,7 +1264,7 @@ function renderToStream(code, options = {}) {
               const styles = collectStreamStyles(key, tracking, headStyles);
               const headOps = error ? null : flushHeadFragment(headRegistry, key);
               if (headOps) emitHeadOps(key, headOps);
-              sink.fragment(key, value !== undefined ? value : " ", {
+              sink.fragment(key, resolveSSRSelectValues(value !== undefined ? value : " "), {
                 styles,
                 revealGroup,
                 error
@@ -1356,7 +1356,7 @@ function renderToStream(code, options = {}) {
     }
     serializeRootAssets();
     const head = renderShellHead(headRegistry, nonce, k => registry.has(k));
-    sink.shell(html, {
+    sink.shell(resolveSSRSelectValues(html), {
       preloads: tracking.emittedAssets,
       inlineStyles: tracking.inlineStyles,
       tasks,
@@ -2152,6 +2152,93 @@ function ssr(t) {
   };
   return result;
 }
+function decodeSSREntities(s) {
+  return s.indexOf("&") < 0 ? s : s.replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&amp;/g, "&");
+}
+const SELECT_VALUE_ATTR = /\svalue="([^"]*)"/;
+function tagEnd(html, i) {
+  for (let j = i + 1; j < html.length; j++) {
+    const c = html.charCodeAt(j);
+    if (c === 34) {
+      j = html.indexOf('"', j + 1);
+      if (j < 0) return -1;
+    } else if (c === 62) return j;
+  }
+  return -1;
+}
+function optionText(html, from) {
+  let t = "";
+  let i = from;
+  for (;;) {
+    const lt = html.indexOf("<", i);
+    if (lt < 0) return t + html.slice(i);
+    t += html.slice(i, lt);
+    if (!html.startsWith("<!--", lt)) return t;
+    const ce = html.indexOf("-->", lt);
+    if (ce < 0) return t;
+    i = ce + 3;
+  }
+}
+function tagIs(html, i, name) {
+  if (!html.startsWith(name, i + 1)) return false;
+  const c = html.charCodeAt(i + 1 + name.length);
+  return c === 32 || c === 62 || c === 9 || c === 10 || c === 13;
+}
+function resolveSSRSelectValues(html) {
+  if (html.indexOf("<select") < 0) return html;
+  let out = "";
+  let idx = 0;
+  let sel = null;
+  let i = html.indexOf("<");
+  while (i >= 0) {
+    let e;
+    if (html.charCodeAt(i + 1) === 33) {
+      e = html.charCodeAt(i + 2) === 45 ? html.indexOf("-->", i) : html.indexOf(">", i);
+      if (e < 0) break;
+      if (html.charCodeAt(i + 2) === 45) e += 2;
+    } else {
+      e = tagEnd(html, i);
+      if (e < 0) break;
+      if (sel) {
+        if (html.startsWith("</select>", i)) {
+          out += html.slice(idx, sel.strip) + html.slice(sel.stripEnd, sel.body);
+          let seg = sel.body;
+          if (!sel.defaulted) {
+            for (let k = 0; k < sel.marks.length; k++) {
+              out += html.slice(seg, sel.marks[k]) + " selected";
+              seg = sel.marks[k];
+            }
+          }
+          out += html.slice(seg, i);
+          idx = i;
+          sel = null;
+        } else if (tagIs(html, i, "option")) {
+          const attrs = html.slice(i + 7, e);
+          if (/\sselected(?=[\s=]|$)/.test(attrs)) sel.defaulted = true;else {
+            const vm = SELECT_VALUE_ATTR.exec(attrs);
+            const value = vm ? decodeSSREntities(vm[1]) : decodeSSREntities(optionText(html, e + 1)).replace(/\s+/g, " ").trim();
+            if (sel.values.includes(value)) sel.marks.push(e);
+          }
+        }
+      } else if (tagIs(html, i, "select")) {
+        const m = SELECT_VALUE_ATTR.exec(html.slice(i, e + 1));
+        if (m) {
+          const bound = decodeSSREntities(m[1]);
+          sel = {
+            values: /\smultiple(?=[\s>=])/.test(html.slice(i, e + 1)) ? bound.split(",") : [bound],
+            strip: i + m.index,
+            stripEnd: i + m.index + m[0].length,
+            body: e + 1,
+            marks: [],
+            defaulted: false
+          };
+        }
+      }
+    }
+    i = html.indexOf("<", e + 1);
+  }
+  return out + html.slice(idx);
+}
 function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
@@ -2283,7 +2370,9 @@ function renderHeadAssets(emittedAssets, inlineStyles, nonce) {
 function serializeFragmentAssets(key, boundaryModules, context, name = key) {
   const map = boundaryModules.get(key);
   if (!map || !Object.keys(map).length) return;
-  context.serialize(name + "_assets", map);
+  context.serialize(name + "_assets", {
+    ...map
+  });
 }
 function propagateBoundaryStyles(childKey, parentKey, tracking) {
   const childStyles = tracking.getBoundaryStyles(childKey);

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.1",
   "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.1"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-rc.0"
+    "@codspeed/vitest-plugin": "^5.4.0",
+    "solid-js": "2.0.0-rc.1"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",

package/serialization/dist/decode.cjs

@@ -79,12 +79,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

@@ -77,12 +77,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

@@ -79,12 +79,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

@@ -78,12 +78,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;
@@ -429,7 +431,7 @@ async function createRequest(base, id, instance, options, meta) {
     [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 = {
@@ -511,6 +513,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, {
@@ -541,6 +548,20 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
   if (response.headers.has(ERROR_HEADER)) {
     throw 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;
 }
 function createServerReference(id, name, base) {
@@ -609,6 +630,131 @@ 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 = () => {
+          if (ended) return;
+          ended = true;
+          emit("closed");
+        };
+        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;
+              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 +786,7 @@ exports.getServerFunctionMetadata = getServerFunctionMetadata;
 exports.getServerFunctionsCodec = getServerFunctionsCodec;
 exports.hasFlashCookie = hasFlashCookie;
 exports.isServerFunction = isServerFunction;
+exports.live = live;
 exports.registerServerReference = registerServerReference;
 exports.serializeString = serializeString;
 exports.subscribeFlightData = subscribeFlightData;

package/server-functions/dist/client.js

@@ -16,6 +16,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);
@@ -136,7 +137,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];
@@ -163,6 +164,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]);
     }
   }
@@ -364,7 +366,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;
@@ -427,7 +429,7 @@ async function createRequest(base, id, instance, options, meta) {
     [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 = {
@@ -509,6 +511,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, {
@@ -539,6 +546,20 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
   if (response.headers.has(ERROR_HEADER)) {
     throw 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;
 }
 function createServerReference(id, name, base) {
@@ -607,6 +628,131 @@ 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 = () => {
+          if (ended) return;
+          ended = true;
+          emit("closed");
+        };
+        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;
+              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");
 }
@@ -614,4 +760,4 @@ function getServerFunctionInvocation() {
   return undefined;
 }
 
-export { ChunkReader, ERROR_HEADER, FLASH_COOKIE, FUNCTION_HEADER, GET, INSTANCE_HEADER, REVALIDATE_HEADER, SINGLE_FLIGHT_HEADER, clearFlashCookie, configureServerFunctionsClient, createChunk, createServerReference, decodeErrorHeaderValue, decodeResponse, decodeResponsePayload, deserializeStream, encodeErrorHeaderValue, frameAddress, getFlightDataConsumer, getServerFunctionInvocation, getServerFunctionMetadata, getServerFunctionsCodec, hasFlashCookie, isServerFunction, registerServerReference, serializeString, subscribeFlightData, withMeta };
+export { ChunkReader, ERROR_HEADER, FLASH_COOKIE, FUNCTION_HEADER, GET, INSTANCE_HEADER, REVALIDATE_HEADER, SINGLE_FLIGHT_HEADER, clearFlashCookie, configureServerFunctionsClient, createChunk, createServerReference, decodeErrorHeaderValue, decodeResponse, decodeResponsePayload, deserializeStream, encodeErrorHeaderValue, frameAddress, getFlightDataConsumer, getServerFunctionInvocation, getServerFunctionMetadata, getServerFunctionsCodec, hasFlashCookie, isServerFunction, live, registerServerReference, serializeString, subscribeFlightData, withMeta };