Skip to content
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
15 changes: 9 additions & 6 deletions .github/workflows/coredev-robot-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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' "
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
3 changes: 2 additions & 1 deletion .github/workflows/docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 4 additions & 5 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ on:
push:
branches:
- master
- 5.0.x
pull_request:
branches:
- master
- 5.0.x

jobs:
build:
Expand All @@ -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
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/*
2 changes: 2 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
shamefully-hoist=true
public-hoist-pattern[]=*
39 changes: 26 additions & 13 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,48 @@
-include .env
export

YARN ?= npx yarn
PNPM = pnpm
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should use npx pnpm here.... Because that way it's sure it's installed, as everone has a Node environment available.

Copy link
Copy Markdown
Member

@davisagli davisagli Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A common way to handle this in the Node ecosystem is with corepack: https://pnpm.io/installation#using-corepack

npx pnpm would not guarantee that you are using a particular version of pnpm.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I switched barceloneta to pnpm a while ago and used corepack there. See https://github.com/plone/plonetheme.barceloneta/blob/master/HOWTO_DEVELOP.md ... this is also used in the plone developer docs https://6.docs.plone.org/install/create-project-cookieplone.html#node-js ... I'd recommend to use corepack here too and update the README accordingly.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, didn't know corepack. Nice. Then no problem!

I have ./node_modules/.bin (and other paths) in my PATH, so I don't activate environments, normally.



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
34 changes: 17 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.
Expand All @@ -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:
Expand All @@ -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`...
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

---
3 changes: 2 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 9 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
}
}
Loading
Loading