Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/PolymerX/lit-loader
LitElement Single File Component loader for Webpack.
https://github.com/PolymerX/lit-loader
lit-html litelement polymer postcss webpack
Last synced: 3 months ago
JSON representation
LitElement Single File Component loader for Webpack.
- Host: GitHub
- URL: https://github.com/PolymerX/lit-loader
- Owner: PolymerX
- License: mit
- Created: 2018-05-18T09:24:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-03T09:20:19.000Z (over 4 years ago)
- Last Synced: 2024-11-04T01:05:17.412Z (3 months ago)
- Topics: lit-html, litelement, polymer, postcss, webpack
- Language: JavaScript
- Size: 2.42 MB
- Stars: 94
- Watchers: 4
- Forks: 8
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# lit-loader
[](https://travis-ci.org/PolymerX/lit-loader) [](https://codecov.io/gh/PolymerX/lit-loader?branch=master)
[](https://greenkeeper.io/)
[](https://github.com/PolymerX/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](https://github.com/Polymer/lit-element) starting from a Single File Component, [like Vue](https://vuejs.org/v2/guide/single-file-components.html).
## 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
<!-- This will enable PostCSS compilation -->
span {
width: 20px;
display: inline-block;
text-align: center;
font-weight: bold;
}
Clicked: ${this.clicks} times.
Value is ${this.value}.
+
-
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);
```
#### 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](https://godev.space)