wgo-root v0.0.1
Wingo monorepo (turborepo) for all products and the core library (DLS)
Configurations already part of the package are:
- Core library for react components - shared with other projects, used to create your application using reusable components from core library.
- Core shared 'utils', for all your utilities.
- Shared configrations for typescipt, postcss, next, tailwindcss
- React next app, project application that uses core shared packages like, core component library, configrations, utils etc.
Tools preconfigured:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
- Changesets for managing versioning and changelogs
- GitHub Actions for fully automated package publishing
Using this example
Clone the setup locally or from GitHub:
npx degit https://github.com/farooqmir/wingo-apps
cd wingo-apps
yarn install
git init . && git add . && git commit -m "Init"
Useful Commands
yarn build
- Build all packages including the Storybook siteyarn dev
- Run all packages locally and preview with Storybookyarn lint
- Lint all packagesyarn changeset
- Generate a changesetyarn clean
- Clean up allnode_modules
anddist
folders (runs each package's clean script)
Apps & Packages
This Turborepo includes the following packages and applications:
apps/docs
: Documentation core components in storybookpackages/reactwiind
: Core shared React componentspackages/rw-utils
: Shared utilitiespackages/rw-tsconfig
: Sharedtsconfig.json
s used throughout the monorepopackages/eslint-config-rw
: ESLint preset
To install a dependency for the entire monorepo, use the -W
workspaces flag with yarn add
.
Compilation
To make the core library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with tsup
, which uses esbuild
to greatly improve performance.
For reactwiind
, the build
command is the following:
tsup src/index.tsx --format esm,cjs --dts --external react
tsup
compiles src/index.tsx
, which exports all of the components in the design system, into both ES Modules and CommonJS formats as well as their TypeScript types. The package.json
for wingo-core
then instructs the consumer to select the correct format:
{
"name": "reactwiind",
"version": "0.0.0",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"sideEffects": false,
}
Run yarn build
to confirm compilation is working correctly. You should see a folder reactwiind/dist
which contains the compiled output.
wingo-core
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
Generating the Changelog
To generate your changelog, run yarn changeset
locally:
- Which packages would you like to include? – This shows which packages and changed and which have remained the same. By default, no packages are included. Press
space
to select the packages you want to include in thechangeset
. - Which packages should have a major bump? – Press
space
to select the packages you want to bump versions for. - If doing the first major version, confirm you want to release.
- Write a summary for the changes.
- Confirm the changeset looks as expected.
- A new Markdown file will be created in the
changeset
folder with the summary and a list of the packages included.
Releasing
When you push your code to GitHub, the GitHub Action will run the release
script defined in the root package.json
:
turbo run build --filter=docs^... && changeset publish
Turborepo runs the build
script for all publishable packages (excluding docs) and publishes the packages to npm. By default, this example includes wingo
as the npm organization. To change this, do the following:
- Rename folders in
packages/*
to replacewingo
with your desired scope - Search and replace
wingo
with your desired scope - Re-run
yarn install
To publish packages to a private npm organization scope, remove the following from each of the package.json
's
- "publishConfig": {
- "access": "public"
- },
1 year ago