Publish an element
This documentation is a work in progress. It describes prerelease software, and is subject to change.
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.