Omix NPM | npm.io

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

Hello Omix

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

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

    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}>Scoped css and event test! click me!</h3>
	        </div>
    }
}

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

Using Store System

class Store  {
    constructor(data, callbacks) {
        this.name = data.name || ''
        this.onRename = callbacks.onRename || function(){}
    }

    rename(name){
        this.name = name
        this.onRename()
    }
}


class Hello extends Omi.Component {
    render() {
        return (
            //you can also use this.$store.name here. but using data if this is a pure component.
            <div> Hello <span>{this.data.name}</span>!</div>
        )
    }
}

class App extends Omi.Component {

    install(){
        this.rename = this.rename.bind(this)
    }

    rename(){
        this.$store.rename('Omix')
    }

    render() {
        return (
            <div onclick={this.rename}>
                <Hello name={this.$store.name}></Hello>
            </div>
        )
    }
}

let app = new App()
let store = new Store({ name : 'Omi' } ,{
    onRename :()=>{
        app.update()
    }
})

Omi.render(app, 'body',{
    store
})

→Try it online←

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

the latest cli support blow cmd to init omix project, not omi project: