← Volver al listado de tecnologías

Capítulo 9: Integración con Re.Pack

Por: Siempre Listo
rozeniterepackmetromodule-federation

Integración con Re.Pack

Rozenite es compatible con Re.Pack y workflows de Module Federation.

Compatibilidad

Rozenite funciona con:

Configuración con Re.Pack

// webpack.config.js
const { getDefaultConfig } = require('@callstack/repack');

module.exports = (env) => {
  const config = getDefaultConfig(env);

  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        // Rozenite funciona sin alias especiales
      },
    },
  };
};

Module Federation Setup

// Host App
import { RozeniteProvider } from '@rozenite/core';
import { NetworkPlugin } from '@rozenite/network';

function HostApp() {
  return (
    <RozeniteProvider plugins={[NetworkPlugin]}>
      <Suspense fallback={<Loading />}>
        <RemoteModule />
      </Suspense>
    </RozeniteProvider>
  );
}

// Remote Module
// Rozenite captura automáticamente las peticiones
// del módulo remoto
function RemoteModule() {
  useEffect(() => {
    fetch('/api/remote-data'); // Capturado por Network
  }, []);

  return <View>...</View>;
}

Debugging de Módulos Remotos

Rozenite captura actividad de todos los módulos:

┌─────────────────────────────────────┐
│ Network                             │
├─────────────────────────────────────┤
│ [Host] GET /api/user        200     │
│ [Remote:Cart] POST /api/cart 201    │
│ [Remote:Auth] GET /api/token 200    │
└─────────────────────────────────────┘

Configuración Avanzada

const config = {
  // Etiquetar requests por módulo
  tagByModule: true,

  // Filtrar por módulo
  moduleFilter: ['host', 'cart'],
};

Ejercicio Práctico

Objetivo

Configurar Rozenite en un proyecto con Re.Pack.

Pasos

  1. Crea proyecto con Re.Pack (o usa existente)
  2. Instala Rozenite normalmente
  3. Configura el Provider
  4. Verifica que DevTools funciona con webpack
Ver solución 
# Proyecto existente con Re.Pack
npm install @rozenite/core @rozenite/network
// App.tsx
import { RozeniteProvider } from '@rozenite/core';
import { NetworkPlugin } from '@rozenite/network';

export default function App() {
  return (
    <RozeniteProvider
      plugins={[NetworkPlugin]}
      config={{
        enabled: __DEV__,
      }}
    >
      <MainApp />
    </RozeniteProvider>
  );
}
# Ejecutar con Re.Pack
npx react-native webpack-start

Criterios de Éxito

← Volver al listado de tecnologías