時系列図を作るライブラリを作ってみた

作ったもの

下記のような簡単な時系列図？タイムライン？を作るための、svelteのコンポネントライブラリを作ってみました。

• デモ: https://svelte-vertical-timeline.vercel.app/
• リポジトリ: https://github.com/K-Sato1995/svelte-vertical-timeline

Svelteでのコンポネントライブラリの作り方

概要

svelteのwebアプリを作成するためのフレームワークにsvelte-kitがあります。
このsvelte-kitを使用することで簡単にsvelteコンポーネントを使用したライブラリを作成し、npmに公開することが可能です。

https://kit.svelte.dev

具体的な方法

svelte-kitでwebアプリを作成する際とライブラリを作成する場合の違いはpublic(ユーザーが使用するもの)なものの位置だけです。

• src/routes: Webアプリを作成する場合はこちらの配下に作成します(NextのようにURLが動的に作成されます)
• src/lib: ライブラリを作成する場合はこちらの配下にライブラリの内容を作成していきます。

実際にnpmに公開する際は下記のフローで行うことが可能です。

$ npm run package // src/lib配下をビルドする
$ cd package // ビルドで作成されたpackageディレクトリに移動する
$ npm publish // ライブラリをnpmに公開する

より詳細な情報は公式の下記に記載されています。

https://kit.svelte.dev/docs/packaging