[Playground] Rebuild as a Reprise + Symfony UX showcase

Author: Kocal

docs/superpowers/plans/2026-08-02-playground-ux-showcase.md

@@ -0,0 +1,117 @@
+# Playground UX Showcase Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans to implement this plan phase-by-phase. Steps use checkbox (`- [ ]`) syntax for tracking. This targets the demo app under `playground/`, not the shipped library — there is no TDD/unit-test loop; each phase is verified by running the real Vite/Rsbuild build + dev server and opening the pages.
+
+**Goal:** Turn `playground/` from a minimal two-entry app into a full showcase that (1) exercises the Reprise/bundler features end-to-end and (2) installs the curated Symfony UX set, each with an interactive demo card reachable from a dashboard (one page per demo). Vite **and** Rsbuild must both stay green.
+
+**Architecture:** A data-driven dashboard (`DashboardController` + a PHP demo registry) renders a card grid in two sections — "Reprise features" and "Symfony UX". Each card links to its own route: `FeatureController` for the Reprise-feature pages, `DemoController` for the UX demos. Site-wide assets load through the `app` entry (`reprise_entry_*('app')` in `base.html.twig`); the `/admin` page loads a second `admin` entry to prove multiple entries. UX controllers register through Reprise's Stimulus virtual module (`controllers.json` + local `assets/controllers/`); React/Vue components register via `import.meta.glob(..., { eager: true })` in `app.ts`.
+
+## Corrected assumptions (validated with the user)
+
+- **Package manager: pnpm.** `playground` is a member of the root `pnpm-workspace.yaml`; there is no local lockfile and deps use the `link:` protocol. AGENTS.md's `npm -C playground …` is stale. Use `pnpm -C playground run …` and `pnpm install` at the repo root.
+- **Flex is active** (`symfony/flex` + `extra.symfony.allow-contrib: true`). `composer require symfony/ux-*` auto-applies recipes: registers bundles in `config/bundles.php`, drops `config/packages/*` config, and adds entries to `assets/controllers.json`. Do **not** edit `bundles.php` by hand.
+- **But `synchronize_package_json: false`** (in `composer.json` `extra.symfony/flex`) — Flex will **not** touch `package.json`. JS deps are added manually to `playground/package.json`, then `pnpm install`.
+- **ux-translator dumps JS translations automatically on `cache:clear`** (via the `auto-scripts` block). No manual `ux:translator:dump` step.
+- **UX 3.4 is released.** Switch `@symfony/ux-react`/`@symfony/ux-vue` from the local `link:../../ux-3712/...` to published `^3.4.0` (npm) and drop the ux-3712 dependency.
+
+## Curated UX set (15 demos, one route each)
+
+| Package | npm dep(s) | Demo | Notes |
+|---|---|---|---|
+| ux-react | `@symfony/ux-react@^3.4`, react/react-dom (present) | React counter/form in Twig | published 3.4, `react_component()` |
+| ux-vue | `@symfony/ux-vue@^3.4`, vue (present) | Vue counter/form in Twig | published 3.4, `vue_component()` |
+| ux-chartjs | `@symfony/ux-chartjs`, `chart.js` | chart + "regenerate data" button | `ChartBuilderInterface` PHP |
+| ux-autocomplete | `@symfony/ux-autocomplete`, `tom-select` | searchable select | autoimport CSS |
+| ux-dropzone | `@symfony/ux-dropzone` | drag-drop + preview | `DropzoneType` form |
+| ux-cropperjs | `@symfony/ux-cropperjs`, `cropperjs` | upload + crop + preview | `CropperType` form |
+| ux-notify | `@symfony/ux-notify` | **degraded**: button + "requires Mercure" note | no hub |
+| ux-toggle-password | `@symfony/ux-toggle-password` | show/hide password | pure Stimulus |
+| ux-lazy-image | `@symfony/ux-lazy-image` | blur -> sharp on scroll | Twig fn + Stimulus |
+| ux-map (Leaflet) | present | map + markers | already wired |
+| ux-icons | — (PHP-only) | icon gallery (several sets) | no controllers.json entry |
+| ux-translator | `@symfony/ux-translator` | language switch affecting JS strings | import from dumped module |
+| ux-live-component | `@symfony/ux-live-component` | live search / server-rendered counter | `AsLiveComponent` |
+| ux-twig-component | — (PHP-only) | reusable card/alert (props + slots) | `AsTwigComponent` |
+| ux-turbo | `@symfony/ux-turbo`, `@hotwired/turbo` | Drive nav + lazy turbo-frame | Drive/Frame only, no Mercure |
+
+## Reprise feature showcases (6 pages, `/feature/{slug}`)
+
+1. **Multiple entries** — `/admin` renders `reprise_entry_*('admin')`; everything else uses `app`.
+2. **Code-splitting** — `app.ts` `import('./demos/…')` populates `entrypoints.json.dynamic`; plus one local controller marked `/* stimulusFetch: 'lazy' */`.
+3. **SCSS + TypeScript** — entries are `.ts`, styles `.scss` (bundler-native; Reprise reimplements neither).
+4. **Copied files gallery + CDN** — render copied images via `asset()`/manifest (keep the 2 `copy` rules incl. `pattern`); document/test an absolute CDN `publicPath` via env.
+5. **Build-contract viewer** — `/feature/build-contract` reads `public/build/{entrypoints,manifest}.json` and pretty-prints them (isProd, devServer, integrity…); reflects dev vs build live.
+6. **SRI** — already enabled (`integrity`); surfaced through the viewer + rendered tag attributes.
+
+## File structure
+
+- Modify: `playground/vite.config.ts`, `playground/rsbuild.config.ts` — `.ts` entries `app`/`admin`, SCSS (Vite `sass-embedded`, Rsbuild `@rsbuild/plugin-sass`), env-driven `publicPath` + explicit `manifestKeyPrefix`.
+- Modify: `playground/composer.json` (via `composer require`), `playground/package.json` (manual JS deps).
+- Rename/convert: `playground/assets/{app,admin}.js` -> `.ts`; `playground/assets/styles/{app,admin}.css` -> `.scss`.
+- Create: `playground/assets/demos/*.ts` (dynamically-imported modules), extra `playground/assets/controllers/*` (incl. one lazy), UX React/Vue demo components under `assets/react/controllers/`, `assets/vue/controllers/`.
+- Modify: `playground/assets/controllers.json` (recipes + fetch tweaks).
+- Create: `playground/src/Controller/{DashboardController,DemoController,FeatureController}.php`, `playground/src/Components/*` (Live + Twig), `playground/src/Form/{DropzoneDemoType,CropperDemoType}.php`, a `DemoRegistry` (PHP array/service).
+- Create/modify: `playground/templates/{base,dashboard}.html.twig`, `playground/templates/demo/*.html.twig`, `playground/templates/feature/*.html.twig`, `playground/templates/components/*`.
+- Reduce: `playground/assets/to-copy/` to ~8 images (keep the `me_5x` pattern subset so the `pattern` copy rule still matches).
+
+---
+
+## Phase 0 — Dependencies & bundler config
+
+- [ ] **Composer (Flex auto-registers):**
+  ```bash
+  composer -d playground require \
+    symfony/ux-chartjs symfony/ux-autocomplete symfony/ux-dropzone \
+    symfony/ux-cropperjs symfony/ux-toggle-password symfony/ux-lazy-image \
+    symfony/ux-icons symfony/ux-translator symfony/ux-live-component \
+    symfony/ux-twig-component symfony/ux-turbo symfony/ux-notify
+  ```
+  Accept recipe contrib prompts. Verify `config/bundles.php`, `config/packages/*`, and `assets/controllers.json` were updated.
+- [ ] **package.json (manual — Flex sync is off):** in `playground/package.json`, replace the two `link:../../ux-3712/...` entries with `"@symfony/ux-react": "^3.4.0"`, `"@symfony/ux-vue": "^3.4.0"`; add deps `@symfony/ux-chartjs, chart.js, @symfony/ux-autocomplete, tom-select, @symfony/ux-dropzone, @symfony/ux-cropperjs, cropperjs, @symfony/ux-toggle-password, @symfony/ux-lazy-image, @symfony/ux-translator, @symfony/ux-live-component, @symfony/ux-turbo, @hotwired/turbo, @symfony/ux-notify`; add devDeps `sass-embedded, @rsbuild/plugin-sass`. Then `pnpm install` at repo root.
+- [ ] **Bundler configs:** in both `vite.config.ts` and `rsbuild.config.ts`: entries `{ app: './assets/app.ts', admin: './assets/admin.ts' }`; keep `stimulus`, `integrity`, the 2 `copy` rules; add SCSS (Vite: `sass-embedded` is auto-detected, no plugin; Rsbuild: add `pluginSass()`); set `const publicPath = process.env.CDN_BASE ?? '/build/'` and pass `publicPath` + `manifestKeyPrefix: 'build'` (explicit prefix is required once `publicPath` can be an absolute CDN URL).
+- [ ] **Verify:** `pnpm -C playground run vite:build` and `pnpm -C playground run rsbuild:build` both succeed; `public/build/{entrypoints,manifest}.json` still valid.
+
+## Phase 1 — App shell & dashboard
+
+- [ ] Convert `assets/{app,admin}.js` -> `.ts`; `styles/{app,admin}.css` -> `.scss` (update imports). Keep the existing `registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.{jsx,tsx}', { eager: true }))` + Vue equivalent + `startStimulusApp()` in `app.ts`.
+- [ ] `base.html.twig`: nav (link to dashboard), `reprise_entry_link_tags('app')` / `reprise_entry_script_tags('app')` only — **remove** the `encore_entry_*` lines.
+- [ ] `DemoRegistry` (PHP array): each item `{ slug, title, description, section: 'feature'|'ux', route }`. `DashboardController` (`GET /`) passes it to `dashboard.html.twig`, rendered as a two-section card grid.
+- [ ] Base SCSS for cards/nav/layout in `styles/app.scss`.
+- [ ] **Verify:** `pnpm -C playground run vite:dev`, open `/`, dashboard renders both sections, no console errors.
+
+## Phase 2 — Reprise feature pages
+
+- [ ] `FeatureController` with one action per feature route + templates under `templates/feature/`.
+- [ ] **Multiple entries:** `/admin` renders `reprise_entry_*('admin')`; `admin.ts`/`admin.scss` distinct content.
+- [ ] **Code-splitting:** add `assets/demos/heavy.ts` (some non-trivial module), `import('./demos/heavy.ts')` in `app.ts` guarded by a DOM marker present on the code-splitting page; add one local controller `assets/controllers/lazy_hello_controller.ts` with `/* stimulusFetch: 'lazy' */`.
+- [ ] **SCSS+TS:** feature page documents that `.ts`/`.scss` work with zero Reprise config.
+- [ ] **Copied files gallery + CDN:** reduce `to-copy/` to ~8 images; gallery page renders them via `{{ asset('build/to-copy/…') }}`; document the CDN build (`CDN_BASE=https://cdn.example.com/build/ pnpm -C playground run vite:build`) and show the resulting absolute manifest URLs.
+- [ ] **Build-contract viewer:** `/feature/build-contract` reads `public/build/{entrypoints,manifest}.json` and pretty-prints them in `<pre>` with short explanations.
+- [ ] **Verify:** each feature page opens (dev); `dynamic` array populated after a build; CDN build yields absolute URLs in `manifest.json`.
+
+## Phase 3 — UX demo pages
+
+Implement the 15 cards from the table. Group by need:
+
+- [ ] **Pure Twig/Stimulus** (chartjs, autocomplete, toggle-password, lazy-image, icons, twig-component): template per demo under `templates/demo/`, `DemoController` action each. chartjs uses `ChartBuilderInterface`; icons uses `ux_icon()` across a few sets; twig-component builds one reusable component in `src/Components/`.
+- [ ] **Forms** (dropzone, cropperjs): `src/Form/*Type`, controller action rendering the form, template.
+- [ ] **Framework components** (react, vue): demo components under `assets/react/controllers/`, `assets/vue/controllers/`; pages use `react_component()` / `vue_component()`.
+- [ ] **Server-reactive** (live-component): `src/Components/` `AsLiveComponent` (e.g. live search or counter) + template.
+- [ ] **Turbo** (Drive + Frame): a page with a `turbo-frame` whose `src` hits a `DemoController` fragment action.
+- [ ] **notify (degraded):** page with a button + a callout explaining it needs a Mercure hub (not provisioned).
+- [ ] **controllers.json:** confirm recipe entries exist; keep react/vue `eager`, map `lazy`; set heavy/rarely-used controllers to `lazy` where sensible.
+- [ ] **Verify:** open each demo page in `vite:dev`; interact (chart regenerates, autocomplete filters, crop works, live-component updates, turbo-frame lazy-loads); no console errors.
+
+## Phase 4 — Wiring & parity
+
+- [ ] Confirm React/Vue registration + `startStimulusApp()` run once, site-wide, from `app.ts`.
+- [ ] `cache:clear` so ux-translator dumps JS translations; import the dumped module in the translator demo.
+- [ ] Mirror any bundler-specific need in **both** `vite.config.ts` and `rsbuild.config.ts` (project symmetry rule).
+
+## Final verification
+
+- [ ] **Vite:** `pnpm -C playground run vite:build` then `vite:dev`; dashboard + all pages load; `entrypoints.json` has `app`+`admin`, populated `dynamic`, `integrity` present; copied files (incl. `pattern` subset) keyed in `manifest.json`.
+- [ ] **Rsbuild:** `pnpm -C playground run rsbuild:build` then `rsbuild:dev`; same pages load; outputs consistent with Vite.
+- [ ] **Screenshots (chrome-devtools MCP):** dashboard + ~4 representative demos (react, chartjs, live-component, turbo-frame) + the build-contract page, under both dev and build.
+- [ ] **CDN:** a `CDN_BASE=…` build yields absolute URLs in `manifest.json`/`entrypoints.json`.
+- [ ] Console clean across the visited pages on both bundlers.

playground/assets/admin.js

@@ -0,0 +1,3 @@
+import './styles/admin.scss'
+
+console.info('[admin] This log comes from the separate "admin" Reprise entrypoint.')

playground/assets/admin.ts

@@ -0,0 +1,18 @@
+import './styles/app.css'
+import { startStimulusApp } from '@symfony/reprise/stimulus'
+import { registerReactControllerComponents } from '@symfony/ux-react'
+import { registerVueControllerComponents } from '@symfony/ux-vue'
+
+registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.{jsx,tsx}', { eager: true }))
+registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue', { eager: true }))
+
+startStimulusApp()
+
+// Code-splitting showcase: the confetti module is pulled in only on click, so it ships as its own
+// chunk (listed in entrypoints.json -> dynamic) instead of the main entry. Delegated on `document` so it
+// keeps working across Turbo navigations — the entry script runs once, not on every page.
+document.addEventListener('click', (event) => {
+    if (event.target instanceof Element && event.target.closest('[data-confetti]')) {
+        void import('./demos/confetti').then((m) => m.celebrate())
+    }
+})

playground/assets/app.js

@@ -17,6 +17,60 @@
                 "enabled": true,
                 "fetch": "eager"
             }
+        },
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-turbo/dist/mercure_stream_source_element.js": true
+                }
+            }
+        },
+        "@symfony/ux-chartjs": {
+            "chart": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
+        "@symfony/ux-autocomplete": {
+            "autocomplete": {
+                "enabled": true,
+                "fetch": "lazy",
+                "autoimport": {
+                    "tom-select/dist/css/tom-select.default.css": true,
+                    "tom-select/dist/css/tom-select.bootstrap4.css": false,
+                    "tom-select/dist/css/tom-select.bootstrap5.css": false
+                }
+            }
+        },
+        "@symfony/ux-cropperjs": {
+            "cropper": {
+                "enabled": true,
+                "fetch": "lazy",
+                "autoimport": {
+                    "cropperjs/dist/cropper.min.css": true,
+                    "@symfony/ux-cropperjs/dist/style.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-dropzone": {
+            "dropzone": {
+                "enabled": true,
+                "fetch": "lazy",
+                "autoimport": {
+                    "@symfony/ux-dropzone/dist/style.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-live-component": {
+            "live": {
+                "enabled": true,
+                "fetch": "lazy",
+                "autoimport": {
+                    "@symfony/ux-live-component/dist/live.min.css": true
+                }
+            }
         }
     },
     "entrypoints": []

playground/assets/app.ts

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus'
+import { trans } from '../translator.js'
+
+export default class extends Controller {
+    static targets = ['greeting', 'apples']
+
+    locale = 'en'
+    count = 3
+
+    connect() {
+        this.render()
+    }
+
+    english() {
+        this.locale = 'en'
+        this.render()
+    }
+
+    french() {
+        this.locale = 'fr'
+        this.render()
+    }
+
+    more() {
+        this.count += 1
+        this.render()
+    }
+
+    fewer() {
+        this.count = Math.max(0, this.count - 1)
+        this.render()
+    }
+
+    render() {
+        this.greetingTarget.textContent = trans('greeting', { '%name%': 'Reprise' }, 'messages', this.locale)
+        this.applesTarget.textContent = trans('apples', { count: this.count }, 'messages', this.locale)
+    }
+}

playground/assets/calc.js

@@ -0,0 +1,19 @@
+const COLORS = ['#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#a855f7']
+
+export function celebrate(): void {
+    for (let i = 0; i < 90; i++) {
+        const piece = document.createElement('div')
+        piece.style.cssText = `position:fixed;top:-12px;left:${(i * 53) % 100}vw;width:9px;height:9px;`
+            + `background:${COLORS[i % COLORS.length]};z-index:9999;pointer-events:none;border-radius:2px`
+        document.body.appendChild(piece)
+        piece
+            .animate(
+                [
+                    { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
+                    { transform: `translateY(100vh) rotate(${540 + i * 7}deg)`, opacity: 0.15 },
+                ],
+                { duration: 1600 + (i % 12) * 120, easing: 'cubic-bezier(0.2, 0.6, 0.4, 1)' },
+            )
+            .addEventListener('finish', () => piece.remove())
+    }
+}

playground/assets/controllers.json

@@ -0,0 +1,14 @@
+const linearize = (channel: number): number =>
+    channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
+
+function luminance(hex: string): number {
+    const [r, g, b] = [1, 3, 5].map((i) => linearize(parseInt(hex.slice(i, i + 2), 16) / 255))
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/** WCAG 2.x contrast ratio (1–21) between two `#rrggbb` colors. */
+export function contrastRatio(a: string, b: string): number {
+    const la = luminance(a)
+    const lb = luminance(b)
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05)
+}