FIX: Compatability issues

Mostly taken from #19

package.json

@@ -15,7 +15,6 @@
     "build": "yarn build:cjs && yarn build:esm",
     "build:cjs": "npx babel src -d dist --ignore '**/*.test.js'",
     "build:esm": "BABEL_TYPE=esm npx babel src -d esm --ignore '**/*.test.js'",
-    "preinstall": "node scripts/check-package-manager.js && sh scripts/enforceVersions.sh",
     "publish": "node scripts/publish",
     "prepublish": "yarn build",
     "test": "yarn test:lint && yarn test:unit",
@@ -56,17 +55,14 @@
     "eslint-plugin-react": "7.22.0",
     "jest": "^26.5.0",
     "prettier": "2.2.1",
-    "react-adaptive-hooks": "0.0.8",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "shelljs": "0.8.5",
     "stylelint": "^13.7.2",
     "stylelint-config-recommended": "5.0.0",
     "web-vitals": "^3.3.2"
   },
-  "peerDependencies": {
-    "react": ">=16.9.0"
-  },
   "devDependencies": {
     "@babel/cli": "^7.21.0",
     "@babel/core": "^7.21.0",
@@ -78,8 +74,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "^13.1.9",
-    "react": "^17.0.2"
+    "@testing-library/user-event": "^13.1.9"
   },
   "packageManager": "[email protected]"
 }

src/index.js

@@ -1,11 +1,10 @@
 import fetch from 'cross-fetch';
 import { useEffect, useState } from 'react';
 import { onCLS, onFID, onLCP, onFCP, onTTFB, onINP } from 'web-vitals';
-import {
-  useNetworkStatus,
-  useHardwareConcurrency,
-  useMemoryStatus,
-} from 'react-adaptive-hooks';
+
+import { useNetworkStatus } from './lib/use-network-status';
+import { useHardwareConcurrency } from './lib/use-hardware-concurrency';
+import { useMemoryStatus } from './lib/use-memory-status';
 import useEvent from './use-event';
 
 const noOp = () => {};

src/index.test.js

@@ -5,6 +5,9 @@ import useWebVitals from './index';
 
 jest.mock('cross-fetch');
 jest.mock('web-vitals');
+jest.mock('./lib/use-memory-status.js')
+jest.mock('./lib/use-hardware-concurrency.js')
+jest.mock('./lib/use-network-status.js')
 
 beforeEach(jest.clearAllMocks);
 

src/lib/__mocks__/use-hardware-concurrency.js

@@ -0,0 +1,5 @@
+const useHardwareConcurrency = () => {
+    return { numberOfLogicalProcessors: 4 };
+};
+
+export {useHardwareConcurrency}

src/lib/__mocks__/use-memory-status.js

@@ -0,0 +1,5 @@
+const useMemoryStatus = () => {
+    return { deviceMemory: 3 };
+};
+
+export {useMemoryStatus}

src/lib/__mocks__/use-network-status.js

@@ -0,0 +1,5 @@
+const useNetworkStatus = () => {
+    return { effectiveConnectionType: '4g' };
+};
+
+export {useNetworkStatus}

src/lib/use-hardware-concurrency.js

@@ -0,0 +1,14 @@
+let initialHardwareConcurrency;
+if (typeof navigator !== 'undefined' && 'hardwareConcurrency' in navigator) {
+  initialHardwareConcurrency = {
+    unsupported: false,
+    numberOfLogicalProcessors: navigator.hardwareConcurrency
+  };
+} else {
+  initialHardwareConcurrency = { unsupported: true };
+}
+const useHardwareConcurrency = () => {
+  return { ...initialHardwareConcurrency };
+};
+
+export { useHardwareConcurrency };

src/lib/use-hardware-concurrency.test.js

@@ -0,0 +1,63 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+afterEach(function() {
+  // Reload hook for every test
+  jest.resetModules();
+});
+
+describe('useHardwareConcurrency', () => {
+  const navigator = window.navigator;
+
+  afterEach(() => {
+    if (!window.navigator) window.navigator = navigator;
+  });
+
+  test(`should return "true" for unsupported case`, () => {
+    Object.defineProperty(window, 'navigator', {
+      value: undefined,
+      configurable: true,
+      writable: true
+    });
+
+    const { useHardwareConcurrency } = require('./use-hardware-concurrency.js');
+    const { result } = renderHook(() => useHardwareConcurrency());
+
+    expect(result.current.unsupported).toBe(true);
+  });
+
+  test(`should return window.navigator.hardwareConcurrency`, () => {
+    const { useHardwareConcurrency } = require('./use-hardware-concurrency.js');
+    const { result } = renderHook(() => useHardwareConcurrency());
+
+    expect(result.current.numberOfLogicalProcessors).toBe(
+      window.navigator.hardwareConcurrency
+    );
+    expect(result.current.unsupported).toBe(false);
+  });
+
+  test('should return 4 for device of hardwareConcurrency = 4', () => {
+    Object.defineProperty(window.navigator, 'hardwareConcurrency', {
+      value: 4,
+      configurable: true,
+      writable: true
+    });
+    const { useHardwareConcurrency } = require('./use-hardware-concurrency.js');
+    const { result } = renderHook(() => useHardwareConcurrency());
+
+    expect(result.current.numberOfLogicalProcessors).toEqual(4);
+    expect(result.current.unsupported).toBe(false);
+  });
+
+  test('should return 2 for device of hardwareConcurrency = 2', () => {
+    Object.defineProperty(window.navigator, 'hardwareConcurrency', {
+      value: 2,
+      configurable: true,
+      writable: true
+    });
+    const { useHardwareConcurrency } = require('./use-hardware-concurrency.js');
+    const { result } = renderHook(() => useHardwareConcurrency());
+
+    expect(result.current.numberOfLogicalProcessors).toEqual(2);
+    expect(result.current.unsupported).toBe(false);
+  });
+});

src/lib/use-memory-status.js

@@ -0,0 +1,31 @@
+let unsupported;
+if (typeof navigator !== 'undefined' && 'deviceMemory' in navigator) {
+  unsupported = false;
+} else {
+  unsupported = true;
+}
+let memoryStatus;
+if (!unsupported) {
+  const performanceMemory = 'memory' in performance ? performance.memory : null;
+  memoryStatus = {
+    unsupported,
+    deviceMemory: navigator.deviceMemory,
+    totalJSHeapSize: performanceMemory
+      ? performanceMemory.totalJSHeapSize
+      : null,
+    usedJSHeapSize: performanceMemory ? performanceMemory.usedJSHeapSize : null,
+    jsHeapSizeLimit: performanceMemory
+      ? performanceMemory.jsHeapSizeLimit
+      : null
+  };
+} else {
+  memoryStatus = { unsupported };
+}
+
+const useMemoryStatus = initialMemoryStatus => {
+  return unsupported && initialMemoryStatus
+    ? { ...memoryStatus, ...initialMemoryStatus }
+    : { ...memoryStatus };
+};
+
+export { useMemoryStatus };

src/lib/use-memory-status.test.js

@@ -0,0 +1,108 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+afterEach(function() {
+  // Reload hook for every test
+  jest.resetModules();
+});
+
+const getMemoryStatus = currentResult => ({
+  unsupported: false,
+  deviceMemory: currentResult.deviceMemory,
+  totalJSHeapSize: currentResult.totalJSHeapSize,
+  usedJSHeapSize: currentResult.usedJSHeapSize,
+  jsHeapSizeLimit: currentResult.jsHeapSizeLimit
+});
+
+describe('useMemoryStatus', () => {
+  test(`should return "true" for unsupported case`, () => {
+    const { useMemoryStatus } = require('./use-memory-status.js');
+    const { result } = renderHook(() => useMemoryStatus());
+
+    expect(result.current.unsupported).toBe(true);
+  });
+
+  test('should return initialMemoryStatus for unsupported case', () => {
+    const mockInitialMemoryStatus = {
+      deviceMemory: 4
+    };
+    const { deviceMemory } = mockInitialMemoryStatus;
+
+    const { useMemoryStatus } = require('./use-memory-status.js');
+    const { result } = renderHook(() =>
+      useMemoryStatus(mockInitialMemoryStatus)
+    );
+
+    expect(result.current.unsupported).toBe(true);
+    expect(result.current.deviceMemory).toEqual(deviceMemory);
+  });
+
+  test('should return mockMemory status', () => {
+    const mockMemoryStatus = {
+      deviceMemory: 4,
+      totalJSHeapSize: 60,
+      usedJSHeapSize: 40,
+      jsHeapSizeLimit: 50
+    };
+
+    global.navigator.deviceMemory = mockMemoryStatus.deviceMemory;
+
+    global.window.performance.memory = {
+      totalJSHeapSize: mockMemoryStatus.totalJSHeapSize,
+      usedJSHeapSize: mockMemoryStatus.usedJSHeapSize,
+      jsHeapSizeLimit: mockMemoryStatus.jsHeapSizeLimit
+    };
+
+    const { useMemoryStatus } = require('./use-memory-status.js');
+    const { result } = renderHook(() => useMemoryStatus());
+
+    expect(getMemoryStatus(result.current)).toEqual({
+      ...mockMemoryStatus,
+      unsupported: false
+    });
+  });
+
+  test('should return mockMemory status without performance memory data', () => {
+    const mockMemoryStatus = {
+      deviceMemory: 4
+    };
+
+    global.navigator.deviceMemory = mockMemoryStatus.deviceMemory;
+    delete global.window.performance.memory;
+
+    const { useMemoryStatus } = require('./use-memory-status.js');
+    const { result } = renderHook(() => useMemoryStatus());
+
+    expect(result.current.deviceMemory).toEqual(mockMemoryStatus.deviceMemory);
+    expect(result.current.unsupported).toEqual(false);
+  });
+
+  test('should not return initialMemoryStatus for supported case', () => {
+    const mockMemoryStatus = {
+      deviceMemory: 4,
+      totalJSHeapSize: 60,
+      usedJSHeapSize: 40,
+      jsHeapSizeLimit: 50
+    };
+    const mockInitialMemoryStatus = {
+      deviceMemory: 4
+    };
+
+    global.navigator.deviceMemory = mockMemoryStatus.deviceMemory;
+
+    global.window.performance.memory = {
+      totalJSHeapSize: mockMemoryStatus.totalJSHeapSize,
+      usedJSHeapSize: mockMemoryStatus.usedJSHeapSize,
+      jsHeapSizeLimit: mockMemoryStatus.jsHeapSizeLimit
+    };
+
+    const { useMemoryStatus } = require('./use-memory-status.js');
+    const { result } = renderHook(() =>
+      useMemoryStatus(mockInitialMemoryStatus)
+    );
+
+    expect(getMemoryStatus(result.current)).toEqual({
+      ...mockMemoryStatus,
+      unsupported: false
+    });
+  });
+});

src/lib/use-network-status.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+
+let unsupported;
+
+const useNetworkStatus = initialEffectiveConnectionType => {
+  if (typeof navigator !== 'undefined' && 'connection' in navigator && 'effectiveType' in navigator.connection) {
+    unsupported = false;
+  } else {
+    unsupported = true;
+  }
+
+  const initialNetworkStatus = {
+    unsupported,
+    effectiveConnectionType: unsupported
+      ? initialEffectiveConnectionType
+      : navigator.connection.effectiveType
+  };
+
+  const [networkStatus, setNetworkStatus] = useState(initialNetworkStatus);
+
+  useEffect(() => {
+    if (!unsupported) {
+      const navigatorConnection = navigator.connection;
+      const updateECTStatus = () => {
+        setNetworkStatus({
+          effectiveConnectionType: navigatorConnection.effectiveType
+        });
+      };
+      navigatorConnection.addEventListener('change', updateECTStatus);
+      return () => {
+        navigatorConnection.removeEventListener('change', updateECTStatus);
+      };
+    }
+  }, []);
+
+  return { ...networkStatus, setNetworkStatus };
+};
+
+export { useNetworkStatus };