Home › Go to production

Tools and tests

TypeScript types, testing utilities, development warnings, template checking, DevTools, Vite and angelite-check.

TypeScript#

The package ships its .d.ts files (checked with tsc in CI): signal<T>, input<T>, output<T>, viewChild<T>, Route, RouteGuard, OnInit, OnDestroy, OnError… It works the same with JS and TS. The API reference is generated from those same types.

Tests#

@duvanjamid/angelite/testing mounts a component in the document and gives you the basics to interact with it:

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

afterEach(cleanup);

test('adds', async () => {
  const t = render(Counter, { props: { start: 5 }, provide: [[Api, fakeApi]] });  // props = inputs; provide = services
  t.click('button');
  await t.flush();                      // waits for signals to reach the DOM
  assert.equal(t.text('output'), '6');
  t.type('input', 'Ada');               // types and fires input + change
});

Development warnings#

enableDevWarnings() (development only, before mounting) warns about what would otherwise fail silently:

• a [prop] the component does not declare as an input,
• repeated keys in @for,
• an unknown element,
• an optional module (portal, defer) that was not imported.

Template checking at compile time#

The compiler warns (or fails, with check: 'error') if a template uses an unknown element, a pipe that does not exist or, if you give it the list (or members: 'auto' to read it from the neighboring class), a name the component does not have. It does not check types.

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

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

DevTools#

enableDevtools({ panel: true }) (@duvanjamid/angelite/devtools) adds window.__ANGELITE__ with tree(), inspect(el), state(instance) and set(instance, 'field', value), and a floating panel with the component tree and the value of their signals.

Vite and editor#

tools/vite.mjs compiles *.ng.html with reload on edit and the same warnings as the esbuild plugin. angelite-check (or node tools/check.mjs src --members auto) lists the problems as file:1: message, a format the editor understands as errors.

// 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" }

There is no template autocompletion in the editor.