import { bootstrapModule } from '../lib/bootstrap-module';
import { Component } from '../lib/component';

const rootComponent: Component = {
  name: 'root-component',
  template: `<div>
                    Root Component
                    <br><br><br>
                    <sub-component></sub-component>
                    <sub-sub-component></sub-sub-component>
               </div>`,
  beforeStart: () => console.log(this),
};

const subComponent: Component = {
  name: 'sub-component',
  template: `<div>
    SubComponent
    <br>
    <br>
    <sub-sub-component>
    </sub-sub-component>
</div>`,
  beforeStart: () => console.log('lifecycle hook'),
};

const subSubComponent: Component = {
  name: 'sub-sub-component',
  template: '<div>SUBSUBCOMPONENT</div>',
};

export const startApp = () =>
  bootstrapModule({
    rootComponent: rootComponent,
    components: [rootComponent, subComponent, subSubComponent],
  });