Skip to content

Replace define:vars with data attributes in redirect scripts#164

Merged
masuP9 merged 4 commits intomainfrom
claude/fix-alert-redirect-6Yg8J
Mar 16, 2026
Merged

Replace define:vars with data attributes in redirect scripts#164
masuP9 merged 4 commits intomainfrom
claude/fix-alert-redirect-6Yg8J

Conversation

@masuP9
Copy link
Copy Markdown
Owner

@masuP9 masuP9 commented Mar 16, 2026

Pull Request

概要

Astroのdefine:varsディレクティブをデータ属性に置き換えることで、インライン スクリプトの変数バインディング方式を改善しました。これにより、スクリプトの実行コンテキストがより明確になり、保守性が向上します。

変更内容

  • リファクタリング

具体的な変更

  • src/pages/patterns/[pattern]/index.astro(日本語版)とsrc/pages/patterns/[pattern]/index.astro(英語版)のインラインスクリプトを更新
  • define:vars={{ pattern, defaultFramework, validFrameworks, basePath }}をデータ属性に置き換え
    • data-pattern={pattern}
    • data-default-framework={defaultFramework}
    • data-valid-frameworks={JSON.stringify(validFrameworks)}
    • data-base-path={basePath}
  • スクリプト内でdocument.currentScriptを使用してデータ属性から値を取得
  • JSON形式のデータはJSON.parse()で復元

APGパターン準拠チェック

  • 破壊的変更なし

テスト

  • 手動テスト完了

リダイレクト機能の動作確認:

  • パターンページへのアクセス時に正しいフレームワークにリダイレクトされることを確認
  • ローカルストレージに保存されたフレームワーク選択が正しく反映されることを確認
  • 無効なフレームワークの場合、デフォルトフレームワークにリダイレクトされることを確認

破壊的変更

  • 破壊的変更なし

その他

この変更は機能的には同等ですが、define:varsよりもデータ属性を使用することで、スクリプトの依存関係がより明示的になり、デバッグやメンテナンスが容易になります。

https://claude.ai/code/session_01YPWgEDkv5LeTU2XpMTuTxi

The experimental Rust compiler breaks `is:inline` + `define:vars`
combination, causing redirect variables (pattern, basePath, etc.) to
not be injected into the generated HTML. This made all /patterns/{name}/
redirect pages non-functional.

Switch to data-* attributes with document.currentScript.dataset, which
is the Astro-recommended approach for passing frontmatter variables to
client-side scripts.

https://claude.ai/code/session_01YPWgEDkv5LeTU2XpMTuTxi
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Mar 16, 2026

Deploying apg-patterns-examples with  Cloudflare Pages  Cloudflare Pages

Latest commit: acb7541
Status: ✅  Deploy successful!
Preview URL: https://361d11b0.apg-patterns-examples.pages.dev
Branch Preview URL: https://claude-fix-alert-redirect-6y.apg-patterns-examples.pages.dev

View logs

masuP9 and others added 3 commits March 16, 2026 23:46
Replace define:vars in PracticeDownload, AiGuideActions, and
TreeView DemoSection with data-* attributes, following the Astro
recommended pattern for passing frontmatter variables to scripts.

This eliminates all define:vars usage, which implicitly forces
is:inline and is incompatible with the experimental Rust compiler.

https://claude.ai/code/session_01YPWgEDkv5LeTU2XpMTuTxi
Without define:vars, the scripts lost their implicit is:inline flag,
causing them to be processed as module scripts where TypeScript type
checking surfaced pre-existing type issues. Restore is:inline explicitly
since these scripts use DOM APIs (querySelectorAll, currentScript) that
require inline execution context.

https://claude.ai/code/session_01YPWgEDkv5LeTU2XpMTuTxi
@masuP9 masuP9 merged commit 1712bec into main Mar 16, 2026
17 checks passed
@masuP9 masuP9 deleted the claude/fix-alert-redirect-6Yg8J branch March 16, 2026 16:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants