TVO Component Library

Run application: npm run dev

Rebuilding the library

OLD WAY Run npm run rebuild from root. build is the default command for Next.js, hence the use of rebuild

Rebuild works by leveraging webpack.config.js, which leverages a different sequence of build commands to produce the components-library in /dist.

NEW WAY The build process is likely NOT necessary. At the moment I am passing raw JSX in the components folder within the package. No webpack transpiling and bundling is required for this. Of course, this means we don't get a minified package. But the advantages are that the receiving Next.js app's build environment parses the file and builds it, meaning the components can leverage the native environment of the app they will be built on.

The package.json configuration "files": [] dictates what files will end up in the build. Note that the /dist folder is always included, be it specified or not.

Publishing the library

Be sure to increment the version value in package.json: "version": "0.1.17". Run npm publish to publish to NPM. We will be changing this soon!

Using the library

Consuming applications will have to run the npm i {package-name} to install the package. To get the latest, consuming applications should run npm i {package-name}@latest. The consuming app's package.json should display the latest version for the package under dependencies.

Troubleshooting

If the package does not increment, the consuming app might need to run npm cache clean --force, although this should be avoided when possible. If issues remain, uninstall and reinstall the package.

Husky

Official docs

Husky is completely optional. It can hook into git, to rum commands before certain actions like commits and pushes.

From root, run npx husky init

In ./.husky, copy files pre-commit and pre-push, and remove the ".example" from both of them. Feel free to modify these files to your heart's content, as they're not committed to version control.

If at any point Husky is getting in the way, simply add .off to your pre-commit and pre-push files, or comment out their contents, or delete the files entirely

(I have Husky setup to use lint-staged, so only staged files will be passed through Prettier and Next's linter)

Webpack + Babel vs SWC

SWC is now the default compiler and bundler for Next.js. However, introducing Webpack, like this project does, makes Webpack the default compiler and bundler.