API

Reactive API

This page documents the TSone reactive system API.

Core Function Overview

Name	Signature	Description
`reactive`	`reactive<T extends object>(target: T): T`	Creates a reactive proxy object.
`effect`	`effect(fn: () => void, options?): EffectRunner`	Creates an effect that reruns when its dependencies change.
`computed`	`computed<T>(getter: () => T): { value: T }`	Creates a cached computed value.
`ref`	`ref<T>(value: T): { value: T }`	Creates a reactive reference for a single value.
`isRef`	`isRef(value: unknown): boolean`	Checks whether a value is a ref.
`unref`	`unref<T>(value: T \| Ref<T>): T`	Returns value for a ref, or returns the original value otherwise.
`readonly`	`readonly<T extends object>(target: T): T`	Creates a readonly reactive proxy object.
`stop`	`stop(effect: EffectRunner): void`	Stops an effect from responding to further updates.
`nextTick`	`nextTick(): Promise<void>`	Resolves after the current batch of reactive effects (component re-renders) finishes. Use it when you need to read the latest DOM after changing state.
`flushSync`	`flushSync(): void`	Synchronously flushes pending reactive effects and completes component re-renders immediately. Mostly useful in tests or when reading the DOM synchronously.
`watch`	`watch(source, callback, options?): () => void`	Watches a reactive source (getter or ref) and runs a callback on change. Supports immediate (fire once on setup), deep (track nested properties), and sync (synchronous callback) options; returns a stop function.
`isReactive`	`isReactive(value: unknown): boolean`	Checks whether an object is a reactive proxy.
`isReadonly`	`isReadonly(value: unknown): boolean`	Checks whether an object is a readonly reactive proxy.

reactive

import { reactive } from '@geektech/tsone';

const state = reactive({
  count: 0,
  user: { name: 'John', age: 30 },
});

effect

import { effect, reactive } from '@geektech/tsone';

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

effect(() => {
  console.log(`Count: ${state.count}`);
});

state.count = 1;

computed

import { computed, reactive } from '@geektech/tsone';

const state = reactive({ count: 0 });
const doubleCount = computed(() => state.count * 2);

console.log(doubleCount.value);

readonly

import { reactive, readonly } from '@geektech/tsone';

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

stop

import { effect, reactive, stop } from '@geektech/tsone';

const state = reactive({ count: 0 });
const runner = effect(() => {
  console.log(`Count: ${state.count}`);
});

stop(runner);

ref

import { effect, ref } from '@geektech/tsone';

const count = ref(0);
effect(() => {
  console.log(count.value);
});

Example

import { computed, effect, reactive, readonly, ref, stop } from '@geektech/tsone';

const state = reactive({ count: 0 });
const countRef = ref(1);
const doubleCount = computed(() => state.count * 2 + countRef.value);
const runner = effect(() => {
  console.log(state.count, doubleCount.value);
});

const frozen = readonly(state);
console.log(frozen.count);
stop(runner);