docs(bundling): add rspack to docs (#15545)

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -98,26 +98,31 @@ export function DocViewer({
                 target="_blank"
                 rel="noreferrer"
                 title="Report an issue on GitHub"
-                className="relative inline-flex items-center rounded-l-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
+                className={`relative inline-flex items-center rounded-l-md ${
+                  // If there is no file path for this page then don't show edit button.
+                  document.filePath ? '' : 'rounded-r-md '
+                }border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800`}
               >
                 Report an issue
               </a>
-              <a
-                aria-hidden="true"
-                href={[
-                  'https://github.com/nrwl/nx/blob/master',
-                  document.filePath.replace(
-                    'nx-dev/nx-dev/public/documentation',
-                    'docs'
-                  ),
-                ].join('/')}
-                target="_blank"
-                rel="noreferrer"
-                title="Edit this page on GitHub"
-                className="relative -ml-px inline-flex items-center rounded-r-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
-              >
-                Edit this page
-              </a>
+              {document.filePath ? (
+                <a
+                  aria-hidden="true"
+                  href={[
+                    'https://github.com/nrwl/nx/blob/master',
+                    document.filePath.replace(
+                      'nx-dev/nx-dev/public/documentation',
+                      'docs'
+                    ),
+                  ].join('/')}
+                  target="_blank"
+                  rel="noreferrer"
+                  title="Edit this page on GitHub"
+                  className="relative -ml-px inline-flex items-center rounded-r-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
+                >
+                  Edit this page
+                </a>
+              ) : null}
             </div>
           </div>
         </div>

nx-dev/nx-dev/lib/rspack/content/overview.ts

@@ -0,0 +1,102 @@
+export const content = `
+The Nx plugin for Rspack.
+
+[Rspack](https://www.rspack.dev/) is a fast build tool written in [Rust](https://www.rust-lang.org/) that is interoperable with the Webpack ecosystem.
+
+Why should you use this plugin?
+
+- Instant dev server start
+- Lightning fast Hot-Module Reloading
+- _Fast_ builds using Rspack.
+- Out-of-the-box support for TypeScript, JSX, CSS, and more.
+- Compatible with the Webpack ecosystem.
+
+Read more about it in the [Rspack documentation](https://www.rspack.dev/).
+
+## Setting up a new Nx workspace with Rspack
+
+You can create a new React workspace that uses Rspack using this command:
+
+\`\`\`shell
+npx create-nx-workspace@latest --preset=@nrwl/rspack
+\`\`\`
+
+You will be prompted for a repository name, which will be used for the folder and application name.
+
+## Add Rspack to an existing workspace
+
+There are a number of ways to use Rspack in your existing workspace.
+
+
+First, make sure \`@nrwl/rspack\` is installed.
+
+{% tabs %}
+{% tab label="npm" %}
+\`\`\`bash
+npm i -D @nrwl/rspack@latest
+\`\`\`
+{% /tab %}
+{% tab label="yarn" %}
+\`\`\`bash
+yarn add -D @nrwl/rspack@latest
+\`\`\`
+{% /tab %}
+{% tab label="pnpm" %}
+\`\`\`bash
+pnpm add -D @nrwl/rspack@latest
+\`\`\`
+{% /tab %}
+{% /tabs %}
+
+### Generate a new project using Rspack
+
+You can generate a [Web](/packages/web) application, and then use the \`@nrwl/rspack:configuration\` generator to configure the build and serve targets.
+
+Make sure you have the Web plugin installed.
+
+{% tabs %}
+{% tab label="npm" %}
+\`\`\`bash
+npm i -D @nrwl/web@latest
+\`\`\`
+{% /tab %}
+{% tab label="yarn" %}
+\`\`\`bash
+yarn add -D @nrwl/web@latest
+\`\`\`
+{% /tab %}
+{% tab label="pnpm" %}
+\`\`\`bash
+pnpm add -D @nrwl/web@latest
+\`\`\`
+{% /tab %}
+{% /tabs %}
+
+Then generate the application.
+
+\`\`\`bash
+nx g @nrwl/web:app my-app --style=css
+\`\`\`
+
+Finally, configure Rspack for the new project.
+
+\`\`\`bash
+nx g @nrwl/rspack:configuration --project=my-app
+\`\`\`
+
+### Modify an existing React or Web project to use Rspack
+
+You can use the \`@nrwl/rspack:configuration\` generator to change your React or Web project to use Rspack.
+This generator will modify your project's configuration to use Rspack, and it will also install all the necessary dependencies.
+
+You can read more about this generator on the [\`@nrwl/rspack:configuration\`](/packages/rspack/generators/configuration) generator page.
+
+### Initialize Rspack
+
+If you do not want to create any new projects or convert any existing projects yet, you can still use Nx to install all the necessary dependencies for Rspack.
+This, for example, could be useful if you want to set up Rspack manually for a project.
+
+\`\`\`bash
+nx g @nrwl/rspack:init
+\`\`\`
+`;

nx-dev/nx-dev/lib/rspack/content/rspack-config-setup.ts

@@ -0,0 +1,83 @@
+export const content = `
+# Configure Rspack on your Nx workspace
+
+You can configure Rspack using a \`rspack.config.js\` file in your project. You can set the path to this file in your \`project.json\` file, in the \`build\` target options:
+
+\`\`\`json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/rspack:rspack",
+            //...
+            "options": {
+                //...
+                "rspackConfig": "apps/my-app/rspack.config.js"
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+\`\`\`
+
+In that file, you can add the necessary configuration for Rspack. You can read more on how to configure Rspack in the [Rspack documentation](https://www.rspack.dev/).
+
+### Basic configuration for Nx
+
+You should start with a basic Rspack configuration for Nx in your project, that looks like this:
+
+\`\`\`js {% fileName="apps/my-app/rspack.config.js" %}
+const { composePlugins, withNx } = require('@nrwl/rspack');
+
+module.exports = composePlugins(withNx(), (config, { options, context }) => {
+  // customize Rspack config here
+  return config;
+});
+\`\`\`
+
+The \`withNx()\` plugin adds the necessary configuration for Nx to work with Rspack. The \`composePlugins\` function allows you to add other plugins to the configuration.
+
+#### The \`composePlugins\` function
+
+The \`composePlugins\` function takes a list of plugins and a function, and returns a Rspack \`Configuration\` object. The \`composePlugins\` function is an enhanced version of the Rspack configuration function, which allows you to add plugins to the configuration, and provides you with a function which accepts two arguments:
+
+1. \`config\`: The Rspack configuration object.
+2. An object with the following properties:
+   - \`options\`: The options passed to the \`@nrwl/rspack:rspack\` executor.
+   - \`context\`: The context passed of the \`@nrwl/rspack:rspack\` executor.
+
+This gives you the ability to customize the Rspack configuration as needed, and make use of the options and context passed to the executor, as well.
+
+### Add configurations for other functionalities
+
+In addition to the basic configuration, you can add configurations for other frameworks or features. The \`@nrwl/rspack\` package provides plugins such as \`withWeb\` and \`withReact\`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Rspack Plugins guide](/packages/rspack/documents/rspack-plugins).
+
+You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project.
+
+## Customize your Rspack config
+
+For most apps, the default configuration of Rspack is sufficient, but sometimes you need to tweak a setting in your Rspack config. This guide explains how to make a small change without taking on the maintenance burden of the entire Rspack config.
+
+### Configure Rspack for React projects
+
+React projects use the \`withReact\` plugin that adds the necessary configuration for React to work with Rspack. You can use this plugin to add the necessary configuration to your Rspack config.
+
+\`\`\`js {% fileName="apps/my-app/rspack.config.js" %}
+const { composePlugins, withNx, withReact } = require('@nrwl/rspack');
+
+// Nx plugins for Rspack.
+module.exports = composePlugins(
+  withNx(),
+  withReact(),
+  (config, { options, context }) => {
+    // Update the Rspack config as needed here.
+    // e.g. config.plugins.push(new MyPlugin())
+    return config;
+  }
+);
+\`\`\`
+
+`;

nx-dev/nx-dev/lib/rspack/content/rspack-plugin.ts

@@ -0,0 +1,76 @@
+export const content = `
+# Rspack plugins
+
+Nx uses enhanced Rspack configuration files (e.g. \`rspack.config.js\`). These configuration files export a _plugin_ that takes in a rspack
+configuration object and returns an updated configuration object. Plugins are used by Nx to add
+functionality to the Rspack build.
+
+This guide contains information on the plugins provided by Nx. For more information on customizing Rspack configuration, refer to the
+[Nx Rspack configuration guide](/packages/rspack/documents/rspack-config-setup).
+
+## withNx
+
+The \`withNx\` plugin provides common configuration for the build, including TypeScript support and linking workspace libraries (via tsconfig paths).
+
+### Example
+
+\`\`\`js
+const { composePlugins, withNx } = require('@nrwl/rspack');
+
+module.exports = composePlugins(withNx(), (config) => {
+  // Further customize Rspack config
+  return config;
+});
+\`\`\`
+
+## withWeb
+
+The \`withWeb\` plugin adds support for CSS/SASS/Less/Stylus stylesheets, assets (such as images and fonts), and \`index.html\` processing.
+
+### Options
+
+#### stylePreprocessorOptions
+
+Type: \`{ includePaths: string[] }\`
+
+Options to pass to style preprocessors. \`includePaths\` is a list of paths that are included (e.g. workspace libs with stylesheets).
+
+### Example
+
+\`\`\`js
+const { composePlugins, withNx, withWeb } = require('@nrwl/rspack');
+
+module.exports = composePlugins(
+  // always pass withNx() first
+  withNx(),
+  // add web functionality
+  withWeb({
+    stylePreprocessorOptions: ['ui/src'],
+  }),
+  (config) => {
+    // Further customize Rspack config
+    return config;
+  }
+);
+\`\`\`
+
+## withReact
+
+The \`withReact\` plugin adds support for React JSX and [Fast Refresh](https://github.com/pmmmwh/react-refresh-webpack-plugin)
+### Example
+
+\`\`\`js
+const { composePlugins, withNx, withReact } = require('@nrwl/rspack');
+
+module.exports = composePlugins(
+  withNx(), // always pass withNx() first
+  withReact({
+    stylePreprocessorOptions: ['ui/src'],
+  }),
+  (config) => {
+    // Further customize Rspack config
+    return config;
+  }
+);
+\`\`\`
+`;

nx-dev/nx-dev/lib/rspack/pkg.ts

@@ -0,0 +1,86 @@
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+
+export const pkg: ProcessedPackageMetadata = {
+  description: '',
+  documents: {
+    '/packages/rspack/documents/overview': {
+      id: 'overview',
+      name: 'Overview of the Nx Rspack plugin',
+      description:
+        'The Nx Plugin for Rspack contains executors and generators that support building applications using Rspack.',
+      file: '',
+      itemList: [],
+      isExternal: false,
+      path: '/packages/rspack/documents/overview',
+      tags: [],
+    },
+    '/packages/rspack/documents/rspack-plugins': {
+      id: 'rspack-plugins',
+      name: 'Rspack plugins',
+      description: 'Rspack plugins',
+      file: '',
+      itemList: [],
+      isExternal: false,
+      path: '/packages/rspack/documents/rspack-plugins',
+      tags: [],
+    },
+    '/packages/rspack/documents/rspack-config-setup': {
+      id: 'rspack-config-setup',
+      name: ' How to configure Rspack on your Nx workspace',
+      description:
+        'A guide on how to configure rspack on your Nx workspace, and instructions on how to customize your rspack configuration.',
+      file: '',
+      itemList: [],
+      isExternal: false,
+      path: '/packages/rspack/documents/rspack-config-setup',
+      tags: [],
+    },
+  },
+  executors: {
+    '/packages/rspack/executors/rspack': {
+      description: 'Run rspack build.',
+      file: 'generated/packages/rspack/executors/rspack.json',
+      hidden: false,
+      name: 'rspack',
+      originalFilePath: '/packages/rspack/src/executors/rspack/schema.json',
+      path: '/packages/rspack/executors/rspack',
+      type: 'executor',
+    },
+    '/packages/rspack/executors/dev-server': {
+      description: 'Serve a web application.',
+      file: 'generated/packages/rspack/executors/dev-server.json',
+      hidden: false,
+      name: 'dev-server',
+      originalFilePath: '/packages/rspack/src/executors/dev-server/schema.json',
+      path: '/packages/rspack/executors/dev-server',
+      type: 'executor',
+    },
+  },
+  generators: {
+    '/packages/rspack/generators/init': {
+      description: 'Initialize the `@nrwl/rspack` plugin.',
+      file: 'generated/packages/rspack/generators/init.json',
+      hidden: false,
+      name: 'init',
+      originalFilePath: '/packages/rspack/src/generators/init/schema.json',
+      path: '/packages/rspack/generators/init',
+      type: 'generator',
+    },
+    '/packages/rspack/generators/configuration': {
+      description: 'Add Rspack configuration to a project.',
+      file: 'generated/packages/rspack/generators/configuration.json',
+      hidden: false,
+      name: 'configuration',
+      originalFilePath:
+        '/packages/rspack/src/generators/configuration/schema.json',
+      path: '/packages/rspack/generators/configuration',
+      type: 'generator',
+    },
+  },
+  githubRoot: 'https://github.com/nrwl/nx-labs/tree/main/packages/rspack',
+  name: 'Rspack',
+  packageName: '@nrwl/rspack',
+  path: '',
+  root: '',
+  source: '',
+};

nx-dev/nx-dev/lib/rspack/schema/executors/dev-server.ts

@@ -0,0 +1,30 @@
+export const schema = {
+  name: 'dev-server',
+  implementation:
+    '/packages/rspack/src/executors/dev-server/dev-server.impl.ts',
+  schema: {
+    $schema: 'http://json-schema.org/schema',
+    version: 2,
+    cli: 'nx',
+    title: 'Rspack dev-server executor',
+    description: '',
+    type: 'object',
+    properties: {
+      buildTarget: {
+        type: 'string',
+        description: 'The build target for rspack.',
+      },
+      port: {
+        type: 'number',
+        description: 'The port to for the dev-server to listen on.',
+      },
+    },
+    required: ['buildTarget'],
+    presets: [],
+  },
+  description: 'Serve a web application.',
+  aliases: [],
+  hidden: false,
+  path: '/packages/rspack/src/executors/dev-server/schema.json',
+  type: 'executor',
+};

nx-dev/nx-dev/lib/rspack/schema/executors/rspack.ts

@@ -0,0 +1,107 @@
+export const schema = {
+  name: 'rspack',
+  implementation: '/packages/rspack/src/executors/rspack/rspack.impl.ts',
+  schema: {
+    $schema: 'http://json-schema.org/schema',
+    version: 2,
+    cli: 'nx',
+    title: 'Rspack build executor',
+    description: '',
+    type: 'object',
+    properties: {
+      target: {
+        type: 'string',
+        description: 'The platform to target (e.g. web, node).',
+        enum: ['web', 'node'],
+      },
+      main: {
+        type: 'string',
+        description: 'The main entry file.',
+      },
+      outputPath: {
+        type: 'string',
+        description: 'The output path for the bundle.',
+      },
+      tsConfig: {
+        type: 'string',
+        description: 'The tsconfig file to build the project.',
+      },
+      indexHtml: {
+        type: 'string',
+        description: 'The path to the index.html file.',
+      },
+      rspackConfig: {
+        type: 'string',
+        description: 'The path to the rspack config file.',
+      },
+      optimization: {
+        type: 'boolean',
+        description: 'Enables optimization of the build output.',
+      },
+      sourceMap: {
+        description:
+          "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
+        default: true,
+        oneOf: [
+          {
+            type: 'boolean',
+          },
+          {
+            type: 'string',
+          },
+        ],
+      },
+      assets: {
+        type: 'array',
+        description: 'List of static application assets.',
+        default: [],
+        items: {
+          $ref: '#/definitions/assetPattern',
+        },
+      },
+    },
+    required: ['target', 'main', 'outputPath', 'tsConfig', 'rspackConfig'],
+    definitions: {
+      assetPattern: {
+        oneOf: [
+          {
+            type: 'object',
+            properties: {
+              glob: {
+                type: 'string',
+                description: 'The pattern to match.',
+              },
+              input: {
+                type: 'string',
+                description:
+                  "The input directory path in which to apply 'glob'. Defaults to the project root.",
+              },
+              ignore: {
+                description: 'An array of globs to ignore.',
+                type: 'array',
+                items: {
+                  type: 'string',
+                },
+              },
+              output: {
+                type: 'string',
+                description: 'Absolute path within the output.',
+              },
+            },
+            additionalProperties: false,
+            required: ['glob', 'input', 'output'],
+          },
+          {
+            type: 'string',
+          },
+        ],
+      },
+    },
+    presets: [],
+  },
+  description: 'Run rspack build.',
+  aliases: [],
+  hidden: false,
+  path: '/packages/rspack/src/executors/rspack/schema.json',
+  type: 'executor',
+};

nx-dev/nx-dev/lib/rspack/schema/generators/configuration.ts

@@ -0,0 +1,67 @@
+export const schema = {
+  name: 'configuration',
+  factory:
+    './src/generators/configuration/configuration#configurationGenerator',
+  schema: {
+    $schema: 'http://json-schema.org/schema',
+    cli: 'nx',
+    $id: 'Rspack',
+    title: '',
+    type: 'object',
+    properties: {
+      project: {
+        type: 'string',
+        description: 'The name of the project.',
+        $default: {
+          $source: 'argv',
+          index: 0,
+        },
+        'x-dropdown': 'project',
+        'x-prompt': 'What is the name of the project to set up a rspack for?',
+        'x-priority': 'important',
+      },
+      main: {
+        type: 'string',
+        description:
+          "Path relative to the workspace root for the main entry file. Defaults to '<projectRoot>/src/main.ts'.",
+        'x-priority': 'important',
+      },
+      tsConfig: {
+        type: 'string',
+        description:
+          "Path relative to the workspace root for the tsconfig file to build with. Defaults to '<projectRoot>/tsconfig.app.json'.",
+        'x-priority': 'important',
+      },
+      target: {
+        type: 'string',
+        description:
+          'Target platform for the build, same as the rspack config option.',
+        enum: ['node', 'web'],
+        default: 'web',
+      },
+      devServer: {
+        type: 'boolean',
+        description: 'Add a serve target to run a local rspack dev-server',
+        default: false,
+      },
+      uiFramework: {
+        type: 'string',
+        description: 'The UI framework used by the project.',
+        enum: ['none', 'react'],
+      },
+      style: {
+        type: 'string',
+        description: 'The style solution to use.',
+        enum: ['none', 'css', 'scss', 'less'],
+      },
+    },
+    required: ['project'],
+  },
+  description: 'configurationialize the `@nrwl/rspack` plugin.',
+  aliases: [],
+  hidden: false,
+  implementation:
+    '/packages/rspack/src/generators/configuration/configuration#configurationGenerator.ts',
+  path: '/packages/rspack/src/generators/configuration/schema.json',
+  type: 'generator',
+};

nx-dev/nx-dev/lib/rspack/schema/generators/init.ts

@@ -0,0 +1,31 @@
+export const schema = {
+  name: 'init',
+  factory: './src/generators/init/init#rspackInitGenerator',
+  schema: {
+    $schema: 'http://json-schema.org/schema',
+    cli: 'nx',
+    $id: 'Init',
+    title: '',
+    type: 'object',
+    properties: {
+      uiFramework: {
+        type: 'string',
+        description: 'The UI framework used by the project.',
+        enum: ['none', 'react', 'web'],
+      },
+      style: {
+        type: 'string',
+        description: 'The style solution to use.',
+        enum: ['none', 'css', 'scss', 'less'],
+      },
+    },
+    required: [],
+  },
+  description: 'Initialize the `@nrwl/rspack` plugin.',
+  aliases: [],
+  hidden: false,
+  implementation:
+    '/packages/rspack/src/generators/init/init#rspackInitGenerator.ts',
+  path: '/packages/rspack/src/generators/init/schema.json',
+  type: 'generator',
+};

nx-dev/nx-dev/pages/packages/index.tsx

@@ -38,14 +38,28 @@ export default function Packages({
         'id'
       ),
     },
-    packages: useMemo(
-      () =>
-        sortCorePackagesFirst<IntrinsicPackageMetadata>(
-          filterMigrationPackages<IntrinsicPackageMetadata>(packages),
-          'name'
-        ),
-      [packages]
-    ),
+    packages: useMemo(() => {
+      const storybookIdx = packages.findIndex((p) => p.name === 'storybook');
+      console.log({ packages, storybookIdx });
+      const packagesWithRspack = [
+        ...packages.slice(0, storybookIdx),
+        {
+          description:
+            'The Nx Plugin for Rspack contains executors and generators that support building applications using Rspack.',
+          githubRoot: 'https://github.com/nrwl/nx/blob/master',
+          name: 'rspack',
+          packageName: '@nrwl/rspack',
+          path: '/packages/rspack',
+          root: '/packages/rspack',
+          source: '/packages/rspack/src',
+        },
+        ...packages.slice(storybookIdx),
+      ];
+      return sortCorePackagesFirst<IntrinsicPackageMetadata>(
+        filterMigrationPackages<IntrinsicPackageMetadata>(packagesWithRspack),
+        'name'
+      );
+    }, [packages]),
   };
 
   return (
@@ -96,7 +110,7 @@ export default function Packages({
                   <section id="packages-section" className="py-12">
                     <nav
                       aria-labelledby="package-index-navigation"
-                      className="relative mb-24 grid grid-cols-2 gap-4 md:grid-cols-4"
+                      className="relative mb-24 grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-5"
                     >
                       {vm.packages.map((pkg) => (
                         <Link

nx-dev/nx-dev/pages/packages/rspack/documents/index.tsx

@@ -0,0 +1,92 @@
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { PackageSchemaSubList } from '../../../../../feature-package-schema-viewer/src/lib/package-schema-sub-list';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function DocumentsIndex({
+  menu,
+  pkg,
+}: {
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: { menu: Menu; package: ProcessedPackageMetadata } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaSubList pkg={vm.package} type={'document'} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps(): Promise<{
+  props: {
+    menu: MenuItem[];
+    pkg: ProcessedPackageMetadata;
+  };
+}> {
+  return {
+    props: {
+      menu: menusApi.getMenu('packages', 'packages'),
+      pkg,
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/documents/overview.tsx

@@ -0,0 +1,109 @@
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { DocViewer } from '@nrwl/nx-dev/feature-doc-viewer';
+import {
+  ProcessedDocument,
+  RelatedDocument,
+} from '@nrwl/nx-dev/models-document';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { content } from '../../../../lib/rspack/content/overview';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function Overview({
+  document,
+  menu,
+  relatedDocuments,
+}: {
+  document: ProcessedDocument;
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+  relatedDocuments: RelatedDocument[];
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: {
+    document: ProcessedDocument;
+    menu: Menu;
+    relatedDocuments: RelatedDocument[];
+  } = {
+    document,
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    relatedDocuments,
+  };
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <DocViewer
+            document={vm.document}
+            relatedDocuments={vm.relatedDocuments}
+          />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  const document = {
+    content: content,
+    description: '',
+    filePath: '',
+    id: 'overview',
+    name: 'Overview of the Nx Rspack Plugin',
+    relatedDocuments: {},
+    tags: [],
+  };
+
+  return {
+    props: {
+      pkg,
+      document,
+      relatedDocuments: [],
+      menu: menusApi.getMenu('packages', ''),
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/documents/rspack-config-setup.tsx

@@ -0,0 +1,110 @@
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { DocViewer } from '@nrwl/nx-dev/feature-doc-viewer';
+import {
+  ProcessedDocument,
+  RelatedDocument,
+} from '@nrwl/nx-dev/models-document';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { content } from '../../../../lib/rspack/content/rspack-config-setup';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function RspackConfigSetup({
+  document,
+  menu,
+  relatedDocuments,
+}: {
+  document: ProcessedDocument;
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+  relatedDocuments: RelatedDocument[];
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: {
+    document: ProcessedDocument;
+    menu: Menu;
+    relatedDocuments: RelatedDocument[];
+  } = {
+    document,
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    relatedDocuments,
+  };
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <DocViewer
+            document={vm.document}
+            relatedDocuments={vm.relatedDocuments}
+          />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  const document = {
+    content: content,
+    description:
+      'A guide on how to configure Rspack on your Nx workspace, and instructions on how to customize your Rspack configuration.',
+    filePath: '',
+    id: 'rspack-plugins',
+    name: ' How to configure Rspack on your Nx workspace',
+    relatedDocuments: {},
+    tags: [],
+  };
+
+  return {
+    props: {
+      pkg,
+      document,
+      relatedDocuments: [],
+      menu: menusApi.getMenu('packages', ''),
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/documents/rspack-plugins.tsx

@@ -0,0 +1,109 @@
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { DocViewer } from '@nrwl/nx-dev/feature-doc-viewer';
+import {
+  ProcessedDocument,
+  RelatedDocument,
+} from '@nrwl/nx-dev/models-document';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { content } from '../../../../lib/rspack/content/rspack-plugin';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function RspackPlugins({
+  document,
+  menu,
+  relatedDocuments,
+}: {
+  document: ProcessedDocument;
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+  relatedDocuments: RelatedDocument[];
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: {
+    document: ProcessedDocument;
+    menu: Menu;
+    relatedDocuments: RelatedDocument[];
+  } = {
+    document,
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    relatedDocuments,
+  };
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <DocViewer
+            document={vm.document}
+            relatedDocuments={vm.relatedDocuments}
+          />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  const document = {
+    content: content,
+    description: 'Rspack plugins',
+    filePath: '',
+    id: 'rspack-plugins',
+    name: 'Rspack plugins',
+    relatedDocuments: {},
+    tags: [],
+  };
+
+  return {
+    props: {
+      pkg,
+      document,
+      relatedDocuments: [],
+      menu: menusApi.getMenu('packages', ''),
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/executors/dev-server.tsx

@@ -0,0 +1,99 @@
+import { PackageSchemaViewer } from '@nrwl/nx-dev-feature-package-schema-viewer';
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import {
+  ProcessedPackageMetadata,
+  SchemaMetadata,
+} from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { schema } from '../../../../lib/rspack/schema/executors/dev-server';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function DevServerExecutor({
+  menu,
+  pkg,
+  schema,
+}: {
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+  schema: SchemaMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: {
+    menu: Menu;
+    package: ProcessedPackageMetadata;
+    schema: SchemaMetadata;
+  } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+    schema: schema,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaViewer pkg={vm.package} schema={vm.schema} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      pkg,
+      schema,
+      menu: menusApi.getMenu('packages', 'packages'),
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/executors/index.tsx

@@ -0,0 +1,92 @@
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { PackageSchemaSubList } from '../../../../../feature-package-schema-viewer/src/lib/package-schema-sub-list';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function ExecutorsIndex({
+  menu,
+  pkg,
+}: {
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: { menu: Menu; package: ProcessedPackageMetadata } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaSubList pkg={vm.package} type={'executor'} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps(): Promise<{
+  props: {
+    menu: MenuItem[];
+    pkg: ProcessedPackageMetadata;
+  };
+}> {
+  return {
+    props: {
+      menu: menusApi.getMenu('packages', 'packages'),
+      pkg,
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/executors/rspack.tsx

@@ -0,0 +1,99 @@
+import { PackageSchemaViewer } from '@nrwl/nx-dev-feature-package-schema-viewer';
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import {
+  ProcessedPackageMetadata,
+  SchemaMetadata,
+} from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { schema } from '../../../../lib/rspack/schema/executors/rspack';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function RspackExecutor({
+  menu,
+  pkg,
+  schema,
+}: {
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+  schema: SchemaMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: {
+    menu: Menu;
+    package: ProcessedPackageMetadata;
+    schema: SchemaMetadata;
+  } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+    schema: schema,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaViewer pkg={vm.package} schema={vm.schema} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      pkg,
+      schema,
+      menu: menusApi.getMenu('packages', 'packages'),
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/generators/configuration.tsx

@@ -0,0 +1,99 @@
+import { PackageSchemaViewer } from '@nrwl/nx-dev-feature-package-schema-viewer';
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import {
+  ProcessedPackageMetadata,
+  SchemaMetadata,
+} from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { schema } from '../../../../lib/rspack/schema/generators/configuration';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function ConfigurationGenerator({
+  menu,
+  pkg,
+  schema,
+}: {
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+  schema: SchemaMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: {
+    menu: Menu;
+    package: ProcessedPackageMetadata;
+    schema: SchemaMetadata;
+  } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+    schema: schema,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaViewer pkg={vm.package} schema={vm.schema} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      pkg,
+      schema,
+      menu: menusApi.getMenu('packages', 'packages'),
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/generators/index.tsx

@@ -0,0 +1,92 @@
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { PackageSchemaSubList } from '../../../../../feature-package-schema-viewer/src/lib/package-schema-sub-list';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function GeneratorsIndex({
+  menu,
+  pkg,
+}: {
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: { menu: Menu; package: ProcessedPackageMetadata } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaSubList pkg={vm.package} type={'generator'} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps(): Promise<{
+  props: {
+    menu: MenuItem[];
+    pkg: ProcessedPackageMetadata;
+  };
+}> {
+  return {
+    props: {
+      menu: menusApi.getMenu('packages', 'packages'),
+      pkg,
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/generators/init.tsx

@@ -0,0 +1,99 @@
+import { PackageSchemaViewer } from '@nrwl/nx-dev-feature-package-schema-viewer';
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import {
+  ProcessedPackageMetadata,
+  SchemaMetadata,
+} from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../../lib/menus.api';
+import { useNavToggle } from '../../../../lib/navigation-toggle.effect';
+import { schema } from '../../../../lib/rspack/schema/generators/init';
+import { pkg } from '../../../../lib/rspack/pkg';
+
+export default function InitGenerator({
+  menu,
+  pkg,
+  schema,
+}: {
+  menu: MenuItem[];
+  pkg: ProcessedPackageMetadata;
+  schema: SchemaMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: {
+    menu: Menu;
+    package: ProcessedPackageMetadata;
+    schema: SchemaMetadata;
+  } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+    schema: schema,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaViewer pkg={vm.package} schema={vm.schema} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      pkg,
+      schema,
+      menu: menusApi.getMenu('packages', 'packages'),
+    },
+  };
+}

nx-dev/nx-dev/pages/packages/rspack/index.tsx

@@ -0,0 +1,91 @@
+import { PackageSchemaList } from '@nrwl/nx-dev-feature-package-schema-viewer';
+import { getPackagesSections } from '@nrwl/nx-dev/data-access-menu';
+import { sortCorePackagesFirst } from '@nrwl/nx-dev/data-access-packages';
+import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
+import { ProcessedPackageMetadata } from '@nrwl/nx-dev/models-package';
+import { DocumentationHeader, SidebarContainer } from '@nrwl/nx-dev/ui-common';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { menusApi } from '../../../lib/menus.api';
+import { useNavToggle } from '../../../lib/navigation-toggle.effect';
+import { content } from '../../../lib/rspack/content/overview';
+import { pkg } from '../../../lib/rspack/pkg';
+
+export default function RspackIndex({
+  overview,
+  menu,
+  pkg,
+}: {
+  menu: MenuItem[];
+  overview: string;
+  pkg: ProcessedPackageMetadata;
+}): JSX.Element {
+  const router = useRouter();
+  const { toggleNav, navIsOpen } = useNavToggle();
+  const wrapperElement = useRef(null);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
+  const vm: { menu: Menu; package: ProcessedPackageMetadata } = {
+    menu: {
+      sections: sortCorePackagesFirst<MenuSection>(
+        getPackagesSections(menu),
+        'id'
+      ),
+    },
+    package: pkg,
+  };
+
+  /**
+   * Show either the docviewer or the package view depending on:
+   * - docviewer: it is a documentation document
+   * - packageviewer: it is package generated documentation
+   */
+
+  return (
+    <div id="shell" className="flex h-full flex-col">
+      <div className="w-full flex-shrink-0">
+        <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
+      </div>
+      <main
+        id="main"
+        role="main"
+        className="flex h-full flex-1 overflow-y-hidden"
+      >
+        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <div
+          ref={wrapperElement}
+          id="wrapper"
+          data-testid="wrapper"
+          className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+        >
+          <PackageSchemaList pkg={vm.package} overview={overview} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      menu: menusApi.getMenu('packages', 'packages'),
+      overview: content,
+      pkg,
+    },
+  };
+}

nx-dev/nx-dev/public/images/icons/rspack.svg

@@ -0,0 +1,44 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="100.000000pt" height="85.000000pt" viewBox="0 0 100.000000 85.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,85.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M697 785 c-51 -19 -134 -81 -142 -105 -10 -30 1 -38 60 -45 45 -6 55
+-11 55 -26 0 -23 -8 -23 -34 -4 -33 25 -84 19 -115 -14 l-27 -29 -28 44 c-34
+54 -97 93 -165 101 -96 11 -202 -64 -237 -169 -16 -49 -8 -88 19 -88 7 0 18
+-14 26 -31 23 -52 76 -97 137 -115 52 -15 54 -17 40 -33 -20 -22 -20 -41 -1
+-41 9 0 14 -8 12 -22 -2 -18 3 -23 21 -21 22 3 30 -11 12 -22 -12 -7 -13 -42
+-2 -49 4 -2 48 4 97 15 62 14 110 19 155 15 l65 -5 -55 10 c-30 5 -62 15 -71
+22 -82 62 -129 105 -129 118 0 9 14 22 31 29 17 7 40 28 52 45 20 30 24 32 42
+19 10 -8 26 -14 34 -13 14 0 14 1 1 6 -20 8 -50 34 -50 45 0 4 11 6 25 2 60
+-15 115 43 115 120 0 20 5 36 11 36 12 0 8 -109 -5 -141 -4 -8 3 -30 16 -50
+32 -46 77 -52 113 -13 14 15 28 24 32 20 4 -4 8 -35 8 -70 0 -53 -4 -68 -27
+-98 -15 -19 -46 -45 -70 -57 -37 -18 -39 -21 -17 -21 14 0 49 -7 78 -16 42
+-12 56 -13 65 -3 8 9 8 10 -1 5 -16 -9 -86 21 -78 34 9 15 36 12 56 -6 19 -17
+43 -10 35 11 -2 7 1 18 7 24 8 8 5 17 -11 34 -27 29 -28 54 -2 62 35 11 80 76
+80 115 0 53 -32 97 -79 111 -24 7 -43 20 -47 31 -3 10 -16 25 -29 34 l-23 15
+29 29 c47 46 31 90 -32 90 -22 0 -21 2 9 33 46 48 20 61 -61 32z m73 -4 c0 -5
+-17 -23 -37 -40 l-38 -31 41 0 c48 0 74 -22 57 -48 -12 -20 -91 -82 -104 -82
+-17 0 -10 48 9 53 9 3 3 5 -14 6 -66 2 -124 14 -124 25 0 21 64 74 120 100 57
+27 90 33 90 17z m-427 -92 c77 -21 146 -111 147 -189 0 -90 -42 -158 -116
+-186 -38 -14 -52 -15 -97 -5 -67 15 -112 42 -137 83 -28 46 -25 64 12 77 17 6
+32 10 33 9 0 -2 5 -16 11 -33 11 -35 46 -43 122 -26 40 9 49 8 60 -7 13 -16
+14 -15 10 3 -4 22 -14 23 -110 10 -62 -8 -61 -9 -82 58 -5 16 -8 17 -43 1 -63
+-27 -80 -28 -88 -6 -9 31 30 113 74 156 60 58 127 77 204 55z m245 -160 c2
+-25 -3 -40 -18 -54 -28 -25 -54 -10 -58 34 -4 41 14 63 47 59 22 -3 26 -9 29
+-39z m158 -15 c7 -27 -18 -74 -39 -74 -39 0 -51 69 -16 94 27 18 47 11 55 -20z
+m59 -31 c-7 -52 -31 -100 -56 -116 -22 -14 -66 -1 -79 22 -9 18 -7 19 23 14
+47 -7 86 28 94 85 3 23 10 42 15 42 6 0 8 -18 3 -47z m71 12 c46 -32 59 -120
+17 -120 -11 0 -25 -3 -29 -7 -4 -5 0 -8 9 -8 24 0 21 -17 -4 -31 -24 -12 -39
+1 -39 34 0 10 -5 28 -11 39 -6 12 -8 38 -4 64 7 48 23 56 61 29z m-546 -235
+c-45 -25 -61 -25 -31 0 13 11 33 20 45 20 17 -1 14 -4 -14 -20z m70 -15 c0
+-10 -65 -45 -83 -45 -16 0 -16 2 -1 25 12 19 25 25 50 25 19 0 34 -2 34 -5z
+m446 -32 c-7 -7 -26 7 -26 19 0 6 6 6 15 -2 9 -7 13 -15 11 -17z m-387 -7 c18
+-21 -16 -54 -71 -71 -51 -15 -66 -8 -49 24 27 50 95 77 120 47z m381 -28 c0
+-5 -9 -4 -20 2 -11 6 -20 18 -20 27 0 14 2 14 20 -2 11 -10 20 -22 20 -27z"/>
+<path d="M607 394 c-15 -13 -24 -24 -19 -24 14 0 58 37 52 43 -3 3 -18 -6 -33
+-19z"/>
+<path d="M617 349 c7 -7 15 -10 18 -7 3 3 -2 9 -12 12 -14 6 -15 5 -6 -5z"/>
+</g>
+</svg>

nx-dev/ui-common/src/lib/sidebar-container.tsx

@@ -1,5 +1,98 @@
 import { Menu } from '@nrwl/nx-dev/models-menu';
 import { Sidebar, SidebarMobile } from '@nrwl/nx-dev/ui-common';
+import { useMemo } from 'react';
+
+// TODO(jack): Remove this rspack modification once we move rspack into main repo (when stable).
+const rspackSection = {
+  id: 'rspack',
+  name: 'rspack',
+  itemList: [
+    {
+      id: 'documents',
+      path: '/packages/rspack/documents',
+      name: 'documents',
+      children: [
+        {
+          name: 'Overview of the Nx Rspack plugin',
+          path: '/packages/rspack/documents/overview',
+          id: 'overview',
+          isExternal: false,
+          children: [],
+          disableCollapsible: false,
+        },
+        {
+          name: 'Rspack plugins',
+          path: '/packages/rspack/documents/rspack-plugins',
+          id: 'rspack-plugins',
+          isExternal: false,
+          children: [],
+          disableCollapsible: false,
+        },
+        {
+          name: 'How to configure Rspack in your Nx workspace',
+          path: '/packages/rspack/documents/rspack-config-setup',
+          id: 'rspack-config-setup',
+          isExternal: false,
+          children: [],
+          disableCollapsible: false,
+        },
+      ],
+      isExternal: false,
+      disableCollapsible: false,
+    },
+    {
+      id: 'executors',
+      path: '/packages/rspack/executors',
+      name: 'executors',
+      children: [
+        {
+          id: 'rspack',
+          path: '/packages/rspack/executors/rspack',
+          name: 'rspack',
+          children: [],
+          isExternal: false,
+          disableCollapsible: false,
+        },
+        {
+          id: 'dev-server',
+          path: '/packages/rspack/executors/dev-server',
+          name: 'dev-server',
+          children: [],
+          isExternal: false,
+          disableCollapsible: false,
+        },
+      ],
+      isExternal: false,
+      disableCollapsible: false,
+    },
+    {
+      id: 'generators',
+      path: '/packages/rspack/generators',
+      name: 'generators',
+      children: [
+        {
+          id: 'init',
+          path: '/packages/rspack/generators/init',
+          name: 'init',
+          children: [],
+          isExternal: false,
+          disableCollapsible: false,
+        },
+        {
+          id: 'configuration',
+          path: '/packages/rspack/generators/configuration',
+          name: 'configuration',
+          children: [],
+          isExternal: false,
+          disableCollapsible: false,
+        },
+      ],
+      isExternal: false,
+      disableCollapsible: false,
+    },
+  ],
+  hideSectionHeader: false,
+};
 
 export function SidebarContainer({
   menu,
@@ -8,12 +101,26 @@ export function SidebarContainer({
   menu: Menu;
   navIsOpen: boolean;
 }): JSX.Element {
+  // TODO(jack): Remove this rspack modification once we move rspack into main repo (when stable).
+  const menuWithRspack = useMemo(() => {
+    const storybookIdx = menu.sections.findIndex((s) => s.id === 'storybook');
+    const sections = [
+      ...menu.sections.slice(0, storybookIdx),
+      rspackSection,
+      ...menu.sections.slice(storybookIdx),
+    ];
+    return {
+      ...menu,
+      sections,
+    };
+  }, [menu]);
+
   return (
     <div id="sidebar" data-testid="sidebar">
-      <SidebarMobile menu={menu} navIsOpen={navIsOpen} />
+      <SidebarMobile menu={menuWithRspack} navIsOpen={navIsOpen} />
       <div className="hidden h-full w-72 flex-col border-r border-slate-200 dark:border-slate-700 dark:bg-slate-900 md:flex">
         <div className="relative flex flex-grow overflow-y-scroll p-4">
-          <Sidebar menu={menu} />
+          <Sidebar menu={menuWithRspack} />
         </div>
         {/*<div className="relative flex flex-col space-y-1 border-t border-slate-200 px-4 py-2 dark:border-slate-700">*/}
         {/*  // another section.*/}

nx-dev/ui-references/src/lib/icons-map.ts

@@ -20,6 +20,7 @@ export const iconsMap: Record<string, string> = {
   react: '/images/icons/react.svg',
   'react-native': '/images/icons/react.svg',
   rollup: '/images/icons/rollup.svg',
+  rspack: '/images/icons/rspack.svg',
   storybook: '/images/icons/storybook.svg',
   vite: '/images/icons/vite.svg',
   web: '/images/icons/html5.svg',