rollup-plugin-import-lithtml
v1.0.3
Published
A Rollup plugin to import lit-html from an external .html file, allowing the html to be separated from the JavaScript.
Downloads
5
Maintainers
Readme
rollup-plugin-import-lithtml
A Rollup plugin to import lit-html from an external .html file. This allows separation of the Javascript and HTML. The plugin will automatically add all directive imports meaning the html file can just deal with the markup.
Install
Using npm:
npm install rollup-plugin-import-lithtml --save-dev
Basic Usage
Create a rollup.config.js configuration file and import the plugin:
import importLitHtml from 'rollup-plugin-import-lithtml';
export default {
input: 'src/index.js',
output: {
file: 'bundle.js',
format: 'esm'
},
plugins: [
importLitHtml()
],
}
Advanced Usage
Create a rollup.config.js configuration file and import the plugin:
import importLitHtml from 'rollup-plugin-import-lithtml';
export default {
input: 'src/index.js',
output: {
file: 'bundle.js',
format: 'esm'
},
plugins: [
importLitHtml({
include: '**/*.html',
directives: ['ifDefined', 'unsafeHTML','unsafeSVG', 'when','classMap']
})
],
//other plugins go here
}
You can manually specifiy which lit-html directives your HTML files use.
The configuration above will import a HTML file like the following:
Test.html
<style>
.color{
color:red;
}
</style>
<div class=${classMap(this.classes)}>
Hello, ${this.name}
</div>
The above HTML file would be imported from a JavaScript file similar to this:
Test.js : lit-html
import template from './test.html';
import {render} from 'lit';
let htm = template.call({name: 'Joe', classes:{color:true}});
render(htm, document.body);
Test.js: Lit-Element web component
import template from './test.html';
import { LitElement } from 'lit';
import { property, customElement } from 'lit/decorators.js';
@customElement('hello-world')
export class HelloWorld extends LitElement {
@property()
classes = { color: true };
@property()
name = 'Joe Bloggs';
render() {
return template.call(this);
}
}
Options
directives
Type: Array[directiveName : String] : Optional
Describes the list of directives to be imported, meaning that only the HTML need to go into the .HTML file.
(no imports).
If not present, the plugin will import all directives.