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

@rangermauve/web-loader

v1.2.1

Published

A custom module loader and global shim for Node to make it compatible with the browser.

Downloads

4

Readme

THIS LIBRARY HAS BEEN RENAMED webrun

node-web-loader

A custom module loader and global shim for Node to make it compatible with the browser.

The goal is to make code that works in browsers first, but can run in Node by using this loader.

You can import builtin node modules, but modules installed through NPM are no longer supported because it would require the funky mjs stuff we have in node now.

Warning: this is a huge hack and is probably very inefficient. Use at your own risk!

Bug reports welcome!

Usage:

npm install --save @rangermauve/web-loader

node --experimental-modules --loader ./node_modules/@rangermauve/web-loader/loader.mjs example.js

Then in your JS:

import example from "https://rangermauve.hashbase.io/esm.js";
import p2pexample from "dat://rangermauve.hashbase.io/esm.js";

example();
p2pexample();

Progress:

  • [x] Able to load HTTPS URLs
  • [x] Relative URLs loaded from HTTPS modules should work
  • [ ] Add browser globals
  • [x] Dat protocol support
    • [x] Load from Dat URLs
    • [x] DatArchive global
    • [ ] Experimental Beaker APIs (does it make sense?)
      • [ ] DatPeers Issue
      • [ ] Library
  • [ ] Rewrite using VM module https://nodejs.org/api/vm.html#vm_module_link_linker (Node 9.6)
  • [ ] Rewrite using @beaker/dat-node for dat support
  • [ ] CLI flag for enabling / disabling node modules.

You can test it out by cloning and running one of the following:

npm run example

# or

npm run example-dat

How it works:

The new experimental-modules feature in Node.js is great, but it currently only works with file: URLs.

This is great, but it means that modules made for the web are totally incompatible with Node. This means there's now three environments to code against: The web with ESM, Legacy CommonJS modules, and ESM in Node.js.

Luckily, Node provides a way to specify custom "loaders". You can create a custom "resolve" functions that can dictate how import calls resolve to files for Node.

BUT this resolve function has the be synchronous. This means that you can't do async stuff like HTTP requests.

Luckily, Node added an API which lets you cheat.

child_process.execSync can let you run a Node program that does async things in a separate process, while the current process gets blocked!

That's exactly how this works. It intercepts calls to https:// imports, downloads the content to the ./.nwl/web-cache folder, and tells Node to load the file as esm.

Some browser APIs have been added to the global scope so hopefully a lot of modules made for browsers should work here, too.

In addition to loading content from https:// URLs, this loader also supports dat:// URLs. This way you can download code right from the peer to peer web!

PRs for additional protocols are welcome! All you need to do is make a script that takes a URL as a parameter and add it to the list of protocols that are handled.