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

@wallerbuilt/mantle

v1.0.6

Published

An event-driven Javascript library

Downloads

8

Readme

Mantle

npm version

Goals:

  • Easy to write
  • Javascript only
  • Minimal markup
  • Event system over state machine

Install

npm i -S @wallerbuilt/mantle
import { DOM, mount, dispatch } from '@wallerbuilt/mantle'

Examples

Demo card game

  • repo: https://github.com/wallerbuilt/mantle-card-game
  • preview: https://mantle-card-game.netlify.app/

Documentation

Mantle comes with three main concepts:

DOM, mount, and dispatch

DOM

  • Provides html elements as functions with additional features, ie: div(), a()

  • Each element has two chained functions on and when

  • on handles native events on the element itself

    • returns the event callback
    • can target the main element with on attached using this , ie:
    a({ href: "/" }, "I am a link")
      .on({
        click(e) {
          e.preventDefault()
          this.style.color = "tomato" // this refers to the actual anchor element
        }
      })
  • when encompasses global event listening functions that are triggered using dispatch

    • returns self and the optional payload (self referring to the main element when is attached to)

      /**
      * if payload is a person object { name: "Dave" } passed in the dispatch payload
      */
      when({
        "person:added": (self, payload) => self.appendChild(li({}, payload.name))
      })

Dispatch

  • dispatch takes two arguments
    • First argument is the event key. This is best used in a format of prefixing the subject and then the action, ie:

      dispatch("person:added") // without payload as second argument
    • Second argument is the payload for the event for global event listeners (when) to receive, ie:

      dispatch("person:added", { name: "Dave", age: 50, city: "Chicago" })
      
      // an example of an element receiving person:added
      const { ul, li } = DOM;
      
      const listItem = person => li({}, person.name)
      
      const PeopleList = ul({}, "")
        .when({
          "person:added": (self, person) => self.appendChild(listItem(person))
        })

Mount

  • Is the main function that attaches the app element or the outermost element (container) containing all elements used in the app

  • mount takes two arguments

    • existing dom element to attach to in your html, ie: document.getElementById("app")
    • your app element created
    // ...imports
    
    const { div, p } = DOM
    
    const Intro = p({},
      "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
    )
    
    const App = children => div({ className: "my-app" }, children)
    
    // Apply App to existing element in the DOM on load with it's children
    mount(document.getElementById("app"), App([Intro]))

Helper methods for easier DOM manipulation

  • append -> append child element to target element

    append(li({}, 'List Item'))(el)
  • clear -> clear all child elements on target element

    clear(el)
  • compose -> curried composition to use with most helper functions

    // get text of first span element in el
    compose(getText, qs('span'))(el)
  • getProp -> get attribute property from target element

    getProp('data-title')(el)
  • setProp -> set attribute property on target element

    setProp('disabled', true)(el)
  • remove -> remove child element from target element

    remove(child)(el)
  • setStyle -> Set an elements style properties

    setStyle([
      ['background', 'orange'],
      ['fontSize', '18px']
    ])(el)
  • getText -> get textContent or innerText of element

    getText(el)
  • setText -> set textContent or innerText of element

    setText('hello text')(el)
  • qs -> query selector from target element

    qs('span')(el)
  • qsAll -> query all selectors from target element

    qsAll('li')(ul)

Development Setup

  • nvm install && nvm use
  • npm i
  • npm start

e2e tests for examples

  • npm run cypress (will start cypress)

Unit tests

All tests reside in the tests directory

To run a watch on tests: npm run test:watch

To run tests once: npm run test

Build

  • npm run build