diff --git a/apps/website-new/docs/en/configure/dev.mdx b/apps/website-new/docs/en/configure/dev.mdx index 5f62fb4219f..c1aeb71b5eb 100644 --- a/apps/website-new/docs/en/configure/dev.mdx +++ b/apps/website-new/docs/en/configure/dev.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Dev Configuration +description: Configure Module Federation development-time behaviors, including live reload and type hint reloading. +--- + # dev - Type: `boolean | PluginDevOptions` diff --git a/apps/website-new/docs/en/configure/dts.mdx b/apps/website-new/docs/en/configure/dts.mdx index 3f1fbf30d45..d2fe79d64f4 100644 --- a/apps/website-new/docs/en/configure/dts.mdx +++ b/apps/website-new/docs/en/configure/dts.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | DTS Configuration +description: Configure the generation and consumption of TypeScript definition (`.d.ts`) files for Module Federation. +--- + # dts - Type: `boolean | PluginDtsOptions` diff --git a/apps/website-new/docs/en/configure/experiments.mdx b/apps/website-new/docs/en/configure/experiments.mdx index 190302a504d..e7f55b75455 100644 --- a/apps/website-new/docs/en/configure/experiments.mdx +++ b/apps/website-new/docs/en/configure/experiments.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Experiments Configuration +description: Enable and configure experimental features within the Module Federation plugin. +--- + # Experiments The `experiments` configuration is used to enable experimental capabilities in the plugin. diff --git a/apps/website-new/docs/en/configure/exposes.mdx b/apps/website-new/docs/en/configure/exposes.mdx index 3864929c17d..81a7e71f52a 100644 --- a/apps/website-new/docs/en/configure/exposes.mdx +++ b/apps/website-new/docs/en/configure/exposes.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Exposes Configuration +description: Define the modules and file entries exposed by a Module Federation producer application. +--- + # Exposes - Type: `PluginExposesOptions` diff --git a/apps/website-new/docs/en/configure/filename.mdx b/apps/website-new/docs/en/configure/filename.mdx index 06d36fecfb0..635c6f0919d 100644 --- a/apps/website-new/docs/en/configure/filename.mdx +++ b/apps/website-new/docs/en/configure/filename.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Filename Configuration +description: Specify the output filename for the Module Federation remote entry file (e.g., remoteEntry.js). +--- + # Filename - Type: `string` diff --git a/apps/website-new/docs/en/configure/getpublicpath.mdx b/apps/website-new/docs/en/configure/getpublicpath.mdx index 95874e167f8..4528f7b3ec6 100644 --- a/apps/website-new/docs/en/configure/getpublicpath.mdx +++ b/apps/website-new/docs/en/configure/getpublicpath.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | GetPublicPath Configuration +description: Configure a dynamic public path function for Module Federation remote modules. +--- + # GetPublicPath - Type: `string` diff --git a/apps/website-new/docs/en/configure/implementation.mdx b/apps/website-new/docs/en/configure/implementation.mdx index 1ba27a7ed87..d9e37bd6839 100644 --- a/apps/website-new/docs/en/configure/implementation.mdx +++ b/apps/website-new/docs/en/configure/implementation.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Implementation Configuration +description: Specify a custom implementation path for the Module Federation runtime tools. +--- + # Implementation - Type: `string` diff --git a/apps/website-new/docs/en/configure/index.mdx b/apps/website-new/docs/en/configure/index.mdx index 8e2c76c371e..04a2f1cf322 100644 --- a/apps/website-new/docs/en/configure/index.mdx +++ b/apps/website-new/docs/en/configure/index.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Configuration Overview +description: A comprehensive overview of all available configuration options for the Module Federation plugin. +--- + # Configuration Overview The current page lists all the configuration options for `Module Federation`. Please refer to the documentation for [`Rspack Plugin`](../guide/basic/rspack) and [`Webpack Plugin`](../guide/basic/webpack) and [`Vite Plugin`](../guide/basic/vite) to understand how to use them. diff --git a/apps/website-new/docs/en/configure/manifest.mdx b/apps/website-new/docs/en/configure/manifest.mdx index 6d99b0f3a96..2aded8fdb89 100644 --- a/apps/website-new/docs/en/configure/manifest.mdx +++ b/apps/website-new/docs/en/configure/manifest.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Manifest Configuration +description: Configure the generation of the Module Federation manifest file (`mf-manifest.json`). +--- + # manifest - Type: `boolean | PluginManifestOptions` diff --git a/apps/website-new/docs/en/configure/name.mdx b/apps/website-new/docs/en/configure/name.mdx index 40c64106aa8..dddccc70c06 100644 --- a/apps/website-new/docs/en/configure/name.mdx +++ b/apps/website-new/docs/en/configure/name.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Name Configuration +description: Define the unique name for the Module Federation application or module. +--- + # Name - Type: `string` diff --git a/apps/website-new/docs/en/configure/remotes.mdx b/apps/website-new/docs/en/configure/remotes.mdx index 6728109cbb5..388c768f276 100644 --- a/apps/website-new/docs/en/configure/remotes.mdx +++ b/apps/website-new/docs/en/configure/remotes.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Remotes Configuration +description: Configure remote Module Federation applications or modules to be consumed. +--- + # Remotes - Type: `PluginRemoteOptions` diff --git a/apps/website-new/docs/en/configure/runtimeplugins.mdx b/apps/website-new/docs/en/configure/runtimeplugins.mdx index 9235630ca6a..5280553f093 100644 --- a/apps/website-new/docs/en/configure/runtimeplugins.mdx +++ b/apps/website-new/docs/en/configure/runtimeplugins.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | RuntimePlugins Configuration +description: Add custom plugins to extend or modify the Module Federation runtime behavior. +--- + # runtimePlugins - Type: `string[]` diff --git a/apps/website-new/docs/en/configure/shareStrategy.mdx b/apps/website-new/docs/en/configure/shareStrategy.mdx index 07a3850b129..e05d42ca33c 100644 --- a/apps/website-new/docs/en/configure/shareStrategy.mdx +++ b/apps/website-new/docs/en/configure/shareStrategy.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | ShareStrategy Configuration +description: Define the loading strategy (`version-first` or `loaded-first`) for shared dependencies in Module Federation. +--- + # shareStrategy - Type: `'version-first' | 'loaded-first'` diff --git a/apps/website-new/docs/en/configure/shared.mdx b/apps/website-new/docs/en/configure/shared.mdx index 9be6d34233a..5e012723ff9 100644 --- a/apps/website-new/docs/en/configure/shared.mdx +++ b/apps/website-new/docs/en/configure/shared.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Options | Shared Configuration +description: Configure shared dependencies between Module Federation applications to optimize performance and ensure consistency. +--- + # Shared The `shared` configuration is used to share common dependencies between consumers and producers, reducing the runtime download volume and thus improving performance. `shared` allows you to configure rules for reusing dependency versions. You can learn more about the scenarios where `shared` is applicable and how to use `shared` through the [FAQ](#faq). diff --git a/apps/website-new/docs/en/guide/_meta.json b/apps/website-new/docs/en/guide/_meta.json index 4a5d4f2f583..993fa2aa852 100644 --- a/apps/website-new/docs/en/guide/_meta.json +++ b/apps/website-new/docs/en/guide/_meta.json @@ -7,7 +7,7 @@ { "type": "dir", "name": "basic", - "label": "basic" + "label": "Basic" }, { "type": "dir", @@ -15,8 +15,8 @@ "label": "Frameworks" }, { - "type":"dir", - "name":"troubleshooting", - "label":"Troubleshooting" + "type": "dir", + "name": "troubleshooting", + "label": "Troubleshooting" } ] diff --git a/apps/website-new/docs/en/guide/basic/_meta.json b/apps/website-new/docs/en/guide/basic/_meta.json index 70b2cb33df2..68d019fbf5a 100644 --- a/apps/website-new/docs/en/guide/basic/_meta.json +++ b/apps/website-new/docs/en/guide/basic/_meta.json @@ -1 +1,42 @@ -["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt","cli"] +[ + { + "type": "file", + "name": "runtime", + "label": "Runtime" + }, + { + "type": "file", + "name": "rsbuild", + "label": "Rsbuild Plugin" + }, + { + "type": "file", + "name": "rspack", + "label": "Rspack Plugin" + }, + { + "type": "file", + "name": "webpack", + "label": "Webpack Plugin" + }, + { + "type": "file", + "name": "vite", + "label": "Vite Plugin" + }, + { + "type": "file", + "name": "chrome-devtool", + "label": "Chrome DevTools" + }, + { + "type": "file", + "name": "type-prompt", + "label": "Type Prompt" + }, + { + "type": "file", + "name": "cli", + "label": "CLI" + } +] diff --git a/apps/website-new/docs/en/guide/basic/chrome-devtool.mdx b/apps/website-new/docs/en/guide/basic/chrome-devtool.mdx index bfac45685fe..ef9ac25379a 100644 --- a/apps/website-new/docs/en/guide/basic/chrome-devtool.mdx +++ b/apps/website-new/docs/en/guide/basic/chrome-devtool.mdx @@ -1,4 +1,7 @@ -# Chrome DevTools +--- +title: Chrome DevTools +description: Learn how to use Chrome DevTools with Module Federation for debugging, inspecting dependencies, and monitoring module loading. +--- The `Microfrontend` architecture differs from the traditional monolithic application development model. Its characteristics of separate development, deployment, and debugging necessitate a new set of debugging tools to meet new usage scenarios, such as: how to verify the effect of modules in actual projects when developing `Module Federation`, whether the dependencies of `Module Federation` are reused with the host environment, which `Module Federation` modules are loaded on the current page, the dependency relationships of `Module Federation`, and how the data flow between `Module Federation` works. diff --git a/apps/website-new/docs/en/guide/basic/cli.mdx b/apps/website-new/docs/en/guide/basic/cli.mdx index fd9ce752a95..b723e362425 100644 --- a/apps/website-new/docs/en/guide/basic/cli.mdx +++ b/apps/website-new/docs/en/guide/basic/cli.mdx @@ -1,3 +1,8 @@ +--- +title: CLI +description: Comprehensive guide to using the Module Federation CLI for project creation, management, and development workflows. +--- + # CLI `@module-federation/enhanced` and `@module-federation/modern-js` provides a lightweight CLI. @@ -61,4 +66,4 @@ The `mf dts` command will automatically generate or pull type declaration files If you only use the runtime API, you need to create a temporary `module-federation.config.ts` file, write the remote configuration you need to get the type, and then run the `mf dts` command. If you are only using the runtime API, you need to create a temporary `module-federation.config.ts` file, configure [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls), and then run the `mf dts` command. -::: \ No newline at end of file +::: diff --git a/apps/website-new/docs/en/guide/basic/rsbuild.mdx b/apps/website-new/docs/en/guide/basic/rsbuild.mdx index 58df77a26ef..86863340146 100644 --- a/apps/website-new/docs/en/guide/basic/rsbuild.mdx +++ b/apps/website-new/docs/en/guide/basic/rsbuild.mdx @@ -1,4 +1,7 @@ -# Rsbuild Plugin +--- +title: Rsbuild Plugin +description: Learn how to integrate Module Federation with Rsbuild, including configuration options and best practices for micro-frontend development. +--- Help users quickly build Module Federation products in **Rsbuild App** or **Rslib** diff --git a/apps/website-new/docs/en/guide/basic/rspack.mdx b/apps/website-new/docs/en/guide/basic/rspack.mdx index 746fe13811f..784bf26ee40 100644 --- a/apps/website-new/docs/en/guide/basic/rspack.mdx +++ b/apps/website-new/docs/en/guide/basic/rspack.mdx @@ -1,4 +1,7 @@ -# Rspack Plugin +--- +title: Rspack Plugin +description: Guide to using Module Federation with Rspack, leveraging its high-performance build capabilities for micro-frontend applications. +--- :::info Note Requires Rspack version 0.5.0 or above. diff --git a/apps/website-new/docs/en/guide/basic/runtime.mdx b/apps/website-new/docs/en/guide/basic/runtime.mdx index d83a4310718..6686c23f702 100644 --- a/apps/website-new/docs/en/guide/basic/runtime.mdx +++ b/apps/website-new/docs/en/guide/basic/runtime.mdx @@ -1,3 +1,8 @@ +--- +title: Runtime +description: Comprehensive guide to the Module Federation runtime system, including module loading, sharing, and runtime plugin capabilities. +--- + # Federation Runtime :::tip diff --git a/apps/website-new/docs/en/guide/basic/type-prompt.mdx b/apps/website-new/docs/en/guide/basic/type-prompt.mdx index a9897f7fb5e..037475af27b 100644 --- a/apps/website-new/docs/en/guide/basic/type-prompt.mdx +++ b/apps/website-new/docs/en/guide/basic/type-prompt.mdx @@ -1,3 +1,8 @@ +--- +title: Remote Type Hints +description: Learn how to use Module Federation's type hinting system for improved TypeScript support and development experience. +--- + # Remote Type Hints Just like NPM Packages, `Module Federation` products also generate types and enjoy type hot reloading, although the products are hosted on a remote CDN. diff --git a/apps/website-new/docs/en/guide/basic/vite.mdx b/apps/website-new/docs/en/guide/basic/vite.mdx index 2d3ca33e4b5..c0b99e62672 100644 --- a/apps/website-new/docs/en/guide/basic/vite.mdx +++ b/apps/website-new/docs/en/guide/basic/vite.mdx @@ -1,3 +1,8 @@ +--- +title: Vite Plugin +description: Guide to integrating Module Federation with Vite for fast development and optimized builds in micro-frontend applications. +--- + # Vite Plugin - Can build modules that meet the `Module Federation` loading specifications. @@ -10,7 +15,7 @@ Except for the [dev、dts](../../configure/dev.html) options, all options are su - roadmap 🗓️ - When a module has remote types, it will automatically download and consume the types of the remote modules. - Consuming remote modules will have hot update capabilities. - - nuxt ssr + - nuxt ssr ## Quick Start diff --git a/apps/website-new/docs/en/guide/basic/webpack.mdx b/apps/website-new/docs/en/guide/basic/webpack.mdx index 50c79e3e7c8..ee60f52edf4 100644 --- a/apps/website-new/docs/en/guide/basic/webpack.mdx +++ b/apps/website-new/docs/en/guide/basic/webpack.mdx @@ -1,3 +1,8 @@ +--- +title: Webpack Plugin +description: Configuring and using the Module Federation plugin within Webpack build environments. +--- + # Webpack Plugin - Can build modules that meet the `Module Federation` loading specifications. diff --git a/apps/website-new/docs/en/guide/framework/modernjs.mdx b/apps/website-new/docs/en/guide/framework/modernjs.mdx index f228d41e95e..bb33b2b9920 100644 --- a/apps/website-new/docs/en/guide/framework/modernjs.mdx +++ b/apps/website-new/docs/en/guide/framework/modernjs.mdx @@ -1,3 +1,8 @@ +--- +title: Modern.js Plugin +description: Learn how to integrate Module Federation with Modern.js for building scalable micro-frontend applications. +--- + # Modern.js This plugin provides Module Federation supporting functions for Modern.js diff --git a/apps/website-new/docs/en/guide/framework/nextjs.mdx b/apps/website-new/docs/en/guide/framework/nextjs.mdx index 352ec9f27da..7807163e829 100644 --- a/apps/website-new/docs/en/guide/framework/nextjs.mdx +++ b/apps/website-new/docs/en/guide/framework/nextjs.mdx @@ -1,3 +1,8 @@ +--- +title: Next.js Plugin +description: Comprehensive guide to using Module Federation with Next.js, including Server-Side Rendering and static site generation support. +--- + import { Badge } from '@theme';
diff --git a/apps/website-new/docs/en/guide/start/features.mdx b/apps/website-new/docs/en/guide/start/features.mdx index f90e4f4d928..c5bba6f080c 100644 --- a/apps/website-new/docs/en/guide/start/features.mdx +++ b/apps/website-new/docs/en/guide/start/features.mdx @@ -1,3 +1,8 @@ +--- +title: Features +description: Explore the advanced capabilities of Module Federation 2.0, including runtime plugins, manifest support, dynamic type hints, and framework integrations. +--- + # Feature Navigation Here, you will discover the key functionalities offered through Module Federation. This version of Module Federation, distinct from those integrated into Webpack and Rspack, leverages the advanced features of the bundler tool. It offers enhanced capabilities designed to fulfill more demanding requirements of large-scale application development. diff --git a/apps/website-new/docs/en/guide/start/glossary.mdx b/apps/website-new/docs/en/guide/start/glossary.mdx index a213fe7a44d..b229571a318 100644 --- a/apps/website-new/docs/en/guide/start/glossary.mdx +++ b/apps/website-new/docs/en/guide/start/glossary.mdx @@ -1,3 +1,8 @@ +--- +title: Glossary +description: Comprehensive glossary of Module Federation terms and concepts, including producers, consumers, micro-frontends, and bundler definitions. +--- + # Glossary of Terms ## Module Federation diff --git a/apps/website-new/docs/en/guide/start/index.mdx b/apps/website-new/docs/en/guide/start/index.mdx index ca5a9d0a2a2..242ebb550da 100644 --- a/apps/website-new/docs/en/guide/start/index.mdx +++ b/apps/website-new/docs/en/guide/start/index.mdx @@ -1,3 +1,8 @@ +--- +title: Introduction +description: Learn about Module Federation 2.0, a powerful architecture pattern for building micro-frontends with enhanced features like runtime plugins, manifest support, and dynamic type hints. +--- + # Introduction ### 💡 What is Module Federation? diff --git a/apps/website-new/docs/en/guide/start/npm-packages.mdx b/apps/website-new/docs/en/guide/start/npm-packages.mdx index 1bf58738993..5d4786ef8e9 100644 --- a/apps/website-new/docs/en/guide/start/npm-packages.mdx +++ b/apps/website-new/docs/en/guide/start/npm-packages.mdx @@ -1,3 +1,8 @@ +--- +title: NPM Packages +description: Comprehensive guide to all Module Federation NPM packages, including enhanced core, runtime, Rspack plugin, Next.js integration, and utility packages. +--- + # npm Packages This document showcases all npm package information maintained by the Module Federation team. diff --git a/apps/website-new/docs/en/guide/start/quick-start.mdx b/apps/website-new/docs/en/guide/start/quick-start.mdx index e30c6bf8c0f..f4db9559212 100644 --- a/apps/website-new/docs/en/guide/start/quick-start.mdx +++ b/apps/website-new/docs/en/guide/start/quick-start.mdx @@ -1,3 +1,8 @@ +--- +title: Quick Start Guide +description: Step-by-step guide to setting up your first Module Federation project, including creating providers and consumers with modern build tools. +--- + import { Badge, PackageManagerTabs } from "@theme"; # Quick Start Guide diff --git a/apps/website-new/docs/en/guide/start/setting-up-env.mdx b/apps/website-new/docs/en/guide/start/setting-up-env.mdx index e2189734cea..7c914861408 100644 --- a/apps/website-new/docs/en/guide/start/setting-up-env.mdx +++ b/apps/website-new/docs/en/guide/start/setting-up-env.mdx @@ -1,3 +1,8 @@ +--- +title: Environment Setup +description: Complete guide to setting up your development environment for Module Federation, including Node.js requirements and essential web development prerequisites. +--- + # Setting Up the Environment Module Federation is a JavaScript application partitioning architecture pattern (similar to microservices on the server side) that allows you to share code and resources between multiple JavaScript applications (or micro frontends). This document is aimed at beginner users and will guide you through setting up the basic environment for Module Federation. diff --git a/apps/website-new/docs/en/guide/troubleshooting/_meta.json b/apps/website-new/docs/en/guide/troubleshooting/_meta.json index 33f7f1de891..472fc3d0857 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/_meta.json +++ b/apps/website-new/docs/en/guide/troubleshooting/_meta.json @@ -1,22 +1,30 @@ [ - "overview", + { + "type": "file", + "name": "overview", + "label": "Overview" + }, { "type": "dir", "name": "runtime", "label": "Runtime", - "collapsed":true + "collapsed": true }, { "type": "dir", "name": "build", "label": "Build", - "collapsed":true + "collapsed": true }, { "type": "dir", "name": "type", "label": "Type", - "collapsed":true + "collapsed": true }, - "other" + { + "type": "file", + "name": "other", + "label": "Other" + } ] diff --git a/apps/website-new/docs/en/guide/troubleshooting/build/BUILD-001.mdx b/apps/website-new/docs/en/guide/troubleshooting/build/BUILD-001.mdx index 7023a611215..a582ab1d4b0 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/build/BUILD-001.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/build/BUILD-001.mdx @@ -1,3 +1,8 @@ +--- +title: BUILD-001 | Expose Module Not Found +description: Troubleshooting guide for the BUILD-001 error, which occurs when the exposed module resources cannot be found properly during the build process. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; diff --git a/apps/website-new/docs/en/guide/troubleshooting/build/_meta.json b/apps/website-new/docs/en/guide/troubleshooting/build/_meta.json new file mode 100644 index 00000000000..4e803e8d10c --- /dev/null +++ b/apps/website-new/docs/en/guide/troubleshooting/build/_meta.json @@ -0,0 +1,7 @@ +[ + { + "type": "file", + "name": "BUILD-001", + "label": "BUILD-001" + } +] diff --git a/apps/website-new/docs/en/guide/troubleshooting/other.mdx b/apps/website-new/docs/en/guide/troubleshooting/other.mdx index d457f55be79..3c487de9fa5 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/other.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/other.mdx @@ -1,3 +1,8 @@ +--- +title: Common Issues | Module Federation Troubleshooting +description: Solutions for common Module Federation implementation issues, including React hook errors, dependency conflicts, and other frequently encountered problems. +--- + # Other This section is a collection of common issues related to the implementation of `Module Federation` in general(not specific error code). @@ -89,4 +94,4 @@ When `exposes` is set in the project, it will be regarded as a producer. To ensu * [Modern.js]: Set [devServer.headers](https://modernjs.dev/configure/app/tools/dev-server.html#headers) value to the specified domain whitelist instead of `*` -* [Rsbuild]: Set [server.cors.origin](https://rsbuild.dev/config/server/cors#origin) value to the specified domain whitelist instead of `*` \ No newline at end of file +* [Rsbuild]: Set [server.cors.origin](https://rsbuild.dev/config/server/cors#origin) value to the specified domain whitelist instead of `*` diff --git a/apps/website-new/docs/en/guide/troubleshooting/overview.md b/apps/website-new/docs/en/guide/troubleshooting/overview.md index 54d901cf75b..6c2804bf3e7 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/overview.md +++ b/apps/website-new/docs/en/guide/troubleshooting/overview.md @@ -1,3 +1,8 @@ +--- +title: Troubleshooting Overview | Module Federation Error Guide +description: Comprehensive guide to troubleshooting Module Federation issues, including error codes, common problems, and solutions. +--- + # Overview Module Federation currently provides **Build Tools**, **Runtime API**, **Type Hints** and **Debugging Tools**. In order to locate the corresponding problems faster, we classify error messages. Divide them into the following categories: diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-001.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-001.mdx index f348fc57ede..dbaaf6f3872 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-001.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-001.mdx @@ -1,3 +1,8 @@ +--- +title: RUNTIME-001 | Remote Entry Not Found +description: Troubleshooting guide for the RUNTIME-001 error, which occurs when the producer entry file cannot be found or loaded properly. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; import Table from '@components/Table' diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-002.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-002.mdx index cfa62a96d9e..60ef97d7e4a 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-002.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-002.mdx @@ -1,3 +1,8 @@ +--- +title: RUNTIME-002 | Cannot Get Init Function +description: Troubleshooting guide for the RUNTIME-002 error, where the 'init' function is missing from the remote container. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; import Table from '@components/Table' diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-003.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-003.mdx index 79a7e458b8c..44ff7e19a40 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-003.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-003.mdx @@ -1,3 +1,8 @@ +--- +title: RUNTIME-003 | Manifest Load Failed +description: Troubleshooting guide for the RUNTIME-003 error, occurring when the manifest file fails to load, possibly due to an incorrect URL or CORS issues. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-004.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-004.mdx index fe74b0eee93..4a007a5f0b8 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-004.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-004.mdx @@ -1,3 +1,8 @@ +--- +title: RUNTIME-004 | Remote Module Not Found +description: Troubleshooting guide for the RUNTIME-004 error, when a matching remote module cannot be located, possibly due to registration issues, incorrect alias/name, or a 'beforeRequest' hook. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-005.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-005.mdx index 3d3a485743b..a1500b592d8 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-005.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-005.mdx @@ -1,3 +1,8 @@ +--- +title: "RUNTIME-005 | Shared Module Not Ready for Eager Use" +description: "Troubleshooting guide for the RUNTIME-005 error, occurring when a shared module is configured as async but is attempted to be consumed eagerly without eager: true" +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-006.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-006.mdx index ef162504f2d..15473afd367 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-006.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-006.mdx @@ -1,3 +1,8 @@ +--- +title: RUNTIME-006 | Invalid Sync Share Usage +description: Troubleshooting guide for the RUNTIME-006 error, caused by using 'loadShareSync' for a shared dependency that has not yet been loaded. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-007.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-007.mdx index b1d2d8c13a0..d97a679993d 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-007.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-007.mdx @@ -1,3 +1,8 @@ +--- +title: RUNTIME-007 | Missing Snapshot Data for Versioned Remote +description: Troubleshooting guide for the RUNTIME-007 error, occurring when the remote entry uses a version number but the corresponding snapshot data is missing. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx index a96cb6d655b..78cc9e711df 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx @@ -1,3 +1,8 @@ +--- +title: RUNTIME-008 | Resource Load Failed +description: Troubleshooting guide for the RUNTIME-008 error, occurring when a resource fails to load during runtime, possibly due to network issues or incorrect address. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; @@ -9,4 +14,4 @@ Failed to load resource during the runtime process, which may be caused by netwo ## Solutions -check whether the resource address is correct. If the resource address is correct, check whether the network is stable. If the network is unstable, you can add the retry mechanism, refer to [Runtime Retry Mechanism](en/plugin/plugins/retry-plugin.html). \ No newline at end of file +check whether the resource address is correct. If the resource address is correct, check whether the network is stable. If the network is unstable, you can add the retry mechanism, refer to [Runtime Retry Mechanism](en/plugin/plugins/retry-plugin.html). diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/_meta.json b/apps/website-new/docs/en/guide/troubleshooting/runtime/_meta.json new file mode 100644 index 00000000000..f4b5b2952b4 --- /dev/null +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/_meta.json @@ -0,0 +1,42 @@ +[ + { + "type": "file", + "name": "RUNTIME-001", + "label": "RUNTIME-001" + }, + { + "type": "file", + "name": "RUNTIME-002", + "label": "RUNTIME-002" + }, + { + "type": "file", + "name": "RUNTIME-003", + "label": "RUNTIME-003" + }, + { + "type": "file", + "name": "RUNTIME-004", + "label": "RUNTIME-004" + }, + { + "type": "file", + "name": "RUNTIME-005", + "label": "RUNTIME-005" + }, + { + "type": "file", + "name": "RUNTIME-006", + "label": "RUNTIME-006" + }, + { + "type": "file", + "name": "RUNTIME-007", + "label": "RUNTIME-007" + }, + { + "type": "file", + "name": "RUNTIME-008", + "label": "RUNTIME-008" + } +] diff --git a/apps/website-new/docs/en/guide/troubleshooting/type/TYPE-001.mdx b/apps/website-new/docs/en/guide/troubleshooting/type/TYPE-001.mdx index 7b3014442bc..fd8941e06c9 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/type/TYPE-001.mdx +++ b/apps/website-new/docs/en/guide/troubleshooting/type/TYPE-001.mdx @@ -1,3 +1,8 @@ +--- +title: TYPE-001 | Type Generation Failed +description: Troubleshooting guide for the TYPE-001 error, which occurs when TypeScript type generation fails due to missing or incorrect tsconfig.json properties. +--- + import ErrorCodeTitle from '@components/ErrorCodeTitle'; diff --git a/apps/website-new/docs/en/guide/troubleshooting/type/_meta.json b/apps/website-new/docs/en/guide/troubleshooting/type/_meta.json deleted file mode 100644 index d8fe1767352..00000000000 --- a/apps/website-new/docs/en/guide/troubleshooting/type/_meta.json +++ /dev/null @@ -1,4 +0,0 @@ -[ - "overview", - "TYPE-001" -] diff --git a/apps/website-new/docs/en/guide/troubleshooting/type/overview.md b/apps/website-new/docs/en/guide/troubleshooting/type/overview.md index fdfd3043b96..d8491a4b657 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/type/overview.md +++ b/apps/website-new/docs/en/guide/troubleshooting/type/overview.md @@ -1,3 +1,8 @@ +--- +title: Type Errors Overview | Module Federation Troubleshooting +description: Overview of Module Federation type errors, covering fixed error codes and scenario-specific issues like type aliases. +--- + # Overview Type errors are divided into two types: fixed error code errors and scenario-related errors. diff --git a/apps/website-new/docs/en/plugin/dev/_meta.json b/apps/website-new/docs/en/plugin/dev/_meta.json index a7d5eda49cb..5dcb951a09d 100644 --- a/apps/website-new/docs/en/plugin/dev/_meta.json +++ b/apps/website-new/docs/en/plugin/dev/_meta.json @@ -1 +1,7 @@ -["index"] +[ + { + "type": "file", + "name": "index", + "label": "Plugin System" + } +] diff --git a/apps/website-new/docs/en/plugin/dev/index.mdx b/apps/website-new/docs/en/plugin/dev/index.mdx index e05846a7aa6..3bbb78b0bea 100644 --- a/apps/website-new/docs/en/plugin/dev/index.mdx +++ b/apps/website-new/docs/en/plugin/dev/index.mdx @@ -1,3 +1,8 @@ +--- +title: Plugin Development | Module Federation Runtime Extension +description: Comprehensive guide to developing custom runtime plugins for Module Federation, including hooks, structure, and registration methods. +--- + # Plugin System Module Federation provides a lightweight runtime plugin system for implementing most of its features and allowing users to extend functionalities. diff --git a/apps/website-new/docs/en/plugin/plugins/_meta.json b/apps/website-new/docs/en/plugin/plugins/_meta.json index 4e00247085d..6553fb7d2d8 100644 --- a/apps/website-new/docs/en/plugin/plugins/_meta.json +++ b/apps/website-new/docs/en/plugin/plugins/_meta.json @@ -1 +1,12 @@ -["index", "retry-plugin"] +[ + { + "type": "file", + "name": "index", + "label": "Node Plugin" + }, + { + "type": "file", + "name": "retry-plugin", + "label": "Resource Retry Plugin" + } +] diff --git a/apps/website-new/docs/en/plugin/plugins/index.mdx b/apps/website-new/docs/en/plugin/plugins/index.mdx index 77904b74bb8..57938c0fc5c 100644 --- a/apps/website-new/docs/en/plugin/plugins/index.mdx +++ b/apps/website-new/docs/en/plugin/plugins/index.mdx @@ -1,3 +1,8 @@ +--- +title: Node Plugin | Server-Side Module Federation +description: Guide to using the Module Federation Node Plugin for server-side rendering (SSR) and backend micro-frontend architectures. +--- + import { PackageManagerTabs, Tabs, Tab } from '@theme'; # Node Plugin diff --git a/apps/website-new/docs/en/plugin/plugins/retry-plugin.mdx b/apps/website-new/docs/en/plugin/plugins/retry-plugin.mdx index 9e03a9af0a8..2116bc14a9e 100644 --- a/apps/website-new/docs/en/plugin/plugins/retry-plugin.mdx +++ b/apps/website-new/docs/en/plugin/plugins/retry-plugin.mdx @@ -1,3 +1,8 @@ +--- +title: Retry Plugin | Resource Loading Resilience +description: Learn how to use the Module Federation Retry Plugin to automatically retry failed resource loads (fetch/script) and improve application stability. +--- + import { PackageManagerTabs, Tabs, Tab } from '@theme'; # Resource Retry Plugin diff --git a/apps/website-new/docs/en/practice/bridge/index.mdx b/apps/website-new/docs/en/practice/bridge/index.mdx index 47fa3fff47a..a8815f0d80d 100644 --- a/apps/website-new/docs/en/practice/bridge/index.mdx +++ b/apps/website-new/docs/en/practice/bridge/index.mdx @@ -1,3 +1,8 @@ +--- +title: Bridge Overview +description: Introduction to the Module Federation Bridge utility for loading application-level modules across different frameworks (React, Vue) and managing inter-app routing. +--- + # Bridge Overview ## Introduction diff --git a/apps/website-new/docs/en/practice/bridge/react-bridge.mdx b/apps/website-new/docs/en/practice/bridge/react-bridge.mdx index f39eaa2c8c8..f2e216ce70b 100644 --- a/apps/website-new/docs/en/practice/bridge/react-bridge.mdx +++ b/apps/website-new/docs/en/practice/bridge/react-bridge.mdx @@ -1,3 +1,8 @@ +--- +title: React Bridge +description: Guide to using @module-federation/bridge-react for exporting and consuming React application-level modules within a Module Federation architecture. +--- + # React Bridge `@module-federation/bridge-react` provides bridge utility functions for React applications: @@ -198,8 +203,8 @@ function createBridgeComponent( interface ProviderFnParams { /** Root component to be remotely loaded */ rootComponent: React.ComponentType; - - /** + + /** * Custom render function for custom rendering logic * @param App - React element * @param id - DOM element or string ID @@ -209,7 +214,7 @@ interface ProviderFnParams { App: React.ReactElement, id?: HTMLElement | string, ) => RootType | Promise; - + /** * Custom function to create React root node * @param container - Container element @@ -228,10 +233,10 @@ interface ProviderFnParams { interface CreateRootOptions { /** Add prefix to generated React IDs to avoid ID conflicts */ identifierPrefix?: string; - + /** Callback function to handle recoverable errors during React rendering */ onRecoverableError?: (error: unknown) => void; - + /** Transition callbacks for React 18 concurrent features */ transitionCallbacks?: TransitionCallbacks; } @@ -260,19 +265,19 @@ interface RemoteComponentParams< T = Record, E extends keyof T = keyof T > { - /** + /** * Function to load remote module * Example: () => loadRemote('remote1/export-app') or () => import('remote1/export-app') */ loader: () => Promise; - + /** Component displayed when loading remote module */ loading: React.ReactNode; - + /** Error component displayed when loading or rendering remote module fails */ fallback: React.ComponentType<{ error: Error }>; - - /** + + /** * Specify module export name * Default is 'default' */ @@ -286,18 +291,18 @@ interface RemoteComponentProps> { /** Properties passed to remote component */ props?: T; - /** + /** * Memory route configuration, used to control child application routing as memoryRouter * Will not directly display URL in browser address bar */ memoryRoute?: { entryPath: string }; - + /** Base path name */ basename?: string; - + /** Style */ style?: React.CSSProperties; - + /** Class name */ className?: string; } diff --git a/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx b/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx index 92a92f4c39b..48784856646 100644 --- a/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx +++ b/apps/website-new/docs/en/practice/bridge/vue-bridge.mdx @@ -1,3 +1,8 @@ +--- +title: Vue Bridge (Vue 3) +description: Guide to using @module-federation/bridge-vue3 for exporting and consuming Vue 3 application-level modules within a Module Federation architecture. +--- + # Vue Bridge (for Vue v3) `@module-federation/bridge-vue3` provides a `bridge` utility function for Vue V3 applications. The provided `createBridgeComponent` can be used to export application-level modules, and `createRemoteComponent` can be used to load application-level modules. diff --git a/apps/website-new/docs/en/practice/frameworks/modern/_meta.json b/apps/website-new/docs/en/practice/frameworks/modern/_meta.json index 1b38edd64ba..30900d22f1a 100644 --- a/apps/website-new/docs/en/practice/frameworks/modern/_meta.json +++ b/apps/website-new/docs/en/practice/frameworks/modern/_meta.json @@ -1 +1,12 @@ -["index","dynamic-remote"] +[ + { + "type": "file", + "name": "index", + "label": "Quick Start" + }, + { + "type": "file", + "name": "dynamic-remote", + "label": "Dynamic load provider" + } +] diff --git a/apps/website-new/docs/en/practice/frameworks/next/_meta.json b/apps/website-new/docs/en/practice/frameworks/next/_meta.json index 9d91eff3307..35853b1c1f8 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/_meta.json +++ b/apps/website-new/docs/en/practice/frameworks/next/_meta.json @@ -1 +1,27 @@ -["index", "importing-components","importing-pages","express","presets"] +[ + { + "type": "file", + "name": "index", + "label": "Next.js Integration" + }, + { + "type": "file", + "name": "importing-components", + "label": "Component Importing" + }, + { + "type": "file", + "name": "importing-pages", + "label": "Page Importing" + }, + { + "type": "file", + "name": "express", + "label": "Express Integration" + }, + { + "type": "file", + "name": "presets", + "label": "Preset Configuration" + } +] diff --git a/apps/website-new/docs/en/practice/frameworks/next/dynamic-remotes.mdx b/apps/website-new/docs/en/practice/frameworks/next/dynamic-remotes.mdx index db11cc17c8d..147edf346fb 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/dynamic-remotes.mdx +++ b/apps/website-new/docs/en/practice/frameworks/next/dynamic-remotes.mdx @@ -1,3 +1,8 @@ +--- +title: Dynamic Remotes +description: Guide to implementing dynamic remote loading in Next.js Module Federation, including runtime initialization and custom remote configuration. +--- + # Dynamic Remotes ```js diff --git a/apps/website-new/docs/en/practice/frameworks/next/express.mdx b/apps/website-new/docs/en/practice/frameworks/next/express.mdx index 293585394a7..7eae746b638 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/express.mdx +++ b/apps/website-new/docs/en/practice/frameworks/next/express.mdx @@ -1,3 +1,8 @@ +--- +title: Express Integration +description: Guide to using Express.js with Next.js Module Federation, including hot module reloading setup and route cache management. +--- + import {Steps} from '@theme' # Working with Express.js diff --git a/apps/website-new/docs/en/practice/frameworks/next/importing-components.mdx b/apps/website-new/docs/en/practice/frameworks/next/importing-components.mdx index a3d4b714567..817cd9ab200 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/importing-components.mdx +++ b/apps/website-new/docs/en/practice/frameworks/next/importing-components.mdx @@ -1,3 +1,8 @@ +--- +title: Component Importing +description: Learn different methods for importing federated components in Next.js, including lazy loading, eager imports, and client-side only components. +--- + # Importing Components Remote Modules can be imported in various ways. diff --git a/apps/website-new/docs/en/practice/frameworks/next/importing-pages.mdx b/apps/website-new/docs/en/practice/frameworks/next/importing-pages.mdx index 0d4f01dedf6..1e7b85b3111 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/importing-pages.mdx +++ b/apps/website-new/docs/en/practice/frameworks/next/importing-pages.mdx @@ -1,3 +1,8 @@ +--- +title: Page Importing +description: Guide to importing and routing federated pages in Next.js, including handling data fetching methods and page lifecycle management. +--- + import {Tabs, Tab} from '@theme' # Routing & Importing Pages diff --git a/apps/website-new/docs/en/practice/frameworks/next/index.mdx b/apps/website-new/docs/en/practice/frameworks/next/index.mdx index 3702d398bf5..58897f6b7af 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/index.mdx +++ b/apps/website-new/docs/en/practice/frameworks/next/index.mdx @@ -1,5 +1,6 @@ --- -title: "Basic Example" +title: Next.js Integration +description: Guide to integrating Module Federation with Next.js, including SSR setup, environment configuration, and project initialization for Pages Router. --- # Next.js & Module Federation diff --git a/apps/website-new/docs/en/practice/frameworks/next/presets.mdx b/apps/website-new/docs/en/practice/frameworks/next/presets.mdx index 8ea6e5c3917..10c39e9b20c 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/presets.mdx +++ b/apps/website-new/docs/en/practice/frameworks/next/presets.mdx @@ -1,3 +1,8 @@ +--- +title: Preset Configuration +description: Overview of Next.js Module Federation presets, including shared dependencies, page exposure configuration, and build options. +--- + # Presets ## Shared diff --git a/apps/website-new/docs/en/practice/frameworks/react/_meta.json b/apps/website-new/docs/en/practice/frameworks/react/_meta.json index 5c817e06ae4..8453e2f265a 100644 --- a/apps/website-new/docs/en/practice/frameworks/react/_meta.json +++ b/apps/website-new/docs/en/practice/frameworks/react/_meta.json @@ -1 +1,17 @@ -["index", "using-nx-for-react", "i18n-react"] +[ + { + "type": "file", + "name": "index", + "label": "React with Rsbuild" + }, + { + "type": "file", + "name": "using-nx-for-react", + "label": "Nx CLI Integration" + }, + { + "type": "file", + "name": "i18n-react", + "label": "React i18n Integration" + } +] diff --git a/apps/website-new/docs/en/practice/frameworks/react/i18n-react.mdx b/apps/website-new/docs/en/practice/frameworks/react/i18n-react.mdx index 46484b9d2ba..942fa51b2bd 100644 --- a/apps/website-new/docs/en/practice/frameworks/react/i18n-react.mdx +++ b/apps/website-new/docs/en/practice/frameworks/react/i18n-react.mdx @@ -1,5 +1,6 @@ --- -title: "Internationalization (i18n)" +title: React i18n Integration +description: Guide to implementing internationalization (i18n) in React micro-frontends using Module Federation, including language synchronization and state management. --- # Implementing Internationalization (i18n) with Module Federation in React Micro-Frontends diff --git a/apps/website-new/docs/en/practice/frameworks/react/index.mdx b/apps/website-new/docs/en/practice/frameworks/react/index.mdx index bcd297f926e..cd437516e31 100644 --- a/apps/website-new/docs/en/practice/frameworks/react/index.mdx +++ b/apps/website-new/docs/en/practice/frameworks/react/index.mdx @@ -1,5 +1,6 @@ --- -title: "Basic CRA with Rsbuild" +title: React with Rsbuild +description: Step-by-step guide to setting up a React application with Rsbuild and Module Federation, including environment setup and component sharing. --- # Basic CRA with Rsbuild diff --git a/apps/website-new/docs/en/practice/frameworks/react/using-nx-for-react.mdx b/apps/website-new/docs/en/practice/frameworks/react/using-nx-for-react.mdx index dfbb367c0cc..3ac45fdcd9a 100644 --- a/apps/website-new/docs/en/practice/frameworks/react/using-nx-for-react.mdx +++ b/apps/website-new/docs/en/practice/frameworks/react/using-nx-for-react.mdx @@ -1,3 +1,8 @@ +--- +title: Nx CLI Integration +description: Comprehensive guide to using Nx CLI for React projects with Module Federation, including host and remote application setup, development workflow, and build processes. +--- + import { Steps, Badge } from '@theme'; # Using Nx CLI for React