How to use the typedoc/dist/lib/output/components.Component function in typedoc

import * as path from 'path';
import { NavigationItem } from 'typedoc';
import { Component, ContextAwareRendererComponent } from 'typedoc/dist/lib/output/components';
import { PageEvent } from 'typedoc/dist/lib/output/events';

@Component({ name: 'frontmatter' })
export class FrontMatterComponent extends ContextAwareRendererComponent {
  initialize() {
    super.initialize();

    this.listenTo(this.application.renderer, {
      [PageEvent.END]: this.onPageEnd,
    });
  }

  onPageEnd(page: PageEvent) {
    page.contents = page.contents.replace(/^/, this.getYamlString(page) + '\n\n').replace(/[\r\n]{3,}/g, '\n\n');
  }

  getYamlString(page: PageEvent) {
    const yaml = `---
id: "${this.escapeYAMLString(this.getId(page))}"

import * as fs from 'fs-extra';
import * as Handlebars from 'handlebars';
import * as path from 'path';
import { MarkedLinksPlugin, ProjectReflection, Reflection } from 'typedoc';
import { Component, ContextAwareRendererComponent } from 'typedoc/dist/lib/output/components';
import { PageEvent, RendererEvent } from 'typedoc/dist/lib/output/events';
import * as Util from 'util';

import MarkdownTheme from '../theme';

/**
 * This component is essentially a combination of TypeDoc's 'MarkedPlugin' and 'MarkedLinksPlugin'.
 * The options are unchanged , but strips out all of the html configs.
 */

@Component({ name: 'helpers' })
export class ContextAwareHelpersComponent extends ContextAwareRendererComponent {
  /**
   * The path referenced files are located in.
   */
  private includes?: string;

  /**
   * Path to the output media directory.
   */
  private mediaDirectory?: string;

  /**
   * The pattern used to find references in markdown.
   */
  private includePattern: RegExp = /\[\[include:([^\]]+?)\]\]/g;

import * as Handlebars from 'handlebars';
import { ProjectReflection, Reflection } from 'typedoc';
import { Component, ContextAwareRendererComponent } from 'typedoc/dist/lib/output/components';
import { PageEvent } from 'typedoc/dist/lib/output/events';

import MarkdownTheme from '../theme';

@Component({ name: 'breadcrumbs' })
export class BreadcrumbsComponent extends ContextAwareRendererComponent {
  initialize() {
    super.initialize();

    const component = this;

    Handlebars.registerHelper('breadcrumbs', function(this: PageEvent) {
      return component.breadcrumb(this.model, this.project, []);
    });
  }

  public breadcrumb(model: Reflection, project: ProjectReflection, md: string[]) {
    const theme = this.application.renderer.theme as MarkdownTheme;
    if (model && model.parent) {
      this.breadcrumb(model.parent, project, md);
      if (model.url) {

import * as fs from 'fs-extra';
import * as Handlebars from 'handlebars';
import * as path from 'path';
import { MarkedLinksPlugin, ProjectReflection, Reflection } from 'typedoc';
import { Component, ContextAwareRendererComponent } from 'typedoc/dist/lib/output/components';
import { PageEvent, RendererEvent } from 'typedoc/dist/lib/output/events';
import * as Util from 'util';

import MarkdownTheme from '../theme';

/**
 * This component is essentially a combination of TypeDoc's 'MarkedPlugin' and 'MarkedLinksPlugin'.
 * The options are unchanged , but strips out all of the html configs.
 */

@Component({ name: 'helpers' })
export class ContextAwareHelpersComponent extends ContextAwareRendererComponent {
  /**
   * The path referenced files are located in.
   */
  private includes?: string;

  /**
   * Path to the output media directory.
   */
  private mediaDirectory?: string;

  /**
   * The pattern used to find references in markdown.
   */
  private includePattern: RegExp = /\[\[include:([^\]]+?)\]\]/g;

import { Component, ContextAwareRendererComponent } from 'typedoc/dist/lib/output/components';

import MarkdownTheme from '../theme';

@Component({ name: 'options' })
export class OptionsComponent extends ContextAwareRendererComponent {
  initialize() {
    super.initialize();

    const namedAnchors = this.application.options.getValue('namedAnchors');
    const hideBreadcrumbs = this.application.options.getValue('hideBreadcrumbs');
    const hideIndexes = this.application.options.getValue('hideIndexes');
    const hideSourceFiles = this.application.options.getValue('hideSources');

    MarkdownTheme.handlebars.registerHelper('ifNamedAnchors', function(options) {
      return namedAnchors ? options.fn(this) : options.inverse(this);
    });

    MarkdownTheme.handlebars.registerHelper('ifBreadcrumbs', function(options) {
      return hideBreadcrumbs ? options.inverse(this) : options.fn(this);
    });