diff --git a/docs/dev-notes/2025-10-25/migrate-lucide-svelte-from-v4-to-v5/checklist.md b/docs/dev-notes/2025-10-25/migrate-lucide-svelte-from-v4-to-v5/checklist.md deleted file mode 100644 index b69d582af..000000000 --- a/docs/dev-notes/2025-10-25/migrate-lucide-svelte-from-v4-to-v5/checklist.md +++ /dev/null @@ -1,188 +0,0 @@ -## 📋 実行チェックリスト - -## ✅ 移行実行前の確認 - -### 準備フェーズ - -- [x] `plan.md` の内容をレビュー完了 -- [x] 現在のブランチが正しいことを確認 (`git branch`) -- [x] 作業用ブランチを作成（推奨）: `#2750` -- [x] 最新の状態に更新: `git pull origin staging` - ---- - -## ✅ 移行実行フェーズ - -### ステップ 1: バックアップとコミット - -- [x] 現在の状態をセーブ（スキップ） -- [x] コミットハッシュを記録: 既存の #2750 ブランチを使用 - -### ステップ 2: パッケージ置き換え - -- [x] 現在のバージョンを確認: `lucide-svelte@0.548.0` -- [x] 古いパッケージをアンインストール: ✅ -- [x] 新しいパッケージをインストール: `@lucide/svelte@0.548.0` ✅ -- [x] インストール完了を確認: ✅ -- [x] `pnpm-lock.yaml` が更新されたことを確認: ✅ - -### ステップ 3: コード修正 - -- [x] インポート箇所を検索: 18 ファイル発見 -- [x] 各ファイルを修正（対象ファイル数: **18**） - - [x] `src/lib/components/ToastWrapper/ErrorMessageToast.svelte` - - [x] `src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte` - - [x] `src/lib/components/SubmissionStatus/IconForUpdating.svelte` - - [x] `src/lib/components/SubmissionStatus/UpdatingDropdown.svelte` - - [x] `src/lib/components/Header.svelte` - - [x] `src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte` - - [x] `src/lib/components/AuthForm.svelte` - - [x] `src/lib/components/ExternalLinkWrapper.svelte` - - [x] `src/lib/components/TooltipWrapper.svelte` - - [x] `src/lib/components/LabelWithTooltips.svelte` - - [x] `src/lib/components/AtCoderUserValidationForm.svelte` - - [x] `src/lib/components/TaskTables/TaskTableBodyCell.svelte` - - [x] `src/lib/components/UserAccountDeletionForm.svelte` - - [x] `src/lib/components/TabItemWrapper.svelte` - - [x] `src/lib/components/WorkBook/CommentAndHint.svelte` - - [x] `src/routes/+page.svelte` - - [x] `src/routes/problems/[slug]/+page.svelte` - - [x] `src/routes/(admin)/account_transfer/+page.svelte` - - [x] 修正形式: `import IconName from '@lucide/svelte/icons/icon-name'` ✅ - ---- - -## ✅ 検証フェーズ - -### ステップ 4: 型チェック - -- [x] TypeScript 型チェック実行: `pnpm check` - - 結果: **lucide 関連エラーなし** ✅ - -### ステップ 5: ビルド確認 - -- [x] ビルド実行: `pnpm build` - - ビルド時間: **15.74 秒** - - 結果: **成功 ✅** - -### ステップ 6: 開発サーバー確認 - -- [x] 開発サーバー起動: `pnpm dev` - - ポート: 5174 - - 結果: **起動成功 ✅** - -### ステップ 7: テスト実行 - -- [x] ユニットテスト: スキップ -- [x] E2E テスト: スキップ - -### ステップ 8: Lint/Format チェック - -- [x] Prettier チェック: `pnpm format` - - 結果: **修正完了 ✅** - -- [x] ESLint チェック: `pnpm lint` - - 結果: **エラーなし、警告 38 個（既存）✅** - ---- - -## 📝 完了フェーズ - -### ステップ 9: 変更内容の確認 - -- [x] 差分を確認: `git diff` - - 修正ファイル数: **23 個** - - 主要な変更: - - `package.json` ✅ - - `pnpm-lock.yaml` ✅ - - 18 個のコンポーネント ✅ - -### ステップ 10: コミット - -- [ ] ステージング: `git add package.json pnpm-lock.yaml src/...` -- [ ] コミット: 準備完了 - -### ステップ 11: プッシュと PR - -- [ ] リモートにプッシュ -- [ ] GitHub で PR を作成 - ---- - -## 📚 教訓と学習 - -### 📚 教訓と学習 - -#### 1️⃣ 実装の問題：計画書の不正確さ - -最初の計画書では以下のように記載されていました： - -```svelte -// 誤り import {IconName} from '@lucide/svelte/icons'; -``` - -しかし、実際には以下が正しい形式です： - -```svelte -// 正しい import IconName from '@lucide/svelte/icons/icon-name'; -``` - -**理由**: `@lucide/svelte` のパッケージ設計では、各アイコンは個別モジュールとしてエクスポートされており、ディレクトリからの一括インポートは非効率（バンドルサイズ肥大化）です。 - -#### 2️⃣ トラブルシューティング：型定義エラーの原因 - -**症状**: `Cannot find module '@lucide/svelte/icons/icon-name' or its corresponding type declarations` - -**原因**: Docker コンテナ内の TypeScript/Node.js キャッシュが古い状態を保持していた。具体的には： - -- `node_modules` の型定義ファイルのメタデータがキャッシュ -- VS Code/TypeScript の言語サーバーキャッシュが更新されていない -- パッケージの `exports` フィールド解決が失敗 - -**解決方法**: - -```bash -# 段階的な対応 -1. pnpm install --force # または rm -rf node_modules && pnpm install -2. Docker コンテナ再起動 # ← これで解決した場合、キャッシュが原因 -``` - -**重要**: Docker コンテナの再起動で解決した場合、それは**キャッシュ問題**です。単なる再インストールでは解決しないことがあります。 - -#### 3️⃣ 最終的なインポート形式 - -すべてのアイコンは以下の形式に統一： - -```svelte -import IconName from '@lucide/svelte/icons/icon-name'; -``` - -**メリット**: - -- ✅ 公式ドキュメントの形式と一致 -- ✅ Tree-shaking が効く（バンドルサイズ最適化） -- ✅ TypeScript の型定義が正しく解決される - ---- - -### 🚨 トラブルシューティング - -### 🔧 実行時の工夫 - -| 項目 | 説明 | -| ------------------ | ---------------------------------- | -| **一括修正** | 18 ファイル全てを統一的に修正 | -| **ビルド実行** | 15.74 秒で成功 | -| **Lint/Format** | エラーなし、既存警告 38 個のみ | -| **キャッシュ対策** | Docker コンテナ再起動で完全解決 ✅ | - -### ⚠️ 注意点と対処方法 - -- キャッシュの影響で動作しているように見える可能性がある -- TypeScript/VS Code のキャッシュが古い情報を保持することがある -- 環境クリーンアップが必要な場合の対処順序： - 1. `pnpm install --force` または `rm -rf node_modules && pnpm install` - 2. VS Code の TypeScript キャッシュをクリア（Command Palette → `TypeScript: Restart TS Server`） - 3. Docker コンテナ再起動（最終手段 → この手順で確実に解決） - ---- diff --git a/docs/dev-notes/2025-10-25/migrate-lucide-svelte-from-v4-to-v5/plan.md b/docs/dev-notes/2025-10-25/migrate-lucide-svelte-from-v4-to-v5/plan.md deleted file mode 100644 index 5199ef29e..000000000 --- a/docs/dev-notes/2025-10-25/migrate-lucide-svelte-from-v4-to-v5/plan.md +++ /dev/null @@ -1,253 +0,0 @@ -# lucide-svelte から @lucide/svelte への移行計画 - -## 📋 概要 - -**現状**: Svelte 5.41.4 プロジェクトで Svelte 4 用の `lucide-svelte@0.548.0` を使用 -**目標**: Svelte 5 に最適化した `@lucide/svelte` に移行し、バンドルサイズを削減 - ---- - -## 🎯 移行の利点 - -- ✅ **Svelte 5 に最適化**: パフォーマンス向上 -- ✅ **バンドルサイズ削減**: tree-shaking による効率化 -- ✅ **型安全性**: TypeScript の型定義が改善 -- ✅ **アイコン直接インポート**: `@lucide/svelte/icons` からの軽量インポート対応 - ---- - -## 📐 技術的背景 - -### 現在の状況 - -```json -{ - "dependencies": { - "lucide-svelte": "^0.548.0" // Svelte 4 用 - }, - "devDependencies": { - "svelte": "5.41.4" // Svelte 5 - } -} -``` - -**問題点**: - -- インポートパス `lucide-svelte/icons/arrow-right` が Svelte 5 では解決されない -- バンドルが不必要に大きくなる可能性 - -### 新しい構成 - -```json -{ - "dependencies": { - "@lucide/svelte": "latest" // Svelte 5 専用 - }, - "devDependencies": { - "svelte": "5.41.4" - } -} -``` - ---- - -## 🔄 移行手順 - -### フェーズ 1: 準備 - -1. **現在の状態をコミット** - - ```bash - git status - git add -A - git commit -m "docs: add lucide-svelte migration plan" - ``` - -2. **pnpm の依存関係をロック** - - ```bash - pnpm list lucide-svelte - ``` - - - 現在: `lucide-svelte@0.548.0` を確認 - -### フェーズ 2: パッケージ置き換え - -1. **古いパッケージをアンインストール** - - ```bash - pnpm remove lucide-svelte - ``` - -2. **新しいパッケージをインストール** - - ```bash - pnpm add @lucide/svelte - ``` - -3. **lock ファイル更新を確認** - - ```bash - pnpm list @lucide/svelte - ``` - - - `pnpm-lock.yaml` が自動で更新される - -### フェーズ 3: コード修正 - -#### 3-1. インポート方式の確認 - -**現在のコード** (`src/routes/+page.svelte`): - -```svelte -import ArrowRight from 'lucide-svelte/icons/arrow-right'; -``` - -**修正対象**: 全インポート文を以下の形式に統一 - -- アイコンモジュールから直接インポート（推奨） - -```svelte -import ArrowRight from '@lucide/svelte/icons/arrow-right'; -``` - -**使用方法**: - -````svelte - - -#### 3-2. ファイル別の修正対象 ```bash # lucide-svelte のインポートを使用しているファイルを検索 grep --r "from 'lucide-svelte" src/ --include="*.svelte" --include="*.ts" --include="*.js" -```` - -**想定される修正ファイル**: - -- `src/routes/+page.svelte` - `ArrowRight` のインポート - -### フェーズ 4: 検証 - -1. **ビルド確認** - - ```bash - pnpm check - ``` - - - TypeScript エラーがないか確認 - -2. **ビルドサイズ測定** - - ```bash - pnpm build - ``` - - - Vite のビルドレポートで lucide 関連のサイズを確認 - -3. **開発サーバー起動** - - ```bash - pnpm dev - ``` - - - ブラウザで画面を確認 - - Console エラーがないか確認 - -4. **ユニットテスト実行** - - ```bash - pnpm test:unit - ``` - -5. **E2E テスト実行** - - ```bash - pnpm test:integration - ``` - -### フェーズ 5: 完了 - -1. **変更をコミット** - - ```bash - git add package.json pnpm-lock.yaml src/routes/+page.svelte - git commit -m "refactor: migrate lucide-svelte to @lucide/svelte for Svelte 5" - ``` - -2. **動作確認** - - ステージング環境でのデプロイテスト - ---- - -## 📌 pnpm 特有の注意事項 - -### ✅ 自動処理 - -- **lock ファイル更新**: `pnpm-lock.yaml` は自動更新 -- **型定義**: `@lucide/svelte` に含まれる `.d.ts` は自動で認識 - -### ⚠️ 確認が必要な点 - -| 項目 | 内容 | 対応 | -| -------------------------- | --------------------------------------------------------------- | --------------------------- | -| **スコープ付きパッケージ** | `@lucide/svelte` は `node_modules/.pnpm/@lucide+svelte/` に配置 | 通常、問題なし | -| **CI/CD パイプライン** | `pnpm install --frozen-lockfile` を使用している場合 | lock ファイル更新後に再実行 | -| **Workspace 設定** | 現在 monorepo でない | 影響なし | - -### 確認コマンド - -```bash -# 依存関係の確認 -pnpm list @lucide/svelte - -# node_modules の構造確認 -ls -la node_modules/@lucide/ - -# キャッシュをクリア（問題が出た場合） -pnpm store prune -pnpm install -``` - ---- - -## 📊 期待される効果 - -| メトリクス | 現在 | 期待値 | -| ---------------------------- | --------------------------- | --------------- | -| **バンドルサイズ** | 不明（Svelte 4 ライブラリ） | 削減予想 15-25% | -| **ビルド時間** | - | 若干改善 | -| **型安全性** | 標準 | 向上 | -| **ランタイムパフォーマンス** | - | Svelte 5 最適化 | - ---- - -## 🚨 リスクと対策 - -| リスク | 可能性 | 対策 | -| ------------------------ | ------ | ------------------------- | -| **インポート経路の漏れ** | 中 | grep で全体検索確認 | -| **互換性問題** | 低 | E2E テストで確認 | -| **キャッシュの不具合** | 低 | `pnpm store prune` で対応 | -| **CI/CD 失敗** | 低 | lock ファイル更新確認 | - ---- - -## 📚 参考資料 - -- [lucide-svelte 公式ガイド](https://lucide.dev/guide/packages/lucide-svelte) -- [Svelte 5 マイグレーション](https://svelte.dev/docs/migration-guide) -- [pnpm ドキュメント](https://pnpm.io/) - ---- - -## ✨ 追加の改善機会 - -移行後に検討する項目： - -- [ ] 他の Svelte 4 ライブラリがないか確認 -- [ ] `svelte-5-ui-lib` のバージョン確認（最新版に対応しているか） -- [ ] TypeScript 厳格モードでの型チェック強化 -- [ ] バンドルサイズ測定ツール (Bundle Analyzer) の導入 - ---- - -**更新日**: 2025-10-25 -**ステータス**: 📝 計画段階 → 🔄 実行準備中 → ✅ 完了予定 diff --git a/docs/guides/agent-rules/svelte-components.md b/docs/guides/agent-rules/svelte-components.md index f3d5519c8..c8349c314 100644 --- a/docs/guides/agent-rules/svelte-components.md +++ b/docs/guides/agent-rules/svelte-components.md @@ -79,6 +79,10 @@ Import from `flowbite-svelte`. Use Tailwind v4 `dark:` prefix. When copying butt `ButtonGroup` uses `flex` internally (no wrap). For wrapping, use `
` with individual `Button` components. +## Lucide Icons + +Import per icon: `import ArrowRight from '@lucide/svelte/icons/arrow-right'`. The package root re-exports all ~1,900 icons, so named imports from it slow builds and the dev server. + ## Component Structure - Extract conditional logic to private functions: `function isCrossRouteNavigation() { ... }`