feat: typeofReplacements option for plugin-replace

Author: guybedford

packages/replace/README.md

@@ -65,6 +65,39 @@ Default: `['\b', '\b']`
 
 Specifies the boundaries around which strings will be replaced. By default, delimiters are [word boundaries](https://www.regular-expressions.info/wordboundaries.html). See [Word Boundaries](#word-boundaries) below for more information.
 
+### `typeofReplacements`
+
+Type: `Boolean`<br>
+Default: `false`
+
+When replacing dot-separated object properties like `process.env.NODE_ENV`, will also replace typeof checks against the objects
+with `"object"`.
+
+For example:
+
+```js
+replace({
+  values: {
+    'process.env.NODE_ENV': '"production"',
+  },
+});
+```
+
+```js
+// Input
+if (typeof process !== 'undefined' && process.env.NODE_ENV === 'production') {
+  console.log('production');
+}
+// Without `typeofReplacements`
+if (typeof process !== 'undefined' && 'production' === 'production') {
+  console.log('production');
+}
+// With `typeofReplacements`
+if ('object' !== 'undefined' && 'production' === 'production') {
+  console.log('production');
+}
+```
+
 ### `preventAssignment`
 
 Type: `Boolean`<br>

packages/replace/src/index.js

@@ -24,6 +24,7 @@ function getReplacements(options) {
   delete values.exclude;
   delete values.sourcemap;
   delete values.sourceMap;
+  delete values.typeofReplacements;
   return values;
 }
 
@@ -35,10 +36,27 @@ function mapToFunctions(object) {
   }, {});
 }
 
+const objKeyRegEx = /^([_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*)(\.([_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*))+$/;
+function expandTypeofReplacements(replacements) {
+  Object.keys(replacements).forEach((key) => {
+    const objMatch = key.match(objKeyRegEx);
+    if (!objMatch) return;
+    let dotIndex = objMatch[1].length;
+    let lastIndex = 0;
+    do {
+      replacements[`typeof ${key.slice(lastIndex, dotIndex)}`] = '"object"';
+      lastIndex = dotIndex + 1;
+      dotIndex = key.indexOf('.', lastIndex);
+    } while (dotIndex !== -1);
+  });
+}
+
 export default function replace(options = {}) {
   const filter = createFilter(options.include, options.exclude);
-  const { delimiters, preventAssignment } = options;
-  const functionValues = mapToFunctions(getReplacements(options));
+  const { delimiters, preventAssignment, typeofReplacements } = options;
+  const replacements = getReplacements(options);
+  if (typeofReplacements) expandTypeofReplacements(replacements);
+  const functionValues = mapToFunctions(replacements);
   const keys = Object.keys(functionValues).sort(longest).map(escape);
   const lookahead = preventAssignment ? '(?!\\s*=[^=])' : '';
   const pattern = delimiters

packages/replace/test/fixtures/form/process-check/_config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'Handles process type guards in replacements',
+  options: {
+    'process.env.NODE_ENV': '"production"',
+    preventAssignment: true,
+    typeofReplacements: true
+  }
+};

packages/replace/test/fixtures/form/process-check/input.js

@@ -0,0 +1,3 @@
+if (typeof process !== 'undefined' && process.env.NODE_ENV === 'production') {
+  console.log('production');
+}

packages/replace/test/fixtures/form/process-check/output.js

@@ -0,0 +1 @@
+process.env.DEBUG = 'test';

packages/replace/test/snapshots/form.js.md

@@ -64,3 +64,11 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     'process.env.DEBUG = \'test\';'
+
+## process-check: Handles process type guards in replacements
+
+> Snapshot 1
+
+    `if ("object" !== 'undefined' && "production" ==='production') {␊
+      console.log('production');␊
+    }`