mirror of
				https://github.com/soybeanjs/soybean-admin.git
				synced 2025-11-04 15:53:43 +08:00 
			
		
		
		
	refactor(hooks): remove useSignal hook and update exports
This commit is contained in:
		@@ -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;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
		Reference in New Issue
	
	Block a user