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

garydex · Jan 18, 2022 · 31bb2f3 · 31bb2f3
1 parent be8ce09
commit 31bb2f3
Show file tree

Hide file tree

Showing 27 changed files with 342 additions and 113 deletions.
diff --git a/dep-graph/client/src/app/machines/dep-graph.spec.ts b/dep-graph/client/src/app/machines/dep-graph.spec.ts
@@ -1,5 +1,9 @@
 // nx-ignore-next-line
-import type { ProjectGraphDependency, ProjectGraphNode } from '@nrwl/devkit';
+import {
+  DependencyType,
+  ProjectGraphDependency,
+  ProjectGraphNode,
+} from '@nrwl/devkit';
 import { depGraphMachine } from './dep-graph.machine';
 import { interpret } from 'xstate';
 
@@ -51,38 +55,38 @@ export const mockProjects: ProjectGraphNode[] = [
 export const mockDependencies: Record<string, ProjectGraphDependency[]> = {
   app1: [
     {
-      type: 'static',
+      type: DependencyType.static,
       source: 'app1',
       target: 'auth-lib',
     },
     {
-      type: 'static',
+      type: DependencyType.static,
       source: 'app1',
       target: 'feature-lib1',
     },
   ],
   app2: [
     {
-      type: 'static',
+      type: DependencyType.static,
       source: 'app2',
       target: 'auth-lib',
     },
     {
-      type: 'static',
+      type: DependencyType.static,
       source: 'app2',
       target: 'feature-lib2',
     },
   ],
   'feature-lib1': [
     {
-      type: 'static',
+      type: DependencyType.static,
       source: 'feature-lib1',
       target: 'ui-lib',
     },
   ],
   'feature-lib2': [
     {
-      type: 'static',
+      type: DependencyType.static,
       source: 'feature-lib2',
       target: 'ui-lib',
     },

diff --git a/dep-graph/client/src/app/mock-project-graph-service.ts b/dep-graph/client/src/app/mock-project-graph-service.ts
@@ -33,7 +33,7 @@ export class MockProjectGraphService implements ProjectGraphService {
         {
           source: 'existing-app-1',
           target: 'existing-lib-1',
-          type: 'statis',
+          type: 'static' as any,
         },
       ],
       'existing-lib-1': [],
@@ -82,7 +82,7 @@ export class MockProjectGraphService implements ProjectGraphService {
       {
         source: newProject.name,
         target: targetDependency.name,
-        type: 'static',
+        type: 'static' as any,
       },
     ];
 

diff --git a/dep-graph/client/src/app/styles-graph/edges.ts b/dep-graph/client/src/app/styles-graph/edges.ts
@@ -41,9 +41,22 @@ const dynamicEdges: Stylesheet = {
   },
 };
 
+const typeOnlyEdges: Stylesheet = {
+  selector: 'edge.typeOnly',
+  style: {
+    label: 'type only',
+    'font-size': '16px',
+    'edge-text-rotation': 'autorotate',
+    'curve-style': 'unbundled-bezier',
+    'line-dash-pattern': [5, 5],
+    'line-style': 'dashed',
+  },
+};
+
 export const edgeStyles: Stylesheet[] = [
   allEdges,
   affectedEdges,
   implicitEdges,
   dynamicEdges,
+  typeOnlyEdges,
 ];
diff --git a/dep-graph/client/src/assets/graphs/nx-examples.json b/dep-graph/client/src/assets/graphs/nx-examples.json
@@ -185,7 +185,7 @@
       {
         "source": "shared-product-data",
         "target": "shared-product-types",
-        "type": "static"
+        "type": "typeOnly"
       }
     ],
     "products-home-page": [

diff --git a/docs/generated/api-nx-devkit/index.md b/docs/generated/api-nx-devkit/index.md
@@ -36,6 +36,7 @@ It only uses language primitives and immutable objects
 - [FileData](../../generated/nx-devkit/index#filedata)
 - [ProjectFileMap](../../generated/nx-devkit/index#projectfilemap)
 - [ProjectGraph](../../generated/nx-devkit/index#projectgraph)
+- [ProjectGraphBuilderExplicitDependency](../../generated/nx-devkit/index#projectgraphbuilderexplicitdependency)
 - [ProjectGraphDependency](../../generated/nx-devkit/index#projectgraphdependency)
 - [ProjectGraphExternalNode](../../generated/nx-devkit/index#projectgraphexternalnode)
 - [ProjectGraphProcessorContext](../../generated/nx-devkit/index#projectgraphprocessorcontext)
@@ -210,6 +211,12 @@ A plugin for Nx
 
 ---
 
+### ProjectGraphBuilderExplicitDependency
+
+• **ProjectGraphBuilderExplicitDependency**: `Object`
+
+---
+
 ### ProjectGraphDependency
 
 • **ProjectGraphDependency**: `Object`

diff --git a/e2e/workspace-integrations/src/workspace-aux-commands.test.ts b/e2e/workspace-integrations/src/workspace-aux-commands.test.ts
@@ -273,7 +273,7 @@ describe('dep-graph', () => {
             target: mylib,
             type: 'static',
           },
-          { source: myapp, target: mylib2, type: 'static' },
+          { source: myapp, target: mylib2, type: 'dynamic' },
         ],
         [myappE2e]: [
           {

diff --git a/nx-dev/nx-dev/public/documentation/generated/api-nx-devkit/index.md b/nx-dev/nx-dev/public/documentation/generated/api-nx-devkit/index.md
@@ -36,6 +36,7 @@ It only uses language primitives and immutable objects
 - [FileData](../../generated/nx-devkit/index#filedata)
 - [ProjectFileMap](../../generated/nx-devkit/index#projectfilemap)
 - [ProjectGraph](../../generated/nx-devkit/index#projectgraph)
+- [ProjectGraphBuilderExplicitDependency](../../generated/nx-devkit/index#projectgraphbuilderexplicitdependency)
 - [ProjectGraphDependency](../../generated/nx-devkit/index#projectgraphdependency)
 - [ProjectGraphExternalNode](../../generated/nx-devkit/index#projectgraphexternalnode)
 - [ProjectGraphProcessorContext](../../generated/nx-devkit/index#projectgraphprocessorcontext)
@@ -210,6 +211,12 @@ A plugin for Nx
 
 ---
 
+### ProjectGraphBuilderExplicitDependency
+
+• **ProjectGraphBuilderExplicitDependency**: `Object`
+
+---
+
 ### ProjectGraphDependency
 
 • **ProjectGraphDependency**: `Object`

diff --git a/packages/devkit/index.ts b/packages/devkit/index.ts
@@ -144,6 +144,7 @@ export type {
   ProjectFileMap,
   FileData,
   ProjectGraph,
+  ProjectGraphBuilderExplicitDependency,
   ProjectGraphDependency,
   ProjectGraphNode,
   ProjectGraphProjectNode,

diff --git a/packages/devkit/src/project-graph/project-graph-builder.spec.ts b/packages/devkit/src/project-graph/project-graph-builder.spec.ts
@@ -1,3 +1,4 @@
+import { DependencyType } from './interfaces';
 import { ProjectGraphBuilder } from './project-graph-builder';
 
 describe('ProjectGraphBuilder', () => {
@@ -96,21 +97,77 @@ describe('ProjectGraphBuilder', () => {
     });
   });
 
-  it(`should use implicit dep when both implicit and explicit deps are available`, () => {
-    // don't include duplicates
-    builder.addImplicitDependency('source', 'target');
-    builder.addExplicitDependency('source', 'source/index.ts', 'target');
+  describe('dependency type priority', () => {
+    it(`should use implicit dep when both implicit and explicit deps are available`, () => {
+      // don't include duplicates
+      builder.addImplicitDependency('source', 'target');
+      builder.addExplicitDependency('source', 'source/index.ts', 'target');
 
-    const graph = builder.getUpdatedProjectGraph();
-    expect(graph.dependencies).toEqual({
-      source: [
-        {
-          source: 'source',
-          target: 'target',
-          type: 'implicit',
-        },
-      ],
-      target: [],
+      const graph = builder.getUpdatedProjectGraph();
+      expect(graph.dependencies).toEqual({
+        source: [
+          {
+            source: 'source',
+            target: 'target',
+            type: 'implicit',
+          },
+        ],
+        target: [],
+      });
+    });
+
+    it(`should use explicit deps in priority order "static > dynamic"`, () => {
+      builder.addExplicitDependency(
+        'source',
+        'source/index.ts',
+        'target',
+        DependencyType.dynamic
+      );
+      builder.addExplicitDependency(
+        'source',
+        'source/index.ts',
+        'target',
+        DependencyType.static
+      );
+
+      const graph = builder.getUpdatedProjectGraph();
+      expect(graph.dependencies).toEqual({
+        source: [
+          {
+            source: 'source',
+            target: 'target',
+            type: DependencyType.static,
+          },
+        ],
+        target: [],
+      });
+    });
+
+    it(`should use explicit deps in priority order "dynamic > type-only"`, () => {
+      builder.addExplicitDependency(
+        'source',
+        'source/index.ts',
+        'target',
+        DependencyType.dynamic
+      );
+      builder.addExplicitDependency(
+        'source',
+        'source/second.ts',
+        'target',
+        DependencyType.typeOnly
+      );
+
+      const graph = builder.getUpdatedProjectGraph();
+      expect(graph.dependencies).toEqual({
+        source: [
+          {
+            source: 'source',
+            target: 'target',
+            type: DependencyType.dynamic,
+          },
+        ],
+        target: [],
+      });
     });
   });