Add HTML script tag plugin to esbuild build

Mqxx · Mqxx · commit e6776dbebd0b · 2025-10-28T15:43:48.000+01:00
Introduces a custom esbuild plugin to rewrite script src extensions in HTML files during the build process. Updates build configuration to use the new plugin and changes index.html to reference index.tsx directly, allowing the plugin to handle extension replacement.
diff --git a/build/esbuild.ts b/build/esbuild.ts
@@ -1,9 +1,10 @@
 /// <reference lib="deno.ns" />
 import * as esbuild from '@esbuild';
-import { denoPlugin as esbuildPluginDeno } from "@deno/esbuild-plugin";
 import { bold, green, magenta } from '@std/fmt/colors';
 import { parseArgs } from '@std/cli/parse-args';
 import { copy as esbuildPluginCopy } from './plugins/copy.ts';
+import { denoPlugin as esbuildPluginDeno } from "@deno/esbuild-plugin";
+import { htmlScriptTags as esbuildPluginHtmlScriptTags } from './plugins/html_script_tags.ts';
 
 const args = parseArgs<{
   watch: boolean | undefined,
@@ -18,7 +19,6 @@ const copyConfig : esbuild.BuildOptions = {
   outdir: './dist',
   outbase: './src/client',
   entryPoints: [
-    './src/client/**/index.html',
     './src/client/**/assets/*',
     './src/client/static/**/*'
   ],
@@ -27,7 +27,7 @@ const copyConfig : esbuild.BuildOptions = {
   ]
 }
 
-const filesConfig : esbuild.BuildOptions = {
+const buildConfig : esbuild.BuildOptions = {
   allowOverwrite: true,
   logLevel: args.logLevel ?? 'info',
   legalComments: args.develop ? 'inline' : 'none',
@@ -44,6 +44,7 @@ const filesConfig : esbuild.BuildOptions = {
   outdir: './dist',
   outbase: './src/client',
   entryPoints: [
+    './src/client/**/index.html',
     './src/client/index.tsx',
     './src/client/index.css'
   ],
@@ -52,6 +53,7 @@ const filesConfig : esbuild.BuildOptions = {
     'nesting': true
   },
   plugins: [
+    esbuildPluginHtmlScriptTags(),
     esbuildPluginDeno({
       preserveJsx: true,
       debug: args.develop ?? false
@@ -65,11 +67,11 @@ const timestampNow = Date.now();
 
 if (args.watch) {
   esbuild.context(copyConfig).then((context) => context.watch());
-  esbuild.context(filesConfig).then((context) => context.watch());
+  esbuild.context(buildConfig).then((context) => context.watch());
 } else {
   Promise.all([
     esbuild.build(copyConfig),
-    esbuild.build(filesConfig)
+    esbuild.build(buildConfig)
   ]).then(() => {
     esbuild.stop();
     console.log(green(`esbuild ${esbuild.version} finished build in ${(Date.now() - timestampNow).toString()}ms.`));
diff --git a/build/plugins/html_script_tags.ts b/build/plugins/html_script_tags.ts
@@ -0,0 +1,38 @@
+import type * as esbuild from '@esbuild';
+
+
+const defaultExtensionReplacements = {
+  '.tsx': '.js',
+  '.ts': '.js'
+}
+
+export function htmlScriptTags(options?: {
+  pattern?: RegExp,
+  extension?: {[extension: string] : string}
+}) : esbuild.Plugin {
+  return ({
+    name: 'html-script-tags',
+    setup(build) : void {
+      build.onLoad({filter: /\.html$/}, (args) => {
+        return {
+          contents: Deno.readTextFileSync(args.path).replace(
+            options?.pattern ?? /(?<=<script.*src=")(.*)(?=".*>)/gm,
+            (_, scriptSrcPath : string) => {
+              let path = scriptSrcPath;
+              let replaced = false;
+              Object.entries(options?.extension ?? defaultExtensionReplacements).forEach(([extension, replacement]) => {
+                if (scriptSrcPath.match(extension) && !replaced) {
+                  path = scriptSrcPath.replace(extension, replacement)
+                  replaced = true
+                }
+              })
+
+              return path;
+            }
+          ),
+          loader: 'copy',
+        }
+      })
+    }
+  })
+}
diff --git a/src/client/index.html b/src/client/index.html
@@ -6,7 +6,7 @@
     <title>Home</title>
     <link rel="shortcut icon" href="/static/favicon.svg" type="image/x-icon" />
     <link rel="stylesheet" href="./index.css">
-    <script type="module" src="./index.js" defer></script>
+    <script type="module" src="./index.tsx" defer></script>
   </head>
   <body></body>
 </html>
