feat(core): add support for i18n hydration by devknoll · Pull Request #54823 · angular/angular

devknoll · 2024-03-11T18:18:35Z

Add support for hydrating i18n blocks. This is accomplished by serializing information about selected ICU cases for a block during server-side rendering.

During hydration, this data is read and is used to traverse both an AST of the translated message and the DOM, in parallel, to map each LView with an RNode.

Finally, this mapping is used while nodes are being created (either via i18n or their respective instructions) to locate existing nodes.

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/angular/angular/blob/main/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: N/A

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

AndrewKushnir

@devknoll thanks for the PR, the change looks very good 👍 I did a first review pass and left some comments. Please let me know once the feedback is addressed, I will do another pass. Thank you.

packages/core/src/hydration/annotate.ts

packages/core/src/hydration/api.ts

packages/core/src/render3/i18n/i18n_hydration.ts

packages/core/src/hydration/interfaces.ts

packages/core/src/render3/i18n/i18n_apply.ts

pschuler21 · 2024-03-13T09:25:26Z

Very much looking forward to this being merged

packages/core/src/hydration/i18n.ts

AndrewKushnir

@devknoll thanks for addressing the feedback! 👍

I've left a few more comments and will do another pass on the main algorithm tomorrow.

packages/core/src/hydration/api.ts

packages/core/src/hydration/annotate.ts

packages/core/src/hydration/i18n.ts

AndrewKushnir

@devknoll Thanks for the update, I did another pass over the main logic and proposed a few changes.

packages/core/src/hydration/i18n.ts

AndrewKushnir

@devknoll looks great 👍

packages/core/src/hydration/i18n.ts

packages/core/src/render3/i18n/i18n_apply.ts

Add support for hydrating i18n blocks. This is accomplished by serializing information about selected ICU cases for a block during server-side rendering. During hydration, this data is read and is used to traverse both an AST of the translated message and the DOM, in parallel, to map each LView with an RNode. Finally, this mapping is used while nodes are being created (either via i18n or their respective instructions) to locate existing nodes.

Modifies the i18n pre-hydration logic to correctly support content projection and elements that act as view containers.

Rework the i18n cleanup behavior to more closely match that of containers. Specifically, we assume that nodes are going to be claimed unless they are part of a branching ICU block. During hydration, we then track which ICU case was active at serialization time, and which was active during hydration. Any remaining cases that weren't used during hydration are then cleaned up.

devknoll · 2024-03-28T18:16:16Z

Presubmit

atscott · 2024-03-29T16:35:46Z

This PR was merged into the repository by commit a5fa279.

Modifies the i18n pre-hydration logic to correctly support content projection and elements that act as view containers. PR Close #54823

Rework the i18n cleanup behavior to more closely match that of containers. Specifically, we assume that nodes are going to be claimed unless they are part of a branching ICU block. During hydration, we then track which ICU case was active at serialization time, and which was active during hydration. Any remaining cases that weren't used during hydration are then cleaned up. PR Close #54823

angular-automatic-lock-bot · 2024-04-29T00:09:45Z

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

Add support for hydrating i18n blocks. This is accomplished by serializing information about selected ICU cases for a block during server-side rendering. During hydration, this data is read and is used to traverse both an AST of the translated message and the DOM, in parallel, to map each LView with an RNode. Finally, this mapping is used while nodes are being created (either via i18n or their respective instructions) to locate existing nodes. PR Close angular#54823

Modifies the i18n pre-hydration logic to correctly support content projection and elements that act as view containers. PR Close angular#54823

…lar#54823) Rework the i18n cleanup behavior to more closely match that of containers. Specifically, we assume that nodes are going to be claimed unless they are part of a branching ICU block. During hydration, we then track which ICU case was active at serialization time, and which was active during hydration. Any remaining cases that weren't used during hydration are then cleaned up. PR Close angular#54823

Add support for hydrating i18n blocks. This is accomplished by serializing information about selected ICU cases for a block during server-side rendering. During hydration, this data is read and is used to traverse both an AST of the translated message and the DOM, in parallel, to map each LView with an RNode. Finally, this mapping is used while nodes are being created (either via i18n or their respective instructions) to locate existing nodes. PR Close angular#54823

Modifies the i18n pre-hydration logic to correctly support content projection and elements that act as view containers. PR Close angular#54823

…lar#54823) Rework the i18n cleanup behavior to more closely match that of containers. Specifically, we assume that nodes are going to be claimed unless they are part of a branching ICU block. During hydration, we then track which ICU case was active at serialization time, and which was active during hydration. Any remaining cases that weren't used during hydration are then cleaned up. PR Close angular#54823

angular-robot bot added the detected: feature PR contains a feature commit label Mar 11, 2024

devknoll mentioned this pull request Mar 12, 2024

refactor(core): add internal API to enable i18n hydration #54784

Closed

14 tasks

devknoll force-pushed the x-i18n-serialization branch 5 times, most recently from 58c610e to 6ea9d82 Compare March 12, 2024 17:17

devknoll marked this pull request as ready for review March 12, 2024 17:40

pullapprove bot requested a review from AndrewKushnir March 12, 2024 17:40

eneajaho mentioned this pull request Mar 12, 2024

Angular hydration (SSR) for components that use i18n blocks is skipped #50812

Closed

AndrewKushnir reviewed Mar 13, 2024

View reviewed changes

AndrewKushnir added action: review The PR is still awaiting reviews from at least one requested reviewer area: i18n Issues related to localization and internationalization target: minor This PR is targeted for the next minor release core: hydration labels Mar 13, 2024

ngbot bot modified the milestone: Backlog Mar 13, 2024

devknoll force-pushed the x-i18n-serialization branch from 6ea9d82 to 39b02b0 Compare March 13, 2024 20:16

devknoll commented Mar 13, 2024

View reviewed changes

packages/core/src/hydration/i18n.ts Outdated Show resolved Hide resolved

packages/core/src/hydration/i18n.ts Outdated Show resolved Hide resolved

devknoll force-pushed the x-i18n-serialization branch from 39b02b0 to 239770e Compare March 13, 2024 20:46

This comment was marked as resolved.

Sign in to view

AndrewKushnir reviewed Mar 14, 2024

View reviewed changes

devknoll force-pushed the x-i18n-serialization branch 2 times, most recently from f55abef to d899bd9 Compare March 14, 2024 14:07

This comment was marked as resolved.

Sign in to view

devknoll force-pushed the x-i18n-serialization branch from d899bd9 to 52c519e Compare March 14, 2024 15:01

AndrewKushnir reviewed Mar 15, 2024

View reviewed changes

devknoll force-pushed the x-i18n-serialization branch from 52c519e to 4f7ceb7 Compare March 15, 2024 17:54

devknoll force-pushed the x-i18n-serialization branch from 4f7ceb7 to 5bfeed8 Compare March 25, 2024 20:09

devknoll force-pushed the x-i18n-serialization branch 2 times, most recently from df2a879 to 6ef2a88 Compare March 27, 2024 16:35

AndrewKushnir approved these changes Mar 28, 2024

View reviewed changes

packages/core/src/hydration/i18n.ts Outdated Show resolved Hide resolved

packages/core/src/render3/i18n/i18n_apply.ts Outdated Show resolved Hide resolved

devknoll force-pushed the x-i18n-serialization branch from 4c72103 to a2a99f9 Compare March 28, 2024 16:19

angular-robot bot requested a review from AndrewKushnir March 28, 2024 16:20

devknoll added 3 commits March 28, 2024 17:51

fix(core): support content projection and VCRs in i18n

5889234

Modifies the i18n pre-hydration logic to correctly support content projection and elements that act as view containers.

devknoll force-pushed the x-i18n-serialization branch from a2a99f9 to 9e3f2d1 Compare March 28, 2024 17:51

AndrewKushnir approved these changes Mar 29, 2024

View reviewed changes

AndrewKushnir added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Mar 29, 2024

atscott closed this in 146306a Mar 29, 2024

atscott pushed a commit that referenced this pull request Mar 29, 2024

fix(core): support content projection and VCRs in i18n (#54823)

f44a5e4

Modifies the i18n pre-hydration logic to correctly support content projection and elements that act as view containers. PR Close #54823

devknoll deleted the x-i18n-serialization branch March 29, 2024 18:36

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 29, 2024

Conversation

devknoll commented Mar 11, 2024

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pschuler21 commented Mar 13, 2024

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

devknoll commented Mar 28, 2024

Uh oh!

atscott commented Mar 29, 2024

Uh oh!

angular-automatic-lock-bot bot commented Apr 29, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants