Skip to content
This repository was archived by the owner on Jun 28, 2026. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 31 additions & 19 deletions DEVELOPMENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,47 +27,54 @@ This will alter the bundler to only emit non-minified esm modules. The aliasing

> Note: The build will be finished when the terminal displays: `[20xx-xx-xx 00:00:00] waiting for changes...`.

You will now `cd` into the `primereact/dist` directory and run:
This will create a local copy of the package that is used instead of the registry version.
Unlike `npm link`, `yalc` does not use symlinks, which avoids common module resolution issues.

```shell
~/primereact/dist/ $ npm link
```
### Open a new terminal and navigate to the `primereact/dist/` directory

This will create a symlink in your global npm scope so that other local packages will rely on this version of primereact when built. You can verify that the package is linked by running this from the `primereact` directory.

```shell
~/primereact/ $ npm ls -g --depth=0 --link=true
Run yalc publish

/opt/homebrew/lib
└── primereact@XX.X.XX -> ./../../../Users/${user}/primereact/dist # <-- this must be in the dist/ dir !!!
```shell
~/primereact/ $ cd dist
~/primereact/dist/ $ npx yalc publish
```

> [!WARNING]
> Reminder! The XX.X.XX version must be a [valid semantic version](https://docs.npmjs.com/about-semantic-versioning) that you are using in your local project

### Now change your directory to your local project you are developing on!

```shell
~/primereact/dist/ $ cd ~/my-cool-project
~/my-cool-project/ $
```

The goal now is to link your primereact dependency to the symlink that we configured earlier:
The goal now is to link your primereact dependency to the yalc package that we configured earlier:

```shell
~/my-cool-project/ $ npm link primereact
~/my-cool-project/ $ npx yalc add primereact
```

As long at the dependencies version that you symlinked satisfies the version that is specified in `my-cool-project/package.json` then the link should have worked.

You can validate that by running:

```shell
~/my-cool-project/ $ npm ls --link=true
~/my-cool-project/ $ npx yalc check

Yalc dependencies found: [ 'primereact' ]
```

After doing your changes in the `primereact/` directory, you can publish the changes to your local project by running:

```shell
~/primereact/dist/ $ npx yalc push
```

my-cool-project@0.0.0 /Users/${user}/my-cool-project
└── primereact@npm:dist@xx.x.xx -> ./../../primereact/dist # <-- this must be in the dist/ dir !!!
## Live Development
If you want to push your changes automatically to your local project, you can use the following:

```shell
~/primereact $ npm run dev:link -- -- --watch.onEnd="cd dist && npx yalc push"
```
This command will watch for changes in the `primereact/` directory and automatically push updates to your local project whenever you save a file. (note the double -- before `watch.onEnd`)

### Congratulations!

Expand All @@ -78,5 +85,10 @@ You can now live develop in the `primereact/` directory and your changes should
Once done, you can clean up with:

```shell
~/primereact/ $ npm unlink
~/my-cool-project/ $ yalc remove primereact
~/my-cool-project/ $ rm -rf yalc.lock .yalc
~/my-cool-project/ $ npm install primereact@latest
```

> Note: `yalc` stores the published package in `~/.yalc/primereact` and uses file references in your project.
> This avoids typical pitfalls of `npm link`, such as duplicated React versions or broken module scopes.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"build:lib": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package",
"build:lib:windows": "set \"NODE_ENV=production\" && set \"INPUT_DIR=components/lib/\" && set \"OUTPUT_DIR=dist/\" && npm run build:package",
"build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:api",
"dev:link": "NPM_LINK=true NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package:dev",
"dev:link:windows": "set \"NPM_LINK=true\" && set \"NODE_ENV=production\" && set \"INPUT_DIR=components/lib/\" && set \"OUTPUT_DIR=dist/\" && npm run build:package:dev",
"dev:link": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package:dev",
"dev:link:windows": "set \"NODE_ENV=production\" && set \"INPUT_DIR=components/lib/\" && set \"OUTPUT_DIR=dist/\" && npm run build:package:dev",
"build:package:dev": "npm run build:check && gulp build-resources && npm run build:api && rollup -c --watch",
"build:api": "npm run apiwebtypes && npm run apidoc",
"build:check": "npm run lint && npm run format:check && npm run type:check && npm run security:check",
Expand Down
Loading