Taylor Beseda

vendurl: Vendor Packages from a URL to Your Node.js Project

tldr: Occasionally I'll find a package that I want to use that ships an egregious amount of code to npm (and therefor my CI and my deploy runtime). So I built a tool that will stick the contents of a URL in ./vendor so I can use just that. Check out vendurl: https://github.com/tbeseda/vendurl

Background: the JS Temporal Polyfill

The JS Temporal API is going to be a game changer (Taro has an excellent post with embedded playgrounds here: https://taro.codes/posts/2023-08-23-temporal-api/). It's not ready yet. Far from. But there's a polyfill I'd like to try in a Node.js API or two: https://github.com/js-temporal/temporal-polyfill

But the package unpacks to 3.67 MB 😳 (I acknowledge it has several artifacts that are likely meant to be bundled but no thanks).

Luckily it's available on several JS CDNs. Notably esm.sh has a bundled version that includes the polyfill's dependencies1.

The tool: vendurl

First of all, pretty good name, if I do say so myself.

It's currently ~75 lines of code that checks your package.json for a "vendurl" field and starts downloading text contents to the ./vendor/ directory.

It gets a little fancy when you (dear Node.js developer) use a package specifier instead of a URL. vendurl will try esm.sh and take advantage of the built in redirects1 and response headers to find the source code at the end of the rainbow.

Sample Usage

This addition to your package.json will add 3 files to your local vendor (configurable) folder:

  1. the latest version of the temporal polyfill (200Kb instead of 3,670Kb 😏)

  2. an older version of chalk (doesn't really need vending, use npm for chalk plz)

  3. the invaluable leftpad (note that this is a .cjs file and uses a full unpkg URL)

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

The README has more info: https://github.com/tbeseda/vendurl

Editor's note: please do not try to replace npm with this. It's very much for one-off things.

1 Using ?bundle query param is helpful here. Follow the redirects to the eventual source https://esm.sh/@js-temporal/polyfill?bundle becomes https://esm.sh/v132/@js-temporal/polyfill@0.4.4/es2021/polyfill.bundle.mjs 🤌

from DynamoDB (8.1ms) to HTML (2.0ms) in 10ms