a few more tweaks for clean builds on the monaco-graphql-webpack exam…

…ple. reintroduce the workspace, make this a testbed for monaco-graphql development again

examples/monaco-graphql-webpack/README.md

@@ -5,3 +5,13 @@ A simple example of `monaco-graphql` using webpack 4
 ### Setup
 
 `yarn` and `yarn start` from this folder to start webpack dev server
+
+### JS only
+
+If you want to learn how to bundle `monaco-graphql` using webpack without
+typescript, these steps will help:
+
+1. rename .ts files to .js
+1. rename .ts to .js in webpack.config.js
+1. remove fork ts checker plugin from webpack.config.js
+1. remove typescript annotations from the renamed files

examples/monaco-graphql-webpack/package.json

@@ -9,37 +9,33 @@
     "start": "cross-env NODE_ENV=development webpack-cli serve"
   },
   "dependencies": {
-    "graphql": "^16.4.0",
-    "graphql-language-service": "^5.1.0",
-    "json-schema": "^0.3.0",
-    "jsonc-parser": "3.0.0",
-    "monaco-editor": "^0.31.0",
-    "monaco-graphql": "^1.1.6",
-    "prettier": "^2.7.1"
+    "graphql": "^16.6.0",
+    "graphql-language-service": "^5.1.1",
+    "json-schema": "^0.4.0",
+    "jsonc-parser": "3.2.0",
+    "monaco-editor": "^0.36.0",
+    "monaco-graphql": "^1.1.7",
+    "prettier": "^2.8.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/node": "^7.8.7",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/core": "^7.21.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/preset-react": "^7.12.1",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@types/prettier": "^2.7.0",
+    "@types/prettier": "^2.7.2",
     "@webpack-cli/serve": "^2.0.1",
-    "babel-loader": "^9.1.0",
+    "babel-loader": "^9.1.2",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.5.1",
+    "css-loader": "^6.7.3",
     "file-loader": "6.2.0",
-    "html-webpack-plugin": "^4.2.0",
-    "monaco-editor-webpack-plugin": "^5.0.0",
-    "react-dom": "^17.0.2",
-    "style-loader": "^1.1.3",
+    "html-webpack-plugin": "^5.5.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
+    "style-loader": "^3.3.1",
     "typescript": "^4.6.3",
     "webpack": "5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
-    "worker-loader": "^3.0.8"
+    "webpack-dev-server": "^4.11.1"
   }
 }

examples/monaco-graphql-webpack/webpack.config.js

@@ -16,24 +16,16 @@ const resultConfig = {
   output: {
     path: rootPath('dist'),
     filename: '[name].js',
-    chunkFormat: 'commonjs',
   },
   module: {
     rules: [
-      // for graphql module, which uses .mjs
-      {
-        type: 'javascript/auto',
-        test: /\.mjs$/,
-        use: [],
-        include: /node_modules/,
-        exclude: /\.(ts|d\.ts|d\.ts\.map)$/,
-      },
-      // i think we need to add another rule for
-      // codemirror-graphql esm.js files to load
+      // you can also use ts-loader of course
+      // i prefer to use babel-loader & @babel/plugin-typescript
+      // so we can experiment with how changing browserslistrc targets impacts
+      // monaco-graphql bundling
       {
         test: /\.(js|jsx|ts|tsx)$/,
         use: [{ loader: 'babel-loader' }],
-        exclude: /\.(d\.ts|d\.ts\.map|spec\.tsx)$/,
       },
       {
         test: /\.css$/,
@@ -45,19 +37,13 @@ const resultConfig = {
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
-        use: ['file-loader'],
-      },
-      {
-        test: require.resolve('monaco-graphql/esm/graphql.worker.js'),
-        use: {
-          loader: 'worker-loader',
-          options: {
-            filename: 'graphql.worker.js',
-          },
-        },
+        type: 'asset/resource',
       },
     ],
   },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
   plugins: [
     // in order to prevent async modules for CDN builds
     // until we can guarantee it will work with the CDN properly
@@ -86,9 +72,6 @@ const resultConfig = {
       ],
     }),
   ],
-  resolve: {
-    extensions: ['.mjs', '.js', '.json', '.jsx', '.css', '.ts', '.tsx'],
-  },
 };
 
 if (process.env.ANALYZE) {

package.json

@@ -5,7 +5,8 @@
   "license": "MIT",
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "examples/monaco-graphql-webpack"
     ]
   },
   "lint-staged": {
@@ -111,7 +112,6 @@
     "concurrently": "^7.0.0",
     "copy": "^0.3.2",
     "cors": "^2.8.5",
-    "cross-env": "^7.0.2",
     "cspell": "^5.15.2",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",