[esbuild-html-plugin] - Assets are loaded into the [dir] directory about rna

[harleylang]

A temporary workaround that (1) finds all .html files in the source folder and (2) iterates over them, creating nested builds so that pages can be loaded using url directories like "www.example.com/testing/" and not "www.exmple.com/testing.html":

import esbuild from "esbuild";
import htmlPlugin from "@chialab/esbuild-plugin-html";
import findFiles from './findFiles.js'; // adapted from: https://stackoverflow.com/a/47900452/14198287

let files = findFiles('./src', '.html'); 

for (let f in files) {
  let file = files[f];
  let dir = file.split('/').slice(-2)[0];
  await esbuild.build({
    entryPoints: [file],
    outdir: `public/${dir === 'src' ? '' : dir}`,
    plugins: [htmlPlugin()],
    assetNames: "[name]",
    bundle: true,
    minify: true,
    write: true,
  }); 
};

This only works for directories 1-level deep into the src directory tree, but suits my needs for now. It's the best solution I could think of up, the main drawback being that any shared js files, assets, etc. are not shared between pages.

[CodexHere]

Also running into this problem, which makes multi-entrypoint builds impossible with a single config as expected.

Ends up with any bundles after the first pointing to the first as their targeted js, which means they all render the same app.

According to the docs, it should work with [dir] in the *Names options: https://esbuild.github.io/api/#entry-names

[edoardocavazza]

Hello @harleylang and @nerdfoundrygaming

we finally managed to release a version (0.15.17) that should handle the case. Can you help us in testing it? There may be some edge cases we missed. Thank you!

[harleylang]

Thanks @edoardocavazza !! I just tested with 0.15.17.

I can report that my nested route compiled, however I am receiving an absolute path for the assets within my root index.html file.

config:

await esbuild.build({
  entryPoints: ["src/index.html","src/study/index.html"],
  entryNames: '[dir]/[name]',
  outdir: "public",
  outbase: "src",
  plugins: [htmlPlugin()],
  assetNames: "[dir]/[name]",
  bundle: true,
  minify: true,
  write: true,
});

root index.html:

nested index.html:

[edoardocavazza]

I see. Version 0.15.20 has a fix for that 🤞

[harleylang]

Closing as this is sorted on my end both locally and in production. Thank you @edoardocavazza !!