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

@github/template-parts

v0.5.4

Published

An implementation of the TemplateInstance proposal (https://github.com/w3c/webcomponents/blob/159b1600bab02fe9cd794825440a98537d53b389/proposals/Template-Instantiation.md)

Downloads

10,759

Readme

Template Parts

This library is designed as a "ponyfill" library that implements the design in the TemplateInstance proposed whatwg spec that has been proposed in order to address whatwg/html#2254.

This implements the minimally viable parts of the proposal, to provide something that works, but should be easy to drop if the Template Parts Proposal lands.

To reiterate the example in the above proposal, given a template such as:

<template id="foo">
  <div class="foo {{y}}">{{x}} world</div>
</template>

We'd like {{x}} and {{y}} to be template parts, exposed as JavaScript objects which can be manipulated.

With this library, and that given template, one could implement the following:

import {TemplateInstance} from '@github/template-parts'

const tpl = new TemplateInstance(document.getElementById('some-template'), { x: 'Hello', y: 'bar'})

document.appendChild(tpl)

A TemplateInstance instance is a subclass of DocumentFragment - containing the cloned contents of the template. It also has an update(params: unknown): void method - which when called will run the given "processor", with the new params.

This library has a default "processor": propertyIdentity which implements basic functionality of applying the params object values to the Template Parts (it is effectively part.value = params[part.expression])

In addition, there is a propertyIdentityOrBooleanAttribute export which adds the capability of toggling boolean style attributes like hidden or input.required.

To use the propertyIdentityOrBooleanAttribute, import it and pass it as a third argument to the TemplateInstance constructor:

import {TemplateInstance, propertyIdentityOrBooleanAttribute} from '@github/template-parts'

// This will simply replace `{{x}}` with `"Hello"` and `{{y}}` with `"bar"`
const tpl = new TemplateInstance(document.getElementById('foo'), { x: 'Hello', y: 'bar'})

// The `propertyIdentityOrBooleanAttribute` processor will check for `false`/`true` values which map to Template Part values that are assigned to attributes, and add/remove the attribute.
const tpl = new TemplateInstance(document.getElementById('foo'), { x: 'Hello', hidden: false}, propertyIdentityOrBooleanAttribute)