docs(core): nx 20 changelog (#28270)

- Add a changelog for Nx 20.0.0
- Demo the composite graph view in `Explore Your Workspace`

docs/changelog/20_0_0.md

@@ -0,0 +1,18 @@
+# Nx 20
+
+## Features
+
+{% cards cols="2" %}
+{% card title="Composite Graph" type="document" url="/features/explore-graph" /%}
+{% card title="New repositories can use TypeScript project references instead of path aliases" type="document" url="/nx-api/js" /%}
+{% card title="Rspack plugin graduates from labs" type="document" url="/nx-api/rspack" /%}
+{% /cards %}
+
+## Breaking Changes
+
+{% cards cols="2" %}
+{% card title="Generators use `as-provided`" type="document" url="/deprecated/as-provided-vs-derived" /%}
+{% card title="Storybook generators use Storybook Component tests instead of Cypress tests" type="document" url="/recipes/storybook/storybook-interaction-tests" /%}
+{% card title="@nrwl/* packages are no longer published" type="document" url="/deprecated/rescope" /%}
+{% card title="Nx Release programatic API changes" type="external" url="https://github.com/nrwl/nx/pull/28224" /%}
+{% /cards %}

docs/shared/features/explore-graph.md

@@ -65,18 +65,23 @@ Click on a node to show a tooltip which also has a link to view more details abo
 You can trace the dependency chain between two projects by choosing a **Start** and **End** point in the project tooltips.
 Click on any dependency line to find which file(s) created the dependency.
 
+Composite nodes represent a set of projects in the same folder and can be expanded in place to show all the individual projects and their dependencies. You can also "focus" a composite node to render a graph of just the projects inside that node. Composite nodes are essential to navigate a graph of even a moderate size.
+
 Try playing around with a [fully interactive graph on a sample repo](https://nrwl-nx-examples-dep-graph.netlify.app/?focus=cart) or look at the more limited example below:
 
-{% graph height="450px" %}
+{% side-by-side %}
+
+{% graph height="450px" title="Project View" %}
 
 ```json
 {
-  "hash": "58420bb4002bb9b6914bdeb7808c77a591a089fc82aaee11e656d73b2735e3fa",
+  "composite": false,
   "projects": [
     {
       "name": "shared-product-state",
       "type": "lib",
       "data": {
+        "root": "shared/product-state",
         "tags": ["scope:shared", "type:state"]
       }
     },
@@ -84,6 +89,7 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
       "name": "shared-product-types",
       "type": "lib",
       "data": {
+        "root": "shared/product-types",
         "tags": ["type:types", "scope:shared"]
       }
     },
@@ -91,6 +97,7 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
       "name": "shared-product-data",
       "type": "lib",
       "data": {
+        "root": "shared/product-data",
         "tags": ["type:data", "scope:shared"]
       }
     },
@@ -98,6 +105,7 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
       "name": "cart-cart-page",
       "type": "lib",
       "data": {
+        "root": "cart/cart-page",
         "tags": ["scope:cart", "type:feature"]
       }
     },
@@ -105,13 +113,15 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
       "name": "shared-styles",
       "type": "lib",
       "data": {
+        "root": "shared/styles",
         "tags": ["scope:shared", "type:styles"]
       }
     },
     {
-      "name": "cart-e2e",
+      "name": "e2e-cart",
       "type": "e2e",
       "data": {
+        "root": "e2e/cart",
         "tags": ["scope:cart", "type:e2e"]
       }
     },
@@ -119,6 +129,7 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
       "name": "cart",
       "type": "app",
       "data": {
+        "root": "cart",
         "tags": ["type:app", "scope:cart"]
       }
     }
@@ -153,8 +164,8 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
       }
     ],
     "shared-styles": [],
-    "cart-e2e": [
+    "e2e-cart": [
-      { "source": "cart-e2e", "target": "cart", "type": "implicit" }
+      { "source": "e2e-cart", "target": "cart", "type": "implicit" }
     ],
     "cart": [
       { "source": "cart", "target": "shared-styles", "type": "implicit" },
@@ -169,12 +180,129 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
   "focus": null,
   "groupByFolder": false,
   "exclude": [],
-  "enableTooltips": true
+  "enableTooltips": false
 }
 ```
 
 {% /graph %}
 
+{% graph height="450px" title="Composite View (Nx 20+)" %}
+
+```json
+{
+  "composite": true,
+  "projects": [
+    {
+      "name": "shared-product-state",
+      "type": "lib",
+      "data": {
+        "root": "shared/product-state",
+        "tags": ["scope:shared", "type:state"]
+      }
+    },
+    {
+      "name": "shared-product-types",
+      "type": "lib",
+      "data": {
+        "root": "shared/product-types",
+        "tags": ["type:types", "scope:shared"]
+      }
+    },
+    {
+      "name": "shared-product-data",
+      "type": "lib",
+      "data": {
+        "root": "shared/product-data",
+        "tags": ["type:data", "scope:shared"]
+      }
+    },
+    {
+      "name": "cart-cart-page",
+      "type": "lib",
+      "data": {
+        "root": "cart/cart-page",
+        "tags": ["scope:cart", "type:feature"]
+      }
+    },
+    {
+      "name": "shared-styles",
+      "type": "lib",
+      "data": {
+        "root": "shared/styles",
+        "tags": ["scope:shared", "type:styles"]
+      }
+    },
+    {
+      "name": "e2e-cart",
+      "type": "e2e",
+      "data": {
+        "root": "e2e/cart",
+        "tags": ["scope:cart", "type:e2e"]
+      }
+    },
+    {
+      "name": "cart",
+      "type": "app",
+      "data": {
+        "root": "cart/cart",
+        "tags": ["type:app", "scope:cart"]
+      }
+    }
+  ],
+  "dependencies": {
+    "shared-product-state": [
+      {
+        "source": "shared-product-state",
+        "target": "shared-product-data",
+        "type": "static"
+      },
+      {
+        "source": "shared-product-state",
+        "target": "shared-product-types",
+        "type": "static"
+      }
+    ],
+    "shared-product-types": [],
+    "shared-product-data": [
+      {
+        "source": "shared-product-data",
+        "target": "shared-product-types",
+        "type": "static"
+      }
+    ],
+    "shared-e2e-utils": [],
+    "cart-cart-page": [
+      {
+        "source": "cart-cart-page",
+        "target": "shared-product-state",
+        "type": "static"
+      }
+    ],
+    "shared-styles": [],
+    "e2e-cart": [
+      { "source": "e2e-cart", "target": "cart", "type": "implicit" }
+    ],
+    "cart": [
+      { "source": "cart", "target": "shared-styles", "type": "implicit" },
+      { "source": "cart", "target": "cart-cart-page", "type": "static" }
+    ]
+  },
+  "workspaceLayout": {
+    "appsDir": "apps",
+    "libsDir": "libs"
+  },
+  "affectedProjectIds": [],
+  "focus": null,
+  "groupByFolder": false,
+  "exclude": [],
+  "enableTooltips": false
+}
+```
+
+{% /graph %}
+
+{% /side-by-side %}
+
 ### Export Project Graph to JSON
 
 If you prefer to analyze the underlying data of the project graph with a script or some other tool, you can run:

nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx

@@ -103,6 +103,7 @@ export function Graph({
             groupByFolder={false}
             theme={theme}
             projects={parsedProps.projects}
+            composite={parsedProps.composite}
             fileMap={{}}
             workspaceLayout={parsedProps.workspaceLayout}
             dependencies={parsedProps.dependencies}