Skip to content

fix(ivy): ngcc - several fixes related to decorators - #31614

Closed
JoostK wants to merge 7 commits into
angular:masterfrom
JoostK:ngcc-suffixed-helpers
Closed

JoostK wants to merge 7 commits into
angular:masterfrom
JoostK:ngcc-suffixed-helpers

Conversation

@JoostK

@JoostK JoostK commented Jul 17, 2019 •

Copy link
Copy Markdown
Member

refactor(ivy): ngcc - categorize the various decorate calls upfront

Any decorator information present in TypeScript is emitted into the
generated JavaScript sources by means of __decorate call. This call
contains both the decorators as they existed in the original source
code, together with calls to tslib helpers that convey additional
information on e.g. type information and parameter decorators. These
different kinds of decorator calls were not previously distinguished on
their own, but instead all treated as Decorator by themselves. The
"decorators" that were actually tslib helper calls were conveniently
filtered out because they were not imported from @angular/core, a
characteristic that ngcc uses to drop certain decorators.

Note that this posed an inconsistency in ngcc when it processes
@angular/core's UMD bundle, as the tslib helper functions have been
inlined in said bundle. Because of the inlining, the tslib helpers
appear to be from @angular/core, so ngcc would fail to drop those
apparent "decorators". This inconsistency does not currently cause any
issues, as ngtsc is specifically looking for decorators based on their
name and any remaining decorators are simply ignored.

This commit rewrites the decorator analysis of a class to occur all in a
single phase, instead of all throughout the ReflectionHost. This
allows to categorize the various decorate calls in a single sweep,
instead of constantly needing to filter out undesired decorate calls on
the go. As an added benefit, the computed decorator information is now
cached per class, such that subsequent reflection queries that need
decorator information can reuse the cached info.


fix(ivy): ngcc - recognize suffixed tslib helpers

An identifier may become repeated when bundling multiple source files
into a single bundle, so bundlers have a strategy of suffixing non-unique
identifiers with a suffix like $2. Since ngcc operates on such bundles,
it needs to process potentially suffixed identifiers in their canonical
form without the suffix. The "ngx-pagination" package was previously not
compiled fully, as most decorators were not recognized.

This commit ensures that identifiers are first canonicalized by removing
the suffix, such that they are properly recognized and processed by ngcc.

Fixes #31540


fix(ivy): ngcc - render decorators in UMD and CommonJS bundles correctly

In #31426 a fix was implemented to render namespaced decorator imports
correctly, however it turns out that the fix only worked when decorator
information was extracted from static properties, not when using
__decorate calls.

This commit fixes the issue by creating the decorator metadata with the
full decorator expression, instead of only its name.

Closes #31394

@JoostK JoostK added type: bug/fix action: review The PR is still awaiting reviews from at least one requested reviewer effort1: hours workaround4: none freq1: low severity3: broken target: major This PR is targeted for the next major release risk: low labels Jul 17, 2019
@JoostK
JoostK requested review from a team July 17, 2019 20:12
@ngbot ngbot Bot modified the milestone: Backlog Jul 17, 2019
@JoostK
JoostK force-pushed the ngcc-suffixed-helpers branch from b0b81c0 to 70c9acd Compare July 17, 2019 20:14
@JoostK
JoostK force-pushed the ngcc-suffixed-helpers branch 4 times, most recently from 9bca1a9 to 8e41d0b Compare July 21, 2019 20:05
@JoostK
JoostK requested a review from petebacondarwin July 22, 2019 05:25

@petebacondarwin petebacondarwin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Great work @JoostK - some minor naming suggestions.

@petebacondarwin petebacondarwin added the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jul 22, 2019
JoostK added 2 commits July 26, 2019 23:26
Any decorator information present in TypeScript is emitted into the
generated JavaScript sources by means of `__decorate` call. This call
contains both the decorators as they existed in the original source
code, together with calls to `tslib` helpers that convey additional
information on e.g. type information and parameter decorators. These
different kinds of decorator calls were not previously distinguished on
their own, but instead all treated as `Decorator` by themselves. The
"decorators" that were actually `tslib` helper calls were conveniently
filtered out because they were not imported from `@angular/core`, a
characteristic that ngcc uses to drop certain decorators.

Note that this posed an inconsistency in ngcc when it processes
`@angular/core`'s UMD bundle, as the `tslib` helper functions have been
inlined in said bundle. Because of the inlining, the `tslib` helpers
appear to be from `@angular/core`, so ngcc would fail to drop those
apparent "decorators". This inconsistency does not currently cause any
issues, as ngtsc is specifically looking for decorators based on  their
name and any remaining decorators are simply ignored.

This commit rewrites the decorator analysis of a class to occur all in a
single phase, instead of all throughout the `ReflectionHost`. This
allows to categorize the various decorate calls in a single sweep,
instead of constantly needing to filter out undesired decorate calls on
the go. As an added benefit, the computed decorator information is now
cached per class, such that subsequent reflection queries that need
decorator information can reuse the cached info.
An identifier may become repeated when bundling multiple source files
into a single bundle, so bundlers have a strategy of suffixing non-unique
identifiers with a suffix like $2. Since ngcc operates on such bundles,
it needs to process potentially suffixed identifiers in their canonical
form without the suffix. The "ngx-pagination" package was previously not
compiled fully, as most decorators were not recognized.

This commit ensures that identifiers are first canonicalized by removing
the suffix, such that they are properly recognized and processed by ngcc.

Fixes angular#31540
@JoostK
JoostK force-pushed the ngcc-suffixed-helpers branch from 8e41d0b to 305e0b9 Compare July 26, 2019 21:27
expect(decorators[0]).toEqual(jasmine.objectContaining({name: 'Directive'}));
});

it('should use `getImportOfIdentifier()` to retrieve import info', () => {

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I decided to delete these tests as the refactor into a single analysis phase affects the interaction with the spy, making this test brittle and not really of added value, IMHO. Assertions around the import location of a decorator have been added to other tests, where necessary.

@JoostK JoostK removed the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jul 26, 2019
@JoostK
JoostK requested review from a team and petebacondarwin July 27, 2019 09:32
@JoostK JoostK changed the title fix(ivy): ngcc - recognize suffixed tslib helpers fix(ivy): ngcc - several fixes related to decorators Jul 27, 2019
In angular#31426 a fix was implemented to render namespaced decorator imports
correctly, however it turns out that the fix only worked when decorator
information was extracted from static properties, not when using
`__decorate` calls.

This commit fixes the issue by creating the decorator metadata with the
full decorator expression, instead of only its name.

Closes angular#31394
@JoostK
JoostK force-pushed the ngcc-suffixed-helpers branch from 8b1b0b1 to 3ddd6bc Compare July 27, 2019 14:04

@petebacondarwin petebacondarwin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Awesome PR @JoostK - the first commit is a thing of beauty.
Approved with a few minor nits.

@petebacondarwin petebacondarwin added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jul 27, 2019
@JoostK JoostK removed the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jul 27, 2019
@petebacondarwin
petebacondarwin removed the request for review from a team July 28, 2019 06:33
@petebacondarwin petebacondarwin added the action: merge The PR is ready for merge by the caretaker label Jul 28, 2019

@gkalpak gkalpak left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

💯

Comment thread integration/ngcc/test.sh Resolved
@JoostK JoostK added merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note and removed merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Jul 29, 2019
sabeersulaiman pushed a commit to sabeersulaiman/angular that referenced this pull request Sep 6, 2019
…ngular#31614)

Any decorator information present in TypeScript is emitted into the
generated JavaScript sources by means of `__decorate` call. This call
contains both the decorators as they existed in the original source
code, together with calls to `tslib` helpers that convey additional
information on e.g. type information and parameter decorators. These
different kinds of decorator calls were not previously distinguished on
their own, but instead all treated as `Decorator` by themselves. The
"decorators" that were actually `tslib` helper calls were conveniently
filtered out because they were not imported from `@angular/core`, a
characteristic that ngcc uses to drop certain decorators.

Note that this posed an inconsistency in ngcc when it processes
`@angular/core`'s UMD bundle, as the `tslib` helper functions have been
inlined in said bundle. Because of the inlining, the `tslib` helpers
appear to be from `@angular/core`, so ngcc would fail to drop those
apparent "decorators". This inconsistency does not currently cause any
issues, as ngtsc is specifically looking for decorators based on  their
name and any remaining decorators are simply ignored.

This commit rewrites the decorator analysis of a class to occur all in a
single phase, instead of all throughout the `ReflectionHost`. This
allows to categorize the various decorate calls in a single sweep,
instead of constantly needing to filter out undesired decorate calls on
the go. As an added benefit, the computed decorator information is now
cached per class, such that subsequent reflection queries that need
decorator information can reuse the cached info.

PR Close angular#31614
sabeersulaiman pushed a commit to sabeersulaiman/angular that referenced this pull request Sep 6, 2019
An identifier may become repeated when bundling multiple source files
into a single bundle, so bundlers have a strategy of suffixing non-unique
identifiers with a suffix like $2. Since ngcc operates on such bundles,
it needs to process potentially suffixed identifiers in their canonical
form without the suffix. The "ngx-pagination" package was previously not
compiled fully, as most decorators were not recognized.

This commit ensures that identifiers are first canonicalized by removing
the suffix, such that they are properly recognized and processed by ngcc.

Fixes angular#31540

PR Close angular#31614
sabeersulaiman pushed a commit to sabeersulaiman/angular that referenced this pull request Sep 6, 2019
…tly (angular#31614)

In angular#31426 a fix was implemented to render namespaced decorator imports
correctly, however it turns out that the fix only worked when decorator
information was extracted from static properties, not when using
`__decorate` calls.

This commit fixes the issue by creating the decorator metadata with the
full decorator expression, instead of only its name.

Closes angular#31394

PR Close angular#31614
@angular-automatic-lock-bot

Copy link
Copy Markdown

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 Sep 15, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes effort1: hours freq1: low risk: low target: major This PR is targeted for the next major release type: bug/fix workaround4: none

Projects

None yet

Development

Successfully merging this pull request may close these issues.

michaelbromley/ngx-pagination with ivy ivy-ngcc doesn't transform UMD bundles correctly

5 participants