maint(bundle): switch package manager from yarn to pnpm

petschki · thet · commit a56f5b3ab03f · 2026-03-18T16:21:33.000+01:00
diff --git a/.github/workflows/coredev-robot-tests.yml b/.github/workflows/coredev-robot-tests.yml
@@ -27,7 +27,7 @@ jobs:
           comment-id: ${{ github.event.comment.id }}
           reactions: '+1'
           token: ${{ secrets.GITHUB_TOKEN }}
-          
+
       - name: Info
         run: |
           echo "Workflow triggered with comment '/run-coredev-robottests' "
@@ -52,14 +52,17 @@ jobs:
           path: tests
 
       # ── 2. Node.js setup ──────────────────────────────────────────────────────
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: "22"
-          cache: yarn
+          cache: pnpm
 
-      - name: Install yarn dependencies
-        run: yarn install
+      - name: Install pnpm dependencies
+        run: pnpm install
 
       # ── 3. Python / make install ─────────────────────────────────────────────
       - name: Set up Python 3.12
@@ -89,7 +92,7 @@ jobs:
 
       # ── 2b. Build mockup bundle into tests/src/plone.staticresources ─────────
       - name: Build mockup for tests (webpack)
-        run: yarn build:webpack:tests
+        run: pnpm build:webpack:tests
 
       # ── 4. Install Playwright / rfbrowser ────────────────────────────────────
       - name: install rfbrowser
@@ -110,7 +113,7 @@ jobs:
           with open('mxcheckouts.ini', 'w') as f:
               cfg.write(f)
           "
-          
+
       - name: Run Coredev robot tests
         working-directory: tests
         run: ROBOTSUITE_PREFIX=ONLYROBOT TEST_ARGS="--all -t ONLYROBOT" make test
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -13,10 +13,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - uses: pnpm/action-setup@v4
     - uses: actions/setup-node@v4
       with:
         node-version: "22"
-        cache: "yarn"
+        cache: pnpm
     - name: Build docs
       run: |
         make docs
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -4,11 +4,9 @@ on:
   push:
     branches:
     - master
-    - 5.0.x
   pull_request:
     branches:
     - master
-    - 5.0.x
 
 jobs:
   build:
@@ -18,10 +16,11 @@ jobs:
       NODE_OPTIONS: "--max_old_space_size=8192"
     steps:
     - uses: actions/checkout@v4
+    - uses: pnpm/action-setup@v4
     - uses: actions/setup-node@v4
       with:
         node-version: "22"
-        cache: 'yarn'
-    - run: yarn install
+        cache: pnpm
+    - run: pnpm install
     - run: make eslint
-    - run: yarn test
+    - run: pnpm test
diff --git a/.gitignore b/.gitignore
@@ -8,13 +8,10 @@
 /src/pat/modal/modal.css
 /src/pat/relateditems/relateditems.css
 /src/pat/tinymce/tinymce.css
-/stamp-npm
-/yarn-error.log
 devsrc/*
 dist/
 docs/_site
 docs/mockup/patterns
 node_modules/
-stamp-yarn
 stats.json
 /_site/*
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+public-hoist-pattern[]=*
diff --git a/Makefile b/Makefile
@@ -18,35 +18,48 @@
 -include .env
 export
 
-YARN   ?= npx yarn
+PNPM = pnpm
 
 
-yarn.lock install:
-	$(YARN) install
+pnpm-lock.yaml install:
+	npm i -g corepack@latest && corepack enable
+	$(PNPM) install
+
+
+.PHONY: check
+check: install eslint
+	$(PNPM) run test
 
 
 .PHONY:
 watch-plone:
-	$(YARN) run watch:webpack:plone
+	$(PNPM) run watch:webpack:plone
 
 
 .PHONY:
 bundle-plone:
-	$(YARN) run build:webpack:plone
+	$(PNPM) run build:webpack:plone
 
 
 .PHONY: bundle
-bundle: install
-	$(YARN) run build:webpack
+bundle: clean-dist bundle-pre install
+	$(PNPM) run build:webpack
+
+
+.PHONY: serve
+serve: install
+	$(PNPM) run start
+
 
 .PHONY: docs
 docs: install
-	$(YARN) build:webpack:docs
-	$(YARN) build:docs
+	$(PNPM) build:webpack:docs
+	$(PNPM) build:docs
+
 
 # Unlink any linked dependencies before building a bundle.
 bundle-pre:
-	-$(YARN) unlink @patternslib/dev
-	-$(YARN) unlink @patternslib/pat-code-editor
-	-$(YARN) unlink @patternslib/patternslib
-	$(YARN) install --force
+	-$(PNPM) unlink @patternslib/dev
+	-$(PNPM) unlink @patternslib/pat-code-editor
+	-$(PNPM) unlink @patternslib/patternslib
+	$(PNPM) install --force
diff --git a/README.md b/README.md
@@ -31,9 +31,9 @@ There are several options to integrate Mockup.
 
     This starts up the webpack build process in watch mode.
     Any JavaScript changes are immediately compiled.
-    For some changes - like for adding new packages via `yarn add` and then using it you might need to restart.
+    For some changes - like for adding new packages via `pnpm add` and then using it you might need to restart.
     The command also spins up a development server for our `11ty` based documentation and demo pages.
-    If you don't need the docs running, you can run `yarn start:webpack` or `npm run start:webpack` instead, so that only the webpack devserver is running.
+    If you don't need the docs running, you can run `pnpm start:webpack` or `npm run start:webpack` instead, so that only the webpack devserver is running.
 
 - Go to `http://localhost:8000`:
   On this port our demo and documentation pages are served.
@@ -124,7 +124,7 @@ If you want to develop in Plone, you have two options:
 1. Run `make watch-plone`. You need buildout to have plone.staticresources checked out next to Mockup.
    Mockup will compile it's bundle directly into the `++plone++static` directory of plone.staticresources and update it when you change something in Mockup.
 
-2. Run `npx yarn start:webpack`, go to the resource registry ( http://localhost:8080/Plone/@@resourceregistry-controlpanel ) and add the URL `http://localhost:8000/bundle.min.js` to the JavaScript input field of the plone bundle instead of the other URL `++plone++static/bundle-plone/bundle.min.js`.
+2. Run `npx pnpm start:webpack`, go to the resource registry ( http://localhost:8080/Plone/@@resourceregistry-controlpanel ) and add the URL `http://localhost:8000/bundle.min.js` to the JavaScript input field of the plone bundle instead of the other URL `++plone++static/bundle-plone/bundle.min.js`.
 
 For more commands inspect Makefile and the script part of the package.json.
 
@@ -166,23 +166,23 @@ You can put some `debugger;` statements to the code to break the execution and i
 
 ### Developing external Packages
 
-If you want to work on ony external package like Patternslib or any external Mockup pattern you can do so by linking those packages into the node_modules folder via `yarn link`.
+If you want to work on ony external package like Patternslib or any external Mockup pattern you can do so by linking those packages into the node_modules folder via `pnpm link`.
 
 1. Check out the external package you want to develop on.
 
-2. Make sure you have installed the dependencies in the development package (e.g. by running `yarn install`). (TODO: verify that!)
+2. Make sure you have installed the dependencies in the development package (e.g. by running `pnpm install`). (TODO: verify that!)
 
-3. Run `yarn link` in the external development package to register it with yarn.
+3. Run `pnpm link` in the external development package to register it with pnpm.
 
-4. Run `yarn link "PACKAGE-NAME"` in mockup to create the node_modules symlink.
+4. Run `pnpm link "PACKAGE-NAME"` in mockup to create the node_modules symlink.
 
-After developing you might want to run `yarn unlink "PACKAGE-NAME"` to unlink the development package.
+After developing you might want to run `pnpm unlink "PACKAGE-NAME"` to unlink the development package.
 
 For more information see:
 
-- https://classic.yarnpkg.com/en/docs/cli/link/
-- https://classic.yarnpkg.com/en/docs/cli/unlink
-- https://docs.npmjs.com/cli/v7/commands/npm-link
+- https://pnpm.io/cli/link
+- https://pnpm.io/cli/unlink
+- https://docs.npmjs.com/cli/v11/commands/npm-link
 
 **Please note:**: Make sure to unlink and reinstall development pacakges before building a production bundle.
 In doubt, remove the node_modules directory and re-install.
@@ -195,7 +195,7 @@ https://formidable.com/blog/2018/finding-webpack-duplicates-with-inspectpack-plu
 Build the stats.json file:
 
 ```
-npx yarn build:stats
+npx pnpm build:stats
 ```
 
 Check dependency tree and why which package was included:
@@ -219,7 +219,7 @@ To update the translation file, the following needs to be done:
 1. Extract the messages from this package:
 
 ```
-npx yarn run i18n
+npx pnpm run i18n
 ```
 
 Or just `npm run i18n`...
@@ -290,7 +290,7 @@ Without grouping: `TYPE: MESSAGE`
 
 If the commit message doesn't follow this convention, then it won't be included in the changelog.
 To bypass the pre-commit hook, use the git `-n` switch.
-Example: `git commit yarn.lock -m "yarn install." -n`.
+Example: `git commit pnpm-lock.yaml -m "pnpm install." -n`.
 
 If you are working on a component like the structure pattern (pat-structure), use `pat structure` as a group.
 
@@ -318,11 +318,11 @@ git commit -am "maint: Remove unnecessary file from root directory."
 
 **Note**
 
-Please keep commits on the `yarn.lock` file or any other auto-generated code seperate.
+Please keep commits on the `pnpm-lock.yaml` file or any other auto-generated code seperate.
 
-Just commit them seperately with `git commit yarn.lock -m "yarn install" -n`.
+Just commit them seperately with `git commit pnpm-lock.yaml -m "pnpm install" -n`.
 
 Keeping them seperate reduces the effort when merging or rebasing branches where a merge conflict can easily happen.
-In such cases you can just withdraw your changes on the `yarn.lock` file, or remove those commits and reinstall with `yarn install` at the end of a successful merge or rebase.
+In such cases you can just withdraw your changes on the `pnpm-lock.yaml` file, or remove those commits and reinstall with `pnpm install` at the end of a successful merge or rebase.
 
 ---
diff --git a/jest.config.js b/jest.config.js
@@ -4,7 +4,8 @@ const config = require("@patternslib/dev/jest.config.js");
 // config.setupFilesAfterEnv.push("./node_modules/@testing-library/jest-dom/extend-expect");
 config.setupFilesAfterEnv.push(path.resolve(__dirname, "./src/setup-tests.js"));
 config.transformIgnorePatterns = [
-    "/node_modules/(?!@patternslib/)(?!@plone/)(?!preact/)(?!screenfull/)(?!sinon/)(?!bootstrap/)(?!datatable/)(?!svelte/)(?!esm-env/).+\\.[t|j]sx?$",
+    "/node_modules/(?!.pnpm/)(?!@patternslib/)(?!@plone/)(?!preact/)(?!screenfull/)(?!sinon/)(?!bootstrap/)(?!datatable/)(?!svelte/)(?!esm-env/).+\\.[t|j]sx?$",
+    "/node_modules/.pnpm/(?!@patternslib)(?!@plone)(?!preact)(?!screenfull)(?!sinon)(?!bootstrap)(?!datatable)(?!svelte)(?!esm-env)",
 ];
 
 // add svelte-jester
diff --git a/package.json b/package.json
@@ -6,8 +6,10 @@
     "main": "./src/patterns.js",
     "dependenciesComments": {
         "backbone": "Dependency moved to devDependencies since it requests oudated versions Underscore. Not fixing this dependencies in other bundles would make use paginator those outdated dependencies and result in a broken structure pattern.",
-        "backbone.paginator": "Dependency moved to devDependencies since it requests oudated versions Underscore. Not fixing this dependencies in other bundles would make use paginator those outdated dependencies and result in a broken structure pattern."
+        "backbone.paginator": "Dependency moved to devDependencies since it requests oudated versions Underscore. Not fixing this dependencies in other bundles would make use paginator those outdated dependencies and result in a broken structure pattern.",
+        "select2": "Use the commit hash for checkout since pnpm has problems with the annotated commit #3.5.4"
     },
+    "packageManager": "pnpm@10.32.1",
     "dependencies": {
         "@11ty/eleventy-upgrade-help": "3.0.2",
         "@patternslib/pat-code-editor": "4.0.1",
@@ -38,7 +40,7 @@
         "jquery-form": "4.3.0",
         "jquery.browser": "0.1.0",
         "js-cookie": "^3.0.5",
-        "select2": "git+https://github.com/ivaynberg/select2.git#3.5.4",
+        "select2": "git+https://github.com/ivaynberg/select2.git#95a977f674b6938af55ec5f28b7772df93786c5c",
         "sortablejs": "^1.15.6",
         "tinymce": "8.3.2",
         "tinymce-i18n": "26.2.16",
@@ -120,5 +122,9 @@
     "publishConfig": {
         "access": "public"
     },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "pnpm": {
+        "overrides": {
+            "slick-carousel": "git+https://github.com/kenwheeler/slick.git#d0716f19aa730006ee80ab026625fb1107816a97"
+        }
+    }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+shamefully-hoist=true`
	`2`	`+public-hoist-pattern[]=*`