omix

1.2.9 • Public • Published

Omi

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

Build Status Version Download PRs

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:

omi init your_project_name

Install

npm install omix

or get it from CDN:

Plugins

License

This content is released under the MIT License.

Readme

Keywords

Package Sidebar

Install

npm i omix

Weekly Downloads

15

Version

1.2.9

License

MIT

Last publish

Collaborators

  • dntzhang