mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-17 09:16:37 +08:00
refactor(hooks): remove useSignal hook and update exports
This commit is contained in:
parent
ee4341457a
commit
87adc35f2e
@ -6,6 +6,4 @@ import useSvgIconRender from './use-svg-icon-render';
|
|||||||
import useTable from './use-table';
|
import useTable from './use-table';
|
||||||
|
|
||||||
export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, useTable };
|
export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, useTable };
|
||||||
|
|
||||||
export * from './use-signal';
|
|
||||||
export type * from './use-table';
|
export type * from './use-table';
|
||||||
|
@ -1,144 +0,0 @@
|
|||||||
import { computed, ref, shallowRef, triggerRef } from 'vue';
|
|
||||||
import type {
|
|
||||||
ComputedGetter,
|
|
||||||
DebuggerOptions,
|
|
||||||
Ref,
|
|
||||||
ShallowRef,
|
|
||||||
WritableComputedOptions,
|
|
||||||
WritableComputedRef
|
|
||||||
} from 'vue';
|
|
||||||
|
|
||||||
type Updater<T> = (value: T) => T;
|
|
||||||
type Mutator<T> = (value: T) => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Signal is a reactive value that can be set, updated or mutated
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* ```ts
|
|
||||||
* const count = useSignal(0);
|
|
||||||
*
|
|
||||||
* // `watchEffect`
|
|
||||||
* watchEffect(() => {
|
|
||||||
* console.log(count());
|
|
||||||
* });
|
|
||||||
*
|
|
||||||
* // watch
|
|
||||||
* watch(count, value => {
|
|
||||||
* console.log(value);
|
|
||||||
* });
|
|
||||||
*
|
|
||||||
* // useComputed
|
|
||||||
* const double = useComputed(() => count() * 2);
|
|
||||||
* const writeableDouble = useComputed({
|
|
||||||
* get: () => count() * 2,
|
|
||||||
* set: value => count.set(value / 2)
|
|
||||||
* });
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
export interface Signal<T> {
|
|
||||||
(): Readonly<T>;
|
|
||||||
/**
|
|
||||||
* Set the value of the signal
|
|
||||||
*
|
|
||||||
* It recommend use `set` for primitive values
|
|
||||||
*
|
|
||||||
* @param value
|
|
||||||
*/
|
|
||||||
set(value: T): void;
|
|
||||||
/**
|
|
||||||
* Update the value of the signal using an updater function
|
|
||||||
*
|
|
||||||
* It recommend use `update` for non-primitive values, only the first level of the object will be reactive.
|
|
||||||
*
|
|
||||||
* @param updater
|
|
||||||
*/
|
|
||||||
update(updater: Updater<T>): void;
|
|
||||||
/**
|
|
||||||
* Mutate the value of the signal using a mutator function
|
|
||||||
*
|
|
||||||
* this action will call `triggerRef`, so the value will be tracked on `watchEffect`.
|
|
||||||
*
|
|
||||||
* It recommend use `mutate` for non-primitive values, all levels of the object will be reactive.
|
|
||||||
*
|
|
||||||
* @param mutator
|
|
||||||
*/
|
|
||||||
mutate(mutator: Mutator<T>): void;
|
|
||||||
/**
|
|
||||||
* Get the reference of the signal
|
|
||||||
*
|
|
||||||
* Sometimes it can be useful to make `v-model` work with the signal
|
|
||||||
*
|
|
||||||
* ```vue
|
|
||||||
* <template>
|
|
||||||
* <input v-model="model.count" />
|
|
||||||
* </template>;
|
|
||||||
*
|
|
||||||
* <script setup lang="ts">
|
|
||||||
* const state = useSignal({ count: 0 }, { useRef: true });
|
|
||||||
*
|
|
||||||
* const model = state.getRef();
|
|
||||||
* </script>
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
getRef(): Readonly<ShallowRef<Readonly<T>>>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ReadonlySignal<T> {
|
|
||||||
(): Readonly<T>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SignalOptions {
|
|
||||||
/**
|
|
||||||
* Whether to use `ref` to store the value
|
|
||||||
*
|
|
||||||
* @default false use `sharedRef` to store the value
|
|
||||||
*/
|
|
||||||
useRef?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useSignal<T>(initialValue: T, options?: SignalOptions): Signal<T> {
|
|
||||||
const { useRef } = options || {};
|
|
||||||
|
|
||||||
const state = useRef ? (ref(initialValue) as Ref<T>) : shallowRef(initialValue);
|
|
||||||
|
|
||||||
return createSignal(state);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useComputed<T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ReadonlySignal<T>;
|
|
||||||
export function useComputed<T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions): Signal<T>;
|
|
||||||
export function useComputed<T>(
|
|
||||||
getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
|
|
||||||
debugOptions?: DebuggerOptions
|
|
||||||
) {
|
|
||||||
const isGetter = typeof getterOrOptions === 'function';
|
|
||||||
|
|
||||||
const computedValue = computed(getterOrOptions as any, debugOptions);
|
|
||||||
|
|
||||||
if (isGetter) {
|
|
||||||
return () => computedValue.value as ReadonlySignal<T>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return createSignal(computedValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createSignal<T>(state: ShallowRef<T> | WritableComputedRef<T>): Signal<T> {
|
|
||||||
const signal = () => state.value;
|
|
||||||
|
|
||||||
signal.set = (value: T) => {
|
|
||||||
state.value = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
signal.update = (updater: Updater<T>) => {
|
|
||||||
state.value = updater(state.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
signal.mutate = (mutator: Mutator<T>) => {
|
|
||||||
mutator(state.value);
|
|
||||||
triggerRef(state);
|
|
||||||
};
|
|
||||||
|
|
||||||
signal.getRef = () => state as Readonly<ShallowRef<Readonly<T>>>;
|
|
||||||
|
|
||||||
return signal;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user