allow outExtension option for esbuild

CHANGELOG.md

@@ -9,9 +9,10 @@ Go to the `v1` branch to see the changelog of Lume 1.
 ### Added
 - Basic auth middleware: Added `errorMessage` option.
 - Added "none" merge strategy to reset a previously defined strategy.
+- Esbuild plugin: added support for `outExtension` [#668].
 
 ### Fixed
-- When using special value `git created` for `date` variable, it will fall back to `git modified` first, then filesystem last modified date #667.
+- When using special value `git created` for `date` variable, it will fall back to `git modified` first, then filesystem last modified date [#667].
 - Updated dependencies: `linkedom`, `sass`, `satori`, `terser`, `liquidjs`, `tailwind`, `date-fns`, `std`, `esbuild`, `preact`, `lightningcss`, `postcss`, `remark-rehype`, `react` types, `unocss`.
 
 ## [2.3.2] - 2024-09-10
@@ -536,6 +537,8 @@ Go to the `v1` branch to see the changelog of Lume 1.
 [#652]: https://github.com/lumeland/lume/issues/652
 [#655]: https://github.com/lumeland/lume/issues/655
 [#662]: https://github.com/lumeland/lume/issues/662
+[#667]: https://github.com/lumeland/lume/issues/667
+[#668]: https://github.com/lumeland/lume/issues/668
 
 [2.3.3]: https://github.com/lumeland/lume/compare/v2.3.2...HEAD
 [2.3.2]: https://github.com/lumeland/lume/compare/v2.3.1...v2.3.2

plugins/esbuild.ts

@@ -113,10 +113,7 @@ export function esbuild(userOptions?: Options) {
     /** Run esbuild and returns the output files */
     const entryContent: Record<string, string> = {};
 
-    async function runEsbuild(
-      pages: Page[],
-      extraOptions: BuildOptions = {},
-    ): Promise<[OutputFile[], boolean]> {
+    async function runEsbuild(pages: Page[]): Promise<[OutputFile[], boolean]> {
       let enableAllSourceMaps = false;
       const entryPoints: string[] = [];
 
@@ -135,7 +132,7 @@ export function esbuild(userOptions?: Options) {
         metafile: false,
         entryPoints,
         sourcemap: enableAllSourceMaps ? "external" : undefined,
-        ...extraOptions,
+        outExtension: undefined,
       };
 
       const prefix = toFileUrl(site.src()).href;
@@ -234,6 +231,7 @@ export function esbuild(userOptions?: Options) {
 
     site.process(options.extensions, async (pages, allPages) => {
       const [outputFiles, enableSourceMap] = await runEsbuild(pages);
+      const { outExtension } = options.options;
 
       // Save the output code
       for (const file of outputFiles) {
@@ -243,20 +241,20 @@ export function esbuild(userOptions?: Options) {
 
         // Replace .tsx and .jsx extensions with .js
         const content = (!options.options.splitting && !options.options.bundle)
-          ? resolveImports(file.text, options.esm)
+          ? resolveImports(file.text, options.esm, outExtension)
           : file.text;
 
         // Search the entry point of this output file
         const url = normalizePath(
           normalizePath(file.path).replace(basePath, ""),
         );
 
-        const urlWithoutExt = pathWithoutExtension(url);
+        const [urlWithoutExt, ext] = pathAndExtension(url);
         const entryPoint = pages.find((page) => {
           const outdir = posix.join(
             "/",
             options.options.outdir || ".",
-            pathWithoutExtension(page.sourcePath),
+            pathAndExtension(page.sourcePath)[0],
           );
 
           return outdir === urlWithoutExt;
@@ -269,18 +267,20 @@ export function esbuild(userOptions?: Options) {
 
         // The page is an entry point
         if (entryPoint) {
+          const outExt = getOutExtension(ext, outExtension);
           entryPoint.data.url = posix.join(
             "/",
             options.options.outdir || ".",
-            replaceExtension(entryPoint.data.url, ".js"),
+            replaceExtension(entryPoint.data.url, outExt),
           );
           saveAsset(site, entryPoint, content, map?.text);
-        } else {
-          // The page is a chunk
-          const page = Page.create({ url });
-          saveAsset(site, page, content, map?.text);
-          allPages.push(page);
+          continue;
         }
+
+        // The page is a chunk
+        const page = Page.create({ url });
+        saveAsset(site, page, content, map?.text);
+        allPages.push(page);
       }
     });
   };
@@ -335,18 +335,40 @@ function buildJsxConfig(config?: DenoConfig): BuildOptions | undefined {
   }
 }
 
-function pathWithoutExtension(path: string): string {
-  return path.replace(/\.\w+$/, "");
+function pathAndExtension(path: string): [string, string] {
+  const match = path.match(/(.*)(\.\w+)$/);
+
+  if (!match) {
+    return [path, ""];
+  }
+  return [match[1], match[2]];
+}
+
+function getOutExtension(ext: string, outExtension?: Record<string, string>) {
+  const out = outExtension?.[ext];
+  if (out) {
+    return out;
+  }
+
+  switch (ext) {
+    case ".json":
+      return ".json";
+    default:
+      return ".js";
+  }
 }
 
-function resolveImports(content: string, esm: EsmOptions): string {
+function resolveImports(
+  content: string,
+  esm: EsmOptions,
+  outExtension?: Record<string, string>,
+): string {
   return content.replaceAll(
     /(from\s*)["']([^"']+)["']/g,
     (_, from, path) => {
       if (path.startsWith(".") || path.startsWith("/")) {
-        const resolved = path.endsWith(".json")
-          ? path
-          : replaceExtension(path, ".js");
+        const [url, ext] = pathAndExtension(path);
+        const resolved = url + getOutExtension(ext, outExtension);
         return `${from}"${resolved}"`;
       }
       const resolved = import.meta.resolve(path);