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

はじめに

以前書いたLIFF v2.22.0のプラガブル機能を試してみようと思ったらliff-mockが使えなかったで立てたIssueがfixされてLIFFのプラガブル機能をliff-mockで利用する方法がReadmeに追加されました。バグではなく事前処理が必要だったようで、具体的には

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が利用可能になるようです。

#やってみる
というわけで検証してみます。前回のやってみるで利用したliff-v2220-pluggable-exampleを更新していきます。

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

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;

実行します

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()が正常動作していることが確認できます。

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

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

おわりに

issueのコメントから察するに設計上では配慮があったけどドキュメントが更新できてなかった感じですね。これでLIFF v2.22.0の新機能 プラガブル機能で存分に開発できます。liff-mock開発陣の対応に感謝です！