rollup-plugin-bundle-lit-html

Use plain HTML files as lit-html templates

rollup-plugin-bundle-lit-html has been renamed to rollup-plugin-lit-html and released as version 1.0.0. Please consider upgrading today!
Last updated 7 months ago by rockerest .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rollup-plugin-bundle-lit-html 
SYNC missed versions from official npm registry.

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"
    } )
  ]
};

Current Tags

  • 0.7.1                                ...           latest (7 months ago)

20 Versions

  • 0.7.1 [deprecated]           ...           7 months ago
  • 0.7.0 [deprecated]           ...           7 months ago
  • 0.6.0 [deprecated]           ...           7 months ago
  • 0.5.1 [deprecated]           ...           8 months ago
  • 0.5.0 [deprecated]           ...           8 months ago
  • 0.4.1 [deprecated]           ...           8 months ago
  • 0.4.0 [deprecated]           ...           8 months ago
  • 0.3.1 [deprecated]           ...           8 months ago
  • 0.3.0 [deprecated]           ...           8 months ago
  • 0.2.0 [deprecated]           ...           8 months ago
  • 0.1.0 [deprecated]           ...           8 months ago
  • 0.0.9 [deprecated]           ...           8 months ago
  • 0.0.8 [deprecated]           ...           8 months ago
  • 0.0.7 [deprecated]           ...           8 months ago
  • 0.0.6 [deprecated]           ...           8 months ago
  • 0.0.5 [deprecated]           ...           8 months ago
  • 0.0.4 [deprecated]           ...           8 months ago
  • 0.0.3 [deprecated]           ...           8 months ago
  • 0.0.2 [deprecated]           ...           8 months ago
  • 0.0.1 [deprecated]           ...           8 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |