Reactive State

/**
 * Creates a reactive proxy of an object
 * @param obj - Object to make reactive
 * @returns Reactive proxy with unwrapped refs
 */
function reactive<T extends object>(obj: T): UnwrapRef<T>;

/**
 * Creates a shallow reactive proxy where only root-level properties are reactive
 * @param obj - Object to make shallow reactive
 * @returns Shallow reactive proxy
 */
function shallowReactive<T extends object>(obj: T): T;

/**
 * Checks if an object is reactive
 * @param obj - Object to check
 * @returns True if object is reactive
 */
function isReactive(obj: any): boolean;

import { reactive, isReactive } from "@vue/composition-api";

// Basic reactive object
const state = reactive({
  count: 0,
  user: {
    name: "Alice",
    age: 25,
  },
});

// All properties are reactive
state.count++; // Triggers reactivity
state.user.name = "Bob"; // Triggers reactivity

console.log(isReactive(state)); // true

/**
 * Creates a reactive reference to a value
 * @param value - Initial value
 * @returns Reactive reference with .value property
 */
function ref<T>(value: T): Ref<UnwrapRef<T>>;
function ref<T = any>(): Ref<T | undefined>;

/**
 * Creates a shallow reactive reference (nested objects are not reactive)
 * @param value - Initial value
 * @returns Shallow reactive reference
 */
function shallowRef<T>(value: T): Ref<T>;
function shallowRef<T = any>(): Ref<T | undefined>;

/**
 * Checks if a value is a ref
 * @param value - Value to check
 * @returns True if value is a ref
 */
function isRef<T>(value: any): value is Ref<T>;

/**
 * Returns the inner value of a ref, or the value itself if not a ref
 * @param ref - Ref or value
 * @returns Unwrapped value
 */
function unref<T>(ref: T | Ref<T>): T;

/**
 * Manually triggers effects for a shallow ref
 * @param ref - Ref to trigger
 */
function triggerRef(ref: Ref<any>): void;

import { ref, isRef, unref, triggerRef } from "@vue/composition-api";

// Basic ref usage
const count = ref(0);
const name = ref("Alice");

console.log(count.value); // 0
count.value++; // Triggers reactivity

// Type-safe operations
console.log(isRef(count)); // true
console.log(unref(count)); // Current value without .value access

// Shallow ref for performance
const expensiveData = shallowRef({ large: "object" });
// Manually trigger when you modify nested properties
triggerRef(expensiveData);

/**
 * Converts all properties of an object to refs
 * @param obj - Reactive object
 * @returns Object with all properties as refs
 */
function toRefs<T extends object>(obj: T): ToRefs<T>;

/**
 * Creates a ref to a property of a reactive object
 * @param object - Source reactive object
 * @param key - Property key
 * @returns Ref linked to the property
 */
function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): Ref<T[K]>;

/**
 * Creates a ref with custom getter and setter functions
 * @param factory - Factory function returning getter/setter
 * @returns Custom ref
 */
function customRef<T>(factory: CustomRefFactory<T>): Ref<T>;

/**
 * Internal function to create a ref with specific options (low-level API)
 * @param options - Ref options with get/set functions
 * @param isReadonly - Whether the ref should be readonly
 * @param isComputed - Whether this is a computed ref
 * @returns Created ref instance
 */
function createRef<T>(
  options: RefOption<T>,
  isReadonly?: boolean,
  isComputed?: boolean
): Ref<T>;

/**
 * Proxies an object to automatically unwrap refs in properties
 * @param objectWithRefs - Object containing refs
 * @returns Proxied object with auto-unwrapped refs
 */
function proxyRefs<T extends object>(objectWithRefs: T): ShallowUnwrapRef<T>;

import { reactive, toRefs, toRef, customRef } from "@vue/composition-api";

// Convert reactive object to refs
const state = reactive({ count: 0, name: "Alice" });
const { count, name } = toRefs(state);

// Now count and name are refs
count.value++; // Updates state.count

// Create ref to specific property
const user = reactive({ profile: { name: "Bob" } });
const nameRef = toRef(user.profile, "name");

// Custom ref with debouncing
function useDebouncedRef(value: string, delay = 200) {
  let timeout: NodeJS.Timeout;
  return customRef((track, trigger) => ({
    get() {
      track();
      return value;
    },
    set(newValue: string) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        trigger();
      }, delay);
    },
  }));
}

/**
 * Creates a deep readonly proxy of an object
 * @param obj - Object to make readonly
 * @returns Deep readonly proxy
 */
function readonly<T extends object>(obj: T): DeepReadonly<UnwrapNestedRefs<T>>;

/**
 * Creates a shallow readonly proxy (only root level is readonly)
 * @param obj - Object to make shallow readonly
 * @returns Shallow readonly proxy
 */
function shallowReadonly<T extends object>(obj: T): Readonly<T>;

/**
 * Checks if an object is readonly
 * @param obj - Object to check
 * @returns True if object is readonly
 */
function isReadonly(obj: any): boolean;

import { reactive, readonly, isReadonly } from "@vue/composition-api";

const state = reactive({ count: 0, nested: { value: 1 } });
const readonlyState = readonly(state);

console.log(readonlyState.count); // 0 (can read)
// readonlyState.count++; // TypeError in development

console.log(isReadonly(readonlyState)); // true

/**
 * Returns the raw original object from a reactive proxy
 * @param observed - Reactive object
 * @returns Original non-reactive object
 */
function toRaw<T>(observed: T): T;

/**
 * Marks an object to prevent it from being made reactive
 * @param obj - Object to mark as raw
 * @returns The same object, marked as raw
 */
function markRaw<T extends object>(obj: T): T;

/**
 * Checks if an object is raw (not reactive)
 * @param obj - Object to check
 * @returns True if object is raw
 */
function isRaw(obj: any): boolean;

import { reactive, toRaw, markRaw, isRaw } from "@vue/composition-api";

const original = { count: 0 };
const state = reactive(original);

console.log(toRaw(state) === original); // true

// Prevent object from becoming reactive
const nonReactive = markRaw({ data: "important" });
const attempted = reactive(nonReactive);
console.log(isRaw(attempted)); // true (reactivity was prevented)

/**
 * Reactive set utility (equivalent to Vue.set)
 * @param target - Target object or array
 * @param key - Property key or array index
 * @param value - Value to set
 */
function set<T>(target: any, key: any, value: T): T;

/**
 * Reactive delete utility (equivalent to Vue.delete)
 * @param target - Target object or array
 * @param key - Property key or array index
 */
function del(target: any, key: any): void;

import { reactive, set, del } from "@vue/composition-api";

const state = reactive<{ [key: string]: any }>({});

// Add reactive property (needed in Vue 2)
set(state, "newProp", "value");

// Delete reactive property
del(state, "newProp");

interface Ref<T = any> {
  value: T;
}

interface ComputedRef<T = any> extends WritableComputedRef<T> {
  readonly value: T;
}

interface WritableComputedRef<T> extends Ref<T> {
  readonly effect: ReactiveEffect<T>;
}

type ToRefs<T = any> = { [K in keyof T]: Ref<T[K]> };

type UnwrapRef<T> = T extends Ref<infer V>
  ? UnwrapRefSimple<V>
  : UnwrapRefSimple<T>;

type UnwrapRefSimple<T> = T extends
  | Function
  | CollectionTypes
  | BaseTypes
  | Ref
  | RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
  ? T
  : T extends Array<any>
  ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
  : T extends object
  ? UnwrappedObject<T>
  : T;

type ShallowUnwrapRef<T> = {
  [K in keyof T]: T[K] extends Ref<infer V> ? V : T[K];
};

type DeepReadonly<T> = T extends Primitive
  ? T
  : T extends Function
  ? T
  : T extends Array<infer U>
  ? DeepReadonlyArray<U>
  : DeepReadonlyObject<T>;

type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;

type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T;
  set: (value: T) => void;
};

interface RefOption<T> {
  get(): T;
  set?(value: T): void;
}