@aiszlab/relax 2.1.0 → 2.1.2-beta.0

package/dist/hooks/use-controlled-state.cjs

@@ -3,13 +3,14 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var isUndefined = require('../is/is-undefined.cjs');
-var useUpdateEffect = require('./use-update-effect.cjs');
 var isFunction = require('../is/is-function.cjs');
+var useEvent = require('./use-event.cjs');
+var reactDom = require('react-dom');
 
 function useControlledState(controlledState) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     defaultState = _ref.defaultState,
-    onUpdate = _ref.onUpdate;
+    onChange = _ref.onChange;
   // initialize state
   var _useState = react.useState(function () {
       // default use controlled state
@@ -25,19 +26,27 @@ function useControlledState(controlledState) {
     _useState2 = _slicedToArray(_useState, 2),
     _state = _useState2[0],
     _setState = _useState2[1];
-  // sync value back to `undefined` when it from control to un-control
-  useUpdateEffect.useUpdateEffect(function () {
-    if (controlledState !== _state) {
-      onUpdate === null || onUpdate === void 0 || onUpdate(controlledState, _state);
-    }
-    if (!isUndefined.isUndefined(controlledState)) {
+  // 变更状态函数
+  // 变更内容为函数，且需要触发`onChange`，那么本次状态更新必为同步
+  // 其余继续保持批处理逻辑
+  var setState = useEvent.useEvent(function (action) {
+    if (isFunction.isFunction(action)) {
+      if (onChange) {
+        reactDom.flushSync(function () {
+          _setState(action);
+        });
+        onChange(_state);
+        return;
+      }
+      _setState(action);
       return;
     }
-    _setState(defaultState !== null && defaultState !== void 0 ? defaultState : controlledState);
-  }, [controlledState]);
+    _setState(action);
+    onChange === null || onChange === void 0 || onChange(action);
+  });
   // use controlled
   var state = isUndefined.isUndefined(controlledState) ? _state : controlledState;
-  return [state, _setState];
+  return [state, setState];
 }
 
 exports.useControlledState = useControlledState;

package/dist/hooks/use-controlled-state.d.ts

@@ -7,10 +7,10 @@ type UsingControlledState<S> = {
      */
     defaultState?: State<S>;
     /**
-     * @description
-     * value update callback
+     * 状态发生改变后触发的回调事件
+     * @default undefined
      */
-    onUpdate?: (next: Partialable<S>, prev: Partialable<S>) => void;
+    onChange?: (state: Partialable<S>) => void;
 };
 type UsedControlledState<T> = [T, Dispatch<SetStateAction<T>>];
 /**
@@ -21,7 +21,7 @@ type UsedControlledState<T> = [T, Dispatch<SetStateAction<T>>];
  */
 declare function useControlledState<T>(): UsedControlledState<Partialable<T>>;
 declare function useControlledState<T>(controlledState: T): UsedControlledState<T>;
-declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<undefined>): UsedControlledState<T>;
+declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<T>): UsedControlledState<T>;
 declare function useControlledState<T>(controlledState: Partialable<T>, usingControlledState: RequiredIn<UsingControlledState<T>, "defaultState">): UsedControlledState<T>;
 declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<T>): UsedControlledState<T>;
 export { useControlledState };

package/dist/hooks/use-controlled-state.mjs

@@ -1,13 +1,14 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState } from 'react';
 import { isUndefined } from '../is/is-undefined.mjs';
-import { useUpdateEffect } from './use-update-effect.mjs';
 import { isFunction } from '../is/is-function.mjs';
+import { useEvent } from './use-event.mjs';
+import { flushSync } from 'react-dom';
 
 function useControlledState(controlledState) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     defaultState = _ref.defaultState,
-    onUpdate = _ref.onUpdate;
+    onChange = _ref.onChange;
   // initialize state
   var _useState = useState(function () {
       // default use controlled state
@@ -23,19 +24,27 @@ function useControlledState(controlledState) {
     _useState2 = _slicedToArray(_useState, 2),
     _state = _useState2[0],
     _setState = _useState2[1];
-  // sync value back to `undefined` when it from control to un-control
-  useUpdateEffect(function () {
-    if (controlledState !== _state) {
-      onUpdate === null || onUpdate === void 0 || onUpdate(controlledState, _state);
-    }
-    if (!isUndefined(controlledState)) {
+  // 变更状态函数
+  // 变更内容为函数，且需要触发`onChange`，那么本次状态更新必为同步
+  // 其余继续保持批处理逻辑
+  var setState = useEvent(function (action) {
+    if (isFunction(action)) {
+      if (onChange) {
+        flushSync(function () {
+          _setState(action);
+        });
+        onChange(_state);
+        return;
+      }
+      _setState(action);
       return;
     }
-    _setState(defaultState !== null && defaultState !== void 0 ? defaultState : controlledState);
-  }, [controlledState]);
+    _setState(action);
+    onChange === null || onChange === void 0 || onChange(action);
+  });
   // use controlled
   var state = isUndefined(controlledState) ? _state : controlledState;
-  return [state, _setState];
+  return [state, setState];
 }
 
 export { useControlledState };

package/dist/hooks/use-identity.cjs

@@ -14,7 +14,7 @@ var useIdentity = function useIdentity() {
     if (!signal) {
       return "".concat(id).concat(count.current++);
     }
-    return "".concat(id).concat(signal, ":").concat(count.current++);
+    return "".concat(id).concat(signal, "_").concat(count.current++);
   }, []);
   return [id, unique];
 };

package/dist/hooks/use-identity.mjs

@@ -12,7 +12,7 @@ var useIdentity = function useIdentity() {
     if (!signal) {
       return "".concat(id).concat(count.current++);
     }
-    return "".concat(id).concat(signal, ":").concat(count.current++);
+    return "".concat(id).concat(signal, "_").concat(count.current++);
   }, []);
   return [id, unique];
 };

package/dist/hooks/use-lazy-memo.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var react = require('react');
+var useDefault = require('./use-default.cjs');
+
+/**
+ * useMemo 作为一个同步函数，在组件`render`过程中会阻塞浏览器渲染
+ * useLazyMemo 仅当组件内部需要访问数据时，才会执行计算
+ */
+var useLazyMemo = function useLazyMemo(fn, deps) {
+  var memorizedValue = react.useRef(null);
+  react.useMemo(function () {
+    memorizedValue.current = null;
+  }, [deps]);
+  var compute = useDefault.useDefault(function () {
+    return new Proxy({
+      value: null
+    }, {
+      get: function get(target, key) {
+        var _memorizedValue$curre;
+        if (key !== "value") {
+          return Reflect.get(target, key);
+        }
+        return (_memorizedValue$curre = memorizedValue.current) !== null && _memorizedValue$curre !== void 0 ? _memorizedValue$curre : fn();
+      }
+    });
+  });
+  return compute;
+};
+
+exports.useLazyMemo = useLazyMemo;

package/dist/hooks/use-lazy-memo.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useMemo 作为一个同步函数，在组件`render`过程中会阻塞浏览器渲染
+ * useLazyMemo 仅当组件内部需要访问数据时，才会执行计算
+ */
+declare const useLazyMemo: <T>(fn: () => T, deps: unknown[]) => {
+    value: T;
+};
+export { useLazyMemo };

package/dist/hooks/use-lazy-memo.mjs

@@ -0,0 +1,29 @@
+import { useRef, useMemo } from 'react';
+import { useDefault } from './use-default.mjs';
+
+/**
+ * useMemo 作为一个同步函数，在组件`render`过程中会阻塞浏览器渲染
+ * useLazyMemo 仅当组件内部需要访问数据时，才会执行计算
+ */
+var useLazyMemo = function useLazyMemo(fn, deps) {
+  var memorizedValue = useRef(null);
+  useMemo(function () {
+    memorizedValue.current = null;
+  }, [deps]);
+  var compute = useDefault(function () {
+    return new Proxy({
+      value: null
+    }, {
+      get: function get(target, key) {
+        var _memorizedValue$curre;
+        if (key !== "value") {
+          return Reflect.get(target, key);
+        }
+        return (_memorizedValue$curre = memorizedValue.current) !== null && _memorizedValue$curre !== void 0 ? _memorizedValue$curre : fn();
+      }
+    });
+  });
+  return compute;
+};
+
+export { useLazyMemo };

package/dist/index.cjs

@@ -43,6 +43,7 @@ var useAsyncEffect = require('./hooks/use-async-effect.cjs');
 var useLazyRef = require('./hooks/use-lazy-ref.cjs');
 var useScroll = require('./hooks/use-scroll.cjs');
 var useScale = require('./hooks/use-scale.cjs');
+var useLazyMemo = require('./hooks/use-lazy-memo.cjs');
 var isRefable = require('./is/is-refable.cjs');
 var isUndefined = require('./is/is-undefined.cjs');
 var isNull = require('./is/is-null.cjs');
@@ -139,6 +140,7 @@ exports.useAsyncEffect = useAsyncEffect.useAsyncEffect;
 exports.useLazyRef = useLazyRef.useLazyRef;
 exports.useScroll = useScroll.useScroll;
 exports.useScale = useScale.useScale;
+exports.useLazyMemo = useLazyMemo.useLazyMemo;
 exports.isRefable = isRefable.isRefable;
 exports.isUndefined = isUndefined.isUndefined;
 exports.isNull = isNull.isNull;

package/dist/index.d.ts

@@ -45,6 +45,7 @@ export { useAsyncEffect } from "./hooks/use-async-effect";
 export { useLazyRef } from "./hooks/use-lazy-ref";
 export { useScroll } from "./hooks/use-scroll";
 export { useScale } from "./hooks/use-scale";
+export { useLazyMemo } from "./hooks/use-lazy-memo";
 /**
  * @description
  * is

package/dist/index.mjs

@@ -41,6 +41,7 @@ export { useAsyncEffect } from './hooks/use-async-effect.mjs';
 export { useLazyRef } from './hooks/use-lazy-ref.mjs';
 export { useScroll } from './hooks/use-scroll.mjs';
 export { useScale } from './hooks/use-scale.mjs';
+export { useLazyMemo } from './hooks/use-lazy-memo.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": "2.1.0",
+  "version": "2.1.2-beta.0",
   "description": "react utils collection",
   "exports": {
     ".": {