Evervault JavaScript SDK.
This is a monorepo managed with Turborepo and pnpm workspaces.
packages/browser- Evervault JavaScript SDK for the browser..packages/react- The React SDKpackages/react-native- React Native SDKpackages/card-validator- card number validator shared between react and react-native
packages/3ds- Code base for 3ds page for mobile SDKspackages/inputs- The codebase for Inputspackages/ui-components- The codebase for UI Components.packages/themes- An internal package for UI Component themespackages/types- An internal package for types that are shared between multiple packagespackages/eslint-config-custom- A project wide custom eslint configpackages/tsconfig- A project wide tsconfige2e-tests- End to end tests for the packages.examples- A folder of different examples using the JS and React SDK.statics- Contains a few static JSON files served from the browser endpoint that barely change.
First get a node version manager to install node. Any version manager that supports .nvmrc will work.
Install node with your version manager and ensure node -v maches the version in .nvmrc.
Set up pnpm with:
# Corepack is recommended for local setup but is still in beta
corepack enable
corepack prepare pnpm@latest-9 --activateor
# Install pnpm globally with npm old-school
npm install -g pnpmInstall the Turborepo CLI set up globally, so we can link the workspace to Vercel for remote caching.
pnpm install turbo --globalInstall the dependencies with:
pnpm installCreate a .env file in the project root. You can use the .env.example file as a template for the variables you will need to set.
The best way to work on the SDK's is by using one of the example projects. If you run pnpm dev in the project root you will be prompted to choose which example project you want to work with. After selecting one, it and all of its dependendies will be run in development mode and any changes you make will be updated immediately.
The example project will be available on localhost:4000 after it has started up.
pnpm build will build all packages in the repo.
The build artifacts will be under dist in each package.
pnpm test will run all unit tests in the repo.
pnpm e2e:test will run all Playwright e2e tests in the repo.
Both test and e2e:test will need to pass in CI for PR's to be merged.
Typechecking is done with TypeScript. In packages that have typescript enabled (e.g. have a tsconfig.json), the CI step will run the typecheck task. PR's will be blocked if this doesn't pass.
Formatting is done with Prettier. The format task will overwrite files with the correct formatting, while the format:check task will only check files for correct formatting.
The CI will block PR's if format:check fails. If this occurs, run pnpm run format to update the formatting on all files. I also recommend using Editor integrations with Prettier to format as you write code.
We use changesets to version manage the packages in this repo.
When creating a pr that needs to be rolled into a version release, do npx changeset, select the level of the version bump required and describe the changes for the change logs. DO NOT select major for releasing breaking changes without team approval.
To release:
Merge the version PR that the changeset bot created to bump the version numbers. This will bump the versions of the packages and create a git tag for the release. This will trigger a workflow to deploy them to AWS and/or publish to NPM, and create a new release on GitHub.
| Package | Production | Staging |
|---|---|---|
| browser | js.evervault.com/v2/index.js | js.evervault.io/v2/index.js |
| inputs (deprecated) | inputs.evervault.com/index.html | inputs.evervault.io/index.html |
| ui-components | ui-components.evervault.com/index.html | ui-components.evervault.com/index.html |
| 3ds | 3ds.evervault.com/index.html | 3ds.evervault.io/index.html |