yalc-watch-improved v2.0.0
Yalc-watch improved
Based on johot's yalc-watch, but with a few improvements:
- Package is now published with
LFline endings instead ofCRLFto improve compatibility with Mac + Linux when using yarn. - Cleaned up + updated dependencies => less vulnerabilities.
- all config settings are now optional and have default values
| setting | default |
|---|---|
buildWatchCommand | yarn watch |
extensions | js,jsx,ts,tsx,json |
watchFolder | build |
Why
Yalc is an awesome tool for developing and testing your packages / libraries locally without publishing to npm.
The only thing yalc is currently missing is a way of watching the build output of a library and then automatically pushing that build into the projects you want to test it with.
This can be really helpful when building something like a design system or component library where you want instant feedback in a consuming app.
What
This very simple package will allow you to monitor an output folder (using nodemon under the hood) and will automatically call yalc push when a change is detected.
The yalc push command will automaticaly update all projects where you have previously installed your package locally using the yalc add your-package-name command.
For projects such as next.js or create-react-app this will automatically trigger a live reload of your project.
How
In your library / package install yalc-watch as a dev dependency:
npm i yalc-watch-improved --save-devor
yarn add -D yalc-watch-improvedAdd the following confic JSON to your package.json and tweak to your liking:
...
"yalcWatch": {
"watchFolder": "dist",
"buildWatchCommand": "tsc --watch",
"extensions": "js,png,svg,gif,jpeg,css",
}
...Still in your package.json add the following to the scripts section:
"scripts": {
...
"yalc-watch": "yalc-watch",
...
}Now simply run the command:
npm run yalc-watchyalc-watch will start running the configured buildWatchCommand and look for changes in your configured watchFolder. When a change is detected the yalc push command will be executed updating all projects that added your package using yalc add your-package-name.
If you haven't already done so. You need to install your package in the consuming app using the
yalc add your-package-nameforyalc pushto have any effect.
Enjoy!