feat: Add react and mobx integration

1 files changed, 61 insertions, 0 deletions

diff --git a/packages/renderer/src/stores/RootStore.ts b/packages/renderer/src/stores/RootStore.ts
new file mode 100644
index 0000000..86efac6
--- /dev/null
+++ b/packages/renderer/src/stores/RootStore.ts
@@ -0,0 +1,61 @@
+import {
+  applySnapshot,
+  applyPatch,
+  getEnv as getAnyEnv,
+  IAnyStateTreeNode,
+  Instance,
+  types
+} from 'mobx-state-tree';
+import { sharedStore, SophieRenderer } from '@sophie/shared';
+
+export interface RootEnv {
+  ipc: SophieRenderer;
+}
+
+/**
+ * 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): RootEnv {
+  return getAnyEnv<RootEnv>(model);
+}
+
+export const rootStore = types.model('RootStore', {
+  shared: sharedStore,
+}).actions((self) => ({
+  buttonClick() {
+    getEnv(self).ipc.buttonClick();
+  },
+}));
+
+export interface RootStore extends Instance<typeof rootStore> {}
+
+/**
+ * Creates a new `RootStore` with a new environment and connects it to `ipc`.
+ *
+ * Changes to the `shared` store in the main process will be propagated to
+ * the newly created store via `ipc`.
+ *
+ * @param ipc The `sophieRenderer` context bridge.
+ */
+export function createAndConnectRootStore(ipc: SophieRenderer): RootStore {
+  const store = rootStore.create({
+    shared: {},
+  }, {
+    ipc,
+  });
+
+  ipc.setSharedStoreListener({
+    onSnapshot(snapshot) {
+      applySnapshot(store.shared, snapshot);
+    },
+    onPatch(patch) {
+      applyPatch(store.shared, patch);
+    },
+  });
+
+  return store;
+}