Skip to content

Omi 是什么?

Omi (读音 /ˈomɪ/,类似于 欧米) 是 Web Components 框架,内置 JSX 和信号 signal/Signal。

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

I really like the trend towards "frameworks" that:

"export default class Component extends HTMLElement {..}"

This one, Omi, is from Tencent.

    — Dion Almaer

快速上手

Usage

tsx
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)

如上面的阴影区域划分,解释如下:

  • 从 'omi' 模块导入了几个函数和类,包括 render、signal、tag、Component 和 h。
  • 创建了一个名为 count 的信号,并初始化为 0。信号是 Omi 中的一种响应式数据源,当信号的值改变时,所有使用这个信号的组件都会重新渲染
    • 定义了两个函数 add 和 sub,分别用于增加和减少 count 的值。
  • 定义了一个名为 CounterDemo 的组件,这个组件使用了 @tag 装饰器来指定其 HTML 标签名为 'counter-demo'。这个组件有一个静态属性 css 用于定义局部样式,以及一个 render 方法用于定义组件的渲染内容。
  • 使用 render 函数将 CounterDemo 组件渲染到 document.body。

入门了,恭喜你!

使用 OMI CLI

快速创建 Omi + Vite + TS/JS 项目:

bash
$ npx omi-cli init my-app    # 或者创建js项目: npx omi-cli init-js my-app
$ cd my-app           
$ npm start           # develop
$ npm run build       # release
$ npx omi-cli init my-app    # 或者创建js项目: npx omi-cli init-js my-app
$ cd my-app           
$ npm start           # develop
$ npm run build       # release