Function createHostElement

packages/compiler/src/typecheck/host_bindings.ts:98–149

(
  type: 'component' | 'directive',
  selector: string | null,
  nameSpan: ParseSourceSpan,
  hostObjectLiteralBindings: HostObjectLiteralBinding[],
  hostBindingDecorators: HostBindingDecorator[],
  hostListenerDecorators: HostListenerDecorator[],
)

 * @param meta Metadata used to construct the host element.
 */
export function createHostElement(
  type: 'component' | 'directive',
  selector: string | null,
  nameSpan: ParseSourceSpan,
  hostObjectLiteralBindings: HostObjectLiteralBinding[],
  hostBindingDecorators: HostBindingDecorator[],
  hostListenerDecorators: HostListenerDecorator[],
): HostElement | null {
  const bindings: BoundAttribute[] = [];
  const listeners: BoundEvent[] = [];
  let parser: BindingParser | null = null;

  for (const binding of hostObjectLiteralBindings) {
    // We only support type checking of static bindings.
    parser ??= makeBindingParser();
    createNodeFromHostLiteralProperty(binding, parser, bindings, listeners);
  }

  for (const decorator of hostBindingDecorators) {
    createNodeFromBindingDecorator(decorator, bindings);
  }

  for (const decorator of hostListenerDecorators) {
    parser ??= makeBindingParser();
    createNodeFromListenerDecorator(decorator, parser, listeners);
  }

  // The element will be a no-op if there are no bindings.
  if (bindings.length === 0 && listeners.length === 0) {
    return null;
  }

  const tagNames: string[] = [];

  if (selector !== null) {
    const parts = CssSelector.parse(selector);

    for (const part of parts) {
      if (part.element !== null) {
        tagNames.push(part.element);
      }
    }
  }

  // If none of the selectors have a tag name, fall back to `ng-component`/`ng-directive`.
  // This is how the runtime handles components without tag names as well.
  if (tagNames.length === 0) {
    tagNames.push(`ng-${type}`);
  }

  return new HostElement(tagNames, bindings, listeners, nameSpan);
}

/**
 * Creates an AST node that can be used as a guard in `if` statements to distinguish TypeScript