Merge pull request #222 from nksaraf/fix-rsc

fix: mjs chunks and rsc example fix
nksaraf · Feb 29, 2024 · 7fc1075 · 7fc1075
2 parents 3f9ab8f + 54214a7
commit 7fc1075
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 54 deletions.
diff --git a/.changeset/cuddly-pants-occur.md b/.changeset/cuddly-pants-occur.md
@@ -0,0 +1,9 @@
+---
+"@vinxi/react": patch
+"@vinxi/server-components": patch
+"@vinxi/server-functions": patch
+"vinxi": patch
+"app": patch
+---
+
+fix: mjs chunks and rsc example fix
diff --git a/examples/react/rsc/spa/app.config.js → examples/react/rsc/spa/app.config.mts b/examples/react/rsc/spa/app.config.js → examples/react/rsc/spa/app.config.mts
@@ -45,15 +45,12 @@ const app = createApp({
 					resolve: {
 						conditions: ["react-server"],
 					},
+					runtime: `@vinxi/react-server-dom/runtime`,
 				}),
 				serverComponents.serverActions(),
 			],
 		},
 	],
 });
 
-app.hooks.hook("app:build:router:vite:config:resolved", ({ vite }) => {
-	console.log(vite.build.rollupOptions.input);
-});
-
 export default app;
diff --git a/examples/react/rsc/spa/app/react-server.tsx b/examples/react/rsc/spa/app/react-server.tsx
@@ -64,9 +64,12 @@ export default eventHandler(async (event) => {
 		}
 	}
 
-	const serverAssets = await reactServerManifest.inputs[
-		reactServerManifest.handler
-	].assets();
+	const serverAssets = (
+		await reactServerManifest.inputs[reactServerManifest.handler].assets()
+	).filter(
+		(m) =>
+			(m.tag === "link" && m.attrs.rel === "stylesheet") || m.tag === "style",
+	);
 
 	const assets = await clientManifest.inputs[clientManifest.handler].assets();
 

diff --git a/examples/react/rsc/spa/app/server-action.tsx b/examples/react/rsc/spa/app/server-action.tsx
@@ -13,7 +13,11 @@ export default eventHandler(async (event) => {
 		if (serverReference) {
 			// This is the client-side case
 			const [filepath, name] = serverReference.split("#");
-			const action = (await getManifest("rsc").chunks[filepath].import())[name];
+			const action = (await getManifest("server").chunks[filepath].import())[
+				name
+			];
+
+			console.log(action.$$typeof);
 			// Validate that this is actually a function we intended to expose and
 			// not the client trying to invoke arbitrary functions. In a real app,
 			// you'd have a manifest verifying this before even importing it.

diff --git a/packages/vinxi-react/package.json b/packages/vinxi-react/package.json
@@ -12,7 +12,10 @@
   "exports": {
     ".": {
       "import": "./index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "react-server": {
+        "import": "./react-server.js"
+      }
     }
   },
   "typesVersions": {

diff --git a/packages/vinxi-react/react-server.js b/packages/vinxi-react/react-server.js
@@ -0,0 +1,29 @@
+import { Fragment, createElement } from "react";
+import { lazy } from "react";
+import { updateStyles } from "vinxi/css";
+
+import { renderAsset } from "./render-asset.js";
+
+export { renderAsset };
+// export { default as lazyRoute } from "./lazy-route.js";
+export const createAssets = (src, manifest) =>
+	lazy(async () => {
+		const assets = await manifest.inputs[src].assets();
+		const styles = assets.filter((asset) => asset.tag === "style");
+
+		if (typeof window !== "undefined" && import.meta.hot) {
+			import.meta.hot.on("css-update", (data) => {
+				updateStyles(styles, data);
+			});
+		}
+
+		return {
+			default: function Assets() {
+				return createElement(
+					Fragment,
+					undefined,
+					...assets.map((asset) => renderAsset(asset)),
+				);
+			},
+		};
+	});
diff --git a/packages/vinxi-server-components/client.js b/packages/vinxi-server-components/client.js
@@ -79,7 +79,7 @@ export function buildClientComponents({
 							output: {
 								minifyInternalExports: false,
 								entryFileNames: (chunk) => {
-									return chunk.name + ".js";
+									return chunk.name + ".mjs";
 								},
 							},
 						},

diff --git a/packages/vinxi-server-components/server-action.js b/packages/vinxi-server-components/server-action.js
@@ -4,6 +4,7 @@ import {
 	shimExportsPlugin,
 } from "@vinxi/plugin-directives";
 import { chunkify } from "vinxi/lib/chunks";
+import { config } from "vinxi/plugins/config";
 
 import { SERVER_REFERENCES_MANIFEST } from "./constants.js";
 
@@ -14,7 +15,7 @@ import { SERVER_REFERENCES_MANIFEST } from "./constants.js";
  */
 export function serverActions({
 	resolve = {
-		conditions: ["react-server"],
+		conditions: ["react-server", "node", "import", process.env.NODE_ENV],
 	},
 	runtime = "@vinxi/react-server-dom/runtime",
 	transpileDeps = ["react", "react-dom", "@vinxi/react-server-dom"],
@@ -24,6 +25,15 @@ export function serverActions({
 	const serverModules = new Set();
 	const clientModules = new Set();
 	return [
+		config("server-actions-resolve", {
+			ssr: {
+				resolve: {
+					externalConditions: resolve.conditions,
+					conditions: resolve.conditions,
+				},
+				noExternal: true,
+			},
+		}),
 		directives({
 			hash: chunkify,
 			runtime,

diff --git a/packages/vinxi-server-components/server.js b/packages/vinxi-server-components/server.js
@@ -14,7 +14,7 @@ import { SERVER_REFERENCES_MANIFEST } from "./constants.js";
  */
 export function server({
 	resolve = {
-		conditions: ["react-server"],
+		conditions: ["react-server", "node", "import", process.env.NODE_ENV],
 	},
 	runtime = "@vinxi/react-server-dom/runtime",
 	transpileDeps = ["react", "react-dom", "@vinxi/react-server-dom"],
@@ -84,7 +84,7 @@ export function server({
  */
 export function buildServerComponents({
 	resolve = {
-		conditions: ["react-server"],
+		conditions: ["react-server", "node", "import", process.env.NODE_ENV],
 	},
 	transpileDeps = ["react", "react-dom", "@vinxi/react-server-dom"],
 	manifest = SERVER_REFERENCES_MANIFEST,
@@ -133,25 +133,15 @@ export function buildServerComponents({
 								},
 								// we want to control the chunk names so that we can load them
 								// individually when server actions are called
-								chunkFileNames: "[name].js",
-								entryFileNames: "[name].js",
+								chunkFileNames: "[name].mjs",
+								entryFileNames: "[name].mjs",
 							},
 						},
 					},
 					ssr: {
 						resolve: {
-							externalConditions: [
-								...(resolve.conditions ?? []),
-								"node",
-								"import",
-								process.env.NODE_ENV,
-							],
-							conditions: [
-								...(resolve.conditions ?? []),
-								"node",
-								"import",
-								process.env.NODE_ENV,
-							],
+							externalConditions: resolve.conditions,
+							conditions: resolve.conditions,
 						},
 						noExternal: true,
 					},
@@ -160,18 +150,8 @@ export function buildServerComponents({
 				return {
 					ssr: {
 						resolve: {
-							externalConditions: [
-								...(resolve.conditions ?? []),
-								"node",
-								"import",
-								process.env.NODE_ENV,
-							],
-							conditions: [
-								...(resolve.conditions ?? []),
-								"node",
-								"import",
-								process.env.NODE_ENV,
-							],
+							externalConditions: resolve.conditions,
+							conditions: resolve.conditions,
 						},
 						noExternal: true,
 						external: transpileDeps,

diff --git a/packages/vinxi-server-functions/server.js b/packages/vinxi-server-functions/server.js
@@ -62,8 +62,8 @@ export const serverBuild = ({ client, manifest }) => {
 				build: {
 					rollupOptions: {
 						output: {
-							chunkFileNames: "[name].js",
-							entryFileNames: "[name].js",
+							chunkFileNames: "[name].mjs",
+							entryFileNames: "[name].mjs",
 						},
 						treeshake: true,
 					},

diff --git a/packages/vinxi/lib/load-app.js b/packages/vinxi/lib/load-app.js
@@ -26,7 +26,7 @@ const bundleConfigFile = async (configFile, out) => {
 		outfile: out,
 		platform: "node",
 		format: "esm",
-		resolveExtensions: [".js", ".mjs", ".ts", ".jsx", ".tsx"],
+		resolveExtensions: [".js", ".mjs", ".ts", ".jsx", ".tsx", ".mts"],
 		plugins: [
 			{
 				name: "externalize-deps",
@@ -56,22 +56,25 @@ const bundleConfigFile = async (configFile, out) => {
 			},
 		],
 		loader: {
-			".js": "jsx",
-			".ts": "tsx",
+			".js": "js",
+			".ts": "ts",
 			".jsx": "jsx",
 			".tsx": "tsx",
-			".mjs": "jsx",
+			".mjs": "js",
+			".mts": "ts",
 		},
 	});
 };
 
 async function loadFile({ ...options }) {
 	if (options.name) {
-		for (const ext of ["js", "mjs", "ts", "tsx", "jsx"]) {
+		for (const ext of ["js", "mjs", "ts", "tsx", "jsx", "mts"]) {
 			const filepath = join(process.cwd(), `${options.name}.config.${ext}`);
 
 			if (await fileExists(filepath)) {
-				let out = `${options.name}.config.timestamp_${Date.now()}.js`;
+				let out = `${options.name}.config.timestamp_${Date.now()}.${
+					["ts", "js", "tsx", "jsx"].includes(ext) ? "js" : "mjs"
+				}`;
 				await bundleConfigFile(`${options.name}.config.${ext}`, out);
 				const importedApp = import(pathToFileURL(out).href).then((m) => ({
 					config: m.default,
@@ -92,10 +95,12 @@ async function loadFile({ ...options }) {
 			options.configFile.lastIndexOf("."),
 		);
 
-		if (["js", "mjs", "ts", "tsx", "jsx"].includes(ext)) {
+		if (["js", "mjs", "ts", "tsx", "jsx", "mts"].includes(ext)) {
 			const filepath = join(process.cwd(), `${configFileName}.${ext}`);
 			if (await fileExists(filepath)) {
-				let out = `${configFileName}.timestamp_${Date.now()}.js`;
+				let out = `${configFileName}.timestamp_${Date.now()}.${
+					["ts", "js", "tsx", "jsx"].includes(ext) ? "js" : "mjs"
+				}`;
 				await bundleConfigFile(options.configFile, out);
 				const importedApp = import(pathToFileURL(out).href).then((m) => ({
 					config: m.default,

diff --git a/packages/vinxi/lib/manifest/client-manifest.js b/packages/vinxi/lib/manifest/client-manifest.js
@@ -26,7 +26,7 @@ const manifest = new Proxy(
 							invariant(typeof chunk === "string", "Chunk expected");
 							let outputPath = import.meta.env.DEV
 								? join(import.meta.env.BASE_URL, "@fs", chunk)
-								: join(import.meta.env.BASE_URL, chunk + ".js");
+								: join(import.meta.env.BASE_URL, chunk + ".mjs");
 							return {
 								import() {
 									return import(/* @vite-ignore */ outputPath);

diff --git a/packages/vinxi/lib/manifest/prod-server-manifest.js b/packages/vinxi/lib/manifest/prod-server-manifest.js
@@ -10,7 +10,12 @@ import findAssetsInViteManifest from "./vite-manifest.js";
 
 function createHtmlTagsForAssets(router, app, assets) {
 	return assets
-		.filter((asset) => asset.endsWith(".css") || asset.endsWith(".js"))
+		.filter(
+			(asset) =>
+				asset.endsWith(".css") ||
+				asset.endsWith(".js") ||
+				asset.endsWith(".mjs"),
+		)
 		.map((asset) => ({
 			tag: "link",
 			attrs: {
@@ -77,12 +82,12 @@ export function createProdManifest(app) {
 								const chunkPath = join(
 									router.outDir,
 									router.base,
-									chunk + ".js",
+									chunk + ".mjs",
 								);
 								return {
 									import() {
-										if (globalThis.$$chunks[chunk + ".js"]) {
-											return globalThis.$$chunks[chunk + ".js"];
+										if (globalThis.$$chunks[chunk + ".mjs"]) {
+											return globalThis.$$chunks[chunk + ".mjs"];
 										}
 										return import(
 											/* @vite-ignore */ pathToFileURL(chunkPath).href