Fresh 用の Bootstrap 5 プラグインを公開

先日、Fresh(Deno) で Bootstrap 5 をプラグインで使うを書いた。

このプラグインの話を、Denoハンズオン＆もくもく会：Fresh + KV へ伺ったときにした。

「Freshは、Preact を使っているゆえに、コンポーネントライブラリの選択肢が少なめ」という話の流れで。
Bootstrap 5 をプラグインで導入することはなかったのだけど、比較的印象が良かった(良さそうだった)ので、改めて公開した。

メモがてらまとめ。

参考

導入

導入方法は以下の通り。

fresh.config.ts
1
2
3
4
5
6
import { defineConfig } from "$fresh/server.ts";
import { bootstrapPlugin } from "https://deno.land/x/fresh_bootstrap/mod.ts";

export default defineConfig({
  plugins: [bootstrapPlugin()],
});

これで、Tooltip Popover Alert Collapse Toast は動作する。
また、jsのセットアップを要しない Modal なども一通り動作する。
window.bootstrap にbootstrap.jsの内容をくっつけてあるので、個別設定をする場合そちらも使える。

というわけで、Bootstrap 5 プラグインを公開した。
ちょうどJSRが公開されたタイミングでもありJSRに公開をしようと思ったのだが、できなかった。
Freshが、https://deno.land/x で公開されており、JSRに公開するモジュールの依存先として許可されないのでパス出来なかった。
なので、Fresh がJSRに登録されたら、改めて公開をする見込み。

では。

余談 1

別途、「Freshは、Preact を使っているゆえに、コンポーネントライブラリの選択肢が少なめ」という話をハンズオンの帰宅後に調べなおしていた。
公式に、記述はある。

Preact - Components

が、全然メンテされてない。
Preactの側から攻めるのはやはり無理らしい。

しかし、別の方向から解決策があった。
Tailwind CSS 側から調べてみると一定の解決が図れた。
Fresh 1.6 から Tailwind CSS が選択できるようになった。
このことで、Tailwindプラグインと非プラグインのコンポーネントライブラリが使えるようになった。

調べた限りでは、以下のものはすぐにでも使えそうであった。

この辺りをうまく使っていくのが、どうやらいいようである。

余談 2

その昔、東方Projectとかラブライブの特定キャラクターのカラーがイメージされた Bootstrap テーマなんてものがあった。

今回の作業の中でふと思い出して調べてみたら、デモページがなくなっていたり、最終メンテが4年前だったりであった。

メンテナーのブログも数年メンテされていなかったりもしていた、開発者の皆さんはお元気なんだろうか。