fix(app-router-playground): clean warnings and stabilize checks

[haddoumounir]

Summary

• fix async loading pages to run independent awaits in parallel
• replace unstable list keys and stale setState updates in playground components
• fix SVG JSX property casing for OG route output
• reduce LightSvg component size by extracting static markup constant
• remove rolldown client build warnings by stripping unsupported rollup keys in playground Vite config
• fix additional playground lint/type issues found during validation

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vinext@694

commit: ef77913

[haddoumounir]

/bigbonk review

[southpolesteve]

/bigbonk review

[ask-bonk]

Overall a solid cleanup PR. The SVG casing fixes, setCount updater pattern, and Promise.all parallelization are all correct improvements. A few comments below, mostly around the getGridColumnKey approach and the rolldown workaround.

Good changes:

• stroke-opacity -> strokeOpacity fixes real JSX warnings
• setCount(count + 1) -> setCount(prev => prev + 1) is the correct React pattern
• Promise.all for independent awaits in loading pages is a nice improvement
• Removing the redundant spread ([...arr.map()] -> arr.map()) in breadcrumbs
• Removing unused Link import from product-list
• Using _background prefix for intentionally unused destructured variable
• className prop being threaded through via clsx in Mdx

[ask-bonk]

Review posted. Here's a summary of the feedback:

Positive:

• SVG stroke-opacity to strokeOpacity casing fixes are correct
• setCount(prev => prev + 1) updater pattern is the right React idiom
• Promise.all for independent awaits in loading pages improves parallelism
• Minor cleanups (redundant spread, unused import, _background prefix, className prop threading) are all good

Key concerns:

1. getGridColumnKey in codehike.tsx — Over-engineered and fragile. It inspects React element internals (child.key) which aren't guaranteed across versions. For static MDX grid columns that never reorder, the original key={index} was correct.

2. Rolldown workaround in vite.config.ts — Stripping experimentalMinChunkSize and treeshake.preset should be fixed in vinext core (packages/vinext/src/index.ts), not in every example/user app. Also noted that mutating the frozen configResolved object is technically unsupported.

3. LIGHT_SVG module-level constant — Reusing the same React element object across concurrent renders is likely safe with satori but worth documenting. Also noted DarkSvg wasn't given the same treatment (asymmetry).

4. Skeleton key prefixes — String-prefixed keys like product-skeleton-${slot} are equivalent to plain numeric keys for static lists that never reorder. The original key={i} was fine.

5. Local Fetcher interface — Should check if @cloudflare/workers-types already provides this; if so, the local redefinition is unnecessary.

github run