From 19972600d77bc3da42b8a143d3bccb1ac3297c94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Farkas?= Date: Thu, 14 Oct 2021 14:33:45 +0200 Subject: [PATCH] grafana-ui: export lazy-loaded version of react-monaco-editor (#39570) * grafana-ui: refactor: move laziness to a lower level in code-editor * grafana-ui: re-export react-monaco-editor * rename export Co-authored-by: Dominik Prokop * improved comment * reverted name change we already have an export with that name Co-authored-by: Dominik Prokop --- .../src/components/Monaco/CodeEditor.mdx | 2 +- .../Monaco/CodeEditor.story.internal.tsx | 2 +- .../src/components/Monaco/CodeEditor.tsx | 21 ++---------- .../src/components/Monaco/CodeEditorLazy.tsx | 27 ---------------- .../components/Monaco/ReactMonacoEditor.tsx | 21 ++++++++++++ .../Monaco/ReactMonacoEditorLazy.tsx | 32 +++++++++++++++++++ packages/grafana-ui/src/components/index.ts | 5 ++- 7 files changed, 62 insertions(+), 48 deletions(-) delete mode 100644 packages/grafana-ui/src/components/Monaco/CodeEditorLazy.tsx create mode 100644 packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx create mode 100644 packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.mdx b/packages/grafana-ui/src/components/Monaco/CodeEditor.mdx index f229f70172f..cf7b81bbe9b 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.mdx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; -import { CodeEditor } from './CodeEditorLazy'; +import { CodeEditor } from './CodeEditor'; diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx index 87e8934b10e..507693571f0 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './CodeEditor.mdx'; -import { CodeEditor } from './CodeEditorLazy'; +import { CodeEditor } from './CodeEditor'; export default { title: 'CodeEditor', diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx index 16026ffd0a1..ec056ad9cc5 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { css } from '@emotion/css'; -import MonacoEditor, { loader as monacoEditorLoader } from '@monaco-editor/react'; +import { ReactMonacoEditorLazy } from './ReactMonacoEditorLazy'; import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api'; import { selectors } from '@grafana/e2e-selectors'; import { GrafanaTheme2, monacoLanguageRegistry } from '@grafana/data'; @@ -14,27 +14,12 @@ import defineThemes from './theme'; type Props = CodeEditorProps & Themeable2; -let initalized = false; -function initMonoco() { - if (initalized) { - return; - } - - monacoEditorLoader.config({ - paths: { - vs: (window.__grafana_public_path__ ?? 'public/') + 'lib/monaco/min/vs', - }, - }); - initalized = true; -} - class UnthemedCodeEditor extends React.PureComponent { completionCancel?: monacoType.IDisposable; monaco?: Monaco; constructor(props: Props) { super(props); - initMonoco(); } componentWillUnmount() { @@ -154,7 +139,7 @@ class UnthemedCodeEditor extends React.PureComponent { return (
- { } } -export default withTheme2(UnthemedCodeEditor); +export const CodeEditor = withTheme2(UnthemedCodeEditor); const getStyles = (theme: GrafanaTheme2) => { return { diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditorLazy.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditorLazy.tsx deleted file mode 100644 index 918416c8f27..00000000000 --- a/packages/grafana-ui/src/components/Monaco/CodeEditorLazy.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { useAsyncDependency } from '../../utils/useAsyncDependency'; -import { ErrorWithStack, LoadingPlaceholder } from '..'; -import { CodeEditorProps } from './types'; - -export const CodeEditor: React.FC = (props) => { - const { loading, error, dependency } = useAsyncDependency( - import(/* webpackChunkName: "code-editor" */ './CodeEditor') - ); - - if (loading) { - return ; - } - - if (error) { - return ( - - ); - } - - const CodeEditor = dependency.default; - return ; -}; diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx new file mode 100644 index 00000000000..61de48cc74e --- /dev/null +++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import MonacoEditor, { loader as monacoEditorLoader, EditorProps as MonacoEditorProps } from '@monaco-editor/react'; + +let initalized = false; +function initMonaco() { + if (initalized) { + return; + } + + monacoEditorLoader.config({ + paths: { + vs: (window.__grafana_public_path__ ?? 'public/') + 'lib/monaco/min/vs', + }, + }); + initalized = true; +} + +export const ReactMonacoEditor = (props: MonacoEditorProps) => { + initMonaco(); + return ; +}; diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx new file mode 100644 index 00000000000..073b0d1d643 --- /dev/null +++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { useAsyncDependency } from '../../utils/useAsyncDependency'; +import { ErrorWithStack, LoadingPlaceholder } from '..'; +// we only use import type so it will not be included in the bundle +import type { EditorProps } from '@monaco-editor/react'; + +/** + * @internal + * Experimental export + **/ +export const ReactMonacoEditorLazy = (props: EditorProps) => { + const { loading, error, dependency } = useAsyncDependency( + import(/* webpackChunkName: "react-monaco-editor" */ './ReactMonacoEditor') + ); + + if (loading) { + return ; + } + + if (error) { + return ( + + ); + } + + const ReactMonacoEditor = dependency.ReactMonacoEditor; + return ; +}; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 9de67699ed4..9cd19f0741d 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -41,7 +41,10 @@ export { ConfirmModal, ConfirmModalProps } from './ConfirmModal/ConfirmModal'; export { QueryField } from './QueryField/QueryField'; // Code editor -export { CodeEditor } from './Monaco/CodeEditorLazy'; +export { CodeEditor } from './Monaco/CodeEditor'; + +export { ReactMonacoEditorLazy as ReactMonacoEditor } from './Monaco/ReactMonacoEditorLazy'; + export { Monaco, monacoTypes,