@activeit/frontend.core

Libreria de frontend escrita en TypeScript para construir interfaces modulares sobre navegador, con foco en integraciones Siebel/ActiveIT. El paquete expone vistas base, layouts, controles de formulario, modales, tablas, paginacion, iconografia y un cliente HTTP con cifrado opcional.

El contenido de este README fue reconstruido a partir del codigo fuente del repositorio.

Que hace este repositorio

Este repositorio genera un paquete reutilizable distribuido en dist/:

• dist/ait-core.js: bundle UMD principal.
• dist/ait-core.css: estilos compilados.
• dist/index.d.ts: tipos TypeScript.
• dist/assets/: iconos SVG publicados por webpack.

La libreria no es una aplicacion standalone. Su objetivo es servir como capa base para construir vistas y componentes UI reutilizables dentro de otro frontend.

Capacidades principales

Base UI

• View: clase base para vistas HTML con ciclo de vida (viewDidLoad, viewDidAppear, viewDidDisappear).
• NavigationView: contenedor de navegacion tipo stack con push() y pop().
• TabView: contenedor de pestanas para varias vistas.
• HostContainer: wrapper simple para montar una vista raiz.
• ModalPresentation: gestor global de modales, alertas, confirmaciones y visualizacion de archivos/PDF.
• Viewer: vista para mostrar contenido embebido en iframe.
• ListView: lista scrollable con datasource y delegate.

Layouts

• HStack y VStack: composicion horizontal/vertical de elementos.
• Form: wrapper de formulario sin submit nativo.
• Table: tabla renderizada a partir de definicion de columnas y dataset.
• Paginator: paginador para tablas.
• Expand: contenedor expandible/colapsable.
• Space: separadores de layout.
• ProgressBar: barra de progreso.

Elementos

• InputElement: input con placeholder, prefijo, formato numerico y binding por model.
• SelectElement: selector/autocomplete con datasource local.
• AITCalendar: selector de fecha sobre la base de select.
• CheckBoxElement: checkbox con callback de cambio.
• TextElement: texto alineable.
• ButtonElement: boton base con estado disabled y callback.
• ButtonPrimary, ButtonBack, CloseButton: variantes de boton.
• GenericIcon: render de iconos SVG empaquetados.
• SearchField: campo de busqueda con delegate.
• AITSegmentedBar: selector segmentado.

Custom tags

• AitXIcon (<ait-x-icon-core>): custom element nativo que descarga y pinta un SVG por fetch.
  • extiende HTMLElement directamente; ya no depende de x-tag.
  • atributos observados: name, path, type (solid por defecto, ademas de regular y brands).
  • cada atributo tiene su accessor equivalente (icon.name = 'user' refleja el atributo).
  • resuelve la URI como ${BASE_ASSETS}/svgs/${type}/${name}.svg salvo que se indique path.
  • si la descarga falla, pinta el fallback (?) y loguea el error.

Utilidades

• backend: instancia axios con interceptores para cifrado/descifrado opcional.
• once: helper para memoizar la primera ejecucion.
• AITView: decorador para registrar custom elements. Si el tag ya existe en CustomElementRegistry, emite un console.warn y reutiliza el constructor registrado en lugar de fallar.
• Tipos compartidos como InvokeParams y TextAlignment.

Supuestos de entorno

La libreria depende de un runtime de navegador y de varios globales que no define por si sola:

• customElements, HTMLElement, window, document, fetch.
• SiebelApp y SiebelJS.
• window.Modal en los flujos que invocan modales desde componentes internos.
• process.env con BASE_ASSETS, INGR1 e INGR2 (ver seccion de configuracion).

Del codigo fuente se desprenden estas dependencias operativas:

• El logging y parte del ciclo de vida usan SiebelJS.Debug y SiebelJS.LogLevel.
• El cifrado del cliente HTTP consulta SiebelApp.AITS_App.GetSystemPreferenceSync('AIT_ENCRYPTION_SP').
• El keep-alive del modal invoca SiebelApp.S_App.GetProfileAttr(...).
• SBLSetFields invoca el servicio Siebel DAV_AIT_Utilities.
• CloseButton y otros flujos interactuan directamente con APIs Siebel del contenedor.

Si el consumidor no corre en un contexto compatible con Siebel, algunas partes del paquete no funcionaran sin adaptacion.

Instalacion

npm install @activeit/frontend.core

Peer dependencies declaradas por el paquete:

• axios
• node-jose
• rxjs

Requisito de entorno: node >= 18 (campo engines de package.json).

Desarrollo y build

Scripts disponibles en package.json:

npm run build      # bundle de produccion con webpack
npm run typecheck  # tsc --noEmit, valida tipos sin generar salida

El build usa webpack en modo production y toma como entrada src/index.ts.

Notas relevantes:

• la configuracion de build vive en un unico webpack.config.js en formato ESM ("type": "module" en package.json). Ya no existe webpack.prod.js.
• tsconfig.json compila todo ./src/**/* y genera declaraciones TypeScript en dist/.
• webpack publica SVG/PNG en dist/assets/.
• tambien se genera dist/ait-core.css (compilado con sass; node-sass fue removido).
• webpack.DefinePlugin inyecta __PKG_VERSION__ leyendo la version de package.json. La declaracion del global vive en src/custom.d.ts.
• CleanWebpackPlugin limpia dist/ antes de cada build, por lo que los artefactos versionados se regeneran completos.

Variables y configuracion

El codigo referencia estas variables:

• BASE_ASSETS: base publica para assets (src/utils/config.ts).
• INGR1: llave publica codificada en base64 (src/utils/publicKey.ts).
• INGR2: llave privada codificada en base64 (src/utils/publicKey.ts).

Importante: al eliminar webpack.prod.js se elimino tambien dotenv-webpack, asi que la configuracion actual no reemplaza estas variables en tiempo de build. En el bundle publicado quedan como accesos literales a process.env.*, por lo que el host debe exponer un process.env en el navegador con esos valores.

• INGR1 / INGR2 se leen dentro de un try/catch: si no existen, el cifrado simplemente queda deshabilitado.
• BASE_ASSETS se evalua al cargar el modulo, sin proteccion. Si el contenedor no define process, la carga del bundle falla.

Si se requiere volver a resolver estas variables en build, hay que reintroducir un plugin de entorno (DefinePlugin / EnvironmentPlugin / dotenv-webpack) en webpack.config.js.

Uso basico

1. Importar la libreria

import {
  AITView,
  View,
  HostContainer,
  ModalPresentation,
  VStack,
  Form,
  InputElement,
  ButtonElement,
  TextElement
} from '@activeit/frontend.core';

2. Crear una vista

@AITView({ tag: 'customer-form-view' })
class CustomerFormView extends View {
  constructor() {
    super();

    const name = new InputElement({
      tag: 'customer-name',
      title: 'Nombre',
      placeholder: 'Ingrese el nombre',
      model: 'customer.name'
    });

    const save = new ButtonElement(
      new TextElement('Guardar'),
      {
        target: () => {
          console.log(this.model);
        }
      }
    );

    this.appendChild(
      Form(
        VStack([name, save])
      )
    );
  }
}

3. Montar una vista raiz

const root = new CustomerFormView();
document.body.appendChild(new HostContainer(root));

4. Inicializar modales

Los componentes internos usan window.Modal. Una integracion razonable, inferida del codigo fuente, es montar una instancia global:

const modal = document.body.appendChild(new ModalPresentation());
window.Modal = modal;

Modelo de datos en vistas

View implementa binding simple basado en el atributo model:

• al asignar view.model = { customer: { name: 'Ana' } }, los controles con model="customer.name" reciben el valor.
• al leer view.model, la vista reconstruye el objeto a partir del valor actual de los controles hijos.

Esto aplica a componentes que heredan de AITElement, por ejemplo InputElement, SelectElement y CheckBoxElement.

Cliente HTTP con cifrado opcional

backend es una instancia de axios ya configurada con:

• headers JSON por defecto.
• interceptor de request que cifra config.data cuando:
  • existe preferencia Siebel AIT_ENCRYPTION_SP = Y
  • existen publicKey y privateKey
• interceptor de response que intenta descifrar response.data.payload.

Si el cifrado no esta habilitado o faltan llaves, la peticion sigue sin transformacion.

Ejemplo:

import { backend } from '@activeit/frontend.core';

const response = await backend.post('/api/example', {
  id: '123'
});

Estructura del codigo fuente

src/
  Base/         vistas, navegacion, modales, host y contenedores
  Elements/     controles de UI reutilizables
  Layout/       stacks, tablas, formularios y composicion
  Style/        estilos compartidos
  token/        iconos y tokens visuales
  utils/        backend, llaves, logger y helpers
  decorator/    decoradores como AITView
  interface/    contratos y enums
  ait-x-tags/   wrappers de custom tags para iconos

Export publico

El entrypoint src/index.ts expone:

• once
• backend
• todo Base
• todo Layout
• todo Elements
• ait-x-tags
• decorator
• interface
• HELLO_CORE

HELLO_CORE ya no se escribe a mano: se arma con la version inyectada por webpack.

const HELLO_CORE = `****** AIT CORE MODULE LOADED V ${__PKG_VERSION__} *******`

Con la version actual (3.0.12) el valor en el bundle es:

****** AIT CORE MODULE LOADED V 3.0.12 *******

Basta con subir la version de package.json y reconstruir; no hay que tocar src/index.ts.

Cambios recientes

• HELLO_CORE toma la version desde package.json via DefinePlugin (__PKG_VERSION__).
• Se agrego el script typecheck (tsc --noEmit).
• Se elimino webpack.prod.js; queda un solo webpack.config.js en ESM.
• AitXIcon migro de XTagElement a HTMLElement; se removio la dependencia x-tag.
• node-sass fue reemplazado por sass.
• El decorador AITView y varios componentes ahora evitan redefinir custom elements ya registrados.
• Se agrego el campo engines con node >= 18.

Observaciones del repositorio

• El paquete no tiene suite de pruebas automatizadas. El script test actual falla de forma intencional. npm run typecheck es hoy la unica verificacion automatizable.
• Hay codigo de compatibilidad y algunos bloques deprecados/comentados, lo que sugiere evolucion incremental sobre una base existente.
• dist/ esta versionado en el repositorio, por lo que el paquete parece publicarse con artefactos compilados incluidos.

Recomendaciones para mantener este README

• actualizar ejemplos cuando cambie la API publica de src/index.ts
• documentar nuevas variables de entorno en la seccion de configuracion
• agregar un ejemplo real de integracion con Siebel si el equipo tiene un bootstrap estandar
• documentar flujo de publicacion si el paquete se libera por npm interno o registro privado