Add MonacoWebpackPlugin

app/components/monaco-editor.js

@@ -1,20 +1,19 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-// import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
-// import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
-// import 'monaco-editor/esm/vs/language/json/monaco.contribution.js';
-// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
-import * as monaco from 'monaco-editor';
 
-// self.MonacoEnvironment = {
-//   getWorkerUrl(_, label) {
-//     if (label === 'json') {
-//       return '/json.worker.js';
-//     }
+import 'monaco-editor/esm/vs/editor/browser/coreCommands.js';
+import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
-//     return '/editor.worker.js';
-//   },
-// };
+// This is needed because the SimpleWorker.js in monaco-editor has the following code:
+// loaderConfiguration = self.requirejs.s.contexts._.config;
+window.requirejs.s = {
+  contexts: {
+    _: {
+      config: '',
+    },
+  },
+};
 
 export default class MonacoEditorComponent extends Component {
   constructor(owner, args) {
@@ -25,7 +24,19 @@ export default class MonacoEditorComponent extends Component {
 
   @action
   initEditor(el) {
+    // let codeModel = monaco.editor.createModel(this.args.code, this.args.language)
+    // let height = codeModel.getLineCount() * 20;
+    // el.style.height = height.toString() + "px";
+
     this.editor = monaco.editor.create(el, {
+      // model: codeModel,
+      // theme: 'vs-dark',
+      // readOnly: this.readOnly,
+      // minimap: { enabled: false },
+      // wordWrap: "on",
+      // scrollBeyondLastLine: false,
+      // wrappingIndent: 'same'
+
       value: this.args.value,
       language: this.args.language,
       lineNumbers: 'off',

ember-cli-build.js

@@ -2,7 +2,7 @@
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 const { Webpack } = require('@embroider/webpack');
-const path = require('path');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 function isProduction() {
   return EmberApp.env() === 'production';
@@ -41,15 +41,6 @@ module.exports = function (defaults) {
         },
       },
       webpackConfig: {
-        entry: {
-          'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
-          'json.worker': 'monaco-editor/esm/vs/language/json/json.worker.js',
-        },
-        output: {
-          globalObject: 'self',
-          filename: '[name].js',
-          // path: path.resolve(__dirname, 'dist', 'assets'),
-        },
         module: {
           rules: [
             { test: /\.ttf$/, type: 'asset/resource' },
@@ -72,6 +63,11 @@ module.exports = function (defaults) {
             },
           ],
         },
+        plugins: [
+          new MonacoWebpackPlugin({
+            languages: ['json'],
+          }),
+        ],
       },
     },
     extraPublicTrees: [],

package.json

@@ -94,6 +94,7 @@
     "loader.js": "^4.7.0",
     "meilisearch": "^0.25.0",
     "monaco-editor": "^0.34.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",

yarn.lock

@@ -9889,7 +9889,7 @@ loader-utils@^1.2.3:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
   integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
@@ -10668,6 +10668,13 @@ mktemp@~0.4.0:
   resolved "https://registry.yarnpkg.com/mktemp/-/mktemp-0.4.0.tgz#6d0515611c8a8c84e484aa2000129b98e981ff0b"
   integrity sha512-IXnMcJ6ZyTuhRmJSjzvHSRhlVPiN9Jwc6e59V0bEJ0ba6OBeX2L0E+mRN1QseeOF4mM+F1Rit6Nh7o+rl2Yn/A==
 
+monaco-editor-webpack-plugin@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c"
+  integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==
+  dependencies:
+    loader-utils "^2.0.2"
+
 monaco-editor@^0.34.0:
   version "0.34.0"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.0.tgz#b1749870a1f795dbfc4dc03d8e9b646ddcbeefa7"