architecture-it/microfront-utils

Librería para compartir utilidades para Microfrontends, la manera de importarlos y ciertos estandares.

Info

Asume que se tienen instalada la librería de **@architecture-it/stylesystem** y **@architecture-it/react-env** para poder usar por ejemplo el `SecureWrapper`. (Utiliza el ErrorBoundary estándar)

Instalación

pnpm i @architecture-it/microfront-utils

Uso

Considerando que se tienen las variables de entorno que primero cumplen con el estandar de @architecture-it/react-env y nuestra manera de utilizar variables de entorno en tiempo de ejecución, deberíamos tener una variable similar a esta.

Punto necesario

Es necesario que se tenga el prefijo REACT_APP_MFE Al igual que lo siguiente coincida con el nombre unico del módulo

# .env
REACT_APP_MFE_REMOTE=remote@http://localhost:3000/remoteEntry.js

Ejemplo Básico. Se recomienda aplicar su propia implementación con base a las necesidades de la aplicación. Se necesita aplicar un Skeleton en la carga. El Skeleton, es cómo por lo general vemos la carga en youtube, o por ejemplo en instagram o facebook. Y nos da idea de cómo sería la información una vez cargada.

routing/SecureWrapperImplementation.tsx

import React from "react";
import { SecureWrapper } from "@architecture-it/microfront-utils/SecureWrapper";
import Skeleton from '@mui/material/Skeleton';

interface ISecureWrapperImplementation {
  children: React.ReactNode;
  moduleName: string;
}

const SecureWrapperImplementation = ({ children, moduleName }: ISecureWrapperImplementation) => {
  return (
    <SecureWrapper
      suspenseFallback={<Skeleton />}
    >{children}</SecureWrapper>
  )
};

Typescript

Para que TS entienda que existe remote/App hay que definirlo en un archivo .d.ts que contiene la definición del tipo. Fijarse que el nombre del archivo coincide remote-App. Por lo que si el día de mañana agregamos otro modulo llamado personas y consumir el componente Base por ejemplo debería llamarse personas-Base.d.ts y declarar un módulo como en el ejemplo de abajo pero con el import según corresponda por ejemplo declare module "personas/Base"

src/remote-App.d.ts

declare module "remote/App" {
  export interface IRemoteAppProps {}

  export default function RemoteApp(_props: IRemoteAppProps): JSX.Element;
}

---

App.tsx

import React from "react";
import { Route, Routes } from "react-router";
import { dynamicImport } from "@architecture-it/microfront-utils";
// se obtiene de la definicion (remote-App.d.ts)
import type { IAppRemoteProps } from "remote/App";

import SecureWrapperImplementation from "./SecureWrapperImplementation"

// Si vemos dynamicImport recibe un génerico llamado IAppRemoteProps, que nos daría idea de el tipo cómo sería
const AppRemote = React.lazy(() => dynamicImport<IAppRemoteProps>("remote/App"));

const Routes = () => {
  return (
      <Routes>
          <Route element={<ProtectedRoute />} path="module/*">
              <Route element={<SecureWrapperImplementation><RemoteApp account={account} /></SecureWrapperImplementation>} path="*" />
          </Route>
      </Routes>
  );
};