feat: use angular compiler api to transform codes #562

ahnpnl · 2020-10-20T13:51:59Z

Summary

See individual commits

NgJestCompiler takes care of compiling files and return a string which is the compiled output concatenating with source map string. The compiler also does type checking.

This compiler is mainly inspired by AngularCompilerPlugin in combination with ts-jest LanguageService.

Closes #108
Closes #288
Closes #322
Closes #353
Closes #622

Check list

Type checking
Code compilation
Memory cache for Program
Allow custom compiler module, e.g ttypescript (via ts-jest option)
Downlevel ctor transformer
hoisting (from ts-jest)
ngcc util script

Test plan

Added unit tests
Added e2e test which is taken from entryComponents with Angular 9 (Ivy) #353
Added e2e test for forwardRef

Does this PR introduce a breaking change?

Yes
No

With the new jest transformer, jest-preset-angular now switches to default to use this new transformer and no longer use ts-jest to transform codes.

Users who are currently doing in jest config

// jest.config.js
module.exports = {
    // [...]
    transform: {
      '^.+\\.(ts|js|html)$': 'ts-jest',
    },
}

should change to

// jest.config.js
module.exports = {
    // [...]
    transform: {
      '^.+\\.(ts|js|html)$': 'jest-preset-angular',
    },
}

isolatedModule: true will still use ts-jest to compile ts to js but you won't get full compatibility with Ivy.

Other information

N.A.

ahnpnl · 2020-10-20T14:05:34Z

@wtho here we go !!! The compiler now works with our current e2e tests, as well as solves #353

wtho

And you added the downlevelConstructorParameters!

Wow this is so cool! I wish I would have been more involved into this, but I was quite busy recently.
Once more thanks again!

wtho · 2020-10-20T20:21:31Z

jest-preset.js

    },
  },
  transform: {
-    '^.+\\.(ts|js|html)$': 'ts-jest',
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',


Wow this is it! Haha, will have to get used to it!

ahnpnl · 2020-10-20T21:10:41Z

Still have some fine tunings to do but we are pretty close. The current state is already in pretty good shape. Probably next week I can push this out in 9.0.0-next.1 once this one is done.

wtho · 2020-10-27T09:43:45Z

What's still open? Is there still more to address?

ahnpnl · 2020-10-27T09:53:08Z

Should be ready now, I couldn't find example in #322 to try out, but seems like #322 will be solved with this PR too.

Updated: #322 will be solved too, I just added e2e test taking example from it.
Updated 2: #108 will also be solved (forwardRef related with downlevel ctor)

ahnpnl · 2020-10-29T15:39:38Z

I have published this PR under 9.0.0-next.1 release so it's easier to test with real projects.

Separate from #562

e2e/test-app-v10-zone-v11/jest.config.js

Closes #108 Closes #288 Closes #322 Closes #353 BREAKING CHANGE: With the new jest transformer, `jest-preset-angular` now switches to default to use this new transformer and no longer use `ts-jest` to transform codes. Users who are currently doing in jest config ``` // jest.config.js module.exports = { // [...] transform: { '^.+\\.(ts|js|html)$': 'ts-jest', }, } ``` should change to ``` // jest.config.js module.exports = { // [...] transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular', }, } ``` `isolatedModule: true` will still use `ts-jest` to compile `ts` to `js` but you won't get full compatibility with Ivy. To make sure tests work, please always run `ngcc` in postinstall hook

Solved the addressed problem in #622

Jest parallel mode doesn't allow `ngcc` to run. The only way to run `ngcc` with Jest is invoking `ngcc` directly in `jest.config.js`. Because Jest reads `jest.config.js` only once before running tests, running `ngcc` is possible with it

Closes #622

In a jest transformer, `process` is the place where code transformation happens. Therefore, we should only create `NgJestTransformer` instance in `process`, not when creating `NgJestConfig` instance

wtho reviewed Oct 20, 2020

View reviewed changes

ahnpnl changed the title ~~refactor(compiler): introduce NgJestCompiler~~ feat(compiler): introduce NgJestCompiler Oct 23, 2020

ahnpnl marked this pull request as ready for review October 27, 2020 09:46

ahnpnl requested a review from thymikee as a code owner October 27, 2020 09:46

ahnpnl requested a review from wtho October 27, 2020 10:06

ahnpnl linked an issue Oct 27, 2020 that may be closed by this pull request

Issue with ReferenceError - Please help. #108

Closed

This was referenced Oct 29, 2020

Ivy compatibility #409

Closed

DI error with v9.0.0-next.1 #594

Closed

test(unit): add mock data, rename tests #610

Merged

ahnpnl added a commit that referenced this pull request Nov 5, 2020

test(unit): add mock data, rename tests (#610)

29074dd

Separate from #562

ahnpnl added the 💣 Breaking Changes Includes a breaking change and should probably wait until we're preparing for the release of a major label Nov 8, 2020

This was referenced Nov 9, 2020

build(deps-dev): bump ts-jest from 26.4.1 to 26.4.4 #613

Closed

docs(devs-infra): add table of contents for README.md #615

Merged

ahnpnl added this to the 9.0.0 milestone Nov 10, 2020

ahnpnl commented Nov 11, 2020

View reviewed changes

e2e/test-app-v10-zone-v11/jest.config.js Outdated Show resolved Hide resolved

This was referenced Dec 12, 2020

feat(utils): add ngcc-jest-processor util script #662

Merged

test(e2e): add entry component example with Ivy #663

Merged

chore(devs-infra): introduce NgJestCompiler #664

Merged

ahnpnl changed the title ~~feat(compiler): introduce NgJestCompiler~~ feat: use angular compiler api to transform codes Dec 12, 2020

ahnpnl mentioned this pull request Dec 12, 2020

refactor: adopt ts-jest 26.4.4 #665

Merged

2 tasks

ahnpnl added 5 commits December 12, 2020 19:06

fix: add @ngtools/webpack to peerDependencies list

62b2e57

Solved the addressed problem in #622

feat(compiler): provide ngcc-jest-processor util

7dd6450

Jest parallel mode doesn't allow `ngcc` to run. The only way to run `ngcc` with Jest is invoking `ngcc` directly in `jest.config.js`. Because Jest reads `jest.config.js` only once before running tests, running `ngcc` is possible with it

fix(compiler): fallback to ES2015 when no target is defined

3107354

Closes #622

perf(compiler): only create NgJestCompiler instance in process

e637da1

In a jest transformer, `process` is the place where code transformation happens. Therefore, we should only create `NgJestTransformer` instance in `process`, not when creating `NgJestConfig` instance

test(unit): improve unit tests

2063723

ahnpnl merged commit 1468ceb into thymikee:master Dec 12, 2020

ahnpnl deleted the ng-jest-compiler branch December 12, 2020 19:32

ThibaudAV mentioned this pull request Dec 13, 2020

WIP: feat(angular): add ivy support with JIT storybookjs/storybook#11157

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use angular compiler api to transform codes #562

feat: use angular compiler api to transform codes #562

ahnpnl commented Oct 20, 2020 •

edited

Loading

ahnpnl commented Oct 20, 2020

wtho left a comment

wtho Oct 20, 2020

ahnpnl commented Oct 20, 2020

wtho commented Oct 27, 2020

ahnpnl commented Oct 27, 2020 •

edited

Loading

ahnpnl commented Oct 29, 2020

feat: use angular compiler api to transform codes #562

feat: use angular compiler api to transform codes #562

Conversation

ahnpnl commented Oct 20, 2020 • edited Loading

Summary

Check list

Test plan

Does this PR introduce a breaking change?

Other information

ahnpnl commented Oct 20, 2020

wtho left a comment

Choose a reason for hiding this comment

wtho Oct 20, 2020

Choose a reason for hiding this comment

ahnpnl commented Oct 20, 2020

wtho commented Oct 27, 2020

ahnpnl commented Oct 27, 2020 • edited Loading

ahnpnl commented Oct 29, 2020

ahnpnl commented Oct 20, 2020 •

edited

Loading

ahnpnl commented Oct 27, 2020 •

edited

Loading