Improves lazy loading.

visualization-bundle/src/visualizers/monaco-text-diff-visualizer/MonacoEditor.tsx

@@ -33,10 +33,10 @@ export function getLanguageId(fileName: string): string {
 }
 
 @observer
-export class MonacoEditor extends React.Component<{
+export class MonacoDiffEditor extends React.Component<{
 	originalText: string;
 	modifiedText: string;
-	languageId: string;
+	fileName?: string;
 	theme: Theme;
 }> {
 	@observable private editor:
@@ -49,6 +49,13 @@ export class MonacoEditor extends React.Component<{
 		}
 	}
 
+	get languageId(): string {
+		if (!this.props.fileName) {
+			return "text";
+		}
+		return getLanguageId(this.props.fileName);
+	}
+
 	private originalModel:
 		| monacoTypes.editor.ITextModel
 		| undefined = undefined;
@@ -61,12 +68,12 @@ export class MonacoEditor extends React.Component<{
 		if (this.editor) {
 			const originalModel = getLoadedMonaco().editor.createModel(
 				this.props.originalText,
-				this.props.languageId,
+				this.languageId,
 				undefined
 			);
 			const modifiedModel = getLoadedMonaco().editor.createModel(
 				this.props.modifiedText,
-				this.props.languageId,
+				this.languageId,
 				undefined
 			);
 

visualization-bundle/src/visualizers/monaco-text-diff-visualizer/index.tsx

@@ -7,15 +7,16 @@ import {
 } from "@hediet/semantic-json";
 import * as React from "react";
 import {
-	getLanguageId,
-	MonacoEditor as MonacoDiffEditor,
-} from "./MonacoEditor";
-import {
+	createReactVisualization,
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../consts";
+import { makeLazyLoadable } from "../../utils/LazyLoadable";
+
+const MonacoDiffEditorLazyLoadable = makeLazyLoadable(
+	async () => (await import("./MonacoEditor")).MonacoDiffEditor
+);
 
 export const monacoTextDiffVisualizer = createVisualizer({
 	id: "monaco-text-diff",
@@ -34,20 +35,18 @@ export const monacoTextDiffVisualizer = createVisualizer({
 		}),
 	}).defineAs(visualizationNs("MonacoTextDiffVisualizationData")),
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 900 }, theme => {
-			let id = "text";
-			if (data.fileName) {
-				id = getLanguageId(data.fileName);
-			}
-			return (
-				<MonacoDiffEditor
+		createReactVisualization(
+			self,
+			{ priority: 900, preload: MonacoDiffEditorLazyLoadable.preload },
+			({ theme }) => (
+				<MonacoDiffEditorLazyLoadable
 					originalText={data.otherText}
 					modifiedText={data.text}
-					languageId={id}
+					fileName={data.fileName}
 					theme={theme}
 				/>
-			);
-		}),
+			)
+		),
 });
 
 globalVisualizationFactory.addVisualizer(monacoTextDiffVisualizer);