Remove LiveReload, enable action-test (remix-run#11416)

markdalgleish · web-flow · commit 2e162a0d7cd1 · 2024-04-08T08:41:02.000+10:00
diff --git a/integration/helpers/cf-template/app/root.tsx b/integration/helpers/cf-template/app/root.tsx
@@ -2,7 +2,6 @@ import type { LinksFunction } from "@remix-run/cloudflare";
 import { cssBundleHref } from "@remix-run/css-bundle";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -26,7 +25,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
diff --git a/integration/helpers/deno-template/app/root.tsx b/integration/helpers/deno-template/app/root.tsx
@@ -2,7 +2,6 @@ import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/deno";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -27,7 +26,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
diff --git a/integration/helpers/node-template/app/root.tsx b/integration/helpers/node-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/playwright.config.ts b/integration/playwright.config.ts
@@ -6,7 +6,6 @@ const config: PlaywrightTestConfig = {
   testMatch: ["**/*-test.ts"],
   // TODO: Temporary!  Remove from this list as we get each suite passing
   testIgnore: [
-    "**/action-test.ts",
     "**/client-data-test.ts",
     "**/error-sanitization-test.ts",
     "**/file-uploads-test.ts",
diff --git a/integration/vite-dev-custom-entry-test.ts b/integration/vite-dev-custom-entry-test.ts
@@ -94,7 +94,7 @@ test.describe("Vite custom entry dev", () => {
           }
         `,
         "app/root.tsx": js`
-          import { Links, Meta, Outlet, Scripts, LiveReload } from "react-router-dom";
+          import { Links, Meta, Outlet, Scripts } from "react-router-dom";
 
           export default function Root() {
             return (
@@ -109,7 +109,6 @@ test.describe("Vite custom entry dev", () => {
                     <Outlet />
                   </div>
                   <Scripts />
-                  <LiveReload />
                 </body>
               </html>
             );
diff --git a/integration/vite-manifests-test.ts b/integration/vite-manifests-test.ts
@@ -24,7 +24,7 @@ const TEST_ROUTES = [
 
 const files = {
   "app/root.tsx": `
-    import { Links, Meta, Outlet, Scripts, LiveReload } from "react-router-dom";
+    import { Links, Meta, Outlet, Scripts } from "react-router-dom";
 
     export default function Root() {
       return (
@@ -36,7 +36,6 @@ const files = {
           <body>
             <Outlet />
             <Scripts />
-            <LiveReload />
           </body>
         </html>
       );
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "pretest:integration": "pnpm build",
     "test:integration": "pnpm playwright:integration",
     "posttest:integration": "pnpm clean:integration",
-    "playwright:integration": "playwright test --config ./integration/playwright.config.ts --project chromium",
+    "playwright:integration": "playwright test --config ./integration/playwright.config.ts --project=chromium",
     "changeset": "changeset",
     "version": "changeset version && node ./scripts/remove-prerelease-changelogs.mjs",
     "publish": "node scripts/publish.js",
diff --git a/packages/react-router-dom/__tests__/ssr/components-test.tsx b/packages/react-router-dom/__tests__/ssr/components-test.tsx
@@ -9,92 +9,11 @@ import {
   Outlet,
   RouterProvider,
 } from "../../index";
-import type { LiveReload as ActualLiveReload } from "../../ssr/components";
 import { RemixContext } from "../../ssr/components";
 import invariant from "../../ssr/invariant";
 import { RemixServer } from "../../ssr/server";
 import "@testing-library/jest-dom/extend-expect";
 
-// TODO: Every time we touch LiveReload (without changing the API) these tests
-// fail, which tells me they're testing implementation details and not actual
-// behavior. Not sure how valuable they are. Disabling them until we can come up
-// with a better strategy for testing "developer workflow" things. An ideal
-// solution will let us fire up a development server, save a file, and observe
-// the browser reloads with the new UI. At the moment we could completely break
-// LiveReload's real features and these tests wouldn't know it.
-
-describe("<LiveReload />", () => {
-  let originalNodeEnv = process.env.NODE_ENV;
-  afterEach(() => {
-    process.env.NODE_ENV = originalNodeEnv;
-  });
-
-  describe("non-development environment", () => {
-    let LiveReload: typeof ActualLiveReload;
-    beforeEach(() => {
-      process.env.NODE_ENV = "not-development";
-      jest.resetModules();
-      LiveReload = require("../../ssr/components").LiveReload;
-    });
-
-    it("does nothing if the NODE_ENV is not development", () => {
-      let { container } = render(<LiveReload />);
-      expect(container).toBeEmptyDOMElement();
-    });
-  });
-
-  describe("development environment", () => {
-    let oldEnv = process.env;
-    let LiveReload: typeof ActualLiveReload;
-    beforeEach(() => {
-      process.env = { ...oldEnv, NODE_ENV: "development" };
-      jest.resetModules();
-    });
-
-    it("defaults the origin to REMIX_DEV_ORIGIN env variable", () => {
-      let origin = "http://test-origin";
-      LiveReload = require("../../ssr/components").LiveReload;
-      process.env = { ...oldEnv, REMIX_DEV_ORIGIN: origin };
-      let { container } = render(<LiveReload />);
-      expect(container.querySelector("script")).toHaveTextContent(
-        `let LIVE_RELOAD_ORIGIN = ${JSON.stringify(origin)};`
-      );
-    });
-
-    it("can set the origin explicitly", () => {
-      let origin = "http://test-origin";
-      LiveReload = require("../../ssr/components").LiveReload;
-      let { container } = render(<LiveReload origin={origin} />);
-      expect(container.querySelector("script")).toHaveTextContent(
-        `let LIVE_RELOAD_ORIGIN = ${JSON.stringify(origin)};`
-      );
-    });
-
-    it("defaults the port to 8002", () => {
-      LiveReload = require("../../ssr/components").LiveReload;
-      let { container } = render(<LiveReload />);
-      expect(container.querySelector("script")).toHaveTextContent(
-        "url.port = undefined || (LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).port : 8002);"
-      );
-    });
-
-    it("can set the port explicitly", () => {
-      let { container } = render(<LiveReload port={4321} />);
-      expect(container.querySelector("script")).toHaveTextContent(
-        "url.port = 4321 || (LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).port : 8002);"
-      );
-    });
-
-    it("timeout of reload is set to 200ms", () => {
-      LiveReload = require("../../ssr/components").LiveReload;
-      let { container } = render(<LiveReload timeoutMs={200} />);
-      expect(container.querySelector("script")).toHaveTextContent(
-        "setTimeout( () => remixLiveReloadConnect({ onOpen: () => window.location.reload(), }), 200 );"
-      );
-    });
-  });
-});
-
 const setIntentEvents = ["focus", "mouseEnter", "touchStart"] as const;
 type PrefetchEventHandlerProps = {
   [Property in `on${Capitalize<(typeof setIntentEvents)[number]>}`]?: Function;
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -222,13 +222,7 @@ export {
   useRoutes,
 } from "react-router";
 
-export {
-  Meta,
-  Links,
-  Scripts,
-  PrefetchPageLinks,
-  LiveReload,
-} from "./ssr/components";
+export { Meta, Links, Scripts, PrefetchPageLinks } from "./ssr/components";
 
 export type { HtmlLinkDescriptor } from "./ssr/links";
 export type {
diff --git a/packages/react-router-dom/ssr/components.tsx b/packages/react-router-dom/ssr/components.tsx
@@ -1046,142 +1046,6 @@ export function useFetcher<TData = AppData>(
   return useFetcherRR(opts);
 }
 
-/**
- * This component connects your app to the Remix asset server and
- * automatically reloads the page when files change in development.
- * In production, it renders null, so you can safely render it always in your root route.
- *
- * @see https://remix.run/docs/components/live-reload
- */
-export const LiveReload =
-  // Dead Code Elimination magic for production builds.
-  // This way devs don't have to worry about doing the NODE_ENV check themselves.
-  process.env.NODE_ENV !== "development"
-    ? () => null
-    : function LiveReload({
-        origin,
-        port,
-        timeoutMs = 1000,
-        nonce = undefined,
-      }: {
-        origin?: string;
-        port?: number;
-        timeoutMs?: number;
-        nonce?: string;
-      }) {
-        // @ts-expect-error
-        let isViteClient = import.meta && import.meta.env !== undefined;
-        if (isViteClient) {
-          console.warn(
-            [
-              "`<LiveReload />` is obsolete when using Vite and can conflict with Vite's built-in HMR runtime.",
-              "",
-              "Remove `<LiveReload />` from your code and instead only use `<Scripts />`.",
-              "Then refresh the page to remove lingering scripts from `<LiveReload />`.",
-            ].join("\n")
-          );
-          return null;
-        }
-        origin ??= process.env.REMIX_DEV_ORIGIN;
-        let js = String.raw;
-        return (
-          <script
-            nonce={nonce}
-            suppressHydrationWarning
-            dangerouslySetInnerHTML={{
-              __html: js`
-                function remixLiveReloadConnect(config) {
-                  let LIVE_RELOAD_ORIGIN = ${JSON.stringify(origin)};
-                  let protocol =
-                    LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).protocol.replace(/^http/, "ws") :
-                    location.protocol === "https:" ? "wss:" : "ws:"; // remove in v2?
-                  let hostname = LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).hostname : location.hostname;
-                  let url = new URL(protocol + "//" + hostname + "/socket");
-
-                  url.port =
-                    ${port} ||
-                    (LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).port : 8002);
-
-                  let ws = new WebSocket(url.href);
-                  ws.onmessage = async (message) => {
-                    let event = JSON.parse(message.data);
-                    if (event.type === "LOG") {
-                      console.log(event.message);
-                    }
-                    if (event.type === "RELOAD") {
-                      console.log("💿 Reloading window ...");
-                      window.location.reload();
-                    }
-                    if (event.type === "HMR") {
-                      if (!window.__hmr__ || !window.__hmr__.contexts) {
-                        console.log("💿 [HMR] No HMR context, reloading window ...");
-                        window.location.reload();
-                        return;
-                      }
-                      if (!event.updates || !event.updates.length) return;
-                      let updateAccepted = false;
-                      let needsRevalidation = new Set();
-                      for (let update of event.updates) {
-                        console.log("[HMR] " + update.reason + " [" + update.id +"]")
-                        if (update.revalidate) {
-                          needsRevalidation.add(update.routeId);
-                          console.log("[HMR] Revalidating [" + update.routeId + "]");
-                        }
-                        let imported = await import(update.url +  '?t=' + event.assetsManifest.hmr.timestamp);
-                        if (window.__hmr__.contexts[update.id]) {
-                          let accepted = window.__hmr__.contexts[update.id].emit(
-                            imported
-                          );
-                          if (accepted) {
-                            console.log("[HMR] Update accepted by", update.id);
-                            updateAccepted = true;
-                          }
-                        }
-                      }
-                      if (event.assetsManifest && window.__hmr__.contexts["remix:manifest"]) {
-                        let accepted = window.__hmr__.contexts["remix:manifest"].emit(
-                          { needsRevalidation, assetsManifest: event.assetsManifest }
-                        );
-                        if (accepted) {
-                          console.log("[HMR] Update accepted by", "remix:manifest");
-                          updateAccepted = true;
-                        }
-                      }
-                      if (!updateAccepted) {
-                        console.log("[HMR] Update rejected, reloading...");
-                        window.location.reload();
-                      }
-                    }
-                  };
-                  ws.onopen = () => {
-                    if (config && typeof config.onOpen === "function") {
-                      config.onOpen();
-                    }
-                  };
-                  ws.onclose = (event) => {
-                    if (event.code === 1006) {
-                      console.log("Remix dev asset server web socket closed. Reconnecting...");
-                      setTimeout(
-                        () =>
-                          remixLiveReloadConnect({
-                            onOpen: () => window.location.reload(),
-                          }),
-                      ${String(timeoutMs)}
-                      );
-                    }
-                  };
-                  ws.onerror = (error) => {
-                    console.log("Remix dev asset server web socket error:");
-                    console.error(error);
-                  };
-                }
-                remixLiveReloadConnect();
-              `,
-            }}
-          />
-        );
-      };
-
 export function mergeRefs<T = any>(
   ...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
 ): React.RefCallback<T> {
diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx b/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx
@@ -2,7 +2,6 @@ import type { LinksFunction } from "@remix-run/cloudflare";
 import { cssBundleHref } from "@remix-run/css-bundle";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -26,7 +25,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
diff --git a/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx b/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx
@@ -2,7 +2,6 @@ import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/deno";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -27,7 +26,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
diff --git a/packages/remix-dev/__tests__/fixtures/node/app/root.tsx b/packages/remix-dev/__tests__/fixtures/node/app/root.tsx
@@ -2,7 +2,6 @@ import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/node";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -26,7 +25,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
