Upgrade Yarn to v4; migrate from Lerna to Yarn Workspaces

.github/CONTRIBUTING.md

@@ -18,7 +18,7 @@ Working on your first Pull Request? You can learn how from this _free_ series, [
 
 ## Set up your development environment
 
-react-pdf is a monorepo. That means the whole solution is broken into small pieces, or packages, each of which solves a specific problem. No need to worry much about it, since [Lerna](https://lerna.js.org/) does most of the work for us. If you are not familiarized with it it's always helpful to have an overall idea of how it works.
+react-pdf is a monorepo. That means the whole solution is broken into small pieces, or packages, each of which solves a specific problem. No need to worry much about it, since [Yarn](https://yarnpkg.com/features/workspaces) does most of the work for us. If you are not familiarized with it it's always helpful to have an overall idea of how it works.
 
 Here I present a quick guide about how to setup your development environment exactly as I have it when working on react-pdf. Please bare in mind small differences can be present depending on which environment you are running this library (on the web, node, electron, etc).
 
@@ -31,7 +31,7 @@ git clone https://github.com/diegomura/react-pdf.git
 cd react-pdf
 ```
 
-### 2. Install Node 18
+### 2. Install Node 18 or later
 
 If you have `nvm` installed all you have to do is
 
@@ -42,28 +42,35 @@ nvm use
 
 Other versions should work although I can't guarantee it
 
-### 3. Install dependencies and boostrap monorepo
+### 3. Enable Corepack
 
-We need to download this project dependencies in order to make it work. Because this is a monorepo, we also have to bind all the internal packages together so they are aware of each other. Both things can be done by running:
+Corepack is a "package manager manager". It's a tool built-in in Node.js that enables you to use Yarn (and other package managers) without having to install it globally. Once it's enabled, it'll transparently download required binaries and proceed to run your commands. To enable it, just run:
 
 ```sh
-yarn install
-yarn bootstrap
+corepack enable
 ```
 
-### 4. Build & watch codebase
+### 4. Install dependencies and boostrap monorepo
+
+We need to download this project dependencies in order to make it work.
+
+```sh
+yarn
+```
+
+### 5. Build & watch codebase
 
 In order to to quickly iterate in your development process, react-pdf has a watch script that builds all the required modules and waits for changes to happen to re-compile the affected packages. This is handy because enables you to have this process running on the background and just focus on coding what you want. All you have to do is:
 
 ```sh
 yarn watch
 ```
 
-### 5. Setup testing project
+### 6. Setup testing project
 
 Now that we have react-pdf built and running, we need to setup a testing project to use as a development target. This might not be the more straighforward way to set up your dev environment but enables to use the lib as an "external" agent, just as final users will do. It's also extensible for testing in different environmens, whether it is a web or node project, or electron or native app. I usually have a web project (just a plain [create react app](https://reactjs.org/docs/create-a-new-react-app.html) project, and a Node one.
 
-### 6. Link your react-pdf build to your testing project
+### 7. Link your react-pdf build to your testing project
 
 Now all we have to do is make our testing project point to our react-pdf watch instance so we can apply changes to it and see them working. For that I use `yarn link`.
 

.github/workflows/main.yml

@@ -57,7 +57,7 @@ jobs:
         env:
           cache-name: yarn-cache
         with:
-          path: ~/.cache/yarn
+          path: ~/.yarn/berry/cache
           key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-${{ env.cache-name }}-
@@ -67,8 +67,11 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install dependencies and build
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Check size
         run: yarn --cwd packages/renderer run size
@@ -91,7 +94,7 @@ jobs:
         env:
           cache-name: yarn-cache
         with:
-          path: ~/.cache/yarn
+          path: ~/.yarn/berry/cache
           key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-${{ env.cache-name }}-
@@ -101,8 +104,11 @@ jobs:
         with:
           node-version: ${{ matrix.node_version }}
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install dependencies and build
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Run tests
         run: REACT_VERSION=${{ matrix.react_version }} yarn test

.github/workflows/release.yml

@@ -33,7 +33,7 @@ jobs:
         env:
           cache-name: yarn-cache
         with:
-          path: ~/.cache/yarn
+          path: ~/.yarn/berry/cache
           key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-${{ env.cache-name }}-
@@ -43,8 +43,11 @@ jobs:
         with:
           node-version: ${{ matrix.node_version }}
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install dependencies and build
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Run tests
         run: REACT_VERSION=${{ matrix.react_version }} yarn test
@@ -67,7 +70,7 @@ jobs:
         env:
           cache-name: yarn-cache
         with:
-          path: ~/.cache/yarn
+          path: ~/.yarn/berry/cache
           key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-${{ env.cache-name }}-
@@ -77,8 +80,11 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install dependencies and build
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Create Release PR or Publish to npm
         uses: changesets/action@v1

.gitignore

@@ -1,9 +1,25 @@
-node_modules
-*.log
-dist
-coverage
-.jshintrc
-.idea
+# OS
 .DS_Store
+
+# Cache
 .cache
+.idea
+.jshintrc
 .parcel-cache
+.
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Project-generated directories and files
+coverage
+dist
+node_modules
+
+# Logs
+*.log

.yarnrc.yml

@@ -0,0 +1,6 @@
+logFilters:
+  # We're installing multiple versions of React, and we don't want to see the warnings about it.
+  - text: "react is listed by your project with version 18.2.0, which doesn't satisfy what react-dom (p1eae0) and other dependencies request (but they have non-overlapping ranges!)."
+    level: discard
+
+nodeLinker: node-modules

package.json

@@ -12,14 +12,13 @@
     "e2e/*"
   ],
   "scripts": {
-    "prepare": "husky",
-    "build": "lerna run build",
-    "watch": "lerna run watch --parallel",
-    "bootstrap": "lerna bootstrap",
-    "prepublish": "lerna run build",
+    "postinstall": "husky && yarn build",
+    "build": "yarn workspaces foreach --all --topological run build",
+    "watch": "yarn workspaces foreach --all --parallel run watch",
+    "prepack": "yarn build",
     "lint": "eslint packages",
     "test": "vitest",
-    "dev": "lerna run dev --scope @react-pdf/examples",
+    "dev": "yarn workspace @react-pdf/examples run dev",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "changeset publish"
@@ -59,7 +58,6 @@
     "husky": "^9.0.0",
     "jest-image-snapshot": "^6.1.0",
     "jsdom": "^23.2.0",
-    "lerna": "^8.0.2",
     "lint-staged": "^10.5.4",
     "pdfjs-dist": "3.2.146",
     "prettier": "^3.2.0",
@@ -75,6 +73,7 @@
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-local-resolve": "^1.0.7",
     "rollup-plugin-polyfill-node": "^0.13.0",
+    "vite": "^5.0.0",
     "vitest": "^1.2.0",
     "vitest-fetch-mock": "^0.2.2"
   },
@@ -89,5 +88,5 @@
     "url": "https://opencollective.com/react-pdf",
     "logo": "https://opencollective.com/opencollective/logo.txt"
   },
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "yarn@4.1.0"
 }

packages/examples/package.json

@@ -10,7 +10,7 @@
     "dev": "vite ./src --open"
   },
   "dependencies": {
-    "@react-pdf/renderer": "^3.3.8"
+    "@react-pdf/renderer": "workspace:^"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",

packages/font/package.json

@@ -14,8 +14,8 @@
   "main": "./lib/index.cjs",
   "module": "./lib/index.js",
   "browser": {
-    "./lib/index.js": "./lib/index.browser.js",
-    "./lib/index.cjs": "./lib/index.browser.cjs"
+    "./lib/index.cjs": "./lib/index.browser.cjs",
+    "./lib/index.js": "./lib/index.browser.js"
   },
   "exports": {
     ".": {
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/types": "^2.4.1",
+    "@react-pdf/types": "workspace:^",
     "cross-fetch": "^3.1.5",
     "fontkit": "^2.0.2",
     "is-url": "^1.2.4"

packages/image/package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/png-js": "^2.3.1",
+    "@react-pdf/png-js": "workspace:^",
     "cross-fetch": "^3.1.5",
     "jay-peg": "^1.0.0"
   },

packages/layout/package.json

@@ -27,13 +27,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/fns": "2.2.1",
-    "@react-pdf/image": "^2.3.4",
-    "@react-pdf/pdfkit": "^3.1.6",
-    "@react-pdf/primitives": "^3.1.1",
-    "@react-pdf/stylesheet": "^4.2.4",
-    "@react-pdf/textkit": "^4.4.1",
-    "@react-pdf/types": "^2.4.1",
+    "@react-pdf/fns": "workspace:^",
+    "@react-pdf/image": "workspace:^",
+    "@react-pdf/pdfkit": "workspace:^",
+    "@react-pdf/primitives": "workspace:^",
+    "@react-pdf/stylesheet": "workspace:^",
+    "@react-pdf/textkit": "workspace:^",
+    "@react-pdf/types": "workspace:^",
     "cross-fetch": "^3.1.5",
     "emoji-regex": "^10.3.0",
     "queue": "^6.0.1",

packages/pdfkit/package.json

@@ -7,8 +7,8 @@
   "main": "./lib/pdfkit.cjs",
   "module": "./lib/pdfkit.js",
   "browser": {
-    "./lib/pdfkit.js": "./lib/pdfkit.browser.js",
-    "./lib/pdfkit.cjs": "./lib/pdfkit.browser.cjs"
+    "./lib/pdfkit.cjs": "./lib/pdfkit.browser.cjs",
+    "./lib/pdfkit.js": "./lib/pdfkit.browser.js"
   },
   "exports": {
     ".": {
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/png-js": "^2.3.1",
+    "@react-pdf/png-js": "workspace:^",
     "browserify-zlib": "^0.2.0",
     "crypto-js": "^4.2.0",
     "fontkit": "^2.0.2",

packages/png-js/package.json

@@ -7,8 +7,8 @@
   "main": "./lib/png-js.cjs",
   "module": "./lib/png-js.js",
   "browser": {
-    "./lib/png-js.js": "./lib/png-js.browser.js",
-    "./lib/png-js.cjs": "./lib/png-js.browser.cjs"
+    "./lib/png-js.cjs": "./lib/png-js.browser.cjs",
+    "./lib/png-js.js": "./lib/png-js.browser.js"
   },
   "exports": {
     ".": {

packages/render/package.json

@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/fns": "2.2.1",
-    "@react-pdf/primitives": "^3.1.1",
-    "@react-pdf/textkit": "^4.4.1",
-    "@react-pdf/types": "^2.4.1",
+    "@react-pdf/fns": "workspace:^",
+    "@react-pdf/primitives": "workspace:^",
+    "@react-pdf/textkit": "workspace:^",
+    "@react-pdf/types": "workspace:^",
     "abs-svg-path": "^0.1.1",
     "color-string": "^1.9.1",
     "normalize-svg-path": "^1.1.0",

packages/renderer/package.json

@@ -9,8 +9,8 @@
   "main": "./lib/react-pdf.cjs",
   "module": "./lib/react-pdf.js",
   "browser": {
-    "./lib/react-pdf.js": "./lib/react-pdf.browser.js",
-    "./lib/react-pdf.cjs": "./lib/react-pdf.browser.cjs"
+    "./lib/react-pdf.cjs": "./lib/react-pdf.browser.cjs",
+    "./lib/react-pdf.js": "./lib/react-pdf.browser.js"
   },
   "exports": {
     ".": {
@@ -33,12 +33,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/font": "^2.4.4",
-    "@react-pdf/layout": "^3.11.2",
-    "@react-pdf/pdfkit": "^3.1.6",
-    "@react-pdf/primitives": "^3.1.1",
-    "@react-pdf/render": "^3.4.3",
-    "@react-pdf/types": "^2.4.1",
+    "@react-pdf/font": "workspace:^",
+    "@react-pdf/layout": "workspace:^",
+    "@react-pdf/pdfkit": "workspace:^",
+    "@react-pdf/primitives": "workspace:^",
+    "@react-pdf/render": "workspace:^",
+    "@react-pdf/types": "workspace:^",
     "events": "^3.3.0",
     "object-assign": "^4.1.1",
     "prop-types": "^15.6.2",

packages/stylesheet/package.json

@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/fns": "2.2.1",
-    "@react-pdf/types": "^2.4.1",
+    "@react-pdf/fns": "workspace:^",
+    "@react-pdf/types": "workspace:^",
     "color-string": "^1.9.1",
     "hsl-to-hex": "^1.0.0",
     "media-engine": "^1.0.3",

packages/svgkit/.gitignore

@@ -3,5 +3,4 @@ node_modules/
 dist
 *.pdf
 *.ttf
-lerna-debug.log
 lib

packages/svgkit/package.json

@@ -23,6 +23,6 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@react-pdf/pdfkit": "^3.1.6"
+    "@react-pdf/pdfkit": "workspace:^"
   }
 }