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
    

    Keywords

    none

    Install

    npm i inline-lit-element-loader

    DownloadsWeekly Downloads

    4

    Version

    0.1.0

    License

    ISC

    Unpacked Size

    5.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • aelbore