Merge pull request wso2#9889 from JayaShakthi97/patch-rotation

Bundle Monaco Editor as an npm dependency

Author: JayaShakthi97

.changeset/cyan-roses-rest.md

@@ -0,0 +1,5 @@
+---
+"@wso2is/console": minor
+---
+
+Bundle monaco editor as an npm dependency

apps/console/package.json

@@ -132,6 +132,8 @@
         "i18next-xhr-backend": "^3.2.2",
         "js-beautify": "^1.13.0",
         "lodash-es": "^4.17.21",
+        "monaco-editor": "0.36.1",
+        "monaco-editor-webpack-plugin": "7.1.1",
         "mustache": "^4.2.0",
         "node-forge": "^0.10.0",
         "rc-tree": "^4.0.0-beta.2",

apps/console/src/index.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2024, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2020-2026, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -29,6 +29,7 @@ import GlobalVariablesProvider from "@wso2is/admin.core.v1/providers/global-vari
 import { store } from "@wso2is/admin.core.v1/store";
 import OrganizationsProvider from "@wso2is/admin.organizations.v1/providers/organizations-provider";
 import { ContextUtils } from "@wso2is/core/utils";
+import * as monaco from "monaco-editor";
 import React, { ReactElement, useEffect, useState } from "react";
 import * as ReactDOM from "react-dom";
 import { Provider } from "react-redux";
@@ -39,36 +40,8 @@ import Theme from "./theme";
 // Set the runtime config in the context.
 ContextUtils.setRuntimeConfig(Config.getDeploymentConfig());
 
-/**
- * TODO: Use Monaco with the webpack plugin.
- * {@link https://github.com/wso2-enterprise/asgardeo-product/issues/23937}
- *
- * Function to check the status of the Monaco CDN.
- * If the CDN is not available, the default CDN will be used.
- */
-const checkCDNStatus = async () => {
-    try {
-        const response: Response = await fetch("https://cdn.jsdelivr.net/npm/monaco-editor@0.36.1/min/vs/loader.js");
-
-        if (response.ok) {
-            loader.config({
-                paths: {
-                    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.36.1/min/vs"
-                }
-            });
-        } else {
-            loader.config({
-                paths: {
-                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs"
-                }
-            });
-        }
-    } catch (error) {
-        // Use default CDN.
-    }
-};
-
-checkCDNStatus();
+// Configure monaco editor.
+loader.config({ monaco: monaco as any });
 
 /**
  * Render root component with configs.

apps/console/src/public/WEB-INF/web.xml

@@ -94,6 +94,11 @@
         <url-pattern>/auth-spa-3.1.2.min.js</url-pattern>
     </servlet-mapping>
 
+    <servlet-mapping>
+        <servlet-name>default</servlet-name>
+        <url-pattern>/monaco-workers/*</url-pattern>
+    </servlet-mapping>
+
     <servlet-mapping>
         <servlet-name>default</servlet-name>
         <url-pattern>/startup-config.js</url-pattern>

apps/console/webpack.config.ts

@@ -28,6 +28,7 @@ import ESLintPlugin from "eslint-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import JsonMinimizerPlugin from "json-minimizer-webpack-plugin";
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 import webpack, {
     Configuration,
     RuleSetRule,
@@ -465,6 +466,14 @@ module.exports = (config: WebpackOptionsNormalized, context: NxWebpackContextInt
         })
     );
 
+    // Bundle only the required monaco editor languages.
+    config.plugins.push(
+        new MonacoWebpackPlugin({
+            filename: "monaco-workers/[name].worker.js",
+            languages: [ "javascript", "json", "typescript", "html", "xml", "shell" ]
+        })
+    );
+
     // Update the existing `DefinePlugin` plugin added by NX.
     const existingDefinePlugin: WebpackPluginInstance =
         config.plugins.find((plugin: WebpackPluginInstance) => {
@@ -600,6 +609,8 @@ module.exports = (config: WebpackOptionsNormalized, context: NxWebpackContextInt
     ];
 
     config.module.rules.unshift({
+        // Exclude monaco editor related files to avoid duplicate packing of worker.js files.
+        exclude: /node_modules[\\/]monaco-editor[\\/]/,
         test: /\.worker\.(ts|js)$/,
         use: {
             loader: "worker-loader",
@@ -678,6 +689,13 @@ module.exports = (config: WebpackOptionsNormalized, context: NxWebpackContextInt
                     priority: 20,
                     test: /[\\/]node_modules[\\/](codemirror|js-beautify)[\\/]/
                 },
+                monaco: {
+                    chunks: "all",
+                    enforce: true,
+                    name: "monaco",
+                    priority: 30,
+                    test: /[\\/]node_modules[\\/](monaco-editor|@monaco-editor)[\\/]/
+                },
                 vendor: {
                     chunks: "initial",
                     enforce: true,