Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | 1x 1x 1x 1x 1x 1x 15x 15x 15x 15x 15x 15x 13x 13x 15x 15x 15x 15x 1x 1x 3x 3x 3x 3x 3x 4x 4x 3x 3x 3x 3x 1x 9x 9x 9x 9x 9x 1x 1x 1x 1x 8x 8x 8x 20x 12x 12x 18x 15x 15x 12x 12x 20x 8x 8x 9x 9x 9x | import {
anchor,
captureStack,
type ImmutableOutput,
type Linkable,
type LinkableSchema,
type ModelInput,
type ModelOutput,
type State,
type StateBaseOptions,
type StateOptions,
subscribe,
} from '@anchorlib/core';
import { useEffect } from 'react';
import type { AnchorState } from './types.js';
import { useStableRef } from './hooks.js';
import { mutationKeys, pickValues } from './utils.js';
import { useVariable } from './ref.js';
/**
* Custom React hook that creates and manages a reactive anchor state.
*
* This overload is used when you only provide an initial value and optional state options.
*
* @template T - The type of the initial value
* @template S - The schema type for the state, defaults to LinkableSchema
*
* @param init - The initial value for the state
* @param options - Optional configuration for the state
*
* @returns A tuple containing the current state value, the state object, and a setter function
*/
export function useAnchor<T extends Linkable, S extends LinkableSchema = LinkableSchema>(
init: T,
options?: StateOptions<S>
): AnchorState<T>;
/**
* Custom React hook that creates and manages a reactive anchor state.
*
* This overload is used when you provide an initial value, a schema, and optional base options.
*
* @template S - The schema type for the state
* @template T - The type of the initial value, must extend ModelInput<S>
*
* @param init - The initial value for the state
* @param schema - The schema to validate and structure the state
* @param options - Optional base configuration for the state
*
* @returns A tuple containing the current state value, the state object, and a setter function
*/
export function useAnchor<S extends LinkableSchema, T extends ModelInput<S>>(
init: T,
schema: S,
options?: StateBaseOptions
): AnchorState<ModelOutput<S>>;
/**
* Custom React hook that creates and manages a reactive anchor state.
*
* This overload is used when you provide an initial value, a schema, and options with immutable flag set to true.
*
* @template S - The schema type for the state
* @template T - The type of the initial value, must extend ModelInput<S>
*
* @param init - The initial value for the state
* @param schema - The schema to validate and structure the state
* @param options - Configuration for the state with immutable flag
*
* @returns A tuple containing the current state value, the state object, and a setter function
*/
export function useAnchor<S extends LinkableSchema, T extends ModelInput<S>>(
init: T,
schema: S,
options?: StateBaseOptions & { immutable: true }
): AnchorState<ImmutableOutput<T>>;
/**
* Custom React hook that creates and manages a reactive anchor state.
*
* This is the implementation signature that handles all the overload cases.
*
* @template T - The type of the initial value, must extend Linkable
* @template S - The schema type for the state, defaults to LinkableSchema
*
* @param init - The initial value for the state
* @param schemaOptions - Optional schema or options for the state
* @param options - Optional base configuration for the state
*
* @returns A tuple containing the current state value, the state object, and a setter function
*/
export function useAnchor<T extends Linkable, S extends LinkableSchema = LinkableSchema>(
init: T,
schemaOptions?: S,
options?: StateBaseOptions
): AnchorState<T | ModelOutput<S> | ImmutableOutput<T>> {
const [state, setState] = useVariable<ModelInput<T>>(
(newInit) => {
return anchor(newInit ?? (init as ModelInput<S>), schemaOptions as S, options) as ModelInput<T>;
},
[init, schemaOptions, options]
);
return [state.value, state, setState] as AnchorState<T | ModelOutput<S> | ImmutableOutput<T>>;
}
/**
* React hook that creates a reactive state.
* This hook is an alias for **useAnchor**.
*
* @template T - The type of the initial value, must extend Linkable
* @template S - The schema type for the state, defaults to LinkableSchema
*
* @param init - The initial value for the state
* @param options - Optional configuration for the state
*
* @returns A tuple containing the current state value, the state object, and a setter function
*/
export const useReactive = useAnchor;
/**
* Custom React hook that creates and manages a raw anchor state.
* This hook is similar to **useAnchor** but creates a raw state that mutates the underlying state object.
*
* Unless you set the global options to `cloned: true`, you don't want to use this.
*
* @template T - The type of the initial value, must extend Linkable
* @template S - The schema type for the state, defaults to LinkableSchema
*
* @param init - The initial value for the state
* @param options - Optional configuration for the state
*
* @returns A tuple containing the current state value, the state object, and a setter function
*/
export function useRaw<T extends Linkable, S extends LinkableSchema = LinkableSchema>(
init: T,
options?: StateOptions<S>
): AnchorState<T> {
const [state, setState] = useVariable<T>(
(newValue) => {
return anchor.raw(newValue ?? init, options);
},
[init, options]
);
return [state.value, state, setState];
}
/**
* React hook that allows you to inherit specific properties from a reactive state object.
* It returns a new object containing only the specified keys and their values.
* The returned object is reactive and will update when the source state changes.
*
* @template T - The type of the reactive state object.
* @template K - The type of keys being picked from the state.
* @param {T} state - The reactive state object to pick values from.
* @param {K[]} picks - An array of keys to pick from the state object.
* @returns {{ [key in K]: T[key] }} - A new reactive object containing only the picked properties.
*/
export function useInherit<T extends State, K extends keyof T>(state: T, picks: K[]): { [key in K]: T[key] } {
const [init, values] = pickValues(state, picks);
const cached = useStableRef(() => init, values).value;
const output = anchor(cached);
useEffect(() => {
if (!anchor.has(state)) {
const error = new Error('State is not reactive.');
captureStack.violation.derivation('Attempted to pick values from a non-reactive state.', error);
return;
}
return subscribe(
state,
(newValue, event) => {
if (event.type !== 'init') {
const keys = mutationKeys(event) as K[];
keys.forEach((key) => {
if (picks.includes(key)) {
output[key] = newValue[key];
}
});
}
},
false
);
}, [output]);
return output;
}
|