Reimplemented virtual routes to build paths without node libraries.

Shopify · Jan 23, 2025 · e19ab47 · e19ab47
1 parent e6ded23
commit e19ab47
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 29 deletions.
diff --git a/packages/hydrogen/src/vite/get-virtual-routes.test.ts b/packages/hydrogen/src/vite/get-virtual-routes.test.ts
@@ -9,19 +9,19 @@ describe('virtual routes', () => {
       routes: expect.arrayContaining([
         {
           id: expect.any(String),
-          file: expect.stringContaining('graphiql.tsx'),
+          file: expect.stringContaining('graphiql.jsx'),
           index: false,
           path: 'graphiql',
         },
         {
           id: expect.any(String),
-          file: expect.stringContaining('subrequest-profiler.tsx'),
+          file: expect.stringContaining('subrequest-profiler.jsx'),
           index: false,
           path: 'subrequest-profiler',
         },
         {
           id: expect.any(String),
-          file: expect.stringContaining('index.tsx'),
+          file: expect.stringContaining('index.jsx'),
           index: true,
           path: '',
         },

diff --git a/packages/hydrogen/src/vite/get-virtual-routes.ts b/packages/hydrogen/src/vite/get-virtual-routes.ts
@@ -1,39 +1,57 @@
-import {fileURLToPath} from 'node:url';
-import path from 'node:path';
-import {readdir} from 'node:fs/promises';
-
 export const VIRTUAL_ROUTES_DIR = 'vite/virtual-routes/routes';
+export const VIRTUAL_ROUTES_ROUTES_DIR_PARTS = [
+  'vite',
+  'virtual-routes',
+  'routes',
+];
+export const VIRTUAL_ROUTES_DIR_PARTS = ['vite', 'virtual-routes'];
 export const VIRTUAL_ROOT = 'vite/virtual-routes/virtual-root';
 
-export async function getVirtualRoutes() {
-  const distPath = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
-  const virtualRoutesPath = path.join(distPath, VIRTUAL_ROUTES_DIR);
-
-  const routes = await readdir(virtualRoutesPath, {recursive: true}).then(
-    (files) =>
-      files.map((relativeFilePath) => {
-        const absoluteFilePath = path.join(virtualRoutesPath, relativeFilePath);
-        const id = relativeFilePath
-          .replace(/\.[jt]sx?$/, '')
-          .replaceAll('\\', '/');
-        const isIndex = /(^|\/)index$/.test(id);
-        const routePath = id.replace(/(^|\/)index$/, '');
+function getVirtualRoutesPath(
+  pathParts: Array<string>,
+  forFile: string,
+): string {
+  const basePath = new URL('../', import.meta.url);
+  const virtualRoutesPath = pathParts.reduce((working, dirPart) => {
+    return new URL(`${dirPart}/`, working);
+  }, basePath);
+  return new URL(forFile, virtualRoutesPath).pathname;
+}
 
-        return {
-          id: `${VIRTUAL_ROUTES_DIR}/${id}`,
-          path: routePath,
-          file: absoluteFilePath,
-          index: isIndex,
-        };
-      }),
-  );
+export async function getVirtualRoutes() {
+  const routes = [
+    {
+      id: `${VIRTUAL_ROUTES_DIR}/graphiql`,
+      path: 'graphiql',
+      file: getVirtualRoutesPath(
+        VIRTUAL_ROUTES_ROUTES_DIR_PARTS,
+        'graphiql.jsx',
+      ),
+      index: false,
+    },
+    {
+      id: `${VIRTUAL_ROUTES_DIR}/subrequest-profiler`,
+      path: 'subrequest-profiler',
+      file: getVirtualRoutesPath(
+        VIRTUAL_ROUTES_ROUTES_DIR_PARTS,
+        'subrequest-profiler.jsx',
+      ),
+      index: false,
+    },
+    {
+      id: `${VIRTUAL_ROUTES_DIR}/index`,
+      path: '',
+      file: getVirtualRoutesPath(VIRTUAL_ROUTES_ROUTES_DIR_PARTS, 'index.jsx'),
+      index: true,
+    },
+  ];
 
   return {
     routes,
     root: {
       id: VIRTUAL_ROOT,
       path: '',
-      file: path.join(distPath, VIRTUAL_ROOT + '.jsx'),
+      file: getVirtualRoutesPath(VIRTUAL_ROUTES_DIR_PARTS, 'virtual-root.jsx'),
     },
   };
 }