lit-swc-transpiler

1.0.0 verified Fri May 01 auth: no javascript

A fast SWC-based transpiler for LitElement and other custom elements. Version 1.0.0 focuses on converting decorator and template syntax to standard JavaScript with minimal overhead. Ships TypeScript types for better DX. Compared to Babel-based alternatives, it leverages SWC's Rust core for up to 20x faster compilation. Ideal for large web component projects and build pipelines. Currently in early release, no stable release cadence yet.

Common errors

error Error: Cannot find module 'lit-swc-transpiler' ↓

cause Package not installed or wrong import path.

fix

Run npm install lit-swc-transpiler and ensure import path is correct.

error TypeError: transpile is not a function ↓

cause Using CommonJS require instead of ESM import.

fix

Change const { transpile } = require('lit-swc-transpiler') to import { transpile } from 'lit-swc-transpiler'.

error SyntaxError: Unexpected token (5:10) - Decorators are not valid here. ↓

cause Decorator syntax in a file not recognized as TypeScript.

fix

Either rename file to .ts or pass ts: true in options.

Warnings

breaking Decorator syntax is only supported in TypeScript mode; plain JavaScript files cannot use decorators without a separate parser. ↓

fix Enable TypeScript mode by setting `ts: true` option, or pre-process with a decorator transformer.

deprecated The `transform` function is deprecated in favor of `transpile`. ↓

fix Use `transpile` instead. `transform` will be removed in v2.

gotcha The library does not handle `css` tagged template literal polyfills; ensure Lit's `css` helper is imported. ↓

fix Add `import { css } from 'lit';` in your source files.

gotcha Source maps are not generated by default; enable with `sourceMaps: true` option. ↓

fix Pass `sourceMaps: true` in options to get inline source maps.

Install

npm install lit-swc-transpiler

yarn add lit-swc-transpiler

pnpm add lit-swc-transpiler

Imports

transpile

wrong

const { transpile } = require('lit-swc-transpiler')

correct

import { transpile } from 'lit-swc-transpiler'

Library is ESM-only; CommonJS require is not supported.

TransformOptions

wrong

import { TransformOptions } from 'lit-swc-transpiler'

correct

import type { TransformOptions } from 'lit-swc-transpiler'

Type import only; runtime use will cause error.

transformSync
```
import { transformSync } from 'lit-swc-transpiler'
```
Synchronous version of transpile; use only in build scripts.

Quickstart

Shows basic usage: transpile a LitElement with decorators and TypeScript, outputting standard JS.

import { transpile } from 'lit-swc-transpiler';

const code = `
import { LitElement, html, css } from 'lit';

class MyElement extends LitElement {
  static styles = css\`p { color: red; }\`;
  
  @property()
  name = 'World';
  
  render() {
    return html\`<p>Hello, \${this.name}!</p>\`;
  }
}

customElements.define('my-element', MyElement);
`;

const result = transpile(code, {
  filename: 'my-element.ts',
  decorators: true,
  ts: true
});

console.log(result.code);