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

domodule

v8.2.1

Published

Class-based JavaScript modules accessible via the DOM.

Downloads

2,620

Readme

Domodule is a helper that allows you to create JavaScript modules with minimal effort while keeping code size down. It automatically binds to elements using the data-module attribute.

Installation

npm install domodule

or

yarn add domodule

Example usage

<div data-module="ExampleModule" data-module-title="Example Module">
  <div data-name="title"></div>
  <button type="button" data-action="click">Show Title</button>
</div>
class ExampleModule extends Domodule {
  click() {
    this.els.title.textContent = this.options.title;
  }
}

Inherited methods

Each module has access to these helper methods.

  • find(<selector>) - Returns an array of matched elements inside of the module.
  • findOne(<selector>) - Returns the first matched element inside of the module.
  • findByName(<element name>) - Alternative to this.els[name].
  • getOption(<option>) - Returns value of an option (data-module-*).
  • setupActions() - Used to bind actions. Useful if the module adds elements in after Domodule inits. Note: Called by default. Calling again wont re-process elements.
  • setupNamed() - Same as setupActions() but binds to named elements. Note: Called by default. Calling again wont re-process elements.

Static Methods

  • Domodule.getInstance(<element>) - Returns an instance of the module.
  • Domodule.discover(<dom node, array of nodes, selector>) - Looks for data-module inside of matched elements. Will skip elements already processed. Calling just Domodule.discover() will search for all modules in the body.

Named elements

Adding data-name=<name> to an element will bind it to this.els.<name>. Adding the same data-name to multiple elements will change this.els.<name> to an Array<HTMLElement>, sorted in DOM order.

Actions

Adding data-action=<name> to an element binds it to click (or optionally data-action-type=<touch|mouseover|etc>). Values can be passed through the event by adding data attributes starting with data-action-.

Create a method in the class matching the name given in the data attribute. Method will be passed: (the element, event object, values)

Properties

  • this.el - References the module element.
  • this.els - Object containing all data-name elements
  • this.options - Object containing anything passed in after data-module- (similar to action values).

constructor

A constructor method can be used but you will need to call super(el). Constructor method gets el as it's only (and required) parameter. super(el) should be called before your code unless you need to modify core behavior. Element binding happens only when super is called.

Required options

A module can pass an array of required options to the super() method. Module will fail to init if any number of the required options are not present. Example: super(el, ['someOption', 'anotherOption'])


A First + Third Project