TypeScript

The library supports TypeScript by the definitions in types/index.d.ts file. The project is prepared to work without additional configuration. You can import types from the package besides other functions.

The web component definition should combine two parts:

1. An interface, which extends HTMLElement

2. A map of descriptors of the Hybrids<E> type (where generic type E is the defined interface)

A counter component example can be written in TS with the following code:

// simple-counter.ts

import { define, html, Hybrids } from 'hybrids';

interface SimpleCounter extends HTMLElement {
  count: number;
}

export function increaseCount(host: SimpleCounter) {
  host.count += 1;
}

export const SimpleCounter: Hybrids<SimpleCounter> = {
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `,
};

define('simple-counter', SimpleCounter);

The Hybrids<E> type has built-in support for the descriptors structure and all of the translation rules. It also prevents defining properties not declared in the interface. All hybrids public APIs support generic type <E> for providing the additional information from the defined interface, for example, html<E> or define<E>(...). However, in most of the cases, it is not necessary to pass the generic type explicitly - TS calculates it from the Hybrids<E> main type.

The following types are the public API, and any change to those will follow semantic versioning of the library:

• Hybrids<E> type including Descriptor<E> and Property<E> interfaces

• All declarations of the main exports of the library

For a deeper understanding, read the types/index.d.ts source file.