@solidjs/web 2.0.0-beta.22 → 2.0.0-beta.23

package/frames/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@solidjs/web/frames",
+  "main": "./dist/server.cjs",
+  "module": "./dist/server.js",
+  "types": "../types/frames/server.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "browser": {
+        "import": {
+          "types": "../types/frames/client.d.ts",
+          "default": "./dist/client.js"
+        },
+        "require": {
+          "types": "../types-cjs/frames/client.d.cts",
+          "default": "./dist/client.cjs"
+        }
+      },
+      "import": {
+        "types": "../types/frames/server.d.ts",
+        "default": "./dist/server.js"
+      },
+      "require": {
+        "types": "../types-cjs/frames/server.d.cts",
+        "default": "./dist/server.cjs"
+      }
+    }
+  }
+}

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.22",
+  "version": "2.0.0-beta.23",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -34,7 +34,9 @@
     "serialization/types-cjs",
     "serialization/package.json",
     "server-functions/dist",
-    "server-functions/package.json"
+    "server-functions/package.json",
+    "frames/dist",
+    "frames/package.json"
   ],
   "exports": {
     ".": {
@@ -217,6 +219,76 @@
         "default": "./server-functions/dist/client.cjs"
       }
     },
+    "./frames": {
+      "worker": {
+        "import": {
+          "types": "./types/frames/server.d.ts",
+          "default": "./frames/dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/frames/server.d.cts",
+          "default": "./frames/dist/server.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./types/frames/client.d.ts",
+          "default": "./frames/dist/client.js"
+        },
+        "require": {
+          "types": "./types-cjs/frames/client.d.cts",
+          "default": "./frames/dist/client.cjs"
+        }
+      },
+      "deno": {
+        "import": {
+          "types": "./types/frames/server.d.ts",
+          "default": "./frames/dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/frames/server.d.cts",
+          "default": "./frames/dist/server.cjs"
+        }
+      },
+      "node": {
+        "import": {
+          "types": "./types/frames/server.d.ts",
+          "default": "./frames/dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/frames/server.d.cts",
+          "default": "./frames/dist/server.cjs"
+        }
+      },
+      "import": {
+        "types": "./types/frames/client.d.ts",
+        "default": "./frames/dist/client.js"
+      },
+      "require": {
+        "types": "./types-cjs/frames/client.d.cts",
+        "default": "./frames/dist/client.cjs"
+      }
+    },
+    "./frames/server": {
+      "import": {
+        "types": "./types/frames/server.d.ts",
+        "default": "./frames/dist/server.js"
+      },
+      "require": {
+        "types": "./types-cjs/frames/server.d.cts",
+        "default": "./frames/dist/server.cjs"
+      }
+    },
+    "./frames/client": {
+      "import": {
+        "types": "./types/frames/client.d.ts",
+        "default": "./frames/dist/client.js"
+      },
+      "require": {
+        "types": "./types-cjs/frames/client.d.cts",
+        "default": "./frames/dist/client.cjs"
+      }
+    },
     "./types/*": "./types/*"
   },
   "dependencies": {
@@ -224,17 +296,17 @@
     "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.22"
+    "solid-js": "^2.0.0-beta.23"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.22"
+    "solid-js": "2.0.0-beta.23"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",
     "build:clean": "rimraf dist/",
     "build:js": "rollup -c",
     "link": "symlink-dir . node_modules/@solidjs/web",
-    "types": "npm-run-all -nl types:clean types:copy-jsx types:web types:copy-web types:web-storage types:copy-serialization types:copy-server-functions types:cjs",
+    "types": "npm-run-all -nl types:clean types:copy-jsx types:web types:copy-web types:web-storage types:copy-serialization types:copy-server-functions types:copy-frames types:cjs",
     "types:clean": "rimraf types/ types-cjs/ storage/types/ storage/types-cjs/ serialization/types/ serialization/types-cjs/",
     "types:copy-jsx": "ncp ../../node_modules/@dom-expressions/runtime/src/jsx.d.ts ./src/jsx.d.ts && ncp ../../node_modules/@dom-expressions/runtime/src/jsx-properties.d.ts ./src/jsx-properties.d.ts && dom-expressions-jsx-types --input ./src/jsx.d.ts --element \"SolidElement | Node | ArrayElement\" --import 'import type { Element as SolidElement } from \"solid-js\";'",
     "types:web": "tsc --project ./tsconfig.build.json",
@@ -242,6 +314,7 @@
     "types:web-storage": "tsc --project ./storage/tsconfig.build.json",
     "types:copy-serialization": "node -e \"fs.mkdirSync('./serialization/types', { recursive: true }); fs.copyFileSync('../../node_modules/@dom-expressions/runtime/src/serializer.d.ts', './serialization/types/index.d.ts');\"",
     "types:copy-server-functions": "node -e \"fs.mkdirSync('./types/server-functions', { recursive: true }); for (const f of ['shared', 'client', 'server']) fs.copyFileSync('../../node_modules/@dom-expressions/runtime/src/server-functions/' + f + '.d.ts', './types/server-functions/' + f + '.d.ts');\"",
+    "types:copy-frames": "node -e \"fs.mkdirSync('./types/frames', { recursive: true }); for (const f of ['frame-client', 'frame-transport', 'frame-sink', 'serializer']) fs.copyFileSync('../../node_modules/@dom-expressions/runtime/src/' + f + '.d.ts', './types/frames/' + f + '.d.ts'); for (const f of ['client', 'server']) fs.copyFileSync('./frames/types/' + f + '.d.ts', './types/frames/' + f + '.d.ts');\"",
     "types:cjs": "node ../../scripts/sync-dual-types.mjs ./types ./types-cjs ./storage/types ./storage/types-cjs ./serialization/types ./serialization/types-cjs",
     "test": "vitest run && vitest run --config vite.config.server.mjs && vitest run --config vite.config.hydrate.mjs",
     "test:server": "vitest run --config vite.config.server.mjs",

package/serialization/dist/serialization.cjs

@@ -73,10 +73,93 @@ function createJSONDeserializer(options) {
     });
   };
 }
+function createJSONSerializer({
+  onData,
+  onDone,
+  onError,
+  plugins,
+  disabledFeatures,
+  depthLimit
+}) {
+  const resolved = resolveCodecOptions({
+    plugins,
+    disabledFeatures,
+    depthLimit
+  });
+  const refs = new Map();
+  const cancels = new Set();
+  let pendingWrites = 0;
+  let flushed = false;
+  let done = false;
+  const maybeDone = () => {
+    if (flushed && pendingWrites === 0 && !done) {
+      done = true;
+      onDone && onDone();
+    }
+  };
+  return {
+    write(key, value) {
+      if (flushed) return;
+      pendingWrites++;
+      let settled = false;
+      let cancel = null;
+      const stream = seroval.toCrossJSONStream(value, {
+        refs,
+        plugins: resolved.plugins,
+        disabledFeatures: resolved.disabledFeatures,
+        onParse(node, initial) {
+          onData({
+            key,
+            node,
+            initial
+          });
+        },
+        onError,
+        onDone() {
+          settled = true;
+          if (cancel) cancels.delete(cancel);
+          pendingWrites--;
+          maybeDone();
+        }
+      });
+      if (!settled) {
+        cancel = stream;
+        cancels.add(cancel);
+      }
+    },
+    flush() {
+      flushed = true;
+      maybeDone();
+    },
+    close() {
+      flushed = true;
+      for (const cancel of cancels) cancel();
+      cancels.clear();
+    }
+  };
+}
+function createJSONDataTable(options) {
+  const deserialize = createJSONDeserializer(options);
+  const table = new Map();
+  return {
+    apply(record) {
+      const value = deserialize(record.node);
+      if (record.initial) table.set(record.key, value);
+    },
+    get(key) {
+      return table.get(key);
+    },
+    resolve(ref) {
+      return table.get(ref.$ref);
+    }
+  };
+}
 
 exports.DEFAULT_WEB_PLUGINS = DEFAULT_WEB_PLUGINS;
 exports.createHydrationSerializer = createHydrationSerializer;
+exports.createJSONDataTable = createJSONDataTable;
 exports.createJSONDeserializer = createJSONDeserializer;
+exports.createJSONSerializer = createJSONSerializer;
 exports.createSerializer = createSerializer;
 exports.getLocalHeaderScript = getLocalHeaderScript;
 exports.resolveSerializerPlugins = resolveSerializerPlugins;

package/serialization/dist/serialization.js

@@ -71,5 +71,86 @@ function createJSONDeserializer(options) {
     });
   };
 }
+function createJSONSerializer({
+  onData,
+  onDone,
+  onError,
+  plugins,
+  disabledFeatures,
+  depthLimit
+}) {
+  const resolved = resolveCodecOptions({
+    plugins,
+    disabledFeatures,
+    depthLimit
+  });
+  const refs = new Map();
+  const cancels = new Set();
+  let pendingWrites = 0;
+  let flushed = false;
+  let done = false;
+  const maybeDone = () => {
+    if (flushed && pendingWrites === 0 && !done) {
+      done = true;
+      onDone && onDone();
+    }
+  };
+  return {
+    write(key, value) {
+      if (flushed) return;
+      pendingWrites++;
+      let settled = false;
+      let cancel = null;
+      const stream = toCrossJSONStream(value, {
+        refs,
+        plugins: resolved.plugins,
+        disabledFeatures: resolved.disabledFeatures,
+        onParse(node, initial) {
+          onData({
+            key,
+            node,
+            initial
+          });
+        },
+        onError,
+        onDone() {
+          settled = true;
+          if (cancel) cancels.delete(cancel);
+          pendingWrites--;
+          maybeDone();
+        }
+      });
+      if (!settled) {
+        cancel = stream;
+        cancels.add(cancel);
+      }
+    },
+    flush() {
+      flushed = true;
+      maybeDone();
+    },
+    close() {
+      flushed = true;
+      for (const cancel of cancels) cancel();
+      cancels.clear();
+    }
+  };
+}
+function createJSONDataTable(options) {
+  const deserialize = createJSONDeserializer(options);
+  const table = new Map();
+  return {
+    apply(record) {
+      const value = deserialize(record.node);
+      if (record.initial) table.set(record.key, value);
+    },
+    get(key) {
+      return table.get(key);
+    },
+    resolve(ref) {
+      return table.get(ref.$ref);
+    }
+  };
+}
 
-export { DEFAULT_WEB_PLUGINS, createHydrationSerializer, createJSONDeserializer, createSerializer, getLocalHeaderScript, resolveSerializerPlugins, serializeJSON };
+export { DEFAULT_WEB_PLUGINS, createHydrationSerializer, createJSONDataTable, createJSONDeserializer, createJSONSerializer, createSerializer, getLocalHeaderScript, resolveSerializerPlugins, serializeJSON };

package/serialization/types/index.d.ts

@@ -137,3 +137,15 @@ export function serializeJSON(value: unknown, options: JSONSerializeOptions): ()
  * settles the async values referenced inside it.
  */
 export function createJSONDeserializer(options?: JSONCodecOptions): <T>(node: SerovalNode) => T;
+
+/**
+ * A resident, response-scoped decode table over the keyed JSON codec: apply
+ * each frame `data` chunk with `apply`, resolve `{ $ref }` slot args with
+ * `resolve`. The frames client host wires one per response
+ * (`applyData: c => table.apply(c)`).
+ */
+export interface JSONDataTable {
+  apply(chunk: { key?: string; node?: unknown; initial?: boolean }): void;
+  resolve<T = unknown>(ref: { $ref: string }): T;
+}
+export function createJSONDataTable(options?: JSONCodecOptions): JSONDataTable;

package/serialization/types-cjs/index.d.cts

@@ -137,3 +137,15 @@ export function serializeJSON(value: unknown, options: JSONSerializeOptions): ()
  * settles the async values referenced inside it.
  */
 export function createJSONDeserializer(options?: JSONCodecOptions): <T>(node: SerovalNode) => T;
+
+/**
+ * A resident, response-scoped decode table over the keyed JSON codec: apply
+ * each frame `data` chunk with `apply`, resolve `{ $ref }` slot args with
+ * `resolve`. The frames client host wires one per response
+ * (`applyData: c => table.apply(c)`).
+ */
+export interface JSONDataTable {
+  apply(chunk: { key?: string; node?: unknown; initial?: boolean }): void;
+  resolve<T = unknown>(ref: { $ref: string }): T;
+}
+export function createJSONDataTable(options?: JSONCodecOptions): JSONDataTable;

package/server-functions/dist/client.cjs

@@ -23,19 +23,6 @@ function resolveCodecOptions({
     depthLimit: depthLimit === undefined ? JSON_CODEC_DEPTH_LIMIT : depthLimit
   };
 }
-function serializeJSON(value, {
-  onParse,
-  onDone,
-  onError,
-  ...codecOptions
-}) {
-  return seroval.toCrossJSONStream(value, {
-    onParse,
-    onDone,
-    onError,
-    ...resolveCodecOptions(codecOptions)
-  });
-}
 function createJSONDeserializer(options) {
   const refs = new Map();
   const resolved = resolveCodecOptions(options);
@@ -53,9 +40,6 @@ const codecConfig = {
 function configureServerFunctionsCodec(codec) {
   codecConfig.codec = codec;
 }
-function getServerFunctionsCodec() {
-  return codecConfig.codec;
-}
 const flightConfig = {
   consumer: undefined
 };
@@ -122,7 +106,8 @@ const BodyFormat = {
   Blob: "4",
   File: "5",
   ArrayBuffer: "6",
-  Uint8Array: "7"
+  Uint8Array: "7",
+  Json: "8"
 };
 function getHeadersAndBody(body) {
   switch (true) {
@@ -192,6 +177,8 @@ async function extractBody(source, codecOptions) {
   switch (true) {
     case format === BodyFormat.Serialized:
       return await deserializeStream(clone, codecOptions);
+    case format === BodyFormat.Json:
+      return JSON.parse(await clone.text());
     case format === BodyFormat.String:
       return await clone.text();
     case format === BodyFormat.File:
@@ -214,17 +201,6 @@ async function extractBody(source, codecOptions) {
   }
   return undefined;
 }
-function createChunk(data) {
-  const encodeData = new TextEncoder().encode(data);
-  const bytes = encodeData.length;
-  const baseHex = bytes.toString(16);
-  const totalHex = "00000000".substring(0, 8 - baseHex.length) + baseHex;
-  const head = new TextEncoder().encode(`;0x${totalHex};`);
-  const chunk = new Uint8Array(12 + bytes);
-  chunk.set(head);
-  chunk.set(encodeData, 12);
-  return chunk;
-}
 class ChunkReader {
   constructor(stream) {
     this.reader = stream.getReader();
@@ -281,28 +257,6 @@ class ChunkReader {
     }
   }
 }
-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);
-        }
-      });
-    }
-  });
-}
-async function serializeString(value, codecOptions) {
-  const response = new Response(serializeStream(value, codecOptions));
-  return await response.text();
-}
 async function deserializeStream(source, codecOptions) {
   if (!source.body) {
     throw new Error("missing body");
@@ -326,16 +280,43 @@ async function decodeResponse(response, codecOptions) {
 
 const config = {
   endpoint: "/_server",
-  prepareRequest: undefined
+  prepareRequest: undefined,
+  responseHandler: undefined,
+  serializeArgs: undefined
 };
+function isJSONSafe(value) {
+  if (value === null) return true;
+  const t = typeof value;
+  if (t === "string" || t === "boolean") return true;
+  if (t === "number") return Number.isFinite(value);
+  if (t !== "object") return false;
+  if (Array.isArray(value)) {
+    for (const v of value) if (!isJSONSafe(v)) return false;
+    return true;
+  }
+  const proto = Object.getPrototypeOf(value);
+  if (proto !== Object.prototype && proto !== null) return false;
+  for (const k in value) if (!isJSONSafe(value[k])) return false;
+  return true;
+}
+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 the server-functions rich-args entry) 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.");
+  }
+  return config.serializeArgs(args);
+}
 function configureServerFunctionsClient({
   endpoint,
   codec,
-  prepareRequest
+  prepareRequest,
+  responseHandler,
+  serializeArgs
 } = {}) {
   if (endpoint !== undefined) config.endpoint = endpoint;
   if (codec !== undefined) configureServerFunctionsCodec(codec);
   if (prepareRequest !== undefined) config.prepareRequest = prepareRequest;
+  if (responseHandler !== undefined) config.responseHandler = responseHandler;
+  if (serializeArgs !== undefined) config.serializeArgs = serializeArgs;
 }
 let INSTANCE = 0;
 async function createRequest(base, id, instance, options, meta) {
@@ -377,9 +358,20 @@ async function initializeResponse(base, id, instance, options, args, meta) {
       }, meta);
     }
   }
+  if (isJSONSafe(args)) {
+    return createRequest(base, id, instance, {
+      ...options,
+      body: JSON.stringify(args),
+      headers: {
+        ...options.headers,
+        "Content-Type": "application/json",
+        [BODY_FORMAT_HEADER]: BodyFormat.Json
+      }
+    }, meta);
+  }
   return createRequest(base, id, instance, {
     ...options,
-    body: await serializeString(args, getServerFunctionsCodec()),
+    body: await serializeArguments(args),
     headers: {
       ...options.headers,
       "Content-Type": "text/plain",
@@ -389,7 +381,21 @@ async function initializeResponse(base, id, instance, options, args, meta) {
 }
 async function fetchServerFunction(base, id, options, args, meta) {
   const instance = `server-function:${INSTANCE++}`;
+  const handler = config.responseHandler;
+  const context = handler && handler.capture ? handler.capture({
+    id,
+    meta
+  }) : undefined;
   const response = await initializeResponse(base, id, instance, options, args, meta);
+  if (handler) {
+    const handled = handler.handle(response, {
+      id,
+      meta,
+      args,
+      context
+    });
+    if (handled !== undefined) return handled;
+  }
   if (response.headers.has(SINGLE_FLIGHT_HEADER)) {
     const consumer = getFlightDataConsumer();
     if (consumer) {
@@ -416,7 +422,18 @@ function createServerReference(id, name, base) {
   const metadata = name === undefined ? {} : {
     name
   };
-  const fn = (...args) => fetchServerFunction(base || config.endpoint, id, {}, args, metadata);
+  const 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(base || config.endpoint, id, {}, args, metadata);
+  };
   fn[SERVER_FUNCTION_METADATA] = metadata;
   return new Proxy(fn, {
     get(target, prop) {
@@ -437,9 +454,19 @@ function GET(fn) {
     ...getServerFunctionMetadata(fn)
   };
   const wrapped = async (...args) => {
+    const handler = config.responseHandler;
+    if (handler && handler.intercept) {
+      const hit = handler.intercept({
+        id,
+        meta: metadata,
+        args
+      });
+      if (hit !== undefined) return hit;
+    }
     let base = `${config.endpoint}?id=${encodeURIComponent(id)}`;
     if (args.length) {
-      base += `&args=${encodeURIComponent(await serializeString(args, getServerFunctionsCodec()))}`;
+      const encoded = isJSONSafe(args) ? JSON.stringify(args) : await serializeArguments(args);
+      base += `&args=${encodeURIComponent(encoded)}`;
     }
     return fetchServerFunction(base, id, {
       method: "GET"