refactor: Config persistence architecture

The architecture in the main process is split into 3 main parts:
* services: interfaces for services are injected into the stores through
  the MainEnv interface (for testability)
* services/impl: electron-specific implementations of services
* stores: the actions of the stores can invoke (asynchronous) services

8 files changed, 302 insertions, 124 deletions

diff --git a/packages/main/package.json b/packages/main/package.json
index 96cd52c..024fba8 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -14,11 +14,15 @@
     "@sophie/shared": "workspace:*",
     "electron": "16.0.5",
     "json5": "^2.2.0",
+    "lodash": "^4.17.21",
     "mobx": "^6.3.10",
-    "mobx-state-tree": "^5.1.0"
+    "mobx-state-tree": "^5.1.0",
+    "ms": "^2.1.3"
   },
   "devDependencies": {
     "@types/electron-devtools-installer": "^2.2.1",
+    "@types/lodash": "^4.14.178",
+    "@types/ms": "^0.7.31",
     "@types/node": "^17.0.4",
     "electron-devtools-installer": "^3.2.0",
     "rimraf": "^3.0.2",
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 8055ce2..8297ff5 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -26,20 +26,9 @@ import {
   nativeTheme,
 } from 'electron';
 import { readFileSync } from 'fs';
-import {
-  readFile,
-  stat,
-  watch,
-  writeFile,
-} from 'fs/promises';
-import JSON5 from 'json5';
+import { readFile } from 'fs/promises';
 import { autorun } from 'mobx';
-import {
-  applySnapshot,
-  getSnapshot,
-  onPatch,
-  onSnapshot,
-} from 'mobx-state-tree';
+import { getSnapshot, onPatch } from 'mobx-state-tree';
 import { join } from 'path';
 import {
   ServiceToMainIpcMessage,
@@ -58,8 +47,8 @@ import {
   installDevToolsExtensions,
   openDevToolsWhenReady,
 } from './devTools';
-import { ConfigSnapshotOut } from './stores/Config';
-import { createRootStore } from './stores/RootStore';
+import { ConfigPersistenceImpl } from './services/impl/ConfigPersistenceImpl';
+import { createMainStore } from './stores/MainStore';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
@@ -116,7 +105,12 @@ if (isDevelopment) {
 
 let mainWindow: BrowserWindow | null = null;
 
-const store = createRootStore();
+const store = createMainStore({
+  configPersistence: new ConfigPersistenceImpl(
+    app.getPath('userData'),
+    'config.json5',
+  ),
+});
 
 autorun(() => {
   nativeTheme.themeSource = store.config.themeSource;
@@ -127,96 +121,7 @@ nativeTheme.on('updated', () => {
   store.setShouldUseDarkColors(nativeTheme.shouldUseDarkColors);
 });
 
-const userDataDir = app.getPath('userData');
-const configFileName = 'config.json5';
-const configPath = join(userDataDir, configFileName);
-let loadingConfig = false;
-let savingConfig = false;
-let configMtime: Date | null = null;
-
-async function loadConfig(): Promise<void> {
-  let configStr: string;
-  try {
-    configStr = await readFile(configPath, 'utf8');
-  } catch (err) {
-    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
-      console.log('Creating config', configPath);
-      return saveConfig(getSnapshot(store.config));
-    }
-    throw err;
-  }
-  let configSnapshot: unknown;
-  try {
-    configSnapshot = JSON5.parse(configStr);
-  } catch (err) {
-    console.error('Invalid config file', configPath, err);
-    return;
-  }
-  loadingConfig = true;
-  try {
-    applySnapshot(store.config, configSnapshot);
-  } catch (err) {
-    console.error('Falied to apply snaphot', configPath, configSnapshot, err);
-  } finally {
-    loadingConfig = false;
-  }
-}
-
-async function saveConfig(configSnapshot: ConfigSnapshotOut): Promise<void> {
-  const configJson = JSON5.stringify(configSnapshot, {
-    space: 2,
-  });
-  savingConfig = true;
-  try {
-    await writeFile(configPath, configJson, 'utf8');
-    const stats = await stat(configPath);
-    configMtime = stats.mtime;
-  } finally {
-    savingConfig = false;
-  }
-  console.log('Wrote config', configPath);
-}
-
-onSnapshot(store.config, (snapshot) => {
-  if (!loadingConfig) {
-    saveConfig(snapshot).catch((err) => {
-      console.error('Failed to save config', configPath, err);
-    });
-  }
-});
-
-async function watchConfig(): Promise<void> {
-  const configWatcher = watch(userDataDir, {
-    persistent: false,
-  });
-  for await (const { eventType, filename } of configWatcher) {
-    if (eventType !== 'change'
-      && (filename !== configFileName || filename !== null)) {
-      continue;
-    }
-    let mtime: Date;
-    try {
-      const stats = await stat(configPath);
-      mtime = stats.mtime;
-    } catch (err) {
-      if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
-        continue;
-      }
-      throw err;
-    }
-    if (!savingConfig && (configMtime === null || mtime > configMtime)) {
-      await loadConfig();
-      configMtime = mtime;
-      console.log('Reloaded config', configPath);
-    }
-  }
-}
-
-loadConfig().catch((err) => {
-  console.error('Failed to load config', configPath, err);
-}).then(watchConfig).catch((err) => {
-  console.error('Error when watching for config changes', configPath, err);
-});
+store.config.initConfig();
 
 const rendererBaseUrl = getResourceUrl('../renderer/');
 function shouldCancelMainWindowRequest(url: string, method: string): boolean {
diff --git a/packages/main/src/services/ConfigPersistence.ts b/packages/main/src/services/ConfigPersistence.ts
new file mode 100644
index 0000000..f9a82de
--- /dev/null
+++ b/packages/main/src/services/ConfigPersistence.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { IDisposer } from 'mobx-state-tree';
+import ms from 'ms';
+
+import type { ConfigSnapshotOut } from '../stores/Config';
+
+export const CONFIG_DEBOUNCE_TIME: number = ms('1s');
+
+export type ReadConfigResult = { found: true; data: unknown; } | { found: false; };
+
+export interface ConfigPersistence {
+  readConfig(): Promise<ReadConfigResult>;
+
+  writeConfig(configSnapshot: ConfigSnapshotOut): Promise<Date>;
+
+  watchConfig(callback: (mtime: Date) => Promise<void>): IDisposer;
+}
diff --git a/packages/main/src/services/MainEnv.ts b/packages/main/src/services/MainEnv.ts
new file mode 100644
index 0000000..23ee9a1
--- /dev/null
+++ b/packages/main/src/services/MainEnv.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { IAnyStateTreeNode, getEnv as getAnyEnv } from 'mobx-state-tree';
+
+import type { ConfigPersistence } from './ConfigPersistence';
+
+export interface MainEnv {
+  configPersistence: ConfigPersistence;
+}
+
+/**
+ * Gets a well-typed environment from `model`.
+ *
+ * Only useable inside state trees created by `createAndConnectRootStore`.
+ *
+ * @param model The state tree node.
+ */
+export function getEnv(model: IAnyStateTreeNode): MainEnv {
+  return getAnyEnv<MainEnv>(model);
+}
diff --git a/packages/main/src/services/impl/ConfigPersistenceImpl.ts b/packages/main/src/services/impl/ConfigPersistenceImpl.ts
new file mode 100644
index 0000000..097ab74
--- /dev/null
+++ b/packages/main/src/services/impl/ConfigPersistenceImpl.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { watch } from 'fs';
+import { readFile, stat, writeFile } from 'fs/promises';
+import JSON5 from 'json5';
+import { throttle } from 'lodash';
+import { IDisposer } from 'mobx-state-tree';
+import { join } from 'path';
+
+import { CONFIG_DEBOUNCE_TIME, ConfigPersistence, ReadConfigResult } from '../ConfigPersistence';
+import type { ConfigSnapshotOut } from  '../../stores/Config';
+
+export class ConfigPersistenceImpl implements ConfigPersistence {
+  readonly #userDataDir: string;
+
+  readonly #configFileName: string;
+
+  readonly #configFilePath: string;
+
+  constructor(
+    userDataDir: string,
+    configFileName: string,
+  ) {
+    this.#userDataDir = userDataDir;
+    this.#configFileName = configFileName;
+    this.#configFilePath = join(this.#userDataDir, this.#configFileName);
+  }
+
+  async readConfig(): Promise<ReadConfigResult> {
+    let configStr;
+    try {
+      configStr = await readFile(this.#configFilePath, 'utf8');
+    } catch (err) {
+      if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+        return { found: false };
+      }
+      throw err;
+    }
+    return {
+      found: true,
+      data: JSON5.parse(configStr),
+    };
+  }
+
+  async writeConfig(configSnapshot: ConfigSnapshotOut): Promise<Date> {
+    const configJson = JSON5.stringify(configSnapshot, {
+      space: 2,
+    });
+    await writeFile(this.#configFilePath, configJson, 'utf8');
+    const { mtime } = await stat(this.#configFilePath);
+    return mtime;
+  }
+
+  watchConfig(callback: (mtime: Date) => Promise<void>): IDisposer {
+    const configChanged = throttle(async () => {
+      let mtime: Date;
+      try {
+        const stats = await stat(this.#configFilePath);
+        mtime = stats.mtime;
+      } catch (err) {
+        if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+          return;
+        }
+        throw err;
+      }
+      return callback(mtime);
+    }, CONFIG_DEBOUNCE_TIME);
+
+    const watcher = watch(this.#userDataDir, {
+      persistent: false,
+    });
+
+    watcher.on('change', (eventType, filename) => {
+      if (eventType === 'change'
+        && (filename === this.#configFileName || filename === null)) {
+        configChanged()?.catch((err) => {
+          console.log('Unhandled error while listening for config changes', err);
+        });
+      }
+    });
+
+    return () => watcher.close();
+  }
+}
diff --git a/packages/main/src/stores/Config.ts b/packages/main/src/stores/Config.ts
index 483a491..eb53635 100644
--- a/packages/main/src/stores/Config.ts
+++ b/packages/main/src/stores/Config.ts
@@ -18,15 +18,103 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { Instance } from 'mobx-state-tree';
-import { config as originalConfig, ThemeSource } from '@sophie/shared';
+import { debounce } from 'lodash';
+import {
+  applySnapshot,
+  flow,
+  getSnapshot,
+  IDisposer,
+  Instance,
+  onSnapshot,
+} from 'mobx-state-tree';
+import {
+  config as originalConfig,
+  ConfigSnapshotIn,
+  ConfigSnapshotOut,
+  ThemeSource,
+} from '@sophie/shared';
 
-export type { ConfigSnapshotIn, ConfigSnapshotOut } from '@sophie/shared';
+import { CONFIG_DEBOUNCE_TIME, ReadConfigResult } from '../services/ConfigPersistence';
+import { getEnv } from '../services/MainEnv';
 
 export const config = originalConfig.actions((self) => ({
   setThemeSource(mode: ThemeSource) {
     self.themeSource = mode;
   },
-}));
+})).actions((self) => {
+  let lastSnapshotOnDisk: ConfigSnapshotOut | null = null;
+  let writingConfig = false;
+  let configMtime: Date | null = null;
+  let onSnapshotDisposer: IDisposer | null = null;
+  let watcherDisposer: IDisposer | null = null;
+
+  function dispose() {
+    onSnapshotDisposer?.();
+    watcherDisposer?.();
+  }
+
+  const actions: {
+    beforeDetach(): void,
+    readConfig(): Promise<boolean>;
+    writeConfig(): Promise<void>;
+    initConfig(): Promise<void>;
+  } = {
+    beforeDetach() {
+      dispose();
+    },
+    readConfig: flow(function*() {
+      const result: ReadConfigResult = yield getEnv(self).configPersistence.readConfig();
+      if (result.found) {
+        try {
+          applySnapshot(self, result.data);
+          lastSnapshotOnDisk = getSnapshot(self);
+          console.log('Loaded config');
+        } catch (err) {
+          console.error('Failed to read config', result.data, err);
+        }
+      }
+      return result.found;
+    }),
+    writeConfig: flow(function*() {
+      const snapshot = getSnapshot(self);
+      writingConfig = true;
+      try {
+        configMtime = yield getEnv(self).configPersistence.writeConfig(snapshot);
+        lastSnapshotOnDisk = snapshot;
+        console.log('Wrote config');
+      } finally {
+        writingConfig = false;
+      }
+    }),
+    initConfig: flow(function*() {
+      dispose();
+      const foundConfig: boolean = yield actions.readConfig();
+      if (!foundConfig) {
+        console.log('Creating new config file');
+        try {
+          yield actions.writeConfig();
+        } catch (err) {
+          console.error('Failed to initialize config');
+        }
+      }
+      onSnapshotDisposer = onSnapshot(self, debounce((snapshot) => {
+        // We can compare snapshots by reference, since it is only recreated on store changes.
+        if (lastSnapshotOnDisk !== snapshot) {
+          actions.writeConfig().catch((err) => {
+            console.log('Failed to write config on config change', err);
+          })
+        }
+      }, CONFIG_DEBOUNCE_TIME));
+      watcherDisposer = getEnv(self).configPersistence.watchConfig(async (mtime) => {
+        if (!writingConfig && (configMtime === null || mtime > configMtime)) {
+          await actions.readConfig();
+        }
+      });
+    }),
+  };
+  return actions;
+});
 
 export interface Config extends Instance<typeof config> {}
+
+export type { ConfigSnapshotIn, ConfigSnapshotOut };
diff --git a/packages/main/src/stores/RootStore.ts b/packages/main/src/stores/MainStore.ts
index 31e2b71..ee215a7 100644
--- a/packages/main/src/stores/RootStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -19,15 +19,13 @@
  */
 
 import { applySnapshot, Instance, types } from 'mobx-state-tree';
-import {
-  BrowserViewBounds,
-  emptySharedStore,
-} from '@sophie/shared';
+import { BrowserViewBounds, emptySharedStore } from '@sophie/shared';
 
 import type { Config } from './Config';
+import { MainEnv } from '../services/MainEnv';
 import { sharedStore } from './SharedStore';
 
-export const rootStore = types.model('RootStore', {
+export const mainStore = types.model('MainStore', {
   browserViewBounds: types.model('BrowserViewBounds', {
     x: 0,
     y: 0,
@@ -48,11 +46,14 @@ export const rootStore = types.model('RootStore', {
   }
 }));
 
-export interface RootStore extends Instance<typeof rootStore> {}
+export interface RootStore extends Instance<typeof mainStore> {}
 
-export function createRootStore(): RootStore {
-  return rootStore.create({
-    browserViewBounds: {},
-    shared: emptySharedStore,
-  });
+export function createMainStore(env: MainEnv): RootStore {
+  return mainStore.create(
+    {
+      browserViewBounds: {},
+      shared: emptySharedStore,
+    },
+    env,
+  );
 }
diff --git a/yarn.lock b/yarn.lock
index 8e929b7..64a8f07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -838,12 +838,16 @@ __metadata:
     "@sophie/service-shared": "workspace:*"
     "@sophie/shared": "workspace:*"
     "@types/electron-devtools-installer": ^2.2.1
+    "@types/lodash": ^4.14.178
+    "@types/ms": ^0.7.31
     "@types/node": ^17.0.4
     electron: 16.0.5
     electron-devtools-installer: ^3.2.0
     json5: ^2.2.0
+    lodash: ^4.17.21
     mobx: ^6.3.10
     mobx-state-tree: ^5.1.0
+    ms: ^2.1.3
     rimraf: ^3.0.2
     typescript: ^4.5.4
     vite: ^2.7.6
@@ -1027,7 +1031,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ms@npm:*":
+"@types/ms@npm:*, @types/ms@npm:^0.7.31":
   version: 0.7.31
   resolution: "@types/ms@npm:0.7.31"
   checksum: daadd354aedde024cce6f5aa873fefe7b71b22cd0e28632a69e8b677aeb48ae8caa1c60e5919bb781df040d116b01cb4316335167a3fc0ef6a63fa3614c0f6da
@@ -4088,7 +4092,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:^2.0.0":
+"ms@npm:^2.0.0, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d