Fix windows paths in development (#520)

* Fix more paths in Windows * Changeset * Fix build:pkg in Windows * Update changeset
Shopify · Feb 16, 2023 · ce04cd7 · ce04cd7
1 parent 9ada30f
commit ce04cd7
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 13 deletions.
diff --git a/.changeset/empty-ghosts-joke.md b/.changeset/empty-ghosts-joke.md
@@ -2,4 +2,4 @@
 '@shopify/cli-hydrogen': patch
 ---
 
-fix template download on windows
+Fix template download on Windows during project creation.
diff --git a/.changeset/late-hats-dress.md b/.changeset/late-hats-dress.md
@@ -0,0 +1,6 @@
+---
+'@shopify/create-hydrogen': patch
+'@shopify/cli-hydrogen': patch
+---
+
+Fix pathnames on Windows when running the development server.
diff --git a/packages/cli/src/utils/virtual-routes.test.ts b/packages/cli/src/utils/virtual-routes.test.ts
@@ -24,11 +24,13 @@ describe('virtual routes', () => {
 
     expect(config.routes[VIRTUAL_ROUTES_DIR + '/index']).toMatchObject({
       parentId: VIRTUAL_ROOT,
+      path: undefined,
       file: '../' + VIRTUAL_ROUTES_DIR + '/index.tsx',
     });
 
     expect(config.routes[VIRTUAL_ROUTES_DIR + '/graphiql']).toMatchObject({
       parentId: VIRTUAL_ROOT,
+      path: 'graphiql',
       file: '../' + VIRTUAL_ROUTES_DIR + '/graphiql.tsx',
     });
   });

diff --git a/packages/cli/src/utils/virtual-routes.ts b/packages/cli/src/utils/virtual-routes.ts
@@ -5,7 +5,6 @@ import type {RemixConfig} from '@remix-run/dev/dist/config.js';
 
 export const VIRTUAL_ROUTES_DIR = 'virtual-routes/routes';
 export const VIRTUAL_ROOT = 'virtual-routes/virtual-root';
-const INDEX_SUFFIX = '/index';
 
 export async function addVirtualRoutes(config: RemixConfig) {
   const userRouteList = Object.values(config.routes);
@@ -14,27 +13,24 @@ export async function addVirtualRoutes(config: RemixConfig) {
 
   for (const absoluteFilePath of await recursiveReaddir(virtualRoutesPath)) {
     const relativeFilePath = path.relative(virtualRoutesPath, absoluteFilePath);
-    const routePath = fileURLToPath(
-      new URL(`file:///${relativeFilePath}`),
-    ).replace(/\.[jt]sx?$/, '');
+    const routePath = relativeFilePath
+      .replace(/\.[jt]sx?$/, '')
+      .replaceAll('\\', '/');
 
     // Note: index routes has path `undefined`,
     // while frame routes such as `root.jsx` have path `''`.
-    const isIndex = routePath.endsWith(INDEX_SUFFIX);
+    const isIndex = /(^|\/)index$/.test(routePath);
     const normalizedVirtualRoutePath = isIndex
-      ? routePath.slice(0, -INDEX_SUFFIX.length) || undefined
+      ? routePath.slice(0, -'index'.length).replace(/\/$/, '') || undefined
       : // TODO: support v2 flat routes?
-        routePath
-          .slice(1)
-          .replace(/\$/g, ':')
-          .replace(/[\[\]]/g, '');
+        routePath.replace(/\$/g, ':').replace(/[\[\]]/g, '');
 
     const hasUserRoute = userRouteList.some(
       (r) => r.parentId === 'root' && r.path === normalizedVirtualRoutePath,
     );
 
     if (!hasUserRoute) {
-      const id = VIRTUAL_ROUTES_DIR + routePath;
+      const id = VIRTUAL_ROUTES_DIR + '/' + routePath;
 
       config.routes[id] = {
         id,

diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
@@ -13,7 +13,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "tsup --clean --config ../../tsup.config.ts && npm run copy-hydrogen-react",
-    "copy-hydrogen-react": "cp ../../node_modules/@shopify/hydrogen-react/storefront.schema.json dist && cp ../../node_modules/@shopify/hydrogen-react/dist/types/storefront-api-types.d.ts dist",
+    "copy-hydrogen-react": "node ../../scripts/copy-hydrogen-react.mjs",
     "dev": "tsup --watch --config ../../tsup.config.ts",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",

diff --git a/scripts/copy-hydrogen-react.mjs b/scripts/copy-hydrogen-react.mjs
@@ -0,0 +1,22 @@
+import path from 'path';
+import fs from 'fs/promises';
+import {fileURLToPath} from 'url';
+
+(async () => {
+  const root = fileURLToPath(new URL('..', import.meta.url));
+  const hydrogenReact = 'node_modules/@shopify/hydrogen-react';
+  const hydrogenPkgDist = 'packages/hydrogen/dist';
+  const schemaFile = 'storefront.schema.json';
+  const typeFile = 'storefront-api-types.d.ts';
+
+  await fs.copyFile(
+    path.resolve(root, hydrogenReact, schemaFile),
+
+    path.resolve(root, hydrogenPkgDist, schemaFile),
+  );
+
+  await fs.copyFile(
+    path.resolve(root, hydrogenReact, 'dist/types', typeFile),
+    path.resolve(root, hydrogenPkgDist, typeFile),
+  );
+})();