lit-loader
Single File Component LitElement loader for Webpack
Example repository
Checkout the working repository for a more comprehensive example: https://github.com/PolymerX/lit-loader-example
Why
Because we love separation of concerns also without separation of files! This loader will produce a Web Component using the LitElement starting from a Single File Component, like Vue.
What
The loader does a simple job: take your .lit
file and build up as single js
file. And you can easily use PostCSS on your styles.
Install
$ yarn add --dev lit-loader
Usage
Add to Webpack
Add the loader to your Webpack conf webpack.config.js
:
... module: rules: test: /\.lit$/ loader: 'lit-loader' ...
.lit
element
Create your first CounterElement.lit
Clicked: ${this.clicks} times. Value is ${this.value}. + -
Import it within another element and use it
index.js
; ... ; ... { return html` ` } ...
Use with Babel
Just chain the babel-loader
AFTER the lit-loader
like so:
module: rules: test: /\.lit$/ use: 'babel-loader' 'lit-loader'
PostCSS configuration
You need to add a PostCSS configuration file (postcss.config.js
) if you want to use it.
Current status
I think this should be considered experimental and I will try to improve it as much as I can. I really would love to accept some PR's to improve the project. 🤘
License
MIT © LasaleFamine