Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (omi) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Open and modern framework for building user interfaces.

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 Omi

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 = 'Hello Omi' 
        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(<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('Hello Omi')
    }

    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 your_project_name   # init project, you can also exec 'omi init' 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 omi

or get it from CDN:

Plugins

omi-tap: Support tap event in your Omi project..
omi-router: Router for Omi.
omi-finger: Omi /AlloyFinger integration.
omi-transform: Omi /transformjs integration.
omi-touch: Omi /AlloyTouch integration.

License

This content is released under the MIT License.