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

@yankeeinlondon/happy-wrapper

v3.5.7

Published

A functional API surface wrapping happy-dom

Downloads

13,647

Readme

happy-wrapper

A wrapper around the popular happy-dom API which provides a more functional interaction model.

Note:

  • version 3.x bumps the version of happy-dom up to the 12.x.y versions.
  • version 3.4 onward have switched to using the happy-dom-without-chrome dependency so that this library is equally as happy running in a browser as it is running on a server.

Examples

Attributes

  1. Partially compose a tag change operation:

    const toDiv = ChangeTagName('div');
    const toTable = ChangeTagName('table');

    and then apply it later to HTML text, an IElement node, a doc fragment, etc.:

    // "<div>hello world</div>" 
    const html = toDiv("<span>hello world</span>");
    // IElement which wraps the HTML "<table>hello world</table>"
    const el = toTable(createElement("<span>hello world</span>"));
  2. Change classes on an element:

    const html = "<span class='nada'>hello world</span>"
    // "<span class='foobar'>hello world</span>"
    const changed = pipe(
        html,
        addClass("foobar"),
        removeClass("nada")
    )

Selections

  • Select a node (or whole document):

    const html = "<html>...</html>";
    const sel = select(html);
  • Query and return a node or node list

    // returns first H1 node or null if not found
    const h1: IElement | null = sel.findFirst('h1'); 
    // throw an error if not found
    const h1b: IElement = sel.findFirst("h1", "couldn't find the H1 selector");
  • Iterate over a selector and mutate the selected nodes

    import { pipe } from "fp-ts/lib/function.js";
    return html.updateAll('h1')(el => 
        pipe(
            el,
            addClass("foobar"),
            changeTagName("h2"),
            wrap('<div class="was-h1">')
        )
    );

    Note: you don't have to use a library like fp-ts but because the exposed API surface is functional in many ways, utilities like pipe and flow can be quite handy.

Documentation Via Typing

Formal documentation is not expected to every be much but we believe that strong typescript types are the way to express documentation that is both easier to maintain and easier to consume.

All available symbols are named exports and can be explored via symbol completion in your editor of choice. Further, an attempt has been made to provide rich types that describe and properly limit the scope of type so that you're use is hopefully understood and safe.

Re-Exports

To avoid any small API variations that might exist in future happy-dom versions we do re-export the key symbols from that library. That includes:

  • IElement, IText, and INode
  • Document, and DocumentFragment

Note: we actually re-export DocumentFragment as both DocumentFragment and as Fragment. We do this because the type for DocumentFragment will be auto-associated to the browser's DOM if you don't explicitly state it and Happy DOM's implementation is a subset of the full DOM so you'll get typing errors that may seem baffling. To avoid this we prefer use of the short and explicit type of Fragment.

Contributions

This library was built with a specific purpose in mind and therefore it's surface area may have some gaps in terms of addressing all obvious use-cases around the DOM. Happy to work with anyone who wants to add in a PR to make this a better subset.

License

This library is made available for use under the MIT open source license.