Build UI with JSX or hyperscript - 使用 JSX 或 hyperscript 创建用户界面

• 中文文档
• Omi REPL
• Use Omi if you like template

Features

• Super fast, click here!!!!
• Super tiny size, 7 KB (gzip)
• Good compatibility, support IE8
• Support Scoped CSS, reusable components are composed of HTML, Scoped CSS and JS
• More free updates, each component has a update method, free to choose the right time to update

Omix

with JSX

class Hello extends Omi.Component {
    render() {
        return <div> Hello {this.data.name}!</div>
    }
}

Omi.tag('hello', Hello)

class App extends Omi.Component {
    install() {
        this.name = 'Omi'
    }

    handleClick(e) {
        this.name = 'Omix' 
        this.update()
    }

    style() {
        return `h3{
	            color:red;
	            cursor: pointer;
	        }`
    }

    render() {
        return <div>
	            <hello name={this.name}></hello>
	            <h3 onclick={this.handleClick.bind(this)}>Scoped css and event test! click me!</h3>
	        </div>
    }
}

Omi.render(new App(), '#container')

with hyperscript

const $ = Omi.tags

class Hello extends Omi.Component {
    render() {
        return $.div( 'Hello' + this.data.name+'!')
    }
}

Omi.tag('hello-tag', Hello)

class App extends Omi.Component {
    handleClick(e) {
        alert(e.target.innerHTML)
    }

    render() {
        return $.div([
	            $.HelloTag({name: 'Omi'}),
	            $.h3({onclick: this.handleClick.bind(this)}, 'scoped css and event test! click me!')
	        ])
    }
}

hyperscript API

const $ = Omi.tags
$.tagName(selector)
$.tagName(attrs)
$.tagName(children)
$.tagName(attrs, children)
$.tagName(selector, children)
$.tagName(selector, attrs, children)

omi-cli

$ npm install omi-cli -g         # install cli
$ omi init-x your_project_name   # init project, you can also exec 'omi init-x' in an empty folder
$ cd your_project_name           # please ignore this command if you executed 'omi init' in an empty folder
$ npm start                      # develop
$ npm run dist                   # release

Install

npm install omix

or get it from CDN:

<script src="https://unpkg.com/[email protected]/dist/omix.min.js"></script>

License

This content is released under the MIT License.