LitElement Single File Component loader for Webpack
npm install lit-loader
> Single File Component LitElement loader for Webpack
Checkout the working repository for a more comprehensive example: https://github.com/PolymerX/lit-loader-example
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.
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.
```
$ yarn add --dev lit-loader
#### Add to Webpack
Add the loader to your Webpack conf webpack.config.js:
`js
...
module: {
rules: [
{
test: /\.lit$/,
loader: 'lit-loader'
}
]
}
...
`
#### Create your first .lit element
CounterElement.lit`html
Clicked: ${this.clicks} times.
Value is ${this.value}.
`
#### Import it within another element and use it
index.js`js
import {LitElement, html} from 'lit-element';
...
import './CounterElement.lit';
export default class MyApp extends LitElement {
...
_render(props) {
return html
} ...
}
`Use with Babel
Just chain the
babel-loader AFTER the lit-loader like so:`js
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.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. 🤘
MIT © LasaleFamine