refactor(Device): deprecate Device class and move all methods to smaller util functions (#697)

Author: MarcusNotheis

.eslintignore

@@ -10,5 +10,4 @@ shared
 rollup.config.js
 index.cjs.js
 index.esm.js
-packages/base/third-party/
 packages/cra-template

.reuse/dep5

@@ -11,3 +11,7 @@ License: Apache-2.0
 Files: /packages/charts/src/components/PieChart/PieChart.tsx
 Copyright: 2016-2020 Recharts Group
 License: MIT
+
+Files: packages/base/src/hooks/useIsomorphicLayoutEffect.ts
+Copyright: 2019 Tanner Linsley
+License: MIT

.storybook/main.js

@@ -81,7 +81,7 @@ module.exports = {
       '@ui5/webcomponents-react/dist': path.join(PATHS.root, 'packages', 'main', 'dist'),
       '@ui5/webcomponents-react': path.join(PATHS.root, 'packages', 'main', 'src'),
       '@ui5/webcomponents-react-charts': path.join(PATHS.root, 'packages', 'charts', 'src'),
-      '@ui5/webcomponents-react-base/third-party': path.join(PATHS.root, 'packages', 'base', 'third-party'),
+      '@ui5/webcomponents-react-base/types': path.join(PATHS.root, 'packages', 'base', 'types'),
       '@ui5/webcomponents-react-base': path.join(PATHS.root, 'packages', 'base', 'src')
     };
 

LICENSES/MIT.txt

@@ -0,0 +1,19 @@
+MIT License Copyright (c) <year> <copyright holders>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next
+paragraph) shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
+OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
+OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

config/jest.config.js

@@ -28,7 +28,7 @@ module.exports = {
     '^@shared/(.*)$': '<rootDir>/shared/$1',
     '^@ui5/webcomponents-react/dist/(.*)$': '<rootDir>/packages/main/dist/$1',
     '^@ui5/webcomponents-react/(.*)$': '<rootDir>/packages/main/src/$1',
-    '^@ui5/webcomponents-react-base/third-party/(.*)$': '<rootDir>/packages/base/third-party/$1',
+    '^@ui5/webcomponents-react-base/types(.*)$': '<rootDir>/packages/base/types/$1',
     '^@ui5/webcomponents-react-base/(.*)$': '<rootDir>/packages/base/src/$1',
     '^@ui5/webcomponents-react-charts/(.*)$': '<rootDir>/packages/charts/src/$1',
     '\\.(css|less)$': 'identity-obj-proxy'

config/jestsetup.ts

@@ -38,14 +38,19 @@ expect.addSnapshotSerializer(jssSerializer);
 expect.addSnapshotSerializer(contentLoaderSerializer);
 
 export const setupMatchMedia = () => {
-  // @ts-ignore
-  window.matchMedia = () => {
-    return {
-      matches: true,
-      addListener() {},
-      removeListener() {}
-    };
-  };
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn()
+    }))
+  });
 };
 
 export const setupResizeObserver = () => {

packages/base/package.json

@@ -14,13 +14,12 @@
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "sideEffects": [
-    "**/third-party/*",
     "./polyfill/*",
     "core-js/**/*",
     "intersection-observer"
   ],
   "scripts": {
-    "clean": "rimraf cjs Device hooks lib polyfill styling types utils index.esm.js index.d.ts",
+    "clean": "rimraf cjs Device hooks lib polyfill styling utils index.esm.js index.d.ts",
     "build:rollup": "rollup -c rollup.config.js",
     "build:polyfills": "tsc ./src/polyfill/*.ts --outDir ./polyfill --skipLibCheck",
     "build": "npm-run-all -s build:rollup build:polyfills",

packages/base/src/Device/Media.test.ts

@@ -1,49 +1,21 @@
-import { setupMatchMedia } from '../../../../config/jestsetup';
 import { EventRegistry } from './EventRegistry';
-import { Media, RANGESETS } from './Media';
-
-const defaultSupportInstance = {
-  matchmedialistener: false,
-  matchmedia: false
-};
+import { getCurrentRange, MediaLegacy, RANGESETS } from './Media';
 
 describe('Device - Media', () => {
   test('invoke constructor', () => {
-    const media = new Media(defaultSupportInstance);
-    // @ts-ignore
-    expect(media.mediaTimeout).toBe(100);
+    const media = new MediaLegacy();
     expect(media.hasRangeSet(RANGESETS.SAP_STANDARD)).toBe(true);
     expect(media.hasRangeSet(RANGESETS.SAP_STANDARD_EXTENDED)).toBe(true);
-  });
-
-  test('invoke constructor 2', () => {
-    const media = new Media({ matchmedia: true, matchmedialistener: true });
-    // @ts-ignore
-    expect(media.mediaTimeout).toBe(0);
+    media.initRangeSet(RANGESETS.SAP_STANDARD_EXTENDED);
     expect(media.hasRangeSet(RANGESETS.SAP_STANDARD)).toBe(true);
-    expect(media.hasRangeSet(RANGESETS.SAP_STANDARD_EXTENDED)).toBe(true);
   });
 
-  test('matchLegacy', () => {
-    const media = new Media(defaultSupportInstance);
-    // @ts-ignore
-    window.matchMedia = () => {
-      return false;
-    };
-    expect(media.matches(19, 20, 'rem')).toBe(false);
-  });
-
-  test('match', () => {
-    const media = new Media({ matchmedia: true, matchmedialistener: true });
-    // @ts-ignore
-    window.matchMedia = () => {
-      return { matches: true };
-    };
-    expect(media.matches(19, 20, 'rem')).toBe(true);
+  test('getCurrentRangeSet with undefined Range Set', () => {
+    expect(getCurrentRange('Not_Defined', 100)).toBeNull();
   });
 
   test('Attach, fire and Detach Event', () => {
-    const media = new Media(defaultSupportInstance);
+    const media = new MediaLegacy();
     const callback = jest.fn();
     // @ts-ignore
     media.attachHandler(callback, this);
@@ -56,27 +28,26 @@ describe('Device - Media', () => {
   });
 
   test('Init Custom Range Set and remove it again', () => {
-    const media = new Media(defaultSupportInstance);
+    const media = new MediaLegacy();
     media.initRangeSet('MyRangeSet', [200, 400], 'px', ['Small', 'Medium', 'Large']);
     expect(media.getCurrentRange('MyRangeSet', 300).name).toBe('Medium');
     media.removeRangeSet('MyRangeSet');
   });
 
   test('Init Custom Range Set and remove it again w/ matchmedialistener', () => {
-    setupMatchMedia();
-    const media = new Media({ matchmedia: true, matchmedialistener: true });
+    const media = new MediaLegacy();
     media.initRangeSet('MyRangeSet', [200, 400], 'px', ['Small', 'Medium', 'Large']);
     expect(media.getCurrentRange('MyRangeSet', 300).name).toBe('Medium');
     media.removeRangeSet('MyRangeSet');
   });
 
   test('Remove unknown rangeset should not crash', () => {
-    const media = new Media(defaultSupportInstance);
+    const media = new MediaLegacy();
     expect(() => media.removeRangeSet('MyRangeSet')).not.toThrow();
   });
 
   test("Don't remove build in rangesets", () => {
-    const media = new Media(defaultSupportInstance);
+    const media = new MediaLegacy();
     media.removeRangeSet(RANGESETS.SAP_STANDARD);
     expect(media.hasRangeSet(RANGESETS.SAP_STANDARD)).toBe(true);
   });