@kirei/html
v2.0.0
Published
@kirei/html ==========================
Downloads
7
Maintainers
Readme
@kirei/html
A uhtml inspired render library with customizable directives, built in TypeScript.
Installation
npm i @kirei/html
or if you use yarn
yarn add @kirei/html
API
import { html, svg, render, customize } from '@kirei/html';
html( strings, ...values )
Creates a html template from a string literal
Returns: Template instance of type html
Parameters:
strings {TemplateStringsArray}
- String gluevalues {any[]}
- Interpolated values
svg( strings, ...values )
Creates a svg template from a string literal
Returns: Template instance of type svg
Parameters:
strings {TemplateStringsArray}
- String gluevalues {any[]}
- Interpolated values
render( template, root [, renderOptions] )
Renders a template to a specific root container
Returns: TemplateRenderer, object with 3 properties: html, svg and render.
Parameters:
template {Template|Node}
- Template or Node to render fromroot {Element|ShadowRoot|DocumentFragment}
- Root node to render content torenderOptions {RenderOptions}
- Custom render options, not rquired but used for web components shimsrenderOptions.scopeName {string}
- Scope name to inform what tagName the targeted root has, only required if the root is a ShadowRoot for ShadyDOM/ShadyCSS to apply correctly.renderOptions.mount {boolean}
- If false render will only compile the template and not render to root. Essentially preparing for a render but not actually applying it, defaults to true
customize( opts )
Customizes a template rendered to define a compiler and static literals
Returns: Custom template renderer
Parameters:
opts {CustomizeOptions}
- Custom compiler optionsopts.compiler {TemplateCompiler}
- Custom compiler to use instead of the default, will fallback to defaults if compiler does not implement all the membersopts.literals {TemplateLiteral}
- Helper methods to assign to the returned TemplateLiteral as static members
Examples
import { html, render } from '@kirei/html';
// variables to hold state
const title = 'Hello world!';
const list = [ 'foo', 'bar', 'baz' ];
let count = 0;
let value = '';
// Event handlers
function onClick(e) {
// Click handler to update the counter
count++;
update();
}
function onInput(e) {
// Update "value" on input event
value = e.currentTarget.value;
update();
}
// Function to run updates on the template
function update() {
const template = html`
<h1>${title}</h1>
<button @click=${onClick}>Clicked ${count} times</button>
<p>Checkout this cool list</p>
<ul>
${list.map(item => html`<li>${item}</li>`)}
</ul>
<label for="input">Write something</label>
<input id="input" .value=${value} @input=${onInput}>
<p>Input: ${value}</p>
`;
// Change document.body to valid Node that support childNodes
// render remembers the last render cycle and only patches the dynamic data
render(template, document.body);
}
// run initial render
update();