Publish an element

• Publish to npm
• Transpiling with TypeScript
• Transpiling with Babel

This page describes how to publish a LitElement component to npm.

We recommend publishing JavaScript modules in standard ES2017. If you’re writing your element in standard ES2017, you don’t need to transpile for publication. If you’re using decorators, class fields, or other ES2017+ features, you will need to transpile your element for publication.

Publish to npm

To publish your component to npm, see the instructions on contributing npm packages.

Your package.json configuration should have both the main and module fields:

package.json

{
  "main": "my-element.js",
  "module": "my-element.js"
}

You should also create a README describing how to consume your component. A basic guide to consuming LitElement components is documented at Use a component.

Transpiling with TypeScript

To transpile element code from TypeScript to JavaScript, conigure tsconfig.json. Make sure you include the "downlevelIteration": true option.

tsconfig.json

{
  "include": ["src/*.ts"],
  "compilerOptions": {
    "downlevelIteration": true,
    "target": "es2017",
    "module": "es2017",
    "moduleResolution": "node",
    "lib": ["es2017"],
    "experimentalDecorators": true
  }
}

Run the TypeScript compiler:

tsc 

Transpiling with Babel

To transpile a LitElement component that uses proposed JavaScript features like class properties and decorators, use Babel.

Install Babel and the Babel plugins you need. For example:

npm install --save-dev @babel/core
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/proposal-decorators

Configure Babel. For example:

babel.config.js

const plugins = [
  '@babel/plugin-proposal-class-properties',
  ['@babel/proposal-decorators', { decoratorsBeforeExport: true } ],
];

module.exports = { plugins };

You can run Babel via a bundler plugin such as rollup-plugin-babel, or from the command line. See the Babel documentation for more information.

See a sample build configuration for LitElement with Babel and Rollup.