@curve-technology/webapp-scripts

@curve-technology/webapp-scripts

Shareable config scripts for web apps

Installation

Install @curve-technology/webapp-scripts and its peerDependencies

yarn add --dev @curve-technology/webapp-scripts jest eslint

Table of contents

• Babel
• ESLint
  • Base Typescript and React .eslintrc
• Jest
  • Using the default config
  • Overriding the default config
• Babel
• Prettier
• Husky
• Commitlint
• TypeScript
  • Single package repo

Babel

To use this config, create an .babelrc file in the root of your package and add:

{
  "extends": "@curve-technology/webapp-scripts/babel/nextjs"
}

This babel config excludes some EcmaScript features, so you may need a polyfill for them:

https://polyfill.io/v3/polyfill.min.js?flags=gated&callback=init&features=default%2CArray.prototype.includes%2CArray.prototype.findIndex%2CArray.prototype.find%2CFunction.prototype.name

or

<script
  crossorigin="anonymous"
  src="https://polyfill.io/v3/polyfill.min.js?flags=gated&callback=init&features=default%2CArray.prototype.includes%2CArray.prototype.findIndex%2CArray.prototype.find%2CFunction.prototype.name"
></script>

ESLint

There are four eslint configs available:

• Base: for general purpose usage
• React: extends the base, for use with React
• Typescript: extends the base, for use with Typescript
• Typescript + React: extends the base, for use with Typescript and React

To use this config, create an .eslintrc file in the root of your package and reference one of the mentioned config options.

Base Typescript and React .eslintrc

Using a configuration file

The extends property value can be an absolute or relative path to a base configuration file. ESLint resolves a relative path to a base configuration file relative to the configuration file that uses it.

Example of a configuration file in JSON format:

{
  "extends": [
    "./node_modules/@curve-technology/webapp-scripts/eslint/eslint-ts-react"
  ],
  "rules": {
    "eqeqeq": "warn"
  }
}

Jest

This config assumes you're using jest, more specifically, that you use ts-jest.

To use this config, create an jest.config.js file in the root of your package and add:

Using the default config

const defaultConfig = require('@curve-technology/webapp-scripts/jest/')

module.exports = {
  ...defaultConfig,
}

Overriding the default config

If you need to add or override this config, use this:

const jestConfig = require('@curve-technology/webapp-scripts/jest/')

module.exports = Object.assign(jestConfig, {
  // your overrides here
  testPathIgnorePatterns: ['/dist/', '/node_modules/'],
})

Babel

To use this config, create an .babelrc file in the root of your package and add:

{ "extends": "@curve-technology/webapp-scripts/babel/nextjs" }

Prettier

To use this config, create an .prettierrc.js file in the root of your package and add:

const defaultConfig = require('@curve-technology/webapp-scripts/prettier/')

module.exports = {
  ...defaultConfig,
}

Husky

To use this config, create an .huskyrc.js file in the root of your package and add:

const defaultConfig = require('@curve-technology/webapp-scripts/husky/')

module.exports = {
  ...defaultConfig,
}

Commitlint

To use this config, create an .commitlintrc.js file in the root of your package and add:

const defaultConfig = require('@curve-technology/webapp-scripts/commitlint/')

module.exports = {
  ...defaultConfig,
}

TypeScript

tsconfig.json allows extensions via the extends key, but doesn't support module resolution (i.e. a node module), thus making it quite restrictive when it comes to referencing the path to a parent config file. Paths specified must be relative or absolute, absolute paths being of no use to us in the context of a shared code base.

Importing the shared config from ./node_modules/@curve-technology/webapp-scripts is our only option.

Single package repo

To use this config, create an tsconfig.json file in the root of your repo and add:

{
  "extends": "@curve-technology/webapp-scripts/tsconfig/tsconfig.base",
  "exclude": ["node_modules", "./.storybook/**/*"],
  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
}

---

Made by Curve's web scientists 👨‍🔬