Inicio › Llevarlo a producción

Herramientas y tests

Tipos de TypeScript, utilidades de test, avisos de desarrollo, chequeo de plantillas, DevTools, Vite y angelite-check.

TypeScript#

El paquete trae sus .d.ts (comprobados con tsc en el CI): signal<T>, input<T>, output<T>, viewChild<T>, Route, RouteGuard, OnInit, OnDestroy, OnError… Funciona igual con JS y con TS. La referencia de la API se genera a partir de esos mismos tipos.

Tests#

@duvanjamid/angelite/testing monta un componente en el documento y da lo básico para interactuar con él:

import { render, cleanup } from '@duvanjamid/angelite/testing';

afterEach(cleanup);

test('suma', async () => {
  const t = render(Counter, { props: { start: 5 }, provide: [[Api, apiFalsa]] });  // props = inputs; provide = servicios
  t.click('button');
  await t.flush();                      // espera a que las señales lleguen al DOM
  assert.equal(t.text('output'), '6');
  t.type('input', 'Ada');               // escribe y dispara input + change
});

Avisos de desarrollo#

enableDevWarnings() (solo en desarrollo, antes de montar) avisa de lo que de otro modo falla en silencio:

• un [prop] que el componente no declara como input,
• claves repetidas en @for,
• un elemento desconocido,
• un módulo opcional (portal, defer) sin importar.

Chequeo de plantillas al compilar#

El compilador avisa (o falla, con check: 'error') si una plantilla usa un elemento desconocido, un pipe inexistente o, si le das la lista (o members: 'auto' para leerla de la clase vecina), un nombre que el componente no tiene. No comprueba tipos.

aotPlugin({ components: ['ui-button'], members: 'auto', check: 'error' })

// counter.ng.html: <p>&#123;&#123; cuenta() &#125;&#125;</p>   →  error: "cuenta" is not a member of the component

DevTools#

enableDevtools({ panel: true }) (@duvanjamid/angelite/devtools) añade window.__ANGELITE__ con tree(), inspect(el), state(instancia) y set(instancia, 'campo', valor), y un panel flotante con el árbol de componentes y el valor de sus señales.

Vite y editor#

tools/vite.mjs compila *.ng.html con recarga al editar y los mismos avisos que el plugin de esbuild. angelite-check (o node tools/check.mjs src --members auto) lista los problemas como archivo:1: mensaje, formato que el editor entiende como errores.

// vite.config.js
import angelite from '@duvanjamid/angelite/tools/vite.mjs';
export default { plugins: [angelite({ components: ['ui-button'], members: 'auto', check: 'error' })] };

// package.json
"scripts": { "check": "angelite-check src --members auto" }

No hay autocompletado de plantillas en el editor.