Introduction ​

What's Omi ？ ​

Omi (pronounced /ˈomɪ/) is web components framework base JSX and signal.

Omi looks really neat!
　　　　— Jason Miller (Creator of Preact)

I really like the trend towards "frameworks" that:

class Component extends HTMLElement {..}

This one, Omi, is from Tencent.
　　　　— Dion Almaer

Add Omi in One Minute ​

Install ​

npm i omi

npm i omi

Usage ​

import { render, signal, tag, Component, h } from 'omi'

const count = signal(0)

function add() {
  count.value++
}

function sub() {
  count.value--
}

@tag('counter-demo')
class CounterDemo extends Component {
  static css = 'span { color: red; }'

  render() {
    return (
      <>
        <button onClick={sub}>-</button>
        <span>{count.value}</span>
        <button onClick={add}>+</button>
      </>
    )
  }
}

render(<counter-demo />, document.body)

import { render, signal, tag, Component, h } from 'omi'

const count = signal(0)

function add() {
  count.value++
}

function sub() {
  count.value--
}

@tag('counter-demo')
class CounterDemo extends Component {
  static css = 'span { color: red; }'

  render() {
    return (
      <>
        <button onClick={sub}>-</button>
        <span>{count.value}</span>
        <button onClick={add}>+</button>
      </>
    )
  }
}

render(<counter-demo />, document.body)

This code is a simple counter application created using the Omi framework.

• First, we import several functions and classes from the 'omi' module, including render, signal, tag, Component, and h.
• Then, we create a signal named count and initialize it to 0. Signals are a type of reactive data source in Omi. When the value of a signal changes, all components that use this signal will be re-rendered. Next, we define two functions add and sub, which are used to increase and decrease the value of count, respectively.
• Then, we define a component named CounterDemo. This component uses the @tag decorator to specify its HTML tag name as 'counter-demo'. This component has a static property css for defining scoped styles, and a render method for defining the content of the component.
• Finally, we use the render function to render the CounterDemo component to document.body.

Getting started, Congratulations!

Using OMI CLI ​

To quickly create an Omi + Vite + TS/JS project:

$ npx omi-cli init my-app    # or create js project by: npx omi-cli init-js my-app
$ cd my-app           
$ npm start           # develop
$ npm run build       # release

$ npx omi-cli init my-app    # or create js project by: npx omi-cli init-js my-app
$ cd my-app           
$ npm start           # develop
$ npm run build       # release

To quickly create an Omi + Router + Signal + Suspense + Tailwindcss + Vite + TS project:

$ npx omi-cli init-spa my-app  
$ cd my-app           
$ npm start           # develop
$ npm run build       # release

$ npx omi-cli init-spa my-app  
$ cd my-app           
$ npm start           # develop
$ npm run build       # release