rollup-plugin-bundle-lit-html v0.7.1

rollup-plugin-bundle-lit-html

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

##Installation

npm install rollup-plugin-bundle-lit-html

Usage

• Make sure you can resolve bare module specifiers (like import "lodash").
  The easiest way is probably to use rollup-plugin-node-resolve
• Add rollup-plugin-bundle-lit-html to your rollup configuration:

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

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

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.

This plugin automatically provides a copy of lit-html by import { html } from "lit-html/lit-html.js";. If your application also uses lit-html (or lit-element, as it also imports lit-html), you will need to ensure that your module resolution successfully dedupes all requests for lit-html to a single module.

Multiple copies of lit-html running in an application can lead to very difficult-to-diagnose problems, like HTML simply not appearing (blank screen).

"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( expandedVariables )

expandedVariables is a required object, and its properties are expanded into the HTML.

So if your lit-html use-case was:

// src/main.js
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 { template } from "./main.html";

var descriptor = "neat";

render( template( { descriptor } ), document.body );

// Hooray, separation!

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

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

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