From 632fea093e5db966c596c741a12ed1dff177d885 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Thu, 21 Sep 2023 18:32:25 -0300 Subject: [PATCH 1/3] perf: improve attribute selectors by adding single listeners --- packages/core/ui/styling/style-scope.ts | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts index a71ff6f9ec..c933383db6 100644 --- a/packages/core/ui/styling/style-scope.ts +++ b/packages/core/ui/styling/style-scope.ts @@ -22,6 +22,7 @@ import * as capm from './css-animation-parser'; import { sanitizeModuleName } from '../../utils/common'; import { resolveModuleName } from '../../module-name-resolver'; import { cleanupImportantFlags } from './css-utils'; +import { Observable, PropertyChangeData } from '../../data/observable'; let cssAnimationParserModule: typeof capm; function ensureCssAnimationParserModule() { @@ -418,6 +419,8 @@ export class CssState { _matchInvalid: boolean; _playsKeyframeAnimations: boolean; + private _dynamicUpdateListenerMap: Map void> = new Map(); + constructor(private viewRef: WeakRef) { this._onDynamicStateChangeHandler = () => this.updateDynamicState(); } @@ -650,9 +653,14 @@ export class CssState { const changeMap = this._match.changeMap; changeMap.forEach((changes, view) => { if (changes.attributes) { - changes.attributes.forEach((attribute) => { - view.addEventListener(attribute + 'Change', this._onDynamicStateChangeHandler); - }); + const attributes = changes.attributes; + const listener = (args: PropertyChangeData) => { + if (attributes.has(args.propertyName)) { + this._onDynamicStateChangeHandler(); + } + }; + this._dynamicUpdateListenerMap.set(view, listener); + view.addEventListener(Observable.propertyChangeEvent, listener); } if (changes.pseudoClasses) { changes.pseudoClasses.forEach((pseudoClass) => { @@ -669,10 +677,8 @@ export class CssState { private unsubscribeFromDynamicUpdates(): void { this._appliedChangeMap.forEach((changes, view) => { - if (changes.attributes) { - changes.attributes.forEach((attribute) => { - view.removeEventListener(attribute + 'Change', this._onDynamicStateChangeHandler); - }); + if (this._dynamicUpdateListenerMap.has(view)) { + view.removeEventListener(Observable.propertyChangeEvent, this._dynamicUpdateListenerMap.get(view)); } if (changes.pseudoClasses) { changes.pseudoClasses.forEach((pseudoClass) => { @@ -684,6 +690,7 @@ export class CssState { }); } }); + this._dynamicUpdateListenerMap.clear(); this._appliedChangeMap = CssState.emptyChangeMap; } From 84fd5589c389d737a3f8e18f469ad418e995f662 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Thu, 21 Sep 2023 18:41:36 -0300 Subject: [PATCH 2/3] feat: add a way to globally ignore CSS attributes --- packages/core/css/system-classes.ts | 1 + packages/core/ui/styling/css-selector.ts | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/core/css/system-classes.ts b/packages/core/css/system-classes.ts index 3c1edadcb9..a40e6a6607 100644 --- a/packages/core/css/system-classes.ts +++ b/packages/core/css/system-classes.ts @@ -6,6 +6,7 @@ export namespace CSSUtils { export const CLASS_PREFIX = 'ns-'; export const MODAL_ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${MODAL}`; export const ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${ROOT}`; + export const IgnoredCssDynamicAttributeTracking = new Set(); export function getSystemCssClasses(): string[] { return cssClasses; diff --git a/packages/core/ui/styling/css-selector.ts b/packages/core/ui/styling/css-selector.ts index bccd3971dc..580b8b0df6 100644 --- a/packages/core/ui/styling/css-selector.ts +++ b/packages/core/ui/styling/css-selector.ts @@ -4,6 +4,7 @@ import { isNullOrUndefined } from '../../utils/types'; import * as ReworkCSS from '../../css'; import { Combinator as ICombinator, SimpleSelectorSequence as ISimpleSelectorSequence, Selector as ISelector, SimpleSelector as ISimpleSelector, parseSelector } from '../../css/parser'; +import { CSSUtils } from '../../css/system-classes'; /** * An interface describing the shape of a type on which the selectors may apply. @@ -675,6 +676,9 @@ export class SelectorsMatch implements ChangeAccumulator { public selectors: SelectorCore[]; public addAttribute(node: T, attribute: string): void { + if (CSSUtils.IgnoredCssDynamicAttributeTracking.has(attribute)) { + return; + } const deps: Changes = this.properties(node); if (!deps.attributes) { deps.attributes = new Set(); From 116dd6b2e1e4bc73420f74836dabe9c2dc2230ef Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Fri, 26 Apr 2024 11:41:36 -0700 Subject: [PATCH 3/3] release: 8.8.0-alpha.0 --- packages/core/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index 4137a43172..58fd232a69 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@nativescript/core", - "version": "8.7.3", + "version": "8.8.0-alpha.0", "description": "A JavaScript library providing an easy to use api for interacting with iOS and Android platform APIs.", "main": "index", "types": "index.d.ts",