Carga dinámica de providers

Modern.js ofrece Data Loader para ayudar con la gestión de datos. Data Loader solo se ejecuta en el lado del servidor y no se vuelve a ejecutar en el cliente.

Este capítulo explica cómo usar Data Loader para obtener la información del producer y cargarlo dinámicamente.

Crear el provider

Crea un nuevo provider para la carga dinámica.

1. Crear el archivo de configuración

Crea un archivo module-federation.config.ts en el directorio raíz del proyecto con el siguiente contenido:

module-federation.config.ts

import { createModuleFederationConfig } from '@module-federation/modern-js-v3';

export default createModuleFederationConfig({
  name: 'dynamic_provider',
  filename: 'remoteEntry.js',
  exposes: {
    './Image': './src/components/Image.tsx',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

2. Aplicar el plugin

Aplica @module-federation/modern-js-v3 en modern.config.ts:

modern.config.ts

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js-v3';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({

  server: {
    ssr: {
      mode: 'stream',
    },
    port: 3008,
  },
  plugins: [appTools(), moduleFederationPlugin()],
});

3. Crear el componente que se va a exponer

Crea el archivo src/components/Image.tsx con el siguiente contenido:

Image.tsx

import React from 'react';
import styles from './Image.module.css';

export default (): JSX.Element => (
  <div
    id="remote-components"
    style={{
      backgroundColor: '#c0e91e',
      color: 'lightgrey',
      padding: '1rem',
    }}
  >
    <h2>
      <strong>dynamic remote</strong>&nbsp;image
    </h2>
    <button
      id="dynamic-remote-components-button"
      style={{ marginBottom: '1rem' }}
      onClick={() => alert('[remote-components] Client side Javascript works!')}
    >
      Click me to test i'm interactive!
    </button>
    <img
      id="dynamic-remote-components-image"
      src="https://module-federation.io/module-federation-logo.svg"
      style={{ width: '100px' }}
      alt="serge"
    />
    <button className={styles['button']}>Button from dynamic remote</button>
  </div>
);

Y crea el archivo de estilos correspondiente con el siguiente contenido:

Image.module.css

.button {
  background: red;
}

Crear el loader

Crea un archivo .data con el mismo nombre junto al archivo de ruta correspondiente. Tomando como ejemplo el directorio raíz src/routes/page.tsx, crea src/routes/page.data.ts:

page.data.ts

import { LoaderFunctionArgs } from '@modern-js/runtime/router';

export type DataLoaderRes = {
  providerList: Array<{
    name: string;
    entry: string;
    id: string;
  }>;
};

const fetchProviderList = async () => {
  const res = await new Promise(resolve => {
    setTimeout(() => {
      resolve([
        {
          name: 'dynamic_provider',
          entry: 'http://localhost:3008/mf-manifest.json',
          id: 'dynamic_provider/Image',
        },
      ]);
    }, 1000);
  });

  return res as DataLoaderRes['providerList'];
};

export const loader = async ({
  request,
}: LoaderFunctionArgs): Promise<DataLoaderRes> => {
  console.log('request params', request);
  const providerList = await fetchProviderList();
  return {
    providerList,
  };
};

Cargar el provider dinámico

Consume los datos del loader y carga dinámicamente el producer correspondiente:

import { loadRemote, registerRemotes, getInstance } from '@module-federation/modern-js-v3/runtime';
import { lazyLoadComponentPlugin } from '@module-federation/modern-js-v3/data-fetch';
// Use import type to get data loader types
import type { DataLoaderRes } from './page.data';
import { useLoaderData } from '@modern-js/runtime/router';

import './index.css';

const instance = getInstance();
instance.registerPlugins([lazyLoadComponentPlugin()]);

const RemoteSSRComponent = instance.createLazyComponent({
  loader: () => import('remote/Image'),
  loading: 'loading...',
  export: 'default',
  fallback: ({ error }) => {
    if (error instanceof Error && error.message.includes('not exist')) {
      return <div>fallback - not existed id</div>;
    }
    return <div>fallback</div>;
  },
});

const Index = () => {
  // get data loader response
  const dataLoader = useLoaderData() as DataLoaderRes;
  // register dynamic remotes before loading them
  registerRemotes(dataLoader.providerList);

  const DynamicRemoteSSRComponents = dataLoader.providerList.map(item => {
    const { id } = item;
    const Com = instance.createLazyComponent({
      loader: () => loadRemote(id),
      loading: 'loading...',
      fallback: ({ error }) => {
        if (error instanceof Error && error.message.includes('not exist')) {
          return <div>fallback - not existed id</div>;
        }
        return <div>fallback</div>;
      },
    });
    return <Com />
  })
  return (
    <div className="container-box">
      <RemoteSSRComponent />
      {DynamicRemoteSSRComponents}
    </div>
  );
}

export default Index;

#Carga dinámica de providers

#Crear el provider

#1. Crear el archivo de configuración

#2. Aplicar el plugin

#3. Crear el componente que se va a exponer

#Crear el loader