scaleway-lib

scaleway-lib is a set of NPM packages used at Scaleway.

---

• Available packages
• Development
  • Locally
  • Link against another project (with yalc) => FAVORED
  • Link against another project (with pnpm link)
  • Linting
  • Unit Test
• Lerna
• Notes
  • On build targets
  • On build outputs
  • On commits
  • On git hooks
  • On versioning
• Contributing Guidelines

---

Available packages

• @scaleway/cookie-consent: React provider to handle website end user consent cookie storage based on segment integrations.

  

• @scaleway/countries: ISO 3166/3166-2 coutries JSON database.

  

• @scaleway/eslint-config-react: A shared eslint react opiniated configuration. Available in Javascript and Typescript.

  

• @scaleway/random-name: A tiny utility to generate random names.

  

• @scaleway/use-dataloader: A tiny react hook to to handle api requests.

  

• @scaleway/use-query-params: A tiny react hook to read and update URLs query parameters.

  

• @scaleway/use-segment: A tiny hooks to handle segment events.

  

• @scaleway/use-growthbook: A tiny hook to handle Growthbook Feature flag and A/B test tool.

  

• @scaleway/use-gtm: A tiny hook to handle gtm.

  

• @scaleway/use-i18n: A tiny hook to handle i18n.

  

• @scaleway/regex: usefull regex named.

  

• @scaleway/jest-helpers: utilities jest functions.

  

• @scaleway/outdated-browser: A small web script to display outdated banne

  

• @scaleway/validate-icu-locales: A small cli to check ICU locales error

  

• @scaleway/use-storage: A React hook to interact with local/session storage in reactive way with the same API as setState

  

Development

Locally

$ git clone git@github.com:scaleway/scaleway-lib.git
$ cd scaleway-lib
$ pnpm install
$ # ... do your changes ...
$ pnpm run lint
$ pnpm run test

Link against another project (with yalc) => FAVORED

yalc is a tool aiming to simplify working with local npm packages by providing a different workflow than npm/yarn/pnpm link, hence avoiding most of their issues with module resolving.

$ pnpm install -g yalc # Make sure to have the yalc binary

$ cd scaleway-lib/packages/example_package
$ pnpm run build && yalc publish
$ # Now it's ready to install in your project
$ cd ../../../project-something
$ yalc add @scaleway/package-name
$ cd ../scaleway-lib/packages/example_package
$ # If you do some changes into your package
$ pnpm run build && yalc publish --push --sig # --push will automatically update the package on projects where it have been added, --sig updates the signature hash to trigger webpack update

⚠️ since 1.0.0.pre.51 (2021-04-23), yalc publish needs the --sig option to trigger webpack module actual update.

⚠️ yalc create a yalc.lock and updates the package.json in the target project. Make sure to not commit these changes

Link against another project (with pnpm link)

$ cd packages/example_package && pnpm link
$ cd - && pnpm run build # rebuild the package
$ # Now it's ready to link into your project
$ cd ../project-something
$ pnpm link @scaleway/example_package

Linting

$ pnpm run lint
$ pnpm run lint:fix

Unit Test

$ pnpm run test # Will run all tests
$ pnpm run test --updateSnapshot # Will update all snapshots
$ pnpm run test:watch # Will watch tests and only rerun the one who are modified
$ pnpm run test:coverage # Will generate a coverage report

Lerna

This project is managed with Lerna. Lerna is a tool to manage multiple NPM packages inside the same repository.

Lerna also allows us to use PNPM workspaces to manage our dependencies. This implies a few things:

• devDependencies should be included in top package.json
• There should be no node_modules or pnpm-lock.yml in sub-packages
• There is a special syntax to manage sub-packages dependencies:

$ pnpm add -W -D new_dependency # Add a new devDependency to root project
$ cd packages/package_name && pnpm add new_dependency
$ cd packages/package_name && pnpm remove old_dependency

Notes

On build targets

We target by default Node@14 but you can add a browser output by adding a browser (you can find the spec here) target to your package.json.

  "browser": {
    "dist/module.js": "dist/module.browser.js"
  }

The browserlist we are currently using is available in the rollup.config.mjs

⚠️ Bear in mind that we do not currently support different entrypoint per target as we don't have the use case

On build outputs

We only output ESM modules. Please read this.

Compiled modules supports Node > 14, the last two versions of any browsers and any browsers with more than 1% of marketshare at the time of release.

On commits

We enforce the conventionnal commits convention in order to infer package bump versions and generate changelog.

On git hooks

We have a husky hook on pre-commit and pre-push which will ensure the file you committed matches the configured formating (eslint + prettier)

We also have one on commit-msg which will ensure you commit message respects our commit convention

We strongly encourage you not to but you can skip these hooks by passing --no-verify to your git commands

On versioning

We follow the semver semantic.

Contributing Guidelines

• Ensure tests are still ok and code coverage have not decreased
• Follow linter rules (tldr).
• CI is enforced, you won't be able to merge unless pipeline is successful.