This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    rxjs-observable-object
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    RxJS Observable Object

    Build Status

    A library for creating observable objects using RxJS 5 and window.Proxy objects (see availability at https://caniuse.com/#search=Proxy). Works with both RxJS 5.4 and RxJS 5.5 (lettable operators).

    Check out the live playground: https://jsfiddle.net/7jofvccb/1/

    Installation

    Install via NPM.

    npm i --save rxjs-observable-object

    Usage

    The intended way of creating proxies is via the ObservableObject class.

    import { ObservableObject } from 'rxjs-observable-object';
     
    // create an ObservableObject from an empty object `{}` 
    const proxied = new ObservableObject();
    // The same as: new ObservableObject({});
     
    // Create ObservableObject from an existing object
    const obj = { a: 1, b: 2, c: 3 };
    const proxied = new ObservableObject(obj);

    Each ObservableObject consists of the proxy object (proxy property) and the map of events (events property).

    import { ObservableObject } from 'rxjs-observable-object';
     
    const proxied = new ObservableObject();
    const events = proxied.events;
    const proxy = proxied.proxy;
     
    // ... or shorter
    const { events, proxy } = new ObservableObject();

    If you pass the optional initializing object with ObservableObject(object); the object will be used as the storage backend for window.Proxy. To properly trigger events we need to perform all operations on the proxied.proxy object instead of the original one.

    The underlying proxy doesn't make difference among the backend objects so ObservableObject can be used to create observable arrays (or any other objects) as well. By default ObservableObject uses {} when no object is set.

    To create an observable array we need to use an array as the initializing object object:

    const proxied = ObservableObject.create([]);
    const events = proxied.events;
    const array = proxied.proxy as Array<any>;

    See more examples with arrays bellow.

    API

    Observable proxy for wrapping any object.

    ObservableObject<T>(objectT = {}, proxyMethods = false)

    Observable proxy for wrapping functions.

    ObservableFunction<F extends Function>(fnF)

    Examples

    Object

    Observe events when getting an object property:

    import { ObservableObject, GetEvent } from 'rxjs-observable-object';
     
    const proxied = new ObservableObject();
    const events = proxied.events;
    const proxy = proxied.proxy;
     
    events.onGet.subscribe((e: GetEvent) => {
      console.log(e);
    });
     
    proxy['a'] = 1;
    proxy['b'] = 2;
    proxy['c'] = 3;
     
    const _ = proxy['b'];
     
    // prints:
    // { property: 'b', value: 2, target: { a: 1, b: 2, c: 3 } }

    See demos: demo/ts/demo_01.ts, demo/demo_01.js and jsfiddle.net/x49qx05m

    Observe events when setting/overriding an object property:

    import { ObservableObject } from 'rxjs-observable-object';
     
    const { proxy: object, events } = new ObservableObject();
     
    events.onSet.subscribe(console.log);
     
    object['a'] = 1;
    object['b'] = 2;
    object['a'] = 42;
     
    // Prints the following:
    // { property: 'a', oldValue: undefined, newValue: 1, target: { a: 1 } }
    // { property: 'b', oldValue: undefined, newValue: 2, target: { a: 1, b: 2 } }
    // { property: 'a', oldValue: 1, newValue: 42, target: { a: 42, b: 2 } }

    See demo: demo/demo_02.js and jsfiddle.net/7jofvccb

    Observing changes on an already existing object:

    import { ObservableObject } from 'rxjs-observable-object';
     
    const object = {
      'a': 1,
      'b': 2,
      'c': 3,
    };
     
    const { proxy: object, events } = new ObservableObject(object);
     
    events.onSet.subscribe(console.log);
     
    // Note that we have to use `proxy` instead of `object`.
    // Modifying properties on `object` won't trigger the event.
    object['b'] = 42;
     
    // Prints the following:
    // { property: 'b', oldValue: 2, newValue: 42, target: { a: 1, b: 42, c: 3 } }

    See demo: demo/demo_03.js

    Array

    Observing array length changes:

    import { ObservableObject, SetEvent } from 'rxjs-observable-object';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/distinctUntilChanged';
    // Works with RxJS 5.5 and lettable operators as well
     
    const { proxy: array, events } = new ObservableObject([]);
     
    events.onSet
      .map((e: SetEvent) => e.target.length)
      .distinctUntilChanged()
      .subscribe((length: number) => {
        console.log(length);
      });
     
    array.push('a', 'b', 'c');
    array.splice(1, 2); // remove two items
     
    // prints:
    // 1
    // 2
    // 3
    // 1

    See demos: demo/ts/demo_04.ts, demo/demo_04.js and jsfiddle.net/71cvcbfu

    Observing setters/getters works the same as with objects.

    Function

    Functions can be proxied as well via the ObservableFunction class. The onApply event is triggered when invoking the proxied function.

    import { ObservableFunction, ApplyEvent } from 'rxjs-observable-object';
    import 'rxjs/add/operator/take';
     
    function func(n: number) {
      return 2 * n;
    }
     
    const { proxy, events } = new ObservableFunction(func);
     
    events.onApply.take(1).subscribe((e: ApplyEvent) => {
      console.log(e);
    });
     
    // We need to invoke the proxied function, not the  
    proxy(42);
     
    // Prints the following:
    // { thisArg: undefined, argumentsList: [ 42 ], result: 84, target: [Function: func] }

    See demos: demo/ts/demo_05.ts, demo/demo_05.js and jsfiddle.net/8zs654db

    Tests

    Keywords

    none

    Install

    npm i rxjs-observable-object

    DownloadsWeekly Downloads

    10

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    46 kB

    Total Files

    18

    Last publish

    Collaborators

    • martinsik