@sohanemon/utils 5.2.0 → 5.2.1

package/dist/context/scrollable-marker.d.ts

@@ -0,0 +1 @@
+export declare function ScrollableMarker(): any;

package/dist/context/scrollable-marker.js

@@ -0,0 +1,56 @@
+'use client';
+import { useScheduledEffect } from '../hooks/schedule';
+export function ScrollableMarker() {
+    useScheduledEffect(() => {
+        const root = document.body;
+        if (!root)
+            return;
+        const isScrollable = (el) => {
+            const style = getComputedStyle(el);
+            if (style.overflow === 'hidden' &&
+                style.overflowY === 'hidden' &&
+                style.overflowX === 'hidden')
+                return false;
+            const canScrollY = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
+                el.scrollHeight > el.clientHeight;
+            const canScrollX = (style.overflowX === 'auto' || style.overflowX === 'scroll') &&
+                el.scrollWidth > el.clientWidth;
+            return canScrollY || canScrollX;
+        };
+        const markScrollable = (el) => {
+            if (isScrollable(el))
+                el.dataset.scrollable = 'true';
+            else
+                delete el.dataset.scrollable;
+        };
+        const scanTree = (node) => {
+            markScrollable(node);
+            for (let i = 0; i < node.children.length; i++) {
+                const child = node.children[i];
+                scanTree(child);
+            }
+        };
+        requestIdleCallback(() => scanTree(root));
+        const observer = new MutationObserver((mutations) => {
+            for (const m of mutations) {
+                if (m.type === 'childList') {
+                    m.addedNodes.forEach((n) => {
+                        if (n instanceof HTMLElement)
+                            scanTree(n);
+                    });
+                }
+                else if (m.type === 'attributes' && m.target instanceof HTMLElement) {
+                    markScrollable(m.target);
+                }
+            }
+        });
+        observer.observe(root, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return null;
+}

package/dist/hooks/schedule.d.ts

@@ -13,7 +13,7 @@ export declare function useSchedule(options?: ScheduleOpts): (task: Task) => voi
  * or a fallback scheduler. Useful for heavy computations, logging,
  * analytics, or background work that doesn't need to block render.
  *
- * @param {Task} task - The function to run later. Can be synchronous or return a Promise.
+ * @param {Function} effect - The function to run later. Can be synchronous or return a Promise.
  * @param {React.DependencyList[]} deps - Dependency array; task will re-run whenever these change.
  * @param {ScheduleOpts} [options] - Optional scheduling options.
  * @param {number} [options.timeout] - Max time (ms) to wait before executing the task. Defaults to 10000.
@@ -33,4 +33,4 @@ export declare function useSchedule(options?: ScheduleOpts): (task: Task) => voi
  * }
  * ```
  */
-export declare function useScheduledEffect(task: Task, deps?: React.DependencyList, options?: ScheduleOpts): void;
+export declare function useScheduledEffect(effect: () => void | (() => void), deps?: React.DependencyList, options?: ScheduleOpts): void;

package/dist/hooks/schedule.js

@@ -33,7 +33,7 @@ export function useSchedule(options = {}) {
  * or a fallback scheduler. Useful for heavy computations, logging,
  * analytics, or background work that doesn't need to block render.
  *
- * @param {Task} task - The function to run later. Can be synchronous or return a Promise.
+ * @param {Function} effect - The function to run later. Can be synchronous or return a Promise.
  * @param {React.DependencyList[]} deps - Dependency array; task will re-run whenever these change.
  * @param {ScheduleOpts} [options] - Optional scheduling options.
  * @param {number} [options.timeout] - Max time (ms) to wait before executing the task. Defaults to 10000.
@@ -53,9 +53,16 @@ export function useSchedule(options = {}) {
  * }
  * ```
  */
-export function useScheduledEffect(task, deps = [], options = {}) {
+export function useScheduledEffect(effect, deps = [], options = {}) {
     const schedule = useSchedule(options);
     React.useEffect(() => {
-        schedule(task);
+        let cleanup;
+        schedule(() => {
+            cleanup = effect();
+        });
+        return () => {
+            if (typeof cleanup === 'function')
+                cleanup?.();
+        };
     }, [schedule, ...deps]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",