README.md

runpkg

the online package explorer

Runpkg turns a static file into an interactive and informative browsing experience. It lets you navigate any JavaScript package on npm thanks to unpkg.com a very popular and reliable CDN mirror of the npm registry. You can use the tool to learn more about the inner workings of your project's dependencies; find out how modules work, what they depend on, the size of specific imports as other useful metadata.

---

Features

• ? Navigable project directory listing
• ? Syntax highlighted file contents
• ? Insights through static analysis

Usage

To view a package or module in the browser with runpkg, prepend any unpkg url with: r. For example:

Source URL unpkg https://unpkg.com/[email protected]/index.js runpkg https://runpkg.com/[email protected]/index.js

You will be redirect you to runpkg which will display the relevant package and file. You can navigate around the package using the panel on the left which contains a directory listing. Any data uncovered by static analysis will be displayed in the right hand panel.

Note if browsing a directory then runpkg will ignore the trailing / and take you to the entry point.

Development

If you would like to develop the project, first clone this repo then run the following command in your terminal (from the project root directory) which will open the app in your preferred browser.

npx servor

Live reload is enabled by default with servor so when you make changes to your code the browser will reload the tab and your changes will be reflected there.

Local URLs

As we're not using Zeit to resolve queries locally, you have to pass in the package or file part of the request in as a search param. Notice the ? in the local URL. For example:

Source URL unpkg https://unpkg.com/[email protected]/index.js localhost http://localhost:8080/[email protected]/index.js

Testing

We're currently doing end to end tests via Cypress, you can run them using the following:

npm test

Licence

MIT