lazy load codeEditor component to reduce the frontend bundle size

Author: karthikjeeyar

workspaces/extensions/.changeset/hot-trains-develop.md

@@ -10,4 +10,5 @@ Renamed plugins from marketplace to extensions
 
 - Renamed all packages from `backstage-plugin-marketplace-*` to `backstage-plugin-extensions-*`
 - Updated all internal references, exports, and API endpoints
+- lazy load codeEditor to reduce the frontend plugin bundle size
 - Made catalog entities directory path configurable via `extensions.directory` in app-config.yaml with fallback to `extensions` and `marketplace` directories

workspaces/extensions/plugins/catalog-backend-module-extensions/README.md

@@ -44,16 +44,20 @@ The module looks for extension YAML files in a directory. You can configure a cu
 **Priority order:**
 
 1. Configured directory (if specified in `extensions.directory`)
-2. `/extensions` directory (filesystem root)
-3. `/marketplace` directory (filesystem root)
+2. `opt/app-root/src/dynamic-plugins-root/extensions` directory
+3. `opt/app-root/src/dynamic-plugins-root/marketplace` directory
+4. `/extensions` directory (filesystem root)
+5. `/marketplace` directory (filesystem root)
 
 **Example configuration:**
 
 ```yaml
 extensions:
   # Optional: Custom directory path for extension YAML files
   # Can be absolute path or relative to the working directory
-  # If not specified, falls back to '/extensions' or '/marketplace' directories (filesystem root)
+  # If not specified, falls back to:
+  #   - /extensions (filesystem root)
+  #   - /marketplace (filesystem root)
   directory: /path/to/custom/extensions
 ```
 

workspaces/extensions/plugins/catalog-backend-module-extensions/report.api.md

@@ -11,6 +11,7 @@ import type { CatalogApi } from '@backstage/catalog-client';
 import { CatalogProcessor } from '@backstage/plugin-catalog-node';
 import { CatalogProcessorCache } from '@backstage/plugin-catalog-node';
 import { CatalogProcessorEmit } from '@backstage/plugin-catalog-node';
+import { Config } from '@backstage/config';
 import { DynamicPluginProvider } from '@backstage/backend-dynamic-feature-service';
 import { Entity } from '@backstage/catalog-model';
 import { EntityProvider } from '@backstage/plugin-catalog-node';
@@ -25,7 +26,7 @@ import { SchedulerServiceTaskRunner } from '@backstage/backend-plugin-api';
 
 // @public (undocumented)
 export abstract class BaseEntityProvider<T extends Entity> implements EntityProvider {
-    constructor(taskRunner: SchedulerServiceTaskRunner);
+    constructor(taskRunner: SchedulerServiceTaskRunner, config?: Config);
     // (undocumented)
     connect(connection: EntityProviderConnection): Promise<void>;
     // (undocumented)

workspaces/extensions/plugins/catalog-backend-module-extensions/src/providers/BaseEntityProvider.ts

@@ -24,7 +24,6 @@ import {
   EntityProviderConnection,
 } from '@backstage/plugin-catalog-node';
 import { Config } from '@backstage/config';
-
 import { readYamlFiles } from '../utils/file-utils';
 import { JsonFileData } from '../types';
 import path from 'path';
@@ -100,7 +99,12 @@ export abstract class BaseEntityProvider<T extends Entity>
 
   /**
    * Gets the extensions directory path from config or falls back to hardcoded fallback directories
-   * Priority: configured directory (if specified) -> 'extensions' -> 'marketplace'
+   * Priority:
+   *   - configured directory (if specified)
+   *   - 'opt/app-root/src/dynamic-plugins-root/extensions'
+   *   - 'opt/app-root/src/dynamic-plugins-root/marketplace'
+   *   - '/extensions' (filesystem root)
+   *   - '/marketplace' (filesystem root)
    */
   private getExtensionsDirectory(): string | null {
     if (this.config) {
@@ -122,22 +126,21 @@ export abstract class BaseEntityProvider<T extends Entity>
       }
     }
 
-    const firstFallback = this.resolveAndValidateDirectory(
+    // Check fallback directories in priority order
+    const fallbackDirectories = [
       BaseEntityProvider.EXTENSIONS_DIRECTORY,
-    );
-    if (firstFallback) {
-      return firstFallback;
-    }
-
-    const secondFallback = this.resolveAndValidateDirectory(
       BaseEntityProvider.DEPRECATED_MARKETPLACE_DIRECTORY,
-    );
-    if (secondFallback) {
-      return secondFallback;
+    ];
+
+    for (const dir of fallbackDirectories) {
+      const resolvedDir = this.resolveAndValidateDirectory(dir);
+      if (resolvedDir) {
+        return resolvedDir;
+      }
     }
 
     console.warn(
-      `Extensions directory not found. Checked: configured directory, "${BaseEntityProvider.EXTENSIONS_DIRECTORY}", and "${BaseEntityProvider.DEPRECATED_MARKETPLACE_DIRECTORY}"`,
+      `Extensions directory not found. Checked: configured directory "${BaseEntityProvider.EXTENSIONS_DIRECTORY}" and "${BaseEntityProvider.DEPRECATED_MARKETPLACE_DIRECTORY}"`,
     );
     return null;
   }

workspaces/extensions/plugins/extensions/src/components/CodeEditor.tsx

@@ -14,16 +14,7 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
-
-import {
-  createContext,
-  useRef,
-  useMemo,
-  useContext,
-  useState,
-  useCallback,
-} from 'react';
+import { useState, useCallback } from 'react';
 
 import { Progress } from '@backstage/core-components';
 
@@ -33,84 +24,26 @@ import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 
-import Editor, { loader, OnChange, OnMount } from '@monaco-editor/react';
+import Editor, {
+  loader,
+  type OnChange,
+  type OnMount,
+} from '@monaco-editor/react';
+
+import type MonacoEditor from 'monaco-editor';
+import { useCodeEditor } from './CodeEditorContext';
 
-// TODO: Load the CodeEditor or the pages that uses the CodeEditor lazy!
-// Currently manaco is loaded when the main extensions page is opened.
+// Import Monaco Editor modules - CodeEditor is lazy-loaded via CodeEditorCard
 import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
 // @ts-ignore
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
-import type MonacoEditor from 'monaco-editor';
 
 loader.config({ monaco: monacoEditor });
 
 const defaultOptions: MonacoEditor.editor.IEditorConstructionOptions = {
   minimap: { enabled: false },
 };
 
-interface CodeEditorContextValue {
-  getEditor: () => MonacoEditor.editor.ICodeEditor | null;
-  setEditor: (editor: MonacoEditor.editor.ICodeEditor) => void;
-
-  getSelection: () => MonacoEditor.Selection | null;
-  setSelection: (editorSelection: MonacoEditor.Selection) => void;
-
-  getPosition: () => MonacoEditor.Position | null;
-  setPosition: (cursorPosition: MonacoEditor.Position) => void;
-  /** short for getEditor()?.getValue() */
-  getValue: () => string | undefined;
-  /** short for getEditor()?.setValue() and getEditor()?.focus() */
-  setValue: (value: string, autoFocus?: boolean) => void;
-}
-
-const CodeEditorContext = createContext<CodeEditorContextValue>(
-  undefined as any as CodeEditorContextValue,
-);
-
-export const CodeEditorContextProvider = (props: { children: ReactNode }) => {
-  const editorRef = useRef<MonacoEditor.editor.ICodeEditor | null>(null);
-  const contextValue = useMemo<CodeEditorContextValue>(
-    () => ({
-      getEditor: () => editorRef.current,
-      setEditor: (editor: MonacoEditor.editor.ICodeEditor) => {
-        editorRef.current = editor;
-      },
-      getPosition: () => editorRef.current?.getPosition() || null,
-      setPosition: (cursorPosition: MonacoEditor.Position) => {
-        editorRef.current?.setPosition(cursorPosition);
-      },
-      getSelection: () => editorRef.current?.getSelection() || null,
-      setSelection: (editorSelection: MonacoEditor.Selection) => {
-        editorRef.current?.setSelection(editorSelection);
-      },
-      getValue: () => editorRef.current?.getValue(),
-      setValue: (value: string, autoFocus = true) => {
-        editorRef.current?.setValue(value);
-        if (autoFocus) {
-          editorRef.current?.focus();
-        }
-      },
-    }),
-    [],
-  );
-
-  return (
-    <CodeEditorContext.Provider value={contextValue}>
-      {props.children}
-    </CodeEditorContext.Provider>
-  );
-};
-
-export const useCodeEditor = () => {
-  const contextValue = useContext(CodeEditorContext);
-  if (!contextValue) {
-    throw new Error(
-      'useCodeEditor must be used within a CodeEditorContextProvider',
-    );
-  }
-  return contextValue;
-};
-
 export interface CodeEditorProps {
   defaultLanguage: 'yaml'; // We enforce YAML for now
   defaultValue?: string;

workspaces/extensions/plugins/extensions/src/components/CodeEditorCard.tsx

@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
+import { lazy, Suspense } from 'react';
 import Grid from '@mui/material/Grid';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { CodeEditor } from './CodeEditor';
+import { Progress } from '@backstage/core-components';
+
+// Lazy load CodeEditor to avoid loading Monaco Editor until needed
+const CodeEditor = lazy(() =>
+  import('./CodeEditor').then(module => ({ default: module.CodeEditor })),
+);
 
 export const CodeEditorCard = ({ onLoad }: { onLoad: () => void }) => {
   return (
@@ -45,7 +51,25 @@ export const CodeEditorCard = ({ onLoad }: { onLoad: () => void }) => {
             scrollbarWidth: 'thin',
           }}
         >
-          <CodeEditor defaultLanguage="yaml" onLoaded={onLoad} />
+          <Suspense
+            fallback={
+              <div
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  display: 'flex',
+                  alignItems: 'start',
+                  justifyContent: 'center',
+                }}
+              >
+                <div style={{ width: '100%', height: '100px' }}>
+                  <Progress />
+                </div>
+              </div>
+            }
+          >
+            <CodeEditor defaultLanguage="yaml" onLoaded={onLoad} />
+          </Suspense>
         </CardContent>
       </Card>
     </Grid>

workspaces/extensions/plugins/extensions/src/components/CodeEditorContext.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { createContext, useRef, useMemo, useContext } from 'react';
+
+import type MonacoEditor from 'monaco-editor';
+
+interface CodeEditorContextValue {
+  getEditor: () => MonacoEditor.editor.ICodeEditor | null;
+  setEditor: (editor: MonacoEditor.editor.ICodeEditor) => void;
+
+  getSelection: () => MonacoEditor.Selection | null;
+  setSelection: (editorSelection: MonacoEditor.Selection) => void;
+
+  getPosition: () => MonacoEditor.Position | null;
+  setPosition: (cursorPosition: MonacoEditor.Position) => void;
+  /** short for getEditor()?.getValue() */
+  getValue: () => string | undefined;
+  /** short for getEditor()?.setValue() and getEditor()?.focus() */
+  setValue: (value: string, autoFocus?: boolean) => void;
+}
+
+const CodeEditorContext = createContext<CodeEditorContextValue>(
+  undefined as any as CodeEditorContextValue,
+);
+
+export const CodeEditorContextProvider = (props: { children: ReactNode }) => {
+  const editorRef = useRef<MonacoEditor.editor.ICodeEditor | null>(null);
+  const contextValue = useMemo<CodeEditorContextValue>(
+    () => ({
+      getEditor: () => editorRef.current,
+      setEditor: (editor: MonacoEditor.editor.ICodeEditor) => {
+        editorRef.current = editor;
+      },
+      getPosition: () => editorRef.current?.getPosition() || null,
+      setPosition: (cursorPosition: MonacoEditor.Position) => {
+        editorRef.current?.setPosition(cursorPosition);
+      },
+      getSelection: () => editorRef.current?.getSelection() || null,
+      setSelection: (editorSelection: MonacoEditor.Selection) => {
+        editorRef.current?.setSelection(editorSelection);
+      },
+      getValue: () => editorRef.current?.getValue(),
+      setValue: (value: string, autoFocus = true) => {
+        editorRef.current?.setValue(value);
+        if (autoFocus) {
+          editorRef.current?.focus();
+        }
+      },
+    }),
+    [],
+  );
+
+  return (
+    <CodeEditorContext.Provider value={contextValue}>
+      {props.children}
+    </CodeEditorContext.Provider>
+  );
+};
+
+export const useCodeEditor = () => {
+  const contextValue = useContext(CodeEditorContext);
+  if (!contextValue) {
+    throw new Error(
+      'useCodeEditor must be used within a CodeEditorContextProvider',
+    );
+  }
+  return contextValue;
+};

workspaces/extensions/plugins/extensions/src/components/ExtensionsPackageEditContent.tsx

@@ -46,7 +46,7 @@ import Tooltip from '@mui/material/Tooltip';
 
 import { packageInstallRouteRef } from '../routes';
 
-import { CodeEditorContextProvider, useCodeEditor } from './CodeEditor';
+import { CodeEditorContextProvider, useCodeEditor } from './CodeEditorContext';
 import { useInstallPackage } from '../hooks/useInstallPackage';
 import { usePackage } from '../hooks/usePackage';
 import { usePackageConfig } from '../hooks/usePackageConfig';

workspaces/extensions/plugins/extensions/src/components/ExtensionsPluginInstallContent.test.tsx

@@ -51,8 +51,9 @@ jest.mock('../hooks/usePluginConfigurationPermissions', () => ({
   usePluginConfigurationPermissions: jest.fn(),
 }));
 
-jest.mock('./CodeEditor', () => ({
+jest.mock('./CodeEditorContext', () => ({
   useCodeEditor: jest.fn(),
+  CodeEditorContextProvider: ({ children }: any) => children,
 }));
 
 jest.mock('../hooks/useExtensionsConfiguration', () => ({
@@ -73,17 +74,21 @@ jest.mock('@backstage/core-plugin-api', () => {
 
 const mockCodeEditorSetValue = jest.fn();
 
-jest.mock('./CodeEditor', () => ({
-  CodeEditor: ({ onLoaded }: any) => {
-    useEffect(() => {
-      onLoaded?.();
-    }, [onLoaded]);
-    return <div>Code Editor Mock</div>;
-  },
+jest.mock('./CodeEditorContext', () => ({
   useCodeEditor: () => ({
     setValue: mockCodeEditorSetValue,
     getValue: jest.fn(),
   }),
+  CodeEditorContextProvider: ({ children }: any) => children,
+}));
+
+jest.mock('./CodeEditorCard', () => ({
+  CodeEditorCard: ({ onLoad }: any) => {
+    useEffect(() => {
+      onLoad?.();
+    }, [onLoad]);
+    return <div>Code Editor Card Mock</div>;
+  },
 }));
 
 beforeEach(() => {