@granite-js/react-native 1.0.29 → 1.0.31

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @granite-js/react-native
 
+## 1.0.31
+
+### Patch Changes
+
+- f8aee14: fix: impression area debounced handlers
+  - @granite-js/blur-view@1.0.31
+  - @granite-js/brownfield-module@1.0.31
+  - @granite-js/cli@1.0.31
+  - @granite-js/jest@1.0.31
+  - @granite-js/mpack@1.0.31
+  - @granite-js/native@1.0.31
+  - @granite-js/plugin-core@1.0.31
+  - @granite-js/style-utils@1.0.31
+  - @granite-js/video@1.0.31
+
+## 1.0.30
+
+### Patch Changes
+
+- Updated dependencies [4b2e737]
+  - @granite-js/video@1.0.30
+  - @granite-js/native@1.0.30
+  - @granite-js/blur-view@1.0.30
+  - @granite-js/jest@1.0.30
+  - @granite-js/style-utils@1.0.30
+  - @granite-js/brownfield-module@1.0.30
+  - @granite-js/cli@1.0.30
+  - @granite-js/mpack@1.0.30
+  - @granite-js/plugin-core@1.0.30
+
 ## 1.0.29
 
 ### Patch Changes

package/dist/intersection-observer/IntersectionObserver.d.ts

@@ -39,11 +39,13 @@ export interface IntersectionObserverOptions {
      */
     root: Root;
     rootMargin?: RootMargin;
-    threshold?: number | number[];
+    onLayoutThreshold?: number;
+    onScrollThreshold?: number;
 }
 export type IntersectionObserverCallback = (entries: IntersectionObserverEntry[]) => void;
 export declare const defaultRootMargin: RootMargin;
-export declare const defaultThreshold = 0;
+export declare const defaultOnLayoutThreshold = 300;
+export declare const defaultOnScrollThreshold = 100;
 /**
  * @kind class
  * @name IntersectionObserver
@@ -57,10 +59,12 @@ declare class IntersectionObserver {
     protected callback: IntersectionObserverCallback;
     protected options: IntersectionObserverOptions;
     protected targets: Element[];
+    protected onLayoutHandler: () => void;
+    protected onScrollHandler: () => void;
     constructor(callback: IntersectionObserverCallback, options: IntersectionObserverOptions);
     protected measureTarget: (target: Element) => void;
-    protected handleLayout: () => void;
-    protected handleScroll: () => void;
+    protected createOnLayoutHandler(): () => void;
+    protected createOnScrollHandler(): import("es-toolkit").ThrottledFunction<() => void>;
     observe(target: Element): void;
     unobserve(target: Element): void;
 }

package/dist/intersection-observer/withIO.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from 'react';
 import { ScrollView } from 'react-native';
-import { RootMargin } from './IntersectionObserver';
+import type { IntersectionObserverOptions, RootMargin } from './IntersectionObserver';
 export interface IOComponentProps {
     rootMargin?: RootMargin;
 }
@@ -16,5 +16,5 @@ export interface IOComponentProps {
  * @param {string[]} [methods] - List of event handler names from BaseComponent to be bound.
  * @returns {React.ComponentType} - Returns a wrapped component that can use Intersection Observer functionality.
  */
-declare function withIO<CompProps extends Pick<ComponentProps<typeof ScrollView>, 'horizontal' | 'scrollEventThrottle' | 'onContentSizeChange' | 'onLayout' | 'onScroll'>>(BaseComponent: React.ComponentType<CompProps>, methods: string[]): typeof BaseComponent;
+declare function withIO<CompProps extends Pick<ComponentProps<typeof ScrollView>, 'horizontal' | 'scrollEventThrottle' | 'onContentSizeChange' | 'onLayout' | 'onScroll'>>(BaseComponent: React.ComponentType<CompProps>, methods: string[], options?: Omit<IntersectionObserverOptions, 'root' | 'rootMargin'>): typeof BaseComponent;
 export default withIO;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -91,7 +91,7 @@
     "@babel/core": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@granite-js/native": "1.0.29",
+    "@granite-js/native": "1.0.31",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -113,21 +113,21 @@
     "zod": "^4.1.12"
   },
   "peerDependencies": {
-    "@granite-js/native": "1.0.29",
+    "@granite-js/native": "1.0.31",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/blur-view": "1.0.29",
-    "@granite-js/brownfield-module": "1.0.29",
-    "@granite-js/cli": "1.0.29",
-    "@granite-js/jest": "1.0.29",
-    "@granite-js/mpack": "1.0.29",
-    "@granite-js/plugin-core": "1.0.29",
-    "@granite-js/style-utils": "1.0.29",
-    "@granite-js/video": "1.0.29",
+    "@granite-js/blur-view": "1.0.31",
+    "@granite-js/brownfield-module": "1.0.31",
+    "@granite-js/cli": "1.0.31",
+    "@granite-js/jest": "1.0.31",
+    "@granite-js/mpack": "1.0.31",
+    "@granite-js/plugin-core": "1.0.31",
+    "@granite-js/style-utils": "1.0.31",
+    "@granite-js/video": "1.0.31",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/src/intersection-observer/IntersectionObserver.ts

@@ -45,7 +45,8 @@ export interface IntersectionObserverOptions {
    */
   root: Root;
   rootMargin?: RootMargin;
-  threshold?: number | number[];
+  onLayoutThreshold?: number;
+  onScrollThreshold?: number;
 }
 
 export type IntersectionObserverCallback = (entries: IntersectionObserverEntry[]) => void;
@@ -57,7 +58,8 @@ export const defaultRootMargin: RootMargin = {
   bottom: 0,
 };
 
-export const defaultThreshold = 0;
+export const defaultOnLayoutThreshold = 300;
+export const defaultOnScrollThreshold = 100;
 
 /**
  * @kind class
@@ -72,13 +74,15 @@ class IntersectionObserver {
   protected callback: IntersectionObserverCallback;
   protected options: IntersectionObserverOptions;
   protected targets: Element[];
+  protected onLayoutHandler: () => void;
+  protected onScrollHandler: () => void;
 
   constructor(callback: IntersectionObserverCallback, options: IntersectionObserverOptions) {
     this.callback = callback;
     this.options = options;
     this.targets = [];
-    this.options.root.onLayout = this.handleLayout;
-    this.options.root.onScroll = this.handleScroll;
+    this.onLayoutHandler = this.options.root.onLayout = this.createOnLayoutHandler();
+    this.onScrollHandler = this.options.root.onScroll = this.createOnScrollHandler();
   }
 
   protected measureTarget = (target: Element) => {
@@ -91,111 +95,117 @@ class IntersectionObserver {
           width,
           height,
         };
-        this.handleScroll();
+        this.onScrollHandler();
       });
     }
   };
 
-  protected handleLayout = throttle(
-    () => {
-      for (let index = 0; index < this.targets.length; index += 1) {
-        const target = this.targets[index];
+  protected createOnLayoutHandler(): () => void {
+    const onLayoutThreshold = this.options?.onLayoutThreshold || defaultOnLayoutThreshold;
+    return throttle(
+      () => {
+        for (let index = 0; index < this.targets.length; index += 1) {
+          const target = this.targets[index];
 
-        if (target != null) {
-          this.measureTarget(target);
-        }
-      }
-    },
-    300,
-    { edges: ['trailing'] }
-  ) as () => void;
-
-  protected handleScroll = throttle(
-    () => {
-      const rootMargin = this.options?.rootMargin || defaultRootMargin;
-
-      const {
-        horizontal,
-        current: { contentOffset, contentSize, layoutMeasurement },
-      } = this.options.root;
-      if (
-        contentSize.width <= 0 ||
-        contentSize.height <= 0 ||
-        layoutMeasurement.width <= 0 ||
-        layoutMeasurement.height <= 0
-      ) {
-        return;
-      }
-      const contentOffsetWithLayout = horizontal
-        ? contentOffset.x + layoutMeasurement.width
-        : contentOffset.y + layoutMeasurement.height;
-      const changedTargets: IntersectionObserverEntry[] = [];
-      for (let index = 0; index < this.targets.length; index += 1) {
-        const target = this.targets[index];
-
-        if (target == null) {
-          continue;
-        }
-
-        const targetLayout = target.layout;
-        if (!targetLayout || targetLayout.width === 0 || targetLayout.height === 0) {
-          continue;
+          if (target != null) {
+            this.measureTarget(target);
+          }
         }
+      },
+      onLayoutThreshold,
+      { edges: ['leading', 'trailing'] }
+    );
+  }
 
-        const previousIntersectionRatio = target.intersectionRatio;
-
-        let isIntersecting = false;
-        let intersectionRatio = previousIntersectionRatio;
-
-        if (horizontal) {
-          const visibleTargetMinX = Math.max(contentOffset.x - (rootMargin.left || 0), targetLayout.x);
-          const visibleTargetMaxX = Math.min(
-            contentOffsetWithLayout + (rootMargin.left || 0),
-            targetLayout.x + targetLayout.width
-          );
-          const visibleHeight = Math.max(visibleTargetMaxX - visibleTargetMinX, 0);
-
-          intersectionRatio = visibleHeight / targetLayout.height;
-          isIntersecting =
-            contentOffsetWithLayout + (rootMargin.right || 0) >= targetLayout.x &&
-            contentOffset.x - (rootMargin.left || 0) <= targetLayout.x + targetLayout.width;
-        } else {
-          const visibleTargetMinY = Math.max(contentOffset.y - (rootMargin.top || 0), targetLayout.y);
-          const visibleTargetMaxY = Math.min(
-            contentOffsetWithLayout + (rootMargin.bottom || 0),
-            targetLayout.y + targetLayout.height
-          );
-          const visibleHeight = Math.max(visibleTargetMaxY - visibleTargetMinY, 0);
-
-          intersectionRatio = visibleHeight / targetLayout.height;
-          isIntersecting =
-            contentOffsetWithLayout + (rootMargin.bottom || 0) >= targetLayout.y &&
-            contentOffset.y - (rootMargin.top || 0) <= targetLayout.y + targetLayout.height;
+  protected createOnScrollHandler() {
+    const onScrollThreshold = this.options?.onScrollThreshold || defaultOnScrollThreshold;
+    return throttle(
+      () => {
+        const rootMargin = this.options?.rootMargin || defaultRootMargin;
+
+        const {
+          horizontal,
+          current: { contentOffset, contentSize, layoutMeasurement },
+        } = this.options.root;
+        if (
+          contentSize.width <= 0 ||
+          contentSize.height <= 0 ||
+          layoutMeasurement.width <= 0 ||
+          layoutMeasurement.height <= 0
+        ) {
+          return;
         }
-
-        intersectionRatio = Math.floor(intersectionRatio * 100) / 100;
-
-        if (target.inView !== isIntersecting || target.intersectionRatio !== intersectionRatio) {
-          target.inView = isIntersecting;
-          target.intersectionRatio = intersectionRatio;
-
-          changedTargets.push({
-            target,
-            isIntersecting,
-            intersectionRatio,
-          });
+        const contentOffsetWithLayout = horizontal
+          ? contentOffset.x + layoutMeasurement.width
+          : contentOffset.y + layoutMeasurement.height;
+        const changedTargets: IntersectionObserverEntry[] = [];
+        for (let index = 0; index < this.targets.length; index += 1) {
+          const target = this.targets[index];
+
+          if (target == null) {
+            continue;
+          }
+
+          const targetLayout = target.layout;
+          if (!targetLayout || targetLayout.width === 0 || targetLayout.height === 0) {
+            continue;
+          }
+
+          const previousIntersectionRatio = target.intersectionRatio;
+
+          let isIntersecting = false;
+          let intersectionRatio = previousIntersectionRatio;
+
+          if (horizontal) {
+            const visibleTargetMinX = Math.max(contentOffset.x - (rootMargin.left || 0), targetLayout.x);
+            const visibleTargetMaxX = Math.min(
+              contentOffsetWithLayout + (rootMargin.left || 0),
+              targetLayout.x + targetLayout.width
+            );
+            const visibleHeight = Math.max(visibleTargetMaxX - visibleTargetMinX, 0);
+
+            intersectionRatio = visibleHeight / targetLayout.height;
+            isIntersecting =
+              contentOffsetWithLayout + (rootMargin.right || 0) >= targetLayout.x &&
+              contentOffset.x - (rootMargin.left || 0) <= targetLayout.x + targetLayout.width;
+          } else {
+            const visibleTargetMinY = Math.max(contentOffset.y - (rootMargin.top || 0), targetLayout.y);
+            const visibleTargetMaxY = Math.min(
+              contentOffsetWithLayout + (rootMargin.bottom || 0),
+              targetLayout.y + targetLayout.height
+            );
+            const visibleHeight = Math.max(visibleTargetMaxY - visibleTargetMinY, 0);
+
+            intersectionRatio = visibleHeight / targetLayout.height;
+            isIntersecting =
+              contentOffsetWithLayout + (rootMargin.bottom || 0) >= targetLayout.y &&
+              contentOffset.y - (rootMargin.top || 0) <= targetLayout.y + targetLayout.height;
+          }
+
+          intersectionRatio = Math.floor(intersectionRatio * 100) / 100;
+
+          if (target.inView !== isIntersecting || target.intersectionRatio !== intersectionRatio) {
+            target.inView = isIntersecting;
+            target.intersectionRatio = intersectionRatio;
+
+            changedTargets.push({
+              target,
+              isIntersecting,
+              intersectionRatio,
+            });
+          }
         }
-      }
-      this.callback(changedTargets);
-    },
-    100,
-    { edges: ['trailing'] }
-  ) as () => void;
+        this.callback(changedTargets);
+      },
+      onScrollThreshold,
+      { edges: ['leading', 'trailing'] }
+    );
+  }
 
   public observe(target: Element) {
     const index = this.targets.indexOf(target);
     if (index < 0) {
-      target.onLayout = this.handleLayout;
+      target.onLayout = this.onLayoutHandler;
       this.targets.push(target);
     }
   }

package/src/intersection-observer/withIO.tsx

@@ -2,7 +2,7 @@ import { type ComponentProps, PureComponent, RefObject, createRef } from 'react'
 import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, View } from 'react-native';
 import IOContext, { IOContextValue } from './IOContext';
 import IOManager from './IOManager';
-import { Root, RootMargin } from './IntersectionObserver';
+import type { IntersectionObserverOptions, Root, RootMargin } from './IntersectionObserver';
 
 export interface IOComponentProps {
   rootMargin?: RootMargin;
@@ -25,7 +25,11 @@ function withIO<
     ComponentProps<typeof ScrollView>,
     'horizontal' | 'scrollEventThrottle' | 'onContentSizeChange' | 'onLayout' | 'onScroll'
   >,
->(BaseComponent: React.ComponentType<CompProps>, methods: string[]) {
+>(
+  BaseComponent: React.ComponentType<CompProps>,
+  methods: string[],
+  options?: Omit<IntersectionObserverOptions, 'root' | 'rootMargin'>
+) {
   type ScrollableComponentProps = CompProps & IOComponentProps;
   const IOScrollableComponent = class extends PureComponent<ScrollableComponentProps> {
     protected node: any;
@@ -75,6 +79,7 @@ function withIO<
         get rootMargin() {
           return self.props.rootMargin;
         },
+        ...options,
       });
       this.manager = manager;
       this.contextValue = {