Skip to content

全テンプレートの依存を最新化(npm audit 21件 → 0件) - #64

Merged
kira924age merged 1 commit into
developfrom
feature/dependency-upgrade
Aug 10, 2026
Merged

kira924age merged 1 commit into
developfrom
feature/dependency-upgrade

Conversation

@kira924age

Copy link
Copy Markdown
Contributor

概要

全11テンプレートの依存を最新版に更新し、npm audit の指摘を 21件 → 0件 にしました。

きっかけは adm-zip <0.6.0 の脆弱性です。全テンプレートが scripts/archive_dist.js 経由で取り込んでいました。

adm-zip <0.6.0 / GHSA-xcpc-8h2w-3j85 (high)
Crafted ZIP file triggers 4GB memory allocation

audit の変化

Plugin before after
AdditionalToolbarButton 1 (high 1) 0
CustomChatButton 1 (high 1) 0
CustomEntryPanel 1 (high 1) 0
CustomExitScreen 11 (high 9 / moderate 1 / low 1) 0
CustomLeaveButton 1 (high 1) 0
CustomMegaphoneButton 1 (high 1) 0
CustomNearestUserProfile 1 (high 1) 0
CustomOverlay 1 (high 1) 0
CustomProfileModal 1 (high 1) 0
CustomTutorial 1 (high 1) 0
CustomWebCameraButton 1 (high 1) 0
合計 21 0

CustomExitScreen だけ 11件あったのは、依存を exact pin していて取り残されていたためです(@babel/core / postcss / rollup / nanoid / vite / minimatch など)。今回 caret に統一したので他10プラグインと同じ更新経路に乗ります。

主なメジャーアップデート

vite 6 → 8 / typescript 5 → 7 / vitest 3 → 4 / @testing-library/react 11 → 16 / @vitejs/plugin-react 5 → 6 / @module-federation/vite 1.9 → 1.20 / biome 2.3 → 2.5 / jsdom 28 → 30 / uuid 13 → 14、CustomTutorial は react-joyride 2 → 3@tsparticles 3 → 4

意図的に据え置いた依存

react / react-dom / @types/react / @types/react-dom は 18 のままにしています。

これらは Module Federation の shared: { singleton: true }metatell ホストと共有される依存です。ホストが React 18 のままテンプレート側だけ 19 に上げると、requiredVersion が食い違い全プラグインが実行時に壊れます。ホストの React バージョンが確認できてから、別PRで上げるのが安全です。

react-toastify も同じ理由で据え置きです(CustomMegaphoneButton が shared に入れています)。

コード修正が必要だった破壊的変更

1. TypeScript 7 が baseUrl を廃止

error TS5102: Option 'baseUrl' has been removed. により全テンプレートの lint:tsc が失敗しました。paths を使っている箇所は無く単に無効化されていたオプションだったので、10ファイルから削除しています。

2. react-joyride 3 の API 再編

default export が廃止され、props が大きく変わりました。

v2 v3
import Joyride from import { Joyride } from
styles.options options(トップレベルの prop に昇格)
hideCloseButton / hideBackButton / styles.buttonNext: {display:none} options.buttons: []
disableOverlay options.hideOverlay
disableOverlayClose options.overlayClickAction: false
disableCloseOnEsc options.dismissKeyAction: false
floaterProps floatingOptions

ボタン3種を個別に隠していた指定は buttons: [] に集約できました(このチュートリアルは実際の操作で進む設計で、ボタンを一切出さないため)。

3. @tsparticles/react 4 の初期化方式変更

initParticlesEngine が廃止され、ParticlesProvider + useParticlesProvider に置き換わりました。ParticleEffect を effect でフラグを立てる方式から Provider 経由に書き直しています。

動作確認

全11テンプレートで build ✅ / test ✅ / lint ✅

CustomTutorial の2つのライブラリ移行はテストで担保されていないため、ブラウザで実際に確認しました。

  • Joyride のツールチップが黒背景・白文字を維持し、back/close/next ボタンとオーバーレイと矢印が出ないこと
  • confetti の canvas が描画されること(ParticleEffect を一時的に直接描画して確認、検証後に復元済み)

レビュー時の注意

typescript 7vite 8 はどちらもメジャー2つ分の飛躍です。ビルド・型チェックは全テンプレートで通っていますが、テンプレート利用者が独自に追加したコードでは別の破壊的変更を踏む可能性があります。

🤖 Generated with Claude Code

Brings every template up to the current release of its dependencies,
which clears the outstanding npm audit findings: 21 vulnerabilities
across the repo down to 0.

The driver was adm-zip <0.6.0 (GHSA-xcpc-8h2w-3j85, high: a crafted ZIP
triggers a 4GB allocation), which every template pulled in through
scripts/archive_dist.js. CustomExitScreen carried a further 10, having
pinned its dependencies exactly and drifted behind.

Notable major bumps: vite 6 -> 8, typescript 5 -> 7, vitest 3 -> 4,
@testing-library/react 11 -> 16, @vitejs/plugin-react 5 -> 6,
@module-federation/vite 1.9 -> 1.20, biome 2.3 -> 2.5, jsdom 28 -> 30,
uuid 13 -> 14, and in CustomTutorial react-joyride 2 -> 3 plus
@tsparticles 3 -> 4.

react, react-dom and their @types are deliberately held at 18. They are
declared as Module Federation singletons and shared with the metatell
host, so bumping them here without knowing the host's version would
break every plugin at runtime. react-toastify is held for the same
reason (CustomMegaphoneButton shares it).

Three breaking changes needed code:

- TypeScript 7 removed the `baseUrl` option, so it is dropped from all
  ten tsconfig.json files. Nothing used `paths`, so it was inert.
- react-joyride 3 dropped its default export and restructured props:
  `options` moved out of `styles`, `hideCloseButton`/`hideBackButton`/
  `styles.buttonNext` collapse into `options.buttons: []`,
  `disableOverlay` -> `options.hideOverlay`, `disableOverlayClose` ->
  `options.overlayClickAction: false`, `disableCloseOnEsc` ->
  `options.dismissKeyAction: false`, `floaterProps` ->
  `floatingOptions`.
- @tsparticles/react 4 replaced `initParticlesEngine` with a
  `ParticlesProvider` + `useParticlesProvider` pair, so ParticleEffect
  now renders through the provider instead of an effect-driven flag.

Verified per template: build, tests and lint. CustomTutorial was also
checked in a browser, since neither library migration is covered by
tests — the tour tooltip keeps its dark styling with no back/close/next
buttons and no overlay, and the confetti canvas renders.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@kira924age kira924age self-assigned this Aug 10, 2026
@kira924age kira924age added the dependencies Pull requests that update a dependency file label Aug 10, 2026
@kira924age
kira924age merged commit bddd53b into develop Aug 10, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dependencies Pull requests that update a dependency file

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant