fix(dev): split DemoSection.astro per-framework to avoid plugin-react v6 $RefreshSig$ regression#169
Merged
Merged
Conversation
… v6 $RefreshSig$ regression Astro 7 alpha upgrade (165e32b) bumped @vitejs/plugin-react from v5 (Babel-based) to v6 (Oxc-based). v6's default include regex `/\.[tj]sx?$/` matches Vue SFC `<script setup lang="ts">` virtual ids (e.g. `Foo.vue?vue&type=script&setup=true&lang.ts`) once `makeIdFiltersToMatchWithQuery` rewrites the trailing `$` to allow queries. Vite then injects React Fast Refresh signature calls (`$RefreshSig$`) into the transformed Vue script blocks. The SSR module-runner evaluates those blocks during dev, hits an undefined `$RefreshSig$`, and returns HTTP 500. CI did not detect this because `playwright.config.ts:43` runs E2E against `npm run preview` where Fast Refresh is disabled; only `npm run test:e2e` on a developer machine hits the dev pipeline. Structural workaround: - Split `DemoSection.astro` into per-framework files `DemoSection.{react,vue,svelte,web-component}.astro` so each page evaluates only the framework it actually renders. - Update `pages/{,ja/}patterns/[pattern]/[framework]/index.astro` to prefer the new framework-specific file via four lazy `import.meta.glob` calls, falling back to the legacy unified `DemoSection.astro` for unaffected patterns. - Migrate the 9 patterns that triggered the regression: alert, checkbox, combobox, disclosure, menu-button, menubar, slider, slider-multithumb, toolbar. - Leave the other 23 patterns on the legacy file; they work fine via the dispatcher's fallback path. After this change: - 119/128 pattern×framework pages return 200 in dev (up from 95/128). - The remaining 9 BAD pages are the Vue page of each migrated pattern. Their Vue runtime must evaluate the broken Vue SFC, so structural change cannot help. Tracked in a separate issue for upstream fix. Verified: - `npm run lint`: 0 errors. - `npm run build`: success (553 pages). - Dev probe across all 128 pattern×framework combinations. CLAUDE.md updated to describe the transitional state where some patterns use the framework-specific files and others remain on legacy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3 tasks
Owner
Author
|
Tracking remaining 9 Vue pages bug in #170 (upstream regression待ち) |
Deploying apg-patterns-examples with
|
| Latest commit: |
112851a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7c03f539.apg-patterns-examples.pages.dev |
| Branch Preview URL: | https://verify-option1-impl.apg-patterns-examples.pages.dev |
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
1 participant
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
@vitejs/plugin-reactが v5 (Babel) → v6 (Oxc) になった結果、Vue SFC<script setup lang=\"ts\">の仮想 ID にも React Fast Refresh の\$RefreshSig\$が誤注入され、dev 限定で 33/128 pattern×framework ページが HTTP 500 を返していた regression を修正DemoSection.astroを framework 別 4 ファイル (DemoSection.{react,vue,svelte,web-component}.astro) に分割。pages 側 dispatcher は新形式を優先し、未移行 pattern は legacy ファイルにフォールバックなぜ CI が見逃したか
playwright.config.ts:43のコメント通り CI はnpm run previewで動くため Fast Refresh は走らない。npm run test:e2e(local) で初めて再現する症状で、165e32b 以降 local E2E を回した形跡がなく見逃されていた。検証
npm run dev全 128 ページ probenpm run lintnpm run build\$RefreshSig\$出現 0 件 → regression の起点を確定残課題
このパッチで 9 ページ (移行 pattern の Vue ページ全て) は依然 500。Vue ページ自身が Vue SFC を評価する必要があり、構造変更では救えない。別 issue で追跡 (本 PR にリンク予定)。
Test plan
npm run devで/patterns/alert/react/を含む移行 pattern の React/Svelte/Astro ページが 200 を返す/patterns/button/react/等、未移行 pattern が legacy fallback で動くnpm run build && npm run previewが成功🤖 Generated with Claude Code