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

vendurl

v0.3.0

Published

Vendor (verb: download and store) a JS dependency from a URL.

Downloads

64

Readme

[!NOTE]
vendurl is in no way intended to replace npm for dependency management. It is best utilized for vendoring a few, small packages that are not published in a way you'd like to consume.

Installation and usage

npm i -D vendurl

Add packages to the "vendurl" key in package.json by setting a filename with extension and package specifier:

{
  "vendurl": {
    "packages": {
      "temporal.js": "@js-temporal/polyfill",
      "chalk4.mjs": "chalk@4",
      "leftpad.cjs": "https://unpkg.com/[email protected]/index.js"
    }
  }
}

Run vendurl to download and store the packages:

npx vendurl

Use the packages in your code:

import { Temporal } from './vendor/temporal.js';
import chalk from './vendor/chalk4.mjs';
import leftpad from './vendor/leftpad.cjs';

Options

Optional package.json vendurl configuration:

{
  "vendurl": {
    "destination": "./src/lib",       // default: "./vendor"
    "provider": "https://unpkg.com/", // default: "https://esm.sh/"
    "bundle": false,                  // esm.sh specific. default: true
    "packages": { }
  }
}

Specifier options

The specifier can be an object:

{
  "vendurl": {
    "packages": {
      "leftpad.cjs": {
        "specifier": "[email protected]/index.js",
        "provider": "https://unpkg.com/",
        "bundle": false
      },
      "robots.txt": {
        "specifier": "https://raw.githubusercontent.com/mitchellkrogza/nginx-ultimate-bad-bot-blocker/master/robots.txt/robots.txt",
        "destination": "./public"
      }
    }
  }
}

npm postinstall

{
  "scripts": {
    "postinstall": "vendurl"
  },
  "vendurl": {
    "packages": { }
  }
}

CLI Options and Exit Codes

[!IMPORTANT]
vendurl will exit with code 1 if there are any errors, but will optimistically continue to vendor what it can.

Verbose output is available with --verbose or -v:

npx vendurl --verbose

Use the --clean flag to nuke the destination folder before downloading (this will not clean destinations specified in object specifiers):

npx vendurl --clean

Pass --yes to skip the confirmation prompt:

npx vendurl --clean --yes

How it works

Mostly with fetch and fs: download the file and save it. index.js is brief and has no dependencies; check it out!

vendurl leans on esm.sh conventions to resolve specific versioned bundles.

Module Resolution

For example, the specifier of "chalk" (currently) resolves to the cached build as such:
chalkchalk@latest[email protected]/v132/[email protected]/es2021/chalk.bundle.mjs.

Development

./test/mock-project/ has a simple package.json with a few package entries to test with.

./test/test.sh runs a simple test procedure and executes ./test/mock-project/index.js.

FAQ

Does it work for all packages?
Not likely. The dependency graphs for some "modern" tools are a mess and rely on a build step. vendurl does work well for simpler packages that aren't published in a way you'd like to consume -- e.g. the entire test suite and 17 dist versions are shipped to npmjs.org...
If there's a package you think should work, but it doesn't, please open an issue. 🙏🏻

Just JavaScript?
vendurl will optimistically download any URL and put it in "./vendor". A .css file would probably work, but at that point you're venturing into build pipeline territory 🐉

ESBuild options, WASM, and other esm.sh features?
Good idea! I can work on that or feel free to send a PR.
In the meantime: currently, search params on the specifier are not stripped, so you could try that!

I'm getting esm.sh HTTP errors.
You may want to check esm.sh's status page.