Rename process to internalProcess (#270)

* Rename process to internalProcess This fixes GH-268. Webpack has issues with the process variable and by renaming the internal usage we can ensure that it points to our representation and not the external one. * Ensure rollup respects the symbol change
tbranyen · Apr 14, 2022 · 2ada15a · 2ada15a
1 parent e830996
commit 2ada15a
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 62 deletions.
diff --git a/packages/diffhtml-components/lib/util/process.js b/packages/diffhtml-components/lib/util/process.js
diff --git a/packages/diffhtml/lib/node/create.js b/packages/diffhtml/lib/node/create.js
@@ -1,4 +1,4 @@
-import process from '../util/process';
+import internalProcess from '../util/process';
 import globalThis from '../util/global';
 import {
   NodeCache,
@@ -23,7 +23,7 @@ const namespace = 'http://www.w3.org/2000/svg';
  * @return {ValidNode | null} A DOM Node matching the vTree
  */
 export default function createNode(vTreeLike, ownerDocument = globalThis.document, isSVG) {
-  if (process.env.NODE_ENV !== 'production') {
+  if (internalProcess.env.NODE_ENV !== 'production') {
     if (!vTreeLike) {
       throw new Error('Missing VTree when trying to create DOM Node');
     }

diff --git a/packages/diffhtml/lib/tasks/sync-trees.js b/packages/diffhtml/lib/tasks/sync-trees.js
@@ -1,15 +1,15 @@
 import syncTree from '../tree/sync';
 import createNode from '../node/create';
 import { StateCache, NODE_TYPE, PATCH_TYPE, EMPTY, Mount } from '../util/types';
-import process from '../util/process';
+import internalProcess from '../util/process';
 import Transaction from '../transaction';
 
 export default function syncTrees(/** @type {Transaction} */ transaction) {
   const { state, state: { measure }, oldTree, newTree, mount } = transaction;
 
   measure('sync trees');
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (internalProcess.env.NODE_ENV !== 'production') {
     if (!oldTree) {
       throw new Error('Missing old tree during synchronization');
     }
@@ -30,7 +30,7 @@ export default function syncTrees(/** @type {Transaction} */ transaction) {
   ) {
     // If there is no `parentNode` for the replace operation, we will need to
     // throw an error and prevent the `StateCache` from being updated.
-    if (process.env.NODE_ENV !== 'production') {
+    if (internalProcess.env.NODE_ENV !== 'production') {
       if (!/** @type {HTMLElement} */ (mount).parentNode) {
         throw new Error('Unable to replace top level node without a parent');
       }

diff --git a/packages/diffhtml/lib/transaction.js b/packages/diffhtml/lib/transaction.js
@@ -10,7 +10,7 @@ import {
   EMPTY,
 } from './util/types';
 import makeMeasure from './util/make-measure';
-import process from './util/process';
+import internalProcess from './util/process';
 import { protectVTree, gc } from './util/memory';
 import globalThis from './util/global';
 import schedule from './tasks/schedule';
@@ -82,7 +82,7 @@ export default class Transaction {
    * @param {Transaction} transaction
    */
   static assert(transaction) {
-    if (process.env.NODE_ENV !== 'production') {
+    if (internalProcess.env.NODE_ENV !== 'production') {
       if (typeof transaction.mount !== 'object' || !transaction.mount) {
         throw new Error('Transaction requires a DOM Node mount point');
       }
@@ -157,7 +157,7 @@ export default class Transaction {
    * @return {Promise<Transaction> | unknown}
    */
   start() {
-    if (process.env.NODE_ENV !== 'production') {
+    if (internalProcess.env.NODE_ENV !== 'production') {
       Transaction.assert(this);
     }
 

diff --git a/packages/diffhtml/lib/transition.js b/packages/diffhtml/lib/transition.js
@@ -1,4 +1,4 @@
-import process from './util/process';
+import internalProcess from './util/process';
 import {
   TransitionCache,
   NodeCache,
@@ -15,7 +15,7 @@ import {
  * @return {void}
  */
 export function addTransitionState(stateName, callback) {
-  if (process.env.NODE_ENV !== 'production') {
+  if (internalProcess.env.NODE_ENV !== 'production') {
     if (!TransitionStateNames.includes(stateName)) {
       throw new Error(`Invalid state name '${stateName}'`);
     }
@@ -35,7 +35,7 @@ export function addTransitionState(stateName, callback) {
  * @return {void}
  */
 export function removeTransitionState(stateName, callback) {
-  if (process.env.NODE_ENV !== 'production') {
+  if (internalProcess.env.NODE_ENV !== 'production') {
     // Only validate the stateName if the caller provides one.
     if (stateName && !TransitionStateNames.includes(stateName)) {
       throw new Error(`Invalid state name '${stateName}'`);

diff --git a/packages/diffhtml/lib/tree/sync.js b/packages/diffhtml/lib/tree/sync.js
@@ -1,5 +1,5 @@
 import Transaction from '../transaction';
-import process from '../util/process';
+import internalProcess from '../util/process';
 import {
   SyncTreeHookCache,
   TransactionState,
@@ -186,7 +186,7 @@ export default function syncTree(
         const vTree = nodes[i];
 
         if (vTree.key) {
-          if (process.env.NODE_ENV !== 'production') {
+          if (internalProcess.env.NODE_ENV !== 'production') {
             if (map.has(vTree.key)) {
               throw new Error(`Key: ${vTree.key} cannot be duplicated`);
             }

diff --git a/packages/diffhtml/lib/use.js b/packages/diffhtml/lib/use.js
@@ -7,7 +7,7 @@ import {
   ParseHookCache,
   Middleware,
 } from './util/types';
-import process from './util/process';
+import internalProcess from './util/process';
 import Internals from './util/internals';
 
 const { isArray } = Array;
@@ -45,7 +45,7 @@ export default function use(middleware) {
   const isFunction = typeof middleware === 'function';
   const isObject = typeof middleware === 'object';
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (internalProcess.env.NODE_ENV !== 'production') {
     if (!middleware || (!isFunction && !isObject) || isArray(middleware)) {
       throw new Error('Middleware must be a function or plain object');
     }

diff --git a/packages/diffhtml/lib/util/config.js b/packages/diffhtml/lib/util/config.js
@@ -1,4 +1,4 @@
-import process from './process';
+import internalProcess from './process';
 import { Config } from './types';
 import globalThis from './global';
 
@@ -59,7 +59,7 @@ export default function getConfig(name, defaultValue, type = typeof defaultValue
   const hasSearchParams = typeof URLSearchParams !== 'undefined';
   const hasLocation = typeof location !== 'undefined';
   const useSearchParams = hasSearchParams && hasLocation;
-  const useEnv = typeof process !== 'undefined' && process.env;
+  const useEnv = internalProcess.env;
 
   // Allow bypassing any lookups if overrides are passed and match the config
   // being looked up.
@@ -84,8 +84,8 @@ export default function getConfig(name, defaultValue, type = typeof defaultValue
 
   // Try environment variables.
   const upperKey = keyName.toUpperCase();
-  if (useEnv && upperKey in process.env) {
-    return formatValue(process.env[upperKey.toUpperCase()], type);
+  if (useEnv && upperKey in internalProcess.env) {
+    return formatValue(internalProcess.env[upperKey.toUpperCase()], type);
   }
 
   return defaultValue;

diff --git a/packages/diffhtml/lib/util/internals.js b/packages/diffhtml/lib/util/internals.js
@@ -6,7 +6,7 @@ import escape from './escape';
 import makeMeasure from './make-measure';
 import * as memory from './memory';
 import Pool from './pool';
-import process from './process';
+import internalProcess from './process';
 import { globalConfig } from './config';
 import {
   PATCH_TYPE,
@@ -41,7 +41,7 @@ export default /** @type {Internals} */ ({
   makeMeasure,
   memory,
   Pool,
-  process,
+  process: internalProcess,
   PATCH_TYPE,
   globalConfig,
 

diff --git a/packages/diffhtml/lib/util/parse.js b/packages/diffhtml/lib/util/parse.js
@@ -3,7 +3,7 @@
 
 import createTree from '../tree/create';
 import getConfig from './config';
-import process from './process';
+import internalProcess from './process';
 import { VTree, Supplemental, TransactionConfig, ParserConfig, EMPTY, NODE_TYPE } from './types';
 
 // Magic token used for interpolation.
@@ -199,7 +199,7 @@ const HTMLElement = (nodeName, rawAttrs, supplemental, options) => {
               assign(attributes, newName);
             }
             else {
-              if (process.env.NODE_ENV !== 'production') {
+              if (internalProcess.env.NODE_ENV !== 'production') {
                 throw new Error('Arrays cannot be spread as attributes');
               }
             }
@@ -291,7 +291,7 @@ export default function parse(html, supplemental, options = {}) {
   let currentParent = root;
   let lastTextPos = -1;
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (internalProcess.env.NODE_ENV !== 'production') {
     const markup = [html];
 
     if (!html.includes('<') && options.parser.strict) {
@@ -389,7 +389,7 @@ Possibly invalid markup. Opening tag was not properly closed.
         const closeMarkup = `</${name}>`;
         const index = html.indexOf(closeMarkup, tagEx.lastIndex);
 
-        if (process.env.NODE_ENV !== 'production') {
+        if (internalProcess.env.NODE_ENV !== 'production') {
           if (index === -1 && options.parser.strict && !selfClosing.has(name)) {
             // Find a subset of the markup passed in to validate.
             const markup = html
@@ -438,7 +438,7 @@ Possibly invalid markup. Opening tag was not properly closed.
     }
 
     if (bypassMatch || isClosingMatch || selfClosingMatch || selfClosing.has(name)) {
-      if (process.env.NODE_ENV !== 'production') {
+      if (internalProcess.env.NODE_ENV !== 'production') {
         if (currentParent && name !== currentParent.rawNodeName && options.parser.strict) {
           const nodeName = currentParent.rawNodeName;
 
@@ -518,7 +518,7 @@ Possibly invalid markup. Opening tag was not properly closed.
   // Find any last remaining text after the parsing completes over tags.
   const remainingText = html.slice(lastTextPos === -1 ? 0 : lastTextPos);
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (internalProcess.env.NODE_ENV !== 'production') {
     if ((remainingText.includes('>') || remainingText.includes('<')) && options.parser.strict) {
       // Find a subset of the markup passed in to validate.
       const markup = [remainingText];

diff --git a/packages/diffhtml/package-lock.json b/packages/diffhtml/package-lock.json
diff --git a/packages/diffhtml/package.json b/packages/diffhtml/package.json
@@ -45,7 +45,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-hypothetical": "^2.1.1",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "rollup-plugin-visualizer": "^5.6.0",
     "rollup-watch": "^4.3.1",
     "sinon": "^13.0.1",