【Elysia/Bun】Elysiaのプラグインを作ってみる

Elysia には公式のプラグインとコミュニティプラグインがあります。

Elysia > Official plugins

これまで、この Quiita の Bun と Elysia 関連の記事の中で Cron Plugin や html Pluginなどを使ってきました。それらは Elysia のインスタンスへ .use(＜プラグイン名＞)　するだけで使える簡単なものです。

例えば html プラグインの使い方

import { Elysia } from "elysia";
import { html } from '@elysiajs/html'

const app = new Elysia()
    .use(html())
    .get("/", () =>
      :
     略

詳細は、Elysia のサイトをご覧いただくとして、今回は試しに自分でプラグインを作ってみようという記事になります。

Elysia > Plugins

今回の環境

クラウド： Azure VM (これは何でも良い)
OS：　Ubuntu 20.04.6 LTS (GNU/Linux 5.15.0-1050-azure x86_64)
Bun：　v1.0.18
Elysia： v0.7.30

Bunのインストール

もういらないかもしれませんが、一応まだ Bun が入っていない場合は、以下のコマンドを使用して Bun をインストールします。

Bun をインストールします

$ curl -fsSL https://bun.sh/install | bash

Elysia プロジェクトを作る

次に、Elysia プロジェクトを作ります。とりあえず、mypluginという名前にしておきます。

Elysia プロジェクトを作ります

$ bun create elysia myplugin

これで、mypluginディレクトリへ、自動的に Elysiaがインストールされて、myplugin/src/index.ts として 簡単な HTTPサーバーが生成されます。

自動生成されたindex.ts

import { Elysia } from "elysia";

const app = new Elysia().get("/", () => "Hello Elysia").listen(3000);

console.log(
  `?
     Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);

1ファイルで書いてみる

今回は、これにプラグインを書き加えていきます。

まずは、index.ts 1ファイルだけでやってみます。index.ts を次のように書き換えてみましょう。

index.ts

import { Elysia } from "elysia";

// プラグイン
const plugin = new Elysia()
    .decorate('var_plugin', 'hi my Plugin!')

// メインのHTTPサーバー
const app = new Elysia()
    .use(plugin)
    .get('/', ({ var_plugin }) => var_plugin)
    .listen(3000);

「.decorate('var_plugin', 'hi myPlugin!')」の部分は、関数またはプロパティを追加できるので、次のように書いても同じです。

.decorate

.decorate('var_plugin', () => { return 'hi myPlugin!'})

pacage.jsonのscriptは以下のようになっていますので、「$ bun dev」で実行できるはずです。

pacage.jsonのscript

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "bun run --watch src/index.ts"
  },

index.ts を実行します

$ bun dev

結果

ブラウザで、https://localhost:3000 等へアクセスすると「hi my Plugin!」が表示されます。

別ファイルに分割してみる

とりあえず、下記のような2つのファイルに分けて、index.ts から plugin.ts を読み込んでみます。

.myplugin
  └─src/
     ├─ index.ts
     └─ plugin.ts

いろいろな書き方は可能ですがシンプルに次のようにしてみます。plugin.ts の方にもelysiaを読み込むimportは必要ですが lissen はメインのindex.tsだけで良いです。

plugin.ts

import { Elysia } from "elysia";

export const plugin = new Elysia({prifix: '/plugin'})
    .get("", () => 'hi my Plugin from plugin.ts')

この plugin.ts を index.ts から使ってみます。

index.ts

import { Elysia } from "elysia";
import { plugin } from './plugin'

const app = new Elysia()
    .use(plugin)
    .listen(3000);

結果

ブラウザで、https://localhost:3000 等へアクセスすると今度は「hi my Plugin from plugin.ts」が表示されて plugin.ts が動作したことが判ります。

Elysia 用にプラグインを作成したらGithubでリストへ追加できるようなので頑張ってみましょう(^^)/

今日はとりあえずここまで。

最近 Qiita に書いた Bun 関連の記事10選