Web Monetization Projects

Development Process

Ultimately we want main branch to be in a 'good' state at all times, with good test coverage, so we can practice CD, pushing the extensions to dev channels.

Currently, we mostly rely on puppeteer tests which don't cover all the test scenarios.
Therefore, we must do manual testing before release, as it's too much of an impediment to run through the full manual release checklist on each PR/commit.

It's a good practice to do manual testing, as often bugs can be found with fresh eyes, if one is carefully going through the steps. Also, doing so helps to keep the various features freshly in mind, so when adding new features or fixing old ones, mistakes can be avoided.

So:

do not assume the main branch is in a good state !
- Go through the release release checklist carefully!

Setting up dev environment

The Web-Monetization monorepo uses yarn, so you need to install it using npm or your package manager:

npm install -g yarn
# OR
brew install yarn

Clone and setup the dev env.

git clone git@github.com:coilhq/web-monetization-projects.git
yarn

Why Vanilla Prettier ?

We used prettier-standard (based on prettierx, a fork of prettier) but found that it was easier to find up-to-date editor/eslint integrations for the mainline prettier and just set the .prettierrc options to match prettier-standard as closely as possible (no semicolon, single-quoted strings etc).

The one main difference is the lack of a space before parentheses in function declarations. e.g.

// There *SHOULD* be a space before the parens here
function prettierStandard () {}
// maybe prettier was run on this markdown :)

function prettier() {}

This is not a big deal when prettier is run before commit and enforced in the CI etc.

Repository Structure

This repository is managed using lerna, yarn and typescript project references, with some custom code to generate consistent package.json/tsconfig.build.json/etc and src/test folder structure. See the coil-monorepo-upkeep folder for details

Development workflow

The root tsconfig.json has all the paths configured so refactoring/navigation works across package boundaries, going directly to the source files rather than the declarations.

It looks at the entire monorepo as one set of sources, yet is configured to not actually emit any source. It is purely for the purposes of the IDE.

It is intended that the whole monorepo be opened in the editor/IDE.

To build the source, one must use each individual package's tsconfig.build.json. The root has a tsconfig.references.json which has {"path": "...} links to all the project leaf nodes. Each package with dependencies on other packages also has these links automatically generated by yarn upkeep via data output from the lerna list command. For example, check the coil-extension tsconfig.build.json

Jest/Babel Usage For Speedier Tests

TypeScript is great!

But when the editor is already set up to check types and CI also it's not strictly necessary to do so when running tests. In fact, it can just get in the way of a productive edit/compile/test loop.

You can create a file ./jest.config.local.js file which will be read by the default jest config

module.exports = function configure(config) {
  // Don't use the ts-jest preset
  delete config.preset
  return config
}

But it's still slow!?

At the time of writing, Jest 24 was struggling with mysterious performance issues, primarily showing up on MacOS

Experiment with the jest -i/--runInBand option which will just run tests serially in a single worker. This can often make things drastically faster.

Some editors offer the ability to run scoped tests which also seems to run everything in a single worker when only one file is in scope.

da2x / web-monetization-projects