Support Remix HMR v2 (#1187)

* Ensure there is only one oclif/core version. Update to CLI 3.48 * Update Remix dependencies to 1.19.1 * Add Remix logger and mute uneeded warnings * Remove import of deprecated type and merge imports * Fix linting * Another lint fix * Changesets * Changesets * Find nearest free port * Add HMR logic from Remix * Enable HMR with future.unstable_dev flag * HMR working * Update to ESM version of MiniOxygen * HDR working with changes to MiniOxygen * Enable v2_dev in templates and examples * Cleanup * Update MiniOxygen to support HDR * Add LiveReload component to templates and examples * Changesets * Move get-port to dependencies --------- Co-authored-by: Bret Little <bret.little@shopify.com>
Shopify · Aug 18, 2023 · d053978 · d053978
1 parent bd63a48
commit d053978
Show file tree

Hide file tree

Showing 19 changed files with 2,088 additions and 3,181 deletions.
diff --git a/.changeset/heavy-rockets-poke.md b/.changeset/heavy-rockets-poke.md
@@ -0,0 +1,69 @@
+---
+'@shopify/cli-hydrogen': minor
+'@shopify/demo-store': minor
+---
+
+Support Remix Hot Module Replacement (HMR) and Hot Data Revalidation (HDR).
+Start using it with the following changes to your project:
+
+1. Upgrade to the latest Hydrogen version and Remix 1.19.1.
+
+2. Enable the v2 dev server in `remix.config.js`:
+
+```diff
+// ...
+future: {
++ v2_dev: true,
+  v2_meta: true,
+  v2_headers: true,
+  // ...
+}
+```
+
+3. Add Remix' `<LiveReload />` component if you don't have it to your `root.jsx` or `root.tsx` file:
+
+```diff
+import {
+  Outlet,
+  Scripts,
++ LiveReload,
+  ScrollRestoration,
+} from '@remix-run/react';
+
+// ...
+
+export default function App() {
+  // ...
+
+  return (
+    <html>
+      <head>
+       {/* ...  */}
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
++       <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+export function ErrorBoundary() {
+  // ...
+
+  return (
+    <html>
+      <head>
+        {/* ... */}
+      </head>
+      <body>
+        Error!
+        <Scripts />
++       <LiveReload />
+      </body>
+    </html>
+  );
+}
+```
diff --git a/examples/customer-api/app/root.tsx b/examples/customer-api/app/root.tsx
@@ -4,6 +4,7 @@ import {
   Meta,
   Outlet,
   Scripts,
+  LiveReload,
   ScrollRestoration,
   useLoaderData,
 } from '@remix-run/react';
@@ -52,6 +53,7 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );

diff --git a/examples/customer-api/remix.config.js b/examples/customer-api/remix.config.js
@@ -17,6 +17,7 @@ module.exports = {
   serverPlatform: 'neutral',
   serverMinify: process.env.NODE_ENV === 'production',
   future: {
+    v2_dev: true,
     v2_meta: true,
     v2_headers: true,
     v2_errorBoundary: true,

diff --git a/examples/express/app/root.tsx b/examples/express/app/root.tsx
@@ -4,6 +4,7 @@ import {
   Meta,
   Outlet,
   Scripts,
+  LiveReload,
   ScrollRestoration,
   useLoaderData,
 } from '@remix-run/react';
@@ -80,6 +81,7 @@ export default function App() {
         </Layout>
         <ScrollRestoration />
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );

diff --git a/examples/express/remix.config.js b/examples/express/remix.config.js
@@ -7,6 +7,7 @@ module.exports = {
   // publicPath: "/build/",
   serverModuleFormat: 'cjs',
   future: {
+    v2_dev: true,
     v2_meta: true,
     v2_headers: true,
     v2_errorBoundary: true,