Skip to content

refactor(core): unify styling data format in attributes#39998

Closed
AndrewKushnir wants to merge 1 commit intoangular:mainfrom
AndrewKushnir:unify_class_attr
Closed

refactor(core): unify styling data format in attributes#39998
AndrewKushnir wants to merge 1 commit intoangular:mainfrom
AndrewKushnir:unify_class_attr

Conversation

@AndrewKushnir
Copy link
Contributor

Currently styling-related attributes (class and style) are represented differently depending on the node type.
Given the following template:

<div *ngIf="exp" title="abc" class="a b c" style="margin: 10px"></div>

For element node (that represent a <div>), this information is present in the parsed format (separated by
AttributeMarkers), such as:

["title", "abc", ${AttrMarker.Classes}, "a", "b", "c", ${AttrMarker.Styles}, "margin", "10px"]

When for the template node (that represents desugared version of structural directive, such as <ng-template [ngIf]>),
the class and style information would be present in the raw format:

["title", "abc", "class", "a b c", "style", "margin: 10px", ${AttrMarker.Template}, "ngIf"]

The same applies to the <ng-content class="a b c"> tags (raw class information is present there).

Such inconsistency requires extra logic at runtime to perform matching and also blocks potential future work to
deduplicate attributes shared between element nodes and inline template nodes.

This commit updates the logic to represent class and style attrs info consistently (in parsed format) for all node
types.

PR Type

What kind of change does this PR introduce?

  • Refactoring (no functional changes, no api changes)

Does this PR introduce a breaking change?

  • Yes
  • No

@AndrewKushnir AndrewKushnir added state: WIP refactoring Issue that involves refactoring or code-cleanup area: core Issues related to the framework runtime target: patch This PR is targeted for the next patch release area: compiler Issues related to `ngc`, Angular's template compiler labels Dec 7, 2020
@ngbot ngbot bot added this to the Backlog milestone Dec 7, 2020
@google-cla google-cla bot added the cla: yes label Dec 7, 2020
@ngbot ngbot bot modified the milestone: Backlog Dec 7, 2020
@AndrewKushnir AndrewKushnir changed the title refactor(core): unify styling format in attributes refactor(core): unify styling data format in attributes Dec 7, 2020
@AndrewKushnir
Copy link
Contributor Author

Presubmit.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the isProjectionMode not important information?
What was the scenario where the class attribute existed but it was not in projection mode?

@AndrewKushnir
Copy link
Contributor Author

Quick update after discussion with @petebacondarwin: this work is a pre-requisite to the large refactoring to avoid generating duplicate attributes for inline templates (there is a portion of attributes that can be shared between "template" and "element" nodes). While this change seems to be useful as is, we'd like to create a followup PR that would implement actual deduplication, so that we can perform additional measurements to estimate the improvement to the payload size (and check if there are any runtime perf concerns). Keeping this PR in a draft state for now. Thank you.

Currently styling-related attributes (`class` and `style`) are represented differently depending on the node type.
Given the following template:
```
<div *ngIf="exp" title="abc" class="a b c" style="margin: 10px"></div>
```
For element node (that represent a `<div>`), this information is present in the parsed format (separated by
`AttributeMarker`s), such as:
```
["title", "abc", ${AttrMarker.Classes}, "a", "b", "c", ${AttrMarker.Styles}, "margin", "10px"]
```
When for the template node (that represents desugared version of structural directive, such as
`<ng-template [ngIf]>`), the class and style information would be present in the raw format:
```
["title", "abc", "class", "a b c", "style", "margin: 10px", ${AttrMarker.Template}, "ngIf"]
```
The same applies to the `<ng-content class="a b c">` tags (raw class information is present there).

Such inconsistency requires extra logic at runtime to perform matching and also blocks potential future work to
deduplicate attributes shared between element nodes and inline template nodes.

This commit updates the logic to represent class and style attrs info consistently (in parsed format) for all node
types.
@pkozlowski-opensource
Copy link
Member

@AndrewKushnir it looks like the work on this PR stalled a bit so I'm going to close it for now. Feel free to re-open when you are ready to restart work on it.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area: compiler Issues related to `ngc`, Angular's template compiler area: core Issues related to the framework runtime cla: yes refactoring Issue that involves refactoring or code-cleanup state: WIP target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants