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

@converse/skeletor

v0.0.8

Published

Modernized Backbone with web components

Downloads

1,326

Readme

Skeletor

XMPP Chat Travis

Skeletor is a Backbone fork that adds various improvements and features.

Introduction

The goal of Skeletor is to modernize Backbone and to allow you to stop writing imperative view code (e.g. manually adding and removing DOM nodes) and instead start writing declarative, component-based code that automatically updates only the changed parts of the DOM, similarly to basically all modern JavaScript frameworks.

The original Backbone Views aren't components can't be rendered in a nested and declarative way. Instead, it's up to you to manually make sure that these views are rendered in the correct place in the DOM. This approach becomes unwieldy, difficult and fragile as your site becomes larger and more complex.

Skeletor solves this by creating a new type of View, called ElementView, which is very similar to the original Backbone View but which is also a web component that gets instantiated automatically as soon as its rendered in the DOM.

Why bother?

The goal of this fork is to allow the Converse team to gradually update the Converse XMPP webchat client to use web components (using LitElement) without requiring us to put everything on hold in order to do a massive rewrite.

The end-goal is to not have any Skeletor Views at all, only LitElement components.

We can cheat a little by letting the existing Views also be web components (more accurately, "custom elements"), this allows us to declaratively render the UI, while we're progressively getting rid of the views.

Sekeletor adds the following changes to Backbone

  • Removes the dependency on jQuery
  • Instead of the render method Views can have a toHTML method which must return a lit-html TemplateResult.
  • Replaces underscore with lodash
  • Imports lodash methods individually to allow for tree-shaking
  • Uses the native browser API instead of lodash whereever possible
  • Drops support for older browsers (including IE) and uses ES6+ language features
  • Splits models, views and collections into separate modules
  • Adds the possibility to returns promises for asynchronous operations
  • Adds a new ElementView class, which is a like a Backbone View, but doubles as an instance of HTMLElement and can be used to register a custom element or web-component.

Backwards incompatible changes

  • Collection.prototype.forEach no longer returns the items being iterated over. If you need that, use map instead.
  • The chain method on Models has been removed.
  • The inject, foldl and foldr methods on Collections has been removed. You can use reduce instead.
  • Removed the sample, take, tail and initial method on Collections.
  • Removed the without, reject and select methods on Collections, use filter.

Changes due to using Lodash instead of Underscore

  1. Use drop instead of rest.
  2. indexBy is called keyBy
  3. Use invokeMap for collections instead of invoke.
  4. Use includes instead of contains
  5. The partition and invokeMap methods have been removed.

ElementView example

The ElementView looks very similar to a normal Backbone View.

Since it's a web component, you need to call CustomElementRegistry.define to register it.

The this variable for the ElementView is the custom DOM element itself, in this case, <my-custom-button>.

So there is no el attribute and this.el will be undefined. Whereever in a Backbone View you'd use this.el, with an ElementView you'd just use this.


import { ElementView } from '@converse/skeletor/src/element.js';
import { render } from 'lit';
import { html } from 'lit';

export default class MyCustomButton extends ElementView {
    events = {
        'click .button': 'onButtonClicked'
    }

    async initialize () {
        this.model = new Model({ count: 0 });
        this.listenTo(this.model, 'change', this.render)
    }

    render () {
      return render(html`<button class="button">I've been clicked ${model.get('count')} times!</button>`, this);
    }

    onButtonClicked () {
      this.model.save('count', this.model.get('count')+1);
    }
}

CustomElementRegistry.define('my-custom-button', MyCustomButton);

You can now put your custom element in the DOM, and once the DOM is loaded by the browser, your ElementView will automatically be instantiated and initialize will be called.

  <div>
    <my-custom-button></my-custom-button>
  </div>