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?

lit-css/packages/esbuild-plugin-minify-html-literals/esbuild-plugin-minify-html-literals.ts

Line 30 in ddd01df

const contents = result && `${result.code}\n//# sourceMappingURL=${result.map?.toUrl()}`;

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...