@solidjs/web 2.0.0-beta.24 → 2.0.0-beta.26

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.24",
+  "version": "2.0.0-beta.26",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -231,6 +231,16 @@
         }
       },
       "browser": {
+        "development": {
+          "import": {
+            "types": "./types/frames/client.d.ts",
+            "default": "./frames/dist/client.dev.js"
+          },
+          "require": {
+            "types": "./types-cjs/frames/client.d.cts",
+            "default": "./frames/dist/client.dev.cjs"
+          }
+        },
         "import": {
           "types": "./types/frames/client.d.ts",
           "default": "./frames/dist/client.js"
@@ -260,6 +270,16 @@
           "default": "./frames/dist/server.cjs"
         }
       },
+      "development": {
+        "import": {
+          "types": "./types/frames/client.d.ts",
+          "default": "./frames/dist/client.dev.js"
+        },
+        "require": {
+          "types": "./types-cjs/frames/client.d.cts",
+          "default": "./frames/dist/client.dev.cjs"
+        }
+      },
       "import": {
         "types": "./types/frames/client.d.ts",
         "default": "./frames/dist/client.js"
@@ -296,25 +316,26 @@
     "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.24"
+    "solid-js": "^2.0.0-beta.26"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.24"
+    "solid-js": "2.0.0-beta.26"
   },
   "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:copy-frames types:cjs",
-    "types:clean": "rimraf types/ types-cjs/ storage/types/ storage/types-cjs/ serialization/types/ serialization/types-cjs/",
+    "types": "npm-run-all -nl types:clean types:copy-jsx types:web types:copy-web types:web-storage types:copy-server-functions types:web-frames types:copy-serialization types:copy-frames types:cjs",
+    "types:clean": "rimraf types/ types-cjs/ storage/types/ storage/types-cjs/ serialization/types/ serialization/types-cjs/ frames/types/",
     "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/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:web-frames": "tsc --project ./frames/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: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.writeFileSync('./types/frames/' + f + '.d.ts', fs.readFileSync('./frames/types/' + f + '.d.ts', 'utf8').replaceAll('@dom-expressions/runtime/src/', './'));\"",
     "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/server-functions/dist/client.cjs

@@ -219,15 +219,15 @@ class ChunkReader {
     }
   }
   async next() {
-    if (this.buffer.length === 0) {
+    while (this.buffer.length < 12) {
       if (this.done) {
-        return {
+        if (this.buffer.length === 0) return {
           done: true,
           value: undefined
         };
+        throw new Error("Malformed server function stream.");
       }
       await this.readChunk();
-      return await this.next();
     }
     const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
     const bytes = Number.parseInt(head, 16);

package/server-functions/dist/client.js

@@ -217,15 +217,15 @@ class ChunkReader {
     }
   }
   async next() {
-    if (this.buffer.length === 0) {
+    while (this.buffer.length < 12) {
       if (this.done) {
-        return {
+        if (this.buffer.length === 0) return {
           done: true,
           value: undefined
         };
+        throw new Error("Malformed server function stream.");
       }
       await this.readChunk();
-      return await this.next();
     }
     const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
     const bytes = Number.parseInt(head, 16);

package/server-functions/dist/server.cjs

@@ -249,15 +249,15 @@ class ChunkReader {
     }
   }
   async next() {
-    if (this.buffer.length === 0) {
+    while (this.buffer.length < 12) {
       if (this.done) {
-        return {
+        if (this.buffer.length === 0) return {
           done: true,
           value: undefined
         };
+        throw new Error("Malformed server function stream.");
       }
       await this.readChunk();
-      return await this.next();
     }
     const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
     const bytes = Number.parseInt(head, 16);

package/server-functions/dist/server.js

@@ -247,15 +247,15 @@ class ChunkReader {
     }
   }
   async next() {
-    if (this.buffer.length === 0) {
+    while (this.buffer.length < 12) {
       if (this.done) {
-        return {
+        if (this.buffer.length === 0) return {
           done: true,
           value: undefined
         };
+        throw new Error("Malformed server function stream.");
       }
       await this.readChunk();
-      return await this.next();
     }
     const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
     const bytes = Number.parseInt(head, 16);

package/types/frames/client.d.ts

@@ -1,53 +1,17 @@
-/**
- * @solidjs/web/frames — client half. Consume frame streams into live DOM
- * boundaries. There is deliberately no server-component API here beyond
- * `installServerComponents()`: `dynamic` + server functions IS the client
- * surface — a server-function call whose response is a frame stream
- * resolves with a stable per-call-site component.
- *
- * Copied next to the runtime's frame d.ts files at publish (see
- * types:copy-frames), so the relative imports below resolve in-place.
- */
-export {
-  createFrame,
-  createFrameHost,
-  createFrameInsertable,
-  FRAME_APPLIED_EVENT
-} from "./frame-client.js";
-export type {
-  Frame,
-  FrameChunk,
-  FrameHost,
-  FrameHostOptions,
-  FrameOptions,
-  FrameWrite,
-  Slot,
-  SlotContext
-} from "./frame-client.js";
-export {
-  FRAME_STREAM_HEADER,
-  applyFrameResponse,
-  isFrameStreamResponse,
-  createServerComponentHandler
-} from "./frame-transport.js";
+export { createFrame, createFrameHost, createFrameElement, FRAME_APPLIED_EVENT } from "./frame-client.js";
+export { FRAME_STREAM_HEADER, applyFrameResponse, isFrameStreamResponse, createServerComponentHandler } from "./frame-transport.js";
 export { createJSONDataTable } from "./serializer.js";
-export type { JSONDataTable } from "./serializer.js";
-
-import type { FrameHost } from "./frame-client.js";
-
-/**
- * The app-wide frame host (created on first use): one chunk router, with
- * codec data tables rotated per response — deserializer cross-reference
- * space is stream-scoped by contract.
- */
-export function getFrameHost(): FrameHost;
-
+export declare function getFrameHost(): any;
 /**
  * Installs the server-component transport policy on the server-function
- * client: boundary identity derives from the reactive owner captured at the
- * call site, frame-stream responses resolve to stable per-call-site
- * components, and document-SSR boundaries adopt their server-rendered
- * ranges. Call once in the client entry (the package is sideEffects:false —
- * a bare import would be tree-shaken); call again to rebind a custom host.
+ * client: boundary identity derives from the reactive owner captured at
+ * each call site (`getOwner`), so distinct `dynamic()` sources get
+ * independent boundaries with nothing declared, refetches from the same
+ * source resolve to the identical component, and ownerless calls fall back
+ * to one boundary per function id.
+ *
+ * Call once in the client entry (an explicit call — the package is
+ * `sideEffects: false`, so a bare import would be tree-shaken away);
+ * call again to rebind to a custom host.
  */
-export function installServerComponents(host?: FrameHost): void;
+export declare function installServerComponents(host?: any): void;

package/types/frames/frame-client.d.ts

@@ -41,15 +41,6 @@ export type FrameChunk =
       inlineStyles?: { id: string; content?: string; attrs?: Record<string, string> }[];
     }
   | { type: "slot"; id: string; version: number; key: string; args: Record<string, unknown> }
-  | { type: "template"; id: string; version: number; key: string; html: string; fields: string[] }
-  | {
-      type: "block";
-      id: string;
-      version: number;
-      key: string;
-      template: string;
-      values: unknown[];
-    }
   | { type: "complete"; id: string; version: number }
   | { type: "error"; id: string; version: number; key?: string; error: unknown };
 
@@ -170,7 +161,7 @@ export interface FrameHostOptions {
 
 export function createFrameHost(options?: FrameHostOptions): FrameHost;
 
-/** Options for `createFrame` / `createFrameInsertable`. */
+/** Options for `createFrame` / `createFrameElement`. */
 export interface FrameOptions {
   /** Register with this host under `id`, receiving routed/buffered chunks. */
   host?: FrameHost;
@@ -194,29 +185,44 @@ export interface FrameOptions {
    * streamed chunks).
    */
   ownerScope?<T>(fn: () => T): T;
+  /**
+   * Boundary-driven segment reveal. When present, `#revealSegment` hands the
+   * placeholder seam to this hook instead of swapping imperatively: the binding
+   * reconstructs a client `<Loading>` there — `fallback` is the placeholder's
+   * own template content (shown while holding), `content()` materializes the
+   * segment and renders its client fills INSIDE the boundary so their readiness
+   * gates the reveal — and inserts it before `before`. An unboundaried async
+   * fill suspends up to that boundary and is covered instead of orphaned; one
+   * boundary per revealed segment, i.e. per author-placed `<Loading>`. Omit it
+   * for the framework-agnostic imperative swap (no reactive reveal).
+   */
+  reveal?(seam: { before: Node; fallback: Node[]; content: () => Node | DocumentFragment }): void;
 }
 
-/** A frame rendering into an element boundary. */
+/**
+ * A frame rendering into an EXISTING element boundary. Pass `adopt: true` for
+ * the document-SSR path: the element already holds server-rendered content,
+ * so the first apply morphs against it and slots sync immediately (hydration
+ * attach), claiming their server-rendered DOM — a document boot needs no
+ * chunk.
+ */
 export function createFrame(boundary: Element, options?: FrameOptions): Frame;
 
+/** The default boundary/region element tag and its id attribute — the DOM
+ *  contract the producer emits at t=0 and the consumer creates/adopts. */
+export const FRAME_TAG: "dx-frame";
+export const FRAME_ID_ATTR: "data-fid";
+
 /**
- * A branded frame-insertable value: the client runtime's `insert` recognizes
- * it (registered `$$FRAME` symbol) and calls the mount handler the value
- * carries — a comment range is established at the insertion point and a
- * host-registered frame binds to it. One static mount per value; lifecycle
- * belongs to the creator via `dispose()` (register it with your owner's
- * cleanup).
+ * Create a boundary/region ELEMENT and bind a host-registered frame to it.
+ * The frame mounts INTO the element (server content is its children, morphed
+ * in place). Because the boundary is a real node, `insert` places the
+ * returned `element` in any position — single, array, or fragment — with no
+ * special-casing. One frame per element; lifecycle belongs to the creator via
+ * `dispose()` (register it with your owner's cleanup).
  */
-export function createFrameInsertable(options: FrameOptions): {
-  readonly frame: Frame | null;
+export function createFrameElement(options: FrameOptions): {
+  readonly element: Element;
+  readonly frame: Frame;
   dispose(): void;
 };
-
-/**
- * Binds a frame to an EXISTING marker range — the document-SSR adoption
- * path: the page already holds the server-rendered boundary between
- * `frame:<id>:start`/`:end` comments; the frame constructed over it treats
- * that content as its own (first stream morphs rather than materializes)
- * and slots sync immediately, claiming their server-rendered DOM.
- */
-export function adoptFrameRange(start: Comment, end: Comment, options?: FrameOptions): Frame;

package/types/frames/server.d.ts

@@ -1,21 +1,2 @@
-/**
- * @solidjs/web/frames — server half. Render server components (functions
- * returned from server functions) to frame-chunk streams, serve them as
- * framed HTTP responses through the server-function handler's
- * transformResult hook, and render them inline during document SSR.
- *
- * Copied next to the runtime's frame d.ts files at publish (see
- * types:copy-frames), so the relative imports below resolve in-place.
- */
-export {
-  renderToFrameStream,
-  renderServerComponent,
-  serverComponentResponse,
-  frameTransformResult,
-  createFrameSink,
-  frameTransformDirectResult,
-  ServerComponentPlugin,
-  SERVER_COMPONENT_BOOTSTRAP
-} from "./frame-sink.js";
-export type { FrameAddress, FrameStream, FrameStreamOptions } from "./frame-sink.js";
+export { renderToFrameStream, renderServerComponent, serverComponentResponse, frameTransformResult, createFrameSink, frameTransformDirectResult, ServerComponentPlugin, SERVER_COMPONENT_BOOTSTRAP } from "./frame-sink.js";
 export { FRAME_STREAM_HEADER, isFrameStreamResponse } from "./frame-transport.js";

package/types-cjs/frames/client.d.cts

@@ -1,53 +1,17 @@
-/**
- * @solidjs/web/frames — client half. Consume frame streams into live DOM
- * boundaries. There is deliberately no server-component API here beyond
- * `installServerComponents()`: `dynamic` + server functions IS the client
- * surface — a server-function call whose response is a frame stream
- * resolves with a stable per-call-site component.
- *
- * Copied next to the runtime's frame d.ts files at publish (see
- * types:copy-frames), so the relative imports below resolve in-place.
- */
-export {
-  createFrame,
-  createFrameHost,
-  createFrameInsertable,
-  FRAME_APPLIED_EVENT
-} from "./frame-client.cjs";
-export type {
-  Frame,
-  FrameChunk,
-  FrameHost,
-  FrameHostOptions,
-  FrameOptions,
-  FrameWrite,
-  Slot,
-  SlotContext
-} from "./frame-client.cjs";
-export {
-  FRAME_STREAM_HEADER,
-  applyFrameResponse,
-  isFrameStreamResponse,
-  createServerComponentHandler
-} from "./frame-transport.cjs";
+export { createFrame, createFrameHost, createFrameElement, FRAME_APPLIED_EVENT } from "./frame-client.cjs";
+export { FRAME_STREAM_HEADER, applyFrameResponse, isFrameStreamResponse, createServerComponentHandler } from "./frame-transport.cjs";
 export { createJSONDataTable } from "./serializer.cjs";
-export type { JSONDataTable } from "./serializer.cjs";
-
-import type { FrameHost } from "./frame-client.cjs";
-
-/**
- * The app-wide frame host (created on first use): one chunk router, with
- * codec data tables rotated per response — deserializer cross-reference
- * space is stream-scoped by contract.
- */
-export function getFrameHost(): FrameHost;
-
+export declare function getFrameHost(): any;
 /**
  * Installs the server-component transport policy on the server-function
- * client: boundary identity derives from the reactive owner captured at the
- * call site, frame-stream responses resolve to stable per-call-site
- * components, and document-SSR boundaries adopt their server-rendered
- * ranges. Call once in the client entry (the package is sideEffects:false —
- * a bare import would be tree-shaken); call again to rebind a custom host.
+ * client: boundary identity derives from the reactive owner captured at
+ * each call site (`getOwner`), so distinct `dynamic()` sources get
+ * independent boundaries with nothing declared, refetches from the same
+ * source resolve to the identical component, and ownerless calls fall back
+ * to one boundary per function id.
+ *
+ * Call once in the client entry (an explicit call — the package is
+ * `sideEffects: false`, so a bare import would be tree-shaken away);
+ * call again to rebind to a custom host.
  */
-export function installServerComponents(host?: FrameHost): void;
+export declare function installServerComponents(host?: any): void;

package/types-cjs/frames/frame-client.d.cts

@@ -41,15 +41,6 @@ export type FrameChunk =
       inlineStyles?: { id: string; content?: string; attrs?: Record<string, string> }[];
     }
   | { type: "slot"; id: string; version: number; key: string; args: Record<string, unknown> }
-  | { type: "template"; id: string; version: number; key: string; html: string; fields: string[] }
-  | {
-      type: "block";
-      id: string;
-      version: number;
-      key: string;
-      template: string;
-      values: unknown[];
-    }
   | { type: "complete"; id: string; version: number }
   | { type: "error"; id: string; version: number; key?: string; error: unknown };
 
@@ -170,7 +161,7 @@ export interface FrameHostOptions {
 
 export function createFrameHost(options?: FrameHostOptions): FrameHost;
 
-/** Options for `createFrame` / `createFrameInsertable`. */
+/** Options for `createFrame` / `createFrameElement`. */
 export interface FrameOptions {
   /** Register with this host under `id`, receiving routed/buffered chunks. */
   host?: FrameHost;
@@ -194,29 +185,44 @@ export interface FrameOptions {
    * streamed chunks).
    */
   ownerScope?<T>(fn: () => T): T;
+  /**
+   * Boundary-driven segment reveal. When present, `#revealSegment` hands the
+   * placeholder seam to this hook instead of swapping imperatively: the binding
+   * reconstructs a client `<Loading>` there — `fallback` is the placeholder's
+   * own template content (shown while holding), `content()` materializes the
+   * segment and renders its client fills INSIDE the boundary so their readiness
+   * gates the reveal — and inserts it before `before`. An unboundaried async
+   * fill suspends up to that boundary and is covered instead of orphaned; one
+   * boundary per revealed segment, i.e. per author-placed `<Loading>`. Omit it
+   * for the framework-agnostic imperative swap (no reactive reveal).
+   */
+  reveal?(seam: { before: Node; fallback: Node[]; content: () => Node | DocumentFragment }): void;
 }
 
-/** A frame rendering into an element boundary. */
+/**
+ * A frame rendering into an EXISTING element boundary. Pass `adopt: true` for
+ * the document-SSR path: the element already holds server-rendered content,
+ * so the first apply morphs against it and slots sync immediately (hydration
+ * attach), claiming their server-rendered DOM — a document boot needs no
+ * chunk.
+ */
 export function createFrame(boundary: Element, options?: FrameOptions): Frame;
 
+/** The default boundary/region element tag and its id attribute — the DOM
+ *  contract the producer emits at t=0 and the consumer creates/adopts. */
+export const FRAME_TAG: "dx-frame";
+export const FRAME_ID_ATTR: "data-fid";
+
 /**
- * A branded frame-insertable value: the client runtime's `insert` recognizes
- * it (registered `$$FRAME` symbol) and calls the mount handler the value
- * carries — a comment range is established at the insertion point and a
- * host-registered frame binds to it. One static mount per value; lifecycle
- * belongs to the creator via `dispose()` (register it with your owner's
- * cleanup).
+ * Create a boundary/region ELEMENT and bind a host-registered frame to it.
+ * The frame mounts INTO the element (server content is its children, morphed
+ * in place). Because the boundary is a real node, `insert` places the
+ * returned `element` in any position — single, array, or fragment — with no
+ * special-casing. One frame per element; lifecycle belongs to the creator via
+ * `dispose()` (register it with your owner's cleanup).
  */
-export function createFrameInsertable(options: FrameOptions): {
-  readonly frame: Frame | null;
+export function createFrameElement(options: FrameOptions): {
+  readonly element: Element;
+  readonly frame: Frame;
   dispose(): void;
 };
-
-/**
- * Binds a frame to an EXISTING marker range — the document-SSR adoption
- * path: the page already holds the server-rendered boundary between
- * `frame:<id>:start`/`:end` comments; the frame constructed over it treats
- * that content as its own (first stream morphs rather than materializes)
- * and slots sync immediately, claiming their server-rendered DOM.
- */
-export function adoptFrameRange(start: Comment, end: Comment, options?: FrameOptions): Frame;

package/types-cjs/frames/server.d.cts

@@ -1,21 +1,2 @@
-/**
- * @solidjs/web/frames — server half. Render server components (functions
- * returned from server functions) to frame-chunk streams, serve them as
- * framed HTTP responses through the server-function handler's
- * transformResult hook, and render them inline during document SSR.
- *
- * Copied next to the runtime's frame d.ts files at publish (see
- * types:copy-frames), so the relative imports below resolve in-place.
- */
-export {
-  renderToFrameStream,
-  renderServerComponent,
-  serverComponentResponse,
-  frameTransformResult,
-  createFrameSink,
-  frameTransformDirectResult,
-  ServerComponentPlugin,
-  SERVER_COMPONENT_BOOTSTRAP
-} from "./frame-sink.cjs";
-export type { FrameAddress, FrameStream, FrameStreamOptions } from "./frame-sink.cjs";
+export { renderToFrameStream, renderServerComponent, serverComponentResponse, frameTransformResult, createFrameSink, frameTransformDirectResult, ServerComponentPlugin, SERVER_COMPONENT_BOOTSTRAP } from "./frame-sink.cjs";
 export { FRAME_STREAM_HEADER, isFrameStreamResponse } from "./frame-transport.cjs";