rollup-plugin-lit-transformer

0.3.3 verified Fri May 01 auth: no javascript

A Rollup plugin that transforms lit-html templates at build time using SWC (Speedy Web Compiler). Current stable version is 0.3.3, released in early 2023, with low release cadence (last update over a year ago). It optimizes LitElement and lit-html templates by inlining static parts, reducing runtime overhead and bundle size. Key differentiators: uses SWC for fast transformation, supports custom elements and web components. Alternative tools like @open-wc/building-rollup or @lit/context exist, but this plugin is specifically for Rollup and SWC integration.

Common errors

error Error: Cannot find module '@swc/core' ↓

cause Missing peer dependency @swc/core.

fix

Install @swc/core with npm install @swc/core.

error SyntaxError: Unexpected token 'export' (or import) ↓

cause Using require() on an ESM-only package.

fix

Switch to ESM (use import) or dynamic import: const litTransformer = (await import('rollup-plugin-lit-transformer')).default.

Warnings

deprecated Package has not been updated since early 2023; consider using official Lit build tools like @lit/rollup-plugin-lit-html. ↓

fix Switch to @lit/rollup-plugin-lit-html or @open-wc/building-rollup for better maintenance.

gotcha Plugin must be placed before other transform plugins (like SWC) in the Rollup plugins array. ↓

fix Order plugins: litTransformer() first, then transpilers (e.g., swcPlugin).

breaking Breaking change: In version 0.3.0, the export changed from named to default. Previously used `import { litTransformer }` now throws. ↓

fix Use default import `import litTransformer from 'rollup-plugin-lit-transformer'`.

Install

npm install rollup-plugin-lit-transformer

yarn add rollup-plugin-lit-transformer

pnpm add rollup-plugin-lit-transformer

Imports

default

wrong

const litTransformer = require('rollup-plugin-lit-transformer')

correct

import litTransformer from 'rollup-plugin-lit-transformer'

Package is ESM-only; CommonJS require() will not work unless dynamic import is used.

litTransformer

import litTransformer from 'rollup-plugin-lit-transformer'

Default export, same as the plugin function.

Plugin options (TypeScript)

wrong

import { Options } from 'rollup-plugin-lit-transformer' (value import, but it's a type)

correct

import type { Options } from 'rollup-plugin-lit-transformer'

TypeScript users should use `import type` for Options interface.

Quickstart

Shows basic Rollup config using litTransformer plugin with SWC for transforming Lit templates in a TypeScript project.

// rollup.config.js
import litTransformer from 'rollup-plugin-lit-transformer';
import { swcPlugin } from 'rollup-plugin-swc3'; // or similar SWC plugin

export default {
  input: 'src/index.js',
  output: { dir: 'dist', format: 'es' },
  plugins: [
    litTransformer(), // must be before SWC or other transform plugins
    swcPlugin({
      jsc: {
        parser: { syntax: 'typescript' },
        transform: {}, // any transforms needed
      }
    })
  ]
};