• Stars
    star
    2,006
  • Rank 22,870 (Top 0.5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 2 years ago

Reviews

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

Repository Details

Markdown driven task runner.

maid

NPM version NPM downloads CircleCI donate chat

Markdown driven task runner.

Table of Contents

Install

You can install Maid globally:

# For npm users
npm i -g maid
# For Yarn users
yarn global add maid

Or if you want to ensure that your teammates are using the same version as you, it's recommended to install Maid locally:

# For npm users
npm i -D maid
# For Yarn users
yarn add maid --dev

PRO TIP: you can use npx or yarn command to run any locally installed executable that is inside node_modules/.bin/, e.g. use yarn maid to run the locally installed maid command.

What is a maidfile?

A maidfile is where you define tasks, in Markdown!

πŸ“ maidfile.md:

## lint

It uses ESLint to ensure code quality.

```bash
eslint --fix
```

## build

Build our main app

<!-- Following line is a maid command for running task -->

Run task `build:demo` after this

```bash
# note that you can directly call binaries inside node_modules/.bin
# just like how `npm scripts` works
babel src -d lib
```

## build:demo

You can use JavaScript to write to task script too!

```js
const webpack = require('webpack')

// Async task should return a Promise
module.exports = () =>
  new Promise((resolve, reject) => {
    const compiler = webpack(require('./webpack.config'))
    compiler.run((err, stats) => {
      if (err) return reject(err)
      console.log(stats.toString('minimal'))
      resolve()
    })
  })
```

Each task is defined using h2 header and its child contents, the value of h2 header will be used as task name, its following paragraphs (optional) will be used as task description, and following code block (optional) will be used as task script.

Currently the code block languages are sh bash js javascript and more!.

Now run maid help to display the help for this maidfile:

❯ maid help

  lint        It uses ESLint to ensure code quality.
  build       Build our main app
  build:demo  You can use JavaScript to write to task script too!

❯ maid help "build*"

  build       Build our main app
  build:demo  You can use JavaScript to write to task script too!

To run a task, you can directly run maid <task_name>

❯ maid build
[13:46:38] Starting 'build'...
πŸŽ‰  Successfully compiled 3 files with Babel.
[13:46:38] Finished 'build' after 363 ms...
[13:46:38] Starting 'build:demo'...
webpack compiled in 734ms.
[13:46:38] Finished 'build:demo' after 734 ms...

# to get minimal logs
❯ maid build --quiet
πŸŽ‰  Successfully compiled 3 files with Babel.
webpack compiled in 734ms.

Run tasks before/after a task

You can run tasks before or after a task:

## build

Run task `deploy` after this

```bash
webpack --config config/webpack.config.js
```

## deploy

```bash
gh-pages -d dist
```

Expressions that start with Run(s)? task(s)? are treated specially. In this case if you run maid build it will also run the deploy task after build has finished.

The syntax is simple: Runs? tasks? <taskNames> (before|after) this (in parallel)? where each task name is surrounded by a pair of backticks: `.

By default a task will run before the current task. So Run task `build` would run build before the task it was described in. The presence of after anywhere in the sentence (after Run task) will cause it to be ran after. Commands run synchronously by default. The presence of in parallel in the sentence will cause it to be run in parallel.

Examples:

  • Run task `build`.
  • Run task `build` after this.
  • Run tasks `clean`, `build`, and `lint`.
  • Run tasks `build:app` `start:server` before this.
  • Run tasks `build:server` `build:client` before this in parallel.

Task hooks

Like npm scripts, when you run a command called build, when it's finished we will also run postbuild task.

Hook syntax:

  • pre<taskName>: Run before a specific task.
  • post<taskName>: Run after a specific task.
  • afterAll: Run after all tasks.
  • beforeAll: Run before all tasks.

Advanced

Code block languages

bash/sh

Read command line arguments

The CLI arguments are passed to executed script, so you can access it like this:

## log

```bash
echo $1
```

Then run maid log nice and it will print nice in the console.

js/javascript

The JS script will also be evaluated.

## log

```js
console.log(process.argv)
```
Asynchronous task

For asynchonous tasks, you can export a function which returns Promise:

## build

```js
module.exports = async () => {
  const files = await readFiles('./')
  await buildFiles(files)
}
```

py/python

## log

```py
print("cool")
```

Use a custom maidfile

By default, Maid would use maidfile.md, CONTRIBUTING.md or README.md (case-insensitive) in current working directory, when you're using README.md you need to manually specify the section of the markdown you wanna use as Maid tasks like below:

## My Project

## How to use

Let me explain..

## Development

<!-- maid-tasks -->

### test

```bash
# some test scripts...
```

Unlike a maidfile.md which uses all h2 headers as tasks, in README.md only h3 headers under the specified h2 header will be used as tasks. You can add a <!-- maid-tasks --> comment right below the desired h2 header.

Alternatively, if you're not using maidfile.md, you can also use --section h2_header and --path foo.md flags to customize it.

ZSH completion

Add FPATH like following to .zshrc:

export FPATH=$(npm root -g)/maid/completion/zsh:$FPATH

Development

Maid's own development scripts are powered by itself, run maid help or node bin/cli help in this project to get more.

lint

Run ESLint to ensure code quality and code style (via Prettier).

yarn eslint . "${@:1}"

If you want to automatically fix lint errors, try adding --fix plugin to the command you run, e.g. maid lint --fix

test

Use AVA to run unit tests.

yarn ava "${@:1}"

Similar to the lint task, you can append any flags for ava command directly when you run the maid command.

toc

Generate a table of contents section in the README.md file.

yarn doctoc README.md

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

maid Β© egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist Β· GitHub @egoist Β· Twitter @_egoistlily

More Repositories

1

tsup

The simplest and fastest way to bundle your TypeScript libraries.
TypeScript
5,588
star
2

poi

⚑A zero-config bundler for JavaScript applications.
JavaScript
5,243
star
3

docute

πŸ“š Effortless documentation, done right.
JavaScript
3,725
star
4

devdocs-desktop

πŸ—‚ A full-featured desktop app for DevDocs.io.
JavaScript
3,140
star
5

vue-content-loader

SVG component to create placeholder loading, like Facebook cards loading.
JavaScript
3,025
star
6

hack

β›· Dead simple CSS framework.
CSS
2,587
star
7

vuepack

πŸ“¦ A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)
JavaScript
2,438
star
8

eme

Elegant Markdown Editor.
JavaScript
2,041
star
9

dum

An npm scripts runner written in Rust.
Rust
1,422
star
10

import-http

Import modules from URL instead of local node_modules
JavaScript
1,239
star
11

codepan

Like codepen and jsbin but works offline.
JavaScript
1,119
star
12

bili

Bili makes it easier to bundle JavaScript libraries.
TypeScript
1,047
star
13

esbuild-register

Transpile JSX, TypeScript and esnext features on the fly with esbuild
TypeScript
912
star
14

tailwindcss-icons

Use any icon (100,000+) from Iconify, for TailwindCSS
TypeScript
774
star
15

vue-timeago

A timeago component for Vue.
JavaScript
731
star
16

docup

The easiest way to write beautiful docs.
TypeScript
707
star
17

dropcode

A simple and lightweight code snippet manager.
TypeScript
676
star
18

rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.
JavaScript
672
star
19

vue-monaco

MonacoEditor component for Vue.js
JavaScript
651
star
20

vue-feather-icons

Simply beautiful open source icons as Vue functional components.
Vue
586
star
21

rollup-plugin-esbuild

Use ESBuild with Rollup to transform ESNext and TypeScript code.
TypeScript
566
star
22

vue-mugen-scroll

Infinite scroll component for Vue.js 2
JavaScript
546
star
23

vue-client-only

Vue component to wrap non SSR friendly components (428 bytes)
JavaScript
473
star
24

biu

🚨 An alert replacement
HTML
442
star
25

styled-vue

Use dynamic styles in Vue single-file components.
JavaScript
428
star
26

package-size

Get the bundle size of an npm package.
JavaScript
422
star
27

tooling

Modular JavaScript Tooling.
JavaScript
417
star
28

vue-router-prefetch

Prefetch links when they are visible in viewport.
JavaScript
383
star
29

node-vs-deno

A Deno guide for Node.js developers
363
star
30

presite

A static site generator based on Puppeteer.
TypeScript
331
star
31

esmon

like nodemon but very esbuild.
TypeScript
324
star
32

franxx

A vanilla JavaScript router that works everywhere.
TypeScript
321
star
33

ts-lib-starter

My minimal TypeScript library starter
TypeScript
269
star
34

vue-final-form

🏁 High performance subscription-based form state management for Vue.js.
Vue
265
star
35

hanabi

πŸ’₯ Highlight any code, in a colorful way. (seriously 700 bytes)
JavaScript
245
star
36

lit-vue

πŸ”₯ Vue SFC goodies directly in JavaScript files.
JavaScript
244
star
37

Miu

🚫 [Deprecated] Miu is a Markdown Editor for Windows (Do not star, this code looks like a sh*t)
JavaScript
241
star
38

tooling.one

A collection of useful tools for developers.
TypeScript
239
star
39

svg-to-vue-component

Transform SVG files into Vue SFC (with hot reloading and SVGO support)
JavaScript
234
star
40

haya

⚑️ esbuild based dev server and production bundler, it's really fast
TypeScript
231
star
41

awesome-esbuild

A curated list of awesome esbuild resources
225
star
42

vue-dts-gen

Generate `d.ts` from `.vue` files.
TypeScript
220
star
43

bget

Download and install binaries from GitHub Releases, interactively.
Go
216
star
44

vue-emotion

Seamlessly use emotion (CSS-in-JS) with Vue.js
JavaScript
214
star
45

vite-plugin-mix

Adding backend API to your Vite app.
TypeScript
210
star
46

mordred

[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
TypeScript
206
star
47

eva.js

πŸ’« A complete solution to building modern webs with Vue.js and its friends.
JavaScript
205
star
48

next-fullstack-starter

Next.js + Prisma + TailwindCSS +TRPC
TypeScript
202
star
49

openai-proxy

OpenAI proxy on Cloudflare Worker / Vercel Edge
TypeScript
201
star
50

vue-inter

Simple yet powerful 1kB i18n library for Vue.js
JavaScript
198
star
51

vue-to-react

Turn a Vue component into a React component.
TypeScript
197
star
52

vue-media

A CSS media query component for Vue.js
JavaScript
194
star
53

typed-worker

Type-safe and Promisified API for Web Worker and Iframe
TypeScript
191
star
54

evangelion-card

Generate Evangelion title card like a boss 😎
Vue
188
star
55

vue-html

An alternative to Vue template and Vue JSX
JavaScript
186
star
56

prisma-repl

REPL for Prisma databases.
TypeScript
185
star
57

unplugin-swc

SWC plugin for Vite and Rollup
TypeScript
185
star
58

testen

βœ”οΈ Run tests for multiple versions of Node.js in local env.
JavaScript
175
star
59

vue-cli-gui

GUI for vue-cli UI.
JavaScript
165
star
60

vmark

Convert markdown to Vue component.
JavaScript
164
star
61

bina

An installer for self-contained, single-file binaries, no additional CLI needed.
TypeScript
163
star
62

vue-compile

Compile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.
TypeScript
158
star
63

is-trademarked-cli

ℒ️ CLI tool to check if a word is trademarked.
JavaScript
158
star
64

play-esbuild

esbuild online playground
TypeScript
157
star
65

vue-prism-component

highlight code using prism.js and vue component
JavaScript
156
star
66

native-toast

Native-like toast notification but for the web.
HTML
150
star
67

loglive

Render changelog as a website on the fly.
JavaScript
149
star
68

logbox

View console logs and errors on any website without opening the devtools
TypeScript
148
star
69

vue-isomorphic-starter

Vue server-side rendering in real life. ~(≧▽≦)/~
JavaScript
146
star
70

vue-ga

Google Analytics for Vue.js
JavaScript
142
star
71

tokio

Web scraping made simple.
JavaScript
142
star
72

taki

Take a snapshot of any website.
TypeScript
140
star
73

esbuild-plugin-vue

Basic .vue support for esbuild.
TypeScript
137
star
74

joycon

Find and load config files with joy.
JavaScript
133
star
75

vue-preload

Preloading data for Vue
JavaScript
133
star
76

bundle-require

bundle and `require` a file, the same way Vite loads `vite.config.ts`
TypeScript
133
star
77

vitekit

Remix and Vite had a baby. [WIP]
TypeScript
132
star
78

md

A markdown parser and compiler. Built for speed.
JavaScript
130
star
79

io-spin

TJ Holowaychuk's go-spin node.js port
JavaScript
125
star
80

vue-windows

Vue components for creating neat windows.
Vue
125
star
81

tsno

`node` with typescript support, importing from URL, etc.
TypeScript
118
star
82

data-tip.css

πŸ’ˆ Wow, such tooltip, with pure css!
HTML
117
star
83

eventstop

A minimal event library for Node.js and browser.
JavaScript
115
star
84

kanpai

🍻 Kanpai is a better way to publish npm packages.
TypeScript
111
star
85

preader

Extract the main content from a web page.
TypeScript
111
star
86

esbuild-service

esbuild as a service. bundle any npm package on the fly as you request.
Go
108
star
87

app-loading

Focus on Medium-like app loading style
JavaScript
104
star
88

vue-slim-tabs

A slim tab component for Vue.js (1.3 kB minified)
Vue
103
star
89

gh-pinned-repos

API service for retrieving pinned repos on GitHub.
TypeScript
103
star
90

follower-count

Get follower count for Instagram, Twitter, TikTok, Youtube accounts
TypeScript
102
star
91

vite-plugin-compile-time

Some compile-time magic for your Vite project
TypeScript
101
star
92

ideas

πŸ’‘ideas / thoughts / polls from egoist
101
star
93

doko

A docker-based development dependency manager.
TypeScript
101
star
94

nswatch

Like gulp.watch but for npm scripts.
TypeScript
100
star
95

npm-size

Get the install size of an npm package.
JavaScript
99
star
96

vue-head

Document <head> manager for Vue 3, SSR ready.
TypeScript
98
star
97

logo-maker

create a simple logo..
CSS
97
star
98

always-bet-on-vue

Chunibyo's overwhelming victory
96
star
99

hakka

ALPHA. A reddit-like online community (but less noisy).
TypeScript
96
star
100

feedbackok-js

Collecting feedback with ease.
TypeScript
94
star