inline-lit-element-loader
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

inline-lit-element-loader

Webpack loader to inline LitElement external styles and decorators

Getting Started

git clone https://github.com/aelbore/inline-lit-element-loader.git
npm install

Installation

  npm install --save-dev inline-lit-element-loader

Setup

  • hello-world.css

    h1 {
      color: red;
    }
  • hello-world.js

    import { LitElement, html } from 'lit-element'
    import './hello-world.css'
    
    class HelloWorld extends LitElement {
    
      static get properties() {
        return {
          message: { type: String }
        }
      }
    
      render() {
        return html `<h1>Hello ${this.message}</h1>`
      }
    
    }
    
    customElements.define('hello-world', HelloWorld)  
  • webpack.config.js

    const path = require('path')
    
    const TerserPlugin = require('terser-webpack-plugin')
    const CopyPlugin = require('copy-webpack-plugin');
    
    const INPUT_FILE = path.resolve('./demo/hello-world/hello-world.js')
    const OUTPUT_FILE = path.resolve('./dist/demo/hello-world/hello-world.js')
    
    const HTML_FILE = path.join(path.dirname(INPUT_FILE), 'index.html')
    const OUTPUT_HTML_FILE = path.join(path.dirname(OUTPUT_FILE), 'index.html')
    
    const plugins = {
      terser() {
        return new TerserPlugin({
          parallel: true,
          sourceMap: true,
          terserOptions: {
            ecma: 6,
            output: { comments: false }
          }
        })      
      },
      copy() {
        return new CopyPlugin([
          { from: HTML_FILE, to: OUTPUT_HTML_FILE }
        ])    
      }
    }
    
    module.exports = {
      entry: INPUT_FILE,
      devtool: 'source-map',
      output: {
        path: path.dirname(OUTPUT_FILE),
        filename: path.basename(OUTPUT_FILE)
      },
      module: {
        rules: [
          {
            test: /\.(js|ts)$/,
            exclude: /\.(css|scss)$/,
            loader: 'inline-lit-element-loader'
          }
        ]
      },
      plugins: [ plugins.copy() ],
      optimization: {
        minimizer: [  plugins.terser()  ]
      }
    }
  • output of your hello-world.js

     import { LitElement, html, css } from 'lit-element'
    
     class HelloWorld extends LitElement {
    
       static get properties() {
         return {
           message: { type: String }
         }
       }
    
       render() {
         return html `<h1>Hello ${this.message}</h1>`
       }
    
       static get styles() {
         return css `h1 { color: red; }`
       }
    
     }
    
     customElements.define('hello-world', HelloWorld)  
  • Run demo app

npm run serve
  • Go to browser then http://localhost:3000/demo/hello-world

Support Sass

  npm install --save-dev node-sass

Use Lit-Element-Transpiler

git submodule init
git submodule update --remote

npm run link.transpiler

Readme

Keywords

none

Package Sidebar

Install

npm i inline-lit-element-loader

Weekly Downloads

2

Version

0.1.0

License

ISC

Unpacked Size

5.5 kB

Total Files

5

Last publish

Collaborators

  • aelbore