From 6d73a1418fd66d1d2ad8220c9b2caa75386fc427 Mon Sep 17 00:00:00 2001
From: Stefan Dirix <sdirix@eclipsesource.com>
Date: Thu, 12 Mar 2026 11:07:22 +0000
Subject: [PATCH] docs: add UI testing guide to CLAUDE.md, align dev scripts

- Add documentation for running example apps and combined examples-app
  for UI testing with Playwright MCP
- Rename "serve" to "dev" in vue and vue-vanilla packages for
  consistency across all renderer sets
- Update README.md to reflect the vue-vanilla script rename
- Add .pnpm-store and .playwright-mcp to .gitignore
---
 .gitignore                        |  4 ++-
 CLAUDE.md                         | 52 ++++++++++++++++++++++++++++++-
 README.md                         |  2 +-
 packages/vue-vanilla/package.json |  2 +-
 packages/vue/package.json         |  2 +-
 5 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 658b9f0e0e..6671705a77 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,6 @@ stats.html
 .coveralls.yml
 packages/examples-react/build
 
-**/.angular/cache
\ No newline at end of file
+**/.angular/cache
+.pnpm-store
+.playwright-mcp
diff --git a/CLAUDE.md b/CLAUDE.md
index ac282ada93..609c4adf2a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -38,4 +38,54 @@ pnpm lerna run test --scope=@jsonforms/core
 
 ### Build Order Dependencies
 
-`core` → `react`/`angular`/`vue` → renderer packages
+`core` → `react`/`angular`/`vue` → renderer packages.
+Lerna automatically respects the build order dependencies.
+
+## Running Example Applications for UI Testing
+
+Each renderer set has its own example application with a dev server. Before starting any dev server, you **must** first install dependencies and build all packages:
+
+```bash
+pnpm install                  # Install dependencies (run from repo root)
+pnpm run build                # Build all packages (required before dev servers work)
+```
+
+All renderer sets share the same set of examples from `packages/examples/`.
+
+### Individual Dev Servers
+
+Start dev servers from the **repo root** using `cd` into the package directory.
+Each renderer set example application can be started by executing `pnpm run dev`.
+
+### Combined Examples App (All Renderer Sets)
+
+The combined examples app aggregates all 5 renderer sets into a single static app at `packages/examples-app/dist/`.
+It has an index page with links to each renderer set's sub-app.
+
+**Full build (first time or after `clean`):**
+
+```bash
+pnpm install                          # Install dependencies
+pnpm run build                        # Build all packages (required first)
+pnpm run build:examples-app           # Build all example bundles + aggregate into dist
+```
+
+**Rebuild after code changes to a specific renderer set:**
+
+```bash
+# 1. Rebuild the changed package (and any dependencies that changed)
+pnpm lerna run build --scope=@jsonforms/material-renderers
+
+# 2. Rebuild only that renderer set's example bundle
+pnpm lerna run build:examples-app --scope=@jsonforms/material-renderers
+
+# 3. Re-aggregate into the combined app
+node packages/examples-app/prepare-examples-app.js
+```
+
+**Serving the combined app:**
+
+```bash
+# No built-in serve script exists - use any static file server:
+python3 -m http.server 9090 --directory packages/examples-app/dist
+```
diff --git a/README.md b/README.md
index 31741d36bf..2917ddb303 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ In this case, you can try to clean the repository with `git clean -dfx`. Beware
 - Run React Vanilla examples: `cd packages/vanilla-renderers && pnpm run dev`
 - Run React Material examples: `cd packages/material-renderers && pnpm run dev`
 - Run Angular Material examples: `cd packages/angular-material && pnpm run dev`
-- Run Vue Vanilla dev setup: `cd packages/vue-vanilla && pnpm run serve`
+- Run Vue Vanilla dev setup: `cd packages/vue-vanilla && pnpm run dev`
 - Run Vue Vuetify dev setup: `cd packages/vue-vuetify && pnpm run dev`
 
 ### Dependency & Release management
diff --git a/packages/vue-vanilla/package.json b/packages/vue-vanilla/package.json
index 1c51f084fc..57882f7b6b 100644
--- a/packages/vue-vanilla/package.json
+++ b/packages/vue-vanilla/package.json
@@ -43,7 +43,7 @@
     "vanilla.css"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve dev/serve.ts",
+    "dev": "vue-cli-service serve dev/serve.ts",
     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "build:examples-app": "rollup -c rollup.example.config.js",
     "clean": "rimraf lib example/dist",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index ad259fcf17..e3b1d62e8b 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -39,7 +39,7 @@
     "src/*"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve dev/serve.ts",
+    "dev": "vue-cli-service serve dev/serve.ts",
     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "clean": "rimraf lib",
     "lint": "eslint .",