refactor: simplify steps to build monaco editor workers

monaco/.gitignore

@@ -1,5 +1,130 @@
-dist
-lib
+# Logs
 logs
 *.log
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+#### Copied from Create React App ####
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

monaco/README.md

@@ -1,5 +1,3 @@
-# Monaco Editor
+# Monaco Editor Workers
 
-This folder includes the source code for a simple Monaco editor. You can build the source using `npm run build` then copy the appropriate `dist` files into the `monaco` folder in the `public` directory to use the full features of the Monaco Editor. You probably do not need `app.bundle.js` or `index.html`.
-
-This folder is a modified version of https://github.com/microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-typescript-react, which is released under the MIT License, Copyright (c) 2016 Microsoft Corporation. This modified version is released under AGPL-3.0 as indicated in the README.md in the root directory. A copy of AGPL-3.0 is available there.
+This folder contains the workers required to make full use of the Monaco Editor. Build them in the `dist` folder by running `yarn run build`, then copy the workers from `dist` to `../public/monaco` by running `yarn run copy`. Create React App will bundle the remaining of the necessary files because we import the Monaco Editor in [Editor.tsx](../src/components/Editor.tsx) with `import * as monaco from 'monaco-editor';`.

monaco/package.json

@@ -1,36 +1,12 @@
 {
-  "name": "monaco-editor-sample-esm-webpack-typescript",
+  "name": "monaco-editor-workers",
   "scripts": {
-    "start": "./node_modules/.bin/webpack-dev-server",
-    "build": "NODE_ENV='production' ./node_modules/.bin/webpack --progress"
+    "build": "NODE_ENV='production' ./node_modules/.bin/webpack --progress",
+    "copy": "cp ./dist/* ../public/monaco"
   },
   "dependencies": {
-    "css-loader": "^5.0.1",
-    "file-loader": "^6.2.0",
-    "glob": "^7.1.6",
-    "html-webpack-plugin": "^4.5.1",
     "monaco-editor-webpack-plugin": "^3.0.0",
     "monaco-editor": "^0.22.3",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
-    "ts-loader": "^8.0.14",
-    "typescript": "^4.1.3",
     "webpack-cli": "^4.4.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack": "^5.19.0",
-    "yaserver": "^0.3.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "babel-loader": "^8.2.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-refresh": "^0.9.0"
-  }
+    "webpack": "^5.19.0"  }
 }

monaco/webpack.config.js

@@ -1,59 +1,19 @@
 const path = require('path');
-const HtmlWebPackPlugin = require('html-webpack-plugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-const isDevelopment = process.env.NODE_ENV !== 'production';
-
 module.exports = {
-	mode: isDevelopment ? 'development' : 'production',
-	entry: {
-		app: './src/index.tsx',
-		'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
-		'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
-		'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
-		'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
-		'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
-	},
-	devServer: {
-		hot: true
-	},
-	resolve: {
-		extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
-	},
-	output: {
-		globalObject: 'self',
-		filename: '[name].bundle.js',
-		path: path.resolve(__dirname, 'dist')
-	},
-	module: {
-		rules: [
-			{
-				test: /\.(js|jsx|tsx|ts)$/,
-				exclude: /node_modules/,
-				use: [
-					{
-						loader: require.resolve('babel-loader'),
-						options: {
-							presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
-							plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean)
-						}
-					}
-				]
-			},
-			{
-				test: /\.css$/,
-				use: ['style-loader', 'css-loader']
-			},
-			{
-				test: /\.ttf$/,
-				use: ['file-loader']
-			}
-		]
-	},
-	plugins: [
-		new HtmlWebPackPlugin({
-			template: 'src/index.html'
-		}),
-		isDevelopment && new ReactRefreshWebpackPlugin()
-	].filter(Boolean)
+  mode: 'production',
+  entry: {
+    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
+    'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
+    'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
+    'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
+    'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker',
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
+  },
+  output: {
+    globalObject: 'self',
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
 };