Port error extraction setup from master

errors.json

@@ -0,0 +1,18 @@
+{
+  "0": "It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function.",
+  "1": "Expected the enhancer to be a function.",
+  "2": "Expected the reducer to be a function.",
+  "3": "You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.",
+  "4": "Expected the listener to be a function.",
+  "5": "You may not call store.subscribe() while the reducer is executing. If you would like to be notified after the store has been updated, subscribe from a component and invoke store.getState() in the callback to access the latest state. See https://redux.js.org/api/store#subscribelistener for more details.",
+  "6": "You may not unsubscribe from a store listener while the reducer is executing. See https://redux.js.org/api/store#subscribelistener for more details.",
+  "7": "Actions must be plain objects. Use custom middleware for async actions.",
+  "8": "Actions may not have an undefined \"type\" property. Have you misspelled a constant?",
+  "9": "Reducers may not dispatch actions.",
+  "10": "Expected the nextReducer to be a function.",
+  "11": "Expected the observer to be an object.",
+  "12": "bindActionCreators expected an object or a function, instead received . Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?",
+  "13": "Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.",
+  "14": "Reducer \"\" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.",
+  "15": "Reducer \"\" returned undefined when probed with a random type. Don't try to handle  or other actions in \"redux/*\" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null."
+}

rollup.config.js

@@ -37,6 +37,7 @@ export default [
         extensions,
         plugins: [
           ['@babel/plugin-transform-runtime', { version: babelRuntimeVersion }],
+          ['./scripts/mangleErrors.js', { minify: false }]
         ],
         babelHelpers: 'runtime'
       })
@@ -62,6 +63,7 @@ export default [
             '@babel/plugin-transform-runtime',
             { version: babelRuntimeVersion, useESModules: true }
           ],
+          ['./scripts/mangleErrors.js', { minify: false }]
         ],
         babelHelpers: 'runtime'
       })
@@ -82,6 +84,7 @@ export default [
       babel({
         extensions,
         exclude: 'node_modules/**',
+        plugins: [['./scripts/mangleErrors.js', { minify: true }]],
         skipPreflightCheck: true
       }),
       terser({
@@ -111,6 +114,7 @@ export default [
       babel({
         extensions,
         exclude: 'node_modules/**',
+        plugins: [['./scripts/mangleErrors.js', { minify: false }]]
       }),
       replace({
         'process.env.NODE_ENV': JSON.stringify('development')
@@ -134,6 +138,7 @@ export default [
       babel({
         extensions,
         exclude: 'node_modules/**',
+        plugins: [['./scripts/mangleErrors.js', { minify: true }]],
         skipPreflightCheck: true
       }),
       replace({

scripts/mangleErrors.js

@@ -0,0 +1,151 @@
+const fs = require('fs')
+const helperModuleImports = require('@babel/helper-module-imports')
+
+/**
+ * Converts an AST type into a javascript string so that it can be added to the error message lookup.
+ *
+ * Adapted from React (https://github.com/facebook/react/blob/master/scripts/shared/evalToString.js) with some
+ * adjustments
+ */
+const evalToString = ast => {
+  switch (ast.type) {
+    case 'StringLiteral':
+    case 'Literal': // ESLint
+      return ast.value
+    case 'BinaryExpression': // `+`
+      if (ast.operator !== '+') {
+        throw new Error('Unsupported binary operator ' + ast.operator)
+      }
+      return evalToString(ast.left) + evalToString(ast.right)
+    case 'TemplateLiteral':
+      return ast.quasis.reduce(
+        (concatenatedValue, templateElement) =>
+          concatenatedValue + templateElement.value.raw,
+        ''
+      )
+    case 'Identifier':
+      return ast.name
+    default:
+      throw new Error('Unsupported type ' + ast.type)
+  }
+}
+
+/**
+ * Takes a `throw new error` statement and transforms it depending on the minify argument. Either option results in a
+ * smaller bundle size in production for consumers.
+ *
+ * If minify is enabled, we'll replace the error message with just an index that maps to an arrow object lookup.
+ *
+ * If minify is disabled, we'll add in a conditional statement to check the process.env.NODE_ENV which will output a
+ * an error number index in production or the actual error message in development. This allows consumers using webpak
+ * or another build tool to have these messages in development but have just the error index in production.
+ *
+ * E.g.
+ *  Before:
+ *    throw new Error("This is my error message.");
+ *    throw new Error("This is a second error message.");
+ *
+ *  After (with minify):
+ *    throw new Error(0);
+ *    throw new Error(1);
+ *
+ *  After: (without minify):
+ *    throw new Error(node.process.NODE_ENV === 'production' ? 0 : "This is my error message.");
+ *    throw new Error(node.process.NODE_ENV === 'production' ? 1 : "This is a second error message.");
+ */
+module.exports = babel => {
+  const t = babel.types
+  // When the plugin starts up, we'll load in the existing file. This allows us to continually add to it so that the
+  // indexes do not change between builds.
+  let errorsFiles = ''
+  if (fs.existsSync('errors.json')) {
+    errorsFiles = fs.readFileSync('errors.json').toString()
+  }
+  let errors = Object.values(JSON.parse(errorsFiles || '{}'))
+  // This variable allows us to skip writing back to the file if the errors array hasn't changed
+  let changeInArray = false
+
+  return {
+    pre: () => {
+      changeInArray = false
+    },
+    visitor: {
+      ThrowStatement(path, file) {
+        const arguments = path.node.argument.arguments
+        const minify = file.opts.minify
+
+        if (arguments && arguments[0]) {
+          // Skip running this logic when certain types come up:
+          //  Identifier comes up when a variable is thrown (E.g. throw new error(message))
+          //  NumericLiteral, CallExpression, and ConditionalExpression is code we have already processed
+          if (
+            path.node.argument.arguments[0].type === 'Identifier' ||
+            path.node.argument.arguments[0].type === 'NumericLiteral' ||
+            path.node.argument.arguments[0].type === 'ConditionalExpression' ||
+            path.node.argument.arguments[0].type === 'CallExpression'
+          ) {
+            return
+          }
+
+          const errorMsgLiteral = evalToString(path.node.argument.arguments[0])
+
+          if (errorMsgLiteral.includes('Super expression')) {
+            // ignore Babel runtime error message
+            return
+          }
+
+          // Attempt to get the existing index of the error. If it is not found, add it to the array as a new error.
+          let errorIndex = errors.indexOf(errorMsgLiteral)
+          if (errorIndex === -1) {
+            errors.push(errorMsgLiteral)
+            errorIndex = errors.length - 1
+            changeInArray = true
+          }
+
+          // Import the error message function
+          const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
+            path,
+            'src/utils/formatProdErrorMessage',
+            { nameHint: 'formatProdErrorMessage' }
+          )
+
+          // Creates a function call to output the message to the error code page on the website
+          const prodMessage = t.callExpression(
+            formatProdErrorMessageIdentifier,
+            [t.numericLiteral(errorIndex)]
+          )
+
+          if (minify) {
+            path.replaceWith(
+              t.throwStatement(
+                t.newExpression(t.identifier('Error'), [prodMessage])
+              )
+            )
+          } else {
+            path.replaceWith(
+              t.throwStatement(
+                t.newExpression(t.identifier('Error'), [
+                  t.conditionalExpression(
+                    t.binaryExpression(
+                      '===',
+                      t.identifier('process.env.NODE_ENV'),
+                      t.stringLiteral('production')
+                    ),
+                    prodMessage,
+                    path.node.argument.arguments[0]
+                  )
+                ])
+              )
+            )
+          }
+        }
+      }
+    },
+    post: () => {
+      // If there is a new error in the array, convert it to an indexed object and write it back to the file.
+      if (changeInArray) {
+        fs.writeFileSync('errors.json', JSON.stringify({ ...errors }, null, 2))
+      }
+    }
+  }
+}

src/createStore.js

@@ -126,7 +126,7 @@ export default function createStore(reducer, preloadedState, enhancer) {
         'You may not call store.subscribe() while the reducer is executing. ' +
           'If you would like to be notified after the store has been updated, subscribe from a ' +
           'component and invoke store.getState() in the callback to access the latest state. ' +
-          'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
+          'See https://redux.js.org/api/store#subscribelistener for more details.'
       )
     }
 
@@ -143,7 +143,7 @@ export default function createStore(reducer, preloadedState, enhancer) {
       if (isDispatching) {
         throw new Error(
           'You may not unsubscribe from a store listener while the reducer is executing. ' +
-            'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
+            'See https://redux.js.org/api/store#subscribelistener for more details.'
         )
       }
 

src/utils/formatProdErrorMessage.js

@@ -0,0 +1,15 @@
+/**
+ * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
+ *
+ * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
+ * during build.
+ * @param {number} code
+ */
+function formatProdErrorMessage(code) {
+  return (
+    `Minified Redux error #${code}; visit https://redux.js.org/Errors?code=${code} for the full message or ` +
+    'use the non-minified dev environment for full errors. '
+  )
+}
+
+export default formatProdErrorMessage