lit-css icon indicating copy to clipboard operation
lit-css copied to clipboard

esbuild sourcemap loses filename on web components

Open steve-o opened this issue 5 months ago • 2 comments

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 {
}

steve-o avatar Sep 24 '24 16:09 steve-o