react-server-frame 0.0.1 → 0.0.2

package/dist/browser.d.mts

@@ -0,0 +1,21 @@
+import { t as Payload } from "./generic-payload-Bio3B-X_.mjs";
+
+//#region src/browser.d.ts
+declare function createServerCallback({
+  createFromFetch,
+  createTemporaryReferenceSet,
+  encodeReply
+}: {
+  createFromFetch: (response: Promise<Response>, options?: object) => Promise<Payload>;
+  createTemporaryReferenceSet: () => unknown;
+  encodeReply: (v: unknown[], options?: object) => Promise<string | FormData>;
+}): (id: string, args: unknown[]) => Promise<unknown>;
+declare function hydrate({
+  createFromFetch,
+  createFromReadableStream
+}: {
+  createFromFetch: (response: Promise<Response>, options?: object) => Promise<Payload>;
+  createFromReadableStream: (stream: ReadableStream<Uint8Array>, options?: object) => Promise<Payload>;
+}): void;
+//#endregion
+export { createServerCallback, hydrate };

package/dist/browser.mjs

@@ -0,0 +1,88 @@
+import { StrictMode, startTransition, use, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { hydrateRoot } from "react-dom/client";
+import { rscStream } from "rsc-html-stream/client";
+//#region src/browser.tsx
+let setPayload;
+function createServerCallback({ createFromFetch, createTemporaryReferenceSet, encodeReply }) {
+	return async (id, args) => {
+		const url = new URL(window.location.href);
+		url.pathname += ".rsc";
+		const temporaryReferences = createTemporaryReferenceSet();
+		const payload = await createFromFetch(fetch(url, {
+			method: "POST",
+			body: await encodeReply(args, { temporaryReferences }),
+			headers: { "x-rsc-action": id }
+		}), { temporaryReferences });
+		requestAnimationFrame(() => {
+			if (payload.type === "render") startTransition(() => {
+				setPayload(Promise.resolve(payload));
+			});
+			if (payload.type === "redirect") if (window.navigation) requestAnimationFrame(() => {
+				window.navigation.navigate(payload.redirect, { history: "replace" });
+			});
+			else window.location.href = payload.redirect;
+		});
+		return payload.returnValue;
+	};
+}
+let seenPayloads = /* @__PURE__ */ new WeakMap();
+function Content({ initialPayload }) {
+	const [promise, _setPayload] = useState(initialPayload);
+	setPayload = _setPayload;
+	const payload = use(promise);
+	if (payload.type === "redirect") if (window.navigation) {
+		if (!seenPayloads.has(payload)) {
+			const promise = Promise.resolve(window.navigation.navigate(payload.redirect, { history: "replace" }).finished).then(() => {});
+			seenPayloads.set(payload, Promise.resolve(promise));
+		}
+		use(seenPayloads.get(payload));
+		return null;
+	} else {
+		window.location.href = payload.redirect;
+		return null;
+	}
+	return payload.root;
+}
+function hydrate({ createFromFetch, createFromReadableStream }) {
+	createFromReadableStream(rscStream).then((payload) => startTransition(() => {
+		hydrateRoot(document, /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(Content, { initialPayload: Promise.resolve(payload) }) }), { formState: payload.formState });
+	}), (reason) => console.error("Failed to hydrate root", reason));
+	let navigationController = new AbortController();
+	async function navigate(to) {
+		const url = new URL(to, window.location.href);
+		url.pathname += ".rsc";
+		const thisController = new AbortController();
+		const responses = fetch(url, { signal: thisController.signal }).then((response) => [response, response.clone()]);
+		startTransition(() => setPayload(createFromFetch(responses.then(([r]) => r))));
+		navigationController.abort();
+		navigationController = thisController;
+		const [, response] = await responses;
+		if (!response.body) return;
+		const reader = response.body.getReader();
+		try {
+			let chunk = await reader.read();
+			while (!chunk.done) chunk = await reader.read();
+		} finally {
+			reader.releaseLock();
+		}
+	}
+	window.navigation?.addEventListener("navigate", (event) => {
+		if (!event.canIntercept) return;
+		if (event.hashChange || event.downloadRequest !== null) return;
+		const url = new URL(event.destination.url);
+		if (window.location.origin !== url.origin) {
+			window.location.href = url.href;
+			return;
+		}
+		event.intercept({ async handler() {
+			await navigate(event.destination.url);
+		} });
+	});
+	if (import.meta.hot) import.meta.hot.on("rsc:update", (e) => {
+		console.log("[vite-rsc:update]", e.file);
+		navigate(location.href);
+	});
+}
+//#endregion
+export { createServerCallback, hydrate };

package/dist/client.d.mts

@@ -1,3 +1,5 @@
+import { t as Payload } from "./generic-payload-Bio3B-X_.mjs";
+import * as _$react from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/frames.client.d.ts
@@ -20,5 +22,6 @@ declare function ClientFrame({
   children?: React.ReactNode;
   src: string;
 }): _$react_jsx_runtime0.JSX.Element;
+declare function fetchFrame(url: URL, signal: AbortSignal, createFromFetch: (response: Promise<Response>, options?: object) => Promise<Payload>): Promise<string | number | bigint | boolean | Iterable<_$react.ReactNode> | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | _$react.ReactPortal | null | undefined>;
 //#endregion
-export { ClientFrame, FetchFrameProvider, useFrame };
+export { ClientFrame, FetchFrameProvider, fetchFrame, useFrame };

package/dist/client.mjs

@@ -48,5 +48,17 @@ function ClientFrame({ children, src }) {
 		children: content
 	});
 }
+async function fetchFrame(url, signal, createFromFetch) {
+	url.pathname += ".rsc";
+	const payload = await createFromFetch(fetch(url, { signal }));
+	if (payload.type === "redirect") if (window.navigation) return Promise.resolve(window.navigation.navigate(payload.redirect, { history: "replace" }).finished).then(() => {
+		return null;
+	});
+	else {
+		window.location.href = payload.redirect;
+		return;
+	}
+	return payload.root;
+}
 //#endregion
-export { ClientFrame, FetchFrameProvider, useFrame };
+export { ClientFrame, FetchFrameProvider, fetchFrame, useFrame };

package/dist/generic-payload-Bio3B-X_.d.mts

@@ -0,0 +1,16 @@
+import { ReactFormState } from "react-dom/client";
+
+//#region src/generic-payload.d.ts
+type Payload = {
+  type: "render";
+  root: React.ReactNode;
+  returnValue?: Promise<unknown>;
+  formState?: ReactFormState;
+} | {
+  type: "redirect";
+  redirect: string;
+  returnValue?: Promise<unknown>;
+  formState?: undefined;
+};
+//#endregion
+export { Payload as t };

package/dist/index.d.mts

@@ -1,8 +1,24 @@
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactFormState } from "react-dom/client";
+import { Middleware, Router } from "remix/fetch-router";
 import { Route } from "remix/fetch-router/routes";
 
 //#region src/frames.d.ts
+declare function mapFrames<Frames extends Routes>(router: Router<any>, frames: Frames, {
+  components,
+  middleware
+}: {
+  middleware?: Middleware[];
+  components: Components<Frames>;
+}, config: {
+  createTemporaryReferenceSet: () => unknown;
+  fetchFrame: (url: URL, signal: AbortSignal) => Promise<React.ReactNode>;
+  prerender: (body: ReadableStream<Uint8Array>) => Promise<Response>;
+  renderToReadableStream: (payload: any, options?: {
+    temporaryReferences: unknown;
+    onError: (error: unknown) => string | undefined;
+  }) => ReadableStream<Uint8Array>;
+}): void;
 declare class UseServerState {
   formState?: ReactFormState;
   returnValue?: Promise<unknown>;
@@ -14,6 +30,19 @@ declare class RedirectState {
   location: string;
   constructor(location: string);
 }
+declare function useServerMiddleware({
+  createTemporaryReferenceSet,
+  decodeAction,
+  decodeFormState,
+  decodeReply,
+  loadServerAction
+}: {
+  createTemporaryReferenceSet: () => unknown;
+  decodeAction: (formData: FormData) => Promise<() => Promise<void>>;
+  decodeFormState: (actionResult: unknown, body: FormData) => Promise<ReactFormState | undefined>;
+  decodeReply: (body: string | FormData, options?: object) => Promise<unknown[]>;
+  loadServerAction: (id: string) => Promise<Function>;
+}): Middleware;
 declare function redirect(location: string): void;
 declare function render({
   createTemporaryReferenceSet,
@@ -24,7 +53,7 @@ declare function render({
 }: {
   createTemporaryReferenceSet: () => unknown;
   prerender: (body: ReadableStream<Uint8Array>) => Promise<Response>;
-  renderToReadableStream: (payload: any, options: {
+  renderToReadableStream: (payload: any, options?: {
     temporaryReferences: unknown;
     onError: (error: unknown) => string | undefined;
   }) => ReadableStream<Uint8Array>;
@@ -35,7 +64,7 @@ declare class NotFoundError extends Error {
   constructor(message: string);
 }
 interface Routes extends Record<string, Route | Routes> {}
-type Components<R extends Record<any, any>> = { [K in keyof R]: (R[K] extends Record<any, any> ? Components<R[K]> : never) | React.ComponentType };
+type Components<R extends Routes> = { [K in keyof R]: R[K] extends Routes ? Components<R[K]> : React.ComponentType };
 type ProvideFramesProps<Frames extends Routes> = {
   children?: React.ReactNode;
   components: Components<Frames>;
@@ -54,4 +83,4 @@ declare function Frame({
   src: string;
 }): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Frame, NotFoundError, ProvideFrames, ProvideFramesProps, RedirectState, UseServerState, redirect, render };
+export { Frame, NotFoundError, ProvideFrames, ProvideFramesProps, RedirectState, UseServerState, mapFrames, redirect, render, useServerMiddleware };

package/dist/index.mjs

@@ -2,7 +2,39 @@ import { ClientFrame, FetchFrameProvider } from "./client.mjs";
 import { cache } from "react";
 import { getContext } from "remix/async-context-middleware";
 import { jsx } from "react/jsx-runtime";
+import "remix/route-pattern";
 //#region src/frames.tsx
+function mapFrames(router, frames, { components, middleware }, config) {
+	for (let [key, frame] of Object.entries(frames)) if (typeof frame.pattern?.test === "function") {
+		const handler = ({ request }) => {
+			const { createTemporaryReferenceSet, fetchFrame, prerender, renderToReadableStream } = config;
+			return render({
+				createTemporaryReferenceSet,
+				prerender,
+				renderToReadableStream,
+				request,
+				root: /* @__PURE__ */ jsx(ProvideFrames, {
+					fetchFrame,
+					frames,
+					components,
+					children: /* @__PURE__ */ jsx(Frame, { src: request.url })
+				})
+			});
+		};
+		const action = {
+			handler,
+			middleware
+		};
+		let route = frame.pattern;
+		router.route("GET", route.source, action);
+		router.route("GET", route.source + ".rsc", action);
+		router.route("POST", route.source, action);
+		router.route("POST", route.source + ".rsc", action);
+	} else mapFrames(router, frame, {
+		components: components[key],
+		middleware
+	}, config);
+}
 var UseServerState = class {
 	formState;
 	returnValue;
@@ -21,6 +53,35 @@ var RedirectState = class {
 		this.location = location;
 	}
 };
+function useServerMiddleware({ createTemporaryReferenceSet, decodeAction, decodeFormState, decodeReply, loadServerAction }) {
+	return async ({ request, set }, next) => {
+		let formState;
+		let returnValue;
+		let temporaryReferences;
+		let actionStatus;
+		if (request.method === "POST") {
+			const actionId = request.headers.get("x-rsc-action");
+			if (actionId) try {
+				const body = request.headers.get("content-type")?.startsWith("multipart/form-data") ? await request.formData() : await request.text();
+				temporaryReferences = createTemporaryReferenceSet();
+				const args = await decodeReply(body, { temporaryReferences });
+				returnValue = (await loadServerAction(actionId)).apply(null, args);
+				await returnValue;
+			} catch (e) {
+				actionStatus = 500;
+				returnValue = Promise.reject(e);
+			}
+			else try {
+				const formData = await request.formData();
+				formState = await decodeFormState(await (await decodeAction(formData))(), formData);
+			} catch (e) {
+				console.error(e);
+			}
+		}
+		set(UseServerState, new UseServerState(formState, returnValue, temporaryReferences, actionStatus));
+		return next();
+	};
+}
 function redirect(location) {
 	getContext().set(RedirectState, new RedirectState(location));
 }
@@ -103,4 +164,4 @@ function match(frames, components, href) {
 	}
 }
 //#endregion
-export { Frame, NotFoundError, ProvideFrames, RedirectState, UseServerState, redirect, render };
+export { Frame, NotFoundError, ProvideFrames, RedirectState, UseServerState, mapFrames, redirect, render, useServerMiddleware };

package/dist/vite/entry.client.tsx

@@ -5,119 +5,16 @@ import {
   encodeReply,
   setServerCallback,
 } from "@vitejs/plugin-rsc/browser";
-import { startTransition, StrictMode, use, useState } from "react";
-import { hydrateRoot } from "react-dom/client";
-import { rscStream } from "rsc-html-stream/client";
 
+import { createServerCallback, hydrate } from "react-server-frame/browser";
 import type { Payload } from "../generic-payload.ts";
 
-setServerCallback(async (id, args) => {
-  const url = new URL(window.location.href);
-  url.pathname += ".rsc";
-  const temporaryReferences = createTemporaryReferenceSet();
-  const payload = await createFromFetch<Payload>(
-    fetch(url, {
-      method: "POST",
-      body: await encodeReply(args, { temporaryReferences }),
-      headers: {
-        "x-rsc-action": id,
-      },
-    }),
-    { temporaryReferences },
-  );
-  if (payload.type === "render") {
-    startTransition(() => {
-      setPayload(Promise.resolve(payload));
-    });
-  }
-  if (payload.type === "redirect") {
-    if (window.navigation) {
-      navigate(payload.redirect);
-    } else {
-      window.location.href = payload.redirect;
-    }
-  }
-  return payload.returnValue;
-});
-
-createFromReadableStream<Payload>(rscStream).then(
-  (payload) =>
-    startTransition(() => {
-      hydrateRoot(
-        document,
-        <StrictMode>
-          <Content initialPayload={Promise.resolve(payload)} />
-        </StrictMode>,
-        {
-          formState: payload.formState,
-        },
-      );
-    }),
-  (reason) => console.error("Failed to hydrate root", reason),
+setServerCallback(
+  createServerCallback({
+    createFromFetch: (response, options) => createFromFetch<Payload>(response, options),
+    createTemporaryReferenceSet,
+    encodeReply,
+  }),
 );
 
-let setPayload: (payload: Promise<Payload>) => void;
-
-let seenPayloads = new WeakSet<Payload>();
-
-function Content({ initialPayload }: { initialPayload: Promise<Payload> }) {
-  const [promise, _setPayload] = useState(initialPayload);
-  setPayload = _setPayload;
-
-  const payload = use(promise);
-
-  if (payload.type === "redirect") {
-    if (window.navigation) {
-      if (!seenPayloads) {
-        navigate(payload.redirect);
-      }
-      return null;
-    } else {
-      window.location.href = payload.redirect;
-      return null;
-    }
-  }
-
-  return payload.root;
-}
-
-let navigationController = new AbortController();
-function navigate(to: string) {
-  const url = new URL(to, window.location.href);
-  url.pathname += ".rsc";
-
-  if (window.location.host !== url.host) {
-    window.location.href = url.href;
-    return;
-  }
-
-  let thisController = new AbortController();
-  startTransition(() =>
-    setPayload(createFromFetch<Payload>(fetch(url, { signal: thisController.signal }))),
-  );
-  navigationController.abort();
-  navigationController = thisController;
-}
-
-window.navigation?.addEventListener("navigate", (event) => {
-  if (!event.canIntercept) {
-    return;
-  }
-
-  if (event.hashChange || event.downloadRequest !== null) {
-    return;
-  }
-
-  event.intercept({
-    async handler() {
-      navigate(event.destination.url);
-    },
-  });
-});
-
-if (import.meta.hot) {
-  import.meta.hot.on("rsc:update", (e) => {
-    console.log("[vite-rsc:update]", e.file);
-    navigate(location.href);
-  });
-}
+hydrate({ createFromFetch, createFromReadableStream });

package/dist/vite/entry.ssr.tsx

@@ -6,7 +6,8 @@ import { injectRSCPayload } from "rsc-html-stream/server";
 import type { Payload } from "../generic-payload.ts";
 
 export async function prerender(body: ReadableStream<Uint8Array>) {
-  const [decodeBody, inlineBody] = body.tee();
+  const [decodeBody, _formStateBody] = body.tee();
+  const [formStateBody, inlineBody] = _formStateBody.tee();
 
   let decode: Promise<Payload> | undefined;
   function Content() {
@@ -31,8 +32,11 @@ export async function prerender(body: ReadableStream<Uint8Array>) {
   try {
     const bootstrapScriptContent = await import.meta.viteRsc.loadBootstrapScriptContent("index");
 
+    const payload = await createFromReadableStream<Payload>(formStateBody);
+
     const html = await renderToReadableStream(<Content />, {
       bootstrapScriptContent,
+      formState: payload.formState,
       onError(reason: unknown) {
         if (
           typeof reason === "object" &&
@@ -46,7 +50,6 @@ export async function prerender(body: ReadableStream<Uint8Array>) {
       },
     });
 
-    const payload = await decode;
     return new Response(html.pipeThrough(injectRSCPayload(inlineBody)), {
       status: payload!.type === "redirect" ? 302 : notFoundError ? 404 : 200,
       headers: {

package/dist/vite/fetch-frame.mjs

@@ -1,18 +1,10 @@
 "use client";
+import { fetchFrame as fetchFrame$1 } from "../client.mjs";
 //#region src/vite/fetch-frame.ts
 if (typeof document !== "undefined") import("@vitejs/plugin-rsc/browser");
 async function fetchFrame(url, signal) {
 	const { createFromFetch } = await import("@vitejs/plugin-rsc/browser");
-	url.pathname += ".rsc";
-	const payload = await createFromFetch(fetch(url, { signal }));
-	if (payload.type === "redirect") if (window.navigation) return Promise.resolve(window.navigation.navigate(payload.redirect, { history: "replace" }).finished).then(() => {
-		return null;
-	});
-	else {
-		window.location.href = payload.redirect;
-		return;
-	}
-	return payload.root;
+	return fetchFrame$1(url, signal, createFromFetch);
 }
 //#endregion
 export { fetchFrame };

package/dist/vite/frames.d.mts

@@ -1,10 +1,13 @@
-import { ProvideFrames as ProvideFrames$1 } from "../index.mjs";
+import { ProvideFrames as ProvideFrames$1, mapFrames as mapFrames$1 } from "../index.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Middleware } from "remix/fetch-router";
+import { Route } from "remix/fetch-router/routes";
 
 //#region src/vite/frames.d.ts
+interface Routes extends Record<string, Route | Routes> {}
+declare function mapFrames<Frames extends Routes>(router: Parameters<typeof mapFrames$1<Frames>>[0], frames: Parameters<typeof mapFrames$1<Frames>>[1], actions: Parameters<typeof mapFrames$1<Frames>>[2]): void;
 declare function useServerMiddleware(): Middleware;
 declare function render(request: Request, root: React.ReactNode): Promise<Response>;
 declare function ProvideFrames(props: Omit<React.ComponentProps<typeof ProvideFrames$1>, "fetchFrame">): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ProvideFrames, render, useServerMiddleware };
+export { ProvideFrames, mapFrames, render, useServerMiddleware };

package/dist/vite/frames.mjs

@@ -1,41 +1,26 @@
-import { ProvideFrames as ProvideFrames$1, UseServerState, render as render$1 } from "../index.mjs";
+import { ProvideFrames as ProvideFrames$1, mapFrames as mapFrames$1, render as render$1, useServerMiddleware as useServerMiddleware$1 } from "../index.mjs";
 import { fetchFrame } from "./fetch-frame.mjs";
 import { jsx } from "react/jsx-runtime";
 import { createTemporaryReferenceSet, decodeAction, decodeFormState, decodeReply, loadServerAction, renderToReadableStream } from "@vitejs/plugin-rsc/rsc";
 //#region src/vite/frames.tsx
+function mapFrames(router, frames, actions) {
+	return mapFrames$1(router, frames, actions, {
+		createTemporaryReferenceSet,
+		fetchFrame,
+		prerender: async (...args) => {
+			return (await import.meta.viteRsc.import("./entry.ssr.tsx", { environment: "ssr" })).prerender(...args);
+		},
+		renderToReadableStream
+	});
+}
 function useServerMiddleware() {
-	return async ({ request, set }, next) => {
-		let formState;
-		let returnValue;
-		let temporaryReferences;
-		let actionStatus;
-		if (request.method === "POST") {
-			const actionId = request.headers.get("x-rsc-action");
-			if (actionId) {
-				const body = request.headers.get("content-type")?.startsWith("multipart/form-data") ? await request.formData() : await request.text();
-				temporaryReferences = createTemporaryReferenceSet();
-				const args = await decodeReply(body, { temporaryReferences });
-				const action = await loadServerAction(actionId);
-				try {
-					returnValue = action.apply(null, args);
-					await returnValue;
-				} catch (e) {
-					actionStatus = 500;
-					returnValue = Promise.reject(e);
-				}
-			} else {
-				const formData = await request.formData();
-				const decodedAction = await decodeAction(formData);
-				try {
-					formState = await decodeFormState(await decodedAction(), formData);
-				} catch (e) {
-					console.error(e);
-				}
-			}
-		}
-		set(UseServerState, new UseServerState(formState, returnValue, temporaryReferences, actionStatus));
-		return next();
-	};
+	return useServerMiddleware$1({
+		createTemporaryReferenceSet,
+		decodeAction,
+		decodeFormState,
+		decodeReply,
+		loadServerAction
+	});
 }
 async function render(request, root) {
 	return render$1({
@@ -53,4 +38,4 @@ function ProvideFrames(props) {
 	});
 }
 //#endregion
-export { ProvideFrames, render, useServerMiddleware };
+export { ProvideFrames, mapFrames, render, useServerMiddleware };

package/dist/vite/plugin.d.mts

@@ -1,7 +1,7 @@
 import * as Vite from "vite";
 
 //#region src/vite/plugin.d.ts
-declare function framework({
+declare function reactServerFrame({
   entry
 }?: {
   entry?: string;
@@ -10,4 +10,4 @@ declare function framework({
   config(this: Vite.ConfigPluginContext, userConfig: Vite.UserConfig): Record<string, any>;
 };
 //#endregion
-export { framework };
+export { reactServerFrame };

package/dist/vite/plugin.mjs

@@ -5,7 +5,7 @@ import * as Vite from "vite";
 function getEntry(file) {
 	return Vite.normalizePath(path.join(path.dirname(fileURLToPath(import.meta.url)), file));
 }
-function framework({ entry = "/src/entry.server" } = {}) {
+function reactServerFrame({ entry = "/src/entry.server" } = {}) {
 	return {
 		name: "framework",
 		config(userConfig) {
@@ -18,4 +18,4 @@ function framework({ entry = "/src/entry.server" } = {}) {
 	};
 }
 //#endregion
-export { framework };
+export { reactServerFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-server-frame",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A new type of RSC routing.",
   "homepage": "https://github.com/jacob-ebey/react-server-frame#readme",
   "bugs": {
@@ -19,6 +19,7 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.mjs",
+    "./browser": "./dist/browser.mjs",
     "./client": "./dist/client.mjs",
     "./vite/fetch-frame": "./dist/vite/fetch-frame.mjs",
     "./vite/frames": "./dist/vite/frames.mjs",