npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kirei/html

v2.0.0

Published

@kirei/html ==========================

Downloads

7

Readme

@kirei/html

GitHub Workflow Status Codecov Codacy grade Codacy coverage npm (scoped) npm bundle size (scoped) npm bundle size (scoped)

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 glue
  • values {any[]} - Interpolated values

svg( strings, ...values )

Creates a svg template from a string literal

Returns: Template instance of type svg

Parameters:

  • strings {TemplateStringsArray} - String glue
  • values {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 from
  • root {Element|ShadowRoot|DocumentFragment} - Root node to render content to
  • renderOptions {RenderOptions} - Custom render options, not rquired but used for web components shims
  • renderOptions.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 options
  • opts.compiler {TemplateCompiler} - Custom compiler to use instead of the default, will fallback to defaults if compiler does not implement all the members
  • opts.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();

License

MIT