react-server-frame 0.0.1

package/README.md

@@ -0,0 +1,69 @@
+# A new type of RSC routing based on `<Frame />`
+
+New type of RSC routing inspired by iFrames and Remix 3.
+
+## How it works
+
+### Define your routes
+
+```ts
+import { route } from "remix/fetch-router/routes";
+
+export const routes = route({
+  frames: {
+    home: "/",
+    about: "/about",
+    partials: {
+      sidebar: "/frame/sidebar",
+    },
+  },
+});
+```
+
+### Map your components and render a `<Frame />` for the current location
+
+```tsx
+const router = createRouter();
+
+router.route("ANY", "*", {
+  handler: ({ request }) => {
+    return render(
+      request,
+      <ProvideFrames
+        frames={routes.frames}
+        components={{
+          about: About,
+          home: Home,
+          partials: {
+            sidebar: Sidebar,
+          },
+        }}
+      >
+        <Frame src={request.url} />
+      </ProvideFrames>,
+    );
+  },
+});
+```
+
+### Nest frames
+
+```tsx
+<Suspense fallback={<p>Loading sidebar...</p>}>
+  <Frame src={routes.frames.partials.sidebar.href()} />
+</Suspense>
+```
+
+### Revalidate frames
+
+```tsx
+"use client";
+
+import { useFrame } from "react-server-frame/client";
+
+export function ReloadFrame() {
+  const { pending, reload } = useFrame();
+
+  return <button onClick={reload}>Reload{pending ? "ing..." : ""}</button>;
+}
+```

package/dist/client.d.mts

@@ -0,0 +1,24 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/frames.client.d.ts
+type Frame = {
+  pending: boolean;
+  reload: () => void;
+};
+declare function FetchFrameProvider({
+  children,
+  fetchFrame
+}: {
+  children: React.ReactNode;
+  fetchFrame?: (url: URL, signal: AbortSignal) => Promise<React.ReactNode>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function useFrame(): Frame;
+declare function ClientFrame({
+  children,
+  src
+}: {
+  children?: React.ReactNode;
+  src: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ClientFrame, FetchFrameProvider, useFrame };

package/dist/client.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { createContext, use, useCallback, useMemo, useRef, useState, useTransition } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/frames.client.tsx
+const FrameContext = createContext(void 0);
+FrameContext.displayName = "FrameContext";
+const FetchFrameContext = createContext(void 0);
+function FetchFrameProvider({ children, fetchFrame }) {
+	return /* @__PURE__ */ jsx(FetchFrameContext.Provider, {
+		value: fetchFrame,
+		children
+	});
+}
+function useFrame() {
+	let frame = use(FrameContext);
+	if (!frame) throw new Error("useFrame must be used within a Frame / ClientFrame");
+	return frame;
+}
+function isPromise(value) {
+	return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
+}
+function ClientFrame({ children, src }) {
+	const [_content, setContent] = useState(children);
+	const content = isPromise(_content) ? use(_content) : _content;
+	const [pending, startTransition] = useTransition();
+	const [lastChildren, setLastChildren] = useState(children);
+	if (lastChildren !== children) {
+		setLastChildren(children);
+		setContent(children);
+	}
+	const controllerRef = useRef(void 0);
+	const fetchFrame = use(FetchFrameContext);
+	const reload = useCallback(() => {
+		if (!fetchFrame) throw new Error("FetchFrameContext is not provided");
+		const thisController = new AbortController();
+		startTransition(() => setContent(fetchFrame(new URL(src, window.location.href), thisController.signal)));
+		controllerRef.current?.abort();
+		controllerRef.current = thisController;
+	}, [fetchFrame, src]);
+	const frame = useMemo(() => {
+		return {
+			pending,
+			reload
+		};
+	}, [pending, reload]);
+	return /* @__PURE__ */ jsx(FrameContext.Provider, {
+		value: frame,
+		children: content
+	});
+}
+//#endregion
+export { ClientFrame, FetchFrameProvider, useFrame };

package/dist/index.d.mts

@@ -0,0 +1,57 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactFormState } from "react-dom/client";
+import { Route } from "remix/fetch-router/routes";
+
+//#region src/frames.d.ts
+declare class UseServerState {
+  formState?: ReactFormState;
+  returnValue?: Promise<unknown>;
+  temporaryReferences?: unknown;
+  status?: number;
+  constructor(formState: ReactFormState | undefined, returnValue: Promise<unknown> | undefined, temporaryReferences: unknown, status: number | undefined);
+}
+declare class RedirectState {
+  location: string;
+  constructor(location: string);
+}
+declare function redirect(location: string): void;
+declare function render({
+  createTemporaryReferenceSet,
+  prerender,
+  renderToReadableStream,
+  request,
+  root
+}: {
+  createTemporaryReferenceSet: () => unknown;
+  prerender: (body: ReadableStream<Uint8Array>) => Promise<Response>;
+  renderToReadableStream: (payload: any, options: {
+    temporaryReferences: unknown;
+    onError: (error: unknown) => string | undefined;
+  }) => ReadableStream<Uint8Array>;
+  request: Request;
+  root: React.ReactNode;
+}): Promise<Response>;
+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 ProvideFramesProps<Frames extends Routes> = {
+  children?: React.ReactNode;
+  components: Components<Frames>;
+  fetchFrame: (url: URL, signal: AbortSignal) => Promise<React.ReactNode>;
+  frames: Frames;
+};
+declare function ProvideFrames<Frames extends Routes>({
+  children,
+  components,
+  fetchFrame,
+  frames
+}: ProvideFramesProps<Frames>): _$react_jsx_runtime0.JSX.Element;
+declare function Frame({
+  src
+}: {
+  src: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Frame, NotFoundError, ProvideFrames, ProvideFramesProps, RedirectState, UseServerState, redirect, render };

package/dist/index.mjs

@@ -0,0 +1,106 @@
+import { ClientFrame, FetchFrameProvider } from "./client.mjs";
+import { cache } from "react";
+import { getContext } from "remix/async-context-middleware";
+import { jsx } from "react/jsx-runtime";
+//#region src/frames.tsx
+var UseServerState = class {
+	formState;
+	returnValue;
+	temporaryReferences;
+	status;
+	constructor(formState, returnValue, temporaryReferences, status) {
+		this.formState = formState;
+		this.returnValue = returnValue;
+		this.temporaryReferences = temporaryReferences;
+		this.status = status;
+	}
+};
+var RedirectState = class {
+	location;
+	constructor(location) {
+		this.location = location;
+	}
+};
+function redirect(location) {
+	getContext().set(RedirectState, new RedirectState(location));
+}
+async function render({ createTemporaryReferenceSet, prerender, renderToReadableStream, request, root }) {
+	const ctx = getContext();
+	let redirect;
+	try {
+		redirect = ctx.get(RedirectState);
+	} catch {}
+	let state;
+	try {
+		state = ctx.get(UseServerState);
+	} catch {}
+	try {
+		const body = renderToReadableStream(redirect ? {
+			type: "redirect",
+			redirect: redirect.location,
+			returnValue: state?.returnValue
+		} : {
+			type: "render",
+			root,
+			returnValue: state?.returnValue,
+			formState: state?.formState
+		}, {
+			temporaryReferences: state?.temporaryReferences ?? createTemporaryReferenceSet(),
+			onError(error) {
+				if (error instanceof NotFoundError) return "404";
+				if (request.signal.aborted) return;
+				console.error(error);
+			}
+		});
+		if (new URL(request.url).pathname.endsWith(".rsc")) return new Response(body, { headers: { "Content-Type": "text/x-component; charset=utf-8" } });
+		return await prerender(body);
+	} catch (reason) {
+		if (reason instanceof Error && reason.name === "NotFoundError") return new Response("Not Found", { status: 404 });
+		if (!request.signal.aborted) console.error(reason);
+		return new Response("Internal Server Error", { status: 500 });
+	}
+}
+const frameCache = cache(() => ({}));
+var NotFoundError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "NotFoundError";
+	}
+};
+function ProvideFrames({ children, components, fetchFrame, frames }) {
+	const cache = frameCache();
+	cache.components = {
+		...cache.components,
+		...components
+	};
+	cache.frames = {
+		...cache.frames,
+		...frames
+	};
+	return /* @__PURE__ */ jsx(FetchFrameProvider, {
+		fetchFrame,
+		children
+	});
+}
+function Frame({ src }) {
+	const cache = frameCache();
+	if (!cache.components || !cache.frames) throw new Error("No frames provided");
+	const url = new URL(src, "http://react-server-frame/");
+	if (url.pathname.endsWith(".rsc")) url.pathname = url.pathname.slice(0, -4);
+	const Component = match(cache.frames, cache.components, url.href);
+	if (!Component) throw new NotFoundError("No matching frame found");
+	return /* @__PURE__ */ jsx(ClientFrame, {
+		src: url.pathname + url.search,
+		children: /* @__PURE__ */ jsx(Component, {})
+	});
+}
+function match(frames, components, href) {
+	for (const [id, route] of Object.entries(frames)) if (typeof route.pattern?.test === "function") {
+		if (route.pattern.test(href)) return components?.[id];
+	} else {
+		let matched = match(route, components?.[id], href);
+		if (matched) return matched;
+	}
+}
+//#endregion
+export { Frame, NotFoundError, ProvideFrames, RedirectState, UseServerState, redirect, render };

package/dist/vite/entry.client.tsx

@@ -0,0 +1,123 @@
+import {
+  createFromFetch,
+  createFromReadableStream,
+  createTemporaryReferenceSet,
+  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 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),
+);
+
+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);
+  });
+}

package/dist/vite/entry.ssr.tsx

@@ -0,0 +1,62 @@
+import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
+import { use } from "react";
+import { renderToReadableStream } from "react-dom/server";
+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();
+
+  let decode: Promise<Payload> | undefined;
+  function Content() {
+    decode ??= createFromReadableStream<Payload>(decodeBody);
+    const payload = use(decode);
+
+    if (payload.type === "redirect") {
+      return (
+        <html>
+          <head></head>
+          <body>
+            <meta http-equiv="refresh" content={`0; url=${payload.redirect}`} />
+          </body>
+        </html>
+      );
+    }
+
+    return <>{payload.root}</>;
+  }
+
+  let notFoundError = false;
+  try {
+    const bootstrapScriptContent = await import.meta.viteRsc.loadBootstrapScriptContent("index");
+
+    const html = await renderToReadableStream(<Content />, {
+      bootstrapScriptContent,
+      onError(reason: unknown) {
+        if (
+          typeof reason === "object" &&
+          reason !== null &&
+          "digest" in reason &&
+          reason.digest === "404"
+        ) {
+          notFoundError = true;
+          return reason.digest;
+        }
+      },
+    });
+
+    const payload = await decode;
+    return new Response(html.pipeThrough(injectRSCPayload(inlineBody)), {
+      status: payload!.type === "redirect" ? 302 : notFoundError ? 404 : 200,
+      headers: {
+        "Content-Type": "text/html; charset=utf-8",
+      },
+    });
+  } catch (reason) {
+    if (notFoundError) return new Response("Not Found", { status: 404 });
+
+    console.error("Failed to prerender", reason);
+    return new Response("Internal Server Error", { status: 500 });
+  }
+}

package/dist/vite/fetch-frame.d.mts

@@ -0,0 +1,6 @@
+import * as _$react from "react";
+
+//#region src/vite/fetch-frame.d.ts
+declare function fetchFrame(url: URL, signal: AbortSignal): Promise<string | number | bigint | boolean | Iterable<_$react.ReactNode> | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | _$react.ReactPortal | null | undefined>;
+//#endregion
+export { fetchFrame };

package/dist/vite/fetch-frame.mjs

@@ -0,0 +1,18 @@
+"use client";
+//#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;
+}
+//#endregion
+export { fetchFrame };

package/dist/vite/frames.d.mts

@@ -0,0 +1,10 @@
+import { ProvideFrames as ProvideFrames$1 } from "../index.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Middleware } from "remix/fetch-router";
+
+//#region src/vite/frames.d.ts
+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 };

package/dist/vite/frames.mjs

@@ -0,0 +1,56 @@
+import { ProvideFrames as ProvideFrames$1, UseServerState, render as render$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 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();
+	};
+}
+async function render(request, root) {
+	return render$1({
+		createTemporaryReferenceSet,
+		prerender: (await import.meta.viteRsc.import("./entry.ssr.tsx", { environment: "ssr" })).prerender,
+		renderToReadableStream,
+		request,
+		root
+	});
+}
+function ProvideFrames(props) {
+	return /* @__PURE__ */ jsx(ProvideFrames$1, {
+		...props,
+		fetchFrame
+	});
+}
+//#endregion
+export { ProvideFrames, render, useServerMiddleware };

package/dist/vite/plugin.d.mts

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

package/dist/vite/plugin.mjs

@@ -0,0 +1,21 @@
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
+import * as Vite from "vite";
+//#region src/vite/plugin.ts
+function getEntry(file) {
+	return Vite.normalizePath(path.join(path.dirname(fileURLToPath(import.meta.url)), file));
+}
+function framework({ entry = "/src/entry.server" } = {}) {
+	return {
+		name: "framework",
+		config(userConfig) {
+			return Vite.mergeConfig({ environments: {
+				client: { build: { rolldownOptions: { input: { index: getEntry("entry.client.tsx") } } } },
+				rsc: { build: { rolldownOptions: { input: { index: entry } } } },
+				ssr: { build: { rolldownOptions: { input: { index: getEntry("entry.ssr.tsx") } } } }
+			} }, userConfig, true);
+		}
+	};
+}
+//#endregion
+export { framework };

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "react-server-frame",
+  "version": "0.0.1",
+  "description": "A new type of RSC routing.",
+  "homepage": "https://github.com/jacob-ebey/react-server-frame#readme",
+  "bugs": {
+    "url": "https://github.com/jacob-ebey/react-server-frame/issues"
+  },
+  "license": "MIT",
+  "author": "Jacob Ebey <jacob.ebey@live.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jacob-ebey/react-server-frame.git"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./client": "./dist/client.mjs",
+    "./vite/fetch-frame": "./dist/vite/fetch-frame.mjs",
+    "./vite/frames": "./dist/vite/frames.mjs",
+    "./vite/plugin": "./dist/vite/plugin.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "prepublishOnly": "vp run build"
+  },
+  "dependencies": {
+    "rsc-html-stream": "0.0.7"
+  },
+  "devDependencies": {
+    "@types/dom-navigation": "^1.0.7",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-rsc": "^0.5.21",
+    "bumpp": "^11.0.1",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-server-dom-webpack": "catalog:",
+    "remix": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-react": "catalog:",
+    "@vitejs/plugin-rsc": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-server-dom-webpack": "catalog:",
+    "remix": "*",
+    "vite": "*"
+  },
+  "peerDependenciesMeta": {
+    "@vitejs/plugin-react": {
+      "optional": true
+    },
+    "@vitejs/plugin-rsc": {
+      "optional": true
+    },
+    "react-server-dom-webpack": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  }
+}