Aberdeen - v1.0.3
    Preparing search index...

    Function proxy

    Creates a reactive proxy around the given data.

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

    • Plain objects and arrays 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.

    Use unproxy to get the original underlying data back.

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

    A reactive proxy wrapping the target data.

    The type of the data being proxied.

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

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

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

    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 = proxy(new Widget('Graph', 200, 100));
    observe(() => console.log(''+graph));
    setTimeout(() => graph.grow(), 2000);
    setTimeout(() => graph.grow(), 4000);

    • Type Parameters

      • T extends DatumType

      Parameters

      • target: T[]

      Returns (
          T extends number
              ? number
              : T extends string ? string : T extends boolean ? boolean : T
      )[]

    • Type Parameters

      • T extends object

      Parameters

      • target: T

      Returns T

    • Type Parameters

      • T extends DatumType

      Parameters

      • target: T

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

    Settings

    Member Visibility