#Rspress

Te ayuda a compilar y consumir productos de Module Federation en Rspress.

#Inicio rápido

#Instalación

Puedes instalar el plugin con el siguiente comando:

npm add @module-federation/rspress-plugin

yarn add @module-federation/rspress-plugin

pnpm add @module-federation/rspress-plugin

bun add @module-federation/rspress-plugin

#Crear module-federation.config.ts

Crea el archivo module-federation.config.ts con el siguiente contenido:

import { createModuleFederationConfig } from '@module-federation/rspress-plugin';

export default createModuleFederationConfig({
  filename: 'remoteEntry.js',
  name: 'mf_doc',
  exposes: {
    './intro-en': './docs/en/guide/intro.mdx',
    './intro-zh': './docs/zh/guide/intro.mdx',
  },
});

#Registrar el plugin

import { defineConfig } from '@rspress/core';
import { pluginModuleFederation } from '@module-federation/rspress-plugin';
import mfConfig from './module-federation.config';

export default defineConfig({
  // ...
  plugins: [pluginModuleFederation(mfConfig)],
  builderConfig: {
    output: {
      assetPrefix: 'https://module-federation.io/',
    },
  },
});

#Cargar fragmentos de documentación

Puedes cargar directamente los fragmentos de documentación exportados en tus archivos mdx.

import Intro from 'mf-doc/intro-zh';

{/* Document fragments support passing parameters, which are consumed as props. */}
<Intro cmdTools={['a','b']} />

Los fragmentos de documentación admiten el paso de parámetros, que se consumen como props.

Si necesitas usar la variable cmdTools en un fragmento de documentación, puedes tomar como referencia lo siguiente:

{(props.cmdTools || ['pkg-a', 'pkg-b']).map(cmdTool=>(<code>{cmdTool}</code>))}

#Configuración

• Tipo:

export declare const pluginModuleFederation: (
  moduleFederationOptions: ModuleFederationOptions,
  rspressOptions?: RspressPluginOptions,
) => RspressPlugin;

type RspressPluginOptions = {
  autoShared?: boolean;
  rebuildSearchIndex?: boolean;
};

#moduleFederationOptions

Configuración de Module Federation

#rspressOptions

Configuración adicional para el plugin de Rspress.

#autoShared

• Tipo: boolean
• Valor por defecto: true

Rspress usa react, react-dom y @mdx-js/react como dependencias de terceros. Estas tres dependencias deben ser singletons, por lo que la configuración shared se inyecta automáticamente durante el build.

También puedes establecer autoShared: false para desactivar este comportamiento.

La configuración shared predeterminada es la siguiente:

  react: {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
  },
  'react/': {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom/': {
    singleton: true,
    requiredVersion: false,
  },
  '@mdx-js/react': {
    singleton: true,
    requiredVersion: false
  },
  '@rspress/core/runtime': {
    singleton: true,
    requiredVersion: false
  }

#rebuildSearchIndex

• Tipo: boolean
• Valor por defecto: true

Rspress genera automáticamente un índice de búsqueda durante el build, pero el proceso de generación solo admite archivos .mdx o .md. Por lo tanto, cuando se carga un fragmento de documentación de Module Federation, no se podrá encontrar mediante la búsqueda.

Para evitarlo, el MF Rspress Plugin regenera el índice de búsqueda a partir del html renderizado una vez completado el SSG, de modo que la búsqueda funcione.

Si usas remoteSearch u otras funciones de búsqueda, puedes establecer rebuildSearchIndex: false para desactivar este comportamiento.

Nota: esta funcionalidad solo tiene efecto en el modo ssg.

#rebuildLlms

• Tipo: boolean
• Valor por defecto: true

Cuando Rspress genera llms.txt y llms-full.txt, es posible que los fragmentos de documentación federados todavía no tengan disponibles el título, la descripción o el contenido de la página.

Para evitar una salida de llms vacía, el MF Rspress Plugin reconstruye la salida de llms a partir del html renderizado una vez completado el SSG.

Puedes establecer rebuildLlms: false para desactivar este comportamiento.

Nota: esta funcionalidad solo tiene efecto en el modo ssg y solo se ejecuta cuando llms de Rspress está habilitado.

#Preguntas frecuentes

#¿Admite la búsqueda local?

Solo se admite el modo ssg. Para más detalles, consulta rebuildSearchIndex.

#Could not parse expression with swc: Expression expected"

Al hacer referencia a un componente MDX, es posible que te encuentres con el siguiente error:

File: "/root/docs/zh/guide/basic/mf.mdx"
Error: "23:8: Could not parse expression with swc: Expression expected"

Se trata de un problema por el que Rspress no consigue analizar correctamente la expresión al procesar el componente MDX. Puedes resolverlo de la siguiente manera:

import RemoteIntroDoc from 'mf-doc/intro';
import Head from '@components/Head';
+ import React from 'react';

- <RemoteIntroDoc head={<Head />} />
+ <RemoteIntroDoc head={React.createElement(Head)}/>