Merge branch '16.x.x' into maxintfields-16

Author: benjie

cspell.yml

@@ -19,6 +19,10 @@ overrides:
       - clsx
       - infima
       - noopener
+      - Vite
+      - craco
+      - esbuild
+      - swcrc
       - noreferrer
       - xlink
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql",
-  "version": "16.8.1",
+  "version": "16.8.2",
   "description": "A Query Language and Runtime which can target any service.",
   "license": "MIT",
   "private": true,
@@ -30,7 +30,7 @@
     "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
   },
   "scripts": {
-    "preversion": ". ./resources/checkgit.sh && npm ci --ignore-scripts",
+    "preversion": "bash -c '. ./resources/checkgit.sh && npm ci --ignore-scripts'",
     "version": "node resources/gen-version.js && npm test && git add src/version.ts",
     "fuzzonly": "mocha --full-trace src/**/__tests__/**/*-fuzz.ts",
     "changelog": "node resources/gen-changelog.js",

package.json

@@ -1,4 +1,5 @@
 # Exit immediately if any subcommand terminated
+set -e
 trap "exit 1" ERR
 
 #

resources/checkgit.sh

@@ -1,5 +1,11 @@
 import { inspect } from './inspect';
 
+/* c8 ignore next 3 */
+const isProduction =
+  globalThis.process &&
+  // eslint-disable-next-line no-undef
+  process.env.NODE_ENV === 'production';
+
 /**
  * A replacement for instanceof which includes an error warning when multi-realm
  * constructors are detected.
@@ -9,7 +15,7 @@ import { inspect } from './inspect';
 export const instanceOf: (value: unknown, constructor: Constructor) => boolean =
   /* c8 ignore next 6 */
   // FIXME: https://github.com/graphql/graphql-js/issues/2317
-  globalThis.process && globalThis.process.env.NODE_ENV === 'production'
+  isProduction
     ? function instanceOf(value: unknown, constructor: Constructor): boolean {
         return value instanceof constructor;
       }

src/jsutils/instanceOf.ts

@@ -4,14 +4,14 @@
 /**
  * A string containing the version of the GraphQL.js library
  */
-export const version = '16.8.1' as string;
+export const version = '16.8.2' as string;
 
 /**
  * An object containing the components of the GraphQL.js version string
  */
 export const versionInfo = Object.freeze({
   major: 16 as number,
   minor: 8 as number,
-  patch: 1 as number,
+  patch: 2 as number,
   preReleaseTag: null as string | null,
 });

src/version.ts

@@ -0,0 +1,127 @@
+---
+title: Going to production
+category: FAQ
+---
+
+GraphQL.JS contains a few development checks which in production will cause slower performance and
+an increase in bundle-size. Every bundler goes about these changes different, in here we'll list
+out the most popular ones.
+
+## Bundler-specific configuration
+
+Here are some bundler-specific suggestions for configuring your bundler to remove `globalThis.process` and `process.env.NODE_ENV` on build time.
+
+### Vite
+
+```js
+export default defineConfig({
+  // ...
+  define: {
+    'globalThis.process': JSON.stringify(true),
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  },
+});
+```
+
+### Next.js
+
+```js
+// ...
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack(config, { webpack }) {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'globalThis.process': JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+    );
+    return config;
+  },
+};
+
+module.exports = nextConfig;
+```
+
+### create-react-app
+
+With `create-react-app`, you need to use a third-party package like [`craco`](https://craco.js.org/) to modify the bundler configuration.
+
+```js
+const webpack = require('webpack');
+module.exports = {
+  webpack: {
+    plugins: [
+      new webpack.DefinePlugin({
+        'globalThis.process': JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+    ],
+  },
+};
+```
+
+### esbuild
+
+```json
+{
+  "define": {
+    "globalThis.process": true,
+    "process.env.NODE_ENV": "production"
+  }
+}
+```
+
+### Webpack
+
+```js
+config.plugins.push(
+  new webpack.DefinePlugin({
+    'globalThis.process': JSON.stringify(true),
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  }),
+);
+```
+
+### Rollup
+
+```js
+export default [
+  {
+    // ... input, output, etc.
+    plugins: [
+      minify({
+        mangle: {
+          toplevel: true,
+        },
+        compress: {
+          toplevel: true,
+          global_defs: {
+            '@globalThis.process': JSON.stringify(true),
+            '@process.env.NODE_ENV': JSON.stringify('production'),
+          },
+        },
+      }),
+    ],
+  },
+];
+```
+
+### SWC
+
+```json title=".swcrc"
+{
+  "jsc": {
+    "transform": {
+      "optimizer": {
+        "globals": {
+          "vars": {
+            "globalThis.process": true,
+            "process.env.NODE_ENV": "production"
+          }
+        }
+      }
+    }
+  }
+}
+```

website/docs/tutorials/going-to-production.md

@@ -15,6 +15,11 @@ module.exports = {
       label: 'Advanced',
       items: ['tutorials/constructing-types'],
     },
+    {
+      type: 'category',
+      label: 'FAQ',
+      items: ['tutorials/going-to-production'],
+    },
     'tutorials/express-graphql',
   ],
 };