esbuild plugin: add proper support for lume url rewrites #685

lumeland · Nov 4, 2024 · 460142d · 460142d
1 parent 1ddf11e
commit 460142d
Show file tree

Hide file tree

Showing 8 changed files with 847 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 - `code_highlight` plugin: configuration type must be Partial [#679].
 - Updated dependencies: `sass`, `terser`, `liquid`, `tailwindcss`, `std`, `preact`, `mdx`, `xml`, `satori`, `react` types, `unocss`, `magic-string`, `vento`, `lightningcss`.
 - esbuild plugin: Add support for `entryNames` option [#678].
+- esbuild plugin: Add proper support for lume url rewrites (`basename` and `url`) [#685].
 - Enable `--port` argument to `lume cms` command [#686].
 
 ## [2.3.3] - 2024-10-07
@@ -578,6 +579,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 [#680]: https://github.com/lumeland/lume/issues/680
 [#681]: https://github.com/lumeland/lume/issues/681
 [#683]: https://github.com/lumeland/lume/issues/683
+[#685]: https://github.com/lumeland/lume/issues/685
 [#686]: https://github.com/lumeland/lume/issues/686
 
 [Unreleased]: https://github.com/lumeland/lume/compare/v2.3.3...HEAD

diff --git a/plugins/esbuild.ts b/plugins/esbuild.ts
@@ -1,8 +1,8 @@
 import {
+  getPathAndExtension,
   isAbsolutePath,
   isUrl,
   normalizePath,
-  replaceExtension,
 } from "../core/utils/path.ts";
 import { merge } from "../core/utils/object.ts";
 import { readDenoConfig } from "../core/utils/deno_config.ts";
@@ -15,7 +15,7 @@ import {
   OutputFile,
   stop,
 } from "../deps/esbuild.ts";
-import { dirname, extname, fromFileUrl, toFileUrl } from "../deps/path.ts";
+import { extname, fromFileUrl, posix, toFileUrl } from "../deps/path.ts";
 import { prepareAsset, saveAsset } from "./source_maps.ts";
 import { Page } from "../core/file.ts";
 import textLoader from "../core/loaders/text.ts";
@@ -127,14 +127,20 @@ export function esbuild(userOptions?: Options) {
       pages: Page[],
     ): Promise<[OutputFile[], Metafile, boolean]> {
       let enableAllSourceMaps = false;
-      const entryPoints: string[] = [];
+      const entryPoints: { in: string; out: string }[] = [];
 
       pages.forEach((page) => {
         const { content, filename, enableSourceMap } = prepareAsset(site, page);
         if (enableSourceMap) {
           enableAllSourceMaps = true;
         }
-        entryPoints.push(filename);
+
+        let outUri = getPathAndExtension(page.data.url)[0];
+        if (outUri.startsWith("/")) {
+          outUri = outUri.slice(1);
+        }
+
+        entryPoints.push({ in: filename, out: outUri });
         entryContent[toFileUrl(filename).href] = content;
       });
 
@@ -239,6 +245,9 @@ export function esbuild(userOptions?: Options) {
     site.process(options.extensions, async (pages, allPages) => {
       const [outputFiles, metafile, enableSourceMap] = await runEsbuild(pages);
 
+      console.log("metafile:", metafile);
+      console.log("outputFiles:", outputFiles);
+
       // Save the output code
       for (const [outputPath, output] of Object.entries(metafile.outputs)) {
         if (outputPath.endsWith(".map")) {
@@ -261,8 +270,17 @@ export function esbuild(userOptions?: Options) {
         }
 
         // Replace .tsx and .jsx extensions with .js
-        const content = (!options.options.splitting && !options.options.bundle)
-          ? resolveImports(outputFile.text, options.esm)
+        const content = !options.options.bundle
+          ? resolveImports(
+            outputFile.text,
+            output.entryPoint
+              ? relativePathFromUri(output.entryPoint, basePath)
+              : outputPath,
+            outputPath,
+            basePath,
+            options.esm,
+            metafile,
+          )
           : outputFile.text;
 
         // Get the associated source map
@@ -278,22 +296,8 @@ export function esbuild(userOptions?: Options) {
           continue;
         }
 
-        let outputRelativeEntryPoint = output.entryPoint;
-        if (outputRelativeEntryPoint.startsWith("deno:")) {
-          outputRelativeEntryPoint = outputRelativeEntryPoint.slice(
-            "deno:".length,
-          );
-        }
-        if (outputRelativeEntryPoint.startsWith(prefix)) {
-          outputRelativeEntryPoint = outputRelativeEntryPoint.slice(
-            prefix.length,
-          );
-        }
-        if (outputRelativeEntryPoint.startsWith("file://")) {
-          outputRelativeEntryPoint = fromFileUrl(outputRelativeEntryPoint);
-        }
-        outputRelativeEntryPoint = normalizePath(
-          outputRelativeEntryPoint,
+        const outputRelativeEntryPoint = relativePathFromUri(
+          output.entryPoint,
           basePath,
         );
 
@@ -309,10 +313,7 @@ export function esbuild(userOptions?: Options) {
         }
 
         // The page is an entry point
-        entryPoint.data.url = normalizedOutPath.replaceAll(
-          dirname(entryPoint.sourcePath) + "/",
-          dirname(entryPoint.data.url) + "/",
-        );
+        entryPoint.data.url = normalizedOutPath;
         saveAsset(site, entryPoint, content, map?.text);
       }
     });
@@ -368,23 +369,97 @@ function buildJsxConfig(config?: DenoConfig): BuildOptions | undefined {
   }
 }
 
+function relativePathFromUri(uri: string, basePath?: string): string {
+  if (uri.startsWith("deno:")) {
+    uri = uri.slice("deno:".length);
+  }
+
+  if (uri.startsWith("file://")) {
+    uri = fromFileUrl(uri);
+  }
+
+  return normalizePath(uri, basePath);
+}
+
 function resolveImports(
-  content: string,
+  source: string,
+  sourcePath: string,
+  outputPath: string,
+  basePath: string,
   esm: EsmOptions,
+  metafile: Metafile,
 ): string {
-  return content.replaceAll(
-    /(from\s*)["']([^"']+)["']/g,
-    (_, from, path) => {
-      if (path.startsWith(".") || path.startsWith("/")) {
-        const resolved = path.endsWith(".json")
-          ? path
-          : replaceExtension(path, ".js");
-        return `${from}"${resolved}"`;
-      }
-      const resolved = import.meta.resolve(path);
-      return `${from}"${handleEsm(resolved, esm) || resolved}"`;
-    },
+  source = source.replaceAll(
+    /\bfrom\s*["']([^"']+)["']/g,
+    (_, path) =>
+      `from "${
+        resolveImport(path, sourcePath, outputPath, basePath, esm, metafile)
+      }"`,
+  );
+
+  source = source.replaceAll(
+    /\bimport\s*["']([^"']+)["']/g,
+    (_, path) =>
+      `import "${
+        resolveImport(path, sourcePath, outputPath, basePath, esm, metafile)
+      }"`,
+  );
+
+  source = source.replaceAll(
+    /\bimport\([\s\n]*["']([^"']+)["'](?=[\s\n]*[,)])/g,
+    (_, path) =>
+      `import("${
+        resolveImport(path, sourcePath, outputPath, basePath, esm, metafile)
+      }"`,
   );
+
+  return source;
+}
+
+function resolveImport(
+  importPath: string,
+  sourcePath: string,
+  outputPath: string,
+  basePath: string,
+  esm: EsmOptions,
+  metafile: Metafile,
+): string {
+  if (importPath.startsWith(".") || importPath.startsWith("/")) {
+    const sourcePathOfImport = posix.join(
+      "/",
+      posix.dirname(sourcePath),
+      importPath,
+    );
+
+    const outputOfImport = Object.entries(metafile.outputs)
+      .find(([_, output]) => {
+        if (!output.entryPoint) {
+          return false;
+        }
+
+        const outputRelativeEntryPoint = relativePathFromUri(
+          output.entryPoint,
+          basePath,
+        );
+
+        return outputRelativeEntryPoint === sourcePathOfImport;
+      });
+
+    if (!outputOfImport) {
+      return importPath;
+    }
+
+    const outputPathOfImport = outputOfImport[0];
+    const relativeOutputPathOfImport = posix.relative(
+      posix.dirname(outputPath),
+      outputPathOfImport,
+    );
+
+    return "./" + relativeOutputPathOfImport;
+  }
+
+  const resolved = import.meta.resolve(importPath);
+  return handleEsm(resolved, esm) || resolved;
 }
 
 function handleEsm(path: string, options: EsmOptions): string | undefined {

diff --git a/tests/__snapshots__/esbuild.test.ts.snap b/tests/__snapshots__/esbuild.test.ts.snap
diff --git a/tests/__snapshots__/source_maps.test.ts.snap b/tests/__snapshots__/source_maps.test.ts.snap
diff --git a/tests/assets/esbuild/main.ts b/tests/assets/esbuild/main.ts
@@ -1,10 +1,15 @@
 /// <reference lib="dom" />
-import toUppercase from "./modules/to_uppercase.ts";
+import toUppercase, { toLowercase } from "./modules/to_uppercase.ts";
 import data from "./data.json";
 
 // https://github.com/lumeland/lume/issues/442
 import "https://esm.sh/v127/[email protected]/denonext/prop-types.development.mjs";
 
 document.querySelectorAll("h1")?.forEach((h1) => {
   h1.innerHTML = toUppercase(h1.innerHTML + data.foo);
+
+  toLowercase(h1.innerHTML)
+    .then(lower => {
+      h1.innerHTML = lower;
+    });
 });
diff --git a/tests/assets/esbuild/modules/to_uppercase.ts b/tests/assets/esbuild/modules/to_uppercase.ts
@@ -1,3 +1,9 @@
 export default function toUppercase(text: string) {
   return text.toUpperCase();
 }
+
+export async function toLowercase(text: string) {
+  const { toLowercase } = await import("../other/to_lowercase.ts");
+
+  return toLowercase(text);
+}
diff --git a/tests/assets/esbuild/other/to_lowercase.ts b/tests/assets/esbuild/other/to_lowercase.ts
@@ -0,0 +1,3 @@
+export function toLowercase(text: string) {
+  return text.toLowerCase();
+}
diff --git a/tests/esbuild.test.ts b/tests/esbuild.test.ts
@@ -11,6 +11,8 @@ Deno.test(
       src: "esbuild",
     });
 
+    site.data("basename", "util/toLower", "/other/to_lowercase.ts");
+
     // Test ignore with a function filter
     site.ignore((path) => path === "/modules" || path.startsWith("/modules/"));
     site.use(esbuild());
@@ -29,6 +31,8 @@ Deno.test(
       src: "esbuild",
     });
 
+    site.data("basename", "util/toLower", "/other/to_lowercase.ts");
+
     // Test ignore with a function filter
     site.ignore((path) => path === "/modules" || path.startsWith("/modules/"));
     site.use(esbuild({
@@ -41,19 +45,35 @@ Deno.test(
     await build(site);
 
     // Normalize chunk name
+    let chunkIndex = 0;
+    const chunkMap: { [chunk: string]: string } = {};
     for (const page of site.pages) {
       const url = page.data.url;
 
-      if (url.match(/chunk-[\w]{8}\.js/)) {
-        page.data.url = url.replace(/chunk-[\w]{8}\.js/, "chunk.js");
-        page.data.basename = page.data.basename.replace(
-          /chunk-[\w]{8}/,
-          "chunk",
-        );
-      } else {
-        const content = page.content as string;
-        page.content = content.replace(/chunk-[\w]{8}\.js/, "chunk.js");
+      const match = url.match(/chunk-[\w]{8}\.js/);
+      if (!match) {
+        continue;
+      }
+
+      page.data.url = url.replace(
+        /chunk-[\w]{8}\.js/,
+        `chunk-${chunkIndex}.js`,
+      );
+      page.data.basename = page.data.basename.replace(
+        /chunk-[\w]{8}/,
+        `chunk-${chunkIndex}`,
+      );
+      chunkMap[match[0]] = `chunk-${chunkIndex}.js`;
+      chunkIndex += 1;
+    }
+    for (const page of site.pages) {
+      let content = page.content as string;
+      for (
+        const [originalChunkName, newChunkName] of Object.entries(chunkMap)
+      ) {
+        content = content.replace(originalChunkName, newChunkName);
       }
+      page.content = content;
     }
 
     await assertSiteSnapshot(t, site);
@@ -69,6 +89,8 @@ Deno.test(
       src: "esbuild_jsx",
     });
 
+    site.data("basename", "util/toLower", "/other/to_lowercase.ts");
+
     site.use(jsx({
       pageSubExtension: ".page",
     }));
@@ -91,6 +113,8 @@ Deno.test(
       src: "esbuild",
     });
 
+    site.data("basename", "util/toLower", "/other/to_lowercase.ts");
+
     site.use(esbuild({
       options: {
         outExtension: { ".js": ".min.js" },
@@ -111,6 +135,8 @@ Deno.test(
       src: "esbuild",
     });
 
+    site.data("basename", "util/toLower", "/other/to_lowercase.ts");
+
     site.use(esbuild({
       options: {
         entryNames: "js/[name].hash",
@@ -131,6 +157,8 @@ Deno.test(
       src: "esbuild",
     });
 
+    site.data("basename", "util/toLower", "/other/to_lowercase.ts");
+
     site.use(esbuild({
       options: {
         entryNames: "one/[dir]/two/[name]/hash",
@@ -141,3 +169,27 @@ Deno.test(
     await assertSiteSnapshot(t, site);
   },
 );
+
+// Disable sanitizeOps & sanitizeResources because esbuild doesn't close them
+Deno.test(
+  "esbuild plugin without bundle",
+  { sanitizeOps: false, sanitizeResources: false },
+  async (t) => {
+    const site = getSite({
+      src: "esbuild",
+    });
+
+    site.data("basename", "util/toLower", "/other/to_lowercase.ts");
+
+    site.use(esbuild({
+      options: {
+        bundle: false,
+        entryNames: "[dir]/[name].hash",
+        outExtension: { ".js": ".min.js" },
+      },
+    }));
+
+    await build(site);
+    await assertSiteSnapshot(t, site);
+  },
+);