feat(core): show dep types in dep graph (#2760)

[MaximSagan]

Current Behavior

Dep graph does not indicate type-only dependencies or dynamic (a.k.a. "lazy") dependencies.
(Note: Type-only dependencies have never been indicated; dynamic dependencies are currently not indicated due to a relatively-recent regression.)

Expected Behavior

Dep graph indicates type-only, static, dynamic and implicit dependencies.

Fixes #2760

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nrwl/nx-dev/FMVWx2RCHeGECS3KtbyoNuyfep3w
✅ Preview: https://nx-dev-git-fork-maximsagan-feature-dependency-type-nrwl.vercel.app

[MaximSagan]

This PR is a little bigger than expected, because I had to fix a regression I found. Specifically, since this commit, the dependency types identified using TypescriptImportLocator are no longer being passed to the ProjectGraphBuilder. (This also meant that any discovered dynamic imports were not being identified on the graph.)

[nx-cloud]

☁️ Nx Cloud Report

CI ran the following commands for commit 0c8d563. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 21 targets

• nx affected --target=e2e --base=39b134ac2290dce61f3e59b4157f85a53d55db8a --head=0c8d563eec7eb33e5897fbe20bde6a8693b3e7b5 --exclude=e2e-react-native,e2e-detox,e2e-gatsby --parallel=1
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx run-many --target=build --all --parallel=8
• nx affected --target=test --base=39b134ac2290dce61f3e59b4157f85a53d55db8a --head=0c8d563eec7eb33e5897fbe20bde6a8693b3e7b5 --parallel --max-parallel=3
• nx affected --target=build --base=39b134ac2290dce61f3e59b4157f85a53d55db8a --head=0c8d563eec7eb33e5897fbe20bde6a8693b3e7b5 --parallel --max-parallel=3
• nx build typedoc-theme

---

Sent with 💌 from NxCloud.

[MaximSagan]

Reverted to value before 0e52c43

[MaximSagan]

Reverted to value before 0e52c43

[MaximSagan]

Reverted to value before 0e52c43

[MaximSagan]

I narrowed the type of the property ProjectGraphDependency['type'] from DependencyType | string to simply DependencyType as it is now being used a little bit more and for the most part the narrower type is helpful. However, for some reason, in this module, importing the enum DependencyType from @nrwl/devkit was causing an extremely bizarre error in the dep-graph-dep-graph:build-base task, which I captured here:

ERROR in ../../packages/devkit/index.ts
Module build failed (from ../../node_modules/@nrwl/web/src/utils/web-babel-loader.js):
SyntaxError: C:\dev\nx\packages\devkit\index.ts: Support for the experimental syntax 'flow' isn't currently enabled (15:8):

  13 |  * @category Tree
  14 |  */
> 15 | export type { Tree, FileChange } from '@nrwl/tao/src/shared/tree';
     |        ^
  16 |
  17 | /**
  18 |  * @category Workspace

Add @babel/preset-flow (https://git.io/JfeDn) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-flow (https://git.io/vb4yb) to the 'plugins' section to enable parsing.

What makes it even more bizarre is that there are a number of other modules in this same app that are importing the enum DependencyType without any issue. My only guess is that the difference here is the presence of the decorator, but why that would cause the above error is beyond me.

At any rate, adding as any seemed like a decent compromise.

[MaximSagan]

@philipjfulcher
I noticed you copied the contents of this file over to the React app in #8152. Note that if by some chance my PR is accepted and merged before yours, this edge definition should be copied too.
If yours PR is merged first, I'll add this to the React app.

[philipjfulcher]

My PR was merged. :) Let me know if you have trouble rebasing this, I can help with conflicts.

[MaximSagan]

My PR was merged. :) Let me know if you have trouble rebasing this, I can help with conflicts.

Seems I was able to rebase it safely. Would you mind reviewing?

[MaximSagan]

@vsavkin @FrozenPandaz
Can I ask someone from the team to take a look at this? The dependency graph is being actively worker on, so I've already had to resolve conflicts and rebase a couple times.

[philipjfulcher]

@MaximSagan - Thanks for your contribution! I've been out of the office since December and just getting back to this. It looks like we need another rebase, but it seems like an easy one. The changes to dep-graph-client look good, I need someone else's opinion on the other changes. If you can push a rebase, I'll get someone else to look at it.

[MaximSagan]

@MaximSagan - Thanks for your contribution! I've been out of the office since December and just getting back to this. It looks like we need another rebase, but it seems like an easy one. The changes to dep-graph-client look good, I need someone else's opinion on the other changes. If you can push a rebase, I'll get someone else to look at it.

Thanks @philipjfulcher. Rebased.

[spaceribs]

@vsavkin can this be reopened?

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.