@solidjs/web 2.0.0-beta.2 → 2.0.0-beta.20

package/package.json

@@ -1,99 +1,254 @@
 {
   "name": "@solidjs/web",
-  "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.2",
+  "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
+  "version": "2.0.0-beta.20",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/solidjs/solid-web"
+    "url": "git+https://github.com/solidjs/solid.git",
+    "directory": "packages/solid-web"
   },
   "publishConfig": {
     "access": "public"
   },
   "main": "./dist/server.cjs",
   "module": "./dist/server.js",
-  "unpkg": "./dist/web.cjs",
+  "unpkg": "./dist/web.js",
+  "jsdelivr": "./dist/web.js",
   "types": "./types/index.d.ts",
   "type": "module",
   "sideEffects": false,
   "files": [
     "dist",
     "types",
+    "types-cjs",
     "package.json",
     "storage/dist",
     "storage/types",
-    "storage/package.json"
+    "storage/types-cjs",
+    "storage/package.json",
+    "serialization/dist",
+    "serialization/types",
+    "serialization/types-cjs",
+    "serialization/package.json",
+    "server-functions/dist",
+    "server-functions/package.json"
   ],
   "exports": {
     ".": {
       "worker": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "browser": {
         "development": {
+          "import": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/dev.js"
+          },
+          "require": {
+            "types": "./types-cjs/index.d.cts",
+            "default": "./dist/dev.cjs"
+          }
+        },
+        "import": {
           "types": "./types/index.d.ts",
-          "import": "./dist/dev.js",
-          "require": "./dist/dev.cjs"
+          "default": "./dist/web.js"
         },
-        "types": "./types/index.d.ts",
-        "import": "./dist/web.js",
-        "require": "./dist/web.cjs"
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/web.cjs"
+        }
       },
       "deno": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "node": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "development": {
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/dev.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/dev.cjs"
+        }
+      },
+      "import": {
         "types": "./types/index.d.ts",
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
+        "default": "./dist/web.js"
+      },
+      "require": {
+        "types": "./types-cjs/index.d.cts",
+        "default": "./dist/web.cjs"
+      }
+    },
+    "./jsx-runtime": {
+      "import": {
+        "types": "./types/jsx.d.ts",
+        "default": "./dist/web.js"
+      },
+      "require": {
+        "types": "./types-cjs/jsx.d.cts",
+        "default": "./dist/web.cjs"
+      }
+    },
+    "./jsx-dev-runtime": {
+      "import": {
+        "types": "./types/jsx.d.ts",
+        "default": "./dist/dev.js"
       },
-      "types": "./types/index.d.ts",
-      "import": "./dist/web.js",
-      "require": "./dist/web.cjs"
+      "require": {
+        "types": "./types-cjs/jsx.d.cts",
+        "default": "./dist/dev.cjs"
+      }
     },
     "./storage": {
-      "types": "./storage/types/index.d.ts",
-      "import": "./storage/dist/storage.js",
-      "require": "./storage/dist/storage.cjs"
+      "import": {
+        "types": "./storage/types/index.d.ts",
+        "default": "./storage/dist/storage.js"
+      },
+      "require": {
+        "types": "./storage/types-cjs/index.d.cts",
+        "default": "./storage/dist/storage.cjs"
+      }
+    },
+    "./serialization": {
+      "import": {
+        "types": "./serialization/types/index.d.ts",
+        "default": "./serialization/dist/serialization.js"
+      },
+      "require": {
+        "types": "./serialization/types-cjs/index.d.cts",
+        "default": "./serialization/dist/serialization.cjs"
+      }
+    },
+    "./server-functions": {
+      "worker": {
+        "import": {
+          "types": "./types/server-functions/server.d.ts",
+          "default": "./server-functions/dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/server-functions/server.d.cts",
+          "default": "./server-functions/dist/server.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./types/server-functions/client.d.ts",
+          "default": "./server-functions/dist/client.js"
+        },
+        "require": {
+          "types": "./types-cjs/server-functions/client.d.cts",
+          "default": "./server-functions/dist/client.cjs"
+        }
+      },
+      "deno": {
+        "import": {
+          "types": "./types/server-functions/server.d.ts",
+          "default": "./server-functions/dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/server-functions/server.d.cts",
+          "default": "./server-functions/dist/server.cjs"
+        }
+      },
+      "node": {
+        "import": {
+          "types": "./types/server-functions/server.d.ts",
+          "default": "./server-functions/dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/server-functions/server.d.cts",
+          "default": "./server-functions/dist/server.cjs"
+        }
+      },
+      "import": {
+        "types": "./types/server-functions/client.d.ts",
+        "default": "./server-functions/dist/client.js"
+      },
+      "require": {
+        "types": "./types-cjs/server-functions/client.d.cts",
+        "default": "./server-functions/dist/client.cjs"
+      }
+    },
+    "./server-functions/server": {
+      "import": {
+        "types": "./types/server-functions/server.d.ts",
+        "default": "./server-functions/dist/server.js"
+      },
+      "require": {
+        "types": "./types-cjs/server-functions/server.d.cts",
+        "default": "./server-functions/dist/server.cjs"
+      }
+    },
+    "./server-functions/client": {
+      "import": {
+        "types": "./types/server-functions/client.d.ts",
+        "default": "./server-functions/dist/client.js"
+      },
+      "require": {
+        "types": "./types-cjs/server-functions/client.d.cts",
+        "default": "./server-functions/dist/client.cjs"
+      }
     },
-    "./dist/*": "./dist/*",
     "./types/*": "./types/*"
   },
   "dependencies": {
-    "seroval": "^1.1.0",
-    "seroval-plugins": "^1.1.0"
+    "seroval": "~1.5.4",
+    "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.2",
-    "@solidjs/signals": "^0.12.0"
+    "solid-js": "^2.0.0-beta.20"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.2"
+    "solid-js": "2.0.0-beta.20"
   },
   "scripts": {
-    "build": "npm-run-all -nl build:*",
+    "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:*",
-    "types:clean": "rimraf types/",
+    "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: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",
-    "types:copy-web": "ncp ../../node_modules/dom-expressions/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/dom-expressions/src/server.d.ts ./types/server.d.ts",
+    "types:copy-web": "ncp ../../node_modules/@dom-expressions/runtime/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/@dom-expressions/runtime/src/server.d.ts ./types/server.d.ts && ncp ../../node_modules/@dom-expressions/runtime/src/serializer.d.ts ./types/serializer.d.ts && ncp ../../node_modules/@dom-expressions/runtime/src/response.d.ts ./types/response.d.ts && ncp ./src/jsx.d.ts ./types/jsx.d.ts && ncp ./src/jsx-properties.d.ts ./types/jsx-properties.d.ts",
     "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: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",
     "coverage": "vitest run --coverage",
-    "test-types": "tsc --project tsconfig.test.json"
+    "bench": "vitest bench --run",
+    "bench:server": "vitest bench --run --config vite.config.server-bench.mjs",
+    "test-types": "npm-run-all -nl types test-types:tsc",
+    "test-types:tsc": "tsc --project tsconfig.test.json"
   }
 }

package/serialization/dist/serialization.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+var seroval = require('seroval');
+var web = require('seroval-plugins/web');
+
+const DEFAULT_DISABLED_FEATURES = seroval.Feature.AggregateError | seroval.Feature.BigIntTypedArray;
+const HYDRATION_GLOBAL = "_$HY.r";
+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]);
+function resolveSerializerPlugins(customPlugins) {
+  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
+}
+function createSerializer(options) {
+  return new seroval.Serializer({
+    ...options,
+    plugins: resolveSerializerPlugins(options.plugins),
+    disabledFeatures: options.disabledFeatures === undefined ? DEFAULT_DISABLED_FEATURES : options.disabledFeatures
+  });
+}
+function createHydrationSerializer({
+  onData,
+  onDone,
+  scopeId,
+  onError,
+  plugins
+}) {
+  return createSerializer({
+    scopeId,
+    plugins,
+    globalIdentifier: HYDRATION_GLOBAL,
+    onData,
+    onDone,
+    onError
+  });
+}
+function getLocalHeaderScript(id) {
+  return seroval.getCrossReferenceHeader(id) + ";";
+}
+const JSON_CODEC_DISABLED_FEATURES = seroval.Feature.RegExp;
+const JSON_CODEC_DEPTH_LIMIT = 64;
+function resolveCodecOptions({
+  plugins,
+  disabledFeatures,
+  depthLimit
+} = {}) {
+  return {
+    plugins: resolveSerializerPlugins(plugins),
+    disabledFeatures: disabledFeatures === undefined ? JSON_CODEC_DISABLED_FEATURES : disabledFeatures,
+    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);
+  return function deserializeJSONChunk(node) {
+    return seroval.fromCrossJSON(node, {
+      refs,
+      ...resolved
+    });
+  };
+}
+
+exports.DEFAULT_WEB_PLUGINS = DEFAULT_WEB_PLUGINS;
+exports.createHydrationSerializer = createHydrationSerializer;
+exports.createJSONDeserializer = createJSONDeserializer;
+exports.createSerializer = createSerializer;
+exports.getLocalHeaderScript = getLocalHeaderScript;
+exports.resolveSerializerPlugins = resolveSerializerPlugins;
+exports.serializeJSON = serializeJSON;

package/serialization/dist/serialization.js

@@ -0,0 +1,75 @@
+import { Feature, Serializer, getCrossReferenceHeader, toCrossJSONStream, fromCrossJSON } from 'seroval';
+import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
+
+const DEFAULT_DISABLED_FEATURES = Feature.AggregateError | Feature.BigIntTypedArray;
+const HYDRATION_GLOBAL = "_$HY.r";
+const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
+CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
+FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin]);
+function resolveSerializerPlugins(customPlugins) {
+  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
+}
+function createSerializer(options) {
+  return new Serializer({
+    ...options,
+    plugins: resolveSerializerPlugins(options.plugins),
+    disabledFeatures: options.disabledFeatures === undefined ? DEFAULT_DISABLED_FEATURES : options.disabledFeatures
+  });
+}
+function createHydrationSerializer({
+  onData,
+  onDone,
+  scopeId,
+  onError,
+  plugins
+}) {
+  return createSerializer({
+    scopeId,
+    plugins,
+    globalIdentifier: HYDRATION_GLOBAL,
+    onData,
+    onDone,
+    onError
+  });
+}
+function getLocalHeaderScript(id) {
+  return getCrossReferenceHeader(id) + ";";
+}
+const JSON_CODEC_DISABLED_FEATURES = Feature.RegExp;
+const JSON_CODEC_DEPTH_LIMIT = 64;
+function resolveCodecOptions({
+  plugins,
+  disabledFeatures,
+  depthLimit
+} = {}) {
+  return {
+    plugins: resolveSerializerPlugins(plugins),
+    disabledFeatures: disabledFeatures === undefined ? JSON_CODEC_DISABLED_FEATURES : disabledFeatures,
+    depthLimit: depthLimit === undefined ? JSON_CODEC_DEPTH_LIMIT : depthLimit
+  };
+}
+function serializeJSON(value, {
+  onParse,
+  onDone,
+  onError,
+  ...codecOptions
+}) {
+  return toCrossJSONStream(value, {
+    onParse,
+    onDone,
+    onError,
+    ...resolveCodecOptions(codecOptions)
+  });
+}
+function createJSONDeserializer(options) {
+  const refs = new Map();
+  const resolved = resolveCodecOptions(options);
+  return function deserializeJSONChunk(node) {
+    return fromCrossJSON(node, {
+      refs,
+      ...resolved
+    });
+  };
+}
+
+export { DEFAULT_WEB_PLUGINS, createHydrationSerializer, createJSONDeserializer, createSerializer, getLocalHeaderScript, resolveSerializerPlugins, serializeJSON };

package/serialization/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@solidjs/web/serialization",
+  "main": "./dist/serialization.cjs",
+  "module": "./dist/serialization.js",
+  "types": "./types/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/serialization.js"
+      },
+      "require": {
+        "types": "./types-cjs/index.d.cts",
+        "default": "./dist/serialization.cjs"
+      }
+    }
+  }
+}

package/serialization/types/index.d.ts

@@ -0,0 +1,139 @@
+import { Plugin, Serializer, SerovalNode } from "seroval";
+
+/**
+ * Seroval's node shape — the intermediate representation `serializeJSON`
+ * emits and `createJSONDeserializer` consumes. Safe to `JSON.stringify`.
+ */
+export type { SerovalNode };
+
+/**
+ * A Seroval plugin usable with the web serializers — teaches the codec how
+ * to encode/decode a custom value type. Supply matching plugins on both
+ * peers of a transport.
+ */
+export type SerializerPlugin = Plugin<any, any>;
+
+/**
+ * Baseline plugin set for serializing web-platform values (AbortSignal,
+ * Event, FormData, Headers, ReadableStream, Request, Response, URL, ...).
+ * Applied by every serializer in this module; custom plugins compose ahead
+ * of it via `resolveSerializerPlugins`.
+ */
+export const DEFAULT_WEB_PLUGINS: readonly SerializerPlugin[];
+
+/**
+ * Composes custom plugins with `DEFAULT_WEB_PLUGINS`. Custom plugins come
+ * first so they can shadow a default for values both would match. Returns a
+ * fresh array; the defaults are never mutated. Useful when handing a full
+ * plugin list to another serialization layer.
+ */
+export function resolveSerializerPlugins(customPlugins?: SerializerPlugin[]): SerializerPlugin[];
+
+/** Options for `createSerializer`. */
+export interface WebSerializerOptions {
+  /** Name of the global object the emitted scripts write resolved values into. */
+  globalIdentifier: string;
+  /** Cross-reference scope id, for isolating multiple streams on one page. */
+  scopeId?: string;
+  /**
+   * Seroval feature bitflags to exclude from output. Defaults to disabling
+   * post-ES2017 features (AggregateError, BigInt typed arrays).
+   */
+  disabledFeatures?: number;
+  /** Extra plugins, composed ahead of `DEFAULT_WEB_PLUGINS`. */
+  plugins?: SerializerPlugin[];
+  /** Receives each emitted script chunk. */
+  onData: (result: string) => void;
+  onError?: (error: unknown) => void;
+  /** Fires once all async values have settled. */
+  onDone?: () => void;
+}
+
+/**
+ * Creates a streaming Seroval serializer preconfigured with the web plugin
+ * set and the default feature policy. Emits JavaScript chunks (through
+ * `onData`) that reconstruct the values under `globalIdentifier` when
+ * evaluated — the script-injection form of serialization renderers build
+ * on. For a JSON-based wire codec (no eval on the receiving side), use
+ * `serializeJSON` / `createJSONDeserializer` instead.
+ */
+export function createSerializer(options: WebSerializerOptions): Serializer;
+
+/**
+ * Options for `createHydrationSerializer` — `WebSerializerOptions` minus
+ * the knobs hydration pins (`globalIdentifier`, `disabledFeatures`).
+ * @internal
+ */
+export type HydrationSerializerOptions = Omit<
+  WebSerializerOptions,
+  "globalIdentifier" | "disabledFeatures"
+>;
+
+/**
+ * Renderer primitive — the serializer SSR uses for hydration output. Pins
+ * the hydration global (`_$HY.r`) and feature policy; only the wiring
+ * options (callbacks, scope, extra plugins) are configurable. Not meant
+ * for hand-written code — custom serialization should use
+ * `createSerializer` or the JSON codec.
+ * @internal
+ */
+export function createHydrationSerializer(options: HydrationSerializerOptions): Serializer;
+
+/**
+ * Renderer primitive — returns the cross-reference bootstrap script SSR
+ * emits ahead of hydration data for a render scope. Not meant for
+ * hand-written code.
+ * @internal
+ */
+export function getLocalHeaderScript(id?: string): string;
+
+// ---- JSON codec (server function transports) ----
+
+/**
+ * Options shared by both halves of the JSON codec. All of them must match
+ * on the serializing and deserializing peer or payloads will not
+ * round-trip — for server functions, set them once through the
+ * client/server `codec` config option.
+ */
+export interface JSONCodecOptions {
+  /** Extra plugins, composed ahead of `DEFAULT_WEB_PLUGINS`. Must match on both peers. */
+  plugins?: SerializerPlugin[];
+  /**
+   * Seroval feature bitflags to exclude. Defaults to disabling `RegExp`
+   * (payloads may come from an untrusted peer). Must match on both peers.
+   */
+  disabledFeatures?: number;
+  /** Maximum parse/deserialize depth. Defaults to 64. Must match on both peers. */
+  depthLimit?: number;
+}
+
+/** Options for `serializeJSON`. */
+export interface JSONSerializeOptions extends JSONCodecOptions {
+  /**
+   * Receives each serialized node; `initial` is true for the first chunk
+   * (the source value itself). Async values produce additional chunks as
+   * they resolve.
+   */
+  onParse: (node: SerovalNode, initial: boolean) => void;
+  onError?: (error: unknown) => void;
+  /** Fires once all async values have settled. */
+  onDone?: () => void;
+}
+
+/**
+ * Serializes `value` as SerovalNode chunks delivered through `onParse` —
+ * the encoding half of the eval-free JSON codec (RPC-style transports;
+ * the deserializing peer needs no script evaluation, so CSP-safe). Wire
+ * framing of the nodes is the transport's concern. Returns a cancel
+ * function that aborts pending async serialization.
+ */
+export function serializeJSON(value: unknown, options: JSONSerializeOptions): () => void;
+
+/**
+ * Creates the decoding counterpart of `serializeJSON`. Cross-references
+ * between chunks resolve through state shared across calls, so all chunks
+ * from one stream must go through the same deserializer instance. The first
+ * chunk's return value is the decoded source value; feeding later chunks
+ * settles the async values referenced inside it.
+ */
+export function createJSONDeserializer(options?: JSONCodecOptions): <T>(node: SerovalNode) => T;