Check to see if lazy loading/peer dep change work

Author: rebeccaalpert

package-lock.json

@@ -40,7 +40,6 @@
     "@patternfly/react-styles": "^6.1.0",
     "@segment/analytics-next": "^1.76.0",
     "clsx": "^2.1.0",
-    "monaco-editor": "^0.54.0",
     "path-browserify": "^1.0.1",
     "posthog-js": "^1.194.4",
     "react-markdown": "^9.0.1",
@@ -53,7 +52,16 @@
   },
   "peerDependencies": {
     "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react-dom": "^18 || ^19",
+    "monaco-editor": "^0.54.0"
+  },
+  "peerDependenciesMeta": {
+    "monaco-editor": {
+      "optional": false
+    },
+    "@monaco-editor/react": {
+      "optional": false
+    }
   },
   "devDependencies": {
     "@octokit/rest": "^18.0.0",

packages/module/package.json

@@ -5,26 +5,37 @@
 import type { FunctionComponent, MouseEvent } from 'react';
 import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
-import * as monaco from 'monaco-editor';
-import { loader } from '@monaco-editor/react';
 
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
 import {
+  Bullseye,
   Button,
   getResizeObserver,
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Spinner,
   Stack,
   StackItem
 } from '@patternfly/react-core';
 import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 
-// Configure Monaco loader to use the npm package instead of CDN
-loader.config({ monaco });
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance: typeof import('monaco-editor') | null = null;
+const loadMonaco = async () => {
+  if (!monacoInstance) {
+    const [monaco, { loader }] = await Promise.all([
+      import('monaco-editor'),
+      import('@monaco-editor/react')
+    ]);
+    monacoInstance = monaco;
+    loader.config({ monaco });
+  }
+  return monacoInstance;
+};
 
 export interface CodeModalProps {
   /** Class applied to code editor */
@@ -63,6 +74,8 @@ export interface CodeModalProps {
   modalBodyClassName?: string;
   /** Class applied to modal footer */
   modalFooterClassName?: string;
+  /** Aria label applied to spinner when loading Monaco */
+  spinnerAriaLabel?: string;
 }
 
 export const CodeModal: FunctionComponent<CodeModalProps> = ({
@@ -84,13 +97,32 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   modalHeaderClassName,
   modalBodyClassName,
   modalFooterClassName,
+  spinnerAriaLabel = 'Loading',
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
-  const [editorInstance, setEditorInstance] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
   const [isEditorReady, setIsEditorReady] = useState(false);
+  const [isMonacoLoading, setIsMonacoLoading] = useState(false);
+  const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+      setIsMonacoLoading(true);
+      loadMonaco()
+        .then(() => {
+          setIsMonacoLoaded(true);
+          setIsMonacoLoading(false);
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load Monaco editor:', error);
+          setIsMonacoLoading(false);
+        });
+    }
+  }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
+
   useEffect(() => {
     if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
       return;
@@ -166,27 +198,31 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
             <FileDetails fileName={fileName} />
           </StackItem>
           <div className="pf-v6-l-stack__item pf-chatbot__code-modal-editor" ref={containerRef}>
-            <CodeEditor
-              isDarkTheme
-              isLineNumbersVisible={isLineNumbersVisible}
-              isLanguageLabelVisible
-              isCopyEnabled={isCopyEnabled}
-              isReadOnly={isReadOnly}
-              code={newCode}
-              language={extensionToLanguage[path.extname(fileName).slice(1)]}
-              onEditorDidMount={onEditorDidMount}
-              onCodeChange={onCodeChange}
-              className={codeEditorClassName}
-              isFullHeight
-              options={{
-                glyphMargin: false,
-                folding: false,
-                // prevents Monaco from handling resizing itself
-                // was causing ResizeObserver issues
-                automaticLayout: false
-              }}
-              {...props}
-            />
+            {isMonacoLoading ? (
+              <Bullseye><Spinner aria-label={spinnerAriaLabel} /></Bullseye>
+            ) : isMonacoLoaded ? (
+              <CodeEditor
+                isDarkTheme
+                isLineNumbersVisible={isLineNumbersVisible}
+                isLanguageLabelVisible
+                isCopyEnabled={isCopyEnabled}
+                isReadOnly={isReadOnly}
+                code={newCode}
+                language={extensionToLanguage[path.extname(fileName).slice(1)]}
+                onEditorDidMount={onEditorDidMount}
+                onCodeChange={onCodeChange}
+                className={codeEditorClassName}
+                isFullHeight
+                options={{
+                  glyphMargin: false,
+                  folding: false,
+                  // prevents Monaco from handling resizing itself
+                  // was causing ResizeObserver issues
+                  automaticLayout: false
+                }}
+                {...props}
+              />
+            ) : null}
           </div>
         </Stack>
       </ModalBody>

packages/module/src/CodeModal/CodeModal.tsx

@@ -5,7 +5,7 @@
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
-    "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "module": "es2020" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */