fixup! feat(ivy): properly apply style="", [style], [style.foo] and […

…attr.style] bindings
angular · Jun 22, 2018 · daef3f8 · daef3f8
1 parent 49d1621
commit daef3f8
Show file tree

Hide file tree

Showing 3 changed files with 312 additions and 176 deletions.
diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts
@@ -24,7 +24,7 @@ import {ComponentDefInternal, ComponentTemplate, ComponentQuery, DirectiveDefInt
 import {RComment, RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
 import {isDifferent, stringify} from './util';
 import {ViewRef} from './view_ref';
-import {ElementStyleRecord, updateElementStyleMap, updateElementStyleProp, renderElementStyles} from './styling';
+import {StylingContext, initializeStylingContext, updateStyleMap as updateElementStyleMap, updateStyleProp as updateElementStyleProp, renderStyles as renderElementStyles} from './styling';
 
 /**
  * Directive (D) sets a property on all component instances using this constant as a key and the
@@ -1287,19 +1287,8 @@ export function elementClass<T>(index: number, value: T | NO_CHANGE): void {
  *   values that are passed in here will be applied to the element (if matched).
  */
 export function elementStyling<T>(index: number, styles?: string[]): void {
-  const hasData = styles && styles.length;
-  let initialStyles: {[key: string]: any}|null = null;
-  if (hasData) {
-    initialStyles = {};
-    for (let i = 0; i < styles !.length; i += 2) {
-      const prop = styles ![i];
-      const value = styles ![i + 1];
-      initialStyles[prop] = value;
-    }
-  }
-  viewData[index + HEADER_OFFSET] =
-      {initial: initialStyles, multi: null, single: null, updated: hasData};
-  if (hasData) {
+  viewData[index + HEADER_OFFSET] = initializeStylingContext(styles);
+  if (styles && styles.length) {
     elementStylingApply(index);
   }
 }
@@ -1319,11 +1308,9 @@ export function elementStyling<T>(index: number, styles?: string[]): void {
  *        index.)
  */
 export function elementStylingApply<T>(index: number): void {
-  const record: ElementStyleRecord|null = viewData[index + HEADER_OFFSET];
-  if (record) {
-    const lElement: LElementNode = load(index - 1);
-    renderElementStyles(lElement, record, renderer);
-  }
+  const stylingContext: StylingContext = viewData[index + HEADER_OFFSET] !;
+  const lElement: LElementNode = load(index - 1);
+  renderElementStyles(lElement, stylingContext, renderer);
 }
 
 /**
@@ -1354,7 +1341,7 @@ export function elementStyleProp<T>(
 export function elementStyleProp<T>(
     index: number, styleName: string, value: T | null,
     suffixOrSanitizer?: string | SanitizerFn): void {
-  const record: ElementStyleRecord = viewData[index + HEADER_OFFSET];
+  const stylingContext: StylingContext = viewData[index + HEADER_OFFSET] !;
   let valueToAdd: string|null = null;
   if (value) {
     valueToAdd =
@@ -1363,7 +1350,7 @@ export function elementStyleProp<T>(
       valueToAdd = valueToAdd + suffixOrSanitizer;
     }
   }
-  updateElementStyleProp(record !, styleName, valueToAdd);
+  updateElementStyleProp(stylingContext, styleName, valueToAdd);
 }
 
 /**
@@ -1385,7 +1372,8 @@ export function elementStyleProp<T>(
  *   are their corresponding values to set. If value is null, then the style is removed.
  */
 export function elementStyle<T>(index: number, value: {[styleName: string]: any} | null): void {
-  updateElementStyleMap(viewData[index + HEADER_OFFSET] !, value);
+  const stylingContext: StylingContext = viewData[index + HEADER_OFFSET] !;
+  updateElementStyleMap(stylingContext, value);
 }
 
 //////////////////////////