LitElement Single File Component loader for Webpack.
Branch: master
Clone or download
LasaleFamine Merge pull request #29 from PolymerX/greenkeeper/codecov-3.2.0
Update codecov to the latest version 🚀
Latest commit afc8aac Feb 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src update for lit-element 2.0 Jan 22, 2019
test update for lit-element 2.0 Jan 22, 2019
.editorconfig first push May 18, 2018
.gitattributes first push May 18, 2018
.gitignore first push May 18, 2018
.npmrc first push May 18, 2018
.travis.yml first push May 18, 2018
.yarnrc first push May 18, 2018
CHANGELOG.md chore(release): 0.1.0 Jan 22, 2019
LICENSE first push May 18, 2018
README.md chore: update readme, removing experimental badge Jan 22, 2019
package.json chore(package): update codecov to version 3.2.0 Feb 13, 2019
yarn.lock chore(package): update lockfile yarn.lock Feb 13, 2019

README.md

lit-loader

Build Status codecov Greenkeeper badge

npm

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