How to use the omi.makeHTML function in omi

import Omi from 'omi';
import Content from './content/index.js';
import Sidebar from './sidebar/index.js';
import Head from './head/index.js';
import Pager from './pager/index.js';

Omi.makeHTML('Content', Content);
Omi.makeHTML('Sidebar', Sidebar);
Omi.makeHTML('Head', Head);
Omi.makeHTML('Pager', Pager);

class Frame extends Omi.Component {
    constructor(data) {
        super(data);
    }

    install() {
        this.$store.addView(this);
        this.setViewport();
        window.onresize = ()=> {
            if(  window.innerWidth < 768) {
                this.refs.main.style.width = '100%';
            }else{

import Omi from 'omi';
import Content from './content/index.js';
import Sidebar from './sidebar/index.js';
import Head from './head/index.js';
import Pager from './pager/index.js';

Omi.makeHTML('Content', Content);
Omi.makeHTML('Sidebar', Sidebar);
Omi.makeHTML('Head', Head);
Omi.makeHTML('Pager', Pager);

class Frame extends Omi.Component {
    constructor(data) {
        super(data);
    }

    install() {
        this.$store.addView(this);
        this.setViewport();
        window.onresize = ()=> {
            if(  window.innerWidth < 768) {
                this.refs.main.style.width = '100%';
            }else{
                this.refs.main.style.width = (window.innerWidth - 220)+'px';
            }
        }

import Omi from 'omi';
import Content from './content/index.js';
import Sidebar from './sidebar/index.js';
import Head from './head/index.js';
import Pager from './pager/index.js';

Omi.makeHTML('Content', Content);
Omi.makeHTML('Sidebar', Sidebar);
Omi.makeHTML('Head', Head);
Omi.makeHTML('Pager', Pager);

class Frame extends Omi.Component {
    constructor(data) {
        super(data);
    }

    install() {
        this.$store.addView(this);
        this.setViewport();
        window.onresize = ()=> {
            if(  window.innerWidth < 768) {
                this.refs.main.style.width = '100%';
            }else{
                this.refs.main.style.width = (window.innerWidth - 220)+'px';
            }

import Omi from 'omi';
import List from '../list/index.js';
import config from '../../docs/config.js';

Omi.makeHTML('List', List);

class Sidebar extends Omi.Component {
    constructor(data) {
        super(data);
    }

    install () {
        this.data.items = config['menus'][this.data.lan] ;
        this.data.height = window.innerHeight -45;
    }

    style () {
        return require('./index.css');
    }

    render () {

import Omi from 'omi';
import Content from './content/index.js';
import Sidebar from './sidebar/index.js';
import Head from './head/index.js';
import Pager from './pager/index.js';

Omi.makeHTML('Content', Content);
Omi.makeHTML('Sidebar', Sidebar);
Omi.makeHTML('Head', Head);
Omi.makeHTML('Pager', Pager);

class Frame extends Omi.Component {
    constructor(data) {
        super(data);
    }

    install() {
        this.$store.addView(this);
        this.setViewport();
        window.onresize = ()=> {
            if(  window.innerWidth < 768) {
                this.refs.main.style.width = '100%';
            }else{
                this.refs.main.style.width = (window.innerWidth - 220)+'px';

import Omi from 'omi';
import List from '../list/index.js';


Omi.makeHTML('List', List);

class Sidebar extends Omi.Component {
    constructor(data,option) {
        super(data,option);
    }

    beforeRender(){
        this.data.height = window.innerHeight -45;
    }

    style () {
        return require('./index.css');
    }

    render () {
        return require('./index.html');

import Root from './config.js'
import Omi from 'omi'
import UserList from '../component/user_list/index.js'

Omi.makeHTML('UserList', UserList)

class Main extends Omi.Component {
    constructor(data) {
        super(data)
    }

    installed() {
        window.onscroll = () => this.loadMore()
        this.requestData(data => this.list.appendUsers(data))
    }

    loadMore() {
        const body = document.body,
            html = document.documentElement,
            height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
            vp_height = window.innerHeight

import Omi from 'omi';
import List from './list/index.js';
import config from '../docs/config.js';

Omi.makeHTML('List', List);

class Sidebar extends Omi.Component {
    constructor(data) {
        super(data);
    }

    install () {
        this.data.items = config['menus'][this.data.lan] ;
        this.data.height = window.innerHeight -45;
    }

    style () {
        return `
    <style>
        @media only screen and (max-width: 768px) {
            .list{</style>

import Omi from 'omi';
import List from './list.js';

Omi.makeHTML('List', List);

class Todo extends Omi.Component {
    constructor(data) {
        super(data);
        this.data.length = this.data.items.length;
        this.listData = { items : this.data.items };
    }

    add (evt) {
        evt.preventDefault();
        this.list.data.items.push(this.data.text);
        this.data.length = this.list.data.items.length;
        this.data.text = '';
        this.update();
    }