@codebakery/origami - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="0.4.0"></a>
+# [0.4.0](https://github.com/hotforfeature/origami/compare/v0.3.0...v0.4.0) (2017-04-12)
+
+
+### Features
+
+* **events:** listen and notify Angular of object and array mutations ([95dedf3](https://github.com/hotforfeature/origami/commit/95dedf3)), closes [#9](https://github.com/hotforfeature/origami/issues/9)
+
+
+
 <a name="0.3.0"></a>
@@ -7,0 +17,0 @@ # [0.3.0](https://github.com/hotforfeature/origami/compare/v0.2.0...v0.3.0) (2017-04-11)

lib/events/polymer-property.js

@@ -19,13 +19,21 @@ export function PolymerProperty() {
             },
-            set: function (valueOrEvent) {
-                var newValue = unwrapPolymerEvent(valueOrEvent);
-                if (desc && desc.set) {
-                    desc.set(newValue);
+            set: function (event) {
+                if (event instanceof CustomEvent && event.detail.path) {
+                    // Object or Array mutation, we need to tell Angular that things have changed
+                    if (this.onPolymerChange && event instanceof CustomEvent) {
+                        this.onPolymerChange(propertyKey, value, event.detail);
+                    }
                 }
-                if (newValue !== value) {
-                    // Even if there is a setter, we still keep a copy to determine if a change happens
-                    value = newValue;
-                    if (this.onPolymerChange && valueOrEvent instanceof CustomEvent) {
-                        this.onPolymerChange(propertyKey, valueOrEvent, valueOrEvent.detail);
+                else {
+                    var newValue = unwrapPolymerEvent(event);
+                    if (desc && desc.set) {
+                        desc.set(newValue);
                     }
+                    if (newValue !== value) {
+                        // Even if there is a setter, we still keep a copy to determine if a change happens
+                        value = newValue;
+                        if (this.onPolymerChange && event instanceof CustomEvent) {
+                            this.onPolymerChange(propertyKey, event, event.detail);
+                        }
+                    }
                 }
@@ -32,0 +40,0 @@ }

lib/events/polymer-property.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"PolymerProperty":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"error","message":"Function call not supported","line":3,"character":9}},"unwrapPolymerEvent":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"PolymerProperty":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"error","message":"Function call not supported","line":3,"character":9}},"unwrapPolymerEvent":{"__symbolic":"function"}}}]
+[{"__symbolic":"module","version":3,"metadata":{"PolymerProperty":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"error","message":"Function call not supported","line":4,"character":9}},"unwrapPolymerEvent":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"PolymerProperty":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"error","message":"Function call not supported","line":4,"character":9}},"unwrapPolymerEvent":{"__symbolic":"function"}}}]

lib/events/polymer.directive.d.ts

@@ -7,3 +7,3 @@ import { ElementRef, OnInit } from '@angular/core';
     ngOnInit(): void;
-    private getNotifyProperties(properties);
+    private copyKeysFrom(from, to);
 }

lib/events/polymer.directive.js

@@ -12,11 +12,18 @@ import { Directive, ElementRef } from '@angular/core';
         if (klass) {
-            // Setup Polymer to Angular event mapping
-            var notify_1 = [];
-            notify_1 = notify_1.concat.apply(notify_1, this.getNotifyProperties(klass.prototype.properties || {}));
+            var properties_1 = {};
+            this.copyKeysFrom(klass.prototype.properties, properties_1);
             if (klass.prototype.behaviors) {
-                klass.prototype.behaviors.forEach(function (behavior) {
-                    notify_1 = notify_1.concat.apply(notify_1, _this.getNotifyProperties(behavior.properties || {}));
+                klass.prototype.behaviors.map(function (behavior) {
+                    return behavior.properties || [];
+                }).forEach(function (property) {
+                    _this.copyKeysFrom(property, properties_1);
                 });
             }
-            notify_1.forEach(function (property) {
+            // Listen for notify properties and Object/Array properties which may issue path changes
+            var changeable = Object.keys(properties_1).filter(function (propertyName) {
+                var property = properties_1[propertyName];
+                return property.notify || property === Object || property.type === Object ||
+                    property === Array || property.type === Array;
+            });
+            changeable.forEach(function (property) {
                 var eventName = window.Polymer.CaseMap.camelToDashCase(property) + "-changed";
@@ -31,5 +38,8 @@ _this.elementRef.nativeElement.addEventListener(eventName, function (event) {
     };
-    PolymerDirective.prototype.getNotifyProperties = function (properties) {
-        return Object.keys(properties).filter(function (property) {
-            return properties[property].notify;
+    PolymerDirective.prototype.copyKeysFrom = function (from, to) {
+        Object.keys(from || {}).forEach(function (key) {
+            if (key[0] !== '_') {
+                // Only copy public properties
+                to[key] = from[key];
+            }
         });
@@ -36,0 +46,0 @@ };

lib/events/polymer.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"PolymerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[polymer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"getNotifyProperties":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PolymerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[polymer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"getNotifyProperties":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"PolymerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[polymer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"copyKeysFrom":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PolymerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[polymer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"copyKeysFrom":[{"__symbolic":"method"}]}}}}]

lib/origami.d.ts

@@ -8,1 +8,3 @@ export * from './events/on-polymer-change';
 export * from './templates/polymer-template';
+export * from './util/customElements';
+export * from './util/Polymer';

lib/origami.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./events/on-polymer-change"},{"from":"./events/polymer-property"},{"from":"./events/polymer.directive"},{"from":"./forms/iron-control"},{"from":"./polymer.module"},{"from":"./style/custom-style.service"},{"from":"./templates/polymer-template"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./events/on-polymer-change"},{"from":"./events/polymer-property"},{"from":"./events/polymer.directive"},{"from":"./forms/iron-control"},{"from":"./polymer.module"},{"from":"./style/custom-style.service"},{"from":"./templates/polymer-template"}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./events/on-polymer-change"},{"from":"./events/polymer-property"},{"from":"./events/polymer.directive"},{"from":"./forms/iron-control"},{"from":"./polymer.module"},{"from":"./style/custom-style.service"},{"from":"./templates/polymer-template"},{"from":"./util/customElements"},{"from":"./util/Polymer"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./events/on-polymer-change"},{"from":"./events/polymer-property"},{"from":"./events/polymer.directive"},{"from":"./forms/iron-control"},{"from":"./polymer.module"},{"from":"./style/custom-style.service"},{"from":"./templates/polymer-template"},{"from":"./util/customElements"},{"from":"./util/Polymer"}]}]

lib/util/Polymer.d.ts

@@ -6,5 +6,38 @@ export declare namespace Polymer {
     }
+    type PathLike = string | Array<string | number>;
+    interface Path {
+        isPath(path: string): boolean;
+        root(path: string): string;
+        isAncestor(base: string, path: string): boolean;
+        isDescendant(base: string, path: string): boolean;
+        translate(base: string, newBase: string, path: string): string;
+        matches(base: string, path: string): boolean;
+        normalize(path: PathLike): string;
+        split(path: PathLike): string[];
+        get(root: any, path: PathLike, info?: any): any;
+        set(root: any, path: PathLike, info?: any): string;
+    }
+    interface Splice<T> {
+        index: number;
+        addedCount: number;
+        removed: T[];
+        object: T[];
+        type: 'splice';
+    }
+    interface PropertyEffects {
+        setProperties(props: Object): any;
+        notifySplices<T>(path: PathLike, splices: Array<Splice<T>>): any;
+        get(path: PathLike, root?: any): any;
+        set(path: PathLike, value: any, root?: any): any;
+        push<T>(path: PathLike, ...items: T[]): number;
+        pop(path: PathLike): any;
+        splice<T>(path: PathLike, start: number, deleteCount: number, ...items: T[]): T[];
+        shift(path: PathLike): any;
+        unshift<T>(path: PathLike, ...items: T[]): number;
+        notifyPath(path: PathLike, value?: any): any;
+    }
 }
 export interface Polymer {
     CaseMap: Polymer.CaseMap;
+    Path: Polymer.Path;
 }
@@ -11,0 +44,0 @@ declare global  {

package.json

 {
   "name": "@codebakery/origami",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Angular + Polymer",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -22,3 +22,3 @@ [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 - [OnPush Change Detection ✅](docs/change-detection.md)
-- Object/Array mutation detection ❌
+- [Object/Array mutation detection ✅](docs/object-array-mutation.md)
 - [CSS custom property/mixin support](docs/custom-style.md) ✅
@@ -25,0 +25,0 @@ - Ahead-of-Time Compilation ✅

No alert changes

Improved metrics

Total package byte prevSize

135196

increased by2.6%

Lines of code

1241

increased by4.46%

No dependency changes