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'
      }
    ]
  }
 
...

Create your first .lit element

CounterElement.lit

<style lang="postcss"> <!-- This will enable PostCSS compilation -->
  span {
    width: 20px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
  }
</style> 
 
<template>
  <div>
    <p>
      Clicked: <span>${this.clicks}</span> times.
      Value is <span>${this.value}</span>.
      <button @click="${this._onIncrement}" title="Add 1">+</button>
      <button @click="${this._onDecrement}" title="Minus 1">-</button>
    </p>
  </div>
</template>
 
<script>
  export default class CounterElement {
    static get properties() { return {
      clicks: Number,
      value: Number
    }};
 
    constructor() {
      super();
      this.clicks = 0;
      this.value = 0;
    }
 
    _onIncrement() {
      this.value++;
      this.clicks++;
      this.dispatchEvent(new CustomEvent('counter-incremented'));
    }
 
    _onDecrement() {
      this.value--;
      this.clicks++;
      this.dispatchEvent(new CustomEvent('counter-decremented'));
    }
  }
 
  window.customElements.define('counter-element', CounterElement);
</script> 

Import it within another element and use it

index.js

import {LitElement, html} from 'lit-element';
 
...
 
import './CounterElement.lit';
 
export default class MyApp extends LitElement {
    ...
 
 
    _render(props) {
        return html`
        <div>
            <counter-element></counter-element>
        </div>
        `
    }
 
    ...
 
}
 

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