esbuild sourcemap loses filename on web components

[steve-o]

With esbuild 0.23.1 and 0.24.0, when the esbuild-plugin-minify-html-literals is enabled, if a component is not explicitly imported by name then the sourcemap output is absent the filename.

Example:

... "../../src/frontend/components", "../../src/frontend/components", "../../src/frontend/components", "../../src/frontend/components", ...

With the following esbuild script:

import esbuild from 'esbuild';
import { minifyHTMLLiteralsPlugin } from 'esbuild-plugin-minify-html-literals';
import { compressPlugin } from '@liber-ufpe/esbuild-plugin-compress';

const commonOptions = {
        bundle: true,
        sourcemap: true,
        logLevel: 'info',
};

const compress = compressPlugin({
    gzip: false,
    brotli: true,
    deflate: false,
});

await esbuild.build({
    minify: true,
    splitting: true,
    entryPoints: ['src/frontend/index.ts'],
    outdir: 'dist/frontend',
    format: 'esm',
    platform: 'browser',
    target: 'esnext',
    tsconfig: 'src/frontend/tsconfig.json',
    metafile: true,
    plugins: [
        minifyHTMLLiteralsPlugin(),
        compress,
    ],
    ...commonOptions,
})

With the index.ts basically re-exporting components,

export * from './components/boris-plaintext-input.js';
export * from './components/boris-poster.js';
export * from './components/boris-progress.js';
export * from './components/boris-publish-dialog.js';

With components looking similar to:

import { LitElement, css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';

@customElement('boris-plaintext-input')
export class BorisPlaintextInputElement extends LitElement {
}

[bennypowers]

That's quite specific 😁

Perhaps the issue is here?

https://github.com/bennypowers/lit-css/blob/ddd01df9b3ca2b3611ce1c222cd17b119b94b20e/packages/esbuild-plugin-minify-html-literals/esbuild-plugin-minify-html-literals.ts#L30

Happy to take a PR with tests

[steve-o]

Looks like the following is more conducive:

const sourcemap = result && result.map?.toUrl();
const contents = result && (sourcemap.startsWith('data:') ? result.code : `${result.code}
//# sourceMappingURL=${result.map?.toUrl()}`);

i.e. the sourcemap URL is presenting as a data URI and should not be linked.

data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLm1hcCIsInNvdXJjZXMiOltudW...