lit-element-transpiler

0.1.0 verified Fri May 01 auth: no javascript maintenance

A TypeScript transpiler for LitElement components that inlines imported CSS/SCSS files and transpiles TypeScript decorators (@customElement, @property) to native JavaScript. Currently at version 0.1.0, it targets TypeScript ^3.7.0 to < ^3.8.2. It differentiates by automating style inlining and decorator removal, simplifying LitElement code for production. However, it is pre-release and no longer actively maintained, with a narrow TypeScript version range.

Common errors

error Error: Cannot find module 'typescript' ↓

cause TypeScript peer dependency not installed or version mismatch.

fix

Run 'npm install --save-dev typescript@^3.7.0' (within the required range).

error TypeError: transform is not a function ↓

cause Default import used instead of named import.

fix

Use 'import { transform } from 'lit-element-transpiler'' instead of default import.

error Error: Cannot find module './hello-world.css' ↓

cause CSS file not found at the specified path when transform is called.

fix

Ensure the CSS file exists at the expected location or use mock-fs in test environments.

Warnings

breaking TypeScript peer dependency range is strict: >=3.7.0 <3.8.2; using newer TypeScript versions may break. ↓

fix Use TypeScript 3.7.x or 3.8.0-3.8.1; avoid 3.8.2+ and 3.9+.

deprecated Package has not been updated since 2020 and is effectively in maintenance mode; no plans for new features. ↓

fix Consider alternatives like @open-wc/building-utils or custom-elements-manifest.

gotcha The package does not bundle its own TypeScript; it uses the project's TypeScript, which must match the peer range exactly. ↓

fix Ensure project TypeScript version is within 3.7.0 and 3.8.1.

gotcha CSS/SCSS files must exist on disk at transform time; mock-fs or similar is needed for testing without real files. ↓

fix Use mock-fs or write files to disk before calling transform.

Install

npm install lit-element-transpiler

yarn add lit-element-transpiler

pnpm add lit-element-transpiler

Imports

transform

wrong

import transform from 'lit-element-transpiler'

correct

import { transform } from 'lit-element-transpiler'

Named export; default import does not exist.

Quickstart

Demonstrates basic usage of the transform function: imports a LitElement component, inlines CSS, and transpiles decorators.

import { transform } from 'lit-element-transpiler'

const code = `
import { LitElement, html, customElement, property } from 'lit-element'
import './hello-world.css'

@customElement('hello-world')
class HelloWorld extends LitElement {
  @property() message
}
`

transform('hello-world.ts', code).then(result => {
  console.log(result.code)
  // Output: decorators removed, CSS inlined
}).catch(err => console.error(err))