packages/renderer/src/devTools.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import type { IAnyStateTreeNode } from 'mobx-state-tree';

/**
 * Connects the `model` to the redux devtools extension after loading the required
 * dependencies asynchronously.
 *
 * We have to apply a workaround to load `remotedev` by shimming the `global` object,
 * because `remotedev` uses an old version of `socketcluster-client` that refers to
 * `global` instead of `globalThis`.
 *
 * Due to the old dependencies, this function is not safe to call in production.
 * However, we don't bundle `remotedev` in production, so the call would fail anyways.
 *
 * @param model The store to connect to the redux devtools.
 * @see https://github.com/SocketCluster/socketcluster-client/issues/118#issuecomment-469064682
 */
async function exposeToReduxDevtoolsAsync(model: IAnyStateTreeNode): Promise<void> {
  (window as { global?: unknown }).global = window;

  const [remotedev, { connectReduxDevtools }] = await Promise.all([
    // @ts-ignore
    import('remotedev'),
    import('mst-middlewares'),
  ]);
  connectReduxDevtools(remotedev, model);
}

/**
 * Connects the `model` to the redux devtools extension.
 *
 * @param model The store to connect to the redux devtools.
 */
export function exposeToReduxDevtools(model: IAnyStateTreeNode): void {
  exposeToReduxDevtoolsAsync(model).catch((err) => {
    console.error('Could not connect to Redux devtools', err);
  });
}