proxy

Creates a reactive proxy around the given data.

Reading properties from the returned proxy within a reactive scope (like one created by A or derive) establishes a subscription. Modifying properties through the proxy will notify subscribed scopes, causing them to re-execute.

• Plain objects, arrays, Maps, and Sets are wrapped in a standard JavaScript Proxy that intercepts property access and mutations, but otherwise works like the underlying data.
• Primitives (string, number, boolean, null, undefined) are wrapped in an object { value: T } which is then proxied. Access the primitive via the .value property.
• Promises are represented by proxied objects { busy: boolean, value?: T, error?: any }. Initially, busy is true. When the promise resolves, value is set and busy is set to false. If the promise is rejected, error is set and busy is also set to false.

Use unproxy to get the original underlying data back. By convention in the examples below, local variables that hold proxied values are prefixed with $.

Param

target

The object, array, Map, Set, or primitive value to make reactive.

Template

T

The type of the data being proxied.

Examples

Object

const $state = A.proxy({ count: 0, message: 'Hello' });
A(() => console.log($state.message)); // Subscribes to message
setTimeout(() => $state.message = 'World', 1000); // Triggers the observing function
setTimeout(() => $state.count++, 2000); // Triggers nothing

Array

const $items = A.proxy(['a', 'b']);
A(() => console.log($items.length)); // Subscribes to length
setTimeout(() => $items.push('c'), 2000); // Triggers the observing function

Primitive

const $name = A.proxy('Aberdeen');
A(() => console.log($name.value)); // Subscribes to value
setTimeout(() => $name.value = 'UI', 2000); // Triggers the observing function

Set

const $tags = A.proxy(new Set(['ui', 'tiny']));
A(() => console.log($tags.has('ui'), $tags.size));
setTimeout(() => $tags.add('fast'), 1000);

Class instance

class Widget {
  constructor(public name: string, public width: number, public height: number) {}
  grow() { this.width *= 2; }
  toString() { return `${this.name}Widget (${this.width}x${this.height})`; }
}
let $graph: Widget = A.proxy(new Widget('Graph', 200, 100));
A(() => console.log(''+$graph));
setTimeout(() => $graph.grow(), 2000);
setTimeout(() => $graph.grow(), 4000);

Call Signature

proxy<T>(target): PromiseProxy<T>

Defined in: aberdeen.ts:1666

Type Parameters

T

T extends unknown

Parameters

target

Promise<T>

Returns

PromiseProxy<T>

Call Signature

proxy<T>(target): T extends number ? number : T extends string ? string : T extends boolean ? boolean : T[]

Defined in: aberdeen.ts:1667

Type Parameters

T

T extends unknown

Parameters

target

T[]

Returns

T extends number ? number : T extends string ? string : T extends boolean ? boolean : T[]

Call Signature

proxy<T>(target): T

Defined in: aberdeen.ts:1668

Type Parameters

T

T extends object

Parameters

target

T

Returns

T

Call Signature

proxy<T>(target): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>

Defined in: aberdeen.ts:1669

Type Parameters

T

T extends unknown

Parameters

target

T

Returns

ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>