perf(ivy): apply static styles/classes directly to an element's style…

…/className properties
angular · Oct 25, 2019 · 730ee6f · 730ee6f
1 parent e4e8dbd
commit 730ee6f
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 28 deletions.
diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts
@@ -31,10 +31,11 @@ import {BINDING_INDEX, CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIE
 import {assertNodeOfPossibleTypes} from '../node_assert';
 import {isNodeMatchingSelectorList} from '../node_selector_matcher';
 import {ActiveElementFlags, enterView, executeElementExitFn, getBindingsEnabled, getCheckNoChangesMode, getIsParent, getPreviousOrParentTNode, getSelectedIndex, hasActiveElementFlag, incrementActiveDirectiveId, leaveView, leaveViewProcessExit, setActiveHostElement, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setPreviousOrParentTNode, setSelectedIndex} from '../state';
-import {renderStylingMap} from '../styling/bindings';
+import {writeStylingValueDirectly} from '../styling/bindings';
 import {NO_CHANGE} from '../tokens';
 import {isAnimationProp} from '../util/attrs_utils';
 import {INTERPOLATION_DELIMITER, renderStringify, stringifyForError} from '../util/misc_utils';
+import {getInitialStylingValue} from '../util/styling_utils';
 import {getLViewParent} from '../util/view_traversal_utils';
 import {getComponentLViewByIndex, getNativeByIndex, getNativeByTNode, getTNode, isCreationMode, readPatchedLView, resetPreOrderHookFlags, unwrapRNode, viewAttachedToChangeDetector} from '../util/view_utils';
 
@@ -1833,6 +1834,12 @@ export function textBindingInternal(lView: LView, index: number, value: string):
  * style and class entries to the element.
  */
 export function renderInitialStyling(renderer: Renderer3, native: RElement, tNode: TNode) {
-  renderStylingMap(renderer, native, tNode.classes, true);
-  renderStylingMap(renderer, native, tNode.styles, false);
+  if (tNode.classes) {
+    const classes = getInitialStylingValue(tNode.classes);
+    writeStylingValueDirectly(renderer, native, classes, true, null);
+  }
+  if (tNode.styles) {
+    const styles = getInitialStylingValue(tNode.styles);
+    writeStylingValueDirectly(renderer, native, styles, false, null);
+  }
 }
diff --git a/packages/core/src/render3/styling/bindings.ts b/packages/core/src/render3/styling/bindings.ts
@@ -700,20 +700,10 @@ export function applyStylingMapDirectly(
     }
 
     if (writeToAttrDirectly) {
-      let valueToApply: string;
-      if (isClassBased) {
-        valueToApply = typeof value === 'string' ? value : objectToClassName(value);
-        if (initialValue !== null) {
-          valueToApply = concatString(initialValue, valueToApply, ' ');
-        }
-        setClassName(renderer, element, valueToApply);
-      } else {
-        valueToApply = forceStylesAsString(value as{[key: string]: any}, true);
-        if (initialValue !== null) {
-          valueToApply = initialValue + ';' + valueToApply;
-        }
-        setStyleAttr(renderer, element, valueToApply);
-      }
+      const initialValue =
+          hasInitial && !bindingValueContainsInitial ? getInitialStylingValue(context) : null;
+      const valueToApply =
+          writeStylingValueDirectly(renderer, element, value, isClassBased, initialValue);
       setValue(data, cachedValueIndex, valueToApply || null);
     } else {
       const applyFn = isClassBased ? setClass : setStyle;
@@ -751,6 +741,26 @@ export function applyStylingMapDirectly(
   }
 }
 
+export function writeStylingValueDirectly(
+    renderer: any, element: RElement, value: {[key: string]: any} | string | null,
+    isClassBased: boolean, initialValue: string | null): string {
+  let valueToApply: string;
+  if (isClassBased) {
+    valueToApply = typeof value === 'string' ? value : objectToClassName(value);
+    if (initialValue !== null) {
+      valueToApply = concatString(initialValue, valueToApply, ' ');
+    }
+    setClassName(renderer, element, valueToApply);
+  } else {
+    valueToApply = forceStylesAsString(value as{[key: string]: any}, true);
+    if (initialValue !== null) {
+      valueToApply = initialValue + ';' + valueToApply;
+    }
+    setStyleAttr(renderer, element, valueToApply);
+  }
+  return valueToApply;
+}
+
 /**
  * Applies the provided styling prop/value to the element directly (without context resolution).
  *

diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -107,9 +107,6 @@
   {
     "name": "RENDERER_FACTORY"
   },
-  {
-    "name": "RendererStyleFlags3"
-  },
   {
     "name": "SANITIZER"
   },
@@ -269,6 +266,9 @@
   {
     "name": "findDirectiveMatches"
   },
+  {
+    "name": "forceStylesAsString"
+  },
   {
     "name": "generateExpandoInstructionBlock"
   },
@@ -404,6 +404,9 @@
   {
     "name": "hasTagAndTypeMatch"
   },
+  {
+    "name": "hyphenate"
+  },
   {
     "name": "includeViewProviders"
   },
@@ -527,6 +530,9 @@
   {
     "name": "noSideEffects"
   },
+  {
+    "name": "objectToClassName"
+  },
   {
     "name": "postProcessBaseDirective"
   },
@@ -572,9 +578,6 @@
   {
     "name": "renderStringify"
   },
-  {
-    "name": "renderStylingMap"
-  },
   {
     "name": "renderView"
   },
@@ -603,7 +606,7 @@
     "name": "setBindingRoot"
   },
   {
-    "name": "setClass"
+    "name": "setClassName"
   },
   {
     "name": "setCurrentDirectiveDef"
@@ -642,7 +645,7 @@
     "name": "setSelectedIndex"
   },
   {
-    "name": "setStyle"
+    "name": "setStyleAttr"
   },
   {
     "name": "setUpAttributes"
@@ -668,6 +671,9 @@
   {
     "name": "viewAttachedToChangeDetector"
   },
+  {
+    "name": "writeStylingValueDirectly"
+  },
   {
     "name": "ɵɵdefineComponent"
   },

diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -593,6 +593,9 @@
   {
     "name": "flushStyling"
   },
+  {
+    "name": "forceStylesAsString"
+  },
   {
     "name": "forwardRef"
   },
@@ -851,6 +854,9 @@
   {
     "name": "hasValueChanged"
   },
+  {
+    "name": "hyphenate"
+  },
   {
     "name": "includeViewProviders"
   },
@@ -1079,6 +1085,9 @@
   {
     "name": "normalizeBitMaskValue"
   },
+  {
+    "name": "objectToClassName"
+  },
   {
     "name": "patchConfig"
   },
@@ -1154,9 +1163,6 @@
   {
     "name": "renderStringify"
   },
-  {
-    "name": "renderStylingMap"
-  },
   {
     "name": "renderView"
   },
@@ -1208,6 +1214,9 @@
   {
     "name": "setClass"
   },
+  {
+    "name": "setClassName"
+  },
   {
     "name": "setCurrentDirectiveDef"
   },
@@ -1262,6 +1271,9 @@
   {
     "name": "setStyle"
   },
+  {
+    "name": "setStyleAttr"
+  },
   {
     "name": "setUpAttributes"
   },
@@ -1340,6 +1352,9 @@
   {
     "name": "wrapListener"
   },
+  {
+    "name": "writeStylingValueDirectly"
+  },
   {
     "name": "ɵɵadvance"
   },