Upgrading my monorepo workflow

Challenge

I really like the idea of the monorepo because I want to be able to rapidly develop new projects without all the setup time. I also want to be able to build new features to my own specific type of components and be able to use it quickly in my other projects without so much boiler plate transition. I am also lazy and I hate when I have to do multiple

But I had a couple challenges.

Improving the Svelte package workflow

The problem here is because the build process of svelte-package is to create a new folder called package in the project folder that can be used for publishing. The result is a package.json in the root of the svelte project folder and another in the package folder. I originally thought of looking into the svelte-package process to see if I need to make some modification to allow for a slight name to change to the package.json name property.

But that felt like way too much work.

The simplest way I found was to just update the pnpm-workspace.yaml configuration. First lets exclude the Svelte project for the package. For this example, my package is kuix .

packages:
- '!packages/kuix'

This will ignore that root package.json in the project folder. Next I explicitly include the package folder from the project folder

packages: 
- '!packages/kuix'
- 'packages/kuix/package'

After making this change, when doing pnpm install @kaashin/kuix , it will automatically manage the workspace link the dependencies and now the import paths from the package will match the paths that will be in the actual published npm package.

Fixing the deployment inconvenience

So the problem here is that sometimes I make changes to the package and I may not have run the build script for the package, which will mean the app won’t see the reflected updates when it builds when I push a new update to the repo (because my apps build on push updates).

All I needed was to add a git hook.

To do this I installed the package husky .

Then I added a new script called postcommit in the root package.json .

"postcommit": "turbo run package"

Note that my script is using turborepo which I’ll cover in more detail in another post some day once I figure out more how to use it in my flow. But for now I’m using it to just run the package script on all projects that have a script called package .

So, I make sure my kuix project, and any other Svelte package project has a script called package to run the svelte-package command

"scripts": {
	"package": "svelte-kit sync && svelte-package",
	...
}

Now finally, in the .husky folder, I add a new file called post-commit and add the following

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run postcommit
git add .
git commit -m "Auto package Svelte package projects"

What this will do is run the postcommit script after every time I add a new commit to the repo. If there is a change to the compiled package , it will have automatically commit an update for those changes.

Now, when I git push , I’m fairly confident that when Vercel builds my app and its doing a local reference to the workspace package folder, it has the latest build of the package.