Slide 1

Slide 1 text

Svelteでライブラリを作る Svelte Japan Online Meetup #1

Slide 2

Slide 2 text

誰? 冨川宗太郎 フロントエンドエンジニア { x: 'ssssotaro', github: 'ssssota' } svelte-exmarkdownっていうのを作っている このスライドもsvelte-exmarkdownが使われています

Slide 3

Slide 3 text

これから話すこと 1. なぜSvelteでライブラリを作るのか 2. はじめかた 3. 難しいこと 4. Svelte v5について 5. Tips

Slide 4

Slide 4 text

なぜSvelteでライブラリを作るのか →パイがデカいのに、まだ数が出てないから 知名度は着実に伸び続けている🔥 まだ成長途中だからこそチャンスがある! star-history.com 2017 2018 2019 2020 2021 2022 2023 20.0k 40.0k 60.0k sveltejs/svelte Star History Date GitHub Stars

Slide 5

Slide 5 text

はじめかた ここにいる人は叩いたことがありそう↓ pnpm init svelte テンプレートにライブラリ用があるのでそれを使う src/lib ディレクトリにライブラリのコードを書く src/routes ディレクトリにサンプルコードを書く package.json に必要な情報を埋める! npm publish ! see: https://kit.svelte.dev/docs/packaging

Slide 6

Slide 6 text

難しいこと Svelteはその設計上UIコンポーネントライブラリの設計が ReactなどJSX系ライブラリと比較して難しい。 これは第一級オブジェクトとして扱える範囲が狭いことに起因 する。 →CSSカスタムプロパティ(変数)、svelte/action(use:*)、 bind:this 、export function をうまく使おう。

Slide 7

Slide 7 text

Svelte v5について キターーー!!!🔥🔥🔥(まだですが) すでにライブラリを作っている皆様、対応頑張りましょう。 まだ作ってない皆様、Svelte5で作り始めましょう。 イベントハンドラが第一級オブジェクト(相当)として扱えるよ うになりかなり柔軟性が向上しています。 Context+Storeだった箇所もContext+Runesで置き換えるこ とができパフォーマンス向上も期待できます。

Slide 8

Slide 8 text

Tips 作ったらMade with Svelteに登録しよう! 日本人以外にもリーチできる(Hacker Newsなども?) 作ったらSvelte日本Discord#ショーケース で紹介しよう! 反応もらえます。コミュニティ温かい changesetsとrenovateの設定をしておくと便利 ライブラリ開発をサステナブルにしよう 一応v0.1から始めつつ、はやくv1をリリースしよう! 大体リリース直後インターフェース迷いがちなのでv0.1で v1になるとライブラリ採用のハードルが下がる

Slide 9

Slide 9 text

Svelteでライブラリを作ろう! いまがアツい! ssssota/make-library-with-svelte