From 2aadb714fd2f0bdf66aafb11c8524211a3d84a70 Mon Sep 17 00:00:00 2001 From: Pedro Cattori Date: Fri, 26 Jan 2024 15:47:53 -0500 Subject: [PATCH 1/5] wip --- .../helpers/vite-template/app/root.tsx | 4 +- integration/vite-css-test.ts | 4 +- integration/vite-dev-test.ts | 6 +-- integration/vite-server-bundles-test.ts | 4 +- packages/remix-dev/vite/plugin.ts | 54 +------------------ .../vite/replace-import-specifier.ts | 26 --------- packages/remix-react/components.tsx | 12 +++++ packages/remix-react/index.tsx | 1 + 8 files changed, 24 insertions(+), 87 deletions(-) delete mode 100644 packages/remix-dev/vite/replace-import-specifier.ts diff --git a/integration/helpers/vite-template/app/root.tsx b/integration/helpers/vite-template/app/root.tsx index 1d6916394c3..44aba0660dc 100644 --- a/integration/helpers/vite-template/app/root.tsx +++ b/integration/helpers/vite-template/app/root.tsx @@ -1,6 +1,6 @@ import { + DevScripts, Links, - LiveReload, Meta, Outlet, Scripts, @@ -15,12 +15,12 @@ export default function App() { + - ); diff --git a/integration/vite-css-test.ts b/integration/vite-css-test.ts index 1a5c21a082c..a8c3a448402 100644 --- a/integration/vite-css-test.ts +++ b/integration/vite-css-test.ts @@ -34,7 +34,7 @@ const files = { }); `, "app/root.tsx": ` - import { Links, Meta, Outlet, Scripts, LiveReload } from "@remix-run/react"; + import { Links, Meta, Outlet, Scripts, DevScripts } from "@remix-run/react"; export default function Root() { return ( @@ -42,11 +42,11 @@ const files = { + - ); diff --git a/integration/vite-dev-test.ts b/integration/vite-dev-test.ts index ba9e17e508b..acf5bedf336 100644 --- a/integration/vite-dev-test.ts +++ b/integration/vite-dev-test.ts @@ -40,7 +40,7 @@ test.describe("Vite dev", () => { }); `, "app/root.tsx": js` - import { Links, Meta, Outlet, Scripts, LiveReload } from "@remix-run/react"; + import { Links, Meta, Outlet, Scripts, DevScripts } from "@remix-run/react"; export default function Root() { return ( @@ -48,6 +48,7 @@ test.describe("Vite dev", () => { +
@@ -55,7 +56,6 @@ test.describe("Vite dev", () => {
- ); @@ -330,7 +330,7 @@ test.describe("Vite dev", () => { await expect(hmrStatus).toHaveText("HMR updated: yes"); await expect(input).toHaveValue("stateful"); - // check LiveReload script has nonce + // check DevScripts script has nonce await expect(page.locator(`script[nonce="1234"]`)).toBeAttached(); // Ensure no errors after HMR diff --git a/integration/vite-server-bundles-test.ts b/integration/vite-server-bundles-test.ts index 316ec571be7..b593511dea4 100644 --- a/integration/vite-server-bundles-test.ts +++ b/integration/vite-server-bundles-test.ts @@ -74,7 +74,7 @@ const TEST_ROUTES = [ const files = { "app/root.tsx": ` ${ROUTE_FILE_COMMENT} - import { Links, Meta, Outlet, Scripts, LiveReload } from "@remix-run/react"; + import { Links, Meta, Outlet, Scripts, DevScripts } from "@remix-run/react"; export default function Root() { return ( @@ -82,11 +82,11 @@ const files = { + - ); diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts index a23ca54e989..1d1ec1bcdc5 100644 --- a/packages/remix-dev/vite/plugin.ts +++ b/packages/remix-dev/vite/plugin.ts @@ -37,7 +37,6 @@ import { getStylesForUrl, isCssModulesFile } from "./styles"; import * as VirtualModule from "./vmod"; import { resolveFileUrl } from "./resolve-file-url"; import { removeExports } from "./remove-exports"; -import { replaceImportSpecifier } from "./replace-import-specifier"; import { importViteEsmSync, preloadViteEsm } from "./import-vite-esm-sync"; const supportedRemixEsbuildConfigKeys = [ @@ -227,7 +226,6 @@ export type RemixPluginContext = RemixPluginSsrBuildContext & { let serverBuildId = VirtualModule.id("server-build"); let serverManifestId = VirtualModule.id("server-manifest"); let browserManifestId = VirtualModule.id("browser-manifest"); -let remixReactProxyId = VirtualModule.id("remix-react-proxy"); let hmrRuntimeId = VirtualModule.id("hmr-runtime"); let injectHmrRuntimeId = VirtualModule.id("inject-hmr-runtime"); @@ -1280,54 +1278,6 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => { }; }, }, - { - name: "remix-remix-react-proxy", - enforce: "post", // Ensure we're operating on the transformed code to support MDX etc. - resolveId(id) { - if (id === remixReactProxyId) { - return VirtualModule.resolve(remixReactProxyId); - } - }, - transform(code, id) { - // Don't transform the proxy itself, otherwise it will import itself - if (id === VirtualModule.resolve(remixReactProxyId)) { - return; - } - - let hasLiveReloadHints = - code.includes("LiveReload") && code.includes("@remix-run/react"); - - // Don't transform files that don't need the proxy - if (!hasLiveReloadHints) { - return; - } - - // Rewrite imports to use the proxy - return replaceImportSpecifier({ - code, - specifier: "@remix-run/react", - replaceWith: remixReactProxyId, - }); - }, - load(id) { - if (id === VirtualModule.resolve(remixReactProxyId)) { - // TODO: ensure react refresh is initialized before `` - return [ - 'import { createElement } from "react";', - 'export * from "@remix-run/react";', - `export const LiveReload = ${ - viteCommand !== "serve" - } ? () => null : `, - '({ nonce = undefined }) => createElement("script", {', - " nonce,", - " dangerouslySetInnerHTML: { ", - " __html: `window.__remixLiveReloadEnabled = true`", - " }", - "});", - ].join("\n"); - } - }, - }, { name: "remix-inject-hmr-runtime", enforce: "pre", @@ -1504,7 +1454,7 @@ const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof let prevRefreshReg; let prevRefreshSig; -if (import.meta.hot && !inWebWorker && window.__remixLiveReloadEnabled) { +if (import.meta.hot && !inWebWorker && window.__remixHmrEnabled) { if (!window.__vite_plugin_react_preamble_installed__) { throw new Error( "Remix Vite plugin can't detect preamble. Something is wrong." @@ -1520,7 +1470,7 @@ if (import.meta.hot && !inWebWorker && window.__remixLiveReloadEnabled) { }`.replace(/\n+/g, ""); const REACT_REFRESH_FOOTER = ` -if (import.meta.hot && !inWebWorker && window.__remixLiveReloadEnabled) { +if (import.meta.hot && !inWebWorker && window.__remixHmrEnabled) { window.$RefreshReg$ = prevRefreshReg; window.$RefreshSig$ = prevRefreshSig; RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => { diff --git a/packages/remix-dev/vite/replace-import-specifier.ts b/packages/remix-dev/vite/replace-import-specifier.ts deleted file mode 100644 index 8f1fd59c07c..00000000000 --- a/packages/remix-dev/vite/replace-import-specifier.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { parse, traverse, generate } from "./babel"; - -export const replaceImportSpecifier = ({ - code, - specifier, - replaceWith, -}: { - code: string; - specifier: string; - replaceWith: string; -}) => { - let ast = parse(code, { sourceType: "module" }); - - traverse(ast, { - ImportDeclaration(path) { - if (path.node.source.value === specifier) { - path.node.source.value = replaceWith; - } - }, - }); - - return { - code: generate(ast, { retainLines: true }).code, - map: null, - }; -}; diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx index f9604f7655e..65e7fcb880c 100644 --- a/packages/remix-react/components.tsx +++ b/packages/remix-react/components.tsx @@ -1060,6 +1060,18 @@ export function useFetcher( return useFetcherRR(opts); } +export const DevScripts = + process.env.NODE_ENV === "production" + ? () => null + : ({ nonce }: { nonce?: undefined }) => ( +