feat(sandbox): perf stress tests, shared sidebar, tailwind benchmark#5719
Merged
Conversation
…runner Adds Tailwind CSS v4 as a benchmark competitor using @tailwindcss/webpack. Removes the puppeteer-based headless runner (benchmarks are run via browser now). Alphabetizes peerDependencies and devDependencies in styled-components package.json.
Replace per-page back links and home cards with a persistent sidebar. Theme toggle moved from fixed-position button to sidebar footer via ThemeToggleContext (useCallback + useMemo for stable references). Delete dead home-content.tsx and back-link.tsx. Fix root .gitignore lib -> /lib to stop matching app/lib/ in sandbox.
Five scenarios exercising styled-components at scale: - Data Grid: 1000 cells with dynamic status/priority props - Dashboard: deep tree with attrs, stat cards, table, activity list - Form: 30 inputs with 3-level attrs chains, validate/reset cycles - List: 50 inbox items, shuffle forces full unmount/remount - Types: 110 styled definitions stressing TS type checker Shared utilities: seeded PRNG (mulberry32) for deterministic SSR/client data, render timer hook with auto-run (50x on page visit), sticky timer display with median/min/max stats and tabular-nums layout.
|
There was a problem hiding this comment.
Pull request overview
This PR expands the sandbox and benchmarks to support repeatable performance stress testing scenarios, introduces a shared sidebar-based navigation layout (with theme toggle moved into it), and adds a Tailwind v4 benchmark implementation.
Changes:
- Add multiple sandbox
/perf/*stress-test pages plus shared timing/auto-run utilities and deterministic data generation. - Replace per-page navigation elements with a shared sidebar + theme-toggle context, and simplify the home page.
- Add Tailwind v4 as a benchmark implementation and wire it into the webpack build (removing the Puppeteer headless runner).
Reviewed changes
Copilot reviewed 44 out of 46 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds Tailwind + loader deps |
| packages/styled-components/package.json | Minor dev/peer dep ordering |
| packages/sandbox/app/rsc/page.tsx | Removes BackLink; formatting tweaks |
| packages/sandbox/app/rsc/layout.tsx | JSX layout formatting |
| packages/sandbox/app/perf/types/page.tsx | New TS type stress page |
| packages/sandbox/app/perf/list/page.tsx | New list unmount/remount test |
| packages/sandbox/app/perf/lib/use-render-timer.ts | New render timer + auto-run hooks |
| packages/sandbox/app/perf/lib/timer-display.tsx | New sticky timer UI |
| packages/sandbox/app/perf/lib/data-generators.ts | Seeded PRNG + test data |
| packages/sandbox/app/perf/form/page.tsx | New attrs-heavy form test |
| packages/sandbox/app/perf/data-grid/page.tsx | New 1000-cell grid test |
| packages/sandbox/app/perf/dashboard/page.tsx | New deep-tree dashboard test |
| packages/sandbox/app/page.tsx | New simpler home content |
| packages/sandbox/app/lib/theme.ts | Theme contract via createTheme |
| packages/sandbox/app/lib/test-themes.ts | Adds light/dark theme presets |
| packages/sandbox/app/lib/registry.tsx | New Next.js styled-components registry |
| packages/sandbox/app/lib/dark-theme-script.ts | Generates CSS var overrides |
| packages/sandbox/app/layout.tsx | Adds shared sidebar + content shell |
| packages/sandbox/app/global-style-test/toggle-client.tsx | Formatting changes |
| packages/sandbox/app/global-style-test/page.tsx | Formatting changes |
| packages/sandbox/app/global-style-test/page-b/page.tsx | Formatting changes |
| packages/sandbox/app/global-style-test/page-a/page.tsx | Formatting changes |
| packages/sandbox/app/global-style-test/nav-client.tsx | Formatting changes |
| packages/sandbox/app/global-style-test/layout.tsx | Removes BackLink; formatting |
| packages/sandbox/app/global-style-test/global-style-checks.tsx | Formatting changes |
| packages/sandbox/app/global-style-test/autopilot-client.tsx | Formatting changes |
| packages/sandbox/app/components/theme-provider.tsx | Theme toggle via context |
| packages/sandbox/app/components/test-summary.tsx | Formatting changes |
| packages/sandbox/app/components/sidebar.tsx | New shared sidebar nav |
| packages/sandbox/app/components/home-content.tsx | Removed (replaced by sidebar UX) |
| packages/sandbox/app/components/back-link.tsx | Removed (replaced by sidebar UX) |
| packages/sandbox/app/components/auto-test.tsx | Formatting changes |
| packages/sandbox/app/client-example/testing-harness.tsx | Formatting changes |
| packages/sandbox/app/client-example/page.tsx | Removes BackLink usage |
| packages/benchmarks/webpack.config.js | Adds Tailwind webpack loader |
| packages/benchmarks/src/implementations/tailwind/View.js | Tailwind View primitive |
| packages/benchmarks/src/implementations/tailwind/styles.css | Tailwind CSS import |
| packages/benchmarks/src/implementations/tailwind/Provider.js | Tailwind provider passthrough |
| packages/benchmarks/src/implementations/tailwind/index.js | Tailwind impl entrypoint |
| packages/benchmarks/src/implementations/tailwind/Dot.js | Tailwind Dot component |
| packages/benchmarks/src/implementations/tailwind/Box.js | Tailwind Box component |
| packages/benchmarks/src/impl.js | Registers Tailwind in impl map |
| packages/benchmarks/run-headless.js | Removed Puppeteer runner |
| packages/benchmarks/package.json | Adds Tailwind deps; CSS sideEffects |
| AGENTS.md | Updates TS perf guidance |
| .gitignore | Narrows ignore from lib to /lib |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
margin: -var(...) is invalid CSS — var() returns a token sequence that can't take unary minus. Tailwind v4 oxide requires Node >=20.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary