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

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

<b>Elysia > Official plugins</b>

https://elysiajs.com/plugins/overview

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

```js:例えば  html プラグインの使い方
import { Elysia } from "elysia";
import { html } from '@elysiajs/html'

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

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

<b>Elysia > Plugins</b>

https://elysiajs.com/essential/plugin.html

# 今回の環境
クラウド： 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 をインストールします。
```sh: Bun をインストールします
$ curl -fsSL https://bun.sh/install | bash
```

# Elysia プロジェクトを作る

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

```sh: Elysia プロジェクトを作ります
$ bun create elysia myplugin
```

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

```ts: 自動生成された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 を次のように書き換えてみましょう。

```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!')」の部分は、関数またはプロパティを追加できるので、次のように書いても同じです。

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

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

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

```sh: index.ts を実行します
$ bun dev
```
## 結果
ブラウザで、https://localhost:3000 等へアクセスすると「hi my Plugin!」が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7103/6c2a61b2-db6e-ac54-ed76-dde33371886e.png)


# 別ファイルに分割してみる
とりあえず、下記のような2つのファイルに分けて、index.ts から plugin.ts を読み込んでみます。
```sh: 
.myplugin
  └─src/
     ├─ index.ts
     └─ plugin.ts
```
いろいろな書き方は可能ですがシンプルに次のようにしてみます。plugin.ts の方にもelysiaを読み込むimportは必要ですが lissen はメインのindex.tsだけで良いです。

```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 から使ってみます。
```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 が動作したことが判ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7103/039b5c9d-bada-730f-c40d-180895396a75.png)

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

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



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

https://qiita.com/advent-calendar/2023/bunjs

https://qiita.com/toshirot/items/01c7f779d87985b1f9be

https://qiita.com/toshirot/items/2f0db79b3c2480e64f41

https://qiita.com/toshirot/items/94616478d3e73e7cc5b9

https://qiita.com/toshirot/items/f6bd561bc2522f1d26e0

https://qiita.com/toshirot/items/a5dc53ef191d20bbeb42

https://qiita.com/toshirot/items/74476af27e67d8534c5a

https://qiita.com/toshirot/items/94961b6dde72be80ab0c

https://qiita.com/toshirot/items/7a0555b46b3a64a4f643

https://qiita.com/toshirot/items/c4d090bc38f9b85d8cdd

https://qiita.com/toshirot/items/4e8e571dd50a45c651f0