front-shared

Recursos compartidos para micro-frontends Jeff-Aporta (GH Pages + Babel + MUI 9).

Arquitectura

Fuente del diagrama: docs/arquitectura.mmd — editar el .mmd; regenerar imagen: node scripts/mermaid-ink-url.mjs front-shared/docs/arquitectura.mmd (desde apps/).

Estructura detallada: docs/STRUCTURE.md

Resumen

Ruta	Rol
cdn/stack.mjs, boot-helper.mjs, boot-resolver.mjs, boot-loader.mjs, boot-module-graph.mjs	Arranque: React ESM + grafo TS/JSX + eval
cdn/versions.json, boot-esm-imports.mjs	Pin esm.sh (import map + module-graph)
cdn/isa/js/core/app-meta.js	Metadatos HTML por front (title, OG, favicon vía Iconify API)
cdn/isa/	Runtime JS: ISAFront.registerApp, tema, auth, widgets, login
cdn/_dist/	Build minificado para jsDelivr (npm run build:cdn)
cdn/ui/	JSX compartidos (layouts/componentes) vía jsDelivr + Babel
docs/	Stack, MUI llms, CORS, deploy
worker-swagger/	OpenAPI Workers (no CDN)
scripts/	Ops (Neon, etc.)

TSX compartido (homogeneidad)

Tras registerApp, el loader transpila automáticamente los archivos en cdn/ui/ (ver SHARED_UI_FILES en boot-helper.mjs).

Uso en una app:

const Shell = window.ISAFront.Layout.AppShell;
<Shell
  ns="ISAJ"
  icon="mdi:view-dashboard-variant-outline"
  showTitle={false}
  navRows={[
    { value: space, onChange: setSpace, tabs: SPACES, minHeight: 48 },
    { value: sub, onChange: setSub, tabs: SUBSPACES, minHeight: 44 },
  ]}
  toolbarEnd={<LoginButton />}
>
  {/* vistas con scroll interno (.isa-scroll-panel) */}
</Shell>

Tercer nivel de tabs dentro de una vista: ISAFront.Layout.ViewFrame con prop navRow.

Añadir un JSX nuevo: crear bajo cdn/ui/ con extensión .jsx y registrar la ruta en SHARED_UI_FILES.

Metadatos por front (AppMeta)

Cada index.html de micro-frontend puede declarar identidad propia (title, description, Open Graph, favicon):

<script src="https://cdn.jsdelivr.net/gh/Jeff-Aporta/front-shared@main/cdn/isa/js/core/app-meta.js"></script>
<script>
AppMeta.apply({
  title: "Mi App — Jeff-Aporta",
  description: "…",
  icon: "mdi:robot-outline",
  themeColor: "#e65100",
  url: "https://jeff-aporta.github.io/mi-front/",
});
</script>

Favicon y miniatura OG usan temporalmente la Iconify API (api.iconify.design). Iconos alineados con catalog.ts del orquestador.

Repositorio GitHub

jsDelivr sirve @main solo desde repos accesibles. Tras cambios en cdn/, hacer push a main (puede tardar 1–2 min en propagarse).

Los fronts no duplican caesar, auth-api, session, stack ni AppShell: todo se carga desde jsDelivr vía boot-helper.mjs.

GitHub: Jeff-Aporta/front-shared

Main Orchestrator (URL central)

Todos los micro-frontends ISA usan una sola URL, definida solo aquí:

Modo	Constante	Valor
Producción	MAIN_ORCHESTRATOR_URL_PROD	https://main-orchestrator.jeffaporta.workers.dev
Local	MAIN_ORCHESTRATOR_URL_LOCAL	http://localhost:8780
Panel hub (GH Pages)	MAIN_ORCHESTRATOR_PAGES_URL	https://jeff-aporta.github.io/main-orchestrator-front/

Archivo: cdn/isa/js/core/config/constants.js

Los fronts no repiten la URL en isa-setup.ts; registerApp() aplica estos defaults.

Tras cambiar la URL: push a front-shared (jsDelivr) y redeploy del worker main-orchestrator.

jsDelivr

Producción (minificado, vía boot-helper):

https://cdn.jsdelivr.net/gh/Jeff-Aporta/front-shared@{pin}/cdn/_dist/isa/js/index.min.js
https://cdn.jsdelivr.net/gh/Jeff-Aporta/front-shared@{pin}/cdn/_dist/isa/css/base.min.css

Fuente (debug local o __ISA_CDN_SRC__):

https://cdn.jsdelivr.net/gh/Jeff-Aporta/front-shared@{pin}/cdn/isa/js/index.js
https://cdn.jsdelivr.net/gh/Jeff-Aporta/front-shared@{pin}/cdn/isa/css/base.css

Kit look & feel (lazy, un archivo): …/_dist/isa/css/kits/neon-glass.min.css — no enlazar en HTML; lo carga ISAFront.ensureKitCss('neon-glass').

Build CDN (_dist)

cd apps/components/front-shared && npm run build:cdn

Genera cdn/_dist/ (CSS/JS minificados + manifest.json). Commitear tras cambios en runtime o kits.

MUI llms

cd apps/components/front-shared && npm run refresh:mui-llms