architecture-it/core ¶

Biblioteca de utilidades core para los frontends.

Instalación¶

pnpm i @architecture-it/core

Necesita de dependencias instaladas en el proyecto axios y @architecture-it/react-env

Funcionalidades¶

Events¶

Utilidades para realizar eventos custom en el navegador. (especialmente util para microfrontends)

Evento sencillo¶

Util para el caso simple dónde queremos ejecutar algo que no corresponde a nuestro control

//Listener
const onLogoutEvent: EventListener = (_evt) => {
  //logout action
};

subscribe("logoutEvent", onLogoutEvent);

//publicar
publish("logoutEvent");

Evento con información¶

Toda la información se guarda en la prop detail, aunque se recomienda si no se necesita enviar información adicional que sean eventos lo suficientemente sencillos para ejecutar acciones tipo event: logoutEvent, que el nombre nos diría que hacer exactamente dónde corresponda (por ejemplo en casos microfrontend)

type SuperEvent = { name: string };

//Listener
const onSuperEvent: EventListener = (evt: CustomEventInit<SuperEvent>) => {
  console.log(evt.detail?.name);
};

subscribe("superEvent", onSuperEvent);


//publicar
publish<SuperEvent>("superEvent", { detail: { name: "John Snow" } });

Logger¶

Logger especialmente util para desarrollo, por defecto se ejecuta en ambientes no productivos.

Es internamente un proxy de console.log pero con un formato estandarizado.

logger.log("Hola") // 2/8/2022 | LOG | Hola
logger.warn("Hola", "warn") // 2/8/2022 | WARN | Hola

!terminal

!navegador

ServiceBase¶

Clase abstracta que contiene un cliente en axios, con un interceptor por defecto, para agregar el token si lo consigue en el localStorage.

services/UserService.ts

class _UserService extends ServiceBase {
  constructor() {
   super("users/");
 }

 getUsers = () => this.client.get<User[]>("");
}

const UserService = new _UserService();

export default UserService;

Contiene argumentos el constructor que son útiles para la customización:

requiredAuth: Flag para habilitar el interceptor con la inyección del token
baseUrl: Base url from service (se recomienda consumirla de variable de entorno con @architecture-it/react-env)
tokenKey: Clave dónde busca el jwt en el localStorage, por default es "token";
storage: Dónde va a buscar el token, en el localStorage o en el sessionStorage;

Ejemplos¶

Servicio sin autenticación.

class UnauthServiceExample extends ServiceBase {

  constructor() {
    //desabilita la inyección del header Authorization
    super(ENDPOINT, false);
  }
}

Servicio que busca otra key de environment cómo baseURL

class AnotherServiceExample extends ServiceBase {


  constructor() {
    //Busca sobre REACT_APP_ANOTHER_API o NEXT_PUBLIC_ANOTHER_API
    super(ENDPOINT, true, "ANOTHER_API");
  }
}

Servicio que busca otro valor en el local Storage.

class AnotherTokenKeyExample extends ServiceBase {
  constructor() {
    //Busca sobre localStorage.getItem("anotherToken")
    super(ENDPOINT, true, "API_URL", "anotherToken");
  }
}

Store¶

Contiene por el momento tipos utiles para estados default y simples del store:

export interface IState<T> {
  data: T;
  isLoading: false;
  error: string | null;
}


// uso:
const initialState: IState<User[]> = {
  data: [],
  isLoading: false,
  error: null
}

APM¶

Contiene valores estandarizados

environments de APM

export enum ENV_APM {
  DEVELOPMENT = "Development",
  PRODUCTION = "Production",
  QA = "QA",
}

event type transactions

export declare enum EVENT_TYPES {
    ROUTE_CHANGE = "route-change"
}

Uso mínimo

import { version, name } from "../package.json"

 const monitor = RumAgent({
  ...getApmConfig({
     serviceVersion: version, // "1.0.0"
     // Sólo puede contener mayusculas, minusculas y '-' y/o '_'
     serviceName: name // architecture-apm-example
   }),
  });

Provee capacidad para enviar cualquier parametro que reciba el apm

import { init as RumAgent } from "@elastic/apm-rum";
import env from "@architecture-it/react-env";
import { APM_ENV, getApmConfig } from "@architecture-it/core";

import { version, name } from "../package.json";

const disableApm = env("DISABLE_APM");
// Valores estandarizados "Development" | "QA" | "Production"
const environment = env("ENV_APM") as APM_ENV; //Por ejemplo "QA"

const monitor = RumAgent({
  ...getApmConfig({
    serviceVersion: version,
    serviceName: name,
    active: !Boolean(disableApm),
    environment,
  }),
});

export default monitor;

architecture-it/core¶