fix(animations): replace copy of query selector node-list from "spread" to "for"

[basherr]

The animation driver fails to query a large number of query selectors. Limitation varies across all browsers.

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

Issue Number: #38551

What is the new behavior?

Spread syntax(...) exceeds stake size in browsers. The following workbench demonstrates the limitation both in chrome and firefox:

https://jsbench.me/r1khehfd20/1

As per @AleksanderBodurri workbench example, the performance increases slightly with for loop compared to the rest:

https://jsbench.me/grkhenmtkb/1

Does this PR introduce a breaking change?

• Yes
• No

Other information

Fixes #38551

[basherr]

@petebacondarwin Would you please just let me know why are circle ci tests failing?

[petebacondarwin]

@basherr - it looks like the CI is being run under your account rather than Angular's. Did you turn on CircleCI integration for your own fork? I suggest turning that off since it might be blocking the normal Angular CI running?

[basherr]

@basherr - it looks like the CI is being run under your account rather than Angular's. Did you turn on CircleCI integration for your own fork? I suggest turning that off since it might be blocking the normal Angular CI running?

Is there a way to re-run the tests? Just turned off CircleCi on my fork. Thanks

[JoostK]

@basherr - it looks like the CI is being run under your account rather than Angular's. Did you turn on CircleCI integration for your own fork? I suggest turning that off since it might be blocking the normal Angular CI running?

Is there a way to re-run the tests? Just turned off CircleCi on my fork. Thanks

The CI run is failing because the commits need to be rebased on top of latest master. The instructions are provided in the CI job:

        CircleCI config on master has been modified since commit 6d13473,
        which this PR is based on.

        Please rebase the PR on master after fetching from upstream.

        Rebase instructions for PR Author, please run the following commands:

          git fetch upstream master;
          git checkout fix-animation-driver-query;
          git rebase upstream/master;
          git push --force-with-lease;

In this case, you'll also want to squash all commits into a single one, so you'll want to run an interactive rebase and mark all commits but the first as squash.

[google-cla]

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

[AndrewKushnir]

Hi @basherr,

Could you please squash all commits in this PR and update commit message (git commit --amend)?

Here is my proposal (based on the comments in the code):

fix(animations): replace copy of query selector node-list from "spread" to "for"

For element queries that return sufficiently large NodeList objects, using spread syntax
to populate the results array causes a RangeError due to the call stack limit being reached.
This commit updates the code to use regular "for" loop instead.

Fixes #38551.

Thank you.

[basherr]

@AndrewKushnir The build fails due to the commit message body being too long. What about the following only?

fix(animations): replace copy of query selector node-list from "spread" to "for"

The spread syntax fails to copy a sufficiently large number of Nodelist due to callstack limit being reached. 

[petebacondarwin]

@basherr - it is only the length of "each line" that must be under 120 chars I suspect that you put the whole body in a single line? Try splitting the body into multiple lines like in @AndrewKushnir's example.

[petebacondarwin]

Also there are still 2 commits in this PR. Can you squash them into one?

[basherr]

@AndrewKushnir @petebacondarwin All set! thanks for your help. However, the reviewers seem too much occupied.

[mhevery]

presubmit

[mhevery]

reviewed-for: global-approvers

[mhevery]

reviewed-for: global-approvers

[angular-automatic-lock-bot]

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