Open7

安心して使えそうな svelte 用のライブラリ

Svelte
SvelteKit
ピン留めされたアイテム
para7para7

メンテナンスへの期待値、あるいは知名度など、梯子を外されにくそうなものをピックアップして書き留めておくメモ書き。随時更新

para7para7

Ark UI

https://ark-ui.com/docs/overview/introduction

ヘッドレスUI

tailwind を使わない場合の最有力と思う
tailwind 使うなら skeleton とか daisy とか
あとは melt ui も悪くなさそうなのだけど、執筆時点で svelte5 への対応が追い付いてない感があったので今はやめた

https://next.melt-ui.com/

park ui の方は 執筆時点でsvelte版が出てない

https://park-ui.com/

svelte で使うと :global が頻出してしまうので、css modules を使った方が良さげ

para7para7

css modules に型付けするため typed css modules を使う場合はこんな感じで設定が通る
rootDirs で .sveltekit 指定しないと kit の型定義系が消える

https://www.npmjs.com/package/typed-css-modules

package.json
		"dev": "pnpm dlx npm-run-all --parallel dev:web dev:css",
		"dev:web": "vite dev --port 3000 --host 127.0.0.1",
		"dev:css": "tcm src --watch  --silent --outDir .__typed_css_modules__",
tsconfig.json
		"rootDirs": ["src", ".svelte-kit/types/src", ".__typed_css_modules__"]

※TODO: 定義吐くだけなら動作に関わらないのでマイナーでも良いと思っているが、何かよいアプローチがあれば追記

para7para7

ちょくちょくバグを踏んでおり、ark ui は使わない方がいいのかもしれないという気持ちになってきた。
Select をレンダリングするとアプリ全体のリアクティビティがぶっ壊れるという無茶苦茶な不具合で、壊れた側をずっと確認してたので特定に死ぬほど時間かかった…。

複雑な挙動をする要素はキーボードバインドとかあるのでヘッドレスUI使うべきだけど、意外といろいろなものが今の html, css で実現できるし、shadcn とか自前実装していく形も一周回って主流になりつつあるし、シンプルなUI要素なら AI で作れちゃうしでそこまで必要性高くないのかも