From d09c5f5dc8b019abd5b896a4e859d850a29422a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20L=C3=A1z=C3=A1r?= Date: Tue, 14 Jan 2025 10:32:44 +0100 Subject: [PATCH] fix: remote example production config (#109) This PR updates and fixes configuration in the `RemoteComponent` example to make it work again in a production build after configuration handling changes introduced by https://github.com/lazarv/react-server/pull/52 As the configuration is now a prebuilt module in production and only includes configuration entries specified in the `react-server.production.config.mjs` file, the import map and shared module resolution information were missing in the production build. Fixes static export filesize indentation Fixes remote style link URLs when used in an RSC update request Fixes remote client component import URL handling --- examples/remote/react-server.config.mjs | 42 ------------------- .../react-server.development.config.mjs | 29 +++++++++++++ .../remote/react-server.production.config.mjs | 26 ++++++++++++ packages/react-server/config/index.mjs | 2 +- packages/react-server/lib/build/static.mjs | 4 +- packages/react-server/server/render-rsc.jsx | 9 ++-- 6 files changed, 63 insertions(+), 49 deletions(-) create mode 100644 examples/remote/react-server.development.config.mjs create mode 100644 examples/remote/react-server.production.config.mjs diff --git a/examples/remote/react-server.config.mjs b/examples/remote/react-server.config.mjs index 9ce7ad6..a934605 100644 --- a/examples/remote/react-server.config.mjs +++ b/examples/remote/react-server.config.mjs @@ -1,46 +1,4 @@ export default { - importMap: { - imports: { - ...(process.env.NODE_ENV !== "production" - ? { - react: - "https://esm.sh/react@0.0.0-experimental-204a551e-20240926?dev", - "react/jsx-dev-runtime": - "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-dev-runtime?dev", - "react-dom": - "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926?dev", - "react-dom/client": - "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client?dev", - "react-server-dom-webpack/client.browser": - "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser?dev", - "http://[::1]:3001/": "/", - "http://localhost:3003/": "/", - } - : { - react: "https://esm.sh/react@0.0.0-experimental-204a551e-20240926", - "react/jsx-runtime": - "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-runtime", - "react-dom": - "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926", - "react-dom/client": - "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client", - "react-server-dom-webpack/client.browser": - "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser", - "http://localhost:3003/client/node_modules/@lazarv/react-server/": - "/client/node_modules/@lazarv/react-server/", - }), - }, - }, - resolve: { - shared: [ - "react", - "react/jsx-dev-runtime", - "react/jsx-runtime", - "react-dom", - "react-dom/client", - "react-server-dom-webpack/client.browser", - ], - }, export() { return [ { diff --git a/examples/remote/react-server.development.config.mjs b/examples/remote/react-server.development.config.mjs new file mode 100644 index 0000000..a27dd72 --- /dev/null +++ b/examples/remote/react-server.development.config.mjs @@ -0,0 +1,29 @@ +export default { + importMap: { + imports: { + react: "https://esm.sh/react@0.0.0-experimental-204a551e-20240926?dev", + "react/jsx-dev-runtime": + "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-dev-runtime?dev", + "react/jsx-runtime": + "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-runtime?dev", + "react-dom": + "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926?dev", + "react-dom/client": + "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client?dev", + "react-server-dom-webpack/client.browser": + "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser?dev", + "http://[::1]:3001/": "/", + "http://localhost:3003/": "/", + }, + }, + resolve: { + shared: [ + "react", + "react/jsx-dev-runtime", + "react/jsx-runtime", + "react-dom", + "react-dom/client", + "react-server-dom-webpack/client.browser", + ], + }, +}; diff --git a/examples/remote/react-server.production.config.mjs b/examples/remote/react-server.production.config.mjs new file mode 100644 index 0000000..60816e0 --- /dev/null +++ b/examples/remote/react-server.production.config.mjs @@ -0,0 +1,26 @@ +export default { + importMap: { + imports: { + react: "https://esm.sh/react@0.0.0-experimental-204a551e-20240926", + "react/jsx-runtime": + "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-runtime", + "react-dom": + "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926", + "react-dom/client": + "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client", + "react-server-dom-webpack/client.browser": + "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser", + "http://localhost:3003/client/node_modules/@lazarv/react-server/": + "/client/node_modules/@lazarv/react-server/", + }, + }, + resolve: { + shared: [ + "react", + "react/jsx-runtime", + "react-dom", + "react-dom/client", + "react-server-dom-webpack/client.browser", + ], + }, +}; diff --git a/packages/react-server/config/index.mjs b/packages/react-server/config/index.mjs index 01b6620..db848f1 100644 --- a/packages/react-server/config/index.mjs +++ b/packages/react-server/config/index.mjs @@ -22,7 +22,7 @@ export async function loadConfig(initialConfig, options = {}) { const configPatterns = [ "**/{react-server,+*,vite}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}", options.command === "build" - ? "**/{react-server,+*,vite}.build.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}" + ? "**/{react-server,+*,vite}.{build,production,runtime,server}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}" : "**/{react-server,+*,vite}.{development,runtime,server}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}", "!**/node_modules", "!*/**/vite.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}", diff --git a/packages/react-server/lib/build/static.mjs b/packages/react-server/lib/build/static.mjs index 10afbab..3221872 100644 --- a/packages/react-server/lib/build/static.mjs +++ b/packages/react-server/lib/build/static.mjs @@ -32,7 +32,7 @@ const cwd = sys.cwd(); function size(bytes) { const s = filesize(bytes); - return " ".repeat(Math.max(0, 8 - s.length)) + s; + return " ".repeat(Math.max(0, 10 - s.length)) + s; } function log( @@ -49,7 +49,7 @@ function log( (dirname(normalizedBasename) === "." ? "" : "/") + basename(normalizedBasename) )} ${`${" ".repeat( - maxFilenameLength - normalizedBasename.length + Math.max(0, maxFilenameLength - normalizedBasename.length) )}${colors.gray(colors.bold(size(htmlStat.size)))}${colors.dim( `${gzipStat.size ? ` │ gzip: ${size(gzipStat.size)}` : ""}${brotliStat.size ? ` │ brotli: ${size(brotliStat.size)}` : ""}${postponedStat.size ? ` │ postponed: ${size(postponedStat.size)}` : ""}` )}`}` diff --git a/packages/react-server/server/render-rsc.jsx b/packages/react-server/server/render-rsc.jsx index aa556a5..fe7c318 100644 --- a/packages/react-server/server/render-rsc.jsx +++ b/packages/react-server/server/render-rsc.jsx @@ -235,9 +235,10 @@ export async function render(Component) { const configBaseHref = config.base ? (link) => `/${config.base}/${link?.id || link}`.replace(/\/+/g, "/") : (link) => link?.id || link; - const linkHref = remote - ? (link) => `${protocol}//${host}${configBaseHref(link)}` - : configBaseHref; + const linkHref = + remote || (origin && host !== origin) + ? (link) => `${protocol}//${host}${configBaseHref(link)}` + : configBaseHref; const Styles = () => { const styles = getContext(STYLES_CONTEXT); return ( @@ -487,7 +488,7 @@ export async function render(Component) { `const moduleCache = new Map(); self.__webpack_require__ = function (id) { if (!moduleCache.has(id)) { - const modulePromise = import(("${`/${config.base ?? ""}/`.replace(/\/+/g, "/")}" + id).replace(/\\/+/g, "/")); + const modulePromise = /^https?\\:/.test(id) ? import(id) : import(("${`/${config.base ?? ""}/`.replace(/\/+/g, "/")}" + id).replace(/\\/+/g, "/")); modulePromise.then( (module) => { modulePromise.value = module;