はじめに

Svelte 5 が出てもう2か月目となったが、その間の開発周辺のサポートはまだまちまちだったりするものもある。
という事で、Svelte 5 の採用をどこまで判断するか考えるべく、周辺のライブラリを漁りにいくわけだが…。はて、Threlte はどうだろうかと気になった。
僕は、以前から Threlte の記事を Qiita 上に上げて行っているが、これは Svlete 4 で作成したもの。
もちろん、そのまま動くとは思わないので、対応状況がキニナルわけだ。

という事で僕はこのアドカレネタというのも込みで、 Ex シリーズとしてこの調査に乗り出した

Svelte 5 の対応状況の調査

とりあえずまぁ、対応状況を調べるには公式レポジトリを探しに行くのが一番話が速い。

ということで Issue の中で Svelte 5 対応がないかを検索する。。
としたら、速攻で出てきた。

Issue のステータスを見てみると、既に Closed とある。
お？？とﾜｸﾜｸしつつ、やり取りを見てみる…。

ナント、もうすでに9月時点で対応が終わってた！！！！

実際に試してみる

ということで、早速試してみる。

プロジェクト作成

現状は next ブランチに入っているものを使用することになるため、そこからプロジェクトを作成していく。

npm create thlelte@next

すると気付く…。
おや、Svelte 5 対応は、Threlte 8 に入っている様だ。Threlte 8 が準備中だ！！

もろもろオプションを選択して、プロジェクトの作成を完了させる。

作成が終わったら、パッケージをインストールする。
（処理が速い pnpm を使いたいので、npm ではインストールせずに後から pnpm でインストールするように指定した。

cd threlte7-svelte5
pnpm install

2024-11-28 のこのポスト執筆時点では、npm create threlte で作成されるプロジェクトはまだ Svelte 4 を使用している様だった。
なので、今回はマニュアルインストールの手段を取った。

開発環境を起動してみる

開発環境を立ち上げて、実際に動くかを見てみる。

pnpm run dev --oepn

ちゃんと動いた！

ロードマップを見てみる

Threlte は GitHub Project で Svelte 5 対応の Issue を管理している。

これを見てみると、現時点では以下のタスクが残っている様子。

以降ガイドの作成
<Gizmo> の内部を <HUD> を使うように移行
ハードコードされた svelte.d.ts タイプファイルの型定義から生成された型定義に移行する
- こちらはどうやら Threlte 8 における部分での「目標」の様子

残っているタスクも少ないので、そこまで時間はかからなそうという印象。

まとめ

これで、Threlte が Svelte 5 に対応できている事が分かった。
また、この検証のおかげで Threlte 8 が準備中であることも分かった。
次回は Threlte 8 を調査してみるのも面白いかもしれない。