Aberdeen - v1.2.0
    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 derive) 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.
    • 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.

    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' });
    $(() => console.log(state.message)); // Subscribes to message
    setTimeout(() => state.message = 'World', 1000); // Triggers the observing function
    setTimeout(() => state.count++, 2000); // Triggers nothing

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

    const name = proxy('Aberdeen');
    $(() => console.log(name.value)); // Subscribes to value
    setTimeout(() => name.value = 'UI', 2000); // Triggers the observing 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));
    $(() => console.log(''+graph));
    setTimeout(() => graph.grow(), 2000);
    setTimeout(() => graph.grow(), 4000);

    • Type Parameters

      • T extends unknown

      Parameters

      • target: Promise<T>

      Returns PromiseProxy<T>

    • Type Parameters

      • T extends unknown

      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 unknown

      Parameters

      • target: T

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

    Settings

    Member Visibility