createComponent

• SOURCE FILE
• TUTORIAL

---

function createComponent<GConfig extends IComponentConfig>(
  options: ICreateComponentOptions<GConfig>,
): IComponent<GConfig>

This function creates a component with a specific configuration. This configuration is necessary to type the different properties of the component, and determines the values present in the options.

interface IComponentConfig {
  /**
  * The element kind of the component. By default, it's an HTMLElement.
  */
  element?: Element;

  /**
  * The list of inputs of the component composed of a key and its type
  */
  inputs?:  readonly [key: string, value: any][];

  /**
  * The list of outputs of the component composed of a key and its type
  */
  outputs?: readonly [key: string, value: any][];

  /**
  * The object provided to the template of the component, used to reflect dynamic values on the DOM.
  */
  data?: object;
}

interface ICreateComponentOptions {
  /**
  * The name of the component.
  * It is used as a tag name, and must contain a dash (-).
  * Usually, we'll use the prefix "app-"
  */
  name: string;

  /**
  * If the component extends a native element, put here it's tag name (ex: "button")
  */
  extends?: string;

  /**
  * If the component uses a specific namespaceURI (ex: if it's an SVG => http://www.w3.org/2000/svg)
  */
  namespaceURI?: string,

  /**
  * The component's template, usually obtained trough compileReactiveHTMLAsComponentTemplate
  */
  template?: IComponentTemplate;

  /**
  * The component's styles, usually obtained trough compileStyleAsComponentStyle
  */
  styles?: readonly IComponentStyle[];

  /**
  * The list of inputs or the component, with an optional initial value.
  */
  inputs?: readonly [key: string, value?: any][];

  /**
  * The list of outputs or the component.
  */
  outputs?: readonly string[];

  /**
  * This function is called right after the component has been created.
  * It receives the instance of the component, and must return the data to provide to the template.
  * This is the perfect time to create all the internal logic of the component:
  * - read and map inputs
  * - create locale variables used in the template
  * - send values though outputs
  * - etc...
  */
  init: (
    node: VirtualCustomElementNode,
  ): GData;
}