From 8bd57f6d6f47269fa8bb21c5dc82a1911c6eb64c Mon Sep 17 00:00:00 2001 From: chris Date: Tue, 13 May 2025 12:37:45 +0700 Subject: [PATCH 1/5] fix: @react-router/critical.css handling when vite base is an absolute path --- packages/react-router-dev/vite/plugin.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts index f1ea75deb5..bc68de3c74 100644 --- a/packages/react-router-dev/vite/plugin.ts +++ b/packages/react-router-dev/vite/plugin.ts @@ -1576,7 +1576,8 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => { if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) { viteDevServer.middlewares.use(async (req, res, next) => { let [reqPathname, reqSearch] = (req.url ?? "").split("?"); - if (reqPathname === `${ctx.publicPath}@react-router/critical.css`) { + let publicPathname = new URL(`${ctx.publicPath}@react-router/critical.css`, "http://localhost").pathname; + if (reqPathname === publicPathname) { let pathname = new URLSearchParams(reqSearch).get("pathname"); if (!pathname) { return next("No pathname provided"); From 4bd29756fea037bc19c222f339b15f0e73586572 Mon Sep 17 00:00:00 2001 From: chris Date: Tue, 13 May 2025 12:49:02 +0700 Subject: [PATCH 2/5] chore: sign CLA --- contributors.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/contributors.yml b/contributors.yml index 6a2ad47915..168c978add 100644 --- a/contributors.yml +++ b/contributors.yml @@ -64,6 +64,7 @@ - chaance - chasinhues - chensokheng +- chr33s - chrisngobanh - christopherchudzicki - ChristophP From 2a7450dccf47f9b64cb51a4cac7b727ef6d65760 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 14 May 2025 12:12:02 +0700 Subject: [PATCH 3/5] update: to include tests --- packages/react-router-dev/__tests__/plugin-test.ts | 14 ++++++++++++++ packages/react-router-dev/vite/plugin.ts | 7 +++++-- 2 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 packages/react-router-dev/__tests__/plugin-test.ts diff --git a/packages/react-router-dev/__tests__/plugin-test.ts b/packages/react-router-dev/__tests__/plugin-test.ts new file mode 100644 index 0000000000..6ae4d83ef0 --- /dev/null +++ b/packages/react-router-dev/__tests__/plugin-test.ts @@ -0,0 +1,14 @@ +import { getRelativePathName } from "../vite/plugin"; + +describe("getRelativePathName", () => { + it("validates with relative url", () => { + const url = "/relative/path"; + expect(getRelativePathName(url)).toBe(url); + }); + + it("validates with absolute url", () => { + const uri = "/absolute/path"; + const url = `http://localhost${uri}`; + expect(getRelativePathName(url)).toBe(uri); + }); +}); \ No newline at end of file diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts index bc68de3c74..02fad841df 100644 --- a/packages/react-router-dev/vite/plugin.ts +++ b/packages/react-router-dev/vite/plugin.ts @@ -1576,8 +1576,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => { if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) { viteDevServer.middlewares.use(async (req, res, next) => { let [reqPathname, reqSearch] = (req.url ?? "").split("?"); - let publicPathname = new URL(`${ctx.publicPath}@react-router/critical.css`, "http://localhost").pathname; - if (reqPathname === publicPathname) { + if (reqPathname === getRelativePathName(`${ctx.publicPath}@react-router/critical.css`)) { let pathname = new URLSearchParams(reqSearch).get("pathname"); if (!pathname) { return next("No pathname provided"); @@ -2379,6 +2378,10 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => { ]; }; +export function getRelativePathName(url: string) { + return new URL(url, "http://localhost").pathname; +} + function getParentClientNodes( clientModuleGraph: Vite.EnvironmentModuleGraph, module: Vite.EnvironmentModuleNode From cd6f746c2d82e9506d010387f33badbf2ce42ccf Mon Sep 17 00:00:00 2001 From: Mark Dalgleish Date: Thu, 15 May 2025 09:10:03 +1000 Subject: [PATCH 4/5] Add changeset --- .changeset/cyan-cougars-trade.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cyan-cougars-trade.md diff --git a/.changeset/cyan-cougars-trade.md b/.changeset/cyan-cougars-trade.md new file mode 100644 index 0000000000..d2ceb086ce --- /dev/null +++ b/.changeset/cyan-cougars-trade.md @@ -0,0 +1,5 @@ +--- +"@react-router/dev": patch +--- + +When `future.unstable_viteEnvironmentApi` is enabled and an absolute Vite `base` has been configured, ensure critical CSS is handled correctly during development From 7cea871f5853a5b0eabf9b10f1c3044073b6f3e4 Mon Sep 17 00:00:00 2001 From: chris Date: Thu, 15 May 2025 10:19:58 +0700 Subject: [PATCH 5/5] update: refactor to use endsWith --- packages/react-router-dev/__tests__/plugin-test.ts | 14 -------------- packages/react-router-dev/vite/plugin.ts | 6 +----- 2 files changed, 1 insertion(+), 19 deletions(-) delete mode 100644 packages/react-router-dev/__tests__/plugin-test.ts diff --git a/packages/react-router-dev/__tests__/plugin-test.ts b/packages/react-router-dev/__tests__/plugin-test.ts deleted file mode 100644 index 6ae4d83ef0..0000000000 --- a/packages/react-router-dev/__tests__/plugin-test.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { getRelativePathName } from "../vite/plugin"; - -describe("getRelativePathName", () => { - it("validates with relative url", () => { - const url = "/relative/path"; - expect(getRelativePathName(url)).toBe(url); - }); - - it("validates with absolute url", () => { - const uri = "/absolute/path"; - const url = `http://localhost${uri}`; - expect(getRelativePathName(url)).toBe(uri); - }); -}); \ No newline at end of file diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts index 02fad841df..76a3ff7983 100644 --- a/packages/react-router-dev/vite/plugin.ts +++ b/packages/react-router-dev/vite/plugin.ts @@ -1576,7 +1576,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => { if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) { viteDevServer.middlewares.use(async (req, res, next) => { let [reqPathname, reqSearch] = (req.url ?? "").split("?"); - if (reqPathname === getRelativePathName(`${ctx.publicPath}@react-router/critical.css`)) { + if (reqPathname.endsWith("/@react-router/critical.css")) { let pathname = new URLSearchParams(reqSearch).get("pathname"); if (!pathname) { return next("No pathname provided"); @@ -2378,10 +2378,6 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => { ]; }; -export function getRelativePathName(url: string) { - return new URL(url, "http://localhost").pathname; -} - function getParentClientNodes( clientModuleGraph: Vite.EnvironmentModuleGraph, module: Vite.EnvironmentModuleNode