How to use the @jupyterlab/outputarea.OutputArea function in @jupyterlab/outputarea

render() {
        super.render();
        this._outputView = new OutputArea({
            rendermime: renderMime,
            contentFactory: OutputArea.defaultContentFactory,
            model: this.model.outputs
        });
        this.pWidget.insertWidget(0, this._outputView);

        this.pWidget.addClass('jupyter-widgets');
        this.pWidget.addClass('widget-output');
        this.update(); // Set defaults.
    }

constructor(options: CodeCell.IOptions) {
    super(options);
    this.addClass(CODE_CELL_CLASS);

    // Only save options not handled by parent constructor.
    let rendermime = (this._rendermime = options.rendermime);
    let contentFactory = this.contentFactory;
    let model = this.model;

    // Insert the output before the cell footer.
    let outputWrapper = (this._outputWrapper = new Panel());
    outputWrapper.addClass(CELL_OUTPUT_WRAPPER_CLASS);
    let outputCollapser = new OutputCollapser();
    outputCollapser.addClass(CELL_OUTPUT_COLLAPSER_CLASS);
    let output = (this._output = new OutputArea({
      model: model.outputs,
      rendermime,
      contentFactory: contentFactory
    }));
    output.addClass(CELL_OUTPUT_AREA_CLASS);
    // Set a CSS if there are no outputs, and connect a signal for future
    // changes to the number of outputs. This is for conditional styling
    // if there are no outputs.
    if (model.outputs.length === 0) {
      this.addClass(NO_OUTPUTS_CLASS);
    }
    output.outputLengthChanged.connect(this._outputLengthHandler, this);
    outputWrapper.addWidget(outputCollapser);
    outputWrapper.addWidget(output);
    (this.layout as PanelLayout).insertWidget(2, outputWrapper);

constructor(options: CodeCell.IOptions) {
    super(options);
    this.addClass(CODE_CELL_CLASS);

    // Only save options not handled by parent constructor.
    let rendermime = (this._rendermime = options.rendermime);
    let contentFactory = this.contentFactory;
    let model = this.model;

    // Insert the output before the cell footer.
    let outputWrapper = (this._outputWrapper = new Panel());
    outputWrapper.addClass(CELL_OUTPUT_WRAPPER_CLASS);
    let outputCollapser = new OutputCollapser();
    outputCollapser.addClass(CELL_OUTPUT_COLLAPSER_CLASS);
    let output = (this._output = new OutputArea({
      model: model.outputs,
      rendermime,
      contentFactory: contentFactory
    }));
    output.addClass(CELL_OUTPUT_AREA_CLASS);
    // Set a CSS if there are no outputs, and connect a signal for future
    // changes to the number of outputs. This is for conditional styling
    // if there are no outputs.
    if (model.outputs.length === 0) {
      this.addClass(NO_OUTPUTS_CLASS);
    }
    output.outputLengthChanged.connect(
      this._outputLengthHandler,
      this
    );
    outputWrapper.addWidget(outputCollapser);

it('should take an optional contentFactory', () => {
        const contentFactory = Object.create(OutputArea.defaultContentFactory);
        const widget = new OutputArea({ rendermime, contentFactory, model });
        expect(widget.contentFactory).to.equal(contentFactory);
      });
    });

init(classes: string[]): void {
    let row = new FlexPanel({direction: 'left-to-right', evenSizes: true});
    if (this.local) {
      let leftPane = new OutputArea({model: this.local, rendermime: this.rendermime});
      leftPane.addClass(classes[1]);
      row.addWidget(leftPane);
      this.panes.push(leftPane);
    }
    if (this.base) {
      let basePane = new OutputArea({model: this.base, rendermime: this.rendermime});
      basePane.addClass(classes[0]);
      row.addWidget(basePane);
      this.panes.push(basePane);
    }
    if (this.remote) {
      let rightPane = new OutputArea({model: this.remote, rendermime: this.rendermime});
      rightPane.addClass(classes[2]);
      row.addWidget(rightPane);
      this.panes.push(rightPane);
    }
    if (row.widgets.length > 0) {
      this.addWidget(row);
      row = new FlexPanel({direction: 'left-to-right', evenSizes: true});
    }

    this.mergePane = new ReorderableOutputWidget({model: this.merged, rendermime: this.rendermime});
    this.mergePane.addClass(classes[3]);
    row.addWidget(this.mergePane);
    this.panes.push(this.mergePane);
    this.addWidget(row);

    for (let p of this.panes) {

init(classes: string[]): void {
    let row = new FlexPanel({direction: 'left-to-right', evenSizes: true});
    if (this.local) {
      let leftPane = new OutputArea({model: this.local, rendermime: this.rendermime});
      leftPane.addClass(classes[1]);
      row.addWidget(leftPane);
      this.panes.push(leftPane);
    }
    if (this.base) {
      let basePane = new OutputArea({model: this.base, rendermime: this.rendermime});
      basePane.addClass(classes[0]);
      row.addWidget(basePane);
      this.panes.push(basePane);
    }
    if (this.remote) {
      let rightPane = new OutputArea({model: this.remote, rendermime: this.rendermime});
      rightPane.addClass(classes[2]);
      row.addWidget(rightPane);
      this.panes.push(rightPane);
    }

let renderMime = new RenderMimeRegistry(renderers);

  let manager = options.manager;

  renderMime.addFactory(
    {
      safe: false,
      mimeTypes: [WIDGET_MIMETYPE],
      createRenderer: options => new WidgetRenderer(options, manager),
    },
    1
  );

  let model = new OutputAreaModel({ trusted: true });

  let outputArea = new OutputArea({
    model: model,
    rendermime: renderMime,
  });

  $element.replaceWith($cell);

  let $cm_element = $("<div class="thebelab-input">");
  $cell.append($cm_element);
  $cell.append(
    $("<button class="thebelab-button thebelab-run-button">")
      .text("run")
      .attr("title", "run this cell")
      .click(execute)
  );
  $cell.append(
    $("</button><button class="thebelab-button thebelab-restart-button">")</button></div>

runCode(code: string) {
    const model = new OutputAreaModel();
    const outputArea = new OutputArea({ model, rendermime });

    kernelPromise.then(kernel => {
      let node = this.outputDiv.current as HTMLDivElement

      outputArea.future = kernel.requestExecute({ code });
      Widget.attach(outputArea, node)
    });
  }

constructor(element) {
        this._element = element
        this._outputModel = new OutputAreaModel({trusted: true})
        this._outputView = new OutputArea({
            rendermime: createSimpleRenderMimeRegistry(),
            model: this._outputModel,
        })
        this._element.appendChild(this._outputView.node)
    }