@aiszlab/relax 1.4.7 → 1.5.0

package/dist/hooks/{use-refs.cjs → use-composed-ref.cjs}

@@ -3,7 +3,7 @@
 var mountRef = require('../react/mount-ref.cjs');
 var useEvent = require('./use-event.cjs');
 
-var useRefs = function useRefs() {
+var useComposeRef = function useComposeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
@@ -15,4 +15,4 @@ var useRefs = function useRefs() {
   });
 };
 
-exports.useRefs = useRefs;
+exports.useComposeRef = useComposeRef;

package/dist/hooks/{use-refs.d.ts → use-composed-ref.d.ts}

@@ -1,3 +1,3 @@
 import type { Nullable, Voidable } from "@aiszlab/relax/types";
 import { type Refable } from "../react/mount-ref";
-export declare const useRefs: <T>(...refs: Voidable<Refable<Nullable<T>>>[]) => (reference: T) => void;
+export declare const useComposeRef: <T>(...refs: Voidable<Refable<Nullable<T>>>[]) => (reference: T) => void;

package/dist/hooks/{use-refs.mjs → use-composed-ref.mjs}

@@ -1,7 +1,7 @@
 import { mountRef } from '../react/mount-ref.mjs';
 import { useEvent } from './use-event.mjs';
 
-var useRefs = function useRefs() {
+var useComposeRef = function useComposeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
@@ -13,4 +13,4 @@ var useRefs = function useRefs() {
   });
 };
 
-export { useRefs };
+export { useComposeRef };

package/dist/index.cjs

@@ -12,7 +12,7 @@ var useDefault = require('./hooks/use-default.cjs');
 var useScrollLocker = require('./hooks/use-scroll-locker.cjs');
 var useForceUpdate = require('./hooks/use-force-update.cjs');
 var useScrollable = require('./hooks/use-scrollable.cjs');
-var useRefs = require('./hooks/use-refs.cjs');
+var useComposedRef = require('./hooks/use-composed-ref.cjs');
 var useTogglable = require('./hooks/use-togglable.cjs');
 var useEvent = require('./hooks/use-event.cjs');
 var useUpdateEffect = require('./hooks/use-update-effect.cjs');
@@ -89,7 +89,7 @@ exports.useDefault = useDefault.useDefault;
 exports.useScrollLocker = useScrollLocker.useScrollLocker;
 exports.useForceUpdate = useForceUpdate.useForceUpdate;
 exports.useScrollable = useScrollable.useScrollable;
-exports.useRefs = useRefs.useRefs;
+exports.useComposeRef = useComposedRef.useComposeRef;
 exports.useTogglable = useTogglable.useTogglable;
 exports.useEvent = useEvent.useEvent;
 exports.useUpdateEffect = useUpdateEffect.useUpdateEffect;

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { useDefault } from "./hooks/use-default";
 export { useScrollLocker } from "./hooks/use-scroll-locker";
 export { useForceUpdate } from "./hooks/use-force-update";
 export { useScrollable } from "./hooks/use-scrollable";
-export { useRefs } from "./hooks/use-refs";
+export { useComposeRef } from "./hooks/use-composed-ref";
 export { useTogglable } from "./hooks/use-togglable";
 export { useEvent } from "./hooks/use-event";
 export { useUpdateEffect } from "./hooks/use-update-effect";

package/dist/index.mjs

@@ -10,7 +10,7 @@ export { useDefault } from './hooks/use-default.mjs';
 export { useScrollLocker } from './hooks/use-scroll-locker.mjs';
 export { useForceUpdate } from './hooks/use-force-update.mjs';
 export { useScrollable } from './hooks/use-scrollable.mjs';
-export { useRefs } from './hooks/use-refs.mjs';
+export { useComposeRef } from './hooks/use-composed-ref.mjs';
 export { useTogglable } from './hooks/use-togglable.mjs';
 export { useEvent } from './hooks/use-event.mjs';
 export { useUpdateEffect } from './hooks/use-update-effect.mjs';

package/dist/react/index.cjs

@@ -2,8 +2,10 @@
 
 var mountRef = require('./mount-ref.cjs');
 var isClassComponent = require('./is-class-component.cjs');
+var using = require('./using.cjs');
 
 
 
 exports.mountRef = mountRef.mountRef;
 exports.isClassComponent = isClassComponent.isClassComponent;
+exports.using = using.using;

package/dist/react/index.d.ts

@@ -1,4 +1,6 @@
 import { mountRef, type Refable } from "./mount-ref";
 import { isClassComponent } from "./is-class-component";
+import { using } from "./using";
 export { mountRef, isClassComponent };
 export type { Refable };
+export { using };

package/dist/react/index.mjs

@@ -1,2 +1,3 @@
 export { mountRef } from './mount-ref.mjs';
 export { isClassComponent } from './is-class-component.mjs';
+export { using } from './using.mjs';

package/dist/react/using.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var react = require('react');
+var chain = require('../utils/chain.cjs');
+var toFunction = require('../utils/to-function.cjs');
+
+/**
+ * @description
+ * use closure make memoize
+ */
+var initialize = function initialize(initializer) {
+  var listeners = new Set();
+  // create a proxy object to store state
+  // when update, call listeners
+  var store = new Proxy({
+    state: null
+  }, {
+    set: function set(target, key, value) {
+      Reflect.set(target, key, value);
+      chain.chain.apply(void 0, _toConsumableArray(listeners))();
+      return Reflect.get(target, key);
+    }
+  });
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      return listeners["delete"](listener);
+    };
+  };
+  var setState = function setState(previous) {
+    var _store$state;
+    store.state = toFunction.toFunction(previous)((_store$state = store.state) !== null && _store$state !== void 0 ? _store$state : _initialState);
+  };
+  // initialize state
+  var _initialState = store.state = initializer(setState);
+  return {
+    subscribe: subscribe,
+    state: function state() {
+      var _store$state2;
+      return (_store$state2 = store.state) !== null && _store$state2 !== void 0 ? _store$state2 : _initialState;
+    },
+    initialState: function initialState() {
+      return _initialState;
+    }
+  };
+};
+var using = function using(initializer) {
+  var _initialize = initialize(initializer),
+    subscribe = _initialize.subscribe,
+    initialState = _initialize.initialState,
+    state = _initialize.state;
+  // return as hooks
+  return function () {
+    return react.useSyncExternalStore(subscribe, state, initialState);
+  };
+};
+
+exports.using = using;

package/dist/react/using.d.ts

@@ -0,0 +1,4 @@
+type SetState<T> = (state: T | ((previous: T) => T)) => void;
+type Initializer<T> = (setState: SetState<T>) => T;
+declare const using: <T>(initializer: Initializer<T>) => (() => T);
+export { using };

package/dist/react/using.mjs

@@ -0,0 +1,57 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { useSyncExternalStore } from 'react';
+import { chain } from '../utils/chain.mjs';
+import { toFunction } from '../utils/to-function.mjs';
+
+/**
+ * @description
+ * use closure make memoize
+ */
+var initialize = function initialize(initializer) {
+  var listeners = new Set();
+  // create a proxy object to store state
+  // when update, call listeners
+  var store = new Proxy({
+    state: null
+  }, {
+    set: function set(target, key, value) {
+      Reflect.set(target, key, value);
+      chain.apply(void 0, _toConsumableArray(listeners))();
+      return Reflect.get(target, key);
+    }
+  });
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      return listeners["delete"](listener);
+    };
+  };
+  var setState = function setState(previous) {
+    var _store$state;
+    store.state = toFunction(previous)((_store$state = store.state) !== null && _store$state !== void 0 ? _store$state : _initialState);
+  };
+  // initialize state
+  var _initialState = store.state = initializer(setState);
+  return {
+    subscribe: subscribe,
+    state: function state() {
+      var _store$state2;
+      return (_store$state2 = store.state) !== null && _store$state2 !== void 0 ? _store$state2 : _initialState;
+    },
+    initialState: function initialState() {
+      return _initialState;
+    }
+  };
+};
+var using = function using(initializer) {
+  var _initialize = initialize(initializer),
+    subscribe = _initialize.subscribe,
+    initialState = _initialize.initialState,
+    state = _initialize.state;
+  // return as hooks
+  return function () {
+    return useSyncExternalStore(subscribe, state, initialState);
+  };
+};
+
+export { using };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "react utils collection",
   "exports": {
     ".": {