Replace DevTools semver usages with a simpler inlined method

Author: markerikson

packages/react-devtools-shared/src/__tests__/utils-test.js

@@ -15,6 +15,9 @@ import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils'
 import {
   format,
   formatWithStyles,
+  semvercmp,
+  gt,
+  gte,
 } from 'react-devtools-shared/src/backend/utils';
 import {
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
@@ -252,4 +255,52 @@ describe('utils', () => {
       ]);
     });
   });
+
+  describe('semvercmp', () => {
+    it('should sort semver comparisons ascending', () => {
+      const unsortedVersions = [
+        '1.2.3',
+        '4.11.6',
+        '4.2.0',
+        '11.0.0-alpha.1',
+        '1.5.19',
+        '11.0.0-alpha.0',
+        '1.5.5',
+        '4.1.3',
+        '2.3.1',
+        '11.0.0',
+        '10.5.5',
+        '11.3.0',
+      ];
+
+      const sortedVersions = unsortedVersions.slice().sort(semvercmp);
+      expect(sortedVersions).toEqual([
+        '1.2.3',
+        '1.5.5',
+        '1.5.19',
+        '2.3.1',
+        '4.1.3',
+        '4.2.0',
+        '4.11.6',
+        '10.5.5',
+        // Specifically check non-numerical pre-release versions
+        '11.0.0-alpha.0',
+        '11.0.0-alpha.1',
+        '11.0.0',
+        '11.3.0',
+      ]);
+    });
+
+    it('gte should compare versions correctly', () => {
+      expect(gte('1.2.3', '1.2.1')).toBe(true);
+      expect(gte('1.2.1', '1.2.1')).toBe(true);
+      expect(gte('1.2.1', '1.2.2')).toBe(false);
+    });
+
+    it('gt should compare versions correctly', () => {
+      expect(gt('1.2.3', '1.2.1')).toBe(true);
+      expect(gt('1.2.1', '1.2.1')).toBe(false);
+      expect(gt('1.2.1', '1.2.2')).toBe(false);
+    });
+  });
 });

packages/react-devtools-shared/src/backend/renderer.js

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {gt, gte} from 'semver';
 import {
   ComponentFilterDisplayName,
   ComponentFilterElementType,
@@ -39,6 +38,7 @@ import {
   utfEncodeString,
 } from 'react-devtools-shared/src/utils';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+import {gt, gte} from 'react-devtools-shared/src/backend/utils';
 import {
   cleanForBridge,
   copyToClipboard,

packages/react-devtools-shared/src/backend/utils.js

@@ -275,3 +275,28 @@ export function isSynchronousXHRSupported(): boolean {
     window.document.featurePolicy.allowsFeature('sync-xhr')
   );
 }
+
+// https://www.npmjs.com/package/semver-compare
+export function semvercmp(a: string = '', b: string = ''): number {
+  const pa = a.split('.');
+  const pb = b.split('.');
+  // Handle more than 3 places, like '11.0.0-alpha.1'
+  const maxLength = Math.max(pa.length, pb.length);
+  for (let i = 0; i < maxLength; i++) {
+    const na = +pa[i];
+    const nb = +pb[i];
+    if (na > nb) return 1;
+    if (nb > na) return -1;
+    if (!isNaN(na) && isNaN(nb)) return 1;
+    if (isNaN(na) && !isNaN(nb)) return -1;
+  }
+  return 0;
+}
+
+export function gt(a: string = '', b: string = ''): boolean {
+  return semvercmp(a, b) === 1;
+}
+
+export function gte(a: string = '', b: string = ''): boolean {
+  return semvercmp(a, b) > -1;
+}

packages/react-devtools-shell/src/e2e-regression/app-legacy.js

@@ -4,9 +4,10 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {gte} from 'semver';
 import ListApp from '../e2e-apps/ListApp';
 import ListAppLegacy from '../e2e-apps/ListAppLegacy';
+import {gte} from 'react-devtools-shared/src/backend/utils';
+
 const version = process.env.E2E_APP_REACT_VERSION;
 
 function mountApp(App: () => React$Node) {