コードをJSにコピペして保存する前にCSSを保存すると、コピペしていたJSが消えるバグ

再現方法

新しいファイルを作る

JSを編集する(保存はしない)

CSSのコードをクリックして、Cmd+Sで保存

JSが消える

原因

CSSだけが保存されて、JSが保存されないまま、editor.setValueされてしまった

code:js

// コードエディタを更新

useEffect(() => {

const code = list.find((item) => item.id === id)?.code;

editor?.setValue(code || "");

listが更新された時に問答無用でsetValueされてしまう

解決方法

listが更新された時にeditor.setValueを実行しないようにする

code:js

useEffect(() => {

const code = list.find((item) => item.id === id)?.code;

editor?.setValue(code || "");

}, id); // , list を消しただけ

MonacoEditorの状態が主であり、chrome.storageは従

そもそもuseListすら必要ない

別のデバイスとsyncさせる場合は競合状態の解決が必要だが、そんな事はしない

初回ロードが終わるまでViewを表示しなければ、この辺の問題はスッキリ解決するが

後々githubとかからコードをfetchするとしたら、やはり非同期は必要か？

それももっと上の階層でやれば良いだけな気がしてきた

JSとCSSを同時に保存する

本当はこれがやりたい

chrome.storageとMonacoEditorにそれぞれストアの概念があるせいで、ReactのState管理と相性が悪すぎる

何が主で何が従なのかを明確に決めた方がいい

現在）chrome.storageをsubscribeしたReact Stateが主、MonacoEditorは従

これで上記のようなバグが起こったが、回避策はある

①開いているコードはMonacoEditorが主、開いていないコードはchrome.storageが主、Reactは常に従

openするタイミングでchrome.storage.getしてeditor.setValueする

EditorコンポーネントではcodeをState管理しない

Explorerコンポーネントではchrome.storage.onChangeをsubscribeしてViewを更新する

Deleteも必要

Deleteしたタイミングで別のファイルをopenする

②