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:

`js
...

module: {
rules: [
{
test: /\.lit$/,
loader: 'lit-loader'
}
]
}

...
`

#### Create your first .lit element

CounterElement.lit
`html



`

#### 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.

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