Ensure importmap relative paths start with ./

devongovett · devongovett · commit 1ed569ca9d93 · 2025-03-01T21:15:01.000-08:00
diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
@@ -3145,6 +3145,60 @@ describe('html', function () {
       assert.equal(value, 7);
     });
 
+    it('should generate an import map with relative public url', async function () {
+      await fsFixture(overlayFS, dir)`
+        index.html:
+          <body>
+            <script src="./main.js" type="module"></script>
+          </body>
+        main.js:
+          globalThis.output = async () => (await import('./main-async')).bar();
+        main-async.js:
+          import './main-async.css';
+          export const bar = async () => (await import('./nested-async')).bar + 3;
+        main-async.css:
+          .foo { color: red }
+        nested-async.js:
+          import './nested-async.css';
+          export const bar = 4;
+        nested-async.css:
+          .bar { color: green }
+        `;
+
+      let b = await bundle(path.join(dir, '/index.html'), {
+        inputFS: overlayFS,
+        mode: 'production',
+        defaultTargetOptions: {
+          publicUrl: '.',
+        },
+      });
+
+      let html = await overlayFS.readFile(b.getBundles()[0].filePath, 'utf8');
+      let importMap = JSON.parse(
+        html.match(/<script type="importmap">(.*?)<\/script>/)[1],
+      );
+      assert.deepEqual(importMap, {
+        imports: {
+          [b.getBundles()[2].publicId]:
+            './' + path.basename(b.getBundles()[2].filePath),
+          [b.getBundles()[3].publicId]:
+            './' + path.basename(b.getBundles()[3].filePath),
+          [b.getBundles()[4].publicId]:
+            './' + path.basename(b.getBundles()[4].filePath),
+          [b.getBundles()[5].publicId]:
+            './' + path.basename(b.getBundles()[5].filePath),
+        },
+      });
+
+      assert(
+        html.indexOf('<script type="importmap">') < html.indexOf('<script src'),
+      );
+
+      let res = await run(b, null, {require: false});
+      let value = await res.output();
+      assert.equal(value, 7);
+    });
+
     it('should merge with an existing import map', async function () {
       await fsFixture(overlayFS, dir)`
         index.html:
diff --git a/packages/core/utils/src/urlJoin.js b/packages/core/utils/src/urlJoin.js
@@ -7,13 +7,26 @@ import path from 'path';
  * Joins a path onto a URL, and normalizes Windows paths
  * e.g. from \path\to\res.js to /path/to/res.js.
  */
-export default function urlJoin(publicURL: string, assetPath: string): string {
+export default function urlJoin(
+  publicURL: string,
+  assetPath: string,
+  leadingDotSlash: boolean = false,
+): string {
   const url = URL.parse(publicURL, false, true);
   // Leading / ensures that paths with colons are not parsed as a protocol.
   let p = assetPath.startsWith('/') ? assetPath : '/' + assetPath;
   const assetUrl = URL.parse(p);
   url.pathname = path.posix.join(url.pathname, assetUrl.pathname);
   url.search = assetUrl.search;
   url.hash = assetUrl.hash;
-  return URL.format(url);
+  let result = URL.format(url);
+  if (
+    url.host == null &&
+    result[0] !== '/' &&
+    result[0] !== '.' &&
+    leadingDotSlash
+  ) {
+    result = './' + result;
+  }
+  return result;
 }
diff --git a/packages/packagers/html/src/HTMLPackager.js b/packages/packagers/html/src/HTMLPackager.js
@@ -218,7 +218,7 @@ function insertBundleReferences(bundleGraph, htmlBundle, tree) {
 
   if (useImportMap && Object.keys(importMap).length > 0) {
     for (let id in importMap) {
-      importMap[id] = urlJoin(htmlBundle.target.publicUrl, importMap[id]);
+      importMap[id] = urlJoin(htmlBundle.target.publicUrl, importMap[id], true);
     }
 
     // If there is an existing <script type="importmap">, merge with that.

Original file line number	Diff line number	Diff line change
`@@ -218,7 +218,7 @@ function insertBundleReferences(bundleGraph, htmlBundle, tree) {`
`218`	`218`
`219`	`219`	`if (useImportMap && Object.keys(importMap).length > 0) {`
`220`	`220`	`for (let id in importMap) {`
`221`		`- importMap[id] = urlJoin(htmlBundle.target.publicUrl, importMap[id]);`
	`221`	`+ importMap[id] = urlJoin(htmlBundle.target.publicUrl, importMap[id], true);`
`222`	`222`	`}`
`223`	`223`
`224`	`224`	`// If there is an existing <script type="importmap">, merge with that.`