• Stars
    star
    1,009
  • Rank 43,761 (Top 0.9 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Smooth (CLI) Operator 🎢

sade Build Status

Smooth (CLI) Operator 🎢

Sade is a small but powerful tool for building command-line interface (CLI) applications for Node.js that are fast, responsive, and helpful!

It enables default commands, git-like subcommands, option flags with aliases, default option values with type-casting, required-vs-optional argument handling, command validation, and automated help text generation!

Your app's UX will be as smooth as butter... just like Sade's voice. πŸ˜‰

Install

$ npm install --save sade

Usage

Input:

#!/usr/bin/env node

const sade = require('sade');

const prog = sade('my-cli');

prog
  .version('1.0.5')
  .option('--global, -g', 'An example global flag')
  .option('-c, --config', 'Provide path to custom config', 'foo.config.js');

prog
  .command('build <src> <dest>')
  .describe('Build the source directory. Expects an `index.js` entry file.')
  .option('-o, --output', 'Change the name of the output file', 'bundle.js')
  .example('build src build --global --config my-conf.js')
  .example('build app public -o main.js')
  .action((src, dest, opts) => {
    console.log(`> building from ${src} to ${dest}`);
    console.log('> these are extra opts', opts);
  });

prog.parse(process.argv);

Output:

$ my-cli --help

  Usage
    $ my-cli <command> [options]

  Available Commands
    build    Build the source directory.

  For more info, run any command with the `--help` flag
    $ my-cli build --help

  Options
    -v, --version    Displays current version
    -g, --global     An example global flag
    -c, --config     Provide path to custom config  (default foo.config.js)
    -h, --help       Displays this message


$ my-cli build --help

  Description
    Build the source directory.
    Expects an `index.js` entry file.

  Usage
    $ my-cli build <src> [options]

  Options
    -o, --output    Change the name of the output file  (default bundle.js)
    -g, --global    An example global flag
    -c, --config    Provide path to custom config  (default foo.config.js)
    -h, --help      Displays this message

  Examples
    $ my-cli build src build --global --config my-conf.js
    $ my-cli build app public -o main.js

Tips

  • Define your global/program-wide version, options, description, and/or examples first.
    Once you define a Command, you can't access the global-scope again.

  • Define all commands & options in the order that you want them to appear.
    Sade will not mutate or sort your CLI for you. Global options print before local options.

  • Required arguments without values will error & exit
    An Insufficient arguments! error will be displayed along with a help prompt.

  • Don't worry about manually displaying help~!
    Your help text is displayed automatically... including command-specific help text!

  • Automatic default/basic patterns
    Usage text will always append [options] & --help and --version are done for you.

  • Only define what you want to display!
    Help text sections (example, options, etc) will only display if you provide values.

Subcommands

Subcommands are defined & parsed like any other command! When defining their usage, everything up until the first argument ([foo] or <foo>) is interpreted as the command string.

They should be defined in the order that you want them to appear in your general --help output.

Lastly, it is not necessary to define the subcommand's "base" as an additional command. However, if you choose to do so, it's recommended that you define it first for better visibility.

const prog = sade('git');

// Not necessary for subcommands to work, but it's here anyway!
prog
  .command('remote')
  .describe('Manage set of tracked repositories')
  .action(opts => {
    console.log('~> Print current remotes...');
  });

prog
  .command('remote add <name> <url>', 'Demo...')
  .action((name, url, opts) => {
    console.log(`~> Adding a new remote (${name}) to ${url}`);
  });

prog
  .command('remote rename <old> <new>', 'Demo...')
  .action((old, nxt, opts) => {
    console.log(`~> Renaming from ${old} to ${nxt}~!`);
  });

Single Command Mode

In certain circumstances, you may only need sade for a single-command CLI application.

Note: Until v1.6.0, this made for an awkward pairing.

To enable this, you may make use of the isSingle argument. Doing so allows you to pass the program's entire usage text into the name argument.

With "Single Command Mode" enabled, your entire binary operates as one command. This means that any prog.command calls are disallowed & will instead throw an Error. Of course, you may still define a program version, a description, an example or two, and declare options. You are customizing the program's attributes as a whole.*

* This is true for multi-command applications, too, up until your first prog.command() call!

Example

Let's reconstruct sirv-cli, which is a single-command application that (optionally) accepts a directory from which to serve files. It also offers a slew of option flags:

sade('sirv [dir]', true)
  .version('1.0.0')
  .describe('Run a static file server')
  .example('public -qeim 31536000')
  .example('--port 8080 --etag')
  .example('my-app --dev')
  .option('-D, --dev', 'Enable "dev" mode')
  .option('-e, --etag', 'Enable "Etag" header')
  // There are a lot...
  .option('-H, --host', 'Hostname to bind', 'localhost')
  .option('-p, --port', 'Port to bind', 5000)
  .action((dir, opts) => {
    // Program handler
  })
  .parse(process.argv);

When sirv --help is run, the generated help text is trimmed, fully aware that there's only one command in this program:

  Description
    Run a static file server

  Usage
    $ sirv [dir] [options]

  Options
    -D, --dev        Enable "dev" mode
    -e, --etag       Enable "Etag" header
    -H, --host       Hostname to bind  (default localhost)
    -p, --port       Port to bind  (default 5000)
    -v, --version    Displays current version
    -h, --help       Displays this message

  Examples
    $ sirv public -qeim 31536000
    $ sirv --port 8080 --etag
    $ sirv my-app --dev

Command Aliases

Command aliases are alternative names (aliases) for a command. They are often used as shortcuts or as typo relief!

The aliased names do not appear in the general help text.
Instead, they only appear within the Command-specific help text under an "Aliases" section.

Limitations

  • You cannot assign aliases while in Single Command Mode
  • You cannot call prog.alias() before defining any Commands (via prog.commmand())
  • You, the developer, must keep track of which aliases have already been used and/or exist as Command names

Example

Let's reconstruct the npm install command as a Sade program:

sade('npm')
  // ...
  .command('install [package]', 'Install a package', {
    alias: ['i', 'add', 'isntall']
  })
  .option('-P, --save-prod', 'Package will appear in your dependencies.')
  .option('-D, --save-dev', 'Package will appear in your devDependencies.')
  .option('-O, --save-optional', 'Package will appear in your optionalDependencies')
  .option('-E, --save-exact', 'Save exact versions instead of using a semver range operator')
  // ...

When we run npm --help we'll see this general help text:

  Usage
    $ npm <command> [options]

  Available Commands
    install    Install a package

  For more info, run any command with the `--help` flag
    $ npm install --help

  Options
    -v, --version    Displays current version
    -h, --help       Displays this message

When we run npm install --help β€” or the help flag with any of install's aliases β€” we'll see this command-specific help text:

  Description
    Install a package

  Usage
    $ npm install [package] [options]

  Aliases
    $ npm i
    $ npm add
    $ npm isntall

  Options
    -P, --save-prod        Package will appear in your dependencies.
    -D, --save-dev         Package will appear in your devDependencies.
    -O, --save-optional    Package will appear in your optionalDependencies
    -E, --save-exact       Save exact versions instead of using a semver range operator
    -h, --help             Displays this message

API

sade(name, isSingle)

Returns: Program

Returns your chainable Sade instance, aka your Program.

name

Type: String
Required: true

The name of your Program / binary application.

isSingle

Type: Boolean
Default: name.includes(' ');

If your Program is meant to have only one command.
When true, this simplifies your generated --help output such that:

  • the "root-level help" is your only help text
  • the "root-level help" does not display an Available Commands section
  • the "root-level help" does not inject $ name <command> into the Usage section
  • the "root-level help" does not display For more info, run any command with the --help flag text

You may customize the Usage of your command by modifying the name argument directly.
Please read Single Command Mode for an example and more information.

Important: Whenever name includes a custom usage, then isSingle is automatically assumed and enforced!

prog.command(usage, desc, opts)

Create a new Command for your Program. This changes the current state of your Program.

All configuration methods (prog.describe, prog.action, etc) will apply to this Command until another Command has been created!

usage

Type: String

The usage pattern for your current Command. This will be included in the general or command-specific --help output.

Required arguments are wrapped with < and > characters; for example, <foo> and <bar>.

Optional arguments are wrapped with [ and ] characters; for example, [foo] and [bar].

All arguments are positionally important, which means they are passed to your current Command's handler function in the order that they were defined.

When optional arguments are defined but don't receive a value, their positionally-equivalent function parameter will be undefined.

Important: You must define & expect required arguments before optional arguments!

sade('foo')

  .command('greet <adjective> <noun>')
  .action((adjective, noun, opts) => {
    console.log(`Hello, ${adjective} ${noun}!`);
  })

  .command('drive <vehicle> [color] [speed]')
  .action((vehicle, color, speed, opts) => {
    let arr = ['Driving my'];
    arr.push(color ? `${color} ${vehicle}` : vehicle);
    speed && arr.push(`at ${speed}`);
    opts.yolo && arr.push('...YOLO!!');
    let str = arr.join(' ');
    console.log(str);
  });
$ foo greet beautiful person
# //=> Hello, beautiful person!

$ foo drive car
# //=> Driving my car

$ foo drive car red
# //=> Driving my red card

$ foo drive car blue 100mph --yolo
# //=> Driving my blue car at 100mph ...YOLO!!

desc

Type: String
Default: ''

The Command's description. The value is passed directly to prog.describe.

opts

Type: Object
Default: {}

opts.alias

Type: String|Array

Optionally define one or more aliases for the current Command.
When declared, the opts.alias value is passed directly to the prog.alias method.

// Program A is equivalent to Program B
// ---

const A = sade('bin')
  .command('build', 'My build command', { alias: 'b' })
  .command('watch', 'My watch command', { alias: ['w', 'dev'] });

const B = sade('bin')
  .command('build', 'My build command').alias('b')
  .command('watch', 'My watch command').alias('w', 'dev');
opts.default

Type: Boolean

Manually set/force the current Command to be the Program's default command. This ensures that the current Command will run if no command was specified.

Important: If you run your Program without a Command and without specifying a default command, your Program will exit with a No command specified error.

const prog = sade('greet');

prog.command('hello');
//=> only runs if :: `$ greet hello`

// $ greet
//=> error: No command specified.

prog.command('howdy', '', { default:true });
//=> runs as `$ greet` OR `$ greet howdy`

// $ greet
//=> runs 'howdy' handler

// $ greet foobar
//=> error: Invalid command

prog.describe(text)

Add a description to the current Command.

text

Type: String|Array

The description text for the current Command. This will be included in the general or command-specific --help output.

Internally, your description will be separated into an Array of sentences.

For general --help output, only the first sentence will be displayed. However, all sentences will be printed for command-specific --help text.

Note: Pass an Array if you don't want internal assumptions. However, the first item is always displayed in general help, so it's recommended to keep it short.

prog.alias(...names)

Define one or more aliases for the current Command.

Important: An error will be thrown if:
1) the program is in Single Command Mode; or
2) prog.alias is called before any prog.command.

names

Type: String

The list of alternative names (aliases) for the current Command.
For example, you may want to define shortcuts and/or common typos for the Command's full name.

Important: Sade does not check if the incoming names are already in use by other Commands or their aliases.
During conflicts, the Command with the same name is given priority, otherwise the first Command (according to Program order) with name as an alias is chosen.

The prog.alias() is append-only, so calling it multiple times within a Command context will keep all aliases, including those initially passed via opts.alias.

sade('bin')
  .command('hello <name>', 'Greet someone by their name', {
    alias: ['hey', 'yo']
  })
  .alias('hi', 'howdy')
  .alias('hola', 'oi');
//=> hello aliases: hey, yo, hi, howdy, hola, oi

prog.action(handler)

Attach a callback to the current Command.

handler

Type: Function

The function to run when the current Command is executed.

Its parameters are based (positionally) on your Command's usage definition.

All options, flags, and extra/unknown values are included as the last parameter.

Note: Optional arguments are also passed as parameters & may be undefined!

sade('foo')
  .command('cp <src> <dest>')
  .option('-f, --force', 'Overwrite without confirmation')
  .option('-c, --clone-dir', 'Copy files to additional directory')
  .option('-v, --verbose', 'Enable verbose output')
  .action((src, dest, opts) => {
    console.log(`Copying files from ${src} --> ${dest}`);
    opts.c && console.log(`ALSO copying files from ${src} --> ${opts['clone-dir']}`);
    console.log('My options:', opts);
  })

// $ foo cp original my-copy -v
//=> Copying files from original --> my-copy
//=> My options: { _:[], v:true, verbose:true }

// $ foo cp original my-copy --clone-dir my-backup
//=> Copying files from original --> my-copy
//=> ALSO copying files from original --> my-backup
//=> My options: { _:[], c:'my-backup', 'clone-dir':'my-backup' }

prog.example(str)

Add an example for the current Command.

str

Type: String

The example string to add. This will be included in the general or command-specific --help output.

Note: Your example's str will be prefixed with your Program's name.

prog.option(flags, desc, value)

Add an Option to the current Command.

flags

Type: String

The Option's flags, which may optionally include an alias.

You may use a comma (,) or a space ( ) to separate the flags.

Note: The short & long flags can be declared in any order. However, the alias will always be displayed first.

Important: If using hyphenated flag names, they will be accessible as declared within your action() handler!

prog.option('--global'); // no alias
prog.option('-g, --global'); // alias first, comma
prog.option('--global -g'); // alias last, space
// etc...

desc

Type: String

The description for the Option.

value

Type: String

The default value for the Option.

Flags and aliases, if parsed, are true by default. See mri for more info.

Note: You probably only want to define a default value if you're expecting a String or Number value type.

If you do pass a String or Number value type, your flag value will be casted to the same type. See mri#options.default for info~!

prog.version(str)

The --version and -v flags will automatically output the Program version.

str

Type: String
Default: 0.0.0

The new version number for your Program.

Note: Your Program version is 0.0.0 until you change it.

prog.parse(arr, opts)

Parse a set of CLI arguments.

arr

Type: Array

Your Program's process.argv input.

Important: Do not .slice(2)! Doing so will break parsing~!

opts

Type: Object
Default: {}

Additional process.argv parsing config. See mri's options for details.

Important: These values override any internal values!

prog
  .command('hello')
  .option('-f, --force', 'My flag');
//=> currently has alias pair: f <--> force

prog.parse(process.argv, {
  alias: {
    f: ['foo', 'fizz']
  },
  default: {
    abc: 123
  }
});
//=> ADDS alias pair: f <--> foo
//=> REMOVES alias pair: f <--> force
//=> ADDS alias pair: f <--> fizz
//=> ADDS default: abc -> 123 (number)

opts.unknown

Type: Function
Default: undefined

Callback to run when an unspecified option flag has been found. This is passed directly to mri.

Your handler will receive the unknown flag (string) as its only argument.
You may return a string, which will be used as a custom error message. Otherwise, a default message is displayed.

sade('sirv')
  .command('start [dir]')
  .parse(process.argv, {
    unknown: arg => `Custom error message: ${arg}`
  });

/*
$ sirv start --foobar

  ERROR
    Custom error message: --foobar

  Run `$ sirv --help` for more info.
*/

opts.lazy

Type: Boolean
Default: false

If true, Sade will not immediately execute the action handler. Instead, parse() will return an object of { name, args, handler } shape, wherein the name is the command name, args is all arguments that would be passed to the action handler, and handler is the function itself.

From this, you may choose when to run the handler function. You also have the option to further modify the args for any reason, if needed.

let { name, args, handler } = prog.parse(process.argv, { lazy:true });
console.log('> Received command: ', name);

// later on...
handler.apply(null, args);

prog.help(cmd)

Manually display the help text for a given command. If no command name is provided, the general/global help is printed.

Your general and command-specific help text is automatically attached to the --help and -h flags.

Note: You don't have to call this directly! It's automatically run when you bin --help

cmd

Type: String
Default: null

The name of the command for which to display help. Otherwise displays the general help.

License

MIT Β© Luke Edwards

More Repositories

1

clsx

A tiny (239B) utility for constructing `className` strings conditionally.
JavaScript
7,354
star
2

polka

A micro web server so fast, it'll make you dance! πŸ‘―
JavaScript
5,266
star
3

pwa

(WIP) Universal PWA Builder
JavaScript
3,123
star
4

uvu

uvu is an extremely fast and lightweight test runner for Node.js and the browser
JavaScript
2,938
star
5

taskr

A fast, concurrency-focused task automation tool.
JavaScript
2,528
star
6

sockette

The cutest little WebSocket wrapper! 🧦
JavaScript
2,398
star
7

worktop

The next generation web framework for Cloudflare Workers
TypeScript
1,635
star
8

kleur

The fastest Node.js library for formatting terminal text with ANSI colors~!
JavaScript
1,593
star
9

klona

A tiny (240B to 501B) and fast utility to "deep clone" Objects, Arrays, Dates, RegExps, and more!
JavaScript
1,537
star
10

dequal

A tiny (304B to 489B) utility to check for deep equality
JavaScript
1,271
star
11

tsm

TypeScript Module Loader
TypeScript
1,164
star
12

tinydate

A tiny (349B) reusable date formatter. Extremely fast!
JavaScript
1,060
star
13

sirv

An optimized middleware & CLI application for serving static files~!
JavaScript
1,023
star
14

rosetta

A general purpose internationalization library in 292 bytes
JavaScript
766
star
15

navaid

A navigation aid (aka, router) for the browser in 850 bytes~!
JavaScript
755
star
16

dset

A tiny (194B) utility for safely writing deep Object values~!
JavaScript
739
star
17

uid

A tiny (130B to 205B) and fast utility to generate random IDs of fixed length
JavaScript
634
star
18

httpie

A Node.js HTTP client as easy as pie! πŸ₯§
JavaScript
575
star
19

ganalytics

A tiny (312B) client-side module for tracking with Google Analytics
JavaScript
575
star
20

trouter

🐟 A fast, small-but-mighty, familiar fish...errr, router*
JavaScript
563
star
21

regexparam

A tiny (394B) utility that converts route patterns into RegExp. Limited alternative to `path-to-regexp` πŸ™‡β€β™‚οΈ
JavaScript
555
star
22

dimport

Run ES Module syntax (`import`, `import()`, and `export`) in any browser – even IE!
JavaScript
547
star
23

mri

Quickly scan for CLI flags and arguments
JavaScript
533
star
24

tempura

A light, crispy, and delicious template engine 🍀
JavaScript
514
star
25

calendarize

A tiny (202B) utility to generate calendar views.
JavaScript
471
star
26

formee

A tiny (532B) library for handling <form> elements.
JavaScript
443
star
27

qss

A tiny (294b) browser utility for encoding & decoding a querystring.
JavaScript
408
star
28

preact-starter

Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
JavaScript
387
star
29

uuid

A tiny (~230B)and fast UUID (V4) generator for Node and the browser
JavaScript
386
star
30

vegemite

A Pub/Sub state manager you'll love... or hate
JavaScript
373
star
31

resolve.exports

A tiny (952b), correct, general-purpose, and configurable `"exports"` and `"imports"` resolver without file-system reliance
TypeScript
351
star
32

polkadot

The tiny HTTP server that gets out of your way! ・
JavaScript
322
star
33

matchit

Quickly parse & match URLs
JavaScript
321
star
34

fetch-event-stream

A tiny (736b) utility for Server Sent Event (SSE) streaming via `fetch` and Web Streams API
TypeScript
321
star
35

flru

A tiny (215B) and fast Least Recently Used (LRU) cache
JavaScript
310
star
36

mrmime

A tiny (2.8kB) and fast utility for getting a MIME type from an extension or filename
TypeScript
300
star
37

watchlist

Recursively watch a list of directories & run a command on any file system changes
JavaScript
261
star
38

arr

A collection of tiny, highly performant Array.prototype alternatives
JavaScript
255
star
39

ley

(WIP) Driver-agnostic database migrations
JavaScript
254
star
40

flattie

A tiny (203B) and fast utility to flatten an object with customizable glue
JavaScript
254
star
41

webpack-messages

Beautifully format Webpack messages throughout your bundle lifecycle(s)!
JavaScript
246
star
42

obj-str

A tiny (96B) library for serializing Object values to Strings.
JavaScript
225
star
43

templite

Lightweight templating in 150 bytes
JavaScript
221
star
44

ms

A tiny (414B) and fast utility to convert milliseconds to and from strings.
JavaScript
200
star
45

nestie

A tiny (215B) and fast utility to expand a flattened object
JavaScript
199
star
46

throttles

A tiny (139B to 204B) utility to regulate the execution rate of your functions
JavaScript
195
star
47

hexoid

A tiny (190B) and extremely fast utility to generate random IDs of fixed length
JavaScript
185
star
48

fromnow

A tiny (339B) utility for human-readable time differences between now and past or future dates.
JavaScript
178
star
49

astray

Walk an AST without being led astray
JavaScript
177
star
50

tmp-cache

A least-recently-used cache in 35 lines of code~!
JavaScript
174
star
51

bundt

A simple bundler for your delicious modules
JavaScript
167
star
52

wrr

A tiny (148B) weighted round robin utility
JavaScript
164
star
53

freshie

(WIP) A fresh take on building universal applications with support for pluggable frontends and backends.
TypeScript
153
star
54

svelte-ssr-worker

A quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker!
JavaScript
152
star
55

totalist

A tiny (195B to 224B) utility to recursively list all (total) files in a directory
JavaScript
148
star
56

typescript-module

Template repository for authoring npm modules via TypeScript
TypeScript
141
star
57

sublet

Reactive leases for data subscriptions
JavaScript
139
star
58

escalade

A tiny (183B to 210B) and fast utility to ascend parent directories
JavaScript
138
star
59

webpack-route-manifest

Generate an asset manifest file, keyed by route patterns!
JavaScript
127
star
60

url-shim

A 1.5kB browser polyfill for the Node.js `URL` and `URLSearchParams` classes.
JavaScript
123
star
61

semiver

A tiny (153B) utility to compare semver strings.
JavaScript
119
star
62

cfw

(WIP) A build and deploy utility for Cloudflare Workers.
TypeScript
113
star
63

svelte-demo

Multi-page demo built Svelte 3.x and Rollup with code-splitting
Svelte
113
star
64

webpack-format-messages

Beautiful formatting for Webpack messages; ported from Create React App!
JavaScript
111
star
65

gittar

🎸 Download and/or Extract git repositories (GitHub, GitLab, BitBucket). Cross-platform and Offline-first!
JavaScript
111
star
66

saturated

A tiny (203B) utility to enqueue items for batch processing and/or satisfying rate limits.
JavaScript
110
star
67

webpack-critical

Extracts & inlines Critical CSS with Wepack
JavaScript
109
star
68

pages-fullstack

Demo SvelteKit application running on Cloudflare Pages
Svelte
102
star
69

sort-isostring

A tiny (110B) and fast utility to sort ISO 8601 Date strings
JavaScript
98
star
70

colors-app

🎨 A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
JavaScript
95
star
71

salteen

A snappy and lightweight (259B) utility to encrypt and decrypt values with salt.
JavaScript
95
star
72

is-offline

A tiny (174B) library to detect `offline` status & respond to changes in the browser.
JavaScript
91
star
73

seolint

(WIP) A robust and configurable SEO linter
TypeScript
86
star
74

rafps

A tiny (178B) helper for playing, pausing, and setting `requestAnimationFrame` frame rates
JavaScript
82
star
75

preact-cli-ssr

A quick demo for adding SSR to a Preact CLI app
JavaScript
79
star
76

webpack-modules

Handle `.mjs` files correctly within webpack
JavaScript
71
star
77

csprng

A tiny (~90B) isomorphic wrapper for `crypto.randomBytes` in Node.js and browsers.
JavaScript
66
star
78

classico

A tiny (255B) shim when Element.classList cannot be used~!
JavaScript
62
star
79

premove

A tiny (201B to 247B) utility to remove items recursively
JavaScript
62
star
80

mk-dirs

A tiny (381B to 419B) utility to make a directory and its parents, recursively
JavaScript
54
star
81

primeval

A tiny (128B) utility to check if a value is a prime number
JavaScript
51
star
82

loadr

Quickly attach multiple ESM Loaders and/or Require Hooks together but without the repetitive `--experimental-loader` and/or `--require` Node flags
JavaScript
49
star
83

preact-progress

Simple and lightweight (~590 bytes gzip) progress bar component for Preact
JavaScript
49
star
84

route-manifest

A tiny (412B) runtime to retrieve the correct entry from a Route Manifest file.
JavaScript
46
star
85

svelte-preprocess-esbuild

A Svelte Preprocessor to compile TypeScript via esbuild!
TypeScript
44
star
86

preact-scroll-header

A (800b gzip) header that will show/hide while scrolling for Preact
JavaScript
41
star
87

inferno-starter

Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Inferno.js
JavaScript
41
star
88

rollup-route-manifest

A Rollup plugin to generate an asset manifest, keyed by route patterns ("route manifest")
JavaScript
40
star
89

onloaded

A tiny (350B) library to detect when images have loaded.
JavaScript
38
star
90

webpack-plugin-replace

Replace content while bundling.
JavaScript
36
star
91

route-sort

A tiny (200B) utility to sort route patterns by specificity
JavaScript
35
star
92

scorta

A tiny (330B to 357B) and fast utility to find a package's hidden supply / cache directory.
JavaScript
33
star
93

local-hostname

A tiny (171B) utility to check if a hostname is local
JavaScript
32
star
94

taskr-outdated

A generator & coroutine-based task runner. Fasten your seatbelt. πŸš€
JavaScript
32
star
95

rewrite-imports

Rewrite `import` statements as `require()`s; via RegExp
JavaScript
31
star
96

preact-offline

A (300b gzip) component to render alerts/messages when offline.
JavaScript
29
star
97

fly-kit-preact

A starter kit for building offline / SPA / PWA apps with Preact
JavaScript
28
star
98

fannypack

The tool belt for front-end developers
JavaScript
28
star
99

is-ready

A tiny (309B) library to detect when `window` globals are defined and ready to use~!
JavaScript
28
star
100

ava-http

Async HTTP request wrapper πŸš€
JavaScript
25
star