Electron+Reactアプリにプラグインシステムを付ける 創刊

あんまり書く元気がないのでほとんどのところは実際の実装を見てもらうことにして

配布用型定義

プラグイン読み込み部分

勘所を書きます

重要なのはこれです

同じブラウザ内で用いるReactは全て統一する必要があります

用いる場合はもRecoilも…今回の例では用います

これはバージョンが同一というだけではなく、本当に同じソースから使用する必要があります

なので、本体側からプラグインに対してReactを渡すという手筈が必須になってきます

がしかし、引数で受け取らせるというのはなかなか現実的ではありません

code:global.d.ts

import _React from "react"

import _Recoil from "recoil"

declare global {

// eslint-disable-next-line no-var

declare var React: typeof _React

// eslint-disable-next-line no-var

declare var Recoil: typeof _Recoil

}

code:index.web.tsx

import React from "react"

import Recoil from "recoil"

global.React = React

global.Recoil = Recoil

なお、react-domは露出の必要はありません

次にプラグインから読ませる方法です

プラグインはwebpackでバンドルされているものとします

code:webpack.config.ts

externals: {

react: "root React",

recoil: "root Recoil",

},

これでプラグインがグローバル変数のReact/Recoilを用いるようになります

externalsは割と柔軟に置換されるので、メインプロセスでも読み込ませたいというニッチな需要も満たせます

code:webpack.config.ts

大丈夫になった、webpack5でもいけます

ただプラグインファイルを統一すると、メインプロセスでレンダラーにしかないグローバル変数触りに行ったり、先程Externalsで設定した外部依存をメインプロセスのグローバル変数に求めに行ったりするので、これはそれぞれゴリ押しします

code:loader.js

if (typeof window !== "undefined") {

// eslint-disable-next-line @typescript-eslint/no-var-requires

require("../../zenzawatch/src/CommentPlayer").NicoCommentPlayer

} else {

}

webpackはこういうことをしてもちゃんとそういう動きをしてくれるので本当にすごい

Reactをメインプロセスに求められる場合

上見てください

Recoilのマルチウィンドウステート共有

ただ現状alphaのレベルのを突っ込んじゃったので今後全部変わるかも

これが一番やばいです

現状、全てのウィンドウで発生したsetをすべて拾って、共有するべきkeyだった場合にメインプロセスを通じて全てのウィンドウに伝搬、受け取った側でsetしています

自分で書いてて泣いちゃうな

なので高速で変更すると

ウィンドウ1がステートAを変更する（hoge）

ウィンドウ1がステートAを共有する（hoge）

ウィンドウ2がステートAを受け取って反映する（hoge）

ウィンドウ1がステートAを変更する（piyo）

ウィンドウ2がステートAを共有する（hoge）

ウィンドウ1がステートAを共有する（piyo）

ウィンドウ1がステートAを受け取って反映してしまう（hoge）

と言った感じで無限ループに陥る場合がある

もっといい方法はあるのかな？

少しばかりマシな方法はあると思うが、現状のRecoilのAPIだとこういうユースに合う使い方出来なさそう

素直にredux+saga使ったほうが良いと思いますが、私はどうしてもrecoilが使いたかった

人は初めて見た状態管理を親だとおもうから