Fix esbuild mode on Windows

.changeset/silver-cameras-flow.md

@@ -0,0 +1,5 @@
+---
+"modular-scripts": patch
+---
+
+Fix `app`s and `esm-view`s building and starting with esbuild mode on Windows

packages/modular-scripts/src/__tests__/app.esbuild.test.ts

@@ -79,7 +79,7 @@ describe('when working with an app', () => {
       .toMatchInlineSnapshot(`
       "sample-esbuild-app
       ├─ favicon.ico #6pu3rg
-      ├─ index.html #oi1d4z
+      ├─ index.html #nrfr3t
       ├─ logo192.png #1nez7vk
       ├─ logo512.png #1hwqvcc
       ├─ manifest.json #19gah8o
@@ -90,8 +90,8 @@ describe('when working with an app', () => {
          │  ├─ index-OPRZV2UT.css #1ldttcq
          │  └─ index-OPRZV2UT.css.map #za6yi0
          ├─ js
-         │  ├─ index-LB6Z463Q.js #1q0ezk5
-         │  └─ index-LB6Z463Q.js.map #16wrl07
+         │  ├─ index-LSDSCJMN.js #1cuiasc
+         │  └─ index-LSDSCJMN.js.map #5p9anu
          └─ media
             └─ logo-PGX3QVVN.svg #1okqmlj"
     `);
@@ -123,7 +123,7 @@ describe('when working with an app', () => {
               'sample-esbuild-app',
               'static',
               'js',
-              'index-LB6Z463Q.js',
+              'index-LSDSCJMN.js',
             ),
           ),
         ),
@@ -149,7 +149,7 @@ describe('when working with an app', () => {
   };
 
   it('can generate a index.js.map', () => {
-    expect(readSourceMap('static/js/index-LB6Z463Q.js.map')).toMatchSnapshot();
+    expect(readSourceMap('static/js/index-LSDSCJMN.js.map')).toMatchSnapshot();
   });
 
   it('can generate a index.css.map', () => {

packages/modular-scripts/src/__tests__/utils/formatPath.test.ts

@@ -0,0 +1,27 @@
+import { normalizeToPosix } from '../../esbuild-scripts/utils/formatPath';
+
+describe('Normalize path to Posix', () => {
+  it('should convert a Win32 path into a Posix path', () => {
+    expect(normalizeToPosix('\\this\\is\\my\\win32\\path')).toBe(
+      '/this/is/my/win32/path',
+    );
+  });
+  it('should convert a mixed path into a Posix path', () => {
+    expect(normalizeToPosix('/this/is\\my/mixed\\path')).toBe(
+      '/this/is/my/mixed/path',
+    );
+  });
+  it('should leave a Posix path untouched', () => {
+    expect(normalizeToPosix('/this/is/my/posix/path')).toBe(
+      '/this/is/my/posix/path',
+    );
+  });
+  it('should return undefined if undefined is passed', () => {
+    expect(normalizeToPosix(undefined)).toBeUndefined();
+  });
+  it('should convert a relative path to a relative Posix path', () => {
+    expect(normalizeToPosix('this\\is/my/relative\\mixed/path')).toBe(
+      'this/is/my/relative/mixed/path',
+    );
+  });
+});

packages/modular-scripts/src/esbuild-scripts/api.ts

@@ -8,6 +8,7 @@ import type { Paths } from '../utils/createPaths';
 import getModularRoot from '../utils/getModularRoot';
 import * as path from 'path';
 import type { Dependency } from '@schemastore/package';
+import { normalizeToPosix } from './utils/formatPath';
 
 type FileType = '.css' | '.js';
 
@@ -121,10 +122,10 @@ export async function createIndex({
   const index =
     indexContent ?? (await fs.readFile(paths.appHtml, { encoding: 'utf-8' }));
   const cssEntryPoint = metafile
-    ? getEntryPoint(paths, metafile, '.css')
+    ? normalizeToPosix(getEntryPoint(paths, metafile, '.css'))
     : undefined;
   const jsEntryPoint = metafile
-    ? getEntryPoint(paths, metafile, '.js')
+    ? normalizeToPosix(getEntryPoint(paths, metafile, '.js'))
     : undefined;
 
   return compileIndex({

packages/modular-scripts/src/esbuild-scripts/plugins/svgr.ts

@@ -5,6 +5,7 @@ import { createRequire } from 'module';
 import * as svgr from '@svgr/core';
 import path from 'path';
 import getModularRoot from '../../utils/getModularRoot';
+import { normalizeToPosix } from '../utils/formatPath';
 
 const svgrOptions: svgr.Config = {
   template(variables, { tpl }) {
@@ -96,13 +97,16 @@ function createPlugin(): esbuild.Plugin {
             },
           );
 
+          const normalizedPath = normalizeToPosix(pathName);
+          const contentsWrapper = `
+          export { default } from "@svgurl:${normalizedPath}";
+
+          ${transformedContents}
+          `;
+
           return {
             resolveDir: pluginData.resolveDir,
-            contents: `
-            export { default } from "@svgurl:${pathName}";
-
-            ${transformedContents}
-            `,
+            contents: contentsWrapper,
             loader: 'jsx',
           };
         }

packages/modular-scripts/src/esbuild-scripts/start/index.ts

@@ -35,6 +35,7 @@ import getModularRoot from '../../utils/getModularRoot';
 import { createRewriteDependenciesPlugin } from '../plugins/rewriteDependenciesPlugin';
 import createEsbuildBrowserslistTarget from '../../utils/createEsbuildBrowserslistTarget';
 import type { Dependency } from '@schemastore/package';
+import { normalizeToPosix } from '../utils/formatPath';
 
 const RUNTIME_DIR = path.join(__dirname, 'runtime');
 class DevServer {
@@ -323,8 +324,9 @@ class DevServer {
 
     for (const file of outputFiles) {
       if (
-        sanitizeFileName('/' + path.relative(outputDirectory, file.path)) ===
-        url
+        normalizeToPosix(
+          sanitizeFileName('/' + path.relative(outputDirectory, file.path)),
+        ) === url
       ) {
         const type = getType(url) as string;
 

packages/modular-scripts/src/esbuild-scripts/utils/formatPath.ts

@@ -0,0 +1,7 @@
+import path from 'path';
+
+export function normalizeToPosix<T extends string | undefined>(pathName: T): T {
+  return (
+    pathName ? pathName.split(path.win32.sep).join(path.posix.sep) : pathName
+  ) as T;
+}

packages/modular-scripts/src/esbuild-scripts/utils/sanitizeMetafile.ts

@@ -2,13 +2,15 @@ import * as path from 'path';
 import type * as esbuild from 'esbuild';
 
 import getModularRoot from '../../utils/getModularRoot';
+import { normalizeToPosix } from './formatPath';
 import type { Paths } from '../../utils/createPaths';
 
 export const sanitizeFileName = (pathName: string): string => {
+  const normalizedPathName = normalizeToPosix(pathName);
   if (['.css', '.css.map'].some((ext) => pathName.endsWith(ext))) {
-    return pathName.replace('/js/', '/css/');
+    return normalizedPathName.replace('/js/', '/css/');
   } else {
-    return pathName;
+    return normalizedPathName;
   }
 };