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 userollup-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
byimport { html } from "lit-html/lit-html.js";
. If your application also useslit-html
(orlit-element
, as it also importslit-html
), you will need to ensure that your module resolution successfully dedupes all requests forlit-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"
} )
]
};