make lazy-loading of MonacoSettingsEditor more robust

Hot reloading makes it so that the reference to MonacoSettingsEditor is not the class, but rather a proxy component. This means that isStandaloneCodeEditor and addEditorAction aren't defined as methods on the value when hot reloading is enabled. To work around this issue, this commit uses a more compatible way of lazy-loading the class.
sourcegraph · May 14, 2019 · 8c654b1 · 8c654b1
1 parent 7164fad
commit 8c654b1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx b/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx
@@ -151,12 +151,9 @@ export class DynamicallyImportedMonacoSettingsEditor extends React.PureComponent
         }
     }
 
-    private monacoRef = (monacoValue: typeof _monaco | null) => {
+    private monacoRef = async (monacoValue: typeof _monaco | null) => {
         this.monaco = monacoValue
-        // This function can only be called if the lazy MonacoSettingsEditor component was loaded,
-        // so we know its #_result property is set by now.
-        const monacoSettingsEditor = MonacoSettingsEditor._result
-        if (this.monaco && monacoSettingsEditor) {
+        if (this.monaco && MonacoSettingsEditor) {
             this.subscriptions.add(
                 disposableToFn(
                     this.monaco.editor.onDidCreateEditor(editor => {
@@ -166,14 +163,18 @@ export class DynamicallyImportedMonacoSettingsEditor extends React.PureComponent
             )
             this.subscriptions.add(
                 disposableToFn(
-                    this.monaco.editor.onDidCreateModel(model => {
+                    this.monaco.editor.onDidCreateModel(async model => {
+                        // This function can only be called if the lazy MonacoSettingsEditor component was loaded,
+                        // so this import call will not incur another load.
+                        const { MonacoSettingsEditor } = await import('../settings/MonacoSettingsEditor')
+
                         if (
                             this.configEditor &&
-                            monacoSettingsEditor.isStandaloneCodeEditor(this.configEditor) &&
+                            MonacoSettingsEditor.isStandaloneCodeEditor(this.configEditor) &&
                             this.props.actions
                         ) {
                             for (const { id, label, run } of this.props.actions) {
-                                monacoSettingsEditor.addEditorAction(this.configEditor, model, label, id, run)
+                                MonacoSettingsEditor.addEditorAction(this.configEditor, model, label, id, run)
                             }
                         }
                     })

diff --git a/web/src/settings/SettingsFile.tsx b/web/src/settings/SettingsFile.tsx
@@ -201,10 +201,7 @@ export class SettingsFile extends React.PureComponent<Props, State> {
 
     private monacoRef = (monacoValue: typeof _monaco | null) => {
         this.monaco = monacoValue
-        // This function can only be called if the lazy MonacoSettingsEditor component was loaded,
-        // so we know its #_result property is set by now.
-        const monacoSettingsEditor = MonacoSettingsEditor._result
-        if (this.monaco && monacoSettingsEditor) {
+        if (this.monaco) {
             this.subscriptions.add(
                 disposableToFn(
                     this.monaco.editor.onDidCreateEditor(editor => {
@@ -214,10 +211,14 @@ export class SettingsFile extends React.PureComponent<Props, State> {
             )
             this.subscriptions.add(
                 disposableToFn(
-                    this.monaco.editor.onDidCreateModel(model => {
-                        if (this.editor && monacoSettingsEditor.isStandaloneCodeEditor(this.editor)) {
+                    this.monaco.editor.onDidCreateModel(async model => {
+                        // This function can only be called if the lazy MonacoSettingsEditor component was loaded,
+                        // so this import call will not incur another load.
+                        const { MonacoSettingsEditor } = await import('../settings/MonacoSettingsEditor')
+
+                        if (this.editor && MonacoSettingsEditor.isStandaloneCodeEditor(this.editor)) {
                             for (const { id, label, run } of settingsActions) {
-                                monacoSettingsEditor.addEditorAction(this.editor, model, label, id, run)
+                                MonacoSettingsEditor.addEditorAction(this.editor, model, label, id, run)
                             }
                         }
                     })