vike-react-rsc-rudder 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) nitedani and vike-react-rsc contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# `vike-react-rsc-rudder`
+
+React Server Components support for [Vike](https://vike.dev). This is a
+**RudderJS-maintained fork** of [`vike-react-rsc`](https://github.com/nitedani/vike-react-rsc)
+by **nitedani**, **MIT-licensed** (see `LICENSE`). Copyright for the original
+work remains with nitedani and contributors; the fork's changes are documented
+below.
+
+## Why this fork exists
+
+The working version of the upstream package (`1.0.0`) lives **only** in the
+GitHub repository — npm has nothing but a `0.0.0` stub published in 2024-04, and
+the upstream "Publish?" request ([issue #3](https://github.com/nitedani/vike-react-rsc/issues/3),
+2025-11-13) is unanswered. RudderJS's RSC integration needs an installable,
+versioned package, so we publish this maintained fork.
+
+### Why the name isn't `@rudderjs/…`
+
+Vike's config-extension mechanism only recognizes an extension's `extends`
+import (and turns it into a pointer import) when the package name **starts with
+`vike-`** — see `path.startsWith('vike-') && path.endsWith('/config')` in vike's
+`transpileWithEsbuild`. A scoped `@rudderjs/…` name isn't detected, so apps
+would have to add a `with { type: 'vike:pointer' }` attribute to the `extends`
+import in every `+config.ts`. Keeping the unscoped `vike-*` convention (as
+`vike-react`, `vike-vue`, … all do) means RSC apps wire it up with a plain
+`extends: [vikeReactRsc]` and no per-app ceremony. The `-rudder` suffix marks
+it as our fork and distinguishes it from upstream's `vike-react-rsc`.
+
+It is consumed by `@rudderjs/vite`'s view scanner, which detects either
+`vike-react-rsc-rudder` (preferred) or the legacy upstream `vike-react-rsc` name
+and generates RSC page stubs that import from whichever is installed.
+
+## Source
+
+- Upstream: https://github.com/nitedani/vike-react-rsc
+- Forked at commit: `094054c7649d70707b8f5749ca3e22e33a67801f` (2025-12-06,
+  upstream `main` HEAD as of forking)
+
+## Changes from upstream
+
+- `package.json`: renamed to `vike-react-rsc-rudder`; published publicly
+  (`publishConfig.access: public`); `@vitejs/plugin-rsc` moved from
+  `devDependencies` to `dependencies` (the build externalizes it, so consumers
+  need it at runtime); `react` / `react-dom` / `vite` / `vike` dev pins aligned
+  to the RudderJS monorepo versions.
+- `src/constants.ts` + `src/config.ts`: the package self-references
+  (`PKG_NAME`, the vike config `name`, and the `import:…/__internal/…`
+  specifiers) updated to the fork package name.
+- `src/config.ts`: config import strings name the export (`:default`) — vike
+  ≥0.4.257 requires it; the upstream 1.0.0 (built against 0.4.246) omitted it,
+  which crashed vike's dev `optimizeDeps`.
+- `src/config.ts`: the SSR build's `rollupOptions.input` also includes Vike's
+  server entry (`entry: serverEntryVirtualId`). Upstream targets `vike-server`
+  (no `+server.ts`); RudderJS uses the `+server.ts` → `app.fetch` model, where
+  `@brillout/vite-plugin-server-entry` needs that entry — otherwise the
+  production build fails with "Cannot find build server entry".
+- `src/plugin/plugins/injectManifestBuild.ts`: the page-entry virtual id was
+  renamed by vike (`virtual:vike:pageConfigValuesAll:server:` →
+  `virtual:vike:page-entry:server:`, vike ≥0.4.257). Without the rename the
+  production RSC manifest is empty and rendering 500s ("Cannot read properties
+  of undefined (reading 'getConfig')"). The module shape
+  (`configValuesSerialized`) is unchanged.
+- Added this file and `LICENSE` (the upstream repo ships no `LICENSE` file
+  despite declaring MIT in `package.json`).
+
+Source is otherwise unmodified. Build: `tsdown --clean` (→ `dist/`). The vike
+version-compat changes above (config import strings, the page-entry virtual id)
+should be re-checked whenever vike is bumped.
+
+## Re-syncing from upstream
+
+Re-copy `src/`, `tsdown.config.ts`, and `tsconfig.json` from a newer upstream
+commit, then re-apply the changes above. Update the commit hash in this file.

package/dist/cache-BCYpxG4P.js

@@ -0,0 +1,164 @@
+import { getGlobalObject } from "./getGlobalObject-CzWO6NfD.js";
+
+//#region src/runtime/client/globalState.ts
+function getGlobalClientState() {
+	return getGlobalObject("globalState.ts", {
+		rscCache: new Map(),
+		serverComponentCache: new Map(),
+		pendingRequests: new Map(),
+		isRscCall: false
+	});
+}
+
+//#endregion
+//#region src/runtime/cache.ts
+const DEFAULT_STALE_TIME = 60 * 1e3;
+/**
+* Get the cache key for a page context
+*/
+function getCacheKey(pageContext) {
+	return `${pageContext.urlPathname}${pageContext.urlParsed.searchOriginal || ""}`;
+}
+/**
+* Get stale time from page context
+*/
+function getStaleTime(pageContext) {
+	const userConfig = pageContext.config?.rsc;
+	return userConfig?.staleTime !== void 0 ? userConfig.staleTime : DEFAULT_STALE_TIME;
+}
+/**
+* Get a cached entry if it exists and is not stale
+*/
+function getCachedPayload(pageContext) {
+	if (typeof window === "undefined") return null;
+	const staleTime = getStaleTime(pageContext);
+	if (staleTime === 0) return null;
+	const globalState = getGlobalClientState();
+	const cacheKey = getCacheKey(pageContext);
+	const cachedEntry = globalState.rscCache.get(cacheKey);
+	if (cachedEntry && Date.now() - cachedEntry.timestamp < staleTime) {
+		console.log("[RSC Cache] Using cached payload for", cacheKey);
+		return cachedEntry.payload;
+	}
+	return null;
+}
+/**
+* Store a payload in the cache
+*/
+function cachePayload(pageContext, payload) {
+	if (typeof window === "undefined") return;
+	const staleTime = getStaleTime(pageContext);
+	if (staleTime === 0) return;
+	const globalState = getGlobalClientState();
+	const cacheKey = getCacheKey(pageContext);
+	globalState.rscCache.set(cacheKey, {
+		payload,
+		timestamp: Date.now()
+	});
+	console.log("[RSC Cache] Stored payload for", cacheKey);
+}
+/**
+* Invalidate the cache entry for a specific page
+*/
+function invalidateCache(pageContext) {
+	if (typeof window === "undefined") return;
+	const globalState = getGlobalClientState();
+	const cacheKey = getCacheKey(pageContext);
+	if (globalState.rscCache.has(cacheKey)) {
+		globalState.rscCache.delete(cacheKey);
+		console.log("[RSC Cache] Invalidated main cache for", cacheKey);
+	}
+}
+/**
+* Mark all server component cache entries as stale
+* This is useful when a server action changes data that server components depend on
+*/
+function invalidateServerComponentCache() {
+	if (typeof window === "undefined") return;
+	const globalState = getGlobalClientState();
+	if (globalState.serverComponentCache.size > 0) {
+		let staleCount = 0;
+		globalState.serverComponentCache.forEach((entry) => {
+			if (!entry.isStale) {
+				entry.isStale = true;
+				staleCount++;
+			}
+		});
+		if (staleCount > 0) console.log(`[RSC Cache] Marked ${staleCount} server component cache entries as stale`);
+	}
+}
+/**
+* Clear all pending server component requests
+* This is useful when navigating between pages or when invalidating the cache
+*/
+function clearPendingServerComponentRequests() {
+	if (typeof window === "undefined") return;
+	const globalState = getGlobalClientState();
+	globalState.pendingRequests.clear();
+	console.log("[RSC Cache] Cleared pending server component requests");
+}
+/**
+* Get a cached server component if it exists
+* Returns the component even if it's stale (stale-while-revalidate pattern)
+* The caller should check the isStale flag and trigger a revalidation if needed
+*/
+function getCachedServerComponent(key, pageContext) {
+	if (typeof window === "undefined") return {
+		component: null,
+		isStale: false
+	};
+	const staleTime = getStaleTime(pageContext);
+	const globalState = getGlobalClientState();
+	const cachedEntry = globalState.serverComponentCache.get(key);
+	if (staleTime === 0) return {
+		component: null,
+		isStale: false
+	};
+	if (!cachedEntry) return {
+		component: null,
+		isStale: false
+	};
+	const componentName = key.split("-")[0];
+	const isExplicitlyStale = cachedEntry.isStale === true;
+	const isTimeStale = Date.now() - cachedEntry.timestamp >= staleTime;
+	const isStale = isExplicitlyStale || isTimeStale;
+	if (isStale) console.log(`[RSC Cache] Using stale server component: ${componentName}`);
+	else console.log(`[RSC Cache] Using fresh server component: ${componentName}`);
+	return {
+		component: cachedEntry.payload.returnValue,
+		isStale
+	};
+}
+/**
+* Mark a server component as being revalidated
+*/
+function markServerComponentRevalidating(key) {
+	if (typeof window === "undefined") return;
+	const globalState = getGlobalClientState();
+	const cachedEntry = globalState.serverComponentCache.get(key);
+	if (cachedEntry) {
+		cachedEntry.revalidating = true;
+		const componentName = key.split("-")[0];
+		console.log(`[RSC Cache] Revalidating server component: ${componentName}`);
+	}
+}
+/**
+* Store a server component in the cache
+*/
+function cacheServerComponent(key, component, pageContext) {
+	if (typeof window === "undefined") return;
+	const staleTime = getStaleTime(pageContext);
+	if (staleTime === 0) return;
+	const globalState = getGlobalClientState();
+	globalState.serverComponentCache.set(key, {
+		payload: { returnValue: component },
+		timestamp: Date.now(),
+		isStale: false,
+		revalidating: false
+	});
+	const componentName = key.split("-")[0];
+	console.log(`[RSC Cache] Stored fresh server component: ${componentName}`);
+}
+
+//#endregion
+export { cachePayload, cacheServerComponent, clearPendingServerComponentRequests, getCachedPayload, getCachedServerComponent, getGlobalClientState, invalidateCache, invalidateServerComponentCache, markServerComponentRevalidating };

package/dist/client-BpZo3JRu.js

@@ -0,0 +1,86 @@
+import { cachePayload, clearPendingServerComponentRequests, getCachedPayload, getGlobalClientState, invalidateCache, invalidateServerComponentCache } from "./cache-BCYpxG4P.js";
+import { startTransition } from "react";
+import envName from "virtual:enviroment-name";
+import { tinyassert } from "@hiogawa/utils";
+import * as ReactClient from "@vitejs/plugin-rsc/react/browser";
+
+//#region src/runtime/client.tsx
+tinyassert(envName === "client", "Invalid environment");
+function getVikeUrlOriginal(pageContext) {
+	return `${pageContext.urlPathname === "/" ? "" : pageContext.urlPathname}/index.pageContext.json${pageContext.urlParsed.searchOriginal || ""}`;
+}
+async function callServer(id, args) {
+	const globalState = getGlobalClientState();
+	const isRscCall = globalState.isRscCall;
+	console.log("[RSC Client] Calling server action:", id, isRscCall ? "(from server component)" : "");
+	const result = await ReactClient.createFromFetch(fetch("/_rsc", {
+		method: "POST",
+		headers: {
+			"x-rsc-action": id,
+			"x-vike-urloriginal": getVikeUrlOriginal(globalState.pageContext),
+			...isRscCall ? { "x-rsc-component-call": "true" } : {}
+		},
+		body: await ReactClient.encodeReply(args)
+	}));
+	if (result.root) {
+		console.log("[RSC Client] Server action triggered re-render");
+		startTransition(() => {
+			globalState.setPayload?.((current) => {
+				cachePayload(current.pageContext, result);
+				return {
+					pageContext: current.pageContext,
+					payload: result
+				};
+			});
+		});
+	} else {
+		console.log("[RSC Client] Server action returned without re-render");
+		if (!isRscCall && typeof window !== "undefined") {
+			if (globalState.pageContext) invalidateCache(globalState.pageContext);
+		}
+	}
+	if (!isRscCall) invalidateServerComponentCache();
+	return result.returnValue;
+}
+ReactClient.setServerCallback(callServer);
+if (import.meta.hot) import.meta.hot.on("rsc:update", async () => {
+	const globalState = getGlobalClientState();
+	invalidateCache(getGlobalClientState().pageContext);
+	invalidateServerComponentCache();
+	const payload = await onNavigate(globalState.pageContext);
+	globalState.setPayload?.((current) => {
+		return {
+			pageContext: current.pageContext,
+			payload
+		};
+	});
+});
+function onNavigate(pageContext) {
+	console.log("[RSC Client] Navigation:", pageContext.urlPathname);
+	const globalState = getGlobalClientState();
+	clearPendingServerComponentRequests();
+	const cachedPayload = getCachedPayload(pageContext);
+	if (cachedPayload) {
+		globalState.navigationPromise = Promise.resolve(cachedPayload);
+		return Promise.resolve(cachedPayload);
+	}
+	console.log("[RSC Client] Fetching RSC payload for", pageContext.urlPathname);
+	const fetchPromise = ReactClient.createFromFetch(fetch("/_rsc", {
+		method: "GET",
+		headers: { "x-vike-urloriginal": getVikeUrlOriginal(pageContext) }
+	}));
+	globalState.navigationPromise = fetchPromise;
+	fetchPromise.then((payload) => {
+		cachePayload(pageContext, payload);
+	});
+	return fetchPromise;
+}
+async function parseRscStream(stream) {
+	console.log("[RSC Client] Parsing RSC stream...");
+	const initialPayload = await ReactClient.createFromReadableStream(stream);
+	console.log("[RSC Client] RSC stream parsed");
+	return initialPayload;
+}
+
+//#endregion
+export { onNavigate, parseRscStream };

package/dist/client.d.ts

@@ -0,0 +1 @@
+export { rsc } from "./runtime/rscBridge.js";

package/dist/client.js

@@ -0,0 +1,53 @@
+import "./getGlobalObject-CzWO6NfD.js";
+import { usePageContext } from "./pageContext-client-CmvZ4bmk.js";
+import { cacheServerComponent, getCachedServerComponent, getGlobalClientState, markServerComponentRevalidating } from "./cache-BCYpxG4P.js";
+import React, { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/runtime/rscBridge.tsx
+function rsc(c) {
+	return (props) => {
+		const pageContext = usePageContext();
+		const { fallback,...rest } = props;
+		const Loading = pageContext.config.Loading?.component || (() => null);
+		const fallback_ = fallback ?? /* @__PURE__ */ jsx(Loading, {});
+		const cacheKey = `${c.name}-${JSON.stringify(rest)}`;
+		const { component: cachedComponent, isStale } = getCachedServerComponent(cacheKey, pageContext);
+		const [comp, setComp] = React.useState(cachedComponent);
+		useEffect(() => {
+			const globalState = getGlobalClientState();
+			const fetchOrRevalidate = () => {
+				const pendingRequest = globalState.pendingRequests.get(cacheKey);
+				if (pendingRequest) {
+					console.log(`[RSC Client] Reusing pending request for ${c.name || "UnknownComponent"}`, rest);
+					pendingRequest.then((result) => {
+						setComp(result);
+					});
+				} else {
+					console.log(`[RSC Client] ${cachedComponent ? "Revalidating" : "Fetching"} server component ${c.name || "UnknownComponent"}`, rest);
+					if (cachedComponent) markServerComponentRevalidating(cacheKey);
+					globalState.isRscCall = true;
+					const serverComponentPromise = c(rest);
+					globalState.isRscCall = false;
+					const requestPromise = serverComponentPromise.then((result) => {
+						cacheServerComponent(cacheKey, result, pageContext);
+						globalState.pendingRequests.delete(cacheKey);
+						return result;
+					}).catch((error) => {
+						console.error("[RSC Client] Error fetching server component:", error);
+						globalState.pendingRequests.delete(cacheKey);
+						throw error;
+					});
+					globalState.pendingRequests.set(cacheKey, requestPromise);
+					requestPromise.then(setComp);
+				}
+			};
+			if (!cachedComponent || isStale) fetchOrRevalidate();
+		}, []);
+		if (!comp) return fallback_;
+		return comp;
+	};
+}
+
+//#endregion
+export { rsc };

package/dist/config.d.ts

@@ -0,0 +1,4 @@
+export { config as default };
+import type { Config } from "vike/types";
+declare const config: Config;
+import "./types/Config.js";