Spudnik Library Monorepo

This repository houses a collection of reusable tools and utilities specifically designed for the needs of Spudnik. The goal is to provide a centralized, consistent, and efficient way to manage common functionalities across different projects within the company.

Workspaces

1. @spudnik/components

• A collection of reusable React components used across various Spudnik projects.

2. @spudnik/contexts

• Contains React context providers and hooks that manage shared state and behaviors within the application.

3. @spudnik/hooks

• A set of custom React hooks that encapsulate reusable logic.

4. @spudnik/utils

• A collection of utility functions and helpers that provide common functionalities across the other packages.

Tools and Configuration

Lerna

Lerna is used to manage the monorepo, handle package versions, and run scripts across the different workspaces. Below are some useful scripts:

• Build All Packages:

npm run build:all # build all packages in monorepo

• Build Specific Package

npm run build:components # replace 'components' with the desired package name to build

• Deploy Specific Package

npm run deploy:components # replace 'components' with the desired package name to deploy

Rollup

Each package is bundled identically using Rollup with the following configuration:

• Input: src/index.ts
• Output:
  • CommonJS: dist/index.js
  • ES Module: dist/index.esm.js
• Plugins:
  • rollup-plugin-terser: Minifies the output files.
  • rollup-plugin-peer-deps-external: Excludes peer dependencies from the bundle.
  • @rollup/plugin-node-resolve: Locates modules using the Node resolution algorithm.
  • @rollup/plugin-commonjs: Converts CommonJS modules to ES6, so they can be included in a Rollup bundle.
  • rollup-plugin-typescript2: Integrates TypeScript into the Rollup build.
  • rollup-plugin-postcss: Processes CSS with PostCSS.

Typescript

All packages are written in TypeScript. The root tsconfig.json provides a base configuration that is extended by each workspace. Type declarations are generated and stored in the dist directory during the build process.

Manual Deployment

To deploy a package, manually increment the version number in the package.json file of the workspace you want to deploy. Then run the appropriate deploy script:

npm run deploy:components # replace with applicable package name

Managing Dependencies

Dependencies

• This should rarely (if ever) be used. More often peerDependencies or devDependencies should be used. The option should be often left up to the project manager as to what

Peer Dependencies

• peerDependencies will not be included in the final bundle of the javascript. When the library is installed, it will check to see if a compatible version of peer dependencies are installed and install them if not.
• For this reason, this works well for dependencies such as other libraries, React, Next, and other large ones that should not be included inside of the bundle

Dev Dependencies

• Root package.json
  • Dependencies included here should be applicable to config, deployment, or are required for all packages.
  • Including a dependency here will bundle it into the output javascript which will cause the size of all packages to grow.
• Project package.json
  • This should be used for a dependency that is intended to be built into the library. By putting it here, it will cause the dependency to be built into the bundled code so that it is not required to be installed in the library that it is used in
  • A large library such as React or another Component library should be in peerDependencies instead.