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

@mattdesl/quick-stub

v3.0.1

Published

some personalized file stubbing tools

Downloads

15

Readme

@mattdesl/quick-stub

experimental

Some personalized scaffolding tools I am using to automate my workflow.

This is an experiment / proof of concept. One day it may grow into a generalized tool for scaffolding modules, apps, components, etc. Feel free to fork or post issues if you want to discuss.

Usage

Install the module globally to access all the bins.

npm install @mattdesl/quick-stub -g

Now any of the scripts can be run from the command-line. Run them inside a module folder with a package.json file. Example:

# make a module
mkdir my-module
cd my-module
npm init

# add a test and install its dependencies
quick-test tests/index.js

The above installs tape and faucet and writes the following:

var myModule = require('../')
var test = require('tape')

test('your package description', function(t) {

  t.end()
})

It also adds the following to your package.json:

"scripts": {
  "test": "node test/index.js | faucet"
}

All scripts listed below. As you can see they are highly personalized to my workflow.

test

Installs tape and faucet as dependencies, stubs out a test file, and adds a test script to your package.json.

Usage:

quick-test [entry] [opt]
  [entry]    the file to write, default test.js
  -f         force overwrite (no prompt)

Examples:

quick-test
quick-test tests/index.js

build

Installs browserify and uglify-js, then adds a "bundle" script to your package.json that looks like this:

"scripts": {
  "bundle": "browserify src/index.js | uglifyjs -cm > app/bundle.js"
}

Options:

quick-build [entry] [opt]
  [entry]         the entry to build, default src/index.js
  --outfile, -o   the outfile, default bundle.js
  --dir           the out directory, default app/

bin

Adds a bin field to your package.json and stubs out a simple bin/index.js file with the following:

#!/usr/bin/env node

Options:

quick-bin [filename] [opt]
  [filename]      the file name, default index.js
  --minimist, -m  include minimist dependency + code
  --dir           the directory, default 'bin'

With --minimist the file includes arg parsing.

html

Stubs out a simple HTML5 template at the given file, or defaults to index.html.

quick-html [entry]
  [entry]    the output file, default index.html

budo

Add budo to your package.json.

quick-budo

Result in package.json:

"start": "budo index.js:bundle.js --live"

You can specify -b or --babel for babelify, and -a or --auto for installify. Use --no-dir to avoid adding a directory to budo, or --dir public/ for your own site directory. Use --glslify to add glslify transform.

# babelify + installify
quick-budo demo.js:bundle.js -b --no-dir

The above command installs budo and sets up the following:

"start": "budo demo.js:bundle.js --live -- -t babelify"

If babel is specified, the following .babelrc file is also written:

{
  "presets": [
    [
      "babel-preset-env", {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Also see babelify if you would rather have it listed as a package.json configuration (so you don't need to repeat the flag for build scripts).

component

Create a folder with a script, css and template file.

quick-component ./src/components/my-comp

Options:

quick-component [path] [opts]
  [path]      the folder that will be created
  --css, -c   the name for the style file (default style.css)
  --script, -s   the name for the script file (default index.js)
  --template, -t   the name for the template file (default template.html)

rc configuration

You can add a .quick-stubrc file in your $HOME directory to change the command that is run with npm install. For example, to npm-install-analytics:

{
  "command": "npm-install-analytics"
}

Other configurations may be added at a later point.

License

MIT, see LICENSE.md for details.