Revert: "feat(ivy): convert [ngStyle] and [ngClass] to use ivy styling bindings" (#34616)

This change reverts https://github.com/angular/angular/pull/28711
NOTE: This change deletes code and creates a BROKEN SHA. If reverting this SHA needs to be reverted with the next SHA to get back into a valid state.

The change removes the fact that `NgStyle`/`NgClass` is special and colaborates with the `[style]`/`[class]` to merge its styles. By reverting to old behavior we have better backwards compatiblity since it is no longer treated special and simply overwrites the styles (same as VE)

PR Close #34616
This commit is contained in:
Miško Hevery
2020-01-03 15:30:40 -08:00
parent 4e3eb25edc
commit 36268a7f4c
12 changed files with 172 additions and 1014 deletions

View File

@ -1,123 +0,0 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {StylingDiffer, StylingDifferOptions} from '@angular/common/src/directives/styling_differ';
describe('StylingDiffer', () => {
it('should create a key/value object of values from a string', () => {
const d = new StylingDiffer(
'ngClass', StylingDifferOptions.ForceAsMap | StylingDifferOptions.AllowStringValue);
expect(d.value).toEqual(null);
d.setInput('one two');
expect(d.value).toEqual({one: true, two: true});
d.setInput('three');
expect(d.value).toEqual({three: true});
});
describe('setInput', () => {
it('should not emit that a value has changed if a new non-collection value was not set', () => {
const d = new StylingDiffer(
'ngClass', StylingDifferOptions.ForceAsMap | StylingDifferOptions.AllowStringValue);
expect(d.value).toEqual(null);
d.setInput('one two');
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({one: true, two: true});
expect(d.updateValue()).toBeFalsy();
expect(d.value).toEqual({one: true, two: true});
d.setInput('three');
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({three: true});
expect(d.updateValue()).toBeFalsy();
expect(d.value).toEqual({three: true});
d.setInput(null);
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual(null);
expect(d.updateValue()).toBeFalsy();
expect(d.value).toEqual(null);
});
});
describe('updateValue', () => {
it('should update the differ value if the contents of a input StringMap change', () => {
const d = new StylingDiffer('ngClass', StylingDifferOptions.ForceAsMap);
const myMap: {[key: string]: true} = {};
myMap['abc'] = true;
d.setInput(myMap);
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({abc: true});
expect(d.updateValue()).toBeFalsy();
myMap['def'] = true;
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({abc: true, def: true});
expect(d.updateValue()).toBeFalsy();
delete myMap['abc'];
delete myMap['def'];
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({});
expect(d.updateValue()).toBeFalsy();
});
it('should update the differ value if the contents of an input Array change', () => {
const d = new StylingDiffer('ngClass', StylingDifferOptions.ForceAsMap);
const myArray: string[] = [];
myArray.push('abc');
d.setInput(myArray);
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({abc: true});
expect(d.updateValue()).toBeFalsy();
myArray.push('def');
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({abc: true, def: true});
expect(d.updateValue()).toBeFalsy();
myArray.length = 0;
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({});
expect(d.updateValue()).toBeFalsy();
});
it('should update the differ value if the contents of an input Set change', () => {
const d = new StylingDiffer('ngClass', StylingDifferOptions.ForceAsMap);
const mySet = new Set<string>();
mySet.add('abc');
d.setInput(mySet);
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({abc: true});
expect(d.updateValue()).toBeFalsy();
mySet.add('def');
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({abc: true, def: true});
expect(d.updateValue()).toBeFalsy();
mySet.clear();
expect(d.updateValue()).toBeTruthy();
expect(d.value).toEqual({});
expect(d.updateValue()).toBeFalsy();
});
});
});