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

tupac

v0.2.3

Published

Ghetto bundler

Downloads

5

Readme

tupac

tupac Mad easy ghetto bundler (2pac ur JS)

A stupid simple in browser developement bundler with close to 0 overhead and no configuration needed.

Installing:

npm install tupac -g

This will install tupac globally so that it may be run from the command line

usage

### create your project folder
mkdir my-thug-project-js && cd "$_"

### init package.json
yarn init -y

### install some stuff
yarn add lodash

### create the entry point
echo "document.body.textContent = require('lodash/words')('Reality is wrong. Dreams are for real.').join(' - ')" >> app.js

### start the server
tupac

You can now edit your JS like a thug and enjoy effortless hotreload and code splitting.

Available Options:

-E or --entry javascript app entry file (defaults to app.js)

-w or --watch enable websocket server and watch changes for hot module reload (defaults to true, 2pac is always hot)

-t or --title index file title

Implement also all the options from http-server

see the documentation for http-server

Browser API:

Hot Reload Event

After a hot reload, the event hotreload is triggered from window

window.addEventListener('hotreload', ({ detail: module }) => console.log(module))

Globals

All modules are called from window and this is bound to window.

__tupac_modules__ is an object containing all the module data.

__tupac_get_default__ is a function that return the exported data (handeling es6 modules)

if not present a mocked process is created (some modules failed without it)

Notice:

  • Pure JS only (if you need support for more TypeScript, JSX or esle : go webpack)
  • In browser async compilation of the requires (if a module exports a Promise it will wait for it's resolve value)
  • little support for es6 modules
  • !! NOT FOR PRODUCTION !!

FAQ:

Q. wat about css dog ?!

A. I like to use glamor but any css-in-js alternative should do the job

Q. No jsx ?! Are you out of your mind ???!

A. ¯\_(ツ)_/¯

try hyperscript and hyperscript-helpers for react. I made my own version of those tools that I should release one day, soon.