https://github.com/nickwinger/autoproperty

Reactive, non dirty checking Change-Detection for mutable objects
https://github.com/nickwinger/autoproperty

Last synced: about 1 month ago
JSON representation

Reactive, non dirty checking Change-Detection for mutable objects

• Host: GitHub
• URL: https://github.com/nickwinger/autoproperty
• Owner: nickwinger
• License: mit
• Created: 2016-05-13T06:21:47.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-15T05:54:17.000Z (over 7 years ago)
• Last Synced: 2024-11-02T15:07:25.100Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 38.1 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# autoproperty

Reactive, non dirty checking Change-Detection for mutable objects

## Problem

How to fast detect if a property of a class changed it's value ?

```typescript

    class Person {

        name: string;

    }

    var p = new Person();

    p.name = 'John';

    // There is no way we can get informed that the name has changed

```

## Example

Using typescript annotations, we automagically create getter and setter out of a normal property to detect changes in the setter and feed a subject which can be subscribed to.

```typescript

    import {autoproperty, NotifyPropertyChanged, PropertyChangedEventArgs, PropertyChangedEventArgsGeneric} from 'autoproperty';

    class Person extends NotifyPropertyChanged {

        @autoproperty

        name: string;

    }

    var p = new Person();

    p.name = 'John';

    p.$propertyChanged.subscribe((args: PropertyChangedEventArgs) => {

        console.log(args.propertyName + ' changed from ' + args.oldValue + ' to ' + args.newValue);

    });

```

## Under the hood

What has been done by the autoproperty annotation ?

This:

```typescript

    class Person extends NotifyPropertyChanged {

        @autoproperty

        name: string;

    }

```

gets transformed into:

```typescript

    class Person extends NotifyPropertyChanged {

        $name: string;

        get name(): string {

            return this.$name;

        }

        set name(newValue: string) {

            var oldValue = this.$name;

            this.$name = newValue;

            this.propertyChanged.next('name', oldValue, newValue);

        }

    }

```

Getter and setter and a "hidden" field are automagically created.

## Manually creating a setter that feeds the propertyChanged stream

If you already have a setter or want to manually create one and want the propertyChanged stream to notify just feed the

stream like this:

```typescript

    this.onPropertyChanged(, , );

```

Replacing keyName with the name of the setter, oldValue with the previous Values and newValue with the new value.

# Restrictions (and ToDo's)

* Resursive. An autoproperty cannot have itself as a property (endless loop of typescript annotation)

## Build and run tests

1. run `npm install` to install all dependencies

2. run `npm run tsc` to run the typescript compiler

3. run `npm run test` to run the jasmine tests