Writing an Open Source JavaScript Library

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal, Inc.

@kentcdodds

@kentcdodds

kcd.im/oss-workshop

Please Stand...

What this workshop is

• From scratch
• Create a micro-library
• Write and run tests
• Transpiling
• Continuous Integration
• Publish a real project (each of you!)
• Community management

What this workshop is not

• Focused on building a library

Requirements

to run the workshop

1. git
2. node (version 6)
3. npm (version 3)
4. travis-ci.org account
5. codecov.io account

Setup

git clone https://github.com/kentcdodds/starwars-names.git

cd starwars-names

npm run setup:fem

open in your favorite editor

First things first

LICENSE, CoC, & README

Exercise

• Create CODE_OF_CONDUCT.md
• Create LICENSE
• Create README.md

FEM/00-scratch...FEM/01.0-important

git checkout -f FEM/01.0-important

npm init

package.json

Exercise

• npm set init-{property}
  • author-name
  • author-email
  • author-url
  • license
• npm init

FEM/01.0-important...FEM/02.0-npm-init

git checkout -f FEM/03.0-add-data

Create the lib

the easy part... 😉

Exercise

• Create src/index.js
• npm install unique-random-array
• Add node_modules to .gitignore

FEM/03.0-add-data...FEM/03.1-create-lib

git checkout -f FEM/03.1-create-lib

Linting

catch errors, encourage best practices, maintain consistency

Exercise

• npm i -D eslint eslint-config-kentcdodds
• Configure eslint
• Add lint script

FEM/03.1-create-lib...FEM/04.0-linting

git checkout -f FEM/04.0-linting

Unit testing

with Mocha and Chai

Exercise

04.0-linting...FEM/05.0-setup-tests

git checkout -f FEM/05.0-setup-tests

• npm install --save-dev mocha chai
• Create src/index.test.js
• Create test/mocha.opts
• Update package scripts "test" and "watch:test"

Exercise

• Test .all
• Test .random()

FEM/05.0-setup-tests...FEM/05.1-write-tests

git checkout -f FEM/05.1-write-tests

Exercise

• npm install --save-dev nyc
• Configure nyc in package.json
• Add cover script
• update .gitignore

FEM/05.1-write-tests...FEM/05.2-coverage

git checkout -f FEM/05.2-coverage

Saving yourself

from yourself

Exercise

• npm i -D ghooks npm-run-all
• Add validate script
• Configure ghooks

FEM/05.2-coverage...FEM/06.0-validate

git checkout -f FEM/06.0-validate

Transpiling

never write without ES6 again...

Exercise

• npm i -D babel babel-preset-es2015 rimraf
• Configure babel
• Add build script
• Add prebuild script
• Add files array to package.json
• Add dist to .gitignore
• Use ES6 in src/index.js

FEM/06.0-validate...FEM/07.0-transpile-source

git checkout -f FEM/07.0-transpile-source

Exercise

• npm i -D babel-plugin-istanbul babel-register cross-env
• Add cross-env to cover script
• Update nyc config
• Update babel config
• Use ES6 in tests 🎉 

FEM/07.0-transpile-source...FEM/07.1-transpile-tests

git checkout -f FEM/07.1-transpile-tests

Browser Build

Universal JavaScript!!

Exercise

• npm i -D webpack babel-loader json-loader
• Add webpack.config.babel.js
• Update build script and add more

FEM/07.1-transpile-tests...FEM/08.0-browser-build

git checkout -f FEM/08.0-browser-build

Time to fork

🍴 

Exercise

• Fork GitHub Repo
• Rename Fork
• Add to travis-ci.org
• Update remote: git remote set-url origin https://github.com/user/repo.git
• Create Travis.yml
• Rename package in package.json
• Update starwars-names.json kcd.im/fem-names
• git commit
• git push

FEM/08.0-browser-build...FEM/09.0-setup-travis

git checkout -f FEM/09.0-setup-travis

Exercise

• npm i -D codecov
• Add report-coverage script
• Update .travis.yml
• git commit
• git push

FEM/09.0-setup-travis...FEM/09.1-report-coverage

git checkout -f FEM/09.1-report-coverage

Exercise

• npm install --global semantic-release-cli
• semantic-release-cli setup
• git checkout package.json .travis.yml
• Update version, add release script
• git commit -am 'feat(lib): Release the lib'
• git push

FEM/09.1-report-coverage...FEM/09.2-auto-release

git checkout -f FEM/09.2-auto-release

Exercise

• npm install -D commitizen cz-conventional-changelog validate-commit-msg
• Add commitizen to config in package.json
• Add validate-commit-msg to ghooks config

FEM/09.2-auto-release...FEM/09.3-commit-message

git checkout -f FEM/09.3-commit-message