オープンソースのWikiであるGROWIにはプラグイン機能が用意されています。自社のデータを表示したり、表示をカスタマイズするのに利用できます。
執筆時点での最新版である7.2から、ReactのuseStateやuseEffectなどのHooksが使えるようになりました。これにより、GROWIプラグインでユーザーのアクションなどを伴ったインタラクティブなプラグイン開発が可能になりました。
今回は、そのReact Hooksを使ったGROWIプラグインの開発方法を解説します。
実際の動作
GROWIのページにて、ボタンを押した際のリアクション（カウントアップ）や外部データの取得&表示を行っています。
プラグインは3種類
GROWIで作れるプラグインは全部で3種類あります（組み合わせ可能です）。
- RemarkPlugin
- RehypePlugin
- React Component Plugin
今回対象となるのは、React Component Pluginです。これは、Reactコンポーネントを使って表示をカスタマイズできるプラグインです。
const { a } = options.components;
// replace
options.components.a = helloGROWI(a);
React Component Pluginでは、aタグやcodeタグ、imgタグなどの動作を標準のものと置き換えられます。上記のコードの場合、aタグをhelloGROWI関数で置き換えています。例はこちらのコードを参考にしてください。
React Hooksを使ったプラグイン開発
プラグイン側で利用するのは growiFacade.react です。これは、GROWI本体側のReactオブジェクトが入っています。以下のようなコードで、各種React Hooksを取り出せます。
const { useEffect, useCallback, useState } = growiFacade.react;
後は通常のReactアプリケーションのように利用できます。
const [count, setCount] = useState(0);
return (
<div>Count: {count}</div>
<button
onClick={useCallback(() => setCount(c => c + 1), [])}
>
Up
</button>
)
また、これまでは利用できなかった外部データの取得や画面への反映も可能になりました。
const [obj, setObj] = useState<FakeJson | null>(null);
const getFakeJson = async(count: number) => {
const url = `https://jsonplaceholder.typicode.com/todos/${count}`;
const response = await fetch(url);
const json = await response.json() as FakeJson;
setObj(json);
};
useEffect(() => {
if (count > 0) getFakeJson(count);
}, [count]);
return (
{ obj && (
<div>
<h2>{obj.title}</h2>
<div>{obj.id} & {obj.userId}</div>
<p>{obj.completed ? 'Completed' : 'Not Completed'}</p>
</div>
)}
)
注意点
useEffectやuseStateなどは本体側のオブジェクトから取得する形で実現しています。通常のReactアプリケーションのように import { useState, useEffect } from 'react' ではないので注意してください。つまり、npmパッケージとして公開されているReactコンポーネントを、そのまま利用できない可能性があります。
その場合は @r2wc/react-to-web-component を使って、ReactコンポーネントをWeb Componentにする方法が利用できます。
参考例： GROWIで手書き風ドローができるExcalidrawを使えるプラグインを作りました #TypeScript - Qiita
まとめ
GROWIプラグインでReact Hooksを使ったプラグイン開発が可能になりました。これにより、ユーザーのアクションなどを伴ったインタラクティブなプラグイン開発が可能になります。外部データと連係するプラグインも作成できるでしょう。
プラグインを開発して、より便利にGROWIを活用してください。