perf(ivy): chain styling instructions #33837

crisbeto · 2019-11-15T00:02:18Z

Adds support for chaining of styleProp, classProp and stylePropInterpolateX instructions whenever possible which should help generate less code. Note that one complication here is for stylePropInterpolateX instructions where we have to break into multiple chains if there are other styling instructions inbetween the interpolations which helps maintain the execution order.

packages/compiler/src/render3/view/compiler.ts

packages/compiler/src/render3/view/styling_builder.ts

matsko · 2019-11-15T19:13:56Z

packages/compiler/src/render3/view/styling_builder.ts

@@ -25,10 +24,14 @@ const IMPORTANT_FLAG = '!important';
 * A styling expression summary that is to be processed by the compiler
 */
 export interface StylingInstruction {


Since we're only using one property on this interface, why not just return a array of StylingInstructionCall instances?

It's set up like this so that it's easier to group calls to the same instruction together. If we wanted to change it, we'd have to do something like StylingInstructionCall[][] instead, but that would mean looping through all the calls when we're trying to figure out whether to chain them.

ah I see. I missed the reference member. This is fine.

matsko · 2019-11-15T19:15:11Z

packages/core/src/render3/instructions/styling.ts

@@ -133,7 +135,7 @@ export function stylePropInternal(
 *
 * @codeGenApi
 */
-export function ɵɵclassProp(className: string, value: boolean | null): void {
+export function ɵɵclassProp(className: string, value: boolean | null): TsickleIssue1009 {


Add a comment explaining the return value and why it's an instance of TsickleIssue1009

Isn't this the point of the TsickleIssue1009 type in the first place? Also Andrew mentioned that this isn't an issue anymore so as soon as these changes land I'll clean out all the usages of the TsickleIssue1009 type.

packages/compiler/src/render3/view/template.ts

crisbeto · 2019-11-18T18:04:34Z

The feedback has been addressed @matsko.

kara

LGTM aside from typos. Note that we should be careful with the G3 presubmit for this because we are changing binding order in some cases, which could break some G3 targets.

packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts

matsko · 2019-11-18T19:02:39Z

packages/compiler/src/render3/view/styling_builder.ts

@@ -25,10 +24,14 @@ const IMPORTANT_FLAG = '!important';
 * A styling expression summary that is to be processed by the compiler
 */
 export interface StylingInstruction {


ah I see. I missed the reference member. This is fine.

Adds support for chaining of `styleProp`, `classProp` and `stylePropInterpolateX` instructions whenever possible which should help generate less code. Note that one complication here is for `stylePropInterpolateX` instructions where we have to break into multiple chains if there are other styling instructions inbetween the interpolations which helps maintain the execution order.

matsko · 2019-11-18T19:41:45Z

presubmit = http://test/OCL:281116837:BASE:281116883:1574105974370:89ff78f9

ivy presubmit = https://test.corp.google.com/ui#id=OCL:281116837:BASE:281117274:1574106065978:3e19703d

ngbot · 2019-11-19T18:03:08Z

I see that you just added the PR action: merge label, but the following checks are still failing:
status "google3" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

Adds support for chaining of `styleProp`, `classProp` and `stylePropInterpolateX` instructions whenever possible which should help generate less code. Note that one complication here is for `stylePropInterpolateX` instructions where we have to break into multiple chains if there are other styling instructions inbetween the interpolations which helps maintain the execution order. PR Close angular#33837

Adds support for chaining of `styleProp`, `classProp` and `stylePropInterpolateX` instructions whenever possible which should help generate less code. Note that one complication here is for `stylePropInterpolateX` instructions where we have to break into multiple chains if there are other styling instructions inbetween the interpolations which helps maintain the execution order. PR Close #33837 PR Close #34340

angular-automatic-lock-bot · 2019-12-20T16:05:07Z

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.}

googlebot added the cla: yes label Nov 15, 2019

crisbeto force-pushed the styling-instruction-chain branch 3 times, most recently from b2de2d6 to 4de440d Compare November 15, 2019 01:07

crisbeto marked this pull request as ready for review November 15, 2019 01:27

crisbeto requested review from a team as code owners November 15, 2019 01:27

crisbeto added comp: ivy action: review The PR is still awaiting reviews from at least one requested reviewer target: major This PR is targeted for the next major release labels Nov 15, 2019

ngbot bot added this to the needsTriage milestone Nov 15, 2019

mhevery approved these changes Nov 15, 2019

View reviewed changes

matsko suggested changes Nov 15, 2019

View reviewed changes

crisbeto force-pushed the styling-instruction-chain branch from 4de440d to 0ae1352 Compare November 18, 2019 18:04

kara approved these changes Nov 18, 2019

View reviewed changes

packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts Outdated Show resolved Hide resolved

packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts Outdated Show resolved Hide resolved

matsko approved these changes Nov 18, 2019

View reviewed changes

crisbeto force-pushed the styling-instruction-chain branch from 0ae1352 to caa2a7d Compare November 18, 2019 19:13

kara added action: presubmit The PR is in need of a google3 presubmit and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Nov 18, 2019

matsko added action: merge The PR is ready for merge by the caretaker and removed action: presubmit The PR is in need of a google3 presubmit labels Nov 19, 2019

alxhub closed this in 8a052dc Nov 19, 2019

AndrewKushnir mentioned this pull request Dec 11, 2019

Cherry-picking commits from master to patch (9.0.x) #34340

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(ivy): chain styling instructions #33837

perf(ivy): chain styling instructions #33837

crisbeto commented Nov 15, 2019

matsko Nov 15, 2019

crisbeto Nov 18, 2019

matsko Nov 18, 2019

matsko Nov 15, 2019

crisbeto Nov 18, 2019

crisbeto commented Nov 18, 2019

kara left a comment

matsko Nov 18, 2019

matsko commented Nov 18, 2019

ngbot bot commented Nov 19, 2019

angular-automatic-lock-bot bot commented Dec 20, 2019

perf(ivy): chain styling instructions #33837

perf(ivy): chain styling instructions #33837

Conversation

crisbeto commented Nov 15, 2019

matsko Nov 15, 2019

Choose a reason for hiding this comment

crisbeto Nov 18, 2019

Choose a reason for hiding this comment

matsko Nov 18, 2019

Choose a reason for hiding this comment

matsko Nov 15, 2019

Choose a reason for hiding this comment

crisbeto Nov 18, 2019

Choose a reason for hiding this comment

crisbeto commented Nov 18, 2019

kara left a comment

Choose a reason for hiding this comment

matsko Nov 18, 2019

Choose a reason for hiding this comment

matsko commented Nov 18, 2019

ngbot bot commented Nov 19, 2019

angular-automatic-lock-bot bot commented Dec 20, 2019