Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Svelteでライブラリを作る / Make your library with Svelte
Search
TOMIKAWA Sotaro
December 08, 2023
Programming
0
130
Svelteでライブラリを作る / Make your library with Svelte
https://github.com/ssssota/make-library-with-svelte
TOMIKAWA Sotaro
December 08, 2023
Tweet
Share
More Decks by TOMIKAWA Sotaro
See All by TOMIKAWA Sotaro
useSyncExternalStoreを使いまくる
ssssota
6
5k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
7
4.7k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
110
脱法Svelte / Evasion of svelte rules
ssssota
1
180
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
930
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
3.8k
現代のReactivityとSvelteの魔法
ssssota
0
2k
型付きdotenv
ssssota
0
320
Other Decks in Programming
See All in Programming
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
自力でTTSモデルを作った話
zgock999
0
100
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
コードを読んで理解するko build
bells17
1
110
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
3.9k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
React 19アップデートのために必要なこと
uhyo
8
1.5k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
950
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
540
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1k
はじめての Go * WASM *OCR
sgash708
1
100
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
It's Worth the Effort
3n
184
28k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Being A Developer After 40
akosma
89
590k
Practical Orchestrator
shlominoach
186
10k
Making Projects Easy
brettharned
116
6k
What's in a price? How to price your products and services
michaelherold
244
12k
Code Reviewing Like a Champion
maltzj
521
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Transcript
Svelteでライブラリを作る Svelte Japan Online Meetup #1
誰? 冨川宗太郎 フロントエンドエンジニア { x: 'ssssotaro', github: 'ssssota' } svelte-exmarkdownっていうのを作っている
このスライドもsvelte-exmarkdownが使われています
これから話すこと 1. なぜSvelteでライブラリを作るのか 2. はじめかた 3. 難しいこと 4. Svelte v5について
5. Tips
なぜSvelteでライブラリを作るのか →パイがデカいのに、まだ数が出てないから 知名度は着実に伸び続けている🔥 まだ成長途中だからこそチャンスがある! star-history.com 2017 2018 2019 2020 2021
2022 2023 20.0k 40.0k 60.0k sveltejs/svelte Star History Date GitHub Stars
はじめかた ここにいる人は叩いたことがありそう↓ pnpm init svelte テンプレートにライブラリ用があるのでそれを使う src/lib ディレクトリにライブラリのコードを書く src/routes ディレクトリにサンプルコードを書く
package.json に必要な情報を埋める! npm publish ! see: https://kit.svelte.dev/docs/packaging
難しいこと Svelteはその設計上UIコンポーネントライブラリの設計が ReactなどJSX系ライブラリと比較して難しい。 これは第一級オブジェクトとして扱える範囲が狭いことに起因 する。 →CSSカスタムプロパティ(変数)、svelte/action(use:*)、 bind:this 、export function をうまく使おう。
Svelte v5について キターーー!!!🔥🔥🔥(まだですが) すでにライブラリを作っている皆様、対応頑張りましょう。 まだ作ってない皆様、Svelte5で作り始めましょう。 イベントハンドラが第一級オブジェクト(相当)として扱えるよ うになりかなり柔軟性が向上しています。 Context+Storeだった箇所もContext+Runesで置き換えるこ とができパフォーマンス向上も期待できます。
Tips 作ったらMade with Svelteに登録しよう! 日本人以外にもリーチできる(Hacker Newsなども?) 作ったらSvelte日本Discord#ショーケース で紹介しよう! 反応もらえます。コミュニティ温かい changesetsとrenovateの設定をしておくと便利
ライブラリ開発をサステナブルにしよう 一応v0.1から始めつつ、はやくv1をリリースしよう! 大体リリース直後インターフェース迷いがちなのでv0.1で v1になるとライブラリ採用のハードルが下がる
Svelteでライブラリを作ろう! いまがアツい! ssssota/make-library-with-svelte