aboutsummaryrefslogtreecommitdiffstats
path: root/packages/renderer/src/devTools.ts
blob: 3ec66aaacb63e52e9821b1687c3697e8947fbec4 (plain) (blame)
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*
 * 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 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);
  });
}

/**
 * Sends a message to the main process to reload all services when
 * `build/watch.js` sends a reload event on bundle write.
 */
export function hotReloadServices(): void {
  import.meta.hot?.on('sophie:reload-services', () => {
    window.sophieRenderer.dispatchAction({
      action: 'reload-all-services',
    });
  });
}