Merge pull request #34 from trurl-master/refactor-matchMedia

Refactor match media

Author: trurl-master

example/App.tsx

@@ -7,6 +7,7 @@ import GlobalObserver from './intersection-observer/global-observer/GlobalObserv
 import MeasureParent from './resize-observer/measure-parent/MeasureParent';
 import PrintMySize from './resize-observer/print-my-size/PrintMySize';
 import CustomUseMedia from './viewport/custom-use-media/CustomUseMedia';
+import DeprecatedCustomUseMedia from './viewport/deprecated-use-media/DeprecatedUseMedia';
 
 export default function App() {
   return (
@@ -16,6 +17,10 @@ export default function App() {
         <Switch>
           <Route path="/intersection-observer" component={GlobalObserver} />
           <Route path="/viewport" component={CustomUseMedia} />
+          <Route
+            path="/viewport-deprecated"
+            component={DeprecatedCustomUseMedia}
+          />
           <Route path="/resize-observer/do-i-fit" component={MeasureParent} />
           <Route
             path="/resize-observer/print-my-size"

example/Nav.tsx

@@ -21,9 +21,12 @@ const Nav = (): React.ReactElement => (
           Resize Observer: print my size
         </Link>
       </li>
-      <li>
+      <li style={{ marginRight: '2em' }}>
         <Link to="/viewport">Viewport</Link>
       </li>
+      <li>
+        <Link to="/viewport-deprecated">Viewport (old)</Link>
+      </li>
     </ul>
   </nav>
 );

example/viewport/custom-use-media/CustomUseMedia.tsx

@@ -2,14 +2,27 @@ import * as React from 'react';
 
 import useMedia from './useMedia';
 
-const CustomUseMedia = () => {
-  const isDesktop = useMedia('(min-width: 640px)');
+const CustomUseMedia = ({
+  query = '(min-width: 640px)',
+  callback,
+  asObject = false,
+  messages: { ok = 'desktop', ko = 'not desktop' } = {
+    ok: 'desktop',
+    ko: 'not desktop',
+  },
+}: {
+  query?: string;
+  callback?: () => void;
+  asObject?: boolean;
+  messages?: { ok: string; ko: string };
+}) => {
+  const doesMatch = useMedia(query, null, { callback, asObject });
 
-  if (isDesktop === null) {
+  if (doesMatch === null) {
     return <div>server</div>;
   }
 
-  return <div>{isDesktop ? 'desktop' : 'not desktop'}</div>;
+  return <div>{doesMatch ? ok : ko}</div>;
 };
 
 export default CustomUseMedia;

example/viewport/custom-use-media/useMedia.ts

@@ -1,6 +1,18 @@
 import { useState, useEffect } from 'react';
 
-function useMedia(query: string, defaultValue: any | null = null) {
+function useMedia(
+  query: string,
+  defaultValue: any | null = null,
+  options?:
+    | {
+        callback?: (this: MediaQueryList, ev: MediaQueryListEvent) => any;
+        asObject: false;
+      }
+    | {
+        callback?: (ev: MediaQueryListEvent) => any;
+        asObject: true;
+      }
+) {
   const isInBrowser = typeof window !== 'undefined' && window.matchMedia;
 
   const mq = isInBrowser ? window.matchMedia(query) : null;
@@ -14,7 +26,25 @@ function useMedia(query: string, defaultValue: any | null = null) {
       return;
     }
 
-    const handler = () => setValue(getValue);
+    if (options?.asObject) {
+      const handler = {
+        handleEvent: (ev: MediaQueryListEvent) => {
+          setValue(getValue);
+
+          options?.callback?.(ev);
+        },
+      };
+
+      mq.addEventListener('change', handler);
+
+      return () => mq.removeEventListener('change', handler);
+    }
+
+    function handler(this: MediaQueryList, ev: MediaQueryListEvent) {
+      setValue(getValue);
+
+      options?.callback?.call(this, ev);
+    }
 
     mq.addEventListener('change', handler);
 

example/viewport/deprecated-use-media/DeprecatedUseMedia.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+
+function useMedia(
+  query: string,
+  defaultValue: any | null = null,
+  callback?: (this: MediaQueryList, ev: MediaQueryListEvent) => any
+) {
+  const isInBrowser = typeof window !== 'undefined' && window.matchMedia;
+
+  const mq = isInBrowser ? window.matchMedia(query) : null;
+
+  const getValue = () => mq?.matches;
+
+  const [value, setValue] = useState(isInBrowser ? getValue : defaultValue);
+
+  useEffect(() => {
+    if (mq === null) {
+      return;
+    }
+
+    function handler(this: MediaQueryList, ev: MediaQueryListEvent) {
+      setValue(getValue);
+
+      callback?.call(this, ev);
+    }
+
+    mq.addListener(handler);
+
+    return () => mq.removeListener(handler);
+  }, []);
+
+  return value;
+}
+
+const DeprecatedCustomUseMedia = ({
+  query = '(min-width: 640px)',
+  callback,
+  messages: { ok = 'desktop', ko = 'not desktop' } = {
+    ok: 'desktop',
+    ko: 'not desktop',
+  },
+}: {
+  query?: string;
+  callback?: () => void;
+  messages?: { ok: string; ko: string };
+}) => {
+  const doesMatch = useMedia(query, null, callback);
+
+  if (doesMatch === null) {
+    return <div>server</div>;
+  }
+
+  return <div>{doesMatch ? ok : ko}</div>;
+};
+
+export default DeprecatedCustomUseMedia;

package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
+    "test": "tsdx test",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",

src/mocks/MediaQueryListEvent.ts

@@ -0,0 +1,19 @@
+export class MockedMediaQueryListEvent extends Event {
+  readonly matches: boolean;
+  readonly media: string;
+
+  constructor(type: 'change', eventInitDict: MediaQueryListEventInit = {}) {
+    super(type);
+
+    this.media = eventInitDict.media ?? '';
+    this.matches = eventInitDict.matches ?? false;
+  }
+}
+
+if (typeof MediaQueryListEvent === 'undefined') {
+  Object.defineProperty(window, 'MediaQueryListEvent', {
+    writable: true,
+    configurable: true,
+    value: MockedMediaQueryListEvent,
+  });
+}

src/mocks/resize-observer.ts

@@ -8,7 +8,7 @@ const state: State = {
   nodeObservers: new Map(),
 };
 
-class MockedResizeObserver {
+class MockedResizeObserver implements ResizeObserver {
   nodes: HTMLElement[] = [];
   callback: ResizeObserverCallback;
 
@@ -64,9 +64,12 @@ class MockedResizeObserver {
   };
 }
 
-function elementToEntry(element: HTMLElement) {
+function elementToEntry(element: HTMLElement): ResizeObserverEntry {
   const boundingClientRect = element.getBoundingClientRect();
 
+  // @ts-ignore
+  // for some reason, the typescript type definition for ResizeObserverEntry
+  // is mismatched between tsdx typecheck and vscode typecheck
   return {
     borderBoxSize: [
       {
@@ -81,14 +84,25 @@ function elementToEntry(element: HTMLElement) {
       },
     ],
     contentRect: boundingClientRect,
+    // devicePixelContentBoxSize: [
+    //   // assume device pixel ratio of 1
+    //   {
+    //     blockSize: boundingClientRect.width,
+    //     inlineSize: boundingClientRect.height,
+    //   },
+    // ],
     target: element,
   };
 }
 
 function mockResizeObserver() {
   const savedImplementation = window.ResizeObserver;
 
-  window.ResizeObserver = MockedResizeObserver;
+  Object.defineProperty(window, 'ResizeObserver', {
+    writable: true,
+    configurable: true,
+    value: MockedResizeObserver,
+  });
 
   afterAll(() => {
     window.ResizeObserver = savedImplementation;