feat: extract @module-federation/data-fetch from bridge-react

.changeset/config.json

@@ -15,6 +15,7 @@
       "@module-federation/dts-plugin",
       "@module-federation/third-party-dts-extractor",
       "@module-federation/devtools",
+      "@module-federation/data-fetch",
       "@module-federation/bridge-react",
       "@module-federation/bridge-vue3",
       "@module-federation/bridge-shared",

.changeset/extract-data-fetch.md

@@ -0,0 +1,7 @@
+---
+"@module-federation/data-fetch": patch
+"@module-federation/bridge-react": patch
+"@module-federation/bridge-vue3": patch
+---
+
+Extract data-fetch into the framework-agnostic `@module-federation/data-fetch` package. `@module-federation/bridge-react` and `@module-federation/bridge-vue3` continue to re-export data-fetch APIs for backward compatibility.

AGENTS.md

@@ -257,6 +257,9 @@ Guidance:
   - validation that was run
   - any failed or skipped checks, with cause
 - If a PR is docs-only, say that explicitly and keep the body brief.
+- When changing user-facing Module Federation APIs or packages (especially publishable packages under `packages/`), update matching documentation in `apps/website-new/docs/` in the same PR, or explain in the PR why docs are deferred.
+- When updating website docs, keep all published locales for that page (currently `en`, `zh`, and `pt-BR` under `apps/website-new/docs/`) consistent for the same conceptual change; do not leave one locale with untranslated English paste-ins.
+- Website docs in `apps/website-new/docs/` are the public documentation source of truth and must stay current with published package surfaces.
 
 ## Webpack Internal Access
 

apps/website-new/docs/en/guide/bridge/overview.mdx

@@ -143,6 +143,8 @@ In addition to application-level modularity, Bridge also supports component-leve
 
 #### Core Features
 
+Core data-fetch utilities (`cache`, `prefetch`, loader types, and related helpers) live in `@module-federation/data-fetch`. `@module-federation/bridge-react/data-fetch` re-exports them and adds React-specific lazy-loading APIs such as `lazyLoadComponentPlugin` and `createLazyComponent`.
+
 - **Data Prefetching**: Support component-level data prefetching, ensuring data is ready when components load
 - **Error Boundaries**: Built-in error handling mechanisms, component loading failures don't affect the main application
 - **Loading States**: Rich loading state management with support for custom loading indicators

apps/website-new/docs/en/guide/bridge/react/load-component.mdx

@@ -8,6 +8,12 @@ This chapter introduces how to use `createLazyComponent` to load remote React co
 - **Data prefetching**: use `prefetch` to start dependency requests before the component loads, avoiding request waterfalls where data is requested only after the component is ready
 - **SSR control**: precisely control whether remote components render on the server, helping avoid CSS flickering issues
 
+:::info
+
+Component-level data-fetch utilities (`cache`, `prefetch`, `DataFetchParams`, and related types) are provided by `@module-federation/data-fetch`. `@module-federation/bridge-react/data-fetch` re-exports them for backward compatibility and adds React-specific APIs such as `lazyLoadComponentPlugin` and `createLazyComponent`.
+
+:::
+
 ## Installation
 
 import { PackageManagerTabs } from '@theme';

apps/website-new/docs/en/guide/data/data-fetch-cache.mdx

@@ -2,10 +2,19 @@
 
 The `cache` function allows you to cache the results of data fetching or computations. It provides fine-grained control over data and is suitable for scenarios such as Client-Side Rendering (CSR) and Server-Side Rendering (SSR).
 
+Examples import from `@module-federation/data-fetch`. Bridge packages (`@module-federation/bridge-react/data-fetch`, `@module-federation/bridge-vue3`) still re-export `cache` and related helpers for backward compatibility.
+
+```bash
+npm install @module-federation/data-fetch
+# or: pnpm add @module-federation/data-fetch
+```
+
+If you only import from bridge packages, the re-exports still work without a direct dependency on `@module-federation/data-fetch`.
+
 ## Basic Usage
 
 ```ts
-import { cache } from '@module-federation/bridge-react/data-fetch';
+import { cache } from '@module-federation/data-fetch';
 
 export type Data = {
   data: string;
@@ -59,7 +68,7 @@ This function is only supported for use within a DataLoader.
 After each computation, the framework records the time the data was written to the cache. When the function is called again, it checks if the cache has expired based on the `maxAge` parameter. If it has, the `fn` function is re-executed; otherwise, the cached data is returned.
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 
 const getDashboardStats = cache(
   async () => {
@@ -78,7 +87,7 @@ The `revalidate` parameter sets a time window for revalidating the cache after i
 In the following example, if `getDashboardStats` is called within the 2-minute non-expired window, it returns cached data. If the cache is expired (between 2 and 3 minutes), incoming requests will first receive the old data, and then a new request will be made in the background to update the cache.
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 
 const getDashboardStats = cache(
   async () => {
@@ -96,7 +105,7 @@ const getDashboardStats = cache(
 The `tag` parameter is used to identify a cache with a label, which can be a string or an array of strings. This tag can be used to invalidate the cache, and multiple cache functions can share the same tag.
 
 ```ts
-import { cache, revalidateTag } from '@module-federation/bridge-react/data-fetch';
+import { cache, revalidateTag } from '@module-federation/data-fetch';
 
 const getDashboardStats = cache(
   async () => {
@@ -124,7 +133,7 @@ revalidateTag('dashboard-stats'); // This will invalidate the caches for both ge
 The `getKey` parameter allows you to customize how cache keys are generated. For example, you might only need to rely on a subset of the function's parameters to differentiate caches. It is a function that receives the same arguments as the original function and returns a string as the cache key:
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 import { fetchUserData } from './api';
 
 const getUser = cache(
@@ -156,7 +165,7 @@ The `generateKey` function ensures that a consistent, unique key is generated ev
 :::
 
 ```ts
-import { cache, CacheTime, generateKey } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime, generateKey } from '@module-federation/data-fetch';
 import { fetchUserData } from './api';
 
 const getUser = cache(
@@ -190,7 +199,7 @@ If you only want to derive the cache key from some arguments, use `getKey`. Use
 The example below demonstrates how `customKey` enables cache sharing across functions:
 
 ```ts
-import { cache } from '@module-federation/bridge-react/data-fetch';
+import { cache } from '@module-federation/data-fetch';
 import { fetchUserData } from './api';
 
 // Different functions, but they can share a cache via customKey.
@@ -246,7 +255,7 @@ const getUserD = cache(
 The `onCache` parameter allows you to track cache statistics, such as hit rates. It is a callback function that receives information about each cache operation, including its status, key, parameters, and result. You can return `false` from `onCache` to prevent a cache hit.
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 
 // Track cache statistics.
 const stats = {
@@ -314,7 +323,7 @@ Considering that the content cached by the `cache` function is not expected to b
 You can specify the cache storage limit using the `configureCache` function:
 
 ```ts
-import { configureCache, CacheSize } from '@module-federation/bridge-react/data-fetch';
+import { configureCache, CacheSize } from '@module-federation/data-fetch';
 
 configureCache({
   maxSize: CacheSize.MB * 10, // 10MB

apps/website-new/docs/en/guide/data/data-fetch.mdx

@@ -20,6 +20,21 @@ The capability described in this document targets the former — "component-leve
 
 ## How to Use
 
+:::info Package layout
+
+Core data-fetch APIs (`cache`, `prefetch`, types such as `DataFetchParams`, and related utilities) live in the framework-agnostic `@module-federation/data-fetch` package. `@module-federation/bridge-react/data-fetch` and `@module-federation/bridge-vue3` re-export these APIs for convenience. React's `createLazyComponent` remains the React UI adapter for loading component remotes (see [Lazy Load and Prefetch Components](/guide/bridge/react/load-component.html)).
+
+Install `@module-federation/data-fetch` when importing from it directly:
+
+```bash
+npm install @module-federation/data-fetch
+# or: pnpm add @module-federation/data-fetch
+```
+
+If you only import from bridge packages (`@module-federation/bridge-react/data-fetch`, `@module-federation/bridge-vue3`), the re-exports still work without a direct dependency on `@module-federation/data-fetch`.
+
+:::
+
 Data fetching supports both SSR and CSR scenarios. The sections below cover producer and consumer separately:
 
 ### Producer
@@ -49,7 +64,7 @@ Example file layout:
 The convention file must export a function named `fetchData`, which runs before the remote component renders:
 
 ```ts title="List.data.ts"
-import type { DataFetchParams } from '@module-federation/bridge-react/data-fetch';
+import type { DataFetchParams } from '@module-federation/data-fetch';
 export type Data = {
   data: string;
 };

apps/website-new/docs/pt-BR/guide/bridge/overview.mdx

@@ -143,6 +143,8 @@ In addition para aplicação-level modularity, Bridge também suporta componente
 
 #### Core Features
 
+Os utilitários principais de data-fetch (`cache`, `prefetch`, tipos de loader e utilitários relacionados) ficam em `@module-federation/data-fetch`. `@module-federation/bridge-react/data-fetch` os reexporta e adiciona APIs de carregamento lazy específicas do React, como `lazyLoadComponentPlugin` e `createLazyComponent`.
+
 - **Pré-busca de dadosing**: Suporte componente-level dados prefetching, ensuring dados é ready quando componentes carregue
 - **Erro Boundaries**: Built-em tratamento de erros mechanisms, componente carregamento falhas don't affect o principal aplicação
 - **Carregamento States**: Rich estado de carregamento management com suporte for custom carregamento indicators

apps/website-new/docs/pt-BR/guide/bridge/react/load-component.mdx

@@ -1,4 +1,4 @@
-# Lazy Carregue e Pré-busca Componentes
+# Carregamento lazy e prefetch de componentes
 
 Este chapter introduces como para usar `createLazyComponent` para carregar remote React componentes on demand em uma aplicação host.
 
@@ -8,6 +8,12 @@ Este chapter introduces como para usar `createLazyComponent` para carregar remot
 - **Dados prefetching**: use `prefetch` para começa dependência requests antes o componente carrega, avoiding request waterfalls onde dados é requested apenas depois o componente é ready
 - **SSR control**: precisely control whether remote componentes render no servidor, helping avoid CSS flickering issues
 
+:::info
+
+Os utilitários de data-fetch em nível de componente (`cache`, `prefetch`, `DataFetchParams` e tipos relacionados) são fornecidos por `@module-federation/data-fetch`. `@module-federation/bridge-react/data-fetch` os reexporta para compatibilidade com versões anteriores e adiciona APIs específicas do React, como `lazyLoadComponentPlugin` e `createLazyComponent`.
+
+:::
+
 ## Instalação
 
 import { PackageManagerTabs } from '@theme';

apps/website-new/docs/pt-BR/guide/data/data-fetch-cache.mdx

@@ -2,10 +2,19 @@
 
 O `cache` função allows você para cache o results de dados fetching ou computations. It fornece fine-grained control over dados e é suitable for scenarios such as Cliente-Side Rendering (CSR) e Servidor-Side Rendering (SSR).
 
+Os exemplos abaixo importam de `@module-federation/data-fetch`. Os pacotes bridge (`@module-federation/bridge-react/data-fetch`, `@module-federation/bridge-vue3`) ainda reexportam `cache` e utilitários relacionados para compatibilidade com versões anteriores.
+
+```bash
+npm install @module-federation/data-fetch
+# ou: pnpm add @module-federation/data-fetch
+```
+
+Se você importar apenas dos pacotes bridge, as reexportações continuam funcionando sem dependência direta em `@module-federation/data-fetch`.
+
 ## Básico Uso
 
 ```ts
-import { cache } from '@module-federation/bridge-react/data-fetch';
+import { cache } from '@module-federation/data-fetch';
 
 export type Data = {
   data: string;
@@ -59,7 +68,7 @@ Este função é apenas compatível for use within uma DataLoader.
 Depois each computation, o framework records o time o dados was written para o cache. Quando o função é chamada again, it checks se o cache has expired based no `maxAge` parameter. Se it has, o `fn` função é re-executed; caso contrário, o cached dados é retornado.
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 
 const getDashboardStats = cache(
   async () => {
@@ -78,7 +87,7 @@ O `revalidate` parameter sets uma time window for revalidating o cache depois it
 No seguintes exemplo, se `getDashboardStats` é chamada within o 2-minute non-expired window, ele retorna cached dados. Se o cache é expired (entre 2 e 3 minutes), incoming requests vai primeiro receive o old dados, e then uma nova request vai ser made no background para atualizar o cache.
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 
 const getDashboardStats = cache(
   async () => {
@@ -96,7 +105,7 @@ const getDashboardStats = cache(
 O `tag` parameter é usado para identify uma cache com uma label, que pode ser uma string ou um array de strings. Este tag pode ser usado para invalidate o cache, e multiple cache funções pode compartilhe o mesmo tag.
 
 ```ts
-import { cache, revalidateTag } from '@module-federation/bridge-react/data-fetch';
+import { cache, revalidateTag } from '@module-federation/data-fetch';
 
 const getDashboardStats = cache(
   async () => {
@@ -124,7 +133,7 @@ revalidateTag('dashboard-stats'); // This will invalidate the caches for both ge
 O `getKey` parameter allows você para customize como cache keys são generated. Por exemplo, você might apenas precisa rely on uma subset do função's parameters para differentiate caches. It é uma função esse receives o mesmo arguments as o original função e retorna uma string as o cache key:
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 import { fetchUserData } from './api';
 
 const getUser = cache(
@@ -156,7 +165,7 @@ O `generateKey` função ensures esse uma consistent, unique key é generated ev
 :::
 
 ```ts
-import { cache, CacheTime, generateKey } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime, generateKey } from '@module-federation/data-fetch';
 import { fetchUserData } from './api';
 
 const getUser = cache(
@@ -190,7 +199,7 @@ Se você apenas want para derive o cache key de some arguments, use `getKey`. Us
 O exemplo below demonstrates como `customKey` enables cache compartilhamento across funções:
 
 ```ts
-import { cache } from '@module-federation/bridge-react/data-fetch';
+import { cache } from '@module-federation/data-fetch';
 import { fetchUserData } from './api';
 
 // Different functions, but they can share a cache via customKey.
@@ -246,7 +255,7 @@ const getUserD = cache(
 O `onCache` parameter allows você para track cache statistics, such as hit rates. It é uma callback função esse receives information about each cache operation, including its status, key, parameters, e result. Você pode retornar `false` de `onCache` para prevent uma cache hit.
 
 ```ts
-import { cache, CacheTime } from '@module-federation/bridge-react/data-fetch';
+import { cache, CacheTime } from '@module-federation/data-fetch';
 
 // Track cache statistics.
 const stats = {
@@ -314,7 +323,7 @@ Considering esse o content cached pelo `cache` função é não expected para se
 Você pode specify o cache storage limit usando o `configureCache` função:
 
 ```ts
-import { configureCache, CacheSize } from '@module-federation/bridge-react/data-fetch';
+import { configureCache, CacheSize } from '@module-federation/data-fetch';
 
 configureCache({
   maxSize: CacheSize.MB * 10, // 10MB

apps/website-new/docs/pt-BR/guide/data/data-fetch.mdx

@@ -20,6 +20,21 @@ O capability described em este document targets o former — "componente-level"
 
 ## How para Use
 
+:::info Estrutura dos pacotes
+
+As APIs principais de data-fetch (`cache`, `prefetch`, tipos como `DataFetchParams` e utilitários relacionados) ficam no pacote agnóstico de framework `@module-federation/data-fetch`. `@module-federation/bridge-react/data-fetch` e `@module-federation/bridge-vue3` reexportam essas APIs por conveniência. O `createLazyComponent` do React continua sendo o adaptador de UI React para carregar componentes remotos (veja [Carregamento lazy e prefetch de componentes](/guide/bridge/react/load-component.html)).
+
+Instale `@module-federation/data-fetch` ao importar diretamente dele:
+
+```bash
+npm install @module-federation/data-fetch
+# ou: pnpm add @module-federation/data-fetch
+```
+
+Se você importar apenas dos pacotes bridge (`@module-federation/bridge-react/data-fetch`, `@module-federation/bridge-vue3`), as reexportações continuam funcionando sem dependência direta em `@module-federation/data-fetch`.
+
+:::
+
 Dados fetching suporta both SSR e CSR scenarios. O sections below cover producer e consumer separadamente:
 
 ### Producer
@@ -49,7 +64,7 @@ Exemplo arquivo layout:
 O convention arquivo deve exporte uma função chamado `fetchData`, que runs antes o remote componente renders:
 
 ```ts title="List.data.ts"
-import type { DataFetchParams } from '@module-federation/bridge-react/data-fetch';
+import type { DataFetchParams } from '@module-federation/data-fetch';
 export type Data = {
   data: string;
 };

apps/website-new/docs/zh/guide/bridge/overview.mdx

@@ -145,6 +145,8 @@ Bridge 解决了现代前端开发中的几个关键挑战：
 
 #### 核心特性
 
+核心 data-fetch 工具（`cache`、`prefetch`、loader 类型及相关辅助函数）位于 `@module-federation/data-fetch`。`@module-federation/bridge-react/data-fetch` 会重新导出它们，并提供 `lazyLoadComponentPlugin`、`createLazyComponent` 等 React 懒加载 API。
+
 - **数据预取**：支持组件级别的数据预取，确保组件加载时数据已就绪
 - **错误边界**：内置错误处理机制，组件加载失败不影响主应用
 - **加载状态**：提供丰富的加载状态管理，支持自定义加载指示器

apps/website-new/docs/zh/guide/bridge/react/load-component.mdx

@@ -8,6 +8,12 @@
 - **数据预取**：配合 `prefetch` 在组件加载前发起依赖请求，避免组件就绪后才串行请求数据带来的瀑布
 - **SSR 控制**：可精细控制远程组件是否在服务端渲染，避免出现 CSS 闪烁问题
 
+:::info
+
+组件级 data-fetch 工具（`cache`、`prefetch`、`DataFetchParams` 及相关类型）由 `@module-federation/data-fetch` 提供。`@module-federation/bridge-react/data-fetch` 会重新导出它们以保持向后兼容，并提供 `lazyLoadComponentPlugin`、`createLazyComponent` 等 React 专用 API。
+
+:::
+
 ## 安装
 
 import { PackageManagerTabs } from '@theme';