finish upgrading webpack & babel dependencies, fix monaco example (#3053

)

* a few more tweaks for clean builds on the monaco-graphql-webpack example. 
* reintroduce the monaco example reference workspace, make this a testbed for monaco-graphql development again
* consolidate more babel versions
* upgrade the rest of the webpack & babel ecosystem

DEVELOPMENT.md

@@ -94,7 +94,12 @@ Then, you can run these commands:
 
 ### Developing Monaco GraphQL
 
-Follow the
-[`monaco-graphql` example readme](examples/monaco-graphql-webpack/README.md) to
-set it up, and then you can run `yarn start-monaco` from anywhere in the
-repository!
+1. First run `yarn`.
+1. run `yarn tsc --watch` to watch `monaco-graphql` and
+   `graphql-language-service` in one screen session/terminal tab/etc
+1. in another session, run `yarn start-monaco` from anywhere in the repository
+   aside from an individual workspace.
+1. alternatively to the webpack example, or in addition, you can run monaco or
+   next.js examples, though these examples are simpler. They also require their
+   own `yarn` or `npm install` as they are excluded from the `workspaces`
+   resolved on global `yarn install`

examples/graphiql-webpack/package.json

@@ -23,12 +23,12 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
-    "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",
     "html-webpack-plugin": "^4.2.0",
     "react-dom": "^17.0.2",
-    "style-loader": "^1.1.3",
+    "style-loader": "^3.3.1",
     "webpack": "5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",

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": {
@@ -79,16 +80,15 @@
     "tsc": "tsc --build"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.8",
-    "@babel/node": "^7.16.8",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/polyfill": "^7.8.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/register": "^7.17.7",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@babel/register": "^7.21.0",
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
     "@manypkg/get-packages": "^1.1.3",
@@ -107,11 +107,10 @@
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "aws-serverless-express": "^3.4.0",
-    "babel-jest": "^27.0.0",
+    "babel-jest": "^29.4.3",
     "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",

packages/graphiql/package.json

@@ -69,23 +69,24 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^16.18.4",
     "@types/testing-library__jest-dom": "5.14.5",
-    "babel-loader": "^9.1.0",
-    "babel-plugin-macros": "^2.8.0",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-macros": "^3.1.0",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.5.1",
-    "cssnano": "^4.1.10",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
     "cypress": "^12.6.0",
     "express": "^4.17.3",
     "express-graphql": "experimental-stream-defer",
-    "fork-ts-checker-webpack-plugin": "4.1.3",
+    "fork-ts-checker-webpack-plugin": "7.3.0",
     "graphql": "^16.4.0",
     "graphql-subscriptions": "^2.0.0",
-    "html-webpack-plugin": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss": "8.4.21",
+    "postcss-loader": "7.0.2",
+    "postcss-import": "15.1.0",
+    "postcss-preset-env": "^8.0.1",
     "prop-types": "15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -95,9 +96,8 @@
     "rimraf": "^3.0.2",
     "serve": "^11.3.0",
     "start-server-and-test": "^1.10.11",
-    "style-loader": "^1.1.3",
+    "style-loader": "^3.3.1",
     "subscriptions-transport-ws": "0.11.0",
-    "ts-loader": "^9.4.2",
     "typescript": "^4.6.3",
     "webpack": "5.75.0",
     "webpack-bundle-analyzer": "^3.6.1",

packages/graphiql/postcss.config.js

@@ -1,6 +1,7 @@
-module.exports = ({ file, options }) => ({
+module.exports = ({ options, webpackLoaderContext }) => ({
   plugins: {
-    'postcss-import': { root: file.dirname },
+    // https://github.com/postcss/postcss-import/issues/442#issuecomment-822427606
+    'postcss-import': { root: webpackLoaderContext.context },
     // contains autoprefixer, etc
     'postcss-preset-env': options['postcss-preset-env'] || false,
     cssnano: process.env.NODE_ENV === 'production' ? options.cssnano : false,

packages/graphiql/resources/webpack.config.js

@@ -58,15 +58,7 @@ const resultConfig = {
       },
       {
         test: /\.css$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              hmr: isHMR,
-            },
-          },
-          'css-loader',
-        ],
+        use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'],
       },
       {
         test: /\.css$/,
@@ -98,7 +90,9 @@ const resultConfig = {
     }),
     new ForkTsCheckerWebpackPlugin({
       async: isDev,
-      tsconfig: rootPath('tsconfig.json'),
+      typescript: {
+        configFile: rootPath('tsconfig.json'),
+      },
     }),
     new (class {
       apply(compiler) {

packages/graphql-language-service-cli/package.json

@@ -35,7 +35,7 @@
     "graphql": "^15.5.0 || ^16.0.0"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.8.7",
+    "@babel/polyfill": "^7.12.1",
     "graphql-language-service": "^5.1.1",
     "graphql-language-service-server": "^2.9.5",
     "yargs": "^16.2.0"