From 730ee6f931791438f3b9114d6c160d2242089e44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 23 Oct 2019 12:58:20 -0700 Subject: [PATCH] perf(ivy): apply static styles/classes directly to an element's style/className properties --- .../core/src/render3/instructions/shared.ts | 13 +++++-- packages/core/src/render3/styling/bindings.ts | 38 ++++++++++++------- .../cyclic_import/bundle.golden_symbols.json | 22 +++++++---- .../bundling/todo/bundle.golden_symbols.json | 21 ++++++++-- 4 files changed, 66 insertions(+), 28 deletions(-) diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts index 0d10dccf31ca7..f8f37c5c59c3c 100644 --- 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 index 0ce5ae6084770..025a12bb17738 100644 --- 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 index 3c63b957fd6bb..1afba77263cdd 100644 --- 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 index 3a2ba04028dbd..176f911cda732 100644 --- 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" },