Svelteでライブラリを作る / Make your library with Svelte

https://github.com/ssssota/make-library-with-svelte

Transcript

1. Svelteでライブラリを作る Svelte Japan Online Meetup #1
2. 誰？ 冨川宗太郎 フロントエンドエンジニア { x: 'ssssotaro', github: 'ssssota' } svelte-exmarkdownっていうのを作っている このスライドもsvelte-exmarkdownが使われています
3. これから話すこと 1. なぜSvelteでライブラリを作るのか 2. はじめかた 3. 難しいこと 4. Svelte v5について 5. Tips
4. なぜSvelteでライブラリを作るのか →パイがデカいのに、まだ数が出てないから 知名度は着実に伸び続けている🔥 まだ成長途中だからこそチャンスがある！ star-history.com 2017 2018 2019 2020 2021 2022 2023 20.0k 40.0k 60.0k sveltejs/svelte Star History Date GitHub Stars
5. はじめかた ここにいる人は叩いたことがありそう↓ pnpm init svelte テンプレートにライブラリ用があるのでそれを使う src/lib ディレクトリにライブラリのコードを書く src/routes ディレクトリにサンプルコードを書く package.json に必要な情報を埋める！ npm publish ！ see: https://kit.svelte.dev/docs/packaging
6. 難しいこと Svelteはその設計上UIコンポーネントライブラリの設計が ReactなどJSX系ライブラリと比較して難しい。 これは第一級オブジェクトとして扱える範囲が狭いことに起因 する。 →CSSカスタムプロパティ(変数)、svelte/action(use:*)、 bind:this 、export function をうまく使おう。
7. Svelte v5について キターーー！！！🔥🔥🔥（まだですが） すでにライブラリを作っている皆様、対応頑張りましょう。 まだ作ってない皆様、Svelte5で作り始めましょう。 イベントハンドラが第一級オブジェクト(相当)として扱えるよ うになりかなり柔軟性が向上しています。 Context+Storeだった箇所もContext+Runesで置き換えるこ とができパフォーマンス向上も期待できます。
8. Tips 作ったらMade with Svelteに登録しよう！ 日本人以外にもリーチできる(Hacker Newsなども?) 作ったらSvelte日本Discord#ショーケース で紹介しよう！ 反応もらえます。コミュニティ温かい changesetsとrenovateの設定をしておくと便利 ライブラリ開発をサステナブルにしよう 一応v0.1から始めつつ、はやくv1をリリースしよう！ 大体リリース直後インターフェース迷いがちなのでv0.1で v1になるとライブラリ採用のハードルが下がる
9. Svelteでライブラリを作ろう！ いまがアツい！ ssssota/make-library-with-svelte