rollup-plugin-lit-html
Use plain HTML files as lit-html templates
Last updated 7 months ago by rockerest .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rollup-plugin-lit-html 
SYNC missed versions from official npm registry.

rollup-plugin-lit-html

Use plain HTML files as lit-html templates.
Keep your markup and your logic separate!

##Installation

npm install rollup-plugin-lit-html

Usage

  • Add rollup-plugin-lit-html to your rollup configuration:
// rollup.config.js
import litHtml from 'rollup-plugin-lit-html';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'esm'
  },
  plugins: [ litHtml() ]
};

Now you can write "plain" html and use lit-html to easily manage your DOM without mixing JavaScript and HTML.

NOTE:
lit-html is extremely sensitive to multiple copies running in the same application.

You must provide your own copy of lit-html to avoid this problem.

"API"

Instead of importing a string of HTML, you will import a template function.

import { template } from "./main.html";

The template function's signature is

template( configuration )

configuration is a required object that must contain at least these two values:

Property Type Default
values Object {}
html Function ( str ) => str.raw

values should be a list of values to expand into the HTML.

So if your lit-html use-case was:

// src/main.js
import { html, render } from "lit-html";

var descriptor = "neat";

render( html`<span>This is ${descriptor}</span>`, document.body );

// Boo, mixed JS and HTML!

Now it can be:

// src/main.html
<span>This is ${descriptor}</span>
// src/main.js
import{ render, html } from "lit-html";
import { template } from "./main.html";

var descriptor = "neat";

render( template( { "values": { descriptor }, html } ), document.body );

// Hooray, separation!

rollup-plugin-lit-html will play nice with other html/string loaders, just exclude or include what you need:

// rollup.config.js
import litHtml from 'rollup-plugin-lit-html';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'esm'
  },
  plugins: [
    litHtml( {
      "include": "**/*.template.html",
      "exclude": "static/**/*.html"
    } )
  ]
};

Current Tags

  • 2.0.1                                ...           latest (7 months ago)

5 Versions

  • 2.0.1                                ...           7 months ago
  • 2.0.0                                ...           7 months ago
  • 1.0.2                                ...           7 months ago
  • 1.0.1                                ...           7 months ago
  • 1.0.0                                ...           7 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 5
Dependencies (1)
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |