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

@morbidick/lit-element-notify

v1.1.1

Published

Small helpers for LitElement to dispatch change notifications and two-way binding

Downloads

64

Readme

Change notification helpers for LitElement

npm version

Small helpers for LitElement to dispatch change notifications and two-way binding. For a comparison to PolymerElement and pure LitElement see comparison section in the docs.

Install

npm install @morbidick/lit-element-notify

Notify mixin

Small mixin for LitElement to get easy change events via the properties getter.

This mixin adds the notify option to the property definition. Similar to the LitElement attribute option (which reflects a property to the dom) it fires an event as soon as the property value changes. The event name depends on the following conditions:

  1. notify: true: the property gets lowercased and -changed is appended (note: contrary to PolymerElement and similar to LitElements attribute handling no camelCase to kebap-case conversion is done).
  2. the notify option contains a string: notify: 'success-event' fires an event named success-event.
  3. notify: true is set and the attribute option is a string (attribute: 'attribute-name'): the attribute name will be suffixed with -changed.

The updated value of the property is available in event.detail.value.

import { LitElement, html } from 'lit-element';
import LitNotify from '@morbidick/lit-element-notify/notify.js';

class NotifyingElement extends LitNotify(LitElement) {
  static get properties() {
    return {

      // property names get lowercased and the -changed suffix is added
      token: {
        type: String,
        notify: true, // fires token-changed
      },
      camelCase: {
        type: String,
        notify: true, // fires camelcase-changed
      },

      // an explicit event name can be set
      thing: {
        type: String,
        notify: 'success-event', // fires success-event
      },

      // if an attribute value is set, -changed is appended
      myMessage: {
        type: String,
        attribute: 'my-message',
        notify: true, // fires my-message-changed
      },

    };
  }
}

Sync directive

lit-html directive to synchronize an element property to a childs property, adding two-way binding to lit-element. The directive takes two parameters, the property name and an optional event name on which to sync.

Usage

import { LitElement, html } from 'lit-element';
import LitSync from '@morbidick/lit-element-notify/sync.js';

class SyncElement extends LitSync(LitElement) {

    // Syncing the child property `token` with the parent property `myProperty` when `token-changed`
    // is fired or `myProperty` set.
    render() { return html`
        <notifying-element .token=${this.sync('myProperty')}></notifying-element>
    `}

    // Syncing the child property `myMessage` with the event explicitly set to `my-message-changed` 
    // (mainly used to map from the camelCase property to the kebap-case event as PolymerElement does).
    render() { return html`
        <notifying-element .myMessage=${this.sync('myProperty', 'my-message-changed')}></notifying-element>
    `}

}