APIs

Functions

Wompo exposes a small set of functions for rendering, registering components, sharing data, and integrating with the DOM:

• attrs: spread attributes, events, and properties from an object.
• createContext: create context values shared with descendant components.
• createPortal: render a template into another DOM node.
• defineWompo: register a function as a Web Component.
• Dynamic Tags: choose an element or component tag at runtime.
• Element API: interact with the DOM instance of a Wompo component.
• html: build templates returned by components.
• lazy: load a component asynchronously.
• unsafelyRenderString: intentionally render trusted HTML strings.

Constants

• registeredComponents: map of registered component names.
• wompoDefaultOptions: default component registration options.

Core types

RenderHtml is the value returned by html.

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

WompoProps contains the props that every component can receive.

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

WompoComponentOptions is the second argument accepted by defineWompo.

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

WompoComponent is the function type for a Wompo component.

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

WompoElement represents the custom element instance created in the DOM. Use it when you need typed refs or methods exposed with useExposed.

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

LazyCallbackResult and LazyResult describe the values used by lazy.

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

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