API

Funzioni

Wompo espone un set compatto di funzioni per renderizzare template, registrare componenti, condividere dati e integrarsi con il DOM:

• attrs: applica attributi, eventi e proprietà da un oggetto.
• createContext: crea context condivisi tra componenti discendenti.
• createPortal: renderizza template in un altro nodo DOM.
• defineWompo: registra una funzione come Web Component.
• Dynamic Tags: sceglie un tag o un componente a runtime.
• Element API: controlla l'istanza DOM del componente.
• html: crea template ritornati dai componenti.
• lazy: carica componenti in modo asincrono.
• unsafelyRenderString: renderizza stringhe HTML fidate.

Costanti

• registeredComponents: mappa dei componenti registrati.
• wompoDefaultOptions: opzioni predefinite di registrazione.

Tipi principali

RenderHtml e' il valore ritornato da html.

interface RenderHtml {
  parts: TemplateStringsArray;
  values: any[];
  _$wompHtml: true;
}

WompoProps contiene le props disponibili su ogni componente.

interface WompoProps {
  children?: WompoChildren;
  styles?: Record<string, string>;
  ['wc-perf']?: boolean;
  style?: string | Partial<CSSStyleDeclaration> | object;
  ref?: RefHook<any>;
  id?: string;
  class?: string;
}

WompoComponentOptions e' il secondo argomento di defineWompo.

interface WompoComponentOptions {
  name?: string;
  shadow?: boolean;
  cssModule?: boolean;
  island?: 'load' | 'idle' | 'visible';
}

WompoComponent e' il tipo funzione di un componente Wompo.

interface WompoComponent<Props extends WompoProps = WompoProps> {
  (props: Props): RenderHtml;
  css?: string;
  componentName?: string;
  _$wompF?: true;
  class?: WompoElementClass<Props>;
}

WompoElement rappresenta l'istanza custom element nel DOM. Usalo per ref tipate o metodi esposti con useExposed.

type WompoElement<Props extends WompoProps = WompoProps, Exposed = {}> =
  HTMLElement & {
    props: Props;
  } & Exposed;

LazyCallbackResult e LazyResult descrivono i valori usati da lazy.

type LazyCallbackResult = Promise<{ default: WompoComponent }>;

type LazyResult = {
  (): Promise<WompoComponent<WompoProps>>;
  _$wompLazy: boolean;
};