@hairy/react-lib-composition 1.47.0 → 1.50.0

package/dist/index.mjs

@@ -0,0 +1,448 @@
+import { isFunction, noop } from "@hairy/utils";
+import { Fragment, createElement, createElement as h, useCallback, useEffect, useInsertionEffect, useReducer, useRef, useState } from "react";
+import { computed as computed$1, customRef as customRef$1, effectScope as effectScope$1, getCurrentScope as getCurrentScope$1, isProxy, isReactive, isReadonly, isRef, isShallow, markRaw, reactive as reactive$1, readonly as readonly$1, ref as ref$1, shallowReactive as shallowReactive$1, shallowReadonly as shallowReadonly$1, shallowRef as shallowRef$1, toRaw, toReactive, toReadonly, toRef, toRefs, toValue, unref, watch as watch$1 } from "@vue/reactivity";
+
+//#region ../lib-react/src/hooks/tryUseCallback.ts
+const tryUseCallback = (callback, deps) => {
+	try {
+		return useCallback(callback, deps);
+	} catch {
+		return callback;
+	}
+};
+
+//#endregion
+//#region ../lib-react/src/hooks/tryUseEffect.ts
+const tryUseEffect = (effect, deps) => {
+	try {
+		useEffect(effect, deps);
+	} catch {}
+};
+
+//#endregion
+//#region ../lib-react/src/hooks/tryUseInsertionEffect.ts
+const tryUseInsertionEffect = (callback, deps) => {
+	try {
+		useInsertionEffect(callback, deps);
+	} catch {}
+};
+
+//#endregion
+//#region ../lib-react/src/hooks/tryUseReducer.ts
+const tryUseReducer = (reducer, initializerArg, initializer) => {
+	try {
+		return useReducer(reducer, initializerArg, initializer);
+	} catch {
+		return [initializerArg, () => {}];
+	}
+};
+
+//#endregion
+//#region ../lib-react/src/hooks/tryUseRef.ts
+const tryUseRef = (initialValue) => {
+	try {
+		return useRef(initialValue);
+	} catch {
+		return { current: initialValue };
+	}
+};
+
+//#endregion
+//#region ../lib-react/src/hooks/tryUseState.ts
+const tryUseState = (initialState) => {
+	try {
+		return useState(initialState);
+	} catch {
+		return [isFunction(initialState) ? initialState() : initialState, noop];
+	}
+};
+
+//#endregion
+//#region ../lib-react/src/hooks/useUpdate.ts
+const updateReducer = (num) => (num + 1) % 1e6;
+function useUpdate() {
+	const [, update] = tryUseReducer(updateReducer, 0);
+	return update;
+}
+
+//#endregion
+//#region ../lib-react/src/hooks/tryUseUpdate.ts
+function tryUseUpdate() {
+	try {
+		return useUpdate();
+	} catch {
+		return () => {};
+	}
+}
+
+//#endregion
+//#region src/lifecycle.ts
+/**
+* The function is called right after the component is mounted.
+*
+* @param fn
+* @see {@link https://react.dev/reference/react/Component#componentdidmount React `componentDidMount()`}
+*/
+function onMounted(fn) {
+	tryUseEffect(() => {
+		fn();
+	}, []);
+}
+function onBeforeMount(fn) {
+	const isMounted = tryUseRef(false);
+	if (!isMounted.current) {
+		fn();
+		isMounted.current = true;
+	}
+}
+/**
+* The function is called right before the component is unmounted.
+*
+* @param fn
+* @see {@link https://react.dev/reference/react/Component#componentwillunmount React `componentWillUnmount()`}
+*/
+function onBeforeUnmount(fn) {
+	tryUseEffect(() => {
+		return () => {
+			fn();
+		};
+	}, []);
+}
+function onUnmounted(fn) {
+	onBeforeUnmount(() => setTimeout(fn, 0));
+}
+/**
+* The function is called immediately after the component is re-rendered with updated props or state.
+* This method is not invoked during the initial render.
+*
+* @param fn
+* @see {@link https://react.dev/reference/react/Component#componentdidupdate React `componentDidUpdate()`}
+*/
+function onUpdated(fn) {
+	const isMounted = tryUseRef(false);
+	tryUseEffect(() => {
+		isMounted.current ? fn() : isMounted.current = true;
+	});
+}
+function onBeforeUpdate(fn) {
+	tryUseInsertionEffect(fn);
+}
+
+//#endregion
+//#region src/watch.ts
+function watch(source, callback, options = {}) {
+	const handle = tryUseRef(void 0);
+	const cancel = tryUseCallback(() => {
+		if (!handle.current) return;
+		handle.current();
+		handle.current = void 0;
+	}, []);
+	const create = tryUseCallback(() => {
+		handle.current && cancel();
+		handle.current = watch$1(source, callback, {
+			...options,
+			scheduler: (job) => job()
+		});
+		cancel.pause = handle.current.pause;
+		cancel.resume = handle.current.resume;
+		cancel.stop = handle.current.stop;
+	}, []);
+	!handle.current && create();
+	onMounted(create);
+	onBeforeUnmount(cancel);
+	return cancel;
+}
+
+//#endregion
+//#region src/computed.ts
+function computed(arg1, arg2) {
+	const [ref] = tryUseState(() => computed$1(arg1, arg2));
+	watch(ref, tryUseUpdate());
+	return ref;
+}
+
+//#endregion
+//#region src/effectScope.ts
+let activeEffectScope;
+function createVueEffectScope(...args) {
+	const scope = effectScope$1(...args);
+	Reflect.set(scope, "parent", activeEffectScope);
+	if (!args[0] && activeEffectScope) {
+		const scopes = activeEffectScope.scopes || (activeEffectScope.scopes = []);
+		Reflect.set(scope, "index", scopes.push(scope) - 1);
+	}
+	return scope;
+}
+/**
+* Creates an effect scope object which can capture the reactive effects (i.e.
+* computed and watchers) created within it so that these effects can be
+* disposed together. For detailed use cases of this API, please consult its
+* corresponding {@link https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md | RFC}.
+*
+* @param detached - Can be used to create a "detached" effect scope.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope Vue `effectScope()`}
+*/
+function effectScope(...args) {
+	const hasRun = tryUseRef(false);
+	const [scope] = tryUseState(() => createVueEffectScope(...args));
+	const originalRunRef = tryUseRef(scope.run);
+	scope.run = tryUseCallback((fn) => {
+		if (!hasRun.current) {
+			hasRun.current = true;
+			return originalRunRef.current.bind(scope)(fn);
+		} else return;
+	}, []);
+	return scope;
+}
+function withEffectScope(fn, detached) {
+	let currentEffectScope;
+	return ((...props) => {
+		const scope = effectScope(detached);
+		const element = createElement(fn, ...props);
+		onBeforeMount(() => {
+			currentEffectScope = activeEffectScope;
+			activeEffectScope = scope;
+		});
+		onMounted(() => activeEffectScope = currentEffectScope);
+		onUnmounted(() => scope.stop());
+		return element;
+	});
+}
+/**
+* Returns the current active effect scope if there is one.
+*
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#getcurrentscope}
+*/
+function getCurrentScope() {
+	const [effectScope] = tryUseState(() => activeEffectScope || getCurrentScope$1());
+	return effectScope;
+}
+/**
+* Registers a dispose callback on the current active effect scope. The
+* callback will be invoked when the associated effect scope is stopped.
+*
+* @param fn - The callback function to attach to the scope's cleanup.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#onscopedispose}
+*/
+function onScopeDispose(fn, _failSilently = false) {
+	if (activeEffectScope) Reflect.get(activeEffectScope, "cleanups")?.push(fn);
+}
+
+//#endregion
+//#region src/reactive.ts
+function reactive(target) {
+	const [value] = useState(() => reactive$1(target));
+	watch(value, tryUseUpdate());
+	return value;
+}
+/**
+* Shallow version of {@link reactive()}.
+*
+* Unlike {@link reactive()}, there is no deep conversion: only root-level
+* properties are reactive for a shallow reactive object. Property values are
+* stored and exposed as-is - this also means properties with ref values will
+* not be automatically unwrapped.
+*
+* @param target - The source object.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreactive Vue `shallowReactive()`}
+*
+* @example
+* ```js
+* const state = shallowReactive({
+*   foo: 1,
+*   nested: {
+*     bar: 2
+*   }
+* })
+*
+* // mutating state's own properties is reactive
+* state.foo++
+*
+* // ...but does not convert nested objects
+* isReactive(state.nested) // false
+*
+* // NOT reactive
+* state.nested.bar++
+* ```
+*/
+function shallowReactive(target) {
+	const [value] = useState(() => shallowReactive$1(target));
+	watch(value, tryUseUpdate());
+	return value;
+}
+
+//#endregion
+//#region src/reactivity.ts
+/**
+* Converts some of the 'raw Vue' data, which is not already wrapped in a hook,
+* into reactive hook data to ensure proper reactivity within the component.
+*
+* @param getter - A function that returns the data to be deeply watched.
+* @example
+* ```tsx
+* import React from 'react'
+* import { ref, reactivity } from 'veact'
+*
+* const countRef = ref(0)
+*
+* export const Component: React.FC = () => {
+*   // Convert to a reactivity hook
+*   const count = reactivity(() => countRef)
+*   const increment = () => {
+*     count.value++
+*   }
+*
+*   return (
+*     <div>
+*       <span>{count.value}</span>
+*       <button onClick={increment}>Increment</button>
+*     </div>
+*   )
+* }
+* ```
+*/
+function reactivity(getter) {
+	watch(() => getter(), tryUseUpdate(), { deep: true });
+	return getter();
+}
+
+//#endregion
+//#region src/readonly.ts
+/**
+* Takes an object (reactive or plain) or a ref and returns a readonly proxy to
+* the original.
+*
+* A readonly proxy is deep: any nested property accessed will be readonly as
+* well. It also has the same ref-unwrapping behavior as {@link reactive()},
+* except the unwrapped values will also be made readonly.
+*
+* @param target - The source object.
+* @see {@link https://vuejs.org/api/reactivity-core.html#readonly Vue `readonly()`}
+*
+* @example
+* ```js
+* const original = reactive({ count: 0 })
+* const copy = readonly(original)
+*
+* useWatchEffect(() => {
+*   // works for reactivity tracking
+*   console.log(copy.count)
+* })
+*
+* // mutating original will trigger watchers relying on the copy
+* original.count++
+*
+* // mutating the copy will fail and result in a warning
+* copy.count++ // warning!
+* ```
+*/
+function readonly(target) {
+	const [value] = tryUseState(() => readonly$1(target));
+	watch(value, tryUseUpdate());
+	return value;
+}
+/**
+* Shallow version of {@link readonly()}.
+*
+* Unlike {@link readonly()}, there is no deep conversion: only root-level
+* properties are made readonly. Property values are stored and exposed as-is -
+* this also means properties with ref values will not be automatically
+* unwrapped.
+*
+* @param target - The source object.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreadonly Vue `shallowReadonly()`}
+*
+* @example
+* ```js
+* const state = shallowReadonly({
+*   foo: 1,
+*   nested: {
+*     bar: 2
+*   }
+* })
+*
+* // mutating state's own properties will fail
+* state.foo++
+*
+* // ...but works on nested objects
+* isReadonly(state.nested) // false
+*
+* // works
+* state.nested.bar++
+* ```
+*/
+function shallowReadonly(target) {
+	const [value] = tryUseState(() => shallowReadonly$1(target));
+	watch(value, tryUseUpdate());
+	return value;
+}
+
+//#endregion
+//#region src/ref.ts
+function ref(initValue) {
+	const [ref] = tryUseState(() => {
+		const r = ref$1(initValue);
+		Object.defineProperty(r, "current", { set: (value) => r.value = value });
+		return r;
+	});
+	watch(ref, tryUseUpdate(), { deep: true });
+	return ref;
+}
+/**
+* Creates a customized ref with explicit control over its dependency tracking
+* and updates triggering.
+*
+* @param factory - The function that receives the `track` and `trigger` callbacks.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#customref Vue `customRef()`}
+*/
+function customRef(factory) {
+	const [ref] = tryUseState(() => customRef$1(factory));
+	watch(ref, tryUseUpdate());
+	return ref;
+}
+function shallowRef(initValue) {
+	const [ref] = tryUseState(() => shallowRef$1(initValue));
+	watch(ref, tryUseUpdate());
+	return ref;
+}
+
+//#endregion
+//#region src/watchEffect.ts
+/**
+* Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
+*
+* @param effect - The effect function to run.
+* @param options - An optional options object that can be used to adjust the effect's flush timing or to debug the effect's dependencies; the `flush` option is not supported compared to Vue (3.5.0).
+* @see {@link https://vuejs.org/api/reactivity-core.html#watcheffect Vue `watchEffect()`}
+*
+* @example
+* ```js
+* const count = useRef(0)
+* watchEffect(() => console.log(count.value))
+* // -> logs 0
+*
+* count.value++
+* // -> logs 1
+* ```
+*/
+function watchEffect(effect, options = {}) {
+	const [watchHandle] = tryUseState(() => watch$1(effect, null, {
+		...options,
+		scheduler: (job) => job()
+	}));
+	onBeforeUnmount(() => watchHandle.stop());
+	return watchHandle;
+}
+
+//#endregion
+//#region src/index.ts
+const getCurrentInstance = noop;
+const hasInjectionContext = noop;
+const inject = noop;
+const provide = noop;
+const nextTick = noop;
+const defineComponent = noop;
+const TransitionGroup = noop;
+
+//#endregion
+export { Fragment, TransitionGroup, computed, customRef, defineComponent, effectScope, getCurrentInstance, getCurrentScope, h, hasInjectionContext, inject, isProxy, isReactive, isReadonly, isRef, isShallow, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, onUnmounted, onUpdated, provide, reactive, reactivity, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toReactive, toReadonly, toRef, toRefs, toValue, unref, watch, watchEffect, withEffectScope };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/react-lib-composition",
   "type": "module",
-  "version": "1.47.0",
+  "version": "1.50.0",
   "description": "Library for react reactivity",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -14,13 +14,22 @@
   "bugs": "https://github.com/hairyf/hairylib/issues",
   "keywords": [],
   "sideEffects": false,
-  "main": "./dist/index.js",
-  "publishConfig": {
-    "jsdelivr": "./dist/index.global.js"
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
   },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "jsdelivr": "./dist/index.iife.js"
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -30,7 +39,8 @@
     "@vue/reactivity": "^3.5.13",
     "html-parse-stringify": "^3.0.1",
     "mitt": "^3.0.1",
-    "valtio": "^2"
+    "valtio": "^2",
+    "@hairy/utils": "1.50.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.3",
@@ -39,23 +49,12 @@
     "react-dom": "^19.1.0",
     "react-i18next": "^14.1.2",
     "react-use": "^17.6.0",
-    "@hairy/utils": "1.47.0",
-    "@hairy/react-lib": "1.47.0"
+    "@hairy/react-lib": "1.50.0"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "start": "tsx src/index.ts"
   },
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/index.global.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./*": "./*"
-  }
+  "unpkg": "./dist/index.iife.js"
 }