feat: angular ctor params transformer #406

wtho · 2020-07-07T22:23:32Z

Introduces the usage of the @ngtools/webpack ctor-params transformer to
downlevel angular decorators to static properties

This also is the first usage of an Angular transformer in our setup. By using the compilation tools provided by the Angular Team to compile the code, we ensure the tests treat the code like production code. Furthermore this facilitates keeping up with the Angular Team.

Checklist

Transformer using Angular's ctor-params
documentation in README.md regarding isolatedModules: true
update CHANGELOG.md
Test for the transformer

Closes #288.

Further Discussion

While we are finally able to include Angular transformers, and in this case to circumvent the issue with emitting more metadata than Angular itself, we are still behind Angular Ivy compilation in jest + angular. This could change if we take a better look at the compilation behavior of the AngularCompilerPlugin as well as the used transformers. While partial functionality is definitely not interesting in test scenarios, other features are necessary. There might also be more compiling functionality in @angular/compiler-cli. More research has to be done in this field.

Note for Compatibility with Angular v10

In Angular v10 the ctor-parameters.js disappeared (in this commit). The reference in the AngularConstructorParameters has to be updated to be compatible with Angular v10 (and therefore incompatible with Angular v9). The current transformer handles both scenarios by trying to load ctor-parameters first and then falling back to the newer compiler-cli transformer.

this introduces the usage of the @ngtools/webpack ctor-params transformer to downlevel angular decorators to static properties

src/AngularConstructorParametersTransformer.ts

src/TransformUtils.ts

ahnpnl · 2020-07-07T22:38:06Z

src/TransformUtils.ts

@@ -5,6 +5,11 @@ import * as TS from 'typescript';
 // inside the ConfigSet right
 export interface ConfigSet {
  compilerModule: typeof TS;


if the const ts = configSet.compilerModule above is redundant and can be removed, this compilerModule can be removed too. In the latest version of ts-jest, this property is no longer exposed as public typings.

Do you mean by this that configSet.compilerModule equals configSet.tsCompiler?

actually those return 2 different things, compilerModule returns the current typescript package of the project while tsCompiler returns the compiler instance created internally in ts-jest.

But in AngularConstructorParametersTransformers.ts, compilerModule isn't used anywhere so I think this property compilerModule can be removed.

In the other transformers we still need functionality like configSet.compilerModule.getMutableClone(node), which was usually injected by the compilerModule, being an instance of typescript.

I see, so I think ts-jest should expose that one again in public typings 👍

Yes, this would be great: compilerModule: typeof TypeScript where import * as TypeScript from 'typescript'

will be like this

export declare class ConfigSet { readonly parentOptions?: TsJestGlobalOptions | undefined; get versions(): Record<string, string>; get compilerModule(): TTypeScript; get tsCompiler(): TsCompiler; get tsJestDigest(): string; readonly logger: Logger; constructor(jestConfig: Config.ProjectConfig, parentOptions?: TsJestGlobalOptions | undefined, parentLogger?: Logger); }

where TTypeScript is

import * as _ts from 'typescript'; export declare type TTypeScript = typeof _ts;

It was public before but then marked as internal 😃

If you assume, that only ts-jest authors transformers, it is correctly marked as internal 😄

For now I will extend the type with the compilerModule inline. Let me know when there's a new version out with the public typings!

FYI, ts-jest 26.1.2 released. It includes the exposed typing for compileModule.

src/InlineFilesTransformer.ts

src/StripStylesTransformer.ts

example/jest.config.js

src/AngularConstructorParametersTransformerv10.ts

src/AngularConstructorParametersTransformerv8v9.ts

ahnpnl

beautiful !

wtho · 2020-07-08T10:21:33Z

I tried to setup a test, but this requires fiddling a lot with module mocks, specifically to handle the different scenarios of require(@ngtools/webpack/...) and require(@angular/compiler-cli/...) which is not easy, as the test still tries to load the package, even if jest.mock('@ngtools/webpack/...', () => ...) is called. I would need more help with this if you think this is required.

The transformer passes with Angular v9 and v10 projects, so it is sufficient in my opinion.

Introduces the usage of the @ngtools/webpack ctor-params transformer to downlevel angular decorators to static properties This makes `emitDecoratorMetadata: true` in `tsconfig.spec.json` redundant, but is not compatible with `isolatedModules: true`.

wtho · 2020-07-08T11:42:46Z

It's ready to merge. Would you like to have a quick look, @thymikee?

ahnpnl · 2020-07-08T11:43:44Z

Ya I think the unit tests can be added later.

I ran into similar thing when trying to mock typescript. Ended up I used this way https://github.com/ahnpnl/ts-jest/blob/ec15732c29c6cc2767ef10029f417b50990a6b26/src/compiler/language-service.spec.ts#L114

ahnpnl · 2020-07-10T11:46:48Z

what do you think about in the meantime, we can have 1 example app is ng 9, 1 example app is ng 10 to run the tests for this change ?

wtho · 2020-07-10T15:55:28Z

I think that's a good workaround.

But instead of introducing e. g. /example9/ and /example10/, I would prefer to setup a conventional monorepo (and also rename example to test-app, as there was often confusion, that example is the default example of this library):

github.com/thymikee/jest-preset-angular
├──jest-preset-angular
├──test-app-v9
└──test-app-v10

Or in lerna-fashion:

github.com/thymikee/jest-preset-angular
└──packages
    ├──jest-preset-angular
    ├──test-app-v9
    └──test-app-v10

What do you think? I'd tackle this in a different PR, and this one would be rebased on top of it.

ahnpnl · 2020-07-10T16:45:20Z

I like the version like lerna but since the preset is only on its own but not exposing anything so I think it should be like this

github.com/thymikee/jest-preset-angular
└──packages
   ├──jest-preset-angular

while we treat test apps as e2e tests which should be in e2e folder

ya it's wise to do in another PR

wtho · 2020-07-10T21:53:06Z

Ok, so in this case I would prefer the setup

github.com/thymikee/jest-preset-angular
├──jest-preset-angular
└──e2e
    ├──test-app-v9
    └──test-app-v10

just to avoid unnecessary folder nesting. The container-folder packages could be added at any later time, if required one day.

ahnpnl · 2020-07-11T00:13:19Z

ok let's proceed like that

ahnpnl · 2020-07-25T10:52:31Z

src/InlineFilesTransformer.ts

 /**
 * The factory of hoisting transformer factory
 * @internal
 */
-export function factory(cs: ConfigSet) {
+export function factory(cs: ConfigSet & { compilerModule: TTypeScript }) {


This factory type isn’t the same as the one in AngularConstructorParametersTransformer.ts. Is it intended ?

ahnpnl · 2020-07-25T10:53:11Z

src/StripStylesTransformer.ts

 /**
 * The factory of hoisting transformer factory
 * @internal
 */
-export function factory(cs: ConfigSet) {
+export function factory(cs: ConfigSet & { compilerModule: TTypeScript }) {


This factory type isn’t the same as the one in AngularConstructorParametersTransformer.ts. Is it intended ?

ahnpnl · 2020-08-14T10:03:47Z

we might need to postpone this, see my comment #409 (comment)

ahnpnl · 2020-08-21T06:30:25Z

@wtho do you want to include this in 8.3.0 release ? In the meanwhile we are still figuring how to use Angular Compiler API, maybe this can be a quick win ?

wtho · 2020-08-21T18:01:55Z

No, I prefer to not merge it, as there is an easy workaround and we would have to remove everything added in this PR again.

ahnpnl · 2020-08-21T18:03:36Z

ok 👍

ahnpnl · 2020-10-27T09:27:58Z

is taken care in #562

wtho requested a review from ahnpnl July 7, 2020 22:23

wtho added a commit to wtho/jest-preset-angular that referenced this pull request Jul 7, 2020

feat: angular ctor params transformer (thymikee#406)

e157b78

this introduces the usage of the @ngtools/webpack ctor-params transformer to downlevel angular decorators to static properties

wtho force-pushed the feat/angular-transformer branch from dca54f8 to e157b78 Compare July 7, 2020 22:27

wtho mentioned this pull request Jul 7, 2020

Compatibility for projects importing Ivy-compiled Angular libraries #389

Closed

ahnpnl reviewed Jul 7, 2020

View reviewed changes

ahnpnl reviewed Jul 8, 2020

View reviewed changes

ahnpnl approved these changes Jul 8, 2020

View reviewed changes

wtho force-pushed the feat/angular-transformer branch from 80cdd4d to 0b5c315 Compare July 8, 2020 11:39

wtho requested a review from thymikee July 8, 2020 11:42

ahnpnl mentioned this pull request Jul 9, 2020

Handle compiled libraries out of the box #365

Closed

wtho mentioned this pull request Jul 9, 2020

Ivy compatibility #409

Closed

wtho mentioned this pull request Jul 17, 2020

build(dev-infra): rename example app to test-app-v9 #414

Merged

2 tasks

ahnpnl reviewed Jul 25, 2020

View reviewed changes

ahnpnl closed this Oct 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: angular ctor params transformer #406

feat: angular ctor params transformer #406

wtho commented Jul 7, 2020 •

edited

ahnpnl Jul 7, 2020

wtho Jul 7, 2020

ahnpnl Jul 7, 2020

wtho Jul 7, 2020

ahnpnl Jul 7, 2020

wtho Jul 7, 2020

ahnpnl Jul 7, 2020

wtho Jul 7, 2020

wtho Jul 7, 2020

ahnpnl Jul 13, 2020 •

edited

ahnpnl left a comment

wtho commented Jul 8, 2020

wtho commented Jul 8, 2020

ahnpnl commented Jul 8, 2020 •

edited

ahnpnl commented Jul 10, 2020

wtho commented Jul 10, 2020

ahnpnl commented Jul 10, 2020 •

edited

wtho commented Jul 10, 2020

ahnpnl commented Jul 11, 2020

ahnpnl Jul 25, 2020

ahnpnl Jul 25, 2020

ahnpnl commented Aug 14, 2020

ahnpnl commented Aug 21, 2020 •

edited

wtho commented Aug 21, 2020

ahnpnl commented Aug 21, 2020

ahnpnl commented Oct 27, 2020

feat: angular ctor params transformer #406

feat: angular ctor params transformer #406

Conversation

wtho commented Jul 7, 2020 • edited

Checklist

Further Discussion

Note for Compatibility with Angular v10

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahnpnl Jul 13, 2020 • edited

Choose a reason for hiding this comment

ahnpnl left a comment

Choose a reason for hiding this comment

wtho commented Jul 8, 2020

wtho commented Jul 8, 2020

ahnpnl commented Jul 8, 2020 • edited

ahnpnl commented Jul 10, 2020

wtho commented Jul 10, 2020

ahnpnl commented Jul 10, 2020 • edited

wtho commented Jul 10, 2020

ahnpnl commented Jul 11, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahnpnl commented Aug 14, 2020

ahnpnl commented Aug 21, 2020 • edited

wtho commented Aug 21, 2020

ahnpnl commented Aug 21, 2020

ahnpnl commented Oct 27, 2020

wtho commented Jul 7, 2020 •

edited

ahnpnl Jul 13, 2020 •

edited

ahnpnl commented Jul 8, 2020 •

edited

ahnpnl commented Jul 10, 2020 •

edited

ahnpnl commented Aug 21, 2020 •

edited