vite: no livereload, scripts injects hmr runtime instead

remix-run · Jan 30, 2024 · 945f177 · 945f177
1 parent c372825
commit 945f177
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 97 deletions.
diff --git a/.changeset/ninety-turtles-explode.md b/.changeset/ninety-turtles-explode.md
@@ -0,0 +1,40 @@
+---
+"@remix-run/dev": patch
+---
+
+Vite: Remove interop with `<LiveReload />`, rely on `<Scripts />` instead
+
+**This is a breaking change for projects using the unstable Vite plugin.**
+
+For HMR and HDR to function, the React Fast Refresh preamble has to execute
+before any route modules. Having a separate component for dev scripts
+— `<LiveReload />` — implicitly relied on browser script execution order.
+This opened the door for race conditions that could only be avoided through hacks.
+
+Additionally, Vite comes with its own HMR runtime out-of-the-box, so much of the
+setup done within `<LiveReload />` became obsolete.
+
+To fix this, we now rely on `<Scripts />` to programmatically control execution
+order between dev preamble and route modules within a single script.
+
+```diff
+  import {
+-   LiveReload,
+    Outlet,
+    Scripts,
+  }
+
+  export default function App() {
+    return (
+      <html>
+        <head>
+        </head>
+        <body>
+          <Outlet />
+          <Scripts />
+-         <LiveReload />
+        </body>
+      </html>
+    )
+  }
+```
diff --git a/docs/future/vite.md b/docs/future/vite.md
@@ -243,6 +243,43 @@ export default defineConfig({
 });
 ```
 
+#### HMR & HDR
+
+The new `<DevScripts/>` component enables development-specific features like HMR and HDR.
+`<DevScripts/>` automatically removes itself in production, just like the old `<LiveReload/>` component.
+But unlike `<LiveReload/>`, it works with Vite's out-of-the-box HMR capabilities.
+
+<docs-info>
+
+The `<DevScripts/>` component should be placed in the `<head/>` of your app so that it
+can be loaded before any other scripts as required by [React Fast Refresh][react-fast-refresh].
+
+</docs-info>
+
+👉 **Replace `<LiveReload/>` with `<DevScripts/>`**
+
+```diff
+  import {
+-   LiveReload,
++   DevScripts,
+    Outlet,
+  }
+
+  export default function App() {
+    return (
+      <html>
+        <head>
++         <DevScripts />
+        </head>
+        <body>
+-         <LiveReload />
+          <Outlet />
+        </body>
+      </html>
+    )
+  }
+```
+
 #### TypeScript integration
 
 Vite handles imports for all sorts of different file types, sometimes in ways that differ from the existing Remix compiler, so let's reference Vite's types from `vite/client` instead of the obsolete types from `@remix-run/dev`.
@@ -1156,3 +1193,4 @@ We're definitely late to the Vite party, but we're excited to be here now!
 [wrangler-getbindingsproxy]: https://github.com/cloudflare/workers-sdk/pull/4523
 [remix-config-server]: https://remix.run/docs/en/main/file-conventions/remix-config#server
 [cloudflare-vite-and-wrangler]: #vite--wrangler
+[react-fast-refresh]: https://github.com/facebook/react/issues/16604#issuecomment-528663101
diff --git a/integration/helpers/vite-template/app/root.tsx b/integration/helpers/vite-template/app/root.tsx
@@ -1,6 +1,5 @@
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -20,7 +19,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

diff --git 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 } from "@remix-run/react";
 
     export default function Root() {
       return (
@@ -46,7 +46,6 @@ const files = {
           <body>
             <Outlet />
             <Scripts />
-            <LiveReload />
           </body>
         </html>
       );

diff --git 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 } from "@remix-run/react";
 
           export default function Root() {
             return (
@@ -55,7 +55,6 @@ test.describe("Vite dev", () => {
                     <Outlet />
                   </div>
                   <Scripts />
-                  <LiveReload nonce="1234" />
                 </body>
               </html>
             );
@@ -330,9 +329,6 @@ test.describe("Vite dev", () => {
     await expect(hmrStatus).toHaveText("HMR updated: yes");
     await expect(input).toHaveValue("stateful");
 
-    // check LiveReload script has nonce
-    await expect(page.locator(`script[nonce="1234"]`)).toBeAttached();
-
     // Ensure no errors after HMR
     expect(pageErrors).toEqual([]);
   });

diff --git 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 } from "@remix-run/react";
 
     export default function Root() {
       return (
@@ -86,7 +86,6 @@ const files = {
           <body>
             <Outlet />
             <Scripts />
-            <LiveReload />
           </body>
         </html>
       );

diff --git 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");
 
@@ -1290,53 +1288,6 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
         };
       },
     },
-    {
-      name: "remix-remix-react-proxy",
-      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 `<Scripts />`
-          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",
@@ -1512,7 +1463,7 @@ const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof
 let prevRefreshReg;
 let prevRefreshSig;
 
-if (import.meta.hot && !inWebWorker && window.__remixLiveReloadEnabled) {
+if (import.meta.hot && !inWebWorker) {
   if (!window.__vite_plugin_react_preamble_installed__) {
     throw new Error(
       "Remix Vite plugin can't detect preamble. Something is wrong."
@@ -1528,7 +1479,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.$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
diff --git a/templates/spa/app/root.tsx b/templates/spa/app/root.tsx
@@ -1,6 +1,5 @@
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -20,7 +19,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
@@ -38,7 +36,6 @@ export function HydrateFallback() {
       <body>
         <p>Loading...</p>
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

diff --git a/templates/unstable-vite-cloudflare/app/root.tsx b/templates/unstable-vite-cloudflare/app/root.tsx
@@ -1,6 +1,5 @@
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -20,7 +19,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

diff --git a/templates/unstable-vite-express/app/root.tsx b/templates/unstable-vite-express/app/root.tsx
@@ -1,6 +1,5 @@
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -20,7 +19,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

diff --git a/templates/unstable-vite/app/root.tsx b/templates/unstable-vite/app/root.tsx
@@ -1,6 +1,5 @@
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -20,7 +19,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );