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

littledom

v0.0.6

Published

Small jQuery-like DOM library

Downloads

6

Readme

Build Status

littledom

littledom is a really tiny (experimental) jQuery work-alike for modern browsers. Think of it as a curated jQuery subset, optimized for readability and file size.

littledom is not a drop-in replacement for jQuery, but it does implement many of its most commonly used methods. In many cases, not all method signatures are supported either. This keeps the code lean and pretty simple to read. The following parts of jQuery are intentionally omitted- if you need them you might consider a best-of-breed standalone library instead:

* ajax() and friends
* promises
* any polyfills (a standards-compliant browser is assumed)
* utilities intended for objects and arrays ($.each, $.map, etc)
* anything else that falls outside out DOM querying and manipulation

Check out the source code, it's concise and should be easy to read and understand.

Stick with jQuery if:

  • You need to support IE8 or below
  • You need to use jQuery plugins
  • You want a really well-tested library (this one is still experimental)

Browser API dependencies:

  • document.querySelectorAll() (used for all DOM searches)
  • addEventListener() and removeEventListener()
  • DOMContentLoaded
  • ECMAScript 5 Array methods (map, filter, forEach, etc)

API

Basic API format

$dom(selectorString, contextElement).<method>(<args>);

Non-jQuery methods and attributes:

$dom.ready(callback)    -> equivalent to $(document).ready(callback)
$dom.browserSupported   -> boolean indicating whether the browser is supported by the library.
$dom.create(htmlString) -> create a set of elements from an html string (like $(htmlString))

Supported jQuery API subset:

    // Manipulation:
    html()                  -> return the innerHTML of the first matched element
    html(contents)          -> sets innerHTML for all matched elements to the given string
    find(selector)
    remove()                -> remove all matched elements from the document (doesn't take any arguments)
    data(attrName)          -> return the value of the given data-* attribute (for the first matched element where it's set)
    data(attrName, val)     -> set data-attrName to the given value for all matched elements
    append(content, ...)    -> Append content ($dom instances, DOM nodes, or html strings) to each element
    prepend(content, ...)   -> Same as append(), but inserts at the front of the selection

    // Traversal:
    parent()                -> Returns all unique parents of the selected elements
    unique()                -> Returns a unique set of the selected elements
    first()                 -> Returns the first selected element (wrapped)
    last()                  -> Returns the last selected element (wrapped)
    closest(selector)       -> Returns the closest ancestor that matches the given selector
                               (NOTE! only supports simple tag name selectors for now)

    // Classes and attributes:
    addClass(className)
    removeClass(className)
    hasClass(className)     -> returns true if any matched element has the given class
    attr(name)              -> return the attribute of the first matched element
    attr(name, value)       -> for all matched elements, set the attribute with the given name to the given value.
    attr(hash)              -> for each matched element, el[attrName] = attrValue for each key, val pair in the object
    removeAttr(<string>)

    // Styling:
    css(name)
    css(name, value)
    css(hash)
    show()
    hide()                  -> Set "display: none" on all matched elements.

    // Events:
    on(eventName, handler)
    on(eventName, delegationSelector, handler)
    off(eventName, handler)
    off(eventName, delegationSelector, handler)
    trigger(eventName)           -> trigger an event on each matched element
    bind(), unbind(), delegate(), undelegate() (legacy)

    // ES5 Array methods
    each()
    map()
    some()
    every()
    filter()                -> NOTE: works like the ES5 array method, not jquery's method

    // Misc
    toArray()               -> Return the matching DOM nodes in an array

TODO:

* Add support for:
    .one()
    .children()
* form serialization: to string, and to Object