@numaris-microfront/create-widget

Genera un proyecto de widget nuevo para la plataforma Numaris — el equivalente a npm create vite@latest, pero con toda la estructura, las dependencias y las versiones correctas ya resueltas.

Uso

npm create @numaris-microfront/widget mi-widget

Te va a preguntar el título visible y listo. Si preferís que te pregunte todo:

npm create @numaris-microfront/widget

El argumento es el id, no el título

Son dos valores distintos y conviene no confundirlos, porque uno se puede cambiar cuando quieras y el otro no:

| | | |---|---| | id (mi-widget) | El argumento. Nombra la carpeta, el remoto de Module Federation (mi_widget) y la entrada en el catálogo del Shell. Cambiarlo después es renombrar las tres cosas. Tiene que ser kebab-case. | | título (Mi Widget) | Sólo la etiqueta que ve el usuario. Vive en manifest.json y lo editás cuando quieras. |

Si pasás algo que no es un id válido, el CLI no lo convierte por su cuenta — te pregunta el id aparte, para que el nombre del remoto lo elijas vos y no un reemplazo silencioso de espacios y mayúsculas.

Qué genera

Un proyecto standalone, listo para npm install && npm run dev:

• manifest.json — el esqueleto del contrato de eventos (provides/consumes vacíos, para que los completes).
• src/mount.tsx — lo que exponés a Module Federation: el mount(container, props) que el host llama, con su error boundary propio adentro. Es el único archivo que habla de React, y está comentado con las tres cosas que no se pueden aflojar.
• src/widget.tsx — tu componente, ya tipado contra WidgetMountProps y con useBrandTheme conectado. Es interno: lo monta mount.tsx, no el host.
• src/dev-main.tsx — el entry de desarrollo: monta tu widget con @numaris-microfront/widget-dev-harness, validando el manifiesto al arrancar.
• vite.config.ts — Module Federation configurado, con el bloque shared ya correcto.
• package.json — con @numaris-microfront/contracts, event-bus, ui-kit y graphql-client como dependencias, y widget-dev-harness como herramienta de desarrollo.
• Un test de ejemplo (src/widget.test.tsx) y la config de vitest para correrlo.

Las versiones de React no están hardcodeadas en este CLI

Se leen, en el momento de generar tu proyecto, de los peerDependencies que @numaris-microfront/ui-kit tiene publicados en npm — la misma versión que el Shell de Numaris exige en su configuración de Module Federation. Si no hay red disponible, cae a la última versión conocida por este CLI y te avisa para que la confirmes a mano.

Después de generarlo

cd mi-widget
npm install
npm run dev

Tu README.md nuevo trae los links a la guía completa y a la referencia de la API — leelos antes de escribir el contrato de eventos.