LIFF v2.22.0のプラガブル機能をliff-mockで利用する

# はじめに
以前書いた[LIFF v2.22.0のプラガブル機能を試してみようと思ったらliff-mockが使えなかった](https://qiita.com/bathtimefish/items/e74c58957b2681b03ad0)で立てた[Issue](https://github.com/line/liff-mock/issues/14)がfixされてLIFFのプラガブル機能をliff-mockで利用する方法が[Readme](https://github.com/line/liff-mock/blob/main/README.md#with-pluggable-sdk)に追加されました。バグではなく事前処理が必要だったようで、具体的には

```example.ts
import liff from '@line/liff/core';
import IsInClientModule from "@line/liff/is-in-client";
import { LiffMockPlugin } from '@line/liff-mock';

liff.use(new IsInClientModule());  // <-- Please install IsInClientModule before LiffMockPlugin
liff.use(new LiffMockPlugin());

liff.init({
  liffId: 'liff-xxxx',
  mock: true, // enable mock mode
});
```

というふうに`liff.use(new IsInClientModule());`を事前に呼ぶことでプラガブル下でもLiffMockPluginが利用可能になるようです。

#やってみる
というわけで検証してみます。[前回のやってみる](https://qiita.com/bathtimefish/items/e74c58957b2681b03ad0#%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B)で利用した`liff-v2220-pluggable-example`を更新していきます。

まず、`package.json`の`@line/liff'が`2.22.0`になっているのを確認します

```shell
cd liff-v2220-pluggable-example
cat package.json | jq .dependencies
{
  "@line/liff": "2.22.0",
  "@line/liff-mock": "^1.0.3",
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}
yarn
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.26s.
```

`src/App.tsx` を以下のように更新します
```src/App.ts
import { useEffect, useState } from "react";
// import liff from "@line/liff";
import liff from "@line/liff/core";
import IsInClientModule from "@line/liff/is-in-client";
import "./App.css";
import { LiffMockPlugin } from '@line/liff-mock';

liff.use(new IsInClientModule());
liff.use(new LiffMockPlugin());

function App() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID,
        mock: true,
      })
      .then(() => {
        setMessage("LIFF init succeeded.");
      })
      .catch((e: Error) => {
        setMessage("LIFF init failed.");
        setError(`${e}`);
      });
  });

  return (
    <div className="App">
      <h1>create-liff-app</h1>
      {message && <p>{message}</p>}
      {error && (
        <p>
          <code>{error}</code>
        </p>
      )}
      <a
        href="https://developers.line.biz/ja/docs/liff/"
        target="_blank"
        rel="noreferrer"
      >
        LIFF Documentation
      </a>
    </div>
  );
}

export default App;
```

実行します

```shell
yarn dev
yarn run v1.22.19
warning package.json: No license field
$ vite

  vite v2.9.15 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 588ms.

16:28:36 [vite] ✨ new dependencies optimized: @line/liff/is-in-client
16:28:36 [vite] ✨ optimized dependencies changed. reloading
```

`http://localhost:3000/`にアクセスすると、モック化されてプラガブルな`liff.init()`が正常動作していることが確認できます。

![スクリーンショット 2023-06-28 16.30.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/f9dc2de2-2c66-a5a7-dff1-3701c8960c46.png)

ちなみに`liff.init()`の引数`{mock: true}`を`false`に変更すると、下図のように初期化が失敗します。オプションで正常に処理できていますね。

![スクリーンショット 2023-06-28 16.30.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/f0fbb18e-1cb3-79a7-6c86-c9afcf4f5c62.png)

プラガブルなliffでも問題なくmock化できることが確認できました。

# おわりに
[issueのコメント](https://github.com/line/liff-mock/issues/14#issuecomment-1588654122)から察するに設計上では配慮があったけどドキュメントが更新できてなかった感じですね。これでLIFF v2.22.0の新機能 プラガブル機能で存分に開発できます。liff-mock開発陣の対応に感謝です！