@aiszlab/relax 1.3.17 → 1.4.0

package/dist/hooks/use-parent-size.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useDebounceCallback = require('./use-debounce-callback.cjs');
+var useMounted = require('./use-mounted.cjs');
+
+/**
+ * @description
+ * listen parent size change
+ * provider with\height to child
+ */
+var useParentSize = function useParentSize() {
+  var parentRef = react.useRef(null);
+  var _useState = react.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = react.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+  var _animation = react.useRef(0);
+  var _useDebounceCallback = useDebounceCallback.useDebounceCallback(function (_ref) {
+      var width = _ref.width,
+        height = _ref.height;
+      setWidth(width);
+      setHeight(height);
+    }, 300),
+    resize = _useDebounceCallback.next,
+    abort = _useDebounceCallback.abort;
+  useMounted.useMounted(function () {
+    var resizer = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var _entry$contentRect;
+        var _ref2 = (_entry$contentRect = entry === null || entry === void 0 ? void 0 : entry.contentRect) !== null && _entry$contentRect !== void 0 ? _entry$contentRect : {},
+          width = _ref2.width,
+          height = _ref2.height;
+        _animation.current = window.requestAnimationFrame(function () {
+          resize({
+            width: width,
+            height: height
+          });
+        });
+      });
+    });
+    if (parentRef.current) {
+      resizer.observe(parentRef.current);
+    }
+    return function () {
+      cancelAnimationFrame(_animation.current);
+      resizer.disconnect();
+      abort();
+    };
+  });
+  return {
+    parentRef: parentRef,
+    width: width,
+    height: height
+  };
+};
+
+exports.useParentSize = useParentSize;

package/dist/hooks/use-parent-size.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * listen parent size change
+ * provider with\height to child
+ */
+export declare const useParentSize: <T extends HTMLElement = HTMLDivElement>() => {
+    parentRef: import("react").RefObject<T>;
+    width: number;
+    height: number;
+};

package/dist/hooks/use-parent-size.mjs

@@ -0,0 +1,61 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState } from 'react';
+import { useDebounceCallback } from './use-debounce-callback.mjs';
+import { useMounted } from './use-mounted.mjs';
+
+/**
+ * @description
+ * listen parent size change
+ * provider with\height to child
+ */
+var useParentSize = function useParentSize() {
+  var parentRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+  var _animation = useRef(0);
+  var _useDebounceCallback = useDebounceCallback(function (_ref) {
+      var width = _ref.width,
+        height = _ref.height;
+      setWidth(width);
+      setHeight(height);
+    }, 300),
+    resize = _useDebounceCallback.next,
+    abort = _useDebounceCallback.abort;
+  useMounted(function () {
+    var resizer = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var _entry$contentRect;
+        var _ref2 = (_entry$contentRect = entry === null || entry === void 0 ? void 0 : entry.contentRect) !== null && _entry$contentRect !== void 0 ? _entry$contentRect : {},
+          width = _ref2.width,
+          height = _ref2.height;
+        _animation.current = window.requestAnimationFrame(function () {
+          resize({
+            width: width,
+            height: height
+          });
+        });
+      });
+    });
+    if (parentRef.current) {
+      resizer.observe(parentRef.current);
+    }
+    return function () {
+      cancelAnimationFrame(_animation.current);
+      resizer.disconnect();
+      abort();
+    };
+  });
+  return {
+    parentRef: parentRef,
+    width: width,
+    height: height
+  };
+};
+
+export { useParentSize };

package/dist/hooks/use-raf.cjs

@@ -9,8 +9,7 @@ var useEvent = require('./use-event.cjs');
  */
 var useRaf = function useRaf(_callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$timely = _ref.timely,
-    timely = _ref$timely === void 0 ? false : _ref$timely;
+    timely = _ref.timely;
   var callback = useEvent.useEvent(_callback);
   var timed = react.useRef(null);
   var isTimed = react.useRef(false);

package/dist/hooks/use-raf.d.ts

@@ -1,7 +1,20 @@
+type UsingRaf = [
+    _callback: Function,
+    {
+        /**
+         * @description
+         * run callback immediately
+         * if `timely` is true, run callback immediately
+         * otherwise, wait for next frame
+         */
+        timely?: boolean;
+    }?
+];
+type UsedRaf = () => void;
+type UseRaf = (...args: UsingRaf) => UsedRaf;
 /**
  * @description
  * raf
  */
-export declare const useRaf: (_callback: Function, { timely, }?: {
-    timely?: boolean;
-}) => () => void;
+export declare const useRaf: UseRaf;
+export {};

package/dist/hooks/use-raf.mjs

@@ -7,8 +7,7 @@ import { useEvent } from './use-event.mjs';
  */
 var useRaf = function useRaf(_callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$timely = _ref.timely,
-    timely = _ref$timely === void 0 ? false : _ref$timely;
+    timely = _ref.timely;
   var callback = useEvent(_callback);
   var timed = useRef(null);
   var isTimed = useRef(false);

package/dist/hooks/use-screen-size.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var isDomUsable = require('../is/is-dom-usable.cjs');
+var useDebounceCallback = require('./use-debounce-callback.cjs');
+var useMounted = require('./use-mounted.cjs');
+
+/**
+ * @description
+ * Use the current screen size.
+ */
+var useScreenSize = function useScreenSize() {
+  var _useState = react.useState(function () {
+      if (!isDomUsable.isDomUsable()) return {
+        width: 0,
+        height: 0
+      };
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var _useDebounceCallback = useDebounceCallback.useDebounceCallback(function () {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }, 300),
+    resize = _useDebounceCallback.next,
+    abort = _useDebounceCallback.abort;
+  useMounted.useMounted(function () {
+    window.addEventListener("resize", resize);
+    return function () {
+      window.removeEventListener("resize", resize);
+      abort();
+    };
+  });
+  return size;
+};
+
+exports.useScreenSize = useScreenSize;

package/dist/hooks/use-screen-size.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description
+ * Use the current screen size.
+ */
+export declare const useScreenSize: () => {
+    width: number;
+    height: number;
+};

package/dist/hooks/use-screen-size.mjs

@@ -0,0 +1,43 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState } from 'react';
+import { isDomUsable } from '../is/is-dom-usable.mjs';
+import { useDebounceCallback } from './use-debounce-callback.mjs';
+import { useMounted } from './use-mounted.mjs';
+
+/**
+ * @description
+ * Use the current screen size.
+ */
+var useScreenSize = function useScreenSize() {
+  var _useState = useState(function () {
+      if (!isDomUsable()) return {
+        width: 0,
+        height: 0
+      };
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var _useDebounceCallback = useDebounceCallback(function () {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }, 300),
+    resize = _useDebounceCallback.next,
+    abort = _useDebounceCallback.abort;
+  useMounted(function () {
+    window.addEventListener("resize", resize);
+    return function () {
+      window.removeEventListener("resize", resize);
+      abort();
+    };
+  });
+  return size;
+};
+
+export { useScreenSize };

package/dist/index.cjs

@@ -33,6 +33,8 @@ var useSessionStorageState = require('./hooks/use-session-storage-state.cjs');
 var useIsMounted = require('./hooks/use-is-mounted.cjs');
 var useInfiniteScroll = require('./hooks/use-infinite-scroll.cjs');
 var useReactive = require('./hooks/use-reactive.cjs');
+var useParentSize = require('./hooks/use-parent-size.cjs');
+var useScreenSize = require('./hooks/use-screen-size.cjs');
 var isRefable = require('./is/is-refable.cjs');
 var isUndefined = require('./is/is-undefined.cjs');
 var isNull = require('./is/is-null.cjs');
@@ -105,6 +107,8 @@ exports.useSessionStorageState = useSessionStorageState.useSessionStorageState;
 exports.useIsMounted = useIsMounted.useIsMounted;
 exports.useInfiniteScroll = useInfiniteScroll.useInfiniteScroll;
 exports.useReactive = useReactive.useReactive;
+exports.useParentSize = useParentSize.useParentSize;
+exports.useScreenSize = useScreenSize.useScreenSize;
 exports.isRefable = isRefable.isRefable;
 exports.isUndefined = isUndefined.isUndefined;
 exports.isNull = isNull.isNull;

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export { useSessionStorageState } from "./hooks/use-session-storage-state";
 export { useIsMounted } from "./hooks/use-is-mounted";
 export { useInfiniteScroll } from "./hooks/use-infinite-scroll";
 export { useReactive } from "./hooks/use-reactive";
+export { useParentSize } from "./hooks/use-parent-size";
+export { useScreenSize } from "./hooks/use-screen-size";
 /**
  * @description
  * is

package/dist/index.mjs

@@ -31,6 +31,8 @@ export { useSessionStorageState } from './hooks/use-session-storage-state.mjs';
 export { useIsMounted } from './hooks/use-is-mounted.mjs';
 export { useInfiniteScroll } from './hooks/use-infinite-scroll.mjs';
 export { useReactive } from './hooks/use-reactive.mjs';
+export { useParentSize } from './hooks/use-parent-size.mjs';
+export { useScreenSize } from './hooks/use-screen-size.mjs';
 export { isRefable } from './is/is-refable.mjs';
 export { isUndefined } from './is/is-undefined.mjs';
 export { isNull } from './is/is-null.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.3.17",
+  "version": "1.4.0",
   "description": "react utils collection",
   "exports": {
     ".": {
@@ -24,13 +24,6 @@
       "import": "./dist/react/index.mjs",
       "default": "./dist/react/index.mjs"
     },
-    "./path": {
-      "types": "./dist/path/index.d.ts",
-      "node": "./dist/path/index.cjs",
-      "require": "./dist/path/index.cjs",
-      "import": "./dist/path/index.mjs",
-      "default": "./dist/path/index.mjs"
-    },
     "./types": "./dist/types/index.d.ts"
   },
   "scripts": {
@@ -55,18 +48,18 @@
     "@babel/preset-typescript": "^7.24.7",
     "@jest/globals": "^29.7.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.0",
     "@testing-library/react": "^16.0.1",
     "@types/babel__core": "^7.20.5",
-    "@types/react": "^18.3.6",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.21.3",
+    "rollup": "^4.22.5",
     "typescript": "5.6.2"
   },
   "peerDependencies": {

package/dist/path/index.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var leaf = require('./leaf.cjs');
-
-
-
-exports.leaf = leaf.leaf;

package/dist/path/index.d.ts

@@ -1 +0,0 @@
-export { leaf } from "./leaf";

package/dist/path/index.mjs

@@ -1 +0,0 @@
-export { leaf } from './leaf.mjs';

package/dist/path/leaf.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-/**
- * @description
- * leaf
- */
-var leaf = function leaf(path) {
-  var start = 0;
-  for (var index = path.length - 1; index >= 0; index--) {
-    if (path.charCodeAt(index) === 47) {
-      start = index + 1;
-      break;
-    }
-  }
-  return path.slice(start);
-};
-
-exports.leaf = leaf;

package/dist/path/leaf.d.ts

@@ -1,5 +0,0 @@
-/**
- * @description
- * leaf
- */
-export declare const leaf: (path: string) => string;

package/dist/path/leaf.mjs

@@ -1,16 +0,0 @@
-/**
- * @description
- * leaf
- */
-var leaf = function leaf(path) {
-  var start = 0;
-  for (var index = path.length - 1; index >= 0; index--) {
-    if (path.charCodeAt(index) === 47) {
-      start = index + 1;
-      break;
-    }
-  }
-  return path.slice(start);
-};
-
-export { leaf };