chore: Extracted useResolvedElement and extractSize to separate modules

Author: ZeeCoder

package.json

@@ -27,7 +27,7 @@
     "resize"
   ],
   "scripts": {
-    "build": "rollup -c && tsc && cp dist/index.d.ts polyfilled.d.ts",
+    "build": "rollup -c && tsc && rm -rf dist/utils && cp dist/index.d.ts polyfilled.d.ts",
     "watch": "KARMA_BROWSERS=Chrome run-p 'src:watch' 'karma:watch'",
     "src:watch": "rollup -c -w",
     "check:size": "size-limit",
@@ -81,6 +81,7 @@
     "@babel/preset-typescript": "^7.9.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-inject": "^4.0.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/git": "^9.0.0",

rollup.config.js

@@ -1,11 +1,15 @@
 import babel from "@rollup/plugin-babel";
 import inject from "@rollup/plugin-inject";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
 
 const getConfig = ({ polyfill = false } = {}) => {
   const config = {
     input: "src/index.ts",
     output: [],
     plugins: [
+      nodeResolve({
+        extensions: [".ts"],
+      }),
       babel({
         extensions: ["ts"],
         // Seems like there's not really a difference in case of this lib, but

src/index.ts

@@ -7,82 +7,8 @@ import {
   RefCallback,
   useCallback,
 } from "react";
-
-type SubscriberCleanup = () => void;
-type SubscriberResponse = SubscriberCleanup | void;
-
-// This of course could've been more streamlined with internal state instead of
-// refs, but then host hooks / components could not opt out of renders.
-// This could've been exported to its own module, but the current build doesn't
-// seem to work with module imports and I had no more time to spend on this...
-function useResolvedElement<T extends Element>(
-  subscriber: (element: T) => SubscriberResponse,
-  refOrElement?: T | RefObject<T> | null
-): RefCallback<T> {
-  const callbackRefElement = useRef<T | null>(null);
-  const lastReportRef = useRef<{
-    reporter: () => void;
-    element: T | null;
-  } | null>(null);
-  const cleanupRef = useRef<SubscriberResponse | null>();
-
-  // Resolving ".current" purely so that a new callSubscriber instance is created when needed.
-  const refElement =
-    refOrElement && "current" in refOrElement ? refOrElement.current : null;
-  const callSubscriber = useCallback(() => {
-    let element = null;
-    if (callbackRefElement.current) {
-      element = callbackRefElement.current;
-    } else if (refOrElement) {
-      if (refOrElement instanceof Element) {
-        element = refOrElement;
-      } else {
-        element = refOrElement.current;
-      }
-    }
-
-    if (
-      lastReportRef.current &&
-      lastReportRef.current.element === element &&
-      lastReportRef.current.reporter === callSubscriber
-    ) {
-      return;
-    }
-
-    if (cleanupRef.current) {
-      cleanupRef.current();
-      // Making sure the cleanup is not called accidentally multiple times.
-      cleanupRef.current = null;
-    }
-    lastReportRef.current = {
-      reporter: callSubscriber,
-      element,
-    };
-
-    // Only calling the subscriber, if there's an actual element to report.
-    if (element) {
-      cleanupRef.current = subscriber(element);
-    }
-  }, [refOrElement, refElement, subscriber]);
-
-  // On each render, we check whether a ref changed, or if we got a new raw
-  // element.
-  useEffect(() => {
-    // With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
-    // render accompanying that change as well.
-    // To guarantee we always have the right element, one must use the ref callback provided instead, but we support
-    // RefObjects to make the hook API more convenient in certain cases.
-    callSubscriber();
-  }, [callSubscriber]);
-
-  return useCallback<RefCallback<T>>(
-    (element) => {
-      callbackRefElement.current = element;
-      callSubscriber();
-    },
-    [callSubscriber]
-  );
-}
+import useResolvedElement from "./utils/useResolvedElement";
+import extractSize from "./utils/extractSize";
 
 type ObservedSize = {
   width: number | undefined;
@@ -108,58 +34,6 @@ declare global {
   }
 }
 
-// We're only using the first element of the size sequences, until future versions of the spec solidify on how
-// exactly it'll be used for fragments in multi-column scenarios:
-// From the spec:
-// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
-// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
-// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
-// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
-// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
-//
-// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
-// regardless of the "box" option.
-// The spec states the following on this:
-// > This does not have any impact on which box dimensions are returned to the defined callback when the event
-// > is fired, it solely defines which box the author wishes to observe layout changes on.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
-// > This section is non-normative. An author may desire to observe more than one CSS box.
-// > In this case, author will need to use multiple ResizeObservers.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
-// For this reason I decided to only return the requested size,
-// even though it seems we have access to results for all box types.
-// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
-// regardless of box option.
-const extractSize = (
-  entry: ResizeObserverEntry,
-  boxProp: "borderBoxSize" | "contentBoxSize" | "devicePixelContentBoxSize",
-  sizeType: keyof ResizeObserverSize
-): number | undefined => {
-  if (!entry[boxProp]) {
-    if (boxProp === "contentBoxSize") {
-      // The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
-      // See the 6th step in the description for the RO algorithm:
-      // https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
-      // > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
-      // In real browser implementations of course these objects differ, but the width/height values should be equivalent.
-      return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
-    }
-
-    return undefined;
-  }
-
-  // A couple bytes smaller than calling Array.isArray() and just as effective here.
-  return entry[boxProp][0]
-    ? entry[boxProp][0][sizeType]
-    : // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
-      // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
-      // @ts-ignore
-      entry[boxProp][sizeType];
-};
-
 type RoundingFunction = (n: number) => number;
 
 function useResizeObserver<T extends Element>(

src/utils/extractSize.ts

@@ -0,0 +1,51 @@
+// We're only using the first element of the size sequences, until future versions of the spec solidify on how
+// exactly it'll be used for fragments in multi-column scenarios:
+// From the spec:
+// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
+// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
+// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
+// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
+// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
+//
+// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
+// regardless of the "box" option.
+// The spec states the following on this:
+// > This does not have any impact on which box dimensions are returned to the defined callback when the event
+// > is fired, it solely defines which box the author wishes to observe layout changes on.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
+// > This section is non-normative. An author may desire to observe more than one CSS box.
+// > In this case, author will need to use multiple ResizeObservers.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
+// For this reason I decided to only return the requested size,
+// even though it seems we have access to results for all box types.
+// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
+// regardless of box option.
+export default function extractSize(
+  entry: ResizeObserverEntry,
+  boxProp: "borderBoxSize" | "contentBoxSize" | "devicePixelContentBoxSize",
+  sizeType: keyof ResizeObserverSize
+): number | undefined {
+  if (!entry[boxProp]) {
+    if (boxProp === "contentBoxSize") {
+      // The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
+      // See the 6th step in the description for the RO algorithm:
+      // https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
+      // > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
+      // In real browser implementations of course these objects differ, but the width/height values should be equivalent.
+      return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
+    }
+
+    return undefined;
+  }
+
+  // A couple bytes smaller than calling Array.isArray() and just as effective here.
+  return entry[boxProp][0]
+    ? entry[boxProp][0][sizeType]
+    : // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
+      // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
+      // @ts-ignore
+      entry[boxProp][sizeType];
+}

src/utils/useResolvedElement.ts

@@ -0,0 +1,77 @@
+// This of course could've been more streamlined with internal state instead of
+// refs, but then host hooks / components could not opt out of renders.
+// This could've been exported to its own module, but the current build doesn't
+// seem to work with module imports and I had no more time to spend on this...
+import { RefCallback, RefObject, useCallback, useEffect, useRef } from "react";
+
+type SubscriberCleanup = () => void;
+type SubscriberResponse = SubscriberCleanup | void;
+
+export default function useResolvedElement<T extends Element>(
+  subscriber: (element: T) => SubscriberResponse,
+  refOrElement?: T | RefObject<T> | null
+): RefCallback<T> {
+  const callbackRefElement = useRef<T | null>(null);
+  const lastReportRef = useRef<{
+    reporter: () => void;
+    element: T | null;
+  } | null>(null);
+  const cleanupRef = useRef<SubscriberResponse | null>();
+
+  // Resolving ".current" purely so that a new callSubscriber instance is created when needed.
+  const refElement =
+    refOrElement && "current" in refOrElement ? refOrElement.current : null;
+  const callSubscriber = useCallback(() => {
+    let element = null;
+    if (callbackRefElement.current) {
+      element = callbackRefElement.current;
+    } else if (refOrElement) {
+      if (refOrElement instanceof Element) {
+        element = refOrElement;
+      } else {
+        element = refOrElement.current;
+      }
+    }
+
+    if (
+      lastReportRef.current &&
+      lastReportRef.current.element === element &&
+      lastReportRef.current.reporter === callSubscriber
+    ) {
+      return;
+    }
+
+    if (cleanupRef.current) {
+      cleanupRef.current();
+      // Making sure the cleanup is not called accidentally multiple times.
+      cleanupRef.current = null;
+    }
+    lastReportRef.current = {
+      reporter: callSubscriber,
+      element,
+    };
+
+    // Only calling the subscriber, if there's an actual element to report.
+    if (element) {
+      cleanupRef.current = subscriber(element);
+    }
+  }, [refOrElement, refElement, subscriber]);
+
+  // On each render, we check whether a ref changed, or if we got a new raw
+  // element.
+  useEffect(() => {
+    // With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
+    // render accompanying that change as well.
+    // To guarantee we always have the right element, one must use the ref callback provided instead, but we support
+    // RefObjects to make the hook API more convenient in certain cases.
+    callSubscriber();
+  }, [callSubscriber]);
+
+  return useCallback<RefCallback<T>>(
+    (element) => {
+      callbackRefElement.current = element;
+      callSubscriber();
+    },
+    [callSubscriber]
+  );
+}

tsconfig.json

@@ -7,7 +7,8 @@
     "esModuleInterop": true,
     "outDir": "dist",
     "declaration": true,
-    "emitDeclarationOnly": true
+    "emitDeclarationOnly": true,
+    "noImplicitAny": true
   },
   "include": ["src"]
 }