chore(dev): add opt-in render cause diagnostics

scripts/react/README.md

@@ -6,6 +6,13 @@ copies of the latest 1,000 standard Profiler callback records; `.clear()` drops
 them. Records contain timing and commit metadata, never business props. Normal
 development and production builds do not load the collector.
 
+`pnpm dev:wdyr` instead initializes why-did-you-render before loading the app
+and uses its development JSX runtime. It reports avoidable renders for
+`ProxyItem`, `ProxyItemMini` and `ProxyTunCard` in the console. The modes are
+mutually exclusive; `CVR_REACT_DIAGNOSTICS` accepts only `profiler` or `wdyr` on
+the development server. Each mode uses its own Vite cache. Production builds
+ignore this variable and include neither diagnostic entry nor runtime.
+
 Install the browser explicitly with `pnpm exec playwright install chromium`.
 Then run `pnpm react:ab --base <ref> --head <ref>`. Both Git trees run against
 one installed dependency set and the same fixed DNS, delay-hook and proxy-tab

scripts/react/vite.mts

@@ -10,10 +10,39 @@ export function reactDiagnostics(mode: string | undefined): Plugin[] {
       enforce: 'pre',
       apply: 'serve',
       config() {
-        if (mode !== 'profiler')
+        if (mode !== 'profiler' && mode !== 'wdyr')
           throw new Error(`Unknown CVR_REACT_DIAGNOSTICS mode: ${mode}`)
+        return {
+          cacheDir: path.resolve('node_modules/.vite', mode),
+          ...(mode === 'wdyr'
+            ? {
+                oxc: {
+                  jsx: {
+                    importSource: '@welldone-software/why-did-you-render',
+                  },
+                },
+                optimizeDeps: {
+                  include: [
+                    '@welldone-software/why-did-you-render',
+                    '@welldone-software/why-did-you-render/jsx-dev-runtime',
+                  ],
+                },
+              }
+            : {}),
+        }
+      },
+      transformIndexHtml(html) {
+        if (mode !== 'wdyr') return html
+        const entry = 'src="./main.tsx"'
+        if (!html.includes(entry))
+          throw new Error('WDYR entry no longer matches index.html')
+        return html.replace(
+          entry,
+          `src="/@fs/${normalizePath(path.resolve('scripts/react/wdyr.ts'))}"`,
+        )
       },
       transform(code, id) {
+        if (mode !== 'profiler') return
         if (id !== normalizePath(path.resolve('src/main.tsx'))) return
         const open = '<React.StrictMode>'
         const close = '</React.StrictMode>'

scripts/react/wdyr.ts

@@ -0,0 +1,10 @@
+import whyDidYouRender from '@welldone-software/why-did-you-render'
+import React from 'react'
+
+whyDidYouRender(React, {
+  include: [/^(ProxyItem|ProxyItemMini|ProxyTunCard)$/],
+  trackAllPureComponents: false,
+  trackHooks: true,
+})
+
+await import('../../src/main')