Safely import "packages" from npm without installation

[lukjaki]

Hi guys,

I'm doing research on modern webdev tooling and came accross this package. On GitHub homepage there is such bullet point:

• Safely import "packages" from npm without installation.

I wonder how does it work (if it is working because I couldn't find any more info in docs).

[rschristian]

Essentially what it does is on request for a dependency (e.g., import { colord } from 'colord';), if the dep cannot be found on disk, WMR will fetch the tarball from the NPM registry directly and stream it. As the tarball is ungzipped/untarred, WMR will analyze and conditionally filter out some content, such as binaries, shell scripts, test directories, etc. This avoids most of the danger when it comes to auto imports, so a typo won't result in arbitrary code being ran on your device. It's also really fast with the streaming; you might not need to wait for the full dependency to become available, just the parts that you use.

You can test this by creating a new WMR project (npm init wmr my-app), starting the dev server (npm run start), and adding an import to any module in your app (import { colord } from "colord"; console.log(colord);). No install needed, but you'll have a working import.

You can also add to your package.json and install normally (npm install). That's perfectly fine and works as expected.