@laser-ui/hooks 1.6.1 → 2.0.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.1](https://github.com/laser-ui/laser-ui/compare/v2.0.0...v2.0.1) (2024-12-17)
+
+### Bug Fixes
+
+- **hooks:** fix cant get ref after render by `useRefExtra` ([18c6aaf](https://github.com/laser-ui/laser-ui/commit/18c6aaffadf1f1e06dbb5c0a0a8642a7df8c2ed2))
+
+# [2.0.0](https://github.com/laser-ui/laser-ui/compare/v1.6.1...v2.0.0) (2024-12-17)
+
+### Features
+
+- **hooks:** add `setAfterPainted` method to `useAsync` ([5b53b6a](https://github.com/laser-ui/laser-ui/commit/5b53b6a4d5fd75b01105debadc32f87860854f59))
+- **hooks:** support callback after painted ([ed54a01](https://github.com/laser-ui/laser-ui/commit/ed54a01d8b099f2206ad2f64483a60af2df6a456))
+
 ## [1.6.1](https://github.com/laser-ui/laser-ui/compare/v1.6.0...v1.6.1) (2024-11-17)
 
 **Note:** Version bump only for package @laser-ui/hooks

package/index.d.ts

@@ -2,7 +2,6 @@ export { useAsync } from './useAsync';
 export { useEvent } from './useEvent';
 export { useEventCallback } from './useEventCallback';
 export { useForceUpdate } from './useForceUpdate';
-export { useForkRef } from './useForkRef';
 export { useImmer } from './useImmer';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 export { useMount } from './useMount';

package/index.js

@@ -2,7 +2,6 @@ export { useAsync } from './useAsync';
 export { useEvent } from './useEvent';
 export { useEventCallback } from './useEventCallback';
 export { useForceUpdate } from './useForceUpdate';
-export { useForkRef } from './useForkRef';
 export { useImmer } from './useImmer';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 export { useMount } from './useMount';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/hooks",
-  "version": "1.6.1",
+  "version": "2.0.1",
   "description": "Shared hooks used by Laser UI packages.",
   "keywords": [
     "ui",
@@ -35,5 +35,5 @@
     "access": "public",
     "directory": "../../dist/libs/hooks"
   },
-  "gitHead": "13762dbb3769a6f76ec1ef71272fd1c97a3b8b75"
+  "gitHead": "5198c1835aa2a718c200cf61181fb372e3f54ed1"
 }

package/useAsync.d.ts

@@ -3,6 +3,7 @@ declare class AsyncInstance {
     clearAll(): void;
     setTimeout(handler: TimerHandler, timeout?: number, clearFn?: () => void): () => void;
     requestAnimationFrame(cb: FrameRequestCallback, clearFn?: () => void): () => void;
+    setAfterPainted(cb: () => void, clearFn?: () => void): () => void;
 }
 export declare class Async extends AsyncInstance {
     private instances;

package/useAsync.js

@@ -32,6 +32,29 @@ class AsyncInstance {
         this.clearFns.add(clear);
         return clear;
     }
+    setAfterPainted(cb, clearFn) {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        let close = () => { };
+        const tid = requestAnimationFrame(() => {
+            const messageChannel = new MessageChannel();
+            close = () => {
+                messageChannel.port1.close();
+                messageChannel.port2.close();
+            };
+            messageChannel.port1.onmessage = () => {
+                close();
+                cb();
+            };
+            messageChannel.port2.postMessage(undefined);
+        });
+        const clear = () => {
+            clearFn === null || clearFn === void 0 ? void 0 : clearFn();
+            cancelAnimationFrame(tid);
+            close();
+        };
+        this.clearFns.add(clear);
+        return clear;
+    }
 }
 export class Async extends AsyncInstance {
     constructor() {

package/useForceUpdate.d.ts

@@ -1 +1 @@
-export declare function useForceUpdate(): import("react").DispatchWithoutAction;
+export declare function useForceUpdate(): import("react").ActionDispatch<[]>;

package/useRefExtra.d.ts

@@ -1,4 +1,4 @@
 export type RefExtra<T = HTMLElement> = (() => T | null) | string;
-export declare function useRefExtra(refExtra?: string): React.RefObject<HTMLElement>;
-export declare function useRefExtra<T = HTMLElement>(refExtra?: () => T | null): React.RefObject<T>;
-export declare function useRefExtra<T = HTMLElement>(refExtra?: RefExtra<T>): React.RefObject<T | HTMLElement>;
+export declare function useRefExtra(refExtra?: string): React.RefObject<HTMLElement | null>;
+export declare function useRefExtra<T = HTMLElement>(refExtra?: () => T | null): React.RefObject<T | null>;
+export declare function useRefExtra<T = HTMLElement>(refExtra?: RefExtra<T>): React.RefObject<T | null>;

package/useRefExtra.js

@@ -1,13 +1,42 @@
-import { isString, isUndefined } from 'lodash';
-import { useRef } from 'react';
+import { isNull, isString, isUndefined } from 'lodash';
+import { useMemo } from 'react';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+class Ref {
+    constructor() {
+        Object.defineProperty(this, "_current", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "refExtra", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    get current() {
+        if (isNull(this._current)) {
+            this.getCurrent();
+        }
+        return this._current;
+    }
+    getCurrent() {
+        if (!isUndefined(this.refExtra)) {
+            this._current = isString(this.refExtra) ? document.querySelector(this.refExtra) : this.refExtra();
+        }
+        else {
+            this._current = null;
+        }
+    }
+}
 export function useRefExtra(refExtra) {
-    const ref = useRef(null);
+    const ref = useMemo(() => new Ref(), []);
+    ref.refExtra = refExtra;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useIsomorphicLayoutEffect(() => {
-        if (!isUndefined(refExtra)) {
-            ref.current = isString(refExtra) ? document.querySelector(refExtra) : refExtra();
-        }
+        ref.getCurrent();
     });
     return ref;
 }

package/useResize.js

@@ -1,6 +1,5 @@
 import { isUndefined } from 'lodash';
 import { useEffect, useRef } from 'react';
-import { flushSync } from 'react-dom';
 let checkResize = (cb1, cb2, entry) => {
     if ('borderBoxSize' in entry) {
         checkResize = (cb1) => {
@@ -15,30 +14,29 @@ let checkResize = (cb1, cb2, entry) => {
 };
 export function useResize(target, cb, options, disabled = false) {
     const { skipEmpty = true } = options !== null && options !== void 0 ? options : {};
-    const dataRef = useRef({});
+    const prevContentRect = useRef(undefined);
     if (disabled) {
-        dataRef.current.prevContentRect = undefined;
+        prevContentRect.current = undefined;
     }
     useEffect(() => {
         if (target.current && !disabled) {
             const observer = new ResizeObserver((entries, observer) => {
                 const entry = entries[0];
                 checkResize(() => {
-                    if (!isUndefined(dataRef.current.prevContentRect) &&
+                    if (!isUndefined(prevContentRect.current) &&
                         !(skipEmpty && entry.borderBoxSize[0].blockSize === 0 && entry.borderBoxSize[0].inlineSize === 0) &&
-                        (dataRef.current.prevContentRect.width !== entry.borderBoxSize[0].inlineSize ||
-                            dataRef.current.prevContentRect.height !== entry.borderBoxSize[0].blockSize)) {
-                        flushSync(() => cb === null || cb === void 0 ? void 0 : cb(entries, observer));
+                        (prevContentRect.current.width !== entry.borderBoxSize[0].inlineSize ||
+                            prevContentRect.current.height !== entry.borderBoxSize[0].blockSize)) {
+                        cb === null || cb === void 0 ? void 0 : cb(entries, observer);
                     }
-                    dataRef.current.prevContentRect = { width: entry.borderBoxSize[0].inlineSize, height: entry.borderBoxSize[0].blockSize };
+                    prevContentRect.current = { width: entry.borderBoxSize[0].inlineSize, height: entry.borderBoxSize[0].blockSize };
                 }, () => {
-                    if (!isUndefined(dataRef.current.prevContentRect) &&
+                    if (!isUndefined(prevContentRect.current) &&
                         !(skipEmpty && entry.contentRect.width === 0 && entry.contentRect.height === 0) &&
-                        (dataRef.current.prevContentRect.width !== entry.contentRect.width ||
-                            dataRef.current.prevContentRect.height !== entry.contentRect.height)) {
-                        flushSync(() => cb === null || cb === void 0 ? void 0 : cb(entries, observer));
+                        (prevContentRect.current.width !== entry.contentRect.width || prevContentRect.current.height !== entry.contentRect.height)) {
+                        cb === null || cb === void 0 ? void 0 : cb(entries, observer);
                     }
-                    dataRef.current.prevContentRect = { width: entry.contentRect.width, height: entry.contentRect.height };
+                    prevContentRect.current = { width: entry.contentRect.width, height: entry.contentRect.height };
                 }, entry);
             });
             observer.observe(target.current);

package/useForkRef.d.ts

@@ -1 +0,0 @@
-export declare function useForkRef<T>(...refs: (React.ForwardedRef<T> | undefined)[]): React.RefCallback<T>;

package/useForkRef.js

@@ -1,19 +0,0 @@
-import { isFunction, isObject } from 'lodash';
-import { useCallback } from 'react';
-function setRef(ref, value) {
-    if (isFunction(ref)) {
-        ref(value);
-    }
-    else if (isObject(ref) && 'current' in ref) {
-        ref['current'] = value;
-    }
-}
-export function useForkRef(...refs) {
-    return useCallback((refValue) => {
-        refs.forEach((ref) => {
-            setRef(ref, refValue);
-        });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...refs]);
-}