Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "observer/observer"

Module with functions that emulate vue's 2.x reactivity mechanism.

Index

Type aliases

ObservedData

ObservedData<T>: {}

Transform functions on objects to properties with the return type of the function.

type dataType = {
 price: number,
 qty: number,
 total(): number
};

// The transformed type after using ObservedData<T>
type dataTypeAsObservedData = {
  price: number,
  qty: number,
  total: number
};

Type parameters

  • T

    Plain javascript object.

Type declaration

ReturnType

ReturnType<T>: T extends (...args: unknown[]) => infer R ? R : T

Gets the return type of a function.

Type parameters

  • T

    Any function definition.

Variables

Const ATTACHED_OBSERVABLE_KEY

ATTACHED_OBSERVABLE_KEY: "__observable__" = "__observable__"

Key used to attach an observable instance to an object.

Functions

defineReactiveProperty

  • defineReactiveProperty<T>(obj: Obj, key: string | number, observable: Observable<T>): void
  • Creates a reactive property on a specified object.

    For a property to be considered reactive it needs to be proxied with a getter/setter and also have an associated Observable instance.

    Reactive properties

    const obj = {};
    defineReactiveProperty(obj, 'number', new Observable(99));
    
    // Note that even though the value is proxied you can still access it as you normally access properties.
    console.log(obj.number) // output: 99
    obj.number = 105;
    console.log(obj.number) // output: 105

    Type parameters

    • T

      Any valid javascript value.

    Parameters

    • obj: Obj

      Object on which to create the reactive property.

    • key: string | number

      Key for the new property.

    • observable: Observable<T>

      Observable instance that stores the value of the reactive property.

    Returns void

extractObservableFromProperty

  • extractObservableFromProperty(object: Obj, key: string | number): Observable<unknown> | undefined
  • Extracts the Observable instance from a property on an object.

    This function will only work if the defineReactiveProperty method was used to define that property.

    Parameters

    • object: Obj

      Object where you have a reactive property.

    • key: string | number

      Key of the property that has an observable instance.

    Returns Observable<unknown> | undefined

observe

  • Takes a data object and recursively makes all its properties reactive.

    Computed Properties

    Function definitions within the data object are treated as computed property definitions.

    const observed = observe({
     price: 55,
     quantity: 10,
     total() {
       return this.price * this.quantity;
     }
    });
    
    console.log(observed); // output: { price: 55, quantity: 10, total: 550 }

    Type parameters

    • T: Obj

      Plain javascript object.

    Parameters

    • data: T

      Object to process.

    Returns ObservedData<T>

observeObject

  • observeObject<T>(data: T, observable?: Observable<T>): void
  • Iterate over a data object and make all its properties reactive.

    Type parameters

    • T: Obj

      Any object type: array, object, class etc.

    Parameters

    • data: T

      Data object.

    • Optional observable: Observable<T>

      Optional observable for the data object.

    Returns void

Generated using TypeDoc