Users === Developers
Stand Up!
1. Helpful docs
Write docs first!
References
- is information-oriented
- describes the machinery
- is accurate and complete
How-to guides
- is goal-oriented
- shows how to solve a problem
- is a series of steps
Explanations
- is understanding-oriented
- explains
- provides background & context
Tutorials
- is learning-oriented
- allows newcomer to get started
- is a lesson
- Badges
- Description
- Installation
- Quick Guide
- API
- Tech Details
- Contributing
- License
Check outfiddly
2. TypeScript types
3. Bug-free
Type checking
Linting
Testing + Coverage
Jest Projects
Run typing, linting & tests all within Jest
{
"projects": [
{ "displayName": "test" },
{
"displayName": "lint",
"runner": "jest-runner-eslint",
"testMatch": ["<rootDir>/**/*.ts"]
}, {
"displayName": "type",
"runner": "jest-runner-tsc",
"testMatch": ["<rootDir>/**/*.ts"]
}
]
}name: CI
on: [push, pull_request]
jobs:
main:
strategy:
matrix:
node: [12, 14]
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node }}
- run: npm ci
- run: npm test
env:
CI: true4. Changes come quickly
> npx envinfo --system --binaries
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 47.79 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchmanenvinfo
Development Experience files
Library Starter Commands
npx license mit > LICENSE.md
npx gitignore node
npx covgen ben@benmvp.com
git init
npm init -y{
"main": "lib/cjs/index.js",
"module": "lib/esm/index.js",
"jsnext:main": "lib/esm/index.js",
"sideEffects": false,
"types": "lib/types/index.d.ts",
"files": ["lib"],
"scripts": {
"build:cjs": "babel src -d lib/cjs --presets cjs.js",
"build:esm": "babel src -d lib/esm --presets esm.js",
"build:types": "tsc -d --declarationDir lib/types",
"build": "npx npm-run-all --parallel build:**"
}
}name: Release
on:
push:
branches: [master]
jobs:
main:
steps:
# Setup & install
- name: Build package
run: npm run build
- name: Release new version
run: npx semantic-releasesemantic-release
Resources
- Example Issue templates
- Example PR template
- Example PR Validator
- Example
babel-cjs.js/babel-esm.js @babel/preset-typescripteslint-plugin-prettier@typescript-eslint/eslint-pluginsideEffectsinpackage.json- What are CJS, AMD, UMD, and ESM in Javascript?
- For the love of god, don’t use .npmignore
- Testing npm packages before publishing
Recap
Development
Repo files
- API & example docs
- Badges
- Contributing & Code of Conduct
LICENSE- Issue & PR templates
@benmvp/cli
The “perfect” library tooling
Ben Ilegbodu
@benmvp | benmvp.com | #OS101
March 30, 2021
RESTART THE TIMER!!!!
Hello everyone!
It's the "perfect" (in quotes) JavaScript library tooling because it's obviously highly subjective
These are naturally my own opinions
But it's the talk I would've liked to have heard when I was starting out building libraries
Because libraries for developers have different concerns than apps for users
So these are learnings over the years doing tooling-type things
Both in open-source & on the job
As well as watching how other more prolific folks have done it
RESTART THE TIMER!!!!
TWEETED OUT THE SLIDES!
Gonna try to pay attention to the chat to make it somewhat engaging
I'll try to leave time for Q&A at the end so no need to raise your hand