Registry / web-framework / esbuild-plugin-lit

esbuild-plugin-lit

library0.1.1jsnpmunverified

An esbuild plugin for importing CSS, SVG, HTML, and XLIFF files as tagged-template literals (lit-html compatible) with optional minification via esbuild, html-minifier, and svgo. Current version 0.1.1, stable release. Differentiators: simplifies LitElement development by eliminating separate build steps for styles and assets; supports TypeScript with provided type declarations; enables direct import of XLIFF localization files without intermediate compilation. Peer dependencies include esbuild, lit, html-minifier, svgo, and txml.

web-framework serialization

npm install esbuild-plugin-lit

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-LIT

esbuild-plugin-lit

web-frameworkjavascriptv0.1.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import litPlugin from 'esbuild-plugin-lit'

✗ const litPlugin = require('esbuild-plugin-lit')

Package uses ESM default export; CommonJS require() works too (compiled by esbuild).

LitPlugin

✓ import type { LitPlugin } from 'esbuild-plugin-lit'

✗ import { LitPlugin } from 'esbuild-plugin-lit'

LitPlugin is a type export, not a value. Use type import for TypeScript.

Options

✓ import type { Options } from 'esbuild-plugin-lit'

Options type for plugin configuration.

Shows how to set up the plugin with esbuild and import CSS/SVG files as tagged template literals in a LitElement.

const { default: litPlugin } = require('esbuild-plugin-lit'); require('esbuild').build({ entryPoints: ['index.ts'], bundle: true, outfile: 'index.js', plugins: [litPlugin()], }).catch(() => process.exit(1)); // index.ts: import { LitElement, html, css } from 'lit'; import styles from './styles.css'; import icon from './icon.svg'; class MyElement extends LitElement { static styles = css`${styles}`; render() { return html`<div class="icon">${icon}</div>`; } } customElements.define('my-element', MyElement);

Debug

Known issues

deprecatedThe default export may change in future versions; prefer named import if available.

fix

None needed yet, but monitor package for breaking changes.

affects: >=0.1.0

gotchaSVG and HTML minification require optional peer dependencies svgo and html-minifier to be installed separately.

fix

npm install svgo html-minifier --save-dev

affects: >=0.1.0

gotchaXLIFF loading requires txml peer dependency and setting esbuild loader to 'text' for .xlf files.

fix

npm install txml --save-dev and add `loader: { '.xlf': 'text' }` to esbuild config.

affects: >=0.1.0

gotchaTypeScript ambient module declarations are not automatically included; you must add them manually in tsconfig.

fix

Add `"include": ["./node_modules/esbuild-plugin-lit/modules.d.ts"]` to tsconfig.json.

affects: >=0.1.0

gotchaThe filter regex in plugin options augments the global filter; misconfiguration may cause files not to be processed.

fix

Ensure custom filter extends the default by using pattern like /(\.css|\.svg|\.html|\.xlf|\.scss)$/

affects: >=0.1.0

Errors

Common errors & fixes

Error: Cannot find module 'html-minifier'

Missing optional dependency for HTML minification.

fix

npm install html-minifier --save-dev

TypeScript error: Cannot find module './styles.css' or its corresponding type declarations.

Ambient module declarations not included in tsconfig.

fix

Add `"include": ["./node_modules/esbuild-plugin-lit/modules.d.ts"]` to tsconfig.json.

Error: The plugin "lit" requires the "esbuild" package to be installed

Missing esbuild peer dependency.

fix

npm install esbuild --save-dev

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

esbuildrequiredpeer dependency for esbuild plugin API

litrequiredpeer dependency - provides tagged template literal support

html-minifieroptionalpeer dependency for HTML minification

svgooptionalpeer dependency for SVG minification

txmloptionalpeer dependency for XLIFF parsing

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/zandaqo/esbuild-plugin-lit ↗

packagehttps://www.npmjs.com/package/esbuild-plugin-lit ↗