remix: change middleware to transform (#62)

* remove middleware in favor of transform * changeset
eagerpatch · Oct 19, 2024 · 1859baa · 1859baa
1 parent 9cf7922
commit 1859baa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git a/.changeset/thick-tools-walk.md b/.changeset/thick-tools-walk.md
@@ -0,0 +1,5 @@
+---
+'@navita/vite-plugin': patch
+---
+
+change from middleware to transform for compatability with Shopify Hydrogen
diff --git a/packages/vite-plugin/src/remix.ts b/packages/vite-plugin/src/remix.ts
@@ -1,45 +1,29 @@
 import * as crypto from "node:crypto";
-import type { Plugin, ViteDevServer } from "vite";
+import type { Plugin } from "vite";
 import type { Options } from "./index";
 import { getRenderer, navita, VIRTUAL_MODULE_ID } from "./index";
 
+const remixServerBuildId = '\0virtual:remix/server-build';
 let cssFileName: string;
 
 export function navitaRemix(options?: Options): Plugin[] {
-  let server: ViteDevServer;
+  let isProduction = false;
 
   const { renderChunk, ...navitaVite } = navita(options);
 
   return [
     navitaVite,
     {
       name: 'navita-remix',
-      configureServer(_server) {
-        server = _server;
-
-        server.middlewares.use(async function middleware(_req, _res, next) {
-          try {
-            const build = await server.ssrLoadModule(
-              'virtual:remix/server-build',
-            );
-
-            const { module } = build.routes.root;
-
-            // We modify the root module, to automatically include the CSS
-            // when running the dev server.
-            build.routes.root.module = {
-              ...module,
-              links: () => [
-                ...module.links(),
-                { rel: 'stylesheet', href: `/${VIRTUAL_MODULE_ID}` },
-              ],
-            };
-          } catch(e) {
-            console.error(e);
-          }
+      configResolved(config) {
+        isProduction = config.mode === 'production';
+      },
+      transform(code, id) {
+        if (isProduction || id !== remixServerBuildId) {
+          return;
+        }
 
-          next();
-        });
+        return `${code}\n${remixServerBuildExtension}`;
       },
       renderChunk(_, chunk) {
         if (chunk.name === "root") {
@@ -74,3 +58,13 @@ export function navitaRemix(options?: Options): Plugin[] {
     }
   ];
 }
+
+const remixServerBuildExtension = `
+  routes.root.module = {
+    ...route0,
+    links: () => [
+      ...(route0.links ? route0.links() : []),
+      { rel: 'stylesheet', href: '/${VIRTUAL_MODULE_ID}' },
+    ],
+  };
+`;