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 1/3] 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" }, From 1204c2b49efb9e1d249f2687b026346bbe1bb48f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mi=C5=A1ko=20Hevery?= Date: Fri, 25 Oct 2019 11:50:26 -0700 Subject: [PATCH 2/3] fixup! perf(ivy): apply static styles/classes directly to an element's style/className properties --- packages/core/src/render3/instructions/styling.ts | 4 +--- packages/core/src/render3/styling/bindings.ts | 2 +- packages/core/src/render3/util/styling_utils.ts | 3 ++- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/core/src/render3/instructions/styling.ts b/packages/core/src/render3/instructions/styling.ts index 8526a243ae551..8ce466f1f9a34 100644 --- a/packages/core/src/render3/instructions/styling.ts +++ b/packages/core/src/render3/instructions/styling.ts @@ -441,9 +441,7 @@ function normalizeStylingDirectiveInputValue( if (isClassBased) { value = concatString(initialValue, forceClassesAsString(bindingValue)); } else { - value = concatString( - initialValue, - forceStylesAsString(bindingValue as{[key: string]: any} | null | undefined, true), ';'); + value = concatString(initialValue, forceStylesAsString(bindingValue, true), ';'); } } return value; diff --git a/packages/core/src/render3/styling/bindings.ts b/packages/core/src/render3/styling/bindings.ts index 025a12bb17738..149d26ad996b3 100644 --- a/packages/core/src/render3/styling/bindings.ts +++ b/packages/core/src/render3/styling/bindings.ts @@ -752,7 +752,7 @@ export function writeStylingValueDirectly( } setClassName(renderer, element, valueToApply); } else { - valueToApply = forceStylesAsString(value as{[key: string]: any}, true); + valueToApply = forceStylesAsString(value, true); if (initialValue !== null) { valueToApply = initialValue + ';' + valueToApply; } diff --git a/packages/core/src/render3/util/styling_utils.ts b/packages/core/src/render3/util/styling_utils.ts index 1d6e3c9bcb353..8f8eb65b8582e 100644 --- a/packages/core/src/render3/util/styling_utils.ts +++ b/packages/core/src/render3/util/styling_utils.ts @@ -296,7 +296,8 @@ export function forceClassesAsString(classes: string | {[key: string]: any} | nu } export function forceStylesAsString( - styles: {[key: string]: any} | null | undefined, hyphenateProps: boolean): string { + styles: {[key: string]: any} | string | null | undefined, hyphenateProps: boolean): string { + if (typeof styles == 'string') return styles; let str = ''; if (styles) { const props = Object.keys(styles); From c018b5d39de47d7facac680f5763919a7cdfaf5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Fri, 25 Oct 2019 12:08:19 -0700 Subject: [PATCH 3/3] fixup! perf(ivy): apply static styles/classes directly to an element's style/className properties --- .../core/src/render3/instructions/element.ts | 4 +-- .../core/src/render3/instructions/shared.ts | 25 +++++++++++++------ .../cyclic_import/bundle.golden_symbols.json | 12 +++++++++ .../bundling/todo/bundle.golden_symbols.json | 3 +++ 4 files changed, 34 insertions(+), 10 deletions(-) diff --git a/packages/core/src/render3/instructions/element.ts b/packages/core/src/render3/instructions/element.ts index 114351d6ca4bc..18c99c35ff610 100644 --- a/packages/core/src/render3/instructions/element.ts +++ b/packages/core/src/render3/instructions/element.ts @@ -65,7 +65,7 @@ export function ɵɵelementStart( } if ((tNode.flags & TNodeFlags.hasInitialStyling) === TNodeFlags.hasInitialStyling) { - renderInitialStyling(renderer, native, tNode); + renderInitialStyling(renderer, native, tNode, false); } appendChild(native, tNode, lView); @@ -222,7 +222,7 @@ export function ɵɵelementHostAttrs(attrs: TAttributes) { // attribute values to the element. if (stylingNeedsToBeRendered) { const renderer = lView[RENDERER]; - renderInitialStyling(renderer, native, tNode); + renderInitialStyling(renderer, native, tNode, true); } } } diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts index f8f37c5c59c3c..03ddd89663b9d 100644 --- a/packages/core/src/render3/instructions/shared.ts +++ b/packages/core/src/render3/instructions/shared.ts @@ -31,7 +31,7 @@ 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 {writeStylingValueDirectly} from '../styling/bindings'; +import {renderStylingMap, writeStylingValueDirectly} from '../styling/bindings'; import {NO_CHANGE} from '../tokens'; import {isAnimationProp} from '../util/attrs_utils'; import {INTERPOLATION_DELIMITER, renderStringify, stringifyForError} from '../util/misc_utils'; @@ -1833,13 +1833,22 @@ export function textBindingInternal(lView: LView, index: number, value: string): * applied once the element is instantiated. This function applies each of the static * style and class entries to the element. */ -export function renderInitialStyling(renderer: Renderer3, native: RElement, tNode: TNode) { - if (tNode.classes) { - const classes = getInitialStylingValue(tNode.classes); - writeStylingValueDirectly(renderer, native, classes, true, null); +export function renderInitialStyling( + renderer: Renderer3, native: RElement, tNode: TNode, append: boolean) { + if (tNode.classes !== null) { + if (append) { + renderStylingMap(renderer, native, tNode.classes, true); + } else { + 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); + if (tNode.styles !== null) { + if (append) { + renderStylingMap(renderer, native, tNode.styles, false); + } else { + const styles = getInitialStylingValue(tNode.styles); + writeStylingValueDirectly(renderer, native, styles, false, null); + } } } 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 1afba77263cdd..1f169c4df8e57 100644 --- a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json +++ b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json @@ -107,6 +107,9 @@ { "name": "RENDERER_FACTORY" }, + { + "name": "RendererStyleFlags3" + }, { "name": "SANITIZER" }, @@ -578,6 +581,9 @@ { "name": "renderStringify" }, + { + "name": "renderStylingMap" + }, { "name": "renderView" }, @@ -605,6 +611,9 @@ { "name": "setBindingRoot" }, + { + "name": "setClass" + }, { "name": "setClassName" }, @@ -644,6 +653,9 @@ { "name": "setSelectedIndex" }, + { + "name": "setStyle" + }, { "name": "setStyleAttr" }, diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json index 176f911cda732..a82221c3f86e0 100644 --- a/packages/core/test/bundling/todo/bundle.golden_symbols.json +++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json @@ -1163,6 +1163,9 @@ { "name": "renderStringify" }, + { + "name": "renderStylingMap" + }, { "name": "renderView" },