DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
omi/README.md

887 lines
42 KiB
Markdown
Raw Normal View History

update readme omim - add action-sheet
2019-05-26 09:08:12 +08:00
English | [简体中文](./README.CN.md)
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-05-13 09:25:49 +08:00
<p align="center"><img src="https://tencent.github.io/omi/assets/omi-logo2019.svg" alt="omi" width="100"/></p>
docs: update readme
2019-10-16 09:50:56 +08:00
<p align="center"><img src="https://tencent.github.io/omi/assets/omi-v6.jpg" alt="omi" width="1000"/></p>
update readme
2019-05-10 08:15:53 +08:00
<h2 align="center">Omi - Front End Cross-Frameworks Framework</h2>
publish: omi v6.10.0, new functional style api
2019-08-29 09:38:19 +08:00
<p align="center">Merge Web Components, JSX, HTM, Virtual DOM, Functional style and Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Preact, Vue or Angular.</p>
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
docs: update readme
2019-08-29 09:45:52 +08:00
## Quick Preview
Pass data through the component tree without having to pass props down manually at every level by store, auto update the view on demand.
```jsx
import { define, render } from 'omi'
class Store {
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
}
docs: update readme
2019-09-26 15:57:56 +08:00
define('my-counter', _ => (
docs: update readme
2019-08-29 09:45:52 +08:00
<div>
<button onClick={_.store.sub}>-</button>
<span>{_.store.data.count}</span>
<button onClick={_.store.add}>+</button>
</div>
docs: update readme
2019-08-29 11:18:26 +08:00
), {
docs: update readme
2019-09-26 15:57:56 +08:00
use: ['count'],
//or using useSelf, useSelf will update self only, exclude children components
//useSelf: ['count'],
docs: update readme
2019-08-29 11:18:26 +08:00
css: `span { color: red; }`,
installed() {
console.log('installed')
}
})
docs: update readme
2019-08-29 09:45:52 +08:00
render(<my-counter />, 'body', new Store)
```
docs: update readme
2019-09-01 15:52:50 +08:00
* `<my-counter></my-counter>` can be used in any framework or no framework, such as `document.createElement('my-counter')`
docs: update readme
2019-08-29 10:13:31 +08:00
docs: update readme
2019-10-29 13:30:31 +08:00
You can also use `useSelf`, `useSelf` only updates itself. When using `useSelf`, the corresponding attributes are accessed through. `usingSelf` in JSX.
You can also implement `computed` props through `compute`, such as:
docs: update readme
2019-09-30 12:29:38 +08:00
```jsx
define('my-counter', _ => (
<div>
<button onClick={_.store.sub}>-</button>
<span>{_.store.data.count}</span>
<button onClick={_.store.add}>+</button>
docs: update readme
2019-10-29 13:30:31 +08:00
<div>Double: {_.computed.doubleCount}</div>
docs: update readme
2019-09-30 12:29:38 +08:00
</div>
), {
docs: update readme
2019-10-29 13:30:31 +08:00
use: ['count'],
compute: {
doubleCount() {
return this.count * 2
}
}
docs: update readme
2019-09-30 12:29:38 +08:00
})
```
docs: update site and readme
2019-10-02 19:35:33 +08:00
Path is also supported:
```js
class Store {
data = {
list: [
{ name: { first: 'dnt', last: 'zhang' } }
]
}
}
...
...
define('my-counter', _ => (
...
...
), {
use: [
docs: update readme
2019-10-29 13:30:31 +08:00
'list[0].name', //Direct string path dep, accessible through this.using[0]
],
compute: {
fullName() {
return this.list[0].name.first + this.list[0].name.last
}
}
docs: update site and readme
2019-10-02 19:35:33 +08:00
})
```
docs: update readme
2019-11-01 13:27:12 +08:00
![](https://tencent.github.io/omi/assets/store.jpg)
docs: update readme
2019-10-03 17:22:21 +08:00
publish: omi v6.15.0, multi-store injection supported
2019-10-07 14:50:13 +08:00
### Multi-store injection
```jsx
import { define, render } from 'omi'
define('my-app', _ => {
docs: update readme
2019-10-08 10:42:24 +08:00
const store = _.store.storeA
const { data, add, sub } = store
return (
<p>
Clicked: {data.count} times
<button onClick={add}>+</button>
<button onClick={sub}>-</button>
<div>
{_.store.storeB.data.msg}
<button onClick={_.store.storeB.changeMsg}>
change storeB's msg
</button>
</div>
</p>
)
publish: omi v6.15.0, multi-store injection supported
2019-10-07 14:50:13 +08:00
}, {
docs: update readme
2019-10-08 10:42:24 +08:00
useSelf: {
storeA: ['count', 'adding'],
storeB: ['msg']
}
publish: omi v6.15.0, multi-store injection supported
2019-10-07 14:50:13 +08:00
})
const storeA = new class Store {
docs: update readme
2019-10-08 10:42:24 +08:00
data = {
count: 0,
adding: false
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
publish: omi v6.15.0, multi-store injection supported
2019-10-07 14:50:13 +08:00
}
const storeB = new class Store {
docs: update readme
2019-10-08 10:42:24 +08:00
data = {
msg: 'abc'
}
changeMsg = () => {
this.data.msg = 'bcd'
}
publish: omi v6.15.0, multi-store injection supported
2019-10-07 14:50:13 +08:00
}
render( <my-app /> , 'body', {
docs: update readme
2019-10-08 10:42:24 +08:00
storeA,
storeB
publish: omi v6.15.0, multi-store injection supported
2019-10-07 14:50:13 +08:00
})
```
publish(omi): v6.16.0, support compute and computed
2019-10-29 13:49:19 +08:00
How to Multi-store injection with `compute` and `computed`? Very simple:
```jsx
define('my-app', _ => {
docs: update readme
2019-10-29 13:54:09 +08:00
const store = _.store.storeA
const { data, add, sub } = store
return (
<p>
Clicked: {data.count} times
docs: update readme
2019-10-29 13:56:54 +08:00
<button onClick={add}>+</button>
docs: update readme
2019-10-29 13:54:09 +08:00
<button onClick={sub}>-</button>
publish(omi): v6.16.0, support compute and computed
2019-10-29 13:49:19 +08:00
docs: update readme
2019-10-29 13:54:09 +08:00
<div>
{_.store.storeB.data.msg}
<button onClick={_.store.storeB.changeMsg}>
change storeB's msg
docs: update readme
2019-10-29 13:56:54 +08:00
</button>
docs: update readme
2019-10-29 13:54:09 +08:00
</div>
publish(omi): v6.16.0, support compute and computed
2019-10-29 13:49:19 +08:00
docs: update readme
2019-10-29 13:54:09 +08:00
<div>{_.computed.dobuleCount}</div>
<div>{_.computed.reverseMsg}</div>
</p>
)
publish(omi): v6.16.0, support compute and computed
2019-10-29 13:49:19 +08:00
}, {
docs: update readme
2019-10-29 13:54:09 +08:00
useSelf: {
storeA: ['count', 'adding'],
storeB: ['msg']
},
compute: {
dobuleCount() {
return this.storeA.data.count * 2
},
reverseMsg() {
return this.storeB.data.msg.split('').reverse().join('')
}
}
})
publish(omi): v6.16.0, support compute and computed
2019-10-29 13:49:19 +08:00
```
docs: update readme
2019-10-04 09:37:24 +08:00
### API and Hooks
```jsx
define('my-component', _ => (
...
...
), {
docs: update readme
2019-10-29 13:30:31 +08:00
use: ['count', 'path.a', 'path[1].b'],
docs: update readme
2019-10-04 09:37:24 +08:00
useSelf: ['path.c', 'path[1].d'],
docs: update readme
2019-10-29 13:30:31 +08:00
compute: {
doubleCount() {
return this.count * 2
}
},
docs: update readme
2019-10-04 09:37:24 +08:00
css: 'h1 { color: red; }',
propTypes: {
},
defaultProps: {
},
//life cycle
install() { },
installed() { },
uninstall() { },
receiveProps() { },
beforeUpdate() { },
updated() { },
beforeRender() { },
docs: update readme
2019-10-28 14:37:14 +08:00
rendered() { },
//custom methods
myMethodA() { },
myMethodB() { }
docs: update readme
2019-10-04 09:37:24 +08:00
})
```
update readme
2019-03-29 15:01:45 +08:00
## Ecosystem of Omi
update readme
2018-11-05 14:47:11 +08:00
update readme
2019-04-05 15:54:12 +08:00
#### Base
update readme
2019-04-05 15:47:55 +08:00
update readme
2019-03-29 15:01:45 +08:00
| **Project** | **Description** |
update readme
2018-11-05 14:47:11 +08:00
| ------------------------------- | ----------------------------------- |
docs: update readme
2019-10-02 08:14:54 +08:00
| [omi-docs](https://tencent.github.io/omi/site/docs/index.html) and [codepen](https://codepen.io/collection/DrMYgV/) and [webcomponents.dev](https://webcomponents.dev/)| Omi official documents |
docs: update readme
2019-11-04 12:31:44 +08:00
| [omix![](https://dntzhang.github.io/cax/asset/hot.png)](https://github.com/Tencent/omi/tree/master/packages/omix)| 小程序全局状态管理框架，数据触手可及，状态无处遁形 |
| [omim![](https://dntzhang.github.io/cax/asset/hot.png)](https://github.com/Tencent/omi/tree/master/packages/omim)| Cross **frameworks** and **themes** components.([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html) && [JOIN US!](https://github.com/Tencent/omi/tree/master/packages/omim#contribution))|
| [omi-kbone![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| 使用 omi + [kbone](https://github.com/wechat-miniprogram/kbone) 多端开发(小程序和Web)的贪吃蛇游戏。 |
doc - update readme
2019-07-22 11:48:24 +08:00
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers with same api(IE8+)|
docs: update readme
2019-11-04 12:31:44 +08:00
| [omis![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omis)| Omis + React|
| [omiv![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omiv)| Omiv + Vue|
rename omis to omi-ssr
2019-07-20 13:18:04 +08:00
| [omi-ssr](https://github.com/Tencent/omi/tree/master/packages/omi-ssr)| Server-side rendering(support omio only)|
update readme
2019-04-28 14:37:12 +08:00
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js|
update readme
2019-04-30 14:42:18 +08:00
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding. [→ Base Templates](https://github.com/Tencent/omi/tree/master/packages/omi-cli/template) and [→ Other Templates](https://github.com/omijs) |
update readme
2019-04-05 15:47:55 +08:00
| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |
omim - add path progress
2019-06-05 10:36:25 +08:00
| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)| Simple Omi UI |
Omil add omil doc
2019-07-14 09:33:20 +08:00
| [omil](https://github.com/Wscats/omil)|Webpack loader for Omi.js components.([DOCS](https://wscats.github.io/omi-docs/public/home/))|
update readme
2019-05-31 17:54:58 +08:00
| [omi-snippets](https://github.com/Wscats/omi-snippets) |A beautify VSCode extension for .omi or .eno file, [Install now!](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets)|
docs: update readme
2019-08-26 12:05:44 +08:00
| [obaa](https://github.com/Tencent/omi/tree/master/packages/obaa) or [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy) | Observe or Proxy any object's any change |
update readme
2019-04-05 15:47:55 +08:00
docs: update readme
2019-08-22 10:56:19 +08:00
#### Snake MVP
update readme
2019-04-05 15:47:55 +08:00
| **Project** | **Description** |
| ------------------------------- | ----------------------------------- |
docs: update readme
2019-11-04 12:31:44 +08:00
| [omi-snake![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/omi-snake/build/index.html)| The Snake-Eating Game Based on MVP Architecture Written by Omi |
| [omi-kbone-snake![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| omi-kbone 写的 MVP 架构的贪吃蛇小程序 |
docs: update readme
2019-11-04 12:33:36 +08:00
| [Preact-snake](https://github.com/Tencent/omi/tree/master/packages/preact-css/examples/snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/preact-css/examples/snake/build/)| The Snake-Eating Game Based on MVP Architecture Written by Preact + [Preact-CSS](https://github.com/Tencent/omi/tree/master/packages/preact-css) + Omis |
| [[P]react-snake](https://github.com/Tencent/omi/tree/master/packages/react-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/react-snake/build/index.html)| The Snake-Eating Game Based on MVP Architecture Written by React/Preact |
| [vue-snake](https://github.com/Tencent/omi/tree/master/packages/vue-snake) | The Snake-Eating Game Based on MVP Architecture Written by Vue + Omiv |
docs: update readme
2019-11-04 12:31:44 +08:00
| [omix-snake![](https://dntzhang.github.io/cax/asset/hot.png)](https://github.com/Tencent/omi/tree/master/packages/omix-snake) | The Snake-Eating Game Based on MVP Architecture Written by Omix |
docs: update readme
2019-08-22 10:56:19 +08:00
#### Mini Program(小程序)
| **Project** | **Description** |
| ------------------------------- | ----------------------------------- |
docs: update readme
2019-11-04 12:31:44 +08:00
| [omix![](https://dntzhang.github.io/cax/asset/hot.png)](https://github.com/Tencent/omi/tree/master/packages/omix)| 小程序全局状态管理框架，数据触手可及，状态无处遁形 |
| [react-kbone![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/react-kbone)| 直接使用 React 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone) |
| [preact-kbone![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/preact-kbone)| 直接使用 Preact 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone) |
doc - update readme
2019-07-19 15:52:51 +08:00
| [omi-cloud](https://github.com/Tencent/omi/tree/master/packages/omi-cloud)| 小程序•云开发|
update readme
2019-08-08 12:07:01 +08:00
| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA|
docs: update readme
2019-08-19 20:52:27 +08:00
| [mps](https://github.com/Tencent/omi/tree/master/packages/mps)| 原生小程序增强框架(JSX + Less 输出 WXML + WXSS)，也支持 QQ 轻应用 |
update readme
2019-08-08 12:07:01 +08:00
| [cax](https://github.com/Tencent/omi/tree/master/packages/cax)| 小程序 Canvas 和 SVG 渲染引擎 |
update readme
2019-04-05 15:53:49 +08:00
| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA)|
update readme
2019-07-22 12:45:57 +08:00
| [westore](https://github.com/Tencent/westore/)| 小程序状态管理 |
update readme
2019-04-05 15:47:55 +08:00
| [comi](https://github.com/Tencent/omi/tree/master/packages/comi)| 小程序代码高亮和 markdown 渲染组件 |
docs: update readme
2019-09-14 21:01:27 +08:00
| [wx-touch-event](https://github.com/qbright/wx-touch-event)| 基于 [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger) 改造的小程序手势解决方案 |
update readme
2019-04-05 15:47:55 +08:00
update readme
2019-04-05 15:54:12 +08:00
#### Other
update readme
2019-04-05 15:47:55 +08:00
| **Project** | **Description** |
| ------------------------------- | ----------------------------------- |
docs: update readme
2019-11-04 12:31:44 +08:00
| [omi-piano![](https://dntzhang.github.io/cax/asset/hot.png)](https://github.com/Wscats/piano) |Build piano with Omi and Omi Snippets, [Enjoy now!](https://wscats.github.io/piano/build/)|
update readme
2019-03-29 15:01:45 +08:00
| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|
| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|
| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|
| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|
update readme
2019-02-26 20:19:16 +08:00
| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |
update readme
2019-05-01 07:08:10 +08:00
| [omi-vscode](https://github.com/ZainChen/omi-vscode)| VSCode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |
update readme
2019-03-29 15:01:45 +08:00
| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js extension(TypeScript) |
| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Support touch and gesture events in your Omi project.|
| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|
| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|Render web components to native|
docs: update readme
2019-09-15 12:48:30 +08:00
| [omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |
update readme
2019-03-29 15:01:45 +08:00
| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|
Omie Build cross platform desktop apps with Omi.js and Electron.js
2019-06-26 13:25:45 +08:00
| [omie](https://github.com/Wscats/omi-electron) |Build cross platform desktop apps with Omi.js and Electron.js|
docs: update readme
2019-09-09 08:58:11 +08:00
| [omi-cv](https://github.com/Wscats/CV) |Create a front-end engineer curriculum vitae, [Get Started!](http://wscats.github.io/CV/omi/build/index.html)|
docs: update readme
2019-10-24 09:07:06 +08:00
| [Soo](https://github.com/tonis2/Soo)| Has same API as omi but is great alternative if you want to create custom elements without JSX, virtual DOM and store |
docs: update readme
2019-11-01 19:37:04 +08:00
|[CEE](https://omijs.github.io/cee/out/)| Fork from custom-elements-everywhere |
update readme
2019-03-29 15:01:45 +08:00
## Why Omi?
doc - update readme
2019-07-28 10:33:43 +08:00
- Tiny size and [High performance](https://tencent.github.io/omi/packages/omi/examples/perfs/)
docs: update readme
2019-09-08 11:36:42 +08:00
- Cross frameworks(react, preact, vue, angular), components of omi are pure custom elements
update readme
2019-05-07 11:33:24 +08:00
- One framework. Mobile & desktop & mini program
docs: update readme
2019-09-26 16:00:17 +08:00
- Stateless View Architecture Design
doc - update readme
2019-07-28 10:33:43 +08:00
- Be friendly to custom elements, you can pass `false` attributes to elements through string `'0'` or string `'flase'`, you can [pass `object` attributes to elements through `:` prefix and `Omi.$`](https://github.com/Tencent/omi/releases/tag/v6.8.0)
docs: update readme
2019-08-21 11:46:58 +08:00
- [Easy two way binding by extend api](https://codepen.io/omijs/pen/aeLYjx)
update readme
2019-03-29 15:01:45 +08:00
- Supports TypeScript
- Reactive data-binding
update readme
2019-07-15 14:46:01 +08:00
- [Native tap event support](https://github.com/Tencent/omi/releases/tag/v4.0.24)
update readme
2019-05-19 20:01:26 +08:00
- Having Cross-frameworks UI components - [omim](https://tencent.github.io/omi/packages/omim/docs/build/index.html)
update readme
2019-03-29 15:01:45 +08:00
- Excellent compatibility(IE8+) with [omio](https://github.com/Tencent/omi/tree/master/packages/omio)
- Enhanced CSS, [rpx unit support](https://github.com/Tencent/omi/releases/tag/v4.0.26) base on **750** screen width
- Compliance with browser trend and API design
update readme
2019-04-30 11:33:16 +08:00
- Merge [**Web Components**](https://developers.google.com/web/fundamentals/web-components/), [**JSX**](https://reactjs.org/docs/introducing-jsx.html) and [**HTM**](https://github.com/developit/htm) into one framework
update readme
2019-03-29 15:01:45 +08:00
- Web Components can also be a data-driven view, **`UI = fn(data)`**.
- JSX is the best development experience (code intelligent completion and tip) UI Expression with least [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals) and it's turing complete(template engine is not, es template string is but grammatical noise is too loud)
- Look at [Facebook React vs Web Components](https://softwareengineering.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer)，Omi **combines their advantages** and gives developers the **freedom to choose the way they like**
- **Shadow DOM merges with Virtual DOM**, Omi uses both virtual DOM and real Shadow DOM to make view updates more accurate and faster
- **Scoped CSS**'s best solution is [**Shadow DOM**](https://developers.google.com/web/fundamentals/web-components/shadowdom), the community churning out frameworks and libraries for Scoped CSS (using JS or JSON writing styles such as Radium, jsxstyle, react-style; binding to webpack using generated unique `className` `filename-classname-hash`, such as CSS Modules, Vue), are hack technologies; _and Shadow DOM Style is the perfect solution_.
- The original **Path Updating** **store system**. Proxy-based automatic **accurate** update, **low power consumption**, high degree of freedom, excellent performance, easy integration of `requestIdleCallback`,It will automatically update UI partially when data is changed
Compare TodoApp by Omi and React, Omi and React rendering DOM structure:
docs: update readme
2019-09-23 17:16:31 +08:00
| **Omi** | **React** | **Omio** |
| ------------------------------- | ----------------------------------- |----------------------------------- |
docs: update readme
2019-09-23 17:24:15 +08:00
| ![Omi](https://tencent.github.io/omi/assets/omi-render.jpg) | ![React](https://tencent.github.io/omi/assets/react-render.jpg) | ![Omio](https://tencent.github.io/omi/assets/omio.png) |
update readme
2019-02-26 15:49:06 +08:00
update readme
2019-03-29 15:01:45 +08:00
Omi uses Shadow DOM based style isolation and semantic structure.
## Useful Resources
| **Title Name** | **Other language** | **Related**|
| ----------------------------------------- | ------------------ |-----------------|
docs: update readme
2019-08-30 16:56:27 +08:00
|[Snake-Eating Game Making with Web Components of Omi and MVP Architecture](https://github.com/Tencent/omi/blob/master/tutorial/omi-web-components-snake-game-mvp.md)|||
docs: update readme
2019-08-14 11:10:32 +08:00
|[Constructable Stylesheets: seamless reusable styles](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)|||
docs: update readme
2019-08-14 10:54:29 +08:00
|[Web Components specifications](https://github.com/w3c/webcomponents)|||
update readme
2019-06-18 14:34:07 +08:00
|[Web Components in a Nutshell](https://levelup.gitconnected.com/web-components-in-a-nutshell-1e114aa971b9)|||
update readme
2019-06-06 12:46:26 +08:00
|[Using Web Components with React in 2019](https://www.grapecity.com/blogs/using-web-components-with-react-2019)|||
|[Using Web Components in React](https://coryrylan.com/blog/using-web-components-in-react)|||
update readme
2019-03-29 15:01:45 +08:00
|[Styling We Components Using A Shared Style Sheet](https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/)|
|[Developer Tools support for Web Components in Firefox 63](https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/)||
|[Develop W3C Web Components with WebAssembly](https://medium.com/coinmonks/develop-w3c-web-components-with-webassembly-d65938284255)||
| [60FPS Animation In Omi](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.md)| [简体中文](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.cn.md) [한국어](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.kr.md)|
| [Render Web Components To Native](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.md)|[简体中文](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.cn.md) [한국어](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.kr.md)|
| [Shadow Dom In Depth](https://github.com/praveenpuglia/shadow-dom-in-depth)| [简体中文](https://github.com/Tencent/omi/blob/master/tutorial/shadow-dom-in-depth.cn.md)|
| [Part Theme Explainer](https://meowni.ca/posts/part-theme-explainer/)|求翻译|
| [Web Components MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components)| [简体中文](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)|
| [Web Components Google](https://developers.google.com/web/fundamentals/web-components/)|
| [Web Components Org](https://www.webcomponents.org/introduction)|
| [Web Components: the Right Way](https://github.com/mateusortiz/webcomponents-the-right-way)|
| [Proxy MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)|[简体中文](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) [한국어](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy)|
| [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)|[简体中文](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables) [한국어](https://developer.mozilla.org/ko-KR/docs/Web/CSS/Using_CSS_variables)|
| [CSS Shadow Parts](https://drafts.csswg.org/css-shadow-parts-1/)|
| [Platform HTML5](https://platform.html5.org/)|
| [Using requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)|[简体中文](https://div.io/topic/1370)| [A polyfill](https://gist.github.com/paullewis/55efe5d6f05434a96c36)|
| [The Power Of Web Components](https://hacks.mozilla.org/2018/11/the-power-of-web-components/)|[简体中文](https://github.com/Tencent/omi/blob/master/tutorial/the-power-of-web-components.cn.md)|
|[ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)|[简体中文](https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot)||
# Overview of the Readme
- [Ecosystem of Omi](#ecosystem-of-omi)
- [Useful Resources](#useful-resources)
- [Add Omi in One Minute](#add-omi-in-one-minute)
- [Getting Started](#getting-started)
- [Install](#install)
- [Project Template](#project-template)
tab to 2 space
2018-10-25 21:30:18 +08:00
- [Hello Element](#hello-element)
update readme
2019-05-07 13:13:37 +08:00
- [TypeScript Auto Complete](#typescript-auto-complete)
update readme
2019-03-29 15:01:45 +08:00
- [Lifecycle](#lifecycle)
- [Debugging](#debugging)
- [Browsers Support](#browsers-support)
- [Contributors](#contributors)
- [Maintainers](#maintainers)
- [Thanks](#thanks)
add debugging part
2018-10-20 11:14:19 +08:00
- [License](#license)
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-03-29 15:01:45 +08:00
## Add Omi in One Minute
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-04-21 11:47:54 +08:00
This page demonstrates using Omi **with no build tooling**, directly run in the browser.
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
docs: update readme
2019-09-30 12:21:24 +08:00
- [→ Online Demo!](https://codepen.io/omijs/pen/PMZWNb)
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```html
<!DOCTYPE html>
<html>
<head>
update readme
2019-04-21 11:50:04 +08:00
<title>Omi demo without transpiler</title>
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
</head>
<body>
update readme
2019-04-21 11:50:04 +08:00
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script>
docs: update readme
2019-09-30 12:10:15 +08:00
const { define, render, html } = Omi
update readme
2019-04-21 11:50:04 +08:00
docs: update readme
2019-09-30 12:10:15 +08:00
class Store {
data = {
count: 1
update readme
2019-04-21 11:50:04 +08:00
}
docs: update readme
2019-09-30 12:10:15 +08:00
sub = () => {
this.data.count--
update readme
2019-04-21 11:50:04 +08:00
}
docs: update readme
2019-09-30 12:10:15 +08:00
add = () => {
this.data.count++
update readme
2019-04-21 11:50:04 +08:00
}
docs: update readme
2019-09-30 12:10:15 +08:00
}
update readme
2019-04-21 11:50:04 +08:00
docs: update readme
2019-09-30 12:10:15 +08:00
define('my-counter', _ => html`
<div>
<button onClick=${_.store.sub}>-</button>
<span>${_.store.data.count}</span>
<button onClick=${_.store.add}>+</button>
</div>
`, {
use: ['count'],
//or using useSelf, useSelf will update self only, exclude children components
//useSelf: ['count'],
css: `span { color: red; }`,
installed() {
console.log('installed')
}
update readme
2019-04-21 11:50:04 +08:00
})
docs: update readme
2019-09-30 12:10:15 +08:00
render(html`<my-counter />`, 'body', new Store)
update readme
2019-04-21 11:50:04 +08:00
</script>
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
</body>
</html>
```
update readme
2019-05-07 13:13:37 +08:00
Omi Store provides a way to pass data through the component tree without having to pass props down manually at every level, injected from the root component and shared across all subcomponents. It's very simple to use:
update readme
2019-05-14 06:31:07 +08:00
You can also use `my-counter` tag directly in HTML：
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```jsx
<body>
docs: update readme
2019-09-30 12:10:15 +08:00
<my-counter></my-counter>
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
</body>
```
update readme
2018-10-31 19:44:01 +08:00
update readme
2019-03-29 15:01:45 +08:00
## Getting Started
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-03-29 15:01:45 +08:00
### Install
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```bash
update readme
2019-04-22 10:12:50 +08:00
$ npm i omi-cli -g # install cli
$ omi init my-app # init project
$ cd my-app
$ npm start # develop
$ npm run build # release
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```
update readme
2019-03-29 15:01:45 +08:00
> `npx omi-cli init my-app` is also supported(npm v5.2.0+).
update readme
2018-11-21 22:43:27 +08:00
update readme
2019-03-29 15:01:45 +08:00
Directory description:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```
├─ config
├─ public
├─ scripts
├─ src
│ ├─ assets
update readme
2019-03-29 15:01:45 +08:00
│ ├─ elements //Store all custom elements
│ ├─ store //Store all this store of pages
│ ├─ admin.js //Entry js of compiler，will build to admin.html
│ └─ index.js //Entry js of compiler，will build to index.html
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```
update readme
2019-01-08 11:57:08 +08:00
#### Scripts
update readme
2019-01-08 11:54:56 +08:00
```json
"scripts": {
"start": "node scripts/start.js",
"build": "PUBLIC_URL=. node scripts/build.js",
"build-windows": "set PUBLIC_URL=.&& node scripts/build.js",
"fix": "eslint src --fix"
}
```
update readme
2019-03-29 15:01:45 +08:00
You can set up the PUBLIC_URL, such as：
update readme
2019-01-08 11:54:56 +08:00
```json
...
"build": "PUBLIC_URL=https://fe.wxpay.oa.com/dv node scripts/build.js",
"build-windows": "set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& node scripts/build.js",
...
```
update readme
2019-01-15 14:36:37 +08:00
rename reomio to reomi
2019-04-26 09:35:45 +08:00
#### Switch omi, omio and reomi
update readme
2019-01-15 14:36:37 +08:00
update readme
2019-03-29 15:01:45 +08:00
Add or remove the alias config in package.json to switch omi and omio：
update readme
2019-01-15 14:36:37 +08:00
```js
update readme
2019-04-25 11:33:05 +08:00
"alias": {
"omi": "omio"
}
```
update readme
2019-01-08 11:54:56 +08:00
update readme
2019-03-29 15:01:45 +08:00
### Project Template
update readme
2018-10-24 02:04:13 +08:00
update readme
2018-11-25 21:33:52 +08:00
| **Template Type**| **Command**| **Describe**|
update readme
2018-11-25 21:22:54 +08:00
| ------------ | -----------| ----------------- |
update readme
2019-03-29 15:01:45 +08:00
|Base Template(v3.3.0+)|`omi init my-app`| Basic omi or omio(IE8+) project template.|
|Base Template with snapshoot|`omi init-snap my-app`| Basic omi or omio(IE8+) project template with snapshoot prerendering.|
|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|Basic template with typescript.|
|Mobile Template|`omi init-weui my-app`| Mobile web app template with weui and omi-router.|
docs: update readme
2019-09-30 12:40:09 +08:00
|Kbone Template|`omi init-kbone my-app` |Developing mini program or web using omi.|
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
### Hello Element
update readme
2019-03-29 15:01:45 +08:00
Define a custom element by extending **`WeElement`** base class:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```js
update readme
2018-10-30 09:08:59 +08:00
import { define, WeElement } from 'omi'
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2018-10-30 09:08:59 +08:00
define('hello-element', class extends WeElement {
tab to 2 space
2018-10-25 21:30:18 +08:00
onClick = evt => {
// trigger CustomEvent
update readme
2018-10-30 09:08:59 +08:00
this.fire('abc', { name: 'dntzhang', age: 12 })
evt.stopPropagation()
}
tab to 2 space
2018-10-25 21:30:18 +08:00
update readme
2019-06-01 08:57:23 +08:00
//If you need to use <hello-element></hello-element> directly in html, you must declare propTypes
static propTypes = {
msg: String
}
static css = `
update readme
2019-01-15 11:41:00 +08:00
div {
color: red;
cursor: pointer;
}`
tab to 2 space
2018-10-25 21:30:18 +08:00
render(props) {
return (
<div onClick={this.onClick}>
update readme
2019-06-01 08:57:23 +08:00
Hello {props.msg}
tab to 2 space
2018-10-25 21:30:18 +08:00
<div>Click Me!</div>
</div>
update readme
2018-10-30 09:08:59 +08:00
)
tab to 2 space
2018-10-25 21:30:18 +08:00
}
update readme
2018-10-30 09:08:59 +08:00
})
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```
update readme
2019-03-29 15:01:45 +08:00
Using `hello-element`:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
standart code styling
2018-10-22 03:50:09 +08:00
```js
update readme
2018-10-30 09:08:59 +08:00
import { define, render, WeElement } from 'omi'
import './hello-element'
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2018-10-30 09:08:59 +08:00
define('my-app', class extends WeElement {
update readme
2019-06-01 08:57:23 +08:00
data = { abc: 'abc' }
tab to 2 space
2018-10-25 21:30:18 +08:00
update readme
2018-10-30 09:08:59 +08:00
// define CustomEvent Handler
tab to 2 space
2018-10-25 21:30:18 +08:00
onAbc = evt => {
// get evt data by evt.detail
update readme
2018-10-30 09:08:59 +08:00
this.data.abc = ' by ' + evt.detail.name
this.update()
}
tab to 2 space
2018-10-25 21:30:18 +08:00
update readme
2019-06-01 08:57:23 +08:00
static css = `
update readme
2019-01-15 11:41:00 +08:00
div{
color: green;
}`
tab to 2 space
2018-10-25 21:30:18 +08:00
}
render(props, data) {
return (
<div>
update readme
2019-06-01 08:57:23 +08:00
Hello {data.abc}
tab to 2 space
2018-10-25 21:30:18 +08:00
<hello-element
onAbc={this.onAbc}
msg="WeElement"
/>
</div>
update readme
2018-10-30 09:08:59 +08:00
)
tab to 2 space
2018-10-25 21:30:18 +08:00
}
update readme
2018-10-30 09:08:59 +08:00
})
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2018-10-30 09:08:59 +08:00
render(<my-app name="Omi v4.0" />, 'body')
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```
update readme
2019-03-29 15:01:45 +08:00
Tell Babel to transform JSX into `Omi.h()` call:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-03-29 15:01:45 +08:00
```json
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
{
update readme
2019-03-29 15:01:45 +08:00
"presets": ["env", "omi"]
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
}
```
update readme
2019-03-29 15:01:45 +08:00
The following two NPM packages need to be installed to support the above configuration:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-03-29 15:01:45 +08:00
```bash
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
"babel-preset-env": "^1.6.0",
"babel-preset-omi": "^0.1.1",
```
update readme
2019-03-29 15:01:45 +08:00
If you use babel7, you can also use the following packages and configuration:
update readme
2018-10-27 16:08:24 +08:00
```bash
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react
```
```js
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
docs: update readme
2019-10-15 19:27:43 +08:00
"pragma": "Omi.h",
"pragmaFrag": "Omi.h.f"
update readme
2018-10-27 16:08:24 +08:00
}
]
]
}
```
update readme
2019-03-29 15:01:45 +08:00
If you don't want to write CSS in JS, you can use [to-string-loader](https://www.npmjs.com/package/to-string-loader) of webpack,
For example, the following configuration:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-03-29 15:01:45 +08:00
```js
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
{
update readme
2019-03-29 15:01:45 +08:00
test: /[\\|\/]_[\S]*\.css$/,
use: [
'to-string-loader',
'css-loader'
]
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
}
```
docs: update readme
2019-09-26 16:29:08 +08:00
If your CSS file starts with "`_`", CSS will use `to-string-loader`, such as:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-01-15 11:41:00 +08:00
``` js
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
import { tag, WeElement render } from 'omi'
update readme
2019-01-15 11:41:00 +08:00
define('my-app', class extends WeElement {
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-01-15 11:41:00 +08:00
css = require('./_index.css')
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
...
...
...
```
update readme
2019-03-29 15:01:45 +08:00
You can also forget the tedious configuration and use omi-cli directly, no need to configure anything.
docs: update readme
2019-09-30 12:01:52 +08:00
<!--
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
### TodoApp
update readme
2019-03-29 15:01:45 +08:00
Here is a relatively complete example of TodoApp:
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```js
omi v4.0.17
2018-11-03 06:49:36 +08:00
import { define, render, WeElement } from 'omi'
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-06-01 09:01:35 +08:00
define('todo-list', class extends WeElement {
static propTypes = {
items: Array
}
render(props) {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
)
}
update readme
2018-10-30 06:42:07 +08:00
})
define('todo-app', class extends WeElement {
update readme
2019-08-06 12:30:44 +08:00
items = []
text = ''
update readme
2018-10-30 07:01:01 +08:00
render() {
return (
<div>
<h3>TODO</h3>
update readme
2019-08-06 12:30:44 +08:00
<todo-list items={this.items} />
update readme
2018-10-30 07:01:01 +08:00
<form onSubmit={this.handleSubmit}>
<input
id="new-todo"
onChange={this.handleChange}
update readme
2019-08-06 12:30:44 +08:00
value={this.text}
update readme
2018-10-30 07:01:01 +08:00
/>
update readme
2019-08-06 12:30:44 +08:00
<button>Add #{this.items.length + 1}</button>
update readme
2018-10-30 07:01:01 +08:00
</form>
</div>
)
}
handleChange = e => {
update readme
2019-08-06 12:30:44 +08:00
this.text = e.target.value
update readme
2018-10-30 07:01:01 +08:00
}
handleSubmit = e => {
e.preventDefault()
update readme
2019-08-06 12:30:44 +08:00
if (!this.text.trim().length) {
update readme
2018-10-30 07:01:01 +08:00
return
}
update readme
2019-08-06 12:30:44 +08:00
this.items.push({
text: this.text,
update readme
2018-10-30 07:01:01 +08:00
id: Date.now()
})
update readme
2019-08-06 12:30:44 +08:00
this.text = ''
this.update()
update readme
2018-10-30 07:01:01 +08:00
}
update readme
2018-10-30 06:42:07 +08:00
})
render(<todo-app />, 'body')
docs: update readme
2019-09-30 12:01:52 +08:00
``` -->
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-05-07 13:13:37 +08:00
### TypeScript Auto Complete
update readme - update content about store system
2019-01-11 09:02:26 +08:00
update readme
2019-05-07 13:13:37 +08:00
```jsx
import { h, WeElement, tag, classNames } from 'omi';
import * as styles from './_index.less';
update readme - update content about store system
2019-01-11 09:02:26 +08:00
update readme
2019-05-07 13:13:37 +08:00
interface ButtonProps {
href?: string,
disabled?: boolean,
type?: 'default' | 'primary' | 'danger',
htmltype?: 'submit' | 'button' | 'reset',
onClick?: (e: any) => void
update readme - update content about store system
2019-01-11 09:02:26 +08:00
}
update readme
2019-05-07 13:13:37 +08:00
const TAG = 'o-button'
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-05-07 13:13:37 +08:00
declare global {
namespace JSX {
interface IntrinsicElements {
[TAG]: Omi.Props & ButtonProps
tab to 2 space
2018-10-25 21:30:18 +08:00
}
}
update readme
2019-05-07 13:13:37 +08:00
}
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-05-07 13:13:37 +08:00
@tag(TAG)
docs: update readme
2019-09-25 10:56:48 +08:00
export default class oButton extends WeElement<ButtonProps> {
update readme
2019-05-07 13:13:37 +08:00
...
...
...
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
```
update readme
2019-05-07 13:13:37 +08:00
<img src="./assets/ts.png" alt="omi" width="427"/>
update readme
2018-10-21 17:19:49 +08:00
update readme
2019-03-29 15:01:45 +08:00
### Lifecycle
update readme
2018-10-28 08:19:56 +08:00
| Lifecycle method | When it gets called |
| ---------------- | -------------------------------------------- |
| `install` | before the component gets mounted to the DOM |
| `installed` | after the component gets mounted to the DOM |
| `uninstall` | prior to removal from the DOM |
| `beforeUpdate` | before update |
Omi v5.0 - Friendly to MVVM
2018-11-25 21:13:16 +08:00
| `updated` | after update |
update readme
2018-10-28 08:19:56 +08:00
| `beforeRender` | before `render()` |
update readme
2019-06-07 15:30:24 +08:00
| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action|
update readme
2018-10-28 08:19:56 +08:00
update readme
2019-03-29 15:01:45 +08:00
## Debugging
update readme
2018-10-28 08:19:56 +08:00
update readme
2019-03-29 15:01:45 +08:00
Easy to debug via [Omi DevTools Extension](https://github.com/f/omi-devtools) [[Install from Chrome WebStore](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd)], using Omi DevTools you can simply debug and manage your UI **without any configuration**. Just install and debug.
update readme
2018-10-28 08:19:56 +08:00
update readme
2019-03-29 15:01:45 +08:00
Since Omi uses Web Components and Shadow-DOM, it doesn't need to have another elements panel such as React has. It just adds a panel to the **Elements' sidebar** and it's powerful as much as React DevTools.
update readme
2018-10-28 08:19:56 +08:00
![Omi DevTools](https://github.com/f/omi-devtools/raw/master/omi-devtools.gif)
update readme omim - add action-sheet
2019-05-26 09:08:12 +08:00
### View registered elements
```js
console.log(Omi.elements)
```
update readme
2019-03-25 16:58:16 +08:00
<!--
update readme
2019-03-29 15:01:45 +08:00
## React to Omi
update readme
2018-11-05 13:14:43 +08:00
update readme
2019-03-29 15:01:45 +08:00
For example, the below is about migration React button as weui Omi button:
update readme
2018-11-05 13:14:43 +08:00
![react to omi](./assets/react-to-omi.png)
* [Diff Split](https://github.com/Tencent/omi/commit/9790fadaaf20cfede80bcf9213756a83fc8c3949?diff=split)
* [Diff Unified](https://github.com/Tencent/omi/commit/9790fadaaf20cfede80bcf9213756a83fc8c3949?diff=unified)
* [Before](https://github.com/Tencent/omi/blob/c8af654f1d5865dc557c0b4b8ad524f702a69be5/packages/omi-weui/src/omi-weui/elements/button/button.js)
update readme
2019-03-25 16:58:16 +08:00
* [After](https://github.com/Tencent/omi/blob/9790fadaaf20cfede80bcf9213756a83fc8c3949/packages/omi-weui/src/omi-weui/elements/button/button.js) -->
update readme
2018-11-05 13:14:43 +08:00
update readme
2019-03-29 15:01:45 +08:00
## Browsers Support
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-05-05 14:37:19 +08:00
> [Omio](https://github.com/Tencent/omi/tree/master/packages/omio) - Omi for old browsers(IE8+)
update readme
2018-12-13 16:15:47 +08:00
docs: update readme
2019-09-13 09:17:25 +08:00
Omi works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2018-10-23 06:47:28 +08:00
![→ Browsers Support](./assets/browsers-support.png)
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-03-29 15:01:45 +08:00
[→ Polyfills](https://github.com/webcomponents/webcomponentsjs)
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2018-12-11 14:56:28 +08:00
```html
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script>
```
omi v6.7.1 * Remove dead code * Update cmd of build example
2019-07-27 16:04:16 +08:00
## Contribution
Build a example:
```bash
npm start example_name
```
Build omi:
```bash
npm run build
```
Unit testing
```
npm run test
```
update readme
2019-03-29 15:01:45 +08:00
## Contributors
update readme
2018-11-26 17:42:55 +08:00
<table><tbody>
docs: update readme
2019-08-16 15:33:07 +08:00
<tr><td><a target="_blank" href="https://github.com/dntzhang"><img width="60px" src="https://avatars2.githubusercontent.com/u/7917954?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/LeeHyungGeun"><img width="60px" src="https://avatars2.githubusercontent.com/u/2471651?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/xcatliu"><img width="60px" src="https://avatars1.githubusercontent.com/u/5453359?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/1921622004"><img width="60px" src="https://avatars1.githubusercontent.com/u/19359217?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/yanceyou"><img width="60px" src="https://avatars2.githubusercontent.com/u/16320418?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/f"><img width="60px" src="https://avatars0.githubusercontent.com/u/196477?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/pasturn"><img width="60px" src="https://avatars0.githubusercontent.com/u/6126885?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/Wscats"><img width="60px" src="https://avatars3.githubusercontent.com/u/17243165?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/akira-cn"><img width="60px" src="https://avatars0.githubusercontent.com/u/316498?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/ZainChen"><img width="60px" src="https://avatars3.githubusercontent.com/u/15615524?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/dangxuandev"><img width="60px" src="https://avatars1.githubusercontent.com/u/5436704?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/daizhan"><img width="60px" src="https://avatars0.githubusercontent.com/u/5318547?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/132yse"><img width="60px" src="https://avatars1.githubusercontent.com/u/12951461?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/elfman"><img width="60px" src="https://avatars3.githubusercontent.com/u/948001?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/NoBey"><img width="60px" src="https://avatars3.githubusercontent.com/u/10740524?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/hilkbahar"><img width="60px" src="https://avatars2.githubusercontent.com/u/12161006?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/eyea"><img width="60px" src="https://avatars0.githubusercontent.com/u/17020223?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/guisturdy"><img width="60px" src="https://avatars1.githubusercontent.com/u/7098619?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/KidneyFlower"><img width="60px" src="https://avatars1.githubusercontent.com/u/16027183?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/zhangsanshi"><img width="60px" src="https://avatars1.githubusercontent.com/u/3771933?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/xland"><img width="60px" src="https://avatars0.githubusercontent.com/u/2980915?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/winstonxie"><img width="60px" src="https://avatars3.githubusercontent.com/u/16422642?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/ghostzhang"><img width="60px" src="https://avatars3.githubusercontent.com/u/194242?s=60&amp;v=4"></a></td>
update readme
2019-04-29 10:26:21 +08:00
<td><a target="_blank" href="https://github.com/jayZOU"><img width="60px" src="https://avatars3.githubusercontent.com/u/8576977?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/zhengbao"><img width="60px" src="https://avatars3.githubusercontent.com/u/1736166?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/vorshen"><img width="60px" src="https://avatars3.githubusercontent.com/u/10334783?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/akira-cn"><img width="60px" src="https://avatars3.githubusercontent.com/u/316498?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/loo41"><img width="60px" src="https://avatars3.githubusercontent.com/u/28095677?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/rainmanhhh"><img width="60px" src="https://avatars3.githubusercontent.com/u/13862623?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/nbompetsis"><img width="60px" src="https://avatars3.githubusercontent.com/u/11991105?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/CodeFalling"><img width="60px" src="https://avatars1.githubusercontent.com/u/5436704?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/daizhan"><img width="60px" src="https://avatars0.githubusercontent.com/u/5318547?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/ritschwumm"><img width="60px" src="https://avatars2.githubusercontent.com/u/547138?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/kahwee"><img width="60px" src="https://avatars3.githubusercontent.com/u/262105?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/alanyinjs"><img width="60px" src="https://avatars3.githubusercontent.com/u/25688258?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/electerious"><img width="60px" src="https://avatars2.githubusercontent.com/u/499088?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/nanhupatar"><img width="60px" src="https://avatars1.githubusercontent.com/u/27266016?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/ilker0"><img width="60px" src="https://avatars1.githubusercontent.com/u/23511412?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/MrGrabazu"><img width="60px" src="https://avatars2.githubusercontent.com/u/6928672?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/Tagir-A"><img width="60px" src="https://avatars2.githubusercontent.com/u/23556586?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/mahmut-gundogdu"><img width="60px" src="https://avatars2.githubusercontent.com/u/2217899?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/howel52"><img width="60px" src="https://avatars3.githubusercontent.com/u/9854818?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/yolio2003"><img width="60px" src="https://avatars1.githubusercontent.com/u/352931?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/loo41"><img width="60px" src="https://avatars3.githubusercontent.com/u/28095677?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/nbompetsis"><img width="60px" src="https://avatars1.githubusercontent.com/u/11991105?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/WozHuang"><img width="60px" src="https://avatars2.githubusercontent.com/u/22727100?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/web-padawan"><img width="60px" src="https://avatars2.githubusercontent.com/u/10589913?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/SuperHuangXu"><img width="60px" src="https://avatars1.githubusercontent.com/u/14816052?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/LastHeaven"><img width="60px" src="https://avatars1.githubusercontent.com/u/10590077?s=60&amp;v=4"></a></td>
docs: update readme
2019-08-16 15:28:15 +08:00
<td><a target="_blank" href="https://github.com/validalias"><img width="60px" src="https://avatars3.githubusercontent.com/u/44221844?s=60&amp;v=4"></a></td></tr><tr>
update contributors
2019-05-12 18:37:14 +08:00
<td><a target="_blank" href="https://github.com/FAKER-A"><img width="60px" src="https://avatars2.githubusercontent.com/u/25676164?s=60&amp;v=4"></a></td>
<td><a target="_blank" href="https://github.com/liulinboyi"><img width="60px" src="https://avatars2.githubusercontent.com/u/41336612?s=60&amp;v=4"></a></td>
docs: update readme
2019-09-27 15:18:06 +08:00
<td><a target="_blank" href="https://github.com/hulei"><img width="60px" src="https://avatars2.githubusercontent.com/u/6905072?s=60&amp;v=4"></a></td> <td><a target="_blank" href="https://github.com/mtonhuang"><img width="60px" src="https://avatars2.githubusercontent.com/u/30364922?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/Juliiii"><img width="60px" src="https://avatars2.githubusercontent.com/u/23744602?s=60&amp;v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/mingkang1993"><img width="60px" src="https://avatars2.githubusercontent.com/u/9126292?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/liufushihai"><img width="60px" src="https://avatars2.githubusercontent.com/u/28208916?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/supermp"><img width="60px" src="https://avatars2.githubusercontent.com/u/892475?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/LeachZhou"><img width="60px" src="https://avatars2.githubusercontent.com/u/18715564?s=60&amp;v=4"></a></td><td><a target="_blank" href="https://github.com/yiliang114"><img width="60px" src="https://avatars2.githubusercontent.com/u/11473889?s=60&amp;v=4"></a></td>
</tr></tbody></table>
update readme
2018-11-26 17:42:55 +08:00
docs: update readme
2019-10-03 16:20:25 +08:00
Here is the [todo list](./todo.md), welcome to contribute together.
docs: update readme
2019-10-04 10:23:35 +08:00
## Design philosophy
The Omi design was driven by The Zen of Python, by Tim Peters philosophy:
* Beautiful is better than ugly.
* Explicit is better than implicit.
* Simple is better than complex.
* Complex is better than complicated.
* Flat is better than nested.
* Sparse is better than dense.
* Readability counts.
* Special cases aren't special enough to break the rules.
* Although practicality beats purity.
* Errors should never pass silently.
* Unless explicitly silenced.
* In the face of ambiguity, refuse the temptation to guess.
* There should be one—and preferably only one—obvious way to do it.
* Although that way may not be obvious at first unless you're Dutch.
* Now is better than never.
* Although never is often better than right now.[n 1]
* If the implementation is hard to explain, it's a bad idea.
* If the implementation is easy to explain, it may be a good idea.
* Namespaces are one honking great idea—let's do more of those!
update readme
2019-07-25 20:16:12 +08:00
## Core Maintainers
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
update readme
2019-07-25 20:16:12 +08:00
- [@Wscats](https://github.com/Wscats)
standart code styling
2018-10-22 03:50:09 +08:00
- [@f](https://github.com/f)
update readme
2018-11-01 10:43:37 +08:00
- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
standart code styling
2018-10-22 03:50:09 +08:00
- [@dntzhang](https://github.com/dntzhang)
update readme
2018-10-25 11:38:56 +08:00
- [@xcatliu](https://github.com/xcatliu)
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
docs: update readme
2019-09-18 16:55:39 +08:00
Please contact us for any questions.
update readme
2018-11-10 14:44:23 +08:00
update readme
2019-03-29 15:01:45 +08:00
## Thanks
update readme
2018-10-29 14:58:04 +08:00
docs: update readme
2019-09-05 08:27:43 +08:00
* [preact](https://github.com/developit/preact)
docs: update readme
2019-10-23 09:25:36 +08:00
* [obaa](https://github.com/Tencent/omi/tree/master/packages/obaa)
update readme
2018-11-12 15:53:48 +08:00
* [create-react-app](https://github.com/facebook/create-react-app)
* [JSX](https://github.com/facebook/jsx)
update readme
2019-04-25 11:13:29 +08:00
* [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy)
update readme
2018-10-29 14:58:04 +08:00
Merge branch 'master' into master
2018-10-20 10:59:36 +08:00
## License
MIT © Tencent