15017 changed files with 88001 additions and 1472754 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,8 +1,7 @@
 root = true

 [*]
-indent_style = space
-indent_size = 2
+indent_style = tab
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
--- a/.eslintrc
+++ b/.eslintrc
@ -7,10 +7,8 @@
      "jsx": true
    }
  },
-  "plugins": ["prettier"],
  "rules": {
    "semi": [1, "never"],
-    "indent": ["error", 2], 
-    "prettier/prettier": "error"
+    "indent": ["error", 2]
  }
 }
--- a/.gitignore
+++ b/.gitignore
@ -6,20 +6,9 @@ node_modules
 /coverage
 package-lock.json
 /test/ts/**/*.js
-yarn.lock

 # Editor and IDE configuration
 .vscode/
 .idea/

-vue-ms
 /packages/*/node_modules
-/packages/*/yarn.lock
-/packages/*/yarn-error.log
-
-npm-debug.log
-/packages/*/todo.md
-bak.js
-
-# test ouput
-coverage
--- a/.prettierignore
+++ b/.prettierignore
@ -1,2 +0,0 @@
-dist
-node_modules
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -1,9 +0,0 @@
-module.exports = {
-  printWidth: 80,
-  tabWidth: 2,
-  useTabs: false,
-  singleQuote: true,
-  semi: false,
-  trailingComma: "none",
-  bracketSpacing: true
-};
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,15 @@
+# Contributing
+
+Any form of contribution is welcome.
+
+## Acknowledgements
+
+- vorshen <987733967@qq.com>
+- pasturn <pasturn@qq.com>
+- xcatliu <xcatliu@gmail.com>
+
+The above contributors have been officially released by Tencent.
+
+## Tencent open source contributor incentives
+
+We very much welcome developers to contribute to Tencent's open source, and we will also give them incentives to acknowledge and thank them. Here we provide an official description of Tencent's open source contribution. Specific contribution rules for each project are formulated by the project team. Developers can choose the appropriate project and participate according to the corresponding rules. The Tencent Project Management Committee will report regularly to qualified contributors and awards will be issued by the official contact.
--- a/3
+++ b/3
@ -7,13 +7,12 @@ A copy of the MIT License is included in this file.

 Open Source Software Licensed Under the MIT License:
 ------------------------------------------------------
-preact v8.2.7+
+preact 8.2.7
 Copyright (c) 2017 Jason Miller

 jsonpatcherproxy 0.0.10
 Copyright (c) 2018 alshakero

-
 The MIT License (MIT)
 ------------------------------------------------------
 Permission is hereby granted, free of charge, to any person obtaining a copy
--- a/README.CN.md
+++ b/README.CN.md
@ -1,230 +1,77 @@
-[English](./README.md) | 简体中文 
+[English](./README.md) | 简体中文 | [한국어](./README.KR.md)

-<p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
-<h2 align="center">Omi - 前端跨框架跨平台框架</h2>
-
-> Omiu - 使用 Omi 打造的跨框架、[跨主题](https://omi.cdn-go.cn/admin/latest/index.html#/docs/theme) UI 组件库
-
-* [💯国内加速访问 Omi Admin](https://omi.cdn-go.cn/admin/latest/index.html)
-* [💯Omiu 打造的 Omi Admin](https://tencent.github.io/omi/packages/admin/dist/index.html)
-
-
-使用 TypeScript 开发跨框架的按钮组件:
-
-```ts
-import { tag, WeElement, h, extractClass } from 'omi'
-import * as css from './index.scss'
-
-interface Props {
-  size?: 'medium' | 'small' | 'mini',
-  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
-  plain?: boolean,
-  round?: boolean,
-  circle?: boolean,
-  loading?: boolean,
-  disabled?: boolean,
-  icon?: string,
-  autofocus?: boolean,
-  nativeType?: 'button' | 'submit' | 'reset',
-  block?: boolean
-  text?: string
-}
-
-@tag('o-button')
-export default class Button extends WeElement<Props>{
-  static css = css
-
-  static defaultProps = {
-    plain: false,
-    round: false,
-    circle: false,
-    loading: false,
-    disabled: false,
-    autofocus: false,
-    nativeType: 'button',
-    block: false
-  }
-
-  static propTypes = {
-    size: String,
-    type: String,
-    plain: Boolean,
-    round: Boolean,
-    circle: Boolean,
-    loading: Boolean,
-    disabled: Boolean,
-    icon: String,
-    autofocus: Boolean,
-    nativeType: String,
-    block: Boolean,
-    text: String
-  }
-
-  render(props) {
-    return <button disabled={props.disabled} {...extractClass(props, 'o-button', {
-      ['o-button-' + props.type]: props.type,
-      ['o-button-' + props.size]: props.size,
-      'is-plain': props.plain,
-      'is-round': props.round,
-      'is-circle': props.circle,
-      'is-disabled': props.disabled,
-      'is-block': props.block
-    })} type={props.nativeType} >
-      {props.loading && <i class='icon-loading'></i>}
-      {props.text}
-      <slot></slot>
-    </button>
-  }
-}
-```
-
-
-## 快速开始开发项目
-
-```bash
-$ npm i omi-cli -g    # install cli
-$ omi init my-app     # 初始化项目，也可以在空目录里执行 'omi init'
-$ cd my-app           # 如果在空目录里执行 'omi init' 忽略这条命令
-$ npm start           # 开发
-$ npm run build       # 编译发布
-```
-
-> `npx omi-cli init my-app` 也支持(要求 npm v5.2.0+)
-
-## 快速开始开发跨框架组件
-
-```bash
-$ npm i omi-cli -g    # install cli
-$ omi init-component my-component     # 初始化项目，也可以在空目录里执行 'omi init'
-$ cd my-app           # 如果在空目录里执行 'omi init' 忽略这条命令
-$ npm start           # 开发
-$ npm run build       # 编译发布
-```
-
-> `npx omi-cli init-component my-component` 也支持(要求 npm v5.2.0+)
-
-
-## Omi 生态
-
-[→ Omi 生态学习路线图](https://github.com/Tencent/omi/tree/master/assets/rm.md)
-
-#### 基础生态
-
-| **项目**                         | **描述**                           |
-| ------------------------------- | ----------------------------------- |
-| [omi-docs](https://tencent.github.io/omi/site/docs/cn.html) 和 [例子](https://codepen.io/collection/DrMYgV/) 和 [webcomponents.dev](https://webcomponents.dev/)| Omi 官方文档 |
-| [omi-router ](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由,超级小的尺寸，只有 1KB 的 js|
-| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| 项目脚手架工具，各种模板任你选 [→ 基础模板](https://github.com/Tencent/omi/tree/master/packages/omi-cli/template) |
-| [CEE](https://omijs.github.io/cee/out/)| custom-elements-everywhere 评分 |
-
-#### Snake MVP
-
-| **Project**                         | **Description**                           |
-| ------------------------------- | ----------------------------------- |
-| [omi-snake![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-snake)| omi 写的 MVP 架构的贪吃蛇游戏 |
-| [omi-kbone-snake![](https://dntzhang.github.io/cax/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| omi-kbone 写的 MVP 架构的跨端贪吃蛇游戏，支持小程序和 H5  |
-| [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/)| 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)| react/preact 写的 MVP 架构的贪吃蛇游戏 |
-| [omix-snake![](https://dntzhang.github.io/cax/asset/hot.png)](https://github.com/Tencent/omi/tree/master/packages/omix-snake) | Omix 写的 MVP 架构贪吃蛇  |
-<!-- | [vue-snake](https://github.com/Tencent/omi/tree/master/packages/vue-snake) | Vue + Omiv 写的 MVP 架构的贪吃蛇游戏 | -->
-
-
-#### 其他
-
-| **项目**                         | **描述**                           |
-| ------------------------------- | ----------------------------------- |
-| [omi-piano![](https://dntzhang.github.io/cax/asset/hot.png)](https://github.com/Wscats/piano) |Omi 钢琴, [开始演奏吧!](https://wscats.github.io/piano/build/)|
-| [omi-devtools](https://github.com/f/omi-devtools)| 谷歌浏览器开发工具扩展|
-| [md2site](https://tencent.github.io/omi/assets/md2site/)| 用 markdown 生成静态网站文档.|
-| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| 一个 chart-x 标签搞定报表|
-| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 秒理解一段有用的 Omi 代码片段.|
-| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper  |
-| [omi-vscode](https://github.com/ZainChen/omi-vscode)| VSCode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |
-| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX 和 Canvas 的完美融合|
-| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX 和 Canvas 的完美融合|
-| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js 扩展(TypeScript) |
-| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi 和 [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) 完美结合. 让 css3 transform 在你的 Omi 项目中变得超级简单.|
-| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi 官方手势库|
-| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|丝般顺滑的触摸运动|
-| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|预渲染骨架屏|
-|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi 国际化解决方案 |
-| [omie](https://github.com/Wscats/omi-electron) | Omi.js 和 Electron.js 打造跨平台桌面应用 |
-| [Soo](https://github.com/tonis2/Soo)| 和 Omi 一样的 API，但是更小且没有 JSX, virtual DOM 和 store|
+<p align="right">v<strong>5.0.1</strong></p>
+<p align="center"><img src="./assets/omi-logo.svg" alt="omi" width="300"/></p>
+<h2 align="center">Omi - 下一代 Web 框架，去万物糟粕，合精华为一</h2>
+<p align="center"><b>让 JSX, Web Components, Proxy, Store, Path Updating 在一起</b></p>

 ### 特性

- 框架无关，任何框架可以使用 Omi 自定义元素
- 提供桌面、移动和小程序整体解决方案
- 无状态视图的架构设计
- 小巧的尺寸和[高性能](https://tencent.github.io/omi/packages/omi/examples/perfs/)
- 对 custom elements 友好, 通过字符串 `'0'`或者`'false'`传递 `false`，[通过`:`和`Omi.$`传递任意复杂类型](https://github.com/Tencent/omi/releases/tag/v6.8.0)
- 拥有官方跨框架 UI 组件库 - [omim](https://tencent.github.io/omi/packages/omim/docs/build/cn.html)
- [很容易通过 extend api 实现双向绑定](https://codepen.io/omijs/pen/aeLYjx)
+- 小巧的尺寸(gzip压缩后仅4kb)
+- 支持 `TypeScript`
+- 响应式数据绑定
 - 增强了 CSS, [支持 rpx 单位](https://github.com/Tencent/omi/releases/tag/v4.0.26)，基于 **750** 屏幕宽度
- [基于 Shadow/Light Dom 设计](https://developers.google.cn/web/fundamentals/web-components/shadowdom?hl=zh-cn)
- 利用 [Chrome 开发工具扩展 ](https://github.com/f/omi-devtools)轻松调试，[从 Chrome 应用商店安装](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd/related)
- 符合浏览器的发展趋势以及 API 设计理念
- [**Web Components**](https://developers.google.com/web/fundamentals/web-components/) + [**JSX**](https://reactjs.org/docs/introducing-jsx.html) 融合为一个框架 Omi
+- [基于 Shadow Dom 设计](https://developers.google.cn/web/fundamentals/web-components/shadowdom?hl=zh-cn)
+- 利用[Chrome 开发工具扩展 ](https://github.com/f/omi-devtools)轻松调试，[从 Chrome 应用商店安装](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd/related)
+- 符合浏览器的发展趋势以及API设计理念
+- [**Web Components**](https://developers.google.com/web/fundamentals/web-components/) + [**JSX**](https://reactjs.org/docs/introducing-jsx.html) 相互融合为一个框架 Omi
+- 内置 observe 制作响应式视图(免去 `this.update`)
 - Web Components 也可以数据驱动视图, `UI = fn(data)`
 - JSX 是开发体验最棒(智能提示)、[语法噪音最少](https://github.com/facebook/jsx#why-not-template-literals)、图灵完备的 UI 表达式，模板引擎不完备，模板字符串完备但是语法噪音太大
- 看看 [Facebook React 和 Web Components 对比优势](https://www.cnblogs.com/rubylouvre/p/4072979.html)，Omi 融合了各自的优点，而且给开发者自由的选择喜爱的方式
- `Shadow/Light DOM` 与 `Virtual DOM` 融合，Omi 既使用了`虚拟 DOM`，也是使用真实 `Shadow DOM`，让视图更新更准确更迅速
- 局部 CSS 最佳解决方案(`Shadow DOM`)，社区为局部 CSS 折腾了不少框架和库(使用 js 或 json 写样式，如:`Radium`，`jsxstyle`，`react-style`；与 webpack 绑定使用生成独特的 className `文件名—类名—hash值`，如：`CSS Modules`，`Vue`)，还有运行时注入`scoped atrr` 的方式，都是 hack 技术；`Shadow DOM Style` 是最完美的方案
+- 独创的 `Path Updating` 机制，基于 Proxy 全自动化的精准更新，功耗低，自由度高，性能卓越，方便集成 `requestIdleCallback`
+- 对 this.update 说再见吧！只要使用 `store` 系统，它就会自动化按需更新局部视图
+- 看看[Facebook React 和 Web Components对比优势](https://www.cnblogs.com/rubylouvre/p/4072979.html)，Omi 融合了各自的优点，而且给开发者自由的选择喜爱的方式
+- `Shadow DOM` 与 `Virtual DOM` 融合，Omi 既使用了`虚拟 DOM`，也是使用真实 `Shadow DOM`，让视图更新更准确更迅速
+- 99.9% 的项目不需要什么时间旅行，也不需要时间旅行调试(`Time travel debugging`),而且也不仅仅 redux 能时间旅行,请不要上来就 `redux`，Omi `store` 系统可以满足所有项目。
+- 局部 CSS 最佳解决方案(`Shadow DOM`)，社区为局部 CSS 折腾了不少框架和库(使用js或json写样式，如:`Radium`，`jsxstyle`，`react-style`；与webpack绑定使用生成独特的className`文件名—类名—hash值`，如：`CSS Modules`，`Vue`)，还有运行时注入`scoped atrr` 的方式，都是 hack 技术；`Shadow DOM Style` 是最完美的方案

-对比同样开发 TodoApp， Omi 和 React 渲染完的 DOM 结构，Omi 使用 Shadow/Light DOM 隔离样式和语义化结构:
+对比同样开发 TodoApp， Omi 和 React 渲染完的 DOM 结构，Omi 使用 Shadow DOM 隔离样式和语义化结构:

-| **Omi**                         | **React**                           | 
+| **Omi** | **React** |
+|-|-|
+| ![Omi](./assets/omi-render.jpg) | ![React](./assets/react-render.jpg) |
+
+## Omi 生态
+
+| **项目**                         | **描述**                           |
 | ------------------------------- | ----------------------------------- |
-| ![Omi](https://tencent.github.io/omi/assets/omi-render.jpg) | ![React](https://tencent.github.io/omi/assets/react-render.jpg)  |
+| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md)| Omi 官方文档 |
+| [omi-html![](https://raw.githubusercontent.com/dntzhang/cax/master/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|
+| [omi-30-seconds![](https://raw.githubusercontent.com/dntzhang/cax/master/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 秒理解一段有用的 Omi 代码片段.|
+| [omi-canvas![](https://raw.githubusercontent.com/dntzhang/cax/master/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX 和 Canvas 的完美融合|
+| [omi-mp![](https://raw.githubusercontent.com/dntzhang/cax/master/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA)|
+| [omi-router ](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由。[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|
+| [omi-devtools](https://github.com/f/omi-devtools)| 谷歌浏览器开发工具扩展|
+| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| 项目脚手架工具，支持 Javascript 和 Typescript |
+| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi 和 [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) 完美结合. 让 css3 transform 在你的 Omi项目中变得超级简单.|
+| [omi-tap2](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi 原生支持 tap 事件（omi v4.0.24+）|
+| [omi-tap](https://github.com/Tencent/omi/tree/master/packages/omi-tap)| 让 Omi 项目轻松支持 tap 事件|
+| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi 官方手势库|
+| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|丝般顺滑的触摸运动|
+| [omi-mobx](https://github.com/Tencent/omi/tree/master/packages/omi-mobx)|Omi Mobx 适配器|
+| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md#use)|跟 React hooks 类似的方式定义纯组件|
+| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|把 web components 渲染到 native，比如 IOS 、Android|
+| [westore](https://github.com/dntzhang/westore)|小程序解决方案 westore，与 Omi 互相启发|
+| [omi-weui](https://github.com/Tencent/omi/tree/master/packages/omi-weui)  |[Weui](https://weui.io/)  for Omi by [@132yse](https://github.com/132yse).|
+|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi 国际化解决方案 |
+| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | 基于 [page.js](https://github.com/visionmedia/page.js) 的 Omi 路由|

+## omi-mp 

-### TypeScript 智能提示
+> 通过微信小程序开发和一键生成 Web 的 H5 SPA (基于 omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router))

-```jsx
-import { h, WeElement, tag, classNames } from 'omi';
-import * as styles from './_index.less';
+看下官方模板的转换例子：

-interface ButtonProps {
-  href?: string,
-  disabled?: boolean,
-  type?: 'default' | 'primary' | 'danger',
-  htmltype?: 'submit' | 'button' | 'reset',
-  onClick?: (e: any) => void
-}
+| **Index**                         | **Logs**                           |
+| ------------------------------- | ----------------------------------- |
+|![](./assets/mp1.jpg)| ![](./assets/mp2.jpg)|

-const TAG = 'o-button'
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      [TAG]: Omi.Props & ButtonProps
-    }
-  }
-}
-
-@tag(TAG)
-export default class oButton extends WeElement<ButtonProps> {
-...
-...
-...
-```
-
-<img src="./assets/ts.png" alt="omi" width="427"/>
+因为 Web 里拉取不到用户登录态，更换了用户头像和名称。

 ## 必须收藏的资源

-* [使用 MVP 架构和 Web Components(Omi) 开发贪吃蛇](https://github.com/Tencent/omi/blob/master/tutorial/omi-web-components-snake-game-mvp.cn.md)
-* [Web Components 规范](https://github.com/w3c/webcomponents)
-* [Comi 原理揭秘](https://github.com/Tencent/omi/blob/master/tutorial/comi-principle.md)
-* [Omip 编译 H5 原理揭秘](https://github.com/Tencent/omi/blob/master/tutorial/omip-h5.md)
-* [如何通过小程序实现跨平台开发](https://developers.weixin.qq.com/community/develop/article/doc/00002cda45c930d87a380a74351813)
-* [你必须收藏 ES6 Spread Operator 技巧](https://github.com/Tencent/omi/blob/master/tutorial/spread-operator.cn.md)
-* [Omi snap 骨架屏与快照](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)
-* [Omio 兼容 IE8 踩坑之路](https://github.com/Tencent/omi/blob/master/tutorial/omio.cn.md)
-* [Omi 生态发布](https://github.com/Tencent/omi/blob/master/tutorial/ecosystem.cn.md)
-* [深入浅出 Shadow Dom](https://github.com/Tencent/omi/blob/master/tutorial/shadow-dom-in-depth.cn.md)
 * [HTM - JSX 的替代品？还是另一种选择？](https://github.com/Tencent/omi/blob/master/tutorial/omi-html.cn.md)
-* [MVVM 王者归来](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)
+* [Shadow Dom In Depth](https://github.com/praveenpuglia/shadow-dom-in-depth)
 * [60FPS Animation In Omi](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.cn.md)
 * [Render Web Components To Native](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.cn.md)
 * [Web Components MDN](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)
@ -235,33 +82,229 @@ export default class oButton extends WeElement<ButtonProps> {
 * [CSS Shadow Parts](https://drafts.csswg.org/css-shadow-parts-1/)
 * [Part Theme Explainer](https://meowni.ca/posts/part-theme-explainer/)
 * [Platform HTML5](https://platform.html5.org/)
-* [使用 requestIdleCallback](https://div.io/topic/1370)
-* [A requestIdleCallback polyfill](https://gist.github.com/paullewis/55efe5d6f05434a96c36)
-* [Web Components 的力量](https://github.com/Tencent/omi/blob/master/tutorial/the-power-of-web-components.cn.md)
-* [ShadowRoot](https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot)
-* [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/)
-* [Web Components中引入外部CSS的3种方法](https://www.zhangxinxu.com/wordpress/2021/02/web-components-import-css/)
+
 ---

 # 目录

 - [Omi 生态](#omi-生态)
+- [omi-mp](#omi-mp)
 - [必须收藏的资源](#必须收藏的资源)
+- [一个 HTML 完全上手](#一个-html-完全上手)
+- [再花 30 秒完全上手](#再花-30-秒完全上手)
 - [快速入门](#快速入门)
+  - [安装](#安装)
  - [项目模板](#项目模板)
  - [Hello Element](#hello-element)
+  - [TodoApp](#todoapp)
+  - [Store](#store)
+  - [Mitt](#mitt)
+  - [Observe](#observe)
  - [生命周期](#生命周期)
+- [调试工具](#调试工具)
 - [浏览器兼容](#浏览器兼容)
+- [React 组件转成 Omi](#react-组件转成-omi)
 - [相关链接](#相关链接)
- [贡献者们](#贡献者们)
- [维护者](#维护者)
+- [问答](#问答)
 - [感谢](#感谢)
 - [License](#license)

+## 一个 HTML 完全上手
+
+下面这个页面不需要任何构建工具就可以执行
+
+* [点击这里看执行结果](https://tencent.github.io/omi/assets/)
+* [Omi.js CDN](https://unpkg.com/omi)
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Add Omi in One Minute</title>
+</head>
+
+<body>
+  <script src="https://unpkg.com/omi"></script>
+  <script>
+    const { WeElement, h, render, define } = Omi
+
+    define('like-button',
+      class extends WeElement {
+        install() {
+          this.data = { liked: false }
+        }
+
+        render() {
+          if (this.data.liked) {
+            return 'You liked this.'
+          }
+
+          return h(
+            'button',
+            {
+              onClick: () => {
+                this.data.liked = true
+                this.update()
+              }
+            },
+            'Like'
+          )
+        }
+      })
+
+    render(h('like-button'), 'body')
+  </script>
+</body>
+
+</html>
+```
+
+通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用 render 方法，直接使用 `like-button` 标签：
+
+```jsx
+<body>
+    <like-button></like-button>
+</body>
+```
+
+## 再花 30 秒完全上手
+
+你也可以使用现代化的 JS 语法，快速构建 Omi 项目:
+
+```js
+import { render, WeElement, tag, observe } from "omi"
+
+@observe
+@tag("my-counter")
+class MyCounter extends WeElement {
+
+  data = {
+    count: 0
+  }
+
+  sub = () => {
+    this.data.count--
+  }
+
+  add = () => {
+    this.data.count++
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.sub}>-</button>
+        <span>{this.data.count}</span>
+        <button onClick={this.add}>+</button>
+      </div>
+    )
+  }
+}
+
+render(<my-counter />, "body")
+```
+
+[→ counter demo](https://tencent.github.io/omi/packages/omi/examples/counter/)
+
+
+你会发现 `MyCounter` 从未使用过，所以你可以使用下面代码达到同样效果并且避免 Eslint 提示错误:
+
+```js
+import { render, WeElement, define } from 'omi'
+
+define('my-counter', class extends WeElement {
+    static observe = true
+    
+    data = {
+      count: 1
+    }
+
+    sub = () => {
+      this.data.count--
+    }
+
+    add = () => {
+      this.data.count++
+    }
+
+    render() {
+      return (
+        <div>
+          <button onClick={this.sub}>-</button>
+          <span>{this.data.count}</span>
+          <button onClick={this.add}>+</button>
+        </div>
+      )
+    }
+  })
+
+render(<my-counter />, 'body')
+```
+
+你也可以定义成纯函数的形式:
+
+```js
+import { define, render } from 'omi'
+
+define('my-counter', function() {
+  const [count, setCount] = this.use({
+    data: 0,
+    effect: function() {
+      document.title = `The num is ${this.data}.`
+    }
+  })
+
+  this.useCss(`button{ color: red; }`)
+
+  return (
+    <div>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <span>{count}</span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>
+  )
+})
+
+render(<my-counter />, 'body')
+```
+
+如果你不需要 effect 方法, 可以直接使用 `useData`:
+
+```js
+const [count, setCount] = this.useData(0)
+```

 ## 快速入门

-<!-- 关于编译网站的 url 前缀的设置，可以参考两个地址：
+### 安装
+
+```bash
+$ npm i omi-cli -g               # install cli
+$ omi init my-app     # init project, you can also exec 'omi init' in an empty folder
+$ cd my-app           # please ignore this command if you executed 'omi init' in an empty folder
+$ npm start                      # develop
+$ npm run build                  # release
+```
+
+> `npx omi-cli init my-app` 也支持(要求 npm v5.2.0+)
+
+目录说明:
+
+```
+├─ config
+├─ public
+├─ scripts
+├─ src
+│  ├─ assets
+│  ├─ elements    //存放所有 custom elements
+│  ├─ store       //存放所有页面的 store
+│  ├─ admin.js    //入口文件，会 build 成  admin.html
+│  └─ index.js    //入口文件，会 build 成  index.html
+```
+
+关于编译网站的 url 前缀的设置，可以参考两个地址：

 * [build problem](https://stackoverflow.com/questions/42686149/create-react-app-build-with-public-url)
 * [build env doc](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#referencing-environment-variables-in-the-html)
@ -287,19 +330,17 @@ export default class oButton extends WeElement<ButtonProps> {
  },
 ```

-如果你只想使用相对地址:
-
-```
-"build":"set PUBLIC_URL=.&& npm run _build"  //windows
-"build":"PUBLIC_URL=. npm run _build",       //mac os
-``` -->
-
 ### 项目模板

 | **Template Type**|  **Command**|  **Describe**|
 | ------------ |  -----------|  ----------------- |
-|基础模板(v3.3.0+)|`omi init my-app`| 基础模板，支持 omi 和 omio(IE8+)|
-|Kbone Template|`omi init-kbone my-app`  | 使用 omi 开发小程序或者 Web|
+|Base Template|`omi init my-app`| 基础模板|
+|TypeScript Template(omi-cli v3.0.5+)|`omi init-ts my-app`|使用 TypeScript 的模板|
+|[SPA Template](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)(omi-cli v3.0.10+)|`omi init-spa my-app`|使用  omi-router 单页应用的模板|
+|omi-mp Template(omi-cli v3.0.13+)|`omi init-mp my-app`  |小程序开发 Web 的模板|
+|MVVM Template(omi-cli v3.0.22+)|`omi init-mvvm my-app`  |MVVM 模板|
+
+Cli 自动创建的项目脚手架是基于单页的 create-react-app 改造成多页的，有配置方面的问题可以查看 [create-react-app 用户指南](https://facebook.github.io/create-react-app/docs/getting-started)。

 ### Hello Element

@ -311,25 +352,22 @@ import { define, WeElement } from 'omi'
 define('hello-element', class extends WeElement {
  onClick = evt => {
    // trigger CustomEvent
-    this.fire('Abc', { name: 'dntzhang', age: 12 })
+    this.fire('abc', { name: 'dntzhang', age: 12 })
    evt.stopPropagation()
  }

-  //如果需要在 html 里直接使用 <hello-element></hello-element>，必须声明 propTypes
-  static propTypes = {
-    msg: String
+  css() {
+    return `
+        div {
+          color: red;
+          cursor: pointer;
+        }`
  }

-  static css = `
-      div {
-        color: red;
-        cursor: pointer;
-      }`
-
  render(props) {
    return (
      <div onClick={this.onClick}>
-        Hello {props.msg}
+        Hello {props.msg} {props.propFromParent}
        <div>Click Me!</div>
      </div>
    )
@ -344,26 +382,30 @@ import { define, render, WeElement } from 'omi'
 import './hello-element'

 define('my-app', class extends WeElement {
-  data = { abc: 'abc' }
+  data = { abc: 'abc', passToChild: 123 }

  // define CustomEvent Handler
  onAbc = evt => {
    // get evt data by evt.detail
    this.data.abc = ' by ' + evt.detail.name
+    this.data.passToChild = 1234
    this.update()
  }

-  static css = `
-      div{
-          color: green;
-      }`
+  css() {
+    return `
+         div{
+             color: green;
+         }`
+  }

-  render(props) {
+  render(props, data) {
    return (
      <div>
-        Hello {this.data.abc}
+        Hello {props.name} {data.abc}
        <hello-element
          onAbc={this.onAbc}
+          prop-from-parent={data.passToChild}
          msg="WeElement"
        />
      </div>
@ -403,8 +445,7 @@ npm install --save-dev @babel/preset-react
    [
      "@babel/preset-react",
      {
-        "pragma": "Omi.h",
-        "pragmaFrag": "Omi.h.f"
+        "pragma": "Omi.h", 
      }
    ]
  ]
@ -423,14 +464,19 @@ npm install --save-dev @babel/preset-react
 }
 ```

-如果你的 css 文件以 `_` 开头, css 会使用 to-string-loader, 如：
+如果你的 css 文件以 `_` 开头, css 会使用 to-string-loader. 如：

 ``` js
 import { tag, WeElement render } from 'omi'
+//typeof cssStr is string
+import cssStr from './_index.css'

-define('my-app', class extends WeElement {
+@tag('my-app')
+class MyApp extends WeElement {

-  css = require('./_index.css')
+  css() {
+    return cssStr
+  }
  ...
  ...
  ...
@ -438,72 +484,67 @@ define('my-app', class extends WeElement {

 你也可以忘掉这一对繁琐的配置直接使用 omi-cli，不需要你配置任何东西。

-<!-- ### TodoApp
+### TodoApp

 下面列举一个相对完整的 TodoApp 的例子:

 ```js
 import { define, render, WeElement } from 'omi'

-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>
-    )
-  }
+define('todo-list', function(props) {
+  return (
+    <ul>
+      {props.items.map(item => (
+        <li key={item.id}>{item.text}</li>
+      ))}
+    </ul>
+  )
 })

 define('todo-app', class extends WeElement {
-  items = []
-  text = ''
+  static observe = true
+
+  data = { items: [], text: '' }

  render() {
    return (
      <div>
        <h3>TODO</h3>
-        <todo-list items={this.items} />
+        <todo-list items={this.data.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            id="new-todo"
            onChange={this.handleChange}
-            value={this.text}
+            value={this.data.text}
          />
-          <button>Add #{this.items.length + 1}</button>
+          <button>Add #{this.data.items.length + 1}</button>
        </form>
      </div>
    )
  }

  handleChange = e => {
-    this.text = e.target.value
+    this.data.text = e.target.value
  }

  handleSubmit = e => {
    e.preventDefault()
-    if (!this.text.trim().length) {
+    if (!this.data.text.trim().length) {
      return
    }
-    this.items.push({
-      text: this.text,
+    this.data.items.push({
+      text: this.data.text,
      id: Date.now()
    })
-    this.text = ''
-    this.update()
+    this.data.text = ''
  }
 })

 render(<todo-app />, 'body')
-``` -->
+```
+
+### Store

-<!-- 
 使用 Store 体系可以告别 update 方法，基于 Proxy 的全自动属性追踪和更新机制。强大的 Store 体系是高性能的原因，除了靠 props 决定组件状态的组件，其余组件所有 data 都挂载在 store 上,

 ```js
@ -571,17 +612,46 @@ render(<todo-app></todo-app>, 'body', store)
 总结一下:

 * store.data 用来列出所有属性和默认值(除去 props 决定的视图的组件)
-* 组件和页面的 data 用来列出依赖的 store.data 的属性 (omi 会记录 path)，按需更新
+* 组件和页面的 data 用来列出依赖的 store.data 的属性 (omi会记录path)，按需更新
 * 如果页面简单组件很少，可以 updateAll 设置成 true，并且组件和页面不需要声明 data，也就不会按需更新
-* globalData 里声明的 path，只要修改了对应 path 的值，就会刷新所有页面和组件，globalData 可以用来列出所有页面或大部分公共的属性 Path -->
-<!-- 
+* globalData 里声明的 path，只要修改了对应 path 的值，就会刷新所有页面和组件，globalData 可以用来列出所有页面或大部分公共的属性 Path
+
 ## Mitt

 如果不想使用 store 的 data 体系，也可以使用发布订阅模式。比如在 Omi 中使用 [mitt](https://github.com/developit/mitt) 跨组件通讯:

-* [cross-component-communication](https://github.com/Tencent/omi/blob/master/packages/omi-30-seconds/README.md#cross-component-communication) -->
+* [cross-component-communication](https://github.com/Tencent/omi/blob/master/packages/omi-30-seconds/README.md#cross-component-communication)
+
+## Observe
+
+### Omi Observe
+
+你可以为那些不需要 store 的自定义元素使用 observe 创建响应式视图，比如:
+
+```js
+import { define, WeElement } from "omi"
+
+define("my-app", class extends WeElement {
+  static observe = true
+
+  install() {
+    this.data.name = "omi"
+  }
+
+  onClick = () => {
+    this.data.name = "Omi V4.0"
+  }
+
+  render(props, data) {
+    return (
+      <div onClick={this.onClick}>
+        <h1>Welcome to {data.name}</h1>
+      </div>
+    )
+  }
+})
+```

-<!-- 
 如果你想要兼容 IE11,请使用 `omi-mobx` 代替 omi 自带的 observe，往下看..

 ### Omi Mobx
@ -609,27 +679,29 @@ class MyApp extends WeElement {
    )
  }
 }
-``` -->
+```

 ### 生命周期

-| 钩子方法 |      触发时机                   |
+| Lifecycle method | When it gets called                          |
 | ---------------- | -------------------------------------------- |
-| `install`        | 初始化安装 |
-| `installed`      | 插入到文档之后且安装完成 |
-| `uninstall`      |   从文档中卸载移除        |
-| `beforeUpdate`   |  update 之前                         |
-| `updated`    |  update 之后                          |
-| `beforeRender`   |  `render()` 之前                         |
-| `receiveProps`   | 父组件更新时候触发, 返回 false 可以阻止更新      |
+| `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                           |
+| `afterUpdate`    | after update  (deprecated)                           |
+| `updated`    | after update                             |
+| `beforeRender`   | before `render()`                           |
+| `receiveProps`   | parent element re-render will trigger it      |

-### 查看所有注册的元素
+## 调试工具

-```js
-console.log(Omi.elements)
-```
+使用 [Omi 开发工具](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd) 可以非常简单地调试和管理你的 UI。不需要任何配置，你只要安装然后就能调试。
+
+既然  Omi 使用了 Web Components 和 Shadow-DOM, 所以不需要像 React 和 Vue 一样安装其他元素面板，只需要使用 Chrome 自带的 **Elements' sidebar** 便可，它和 React and Vue 开发者工具一样强大。
+
+![Omi DevTools](https://github.com/f/omi-devtools/raw/master/omi-devtools.gif)

-<!-- 
 ## React 组件转成 Omi

 举个例子，下面是吧 weui react 的 button 转成 weui omi 的 button 的例子 :
@ -639,63 +711,36 @@ console.log(Omi.elements)
 * [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)
-* [After](https://github.com/Tencent/omi/blob/9790fadaaf20cfede80bcf9213756a83fc8c3949/packages/omi-weui/src/omi-weui/elements/button/button.js) -->
+* [After](https://github.com/Tencent/omi/blob/9790fadaaf20cfede80bcf9213756a83fc8c3949/packages/omi-weui/src/omi-weui/elements/button/button.js)

 ## 浏览器兼容

-> [Omio](https://github.com/Tencent/omi/tree/master/packages/omio) - 兼容老浏览器的 Omi 版本(支持到 IE8+)
-
-Omi works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.
+Omi 4.0+ works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.

 ![→ Browsers Support](./assets/browsers-support.png)

 [→ polyfills](https://github.com/webcomponents/webcomponentsjs)

-```html
-<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script>
-```
+> 如果你想兼容IE11,使用[→ 这个项目](https://github.com/Tencent/omi/tree/master/packages/omi-ie11)的 Omi 文件,这个项目使用 JSON Diff 和 定时器 代替 Proxy。

-## 贡献
+> 你可以在 IE9 的环境动态加载这个项目的 js，其他环境依旧使用 proxy 版本。

-Build a example:
+> 你也可以放弃 store 体系，使用 omi-mobx 来兼容IE11

-```bash
-npm start example_name
-```
+## 问答

-Build omi:
-
-```bash
-npm run build
-```
-
-Unit testing
-
-```
-npm run test
-```
-
-## 贡献者们
-
-<a href="https://github.com/Tencent/omi/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=Tencent/omi" />
-</a>
-
-感谢所有贡献者，欢迎更多人加入一起贡献。
-
-## 核心维护者
-
- [@dntzhang](https://github.com/dntzhang)
- [@Wscats](https://github.com/Wscats)
+- [@f](https://github.com/f)
 - [@LeeHyungGeun](https://github.com/LeeHyungGeun)
+- [@dntzhang](https://github.com/dntzhang)
 - [@xcatliu](https://github.com/xcatliu)
- [AlloyTeam](http://alloyteam.com/)

 任何 Omi 相关问题欢迎联系我们。也可以[加入 Omi QQ 群](https://github.com/Tencent/omi/issues/169)进行讨论交流。

 ## 感谢

 * [preact](https://github.com/developit/preact)
+* [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy)
+* [create-react-app](https://github.com/facebook/create-react-app)
 * [JSX](https://github.com/facebook/jsx)

 ## License
--- a/README.KR.md
+++ b/README.KR.md
@ -0,0 +1,736 @@
+[English](./README.md) | [简体中文](./README.CN.md) | 한국어
+
+<p align="right">v<strong>5.0.1</strong></p>
+<p align="center"><img src="./assets/omi-logo.svg" alt="omi" width="300"/></p>
+<h2 align="center">Omi: 4kb 자바스크립트 차세대 웹 프레임워크</h2>
+<p align="center"><b>JSX, Web Components, Proxy, Store, Path Updating 지원</b></p>
+
+## Why Omi?
+
+- 작은 파일 사이즈. _(**4kb** gzip 압축후)_
+- TypeScript 지원.
+- 반응형 데이터 바인딩
+- Enhanced CSS, [rpx unit support](https://github.com/Tencent/omi/releases/tag/v4.0.26) **750** width 사이즈를 기본으로한
+- [쉐도우 DOM 기반 설계](https://developers.google.com/web/fundamentals/web-components/shadowdom)
+- [Omi DevTools Extension](https://github.com/f/omi-devtools) 를 통한 쉬운 디버깅 [[Install from Chrome WebStore](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd)]
+- 브라우저 트렌드 및 API 디자인 준수.
+- [**Web Components**](https://developers.google.com/web/fundamentals/web-components/) 와 [**JSX**](https://reactjs.org/docs/introducing-jsx.html) 가 하나의 프레임워크에.
+- omi-mobx를 통한 omi 와 mobx 를 함께 사용 (`this.update()` 호출 필요 없음).
+- Web Components 가 데이터 기반(data-driven)의 뷰가 될수 있음, **`UI = fn(data)`**.
+- JSX 는 최소의 UI 표현식으로 최상의 개발경험을 제공 (코드 인텔리전트 와 팁)  [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals) 그리고 완벽하게 튜링됨(템플릿 엔진은 튜링 되지 않으며 ES 템플릿 스트링은 튜링 되지만 Syntax가 매우 복잡합니다).
+- 독창적인 **Path Updating** 시스템. Proxy 기반 자동 **정확한** 업데이트, **저손실**, 높은 자유도, 뛰어난 성능, `requestIdleCallback` 로 통합하기 쉬움.
+- **store system** 을 사용해서 `this.update` 와 작별하세요! store  가 자동으로 데이터와 관련된 UI를 업데이트 합니다.
+- 봐주세요 [Facebook React vs Web Components](https://softwareengineering.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer)，Omi 는 이것들의 강점을 결합하여 개발자가 자유롭게 자신이 원하는 방식을 선택할 수 있게 해줍니다.
+- **Shadow DOM** 은 **Virtual DOM** 과 병합되며, Omi 는 Virtual DOM 과 실제 Shadow DOM을 사용하여 뷰를 보다 정확하고 빠르게 업데이트 합니다.
+- 99.9%의 프로젝트가 디버깅 하기 위해 시간낭비를 할 필요가 없습니다. 그리고 `redux`에 접근할 필요 없이, Omi 의 `store`가 모든 프로젝트 충족시킬수 있습니다.
+- **Scoped CSS**의 베스트 솔루션은 **Shadow DOM** 입니다. 커뮤니티들은 Scoped CSS 를 위해 않은 프레임워크와 라이브러리를 버렸습니다. JS 혹은 JSON을 사용하여 양식을 작성하고(예: `Radium`, `jsxstyle`, `react-style`), Webpack을 사용하여 독립적인 `className`, `filename-classname-hash` 를 만들어내는 것은(`CSS Modules`, `Vue`와 같이) 모두 hack 기술입니다. `Shadow DOM Style`이 완벽한 해결책입니다.
+
+TodoApp 을 통해 Omi 와 React를 비교해보십시오. Omi and React의 렌더링 DOM 구조:
+
+| **Omi**                         | **React**                           |
+| ------------------------------- | ----------------------------------- |
+| ![Omi](./assets/omi-render.jpg) | ![React](./assets/react-render.jpg) |
+
+Omi는 Shadow DOM 기반 스타일 분기 및 시멘틱 구조를 사용합니다.
+
+## Ecosystem of Omi
+
+| **Project**                         | **Description**                           |
+| ------------------------------- | ----------------------------------- |
+| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md)| Omi 공식 문서 |
+| [omi-mp![](https://raw.githubusercontent.com/dntzhang/cax/master/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-mp) working| Wechat 미니프로그램 개발을 위한 Singe Page |
+| [omi-router![](https://raw.githubusercontent.com/dntzhang/cax/master/asset/hot.png) ](https://github.com/Tencent/omi/tree/master/packages/omi-router) | Omi 공식 라우터 [→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |
+| [omi-devtools](https://github.com/f/omi-devtools)| 브라우저 개발자 확장도구 |
+| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |
+| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. 초간단 CSS3 Transform |
+| [omi-tap2![](https://raw.githubusercontent.com/dntzhang/cax/master/asset/hot.png) ](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Native 탭 이벤트 지원(omi v4.0.24+）|
+| [omi-tap](https://github.com/Tencent/omi/tree/master/packages/omi-tap) | 탭 이벤트 지원 |
+| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)| 터치 와 제스처 이벤트 지원 |
+| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)| 부드러운 스크롤링, Rotation, 웹 페이지를 위한 어떤 모션도 Refresh |
+| [omi-mobx](https://github.com/Tencent/omi/tree/master/packages/omi-mobx)| Omi Mobx Adapter |
+| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md#use)| React Hooks 방식 API |
+| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)| Web Components Native 렌더링 |
+| [westore](https://github.com/dntzhang/westore)| Wechat Mini Program Solution westore, Omi와 서로 서로 영감받음 |
+| [omi-weui](https://github.com/Tencent/omi/tree/master/packages/omi-weui)  | Omi 버전의 [Weui](https://weui.io/) by [@132yse](https://github.com/132yse).|
+| [omi-i18n](https://github.com/i18next/omi-i18n)| i18next 에코시스템을 사용한 omi.js 다국어 지원 방식 |
+| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | [page](https://github.com/visionmedia/page.js) 를 통한 소형의 클라이언트 사이드 라우터 |
+
+## Useful Resources
+
+| **Title Name**  | **Other language** | **Related**|
+| ----------------------------------------- | ------------------ |-----------------|
+| [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)| 求翻译|
+|  [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)|
+|  [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/)|
+
+
+## omi-mp
+
+> Wechat Mini Program을 통한 HTML5 SPA 개발 및 원 클릭 웹 생성 (based on omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router))
+
+공식 템플릿 변환:
+
+| **Index**                         | **Logs**                           |
+| ------------------------------- | ----------------------------------- |
+|![](./assets/mp1.jpg)| ![](./assets/mp2.jpg)|
+
+웹에서 사용자 로그인 정보를 취득하지 못하기 때문에 사용자 아바타와 이름이 변경되었습니다.
+
+---
+
+# Overview of the Readme
+
+- [Ecosystem of Omi](#ecosystem-of-omi)
+- [Useful Resources](#useful-resources)
+- [omi-mp](#omi-mp)
+- [Omi 1분 추가 가이드](#Omi-1분-추가-가이드)
+- [Omi 30초 추가 가이드](#Omi-30초-추가-가이드)
+- [Getting Started](#getting-started)
+  - [Install](#install)
+  - [Hello Element](#hello-element)
+  - [TodoApp](#todoapp)
+  - [Store](#store)
+  - [Observe](#observe)
+  - [Lifecycle](#lifecycle)
+- [Debugging](#debugging)
+- [React to Omi](#react-to-omi)
+- [Browsers Support](#browsers-support)
+- [Contribution](#contribution)
+- [Thanks](#thanks)
+- [License](#license)
+
+## Omi 1분 추가 가이드
+
+이 페이지는 어떤 번들링 툴 사용없이 Omi를 실행가능합니다.
+
+- [Online Demo!](https://tencent.github.io/omi/assets/)
+- [Omi.js CDN](https://unpkg.com/omi)
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Add Omi in One Minute</title>
+</head>
+
+<body>
+  <script src="https://unpkg.com/omi"></script>
+  <script>
+    const { WeElement, h, render, define } = Omi
+
+    class LikeButton extends WeElement {
+      install() {
+        this.data = { liked: false }
+      }
+
+      render() {
+        if (this.data.liked) {
+          return 'You liked this.'
+        }
+
+        return h(
+          'button',
+          {
+            onClick: () => {
+              this.data.liked = true
+              this.update()
+            }
+          },
+          'Like'
+        )
+      }
+    }
+
+    define('like-button', LikeButton)
+
+    render(h('like-button'), 'body')
+  </script>
+</body>
+
+</html>
+```
+
+`like-button` 태그를 HTML에서 직접 사용 가능합니다：
+
+```jsx
+<body>
+  <like-button />
+</body>
+```
+
+### Omi 30초 추가 가이드
+
+당신은 Omi 프로젝트를 현대의 자바스크립트를 사용해서 빠르게 빌드할 수 있습니다:
+
+```js
+import { render, WeElement, tag, observe } from "omi"
+
+@observe
+@tag("my-counter")
+class MyCounter extends WeElement {
+
+  data = {
+    count: 0
+  }
+
+  sub = () => {
+    this.data.count--
+  }
+
+  add = () => {
+    this.data.count++
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.sub}>-</button>
+        <span>{this.data.count}</span>
+        <button onClick={this.add}>+</button>
+      </div>
+    )
+  }
+}
+
+render(<my-counter />, "body")
+```
+
+[→ counter demo](https://tencent.github.io/omi/packages/omi/examples/counter/)
+
+아마 당신은 위에 정의된 `MyCounter` 라는 클래스 명을 사용하지 않았다는 것을 알게 될겁니다. 그래서 당신은 Eslint hints를 피하기 위해 아래의 방법을 사용해야 합니다. :
+
+```js
+import { render, WeElement, define } from 'omi'
+
+define('my-counter', class extends WeElement {
+    static observe = true
+    
+    data = {
+      count: 1
+    }
+
+    sub = () => {
+      this.data.count--
+    }
+
+    add = () => {
+      this.data.count++
+    }
+
+    render() {
+      return (
+        <div>
+          <button onClick={this.sub}>-</button>
+          <span>{this.data.count}</span>
+          <button onClick={this.add}>+</button>
+        </div>
+      )
+    }
+  })
+
+render(<my-counter />, 'body')
+```
+
+간단하게 Pure Function 폼을 정의할 수 있습니다.
+
+```js
+import { define, render } from 'omi'
+ define('my-counter', function() {
+  const [count, setCount] = this.use({
+    data: 0,
+    effect: function() {
+      document.title = `The num is ${this.data}.`
+    }
+  })
+
+  this.useCss(`button{ color: red; }`)
+
+  return (
+    <div>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <span>{count}</span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>
+  )
+})
+ render(<my-counter />, 'body')
+```
+
+만약 위의 `effect` 방식이 필요 없다면 `useData` 를 직접 사용해도 됩니다.
+
+```js
+const [count, setCount] = this.useData(0)
+```
+
+## Getting Started
+
+### Install
+
+```bash
+$ npm i omi-cli -g               # install cli
+$ omi init my-app     # init project, you can also exec 'omi init' in an empty folder
+$ cd my-app           # please ignore this command if you executed 'omi init' in an empty folder
+$ npm start                      # develop
+$ npm run build                  # release
+```
+
+Directory description:
+
+```
+├─ config
+├─ public
+├─ scripts
+├─ src
+│  ├─ assets
+│  ├─ 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
+```
+
+About compiled website URL：
+
+* [build env doc](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#referencing-environment-variables-in-the-html)
+* [build problem](https://stackoverflow.com/questions/42686149/create-react-app-build-with-public-url)
+
+Such as in windows:
+
+```json
+"scripts": {
+  "start": "node scripts/start.js",
+  "_build": "node scripts/build.js",
+  "build":"set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& npm run _build"
+}
+```
+
+mac os 에서:
+
+···json
+"scripts": {
+    "start": "node scripts/start.js",
+    "_build": "node scripts/build.js",
+    "build":"PUBLIC_URL=https://fe.wxpay.oa.com/dv npm run _build",
+    "fix": "eslint src --fix"
+  },
+···
+
+TypeScript Template(omi-cli v3.0.5+):
+
+```bash
+$ omi init-ts my-app
+```
+
+[SPA Template](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)(omi-cli v3.0.10+):
+
+```bash
+$ omi init-spa my-app
+```
+
+omi-mp (Omi Wechat Mini Program Module) Template(omi-cli v3.0.13+):
+
+```bash
+$ omi init-mp my-app
+```
+
+CLI 자동 프로젝트 생성 scaffolding 는 한 페이지의 create-react-app을 여러 페이지로 변환합니다. 설정(configuration) 이슈는 [create-react-app user guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) 을 봐주세요.
+
+### Hello Element
+
+`WeElement` 를 상속하여 커스텀 엘리먼트(element)를 정의하고 **`@tag`** 데코레이터를 사용하여 기본 class 와 이름을정의하세요:
+
+```js
+import { tag, WeElement, render } from "omi";
+
+@tag("hello-element")
+class HelloElement extends WeElement {
+  onClick = evt => {
+    // trigger CustomEvent
+    this.fire("abc", { name: "dntzhang", age: 12 });
+    evt.stopPropagation();
+  };
+
+  css() {
+    return `
+        div {
+          color: red;
+          cursor: pointer;
+        }`;
+  }
+
+  render(props) {
+    return (
+      <div onClick={this.onClick}>
+        Hello {props.msg} {props.propFromParent}
+        <div>Click Me!</div>
+      </div>
+    );
+  }
+}
+```
+
+Using `hello-element`:
+
+```js
+import { tag, WeElement, render } from "omi";
+import "./hello-element";
+
+@tag("my-app")
+class MyApp extends WeElement {
+  static get data() {
+    return { abc: "", passToChild: "" };
+  }
+
+  // bind CustomEvent
+  onAbc = evt => {
+    // get evt data by evt.detail
+    this.data.abc = ` by ${evt.detail.name}`;
+    this.update();
+  };
+
+  css() {
+    return `
+      div {
+        color: green;
+      }`;
+  }
+
+  render(props, data) {
+    return (
+      <div>
+        Hello {props.name} {data.abc}
+        <hello-element
+          onAbc={this.onAbc}
+          prop-from-parent={data.passToChild}
+          msg="WeElement"
+        />
+      </div>
+    );
+  }
+}
+
+render(<my-app name="Omi v4.0" />, "body");
+```
+
+Babel이 JSX 를 `Omi.h()` 호출로 변환하도록 설정:
+
+```json
+{
+  "presets": ["env", "omi"]
+}
+```
+
+위의 설정(configuration)을 지원하려면 아래의 두 NPM 패키지를 설치해야 합니다:
+
+```bash
+"babel-preset-env": "^1.6.0",
+"babel-preset-omi": "^0.1.1",
+```
+
+만약 CSS 를 사용하기 싫으면 Webpack의 [to-string-loader](https://www.npmjs.com/package/to-string-loader) 를 봐주세요,
+예를 들어:
+
+```js
+{
+  test: /[\\|\/]_[\S]*\.css$/,
+  use: [
+    'to-string-loader',
+    'css-loader'
+  ]
+}
+```
+
+만약 당신의 CSS 파일이 "`_`"로 시작한다면, CSS 는 `to-string-loader`를 사용할 것입니다. 이와 같이:
+
+```js
+import { tag, WeElement render } from 'omi'
+
+// typeof cssStr is string
+import cssStr from './_index.css'
+
+@tag('my-app')
+class MyApp extends WeElement {
+
+  css() {
+    return cssStr
+  }
+  ...
+  ...
+  ...
+```
+
+당신은 성가신 설정(configuration)과 omi-cli을 직접 사용하는 것을 잊어버려도 됩니다.
+어떤 설정도 필요가 없습니다.
+
+### TodoApp
+
+아래는 상대적으로 완벽한 TodoApp 예입니다:
+
+```js
+import { define, render, WeElement } from 'omi'
+
+define('todo-list', function(props) {
+  return (
+    <ul>
+      {props.items.map(item => (
+        <li key={item.id}>{item.text}</li>
+      ))}
+    </ul>
+  )
+})
+
+define('todo-app', class extends WeElement {
+  static observe = true
+
+  data = { items: [], text: '' }
+
+  render() {
+    return (
+      <div>
+        <h3>TODO</h3>
+        <todo-list items={this.data.items} />
+        <form onSubmit={this.handleSubmit}>
+          <input
+            id="new-todo"
+            onChange={this.handleChange}
+            value={this.data.text}
+          />
+          <button>Add #{this.data.items.length + 1}</button>
+        </form>
+      </div>
+    )
+  }
+
+  handleChange = e => {
+    this.data.text = e.target.value
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+    if (!this.data.text.trim().length) {
+      return
+    }
+    this.data.items.push({
+      text: this.data.text,
+      id: Date.now()
+    })
+    this.data.text = ''
+  }
+})
+
+render(<todo-app />, 'body')
+```
+
+### Store
+
+store system 을 사용하여 `this.update` 메서드에 작별을 고하세요! 이것은 데이터가 변경되면 UI 와 관련된 부분을 자동으로 업데이트 합니다. 파워풀한 **Store architecture** 는 고성능입니다. 왜냐하면 모든 데이터는 하나의 store 에 마운트(mount) 되기 때문입니다. 컴포넌트의 state 를 판별하기 위한 props가 의존된 컴포넌트를 제외.
+
+```js
+export default {
+  data: {
+    items: [],
+    text: "",
+    firstName: "dnt",
+    lastName: "zhang",
+    fullName: function() {
+      return this.firstName + this.lastName;
+    },
+    globalPropTest: "abc", // Change it will refresh all elements without changing the components and page declaring data dependency.
+    ccc: { ddd: 1 } // Change it will refresh all elements without changing the components and page declaring data dependency.
+  },
+  globalData: ["globalPropTest", "ccc.ddd"],
+  add: function() {
+    if (!this.data.text.trim().length) {
+      return;
+    }
+    this.data.items.push({
+      text: this.data.text,
+      id: Date.now()
+    });
+    this.data.text = "";
+  }
+  // Default value is false, set to true will update all instances when data changing.
+  // updateAll: true
+};
+```
+
+커스텀 엘리먼트는 의존적인 데이터를 필요로합니다. 그래서 Omi stores는 커스텀 컴포넌트의 데이터가 정의된 디펜던시 경로(path) 를 계산합니다 그리고 필요할때 이것을 부분적으로 업데이트 합니다:
+
+```js
+class TodoApp extends WeElement {
+  // If you use store, the data is only used to declare dependencies.
+  static get data() {
+    return { items: [], text: "" };
+  }
+  // ...
+  handleChange = e => {
+    this.store.data.text = e.target.value;
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.store.add();
+  };
+}
+```
+
+- 데이터 로직은 **store 정의 메서드에 encapsulated 됩니다** (`store.add` 와 같은.)
+- View 는 오직 데이터를 store에 전달만 합니다. `store.add` 사용 혹은 `store.data.text`를 top 에 설정하여.
+
+당신은 루트(root) 노드가 렌더시 이 `store` 를 사용하여 주입(inject)해야 합니다:
+
+```js
+render(<todo-app />, "body", store);
+```
+
+[→ Store Source Code](https://github.com/Tencent/omi/blob/master/packages/omi/examples/store/main.js)
+
+#### Summary：
+
+- `store.data`는 모든 애트리뷰트 와 기본 값들을 리스트 하기 위해 사용됩니다. (props를 통해 정의된 뷰 컴포넌트 제외)
+- 구성 요소 및 페이지의 데이터는 종속 store.data 의 속성을 나열하는 데 사용 되며 (omi는 경로를 기록 합니다.) 그리고 필요에 따라 업데이트 됩니다.
+- 만약 페이지에 간단한 컴포넌트가 거의 없는 경우, `updateAll`을 `true`로 선언할 수 있습니다. 그리고 컴포넌트와 페이지들은 데이터를 선언할 필요 없으며 그것들은 필요에 따라 업데이트 되지 않습니다.
+- globalData에 선언된 경로(path)는 해당경로의 값이 수정되는 한 모든 페이지와 구성 요소를 새로고침 하며 globalData를 사용하여 모든 페이지 또는 공용(public) 속성(property)를 나열할 수 있습니다.
+
+## Observe
+
+### Omi Observe
+
+observe 를 사용해서 `store` 사용이 필요 없는 반응형 뷰 엘리먼트(element) 를 생성할 수 있습니다:
+
+```js
+import { tag, WeElement, observe } from "omi"
+
+@observe
+@tag("my-app")
+class MyApp extends WeElement {
+  install() {
+    this.data.name = "omi"
+  }
+
+  onClick = () => {
+    this.data.name = "Omi V4.0"
+  }
+
+  render(props, data) {
+    return (
+      <div onClick={this.onClick}>
+        <h1>Welcome to {data.name}</h1>
+      </div>
+    )
+  }
+}
+```
+
+만약 IE11과 호환하기를 원하시면, omi의 observe 대신 `omi-mobx` 를 사용해주세요.
+
+### Omi Mobx
+
+```js
+import { tag, WeElement } from "omi"
+import { observe } from "omi-mobx"
+
+@observe
+@tag("my-app")
+class MyApp extends WeElement {
+  install() {
+    this.data.name = "omi"
+  }
+
+  onClick = () => {
+    this.data.name = "Omi V4.0"
+  }
+
+  render(props, data) {
+    return (
+      <div onClick={this.onClick}>
+        <h1>Welcome to {data.name}</h1>
+      </div>
+    )
+  }
+}
+```
+
+### Lifecycle
+
+| 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                           |
+| `afterUpdate`    | after update  (deprecated)                           |
+| `updated`    | after update                             |
+| `beforeRender`   | before `render()`                           |
+| `receiveProps`   | parent element re-render will trigger it      |
+
+## Debugging
+
+사용 [Omi DevTools](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd) 당신은 어떤 설정(configuration)없이 간단히 디버그와 UI를 매니지 할 수 있습니다. 그냥 설치하고 디버그하세요.
+
+Omi는 Web Components 와 Shadow-DOM을 사용하기 때문에 React 및 Vue 처럼 개발자 도구와 Chrome 에서 제공되는 **Elements 사이드바** 를 사용하여 다른 요소 패널을 설치할 필요가 없습니다.
+
+![Omi DevTools](https://github.com/f/omi-devtools/raw/master/omi-devtools.gif)
+
+## React to Omi
+
+예를들면, 아래는 weui React 의 button 을 weui Omi의 button 으로 마이그레이션 하는 예제 입니다:
+
+![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)
+* [After](https://github.com/Tencent/omi/blob/9790fadaaf20cfede80bcf9213756a83fc8c3949/packages/omi-weui/src/omi-weui/elements/button/button.js)
+
+## Browsers Support
+
+Omi 4.0+ 부터 주요 브라우저(Safari 10+, IE 11+, Chrome, Firefox, Edge)의 마지막 두 버전을 지원합니다.
+
+![→ Browsers Support](./assets/browsers-support.png)
+
+[→ Polyfills](https://github.com/webcomponents/webcomponentsjs)
+
+> 만약 IE11과 호환하기를 원한다면, [→ this project](https://github.com/Tencent/omi/tree/master/packages/omi-ie11) 의 Omi 파일을 사용하세요. 이 프로젝트는 Proxy 대신에 JSON DIFF 와 Timer를 사용합니다.
+
+> 당신은 IE11 환경에서 동적으로 이 프로젝트의 JS를 로드할 수 있습니다. 그리고 Proxy 버전은 여전히 다른 환경을 사용합니다.
+
+> 당신은 store 시스템을 포기하고, omi-mobx 를 사용하여 IE11을 호환할 수 있습니다.
+
+## Contribution
+
+1. Fork it (https://github.com/Tencent/omi/fork)
+2. Create your branch (`git checkout -b my-urgent-hotfix`)
+3. Commit your changes (`git commit -am 'Fixed something'`)
+4. Push to the branch (`git push origin my-urgent-hotfix`)
+5. Create a new Pull Request
+
+Omi 관련된관련하여 문제가 있을 경우 언제든지 저희에게 연락주세요. 혹은 [Omi QQ Group](https://github.com/Tencent/omi/issues/169) 추가 부탁 드립니다.
+
+- [@f](https://github.com/f)
+- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
+- [@dntzhang](https://github.com/dntzhang)
+- [@xcatliu](https://github.com/xcatliu)
+
+## Thanks
+
+* [preact](https://github.com/developit/preact)
+* [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy)
+* [create-react-app](https://github.com/facebook/create-react-app)
+* [JSX](https://github.com/facebook/jsx)
+
+
+## License
+
+MIT © Tencent
--- a/README.md
+++ b/README.md
--- a/assets/99.jpg
+++ b/assets/99.jpg
--- a/assets/admin-mb.png
+++ b/assets/admin-mb.png
--- a/assets/admin-pc-v3.png
+++ b/assets/admin-pc-v3.png
--- a/assets/cax-omi.jpg
+++ b/assets/cax-omi.jpg
--- a/assets/cax-rect.jpg
+++ b/assets/cax-rect.jpg
--- a/assets/cax.gif
+++ b/assets/cax.gif
--- a/assets/comi-token.jpg
+++ b/assets/comi-token.jpg
--- a/assets/comi.jpg
+++ b/assets/comi.jpg
--- a/assets/contributors.html
+++ b/assets/contributors.html
@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head lang="en">
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
-  <title></title>
-</head>
-
-<body>
-
-  <div></div>
-  <script src="./list.js"></script>
-  <script>
-    const arr = sliceArr(list.reverse(), 5)
-    const html = `<table><tbody>
-      ${arr.map(subArr => {
-        let tds = subArr.map(info => {
-          return `<td><a target="_blank"  href="https://github.com${info.author.path}"><img width="60px" src="${info.author.avatar}"></a></td>`
-        })
-        return `<tr>${tds.join('')}</tr>`
-      }).join('')}</tbody></table>`
-    console.log(html)
-    document.querySelector('div').innerHTML = html
-
-
-
-    function sliceArr(array, size) {
-      var result = [];
-      for (let x = 0; x < Math.ceil(array.length / size); x++) {
-        let start = x * size;
-        let end = start + size;
-        result.push(array.slice(start, end));
-      }
-      return result;
-    }
-  </script>
-</body>
-
-</html>
--- a/assets/db-config.jpg
+++ b/assets/db-config.jpg
--- a/assets/debug-cloud-fn.png
+++ b/assets/debug-cloud-fn.png
--- a/assets/dir.jpg
+++ b/assets/dir.jpg
--- a/assets/env.jpg
+++ b/assets/env.jpg
--- a/assets/hello-kbone.png
+++ b/assets/hello-kbone.png
--- a/assets/hello-ssr.png
+++ b/assets/hello-ssr.png
--- a/assets/ie9a.jpg
+++ b/assets/ie9a.jpg
--- a/assets/ie9b.jpg
+++ b/assets/ie9b.jpg
--- a/assets/index.html
+++ b/assets/index.html
@ -8,7 +8,7 @@
 </head>

 <body>
-	<script src="https://tencent.github.io/omi/packages/omi/dist/omi.min.js"></script>
+	<script src="https://unpkg.com/omi"></script>
 	<script>
 		const { WeElement, h, render, define } = Omi

@ -29,7 +29,7 @@
 							onClick: () => {
 								this.data.liked = true
 								this.update()
-              }
+							}
 						},
 						'Like'
 					)
--- a/assets/kbone.png
+++ b/assets/kbone.png
--- a/assets/list.js
+++ b/assets/list.js
--- a/assets/logo.svg
+++ b/assets/logo.svg
@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Creator: CorelDRAW 2017 -->
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
-viewBox="0 0 1024 1024"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
-  <style type="text/css">
-   <![CDATA[
-    .fil0 {fill:none}
-    .fil2 {fill:#FEFEFE}
-    .fil1 {fill:#07C160}
-   ]]>
-  </style>
- </defs>
- <g id="图层_x0020_1">
-  <metadata id="CorelCorpID_0Corel-Layer"/>
-  <rect class="fil0" width="1024" height="1024"/>
-  <rect class="fil0" width="1024" height="1024"/>
-  <g id="_2225049615792">
-   <circle class="fil1" cx="512" cy="512" r="512"/>
-   <polygon class="fil2" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/>
-   <circle class="fil2" cx="839.36" cy="242.47" r="50"/>
-  </g>
- </g>
-</svg>
--- a/assets/logs.png
+++ b/assets/logs.png
--- a/assets/mappingjs.png
+++ b/assets/mappingjs.png
--- a/assets/md2site/asset-manifest.json
+++ b/assets/md2site/asset-manifest.json
@ -1,23 +0,0 @@
-{
-  "index.css": "static/css/index.7fd94fa3.css",
-  "index.css.map": "static/css/index.7fd94fa3.css.map",
-  "index.js": "static/js/index.13b914c0.js",
-  "index.js.map": "static/js/index.13b914c0.js.map",
-  "static/js/0.de7771e5.chunk.js": "static/js/0.de7771e5.chunk.js",
-  "static/js/0.de7771e5.chunk.js.map": "static/js/0.de7771e5.chunk.js.map",
-  "static/js/1.3d241617.chunk.js": "static/js/1.3d241617.chunk.js",
-  "static/js/1.3d241617.chunk.js.map": "static/js/1.3d241617.chunk.js.map",
-  "static/js/2.916a2d79.chunk.js": "static/js/2.916a2d79.chunk.js",
-  "static/js/2.916a2d79.chunk.js.map": "static/js/2.916a2d79.chunk.js.map",
-  "static/js/3.76509d8c.chunk.js": "static/js/3.76509d8c.chunk.js",
-  "static/js/3.76509d8c.chunk.js.map": "static/js/3.76509d8c.chunk.js.map",
-  "static/js/4.466db21e.chunk.js": "static/js/4.466db21e.chunk.js",
-  "static/js/4.466db21e.chunk.js.map": "static/js/4.466db21e.chunk.js.map",
-  "static/js/5.499a3d67.chunk.js": "static/js/5.499a3d67.chunk.js",
-  "static/js/5.499a3d67.chunk.js.map": "static/js/5.499a3d67.chunk.js.map",
-  "static\\media\\omi-logo.svg": "static/media/omi-logo.979f9173.svg",
-  "zh-cn.css": "static/css/zh-cn.7fd94fa3.css",
-  "zh-cn.css.map": "static/css/zh-cn.7fd94fa3.css.map",
-  "zh-cn.js": "static/js/zh-cn.0f628f3b.js",
-  "zh-cn.js.map": "static/js/zh-cn.0f628f3b.js.map"
-}
--- a/assets/md2site/favicon.ico
+++ b/assets/md2site/favicon.ico
--- a/assets/md2site/highlight/dracula.css
+++ b/assets/md2site/highlight/dracula.css
@ -1,8 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:0.5em;}
-.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}
-.hljs-function .hljs-keyword{color:#ff79c6}
-._code-ctn .hljs,._code-ctn .hljs-subst{color:#f8f8f2}
-.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}
-.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}
-.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}
-.hljs-emphasis{font-style:italic}
--- a/assets/md2site/highlight/highlight.pack.js
+++ b/assets/md2site/highlight/highlight.pack.js
@ -1,459 +0,0 @@
-'use strict';
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-/*! highlight.js v9.9.0 | BSD3 License | git.io/hljslicense */
-!function (e) {
-  var n = 'object' == (typeof window === 'undefined' ? 'undefined' : _typeof(window)) && window || 'object' == (typeof self === 'undefined' ? 'undefined' : _typeof(self)) && self;
-  'undefined' != typeof exports ? e(exports) : n && (n.hljs = e({}), 'function' == typeof define && define.amd && define([], function () {
-    return n.hljs;
-  }));
-}(function (e) {
-  function n(e) {
-    return e.replace(/[&<>]/gm, function (e) {
-      return I[e];
-    });
-  }
-  function t(e) {
-    return e.nodeName.toLowerCase();
-  }
-  function r(e, n) {
-    var t = e && e.exec(n);
-    return t && 0 === t.index;
-  }
-  function i(e) {
-    return k.test(e);
-  }
-  function a(e) {
-    var n = void 0,
-        t = void 0,
-        r = void 0,
-        a = void 0,
-        o = e.className + ' ';
-    if (o += e.parentNode ? e.parentNode.className : '', t = B.exec(o)) return R(t[1]) ? t[1] : 'no-highlight';
-    for (o = o.split(/\s+/), n = 0, r = o.length; r > n; n++) {
-      if (a = o[n], i(a) || R(a)) return a;
-    }
-  }
-  function o(e, n) {
-    var t = void 0,
-        r = {};
-    for (t in e) {
-      r[t] = e[t];
-    }if (n) for (t in n) {
-      r[t] = n[t];
-    }return r;
-  }
-  function u(e) {
-    var n = [];
-    return function r(e, i) {
-      for (var _a = e.firstChild; _a; _a = _a.nextSibling) {
-        3 === _a.nodeType ? i += _a.nodeValue.length : 1 === _a.nodeType && (n.push({ event: 'start', offset: i, node: _a }), i = r(_a, i), t(_a).match(/br|hr|img|input/) || n.push({ event: 'stop', offset: i, node: _a }));
-      }return i;
-    }(e, 0), n;
-  }
-  function c(e, r, i) {
-    function a() {
-      return e.length && r.length ? e[0].offset !== r[0].offset ? e[0].offset < r[0].offset ? e : r : 'start' === r[0].event ? e : r : e.length ? e : r;
-    }
-    function o(e) {
-      function r(e) {
-        return ' ' + e.nodeName + '="' + n(e.value) + '"';
-      }
-      l += '<' + t(e) + w.map.call(e.attributes, r).join('') + '>';
-    }
-    function u(e) {
-      l += '</' + t(e) + '>';
-    }
-    function c(e) {
-      ;('start' === e.event ? o : u)(e.node);
-    }
-    for (var s = 0, l = '', f = []; e.length || r.length;) {
-      var _g = a();
-      if (l += n(i.substring(s, _g[0].offset)), s = _g[0].offset, _g === e) {
-        f.reverse().forEach(u);
-        do {
-          c(_g.splice(0, 1)[0]), _g = a();
-        } while (_g === e && _g.length && _g[0].offset === s);
-        f.reverse().forEach(o);
-      } else 'start' === _g[0].event ? f.push(_g[0].node) : f.pop(), c(_g.splice(0, 1)[0]);
-    }
-    return l + n(i.substr(s));
-  }
-  function s(e) {
-    function n(e) {
-      return e && e.source || e;
-    }
-    function t(t, r) {
-      return new RegExp(n(t), 'm' + (e.cI ? 'i' : '') + (r ? 'g' : ''));
-    }
-    function r(i, a) {
-      if (!i.compiled) {
-        if (i.compiled = !0, i.k = i.k || i.bK, i.k) {
-          var _u = {},
-              _c = function _c(n, t) {
-            e.cI && (t = t.toLowerCase()), t.split(' ').forEach(function (e) {
-              var t = e.split('|');
-              _u[t[0]] = [n, t[1] ? Number(t[1]) : 1];
-            });
-          };
-          'string' == typeof i.k ? _c('keyword', i.k) : E(i.k).forEach(function (e) {
-            _c(e, i.k[e]);
-          }), i.k = _u;
-        }
-        ;i.lR = t(i.l || /\w+/, !0), a && (i.bK && (i.b = '\\b(' + i.bK.split(' ').join('|') + ')\\b'), i.b || (i.b = /\B|\b/), i.bR = t(i.b), i.e || i.eW || (i.e = /\B|\b/), i.e && (i.eR = t(i.e)), i.tE = n(i.e) || '', i.eW && a.tE && (i.tE += (i.e ? '|' : '') + a.tE)), i.i && (i.iR = t(i.i)), null == i.r && (i.r = 1), i.c || (i.c = []);
-        var _s = [];
-        i.c.forEach(function (e) {
-          e.v ? e.v.forEach(function (n) {
-            _s.push(o(e, n));
-          }) : _s.push('self' === e ? i : e);
-        }), i.c = _s, i.c.forEach(function (e) {
-          r(e, i);
-        }), i.starts && r(i.starts, a);
-        var _l = i.c.map(function (e) {
-          return e.bK ? '\\.?(' + e.b + ')\\.?' : e.b;
-        }).concat([i.tE, i.i]).map(n).filter(Boolean);
-        i.t = _l.length ? t(_l.join('|'), !0) : {
-          exec: function exec() {
-            return null;
-          }
-        };
-      }
-    }
-    r(e);
-  }
-  function l(e, t, i, a) {
-    function o(e, n) {
-      var t = void 0,
-          i = void 0;
-      for (t = 0, i = n.c.length; i > t; t++) {
-        if (r(n.c[t].bR, e)) return n.c[t];
-      }
-    }
-    function u(e, n) {
-      if (r(e.eR, n)) {
-        for (; e.endsParent && e.parent;) {
-          e = e.parent;
-        }return e;
-      }
-      return e.eW ? u(e.parent, n) : void 0;
-    }
-    function c(e, n) {
-      return !i && r(n.iR, e);
-    }
-    function g(e, n) {
-      var t = N.cI ? n[0].toLowerCase() : n[0];
-      return e.k.hasOwnProperty(t) && e.k[t];
-    }
-    function h(e, n, t, r) {
-      var i = r ? '' : y.classPrefix,
-          a = '<span class="' + i,
-          o = t ? '' : C;
-      return a += e + '">', a + n + o;
-    }
-    function p() {
-      var e = void 0,
-          t = void 0,
-          r = void 0,
-          i = void 0;
-      if (!E.k) return n(B);
-      for (i = '', t = 0, E.lR.lastIndex = 0, r = E.lR.exec(B); r;) {
-        i += n(B.substring(t, r.index)), e = g(E, r), e ? (M += e[1], i += h(e[0], n(r[0]))) : i += n(r[0]), t = E.lR.lastIndex, r = E.lR.exec(B);
-      }return i + n(B.substr(t));
-    }
-    function d() {
-      var e = 'string' == typeof E.sL;
-      if (e && !x[E.sL]) return n(B);
-      var t = e ? l(E.sL, B, !0, L[E.sL]) : f(B, E.sL.length ? E.sL : void 0);
-      return E.r > 0 && (M += t.r), e && (L[E.sL] = t.top), h(t.language, t.value, !1, !0);
-    }
-    function b() {
-      ;k += null != E.sL ? d() : p(), B = '';
-    }
-    function v(e) {
-      ;k += e.cN ? h(e.cN, '', !0) : '', E = Object.create(e, { parent: { value: E } });
-    }
-    function m(e, n) {
-      if (B += e, null == n) return b(), 0;
-      var t = o(n, E);
-      if (t) return t.skip ? B += n : (t.eB && (B += n), b(), t.rB || t.eB || (B = n)), v(t, n), t.rB ? 0 : n.length;
-      var r = u(E, n);
-      if (r) {
-        var _i = E;
-        _i.skip ? B += n : (_i.rE || _i.eE || (B += n), b(), _i.eE && (B = n));
-        do {
-          E.cN && (k += C), E.skip || (M += E.r), E = E.parent;
-        } while (E !== r.parent);
-        return r.starts && v(r.starts, ''), _i.rE ? 0 : n.length;
-      }
-      if (c(n, E)) throw new Error('Illegal lexeme "' + n + '" for mode "' + (E.cN || '<unnamed>') + '"');
-      return B += n, n.length || 1;
-    }
-    var N = R(e);
-    if (!N) throw new Error('Unknown language: "' + e + '"');
-    s(N);
-    var w,
-        E = a || N,
-        L = {},
-        k = '';
-    for (w = E; w !== N; w = w.parent) {
-      w.cN && (k = h(w.cN, '', !0) + k);
-    }var B = '',
-        M = 0;
-    try {
-      for (var I, j, O = 0;;) {
-        if (E.t.lastIndex = O, I = E.t.exec(t), !I) break;j = m(t.substring(O, I.index), I[0]), O = I.index + j;
-      }
-      for (m(t.substr(O)), w = E; w.parent; w = w.parent) {
-        w.cN && (k += C);
-      }return { r: M, value: k, language: e, top: E };
-    } catch (T) {
-      if (T.message && -1 !== T.message.indexOf('Illegal')) return { r: 0, value: n(t) };
-      throw T;
-    }
-  }
-  function f(e, t) {
-    t = t || y.languages || E(x);
-    var r = { r: 0, value: n(e) },
-        i = r;
-    return t.filter(R).forEach(function (n) {
-      var t = l(n, e, !1);t.language = n, t.r > i.r && (i = t), t.r > r.r && (i = r, r = t);
-    }), i.language && (r.second_best = i), r;
-  }
-  function g(e) {
-    return y.tabReplace || y.useBR ? e.replace(M, function (e, n) {
-      return y.useBR && '\n' === e ? '<br>' : y.tabReplace ? n.replace(/\t/g, y.tabReplace) : void 0;
-    }) : e;
-  }
-  function h(e, n, t) {
-    var r = n ? L[n] : t,
-        i = [e.trim()];
-    return e.match(/\bhljs\b/) || i.push('hljs'), -1 === e.indexOf(r) && i.push(r), i.join(' ').trim();
-  }
-  function p(e) {
-    var n = void 0,
-        t = void 0,
-        r = void 0,
-        o = void 0,
-        s = void 0,
-        p = a(e);
-    i(p) || (y.useBR ? (n = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'), n.innerHTML = e.innerHTML.replace(/\n/g, '').replace(/<br[ \/]*>/g, '\n')) : n = e, s = n.textContent, r = p ? l(p, s, !0) : f(s), t = u(n), t.length && (o = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'), o.innerHTML = r.value, r.value = c(t, u(o), s)), r.value = g(r.value), e.innerHTML = r.value, e.className = h(e.className, p, r.language), e.result = { language: r.language, re: r.r }, r.second_best && (e.second_best = {
-      language: r.second_best.language,
-      re: r.second_best.r
-    }));
-  }
-  function d(e) {
-    y = o(y, e);
-  }
-  function b() {
-    if (!b.called) {
-      b.called = !0;
-      var _e = document.querySelectorAll('pre code');
-      w.forEach.call(_e, p);
-    }
-  }
-  function v() {
-    addEventListener('DOMContentLoaded', b, !1), addEventListener('load', b, !1);
-  }
-  function m(n, t) {
-    var r = x[n] = t(e);
-    r.aliases && r.aliases.forEach(function (e) {
-      L[e] = n;
-    });
-  }
-  function N() {
-    return E(x);
-  }
-  function R(e) {
-    return e = (e || '').toLowerCase(), x[e] || x[L[e]];
-  }
-  var w = [],
-      E = Object.keys,
-      x = {},
-      L = {},
-      k = /^(no-?highlight|plain|text)$/i,
-      B = /\blang(?:uage)?-([\w-]+)\b/i,
-      M = /((^(<[^>]+>|\t|)+|(?:\n)))/gm,
-      C = '</span>',
-      y = {
-    classPrefix: 'hljs-',
-    tabReplace: null,
-    useBR: !1,
-    languages: void 0
-  },
-      I = { '&': '&amp;', '<': '&lt;', '>': '&gt;' };
-  return e.highlight = l, e.highlightAuto = f, e.fixMarkup = g, e.highlightBlock = p, e.configure = d, e.initHighlighting = b, e.initHighlightingOnLoad = v, e.registerLanguage = m, e.listLanguages = N, e.getLanguage = R, e.inherit = o, e.IR = '[a-zA-Z]\\w*', e.UIR = '[a-zA-Z_]\\w*', e.NR = '\\b\\d+(\\.\\d+)?', e.CNR = '(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)', e.BNR = '\\b(0b[01]+)', e.RSR = '!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~', e.BE = { b: '\\\\[\\s\\S]', r: 0 }, e.ASM = { cN: 'string', b: "'", e: "'", i: '\\n', c: [e.BE] }, e.QSM = { cN: 'string', b: '"', e: '"', i: '\\n', c: [e.BE] }, e.PWM = {
-    b: /\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/
-  }, e.C = function (n, t, r) {
-    var i = e.inherit({ cN: 'comment', b: n, e: t, c: [] }, r || {});
-    return i.c.push(e.PWM), i.c.push({ cN: 'doctag', b: '(?:TODO|FIXME|NOTE|BUG|XXX):', r: 0 }), i;
-  }, e.CLCM = e.C('//', '$'), e.CBCM = e.C('/\\*', '\\*/'), e.HCM = e.C('#', '$'), e.NM = { cN: 'number', b: e.NR, r: 0 }, e.CNM = { cN: 'number', b: e.CNR, r: 0 }, e.BNM = { cN: 'number', b: e.BNR, r: 0 }, e.CSSNM = {
-    cN: 'number',
-    b: e.NR + '(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?',
-    r: 0
-  }, e.RM = {
-    cN: 'regexp',
-    b: /\//,
-    e: /\/[gimuy]*/,
-    i: /\n/,
-    c: [e.BE, { b: /\[/, e: /\]/, r: 0, c: [e.BE] }]
-  }, e.TM = { cN: 'title', b: e.IR, r: 0 }, e.UTM = { cN: 'title', b: e.UIR, r: 0 }, e.METHOD_GUARD = { b: '\\.\\s*' + e.UIR, r: 0 }, e;
-});
-hljs.registerLanguage('xml', function (s) {
-  var e = '[A-Za-z0-9\\._:-]+',
-      t = {
-    eW: !0,
-    i: /</,
-    r: 0,
-    c: [{ cN: 'attr', b: e, r: 0 }, {
-      b: /=\s*/,
-      r: 0,
-      c: [{
-        cN: 'string',
-        endsParent: !0,
-        v: [{ b: /"/, e: /"/ }, { b: /'/, e: /'/ }, { b: /[^\s"'=<>`]+/ }]
-      }]
-    }]
-  };
-  return {
-    aliases: ['html', 'xhtml', 'rss', 'atom', 'xjb', 'xsd', 'xsl', 'plist'],
-    cI: !0,
-    c: [{
-      cN: 'meta',
-      b: '<!DOCTYPE',
-      e: '>',
-      r: 10,
-      c: [{ b: '\\[', e: '\\]' }]
-    }, s.C('<!--', '-->', { r: 10 }), { b: '<\\!\\[CDATA\\[', e: '\\]\\]>', r: 10 }, {
-      b: /<\?(php)?/,
-      e: /\?>/,
-      sL: 'php',
-      c: [{ b: '/\\*', e: '\\*/', skip: !0 }]
-    }, {
-      cN: 'tag',
-      b: '<style(?=\\s|>|$)',
-      e: '>',
-      k: { name: 'style' },
-      c: [t],
-      starts: { e: '</style>', rE: !0, sL: ['css', 'xml'] }
-    }, {
-      cN: 'tag',
-      b: '<script(?=\\s|>|$)',
-      e: '>',
-      k: { name: 'script' },
-      c: [t],
-      starts: {
-        e: '</script>',
-        rE: !0,
-        sL: ['actionscript', 'javascript', 'handlebars', 'xml']
-      }
-    }, {
-      cN: 'meta',
-      v: [{ b: /<\?xml/, e: /\?>/, r: 10 }, { b: /<\?\w+/, e: /\?>/ }]
-    }, {
-      cN: 'tag',
-      b: '</?',
-      e: '/?>',
-      c: [{ cN: 'name', b: /[^\/><\s]+/, r: 0 }, t]
-    }]
-  };
-});
-hljs.registerLanguage('css', function (e) {
-  var c = '[a-zA-Z-][a-zA-Z0-9_-]*',
-      t = {
-    b: /[A-Z\_\.\-]+\s*:/,
-    rB: !0,
-    e: ';',
-    eW: !0,
-    c: [{
-      cN: 'attribute',
-      b: /\S/,
-      e: ':',
-      eE: !0,
-      starts: {
-        eW: !0,
-        eE: !0,
-        c: [{
-          b: /[\w-]+\(/,
-          rB: !0,
-          c: [{ cN: 'built_in', b: /[\w-]+/ }, { b: /\(/, e: /\)/, c: [e.ASM, e.QSM] }]
-        }, e.CSSNM, e.QSM, e.ASM, e.CBCM, { cN: 'number', b: '#[0-9A-Fa-f]+' }, { cN: 'meta', b: '!important' }]
-      }
-    }]
-  };
-  return {
-    cI: !0,
-    i: /[=\/|'\$]/,
-    c: [e.CBCM, { cN: 'selector-id', b: /#[A-Za-z0-9_-]+/ }, { cN: 'selector-class', b: /\.[A-Za-z0-9_-]+/ }, { cN: 'selector-attr', b: /\[/, e: /\]/, i: '$' }, { cN: 'selector-pseudo', b: /:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/ }, { b: '@(font-face|page)', l: '[a-z-]+', k: 'font-face page' }, {
-      b: '@',
-      e: '[{;]',
-      i: /:/,
-      c: [{ cN: 'keyword', b: /\w+/ }, { b: /\s/, eW: !0, eE: !0, r: 0, c: [e.ASM, e.QSM, e.CSSNM] }]
-    }, { cN: 'selector-tag', b: c, r: 0 }, { b: '{', e: '}', i: /\S/, c: [e.CBCM, t] }]
-  };
-});
-hljs.registerLanguage('javascript', function (e) {
-  var r = '[A-Za-z$_][0-9A-Za-z$_]*',
-      t = {
-    keyword: 'in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as',
-    literal: 'true false null undefined NaN Infinity',
-    built_in: 'eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise'
-  },
-      a = {
-    cN: 'number',
-    v: [{ b: '\\b(0[bB][01]+)' }, { b: '\\b(0[oO][0-7]+)' }, { b: e.CNR }],
-    r: 0
-  },
-      n = { cN: 'subst', b: '\\$\\{', e: '\\}', k: t, c: [] },
-      c = { cN: 'string', b: '`', e: '`', c: [e.BE, n] };
-  n.c = [e.ASM, e.QSM, c, a, e.RM];
-  var s = n.c.concat([e.CBCM, e.CLCM]);
-  return {
-    aliases: ['js', 'jsx', 'bash'],
-    k: t,
-    c: [{ cN: 'meta', r: 10, b: /^\s*['"]use (strict|asm)['"]/ }, { cN: 'meta', b: /^#!/, e: /$/ }, e.ASM, e.QSM, c, e.CLCM, e.CBCM, a, {
-      b: /[{,]\s*/,
-      r: 0,
-      c: [{ b: r + '\\s*:', rB: !0, r: 0, c: [{ cN: 'attr', b: r, r: 0 }] }]
-    }, {
-      b: '(' + e.RSR + '|\\b(case|return|throw)\\b)\\s*',
-      k: 'return throw case',
-      c: [e.CLCM, e.CBCM, e.RM, {
-        cN: 'function',
-        b: '(\\(.*?\\)|' + r + ')\\s*=>',
-        rB: !0,
-        e: '\\s*=>',
-        c: [{
-          cN: 'params',
-          v: [{ b: r }, { b: /\(\s*\)/ }, { b: /\(/, e: /\)/, eB: !0, eE: !0, k: t, c: s }]
-        }]
-      }, {
-        b: /</,
-        e: /(\/\w+|\w+\/)>/,
-        sL: 'xml',
-        c: [{ b: /<\w+\s*\/>/, skip: !0 }, {
-          b: /<\w+/,
-          e: /(\/\w+|\w+\/)>/,
-          skip: !0,
-          c: [{ b: /<\w+\s*\/>/, skip: !0 }, 'self']
-        }]
-      }],
-      r: 0
-    }, {
-      cN: 'function',
-      bK: 'function',
-      e: /\{/,
-      eE: !0,
-      c: [e.inherit(e.TM, { b: r }), { cN: 'params', b: /\(/, e: /\)/, eB: !0, eE: !0, c: s }],
-      i: /\[|%/
-    }, { b: /\$[(.]/ }, e.METHOD_GUARD, {
-      cN: 'class',
-      bK: 'class',
-      e: /[{;=]/,
-      eE: !0,
-      i: /[:"\[\]]/,
-      c: [{ bK: 'extends' }, e.UTM]
-    }, { bK: 'constructor', e: /\{/, eE: !0 }],
-    i: /#(?!!)/
-  };
-});
--- a/assets/md2site/index.html
+++ b/assets/md2site/index.html
@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/dracula.css"><title>Omi</title><link href="./static/css/index.7fd94fa3.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/highlight.pack.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.13b914c0.js"></script></body></html>
--- a/assets/md2site/js/remarkable.min.js
+++ b/assets/md2site/js/remarkable.min.js
--- a/assets/md2site/service-worker.js
+++ b/assets/md2site/service-worker.js
@ -1 +0,0 @@
-"use strict";var precacheConfig=[["./index.html","93a4f3028ba80037dad65104c68da9b1"],["./static/css/index.7fd94fa3.css","f92706c168ce617a52e7bdb97ea8f974"],["./static/css/zh-cn.7fd94fa3.css","3cf2a12d743b914e6606d48646d6caef"],["./static/js/0.de7771e5.chunk.js","4c570a8d3f676537bfc3f05084da8336"],["./static/js/1.3d241617.chunk.js","2e04b36b2e77476d2d7fc32b2328831e"],["./static/js/2.916a2d79.chunk.js","3853322a6ef3358b2bb419b8bb067e8a"],["./static/js/3.76509d8c.chunk.js","fe8c667f81d2a88cd167f95d043f88ff"],["./static/js/4.466db21e.chunk.js","11618163038ee21503bf7373e59fc277"],["./static/js/5.499a3d67.chunk.js","1a4fb9d90f1a924f909d9fe1e8e497aa"],["./static/js/index.13b914c0.js","180bdec97b7c2e0e303357492afe08de"],["./static/js/zh-cn.0f628f3b.js","51cc738968b97a60d16187a9565759ae"],["./static/media/omi-logo.979f9173.svg","979f9173db1ab18c35b7e720f0bb41a0"],["./zh-cn.html","694fe2295ebc2e4aced861546b3af310"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});
--- a/assets/md2site/static/css/index.7fd94fa3.css
+++ b/assets/md2site/static/css/index.7fd94fa3.css
@ -1,2 +0,0 @@
-body,html{background-color:#f6f8fa;font-family:proxima-nova,Helvetica Neue,Helvetica,Roboto,PT Sans,DejaVu Sans,Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,"sans-serif"}body,html,img,li,ul{margin:0;padding:0;border:0}li,ul{list-style:disc inside}a{text-decoration:none;color:#0366d6}table{border-collapse:collapse}table,td,th{border:1px solid #ccc}td,th{padding:4px 8px}@media only screen and (max-width:768px){body,html{overflow-x:hidden}.content img{width:100%}.content code[class*=language-],.content pre[class*=language-]{font-family:Consolas,Liberation Mono,Courier,monospace;line-height:18px;font-size:13px;margin:0;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.content pre[class*=language-]{padding-left:10px}.content p{font-size:14px}.content h1,.content h2,.content h3,.content h4,.content h5,.content p{padding-left:10px;padding-right:10px}.line-highlight:before,.line-highlight[data-end]:after{top:0}}*{-webkit-box-sizing:border-box;box-sizing:border-box}pre code.hljs{padding-left:14px;display:block;overflow-x:auto}.hljs{font-size:14px}code.hljs{display:inline-block;overflow-x:hidden;text-indent:0;position:relative;top:8px;background-color:rgba(27,31,35,.05);border-radius:3px}blockquote:before{content:"";position:absolute;left:0;top:11px;background-color:#dfe2e5;height:24px;width:4px}blockquote{position:relative;margin:0;padding-left:20px}._code-ctn code.hljs{top:2px;background-color:transparent;border-radius:0}._code-ctn{position:relative;height:auto;background-color:#282c34;border-radius:3px;padding-top:1px;margin-top:15px;padding-bottom:1px;max-width:900px}._code-ctn,._hl{line-height:18px}._hl{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:5px;position:absolute;top:-1px;left:0;width:100%}._hll{background-color:#484d57;height:18px;width:100%}._code-ctn code,._code-ctn pre{background:transparent;position:relative;z-index:1}
-/*# sourceMappingURL=index.7fd94fa3.css.map*/
--- a/assets/md2site/static/css/index.7fd94fa3.css.map
+++ b/assets/md2site/static/css/index.7fd94fa3.css.map
@ -1 +0,0 @@
-{"version":3,"sources":["assets/index.css"],"names":[],"mappings":"AAAA,UAIE,yBACA,sJAA4J,CAG9J,oBAPE,SACA,UACA,QAAU,CAWZ,MACE,sBAAwB,CAG1B,EACE,qBACA,aAAe,CAEjB,MACE,wBAA0B,CAE5B,YACE,qBAAuB,CAGzB,MACE,eAAiB,CAGnB,yCACE,UAEE,iBAAmB,CAGrB,aACI,UAAY,CAIhB,+DAEI,uDACA,iBACA,eACA,SACA,WACA,8BACQ,qBAAuB,CAGnC,+BACI,iBAAmB,CAEvB,WACI,cAAgB,CAEpB,uEACI,kBACA,kBAAmB,CAGvB,uDACI,KAAS,CACZ,CAGH,EACE,8BACQ,qBAAuB,CAGjC,cACE,kBACA,cACA,eAAiB,CAGnB,MACE,cAAgB,CAGlB,UACE,qBACA,kBACA,cACA,kBACA,QACA,oCACA,iBAAmB,CAGrB,kBACE,WACA,kBACA,OACA,SACA,yBACA,YACA,SAAW,CAGb,WACE,kBACA,SACA,iBAAmB,CAGrB,qBACE,QACA,6BACA,eAAmB,CAGrB,WACE,kBACA,YACA,yBACA,kBACA,gBACA,gBACA,mBAEA,eAAiB,CAGnB,gBAJE,gBAAkB,CAgBnB,KAXC,yBACA,sBACA,qBACA,iBACA,gBACA,kBACA,SACA,OACA,UAAY,CAKd,MACE,yBACA,YACA,UAAY,CAYd,+BACE,uBACE,kBACA,SAAW","file":"static/css/index.7fd94fa3.css","sourcesContent":["html,body{\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background-color: #f6f8fa;\r\n  font-family:proxima-nova,\"Helvetica Neue\",Helvetica,Roboto, PT Sans, DejaVu Sans, Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif';\r\n}\r\n\r\nimg,ul,li{\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n}\r\n\r\nul,li{\r\n  list-style:disc inside ;\r\n}\r\n\r\na{\r\n  text-decoration: none;\r\n  color: #0366d6;\r\n}\r\ntable{\r\n  border-collapse: collapse;\r\n}\r\ntable,td,th{\r\n  border: 1px solid #ccc;\r\n}\r\n\r\ntd,th{\r\n  padding: 4px 8px;\r\n}\r\n\r\n@media only screen and (max-width: 768px) {\r\n  html,body{\r\n\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  .content img{\r\n      width: 100%;\r\n  }\r\n\r\n\r\n  .content code[class*=\"language-\"],\r\n  .content pre[class*=\"language-\"] {\r\n      font-family: Consolas, \"Liberation Mono\", Courier, monospace;\r\n      line-height: 18px;\r\n      font-size: 13px;\r\n      margin:  0;\r\n      width: 100%;\r\n      -webkit-box-sizing: border-box;\r\n              box-sizing: border-box;\r\n  }\r\n\r\n  .content pre[class*=\"language-\"] {\r\n      padding-left: 10px;\r\n  }\r\n  .content p{\r\n      font-size: 14px;\r\n  }\r\n  .content p,.content h1,.content h2,.content h3,.content h4,.content h5{\r\n      padding-left:10px;\r\n      padding-right:10px;\r\n  }\r\n\r\n  .line-highlight:before, .line-highlight[data-end]:after{\r\n      top: 0em;\r\n  }\r\n}\r\n\r\n*{\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n}\r\n\r\npre code.hljs{\r\n  padding-left: 14px;\r\n  display: block;\r\n  overflow-x: auto;\r\n}\r\n\r\n.hljs{\r\n  font-size: 14px;\r\n}\r\n\r\ncode.hljs{\r\n  display: inline-block;\r\n  overflow-x: hidden;\r\n  text-indent: 0;\r\n  position: relative;\r\n  top: 8px;\r\n  background-color:rgba(27,31,35,.05); \r\n  border-radius: 3px;\r\n}\r\n\r\nblockquote::before{\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  top:11px;\r\n  background-color: #dfe2e5;\r\n  height: 24px;\r\n  width: 4px;\r\n}\r\n\r\nblockquote {\r\n  position: relative;\r\n  margin: 0;\r\n  padding-left: 20px; \r\n}\r\n\r\n._code-ctn code.hljs{\r\n  top: 2px;\r\n  background-color:transparent;\r\n  border-radius: 0px;\r\n}\r\n\r\n._code-ctn{\r\n  position: relative;\r\n  height: auto;\r\n  background-color: #282C34;\r\n  border-radius: 3px;\r\n  padding-top:1px;  \r\n  margin-top: 15px; \r\n  padding-bottom:1px; \r\n  line-height: 18px;\r\n  max-width: 900px;\r\n}\r\n\r\n._hl{\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  padding-top: 5px;\r\n  position: absolute;\r\n  top: -1px;\r\n  left: 0;\r\n  width: 100%;\r\n  line-height: 18px;\r\n\r\n}\r\n\r\n._hll{\r\n  background-color: rgb(72, 77, 87);\r\n  height: 18px;\r\n  width: 100%;\r\n\r\n}\r\n\r\n\r\n._code-ctn pre{\r\n  background: transparent;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n\r\n._code-ctn code{\r\n  background: transparent;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/assets/index.css"],"sourceRoot":""}
--- a/assets/md2site/static/css/zh-cn.7fd94fa3.css
+++ b/assets/md2site/static/css/zh-cn.7fd94fa3.css
@ -1,2 +0,0 @@
-body,html{background-color:#f6f8fa;font-family:proxima-nova,Helvetica Neue,Helvetica,Roboto,PT Sans,DejaVu Sans,Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,"sans-serif"}body,html,img,li,ul{margin:0;padding:0;border:0}li,ul{list-style:disc inside}a{text-decoration:none;color:#0366d6}table{border-collapse:collapse}table,td,th{border:1px solid #ccc}td,th{padding:4px 8px}@media only screen and (max-width:768px){body,html{overflow-x:hidden}.content img{width:100%}.content code[class*=language-],.content pre[class*=language-]{font-family:Consolas,Liberation Mono,Courier,monospace;line-height:18px;font-size:13px;margin:0;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.content pre[class*=language-]{padding-left:10px}.content p{font-size:14px}.content h1,.content h2,.content h3,.content h4,.content h5,.content p{padding-left:10px;padding-right:10px}.line-highlight:before,.line-highlight[data-end]:after{top:0}}*{-webkit-box-sizing:border-box;box-sizing:border-box}pre code.hljs{padding-left:14px;display:block;overflow-x:auto}.hljs{font-size:14px}code.hljs{display:inline-block;overflow-x:hidden;text-indent:0;position:relative;top:8px;background-color:rgba(27,31,35,.05);border-radius:3px}blockquote:before{content:"";position:absolute;left:0;top:11px;background-color:#dfe2e5;height:24px;width:4px}blockquote{position:relative;margin:0;padding-left:20px}._code-ctn code.hljs{top:2px;background-color:transparent;border-radius:0}._code-ctn{position:relative;height:auto;background-color:#282c34;border-radius:3px;padding-top:1px;margin-top:15px;padding-bottom:1px;max-width:900px}._code-ctn,._hl{line-height:18px}._hl{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:5px;position:absolute;top:-1px;left:0;width:100%}._hll{background-color:#484d57;height:18px;width:100%}._code-ctn code,._code-ctn pre{background:transparent;position:relative;z-index:1}
-/*# sourceMappingURL=zh-cn.7fd94fa3.css.map*/
--- a/assets/md2site/static/css/zh-cn.7fd94fa3.css.map
+++ b/assets/md2site/static/css/zh-cn.7fd94fa3.css.map
@ -1 +0,0 @@
-{"version":3,"sources":["assets/index.css"],"names":[],"mappings":"AAAA,UAIE,yBACA,sJAA4J,CAG9J,oBAPE,SACA,UACA,QAAU,CAWZ,MACE,sBAAwB,CAG1B,EACE,qBACA,aAAe,CAEjB,MACE,wBAA0B,CAE5B,YACE,qBAAuB,CAGzB,MACE,eAAiB,CAGnB,yCACE,UAEE,iBAAmB,CAGrB,aACI,UAAY,CAIhB,+DAEI,uDACA,iBACA,eACA,SACA,WACA,8BACQ,qBAAuB,CAGnC,+BACI,iBAAmB,CAEvB,WACI,cAAgB,CAEpB,uEACI,kBACA,kBAAmB,CAGvB,uDACI,KAAS,CACZ,CAGH,EACE,8BACQ,qBAAuB,CAGjC,cACE,kBACA,cACA,eAAiB,CAGnB,MACE,cAAgB,CAGlB,UACE,qBACA,kBACA,cACA,kBACA,QACA,oCACA,iBAAmB,CAGrB,kBACE,WACA,kBACA,OACA,SACA,yBACA,YACA,SAAW,CAGb,WACE,kBACA,SACA,iBAAmB,CAGrB,qBACE,QACA,6BACA,eAAmB,CAGrB,WACE,kBACA,YACA,yBACA,kBACA,gBACA,gBACA,mBAEA,eAAiB,CAGnB,gBAJE,gBAAkB,CAgBnB,KAXC,yBACA,sBACA,qBACA,iBACA,gBACA,kBACA,SACA,OACA,UAAY,CAKd,MACE,yBACA,YACA,UAAY,CAYd,+BACE,uBACE,kBACA,SAAW","file":"static/css/zh-cn.7fd94fa3.css","sourcesContent":["html,body{\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background-color: #f6f8fa;\r\n  font-family:proxima-nova,\"Helvetica Neue\",Helvetica,Roboto, PT Sans, DejaVu Sans, Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif';\r\n}\r\n\r\nimg,ul,li{\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n}\r\n\r\nul,li{\r\n  list-style:disc inside ;\r\n}\r\n\r\na{\r\n  text-decoration: none;\r\n  color: #0366d6;\r\n}\r\ntable{\r\n  border-collapse: collapse;\r\n}\r\ntable,td,th{\r\n  border: 1px solid #ccc;\r\n}\r\n\r\ntd,th{\r\n  padding: 4px 8px;\r\n}\r\n\r\n@media only screen and (max-width: 768px) {\r\n  html,body{\r\n\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  .content img{\r\n      width: 100%;\r\n  }\r\n\r\n\r\n  .content code[class*=\"language-\"],\r\n  .content pre[class*=\"language-\"] {\r\n      font-family: Consolas, \"Liberation Mono\", Courier, monospace;\r\n      line-height: 18px;\r\n      font-size: 13px;\r\n      margin:  0;\r\n      width: 100%;\r\n      -webkit-box-sizing: border-box;\r\n              box-sizing: border-box;\r\n  }\r\n\r\n  .content pre[class*=\"language-\"] {\r\n      padding-left: 10px;\r\n  }\r\n  .content p{\r\n      font-size: 14px;\r\n  }\r\n  .content p,.content h1,.content h2,.content h3,.content h4,.content h5{\r\n      padding-left:10px;\r\n      padding-right:10px;\r\n  }\r\n\r\n  .line-highlight:before, .line-highlight[data-end]:after{\r\n      top: 0em;\r\n  }\r\n}\r\n\r\n*{\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n}\r\n\r\npre code.hljs{\r\n  padding-left: 14px;\r\n  display: block;\r\n  overflow-x: auto;\r\n}\r\n\r\n.hljs{\r\n  font-size: 14px;\r\n}\r\n\r\ncode.hljs{\r\n  display: inline-block;\r\n  overflow-x: hidden;\r\n  text-indent: 0;\r\n  position: relative;\r\n  top: 8px;\r\n  background-color:rgba(27,31,35,.05); \r\n  border-radius: 3px;\r\n}\r\n\r\nblockquote::before{\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  top:11px;\r\n  background-color: #dfe2e5;\r\n  height: 24px;\r\n  width: 4px;\r\n}\r\n\r\nblockquote {\r\n  position: relative;\r\n  margin: 0;\r\n  padding-left: 20px; \r\n}\r\n\r\n._code-ctn code.hljs{\r\n  top: 2px;\r\n  background-color:transparent;\r\n  border-radius: 0px;\r\n}\r\n\r\n._code-ctn{\r\n  position: relative;\r\n  height: auto;\r\n  background-color: #282C34;\r\n  border-radius: 3px;\r\n  padding-top:1px;  \r\n  margin-top: 15px; \r\n  padding-bottom:1px; \r\n  line-height: 18px;\r\n  max-width: 900px;\r\n}\r\n\r\n._hl{\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  padding-top: 5px;\r\n  position: absolute;\r\n  top: -1px;\r\n  left: 0;\r\n  width: 100%;\r\n  line-height: 18px;\r\n\r\n}\r\n\r\n._hll{\r\n  background-color: rgb(72, 77, 87);\r\n  height: 18px;\r\n  width: 100%;\r\n\r\n}\r\n\r\n\r\n._code-ctn pre{\r\n  background: transparent;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n\r\n._code-ctn code{\r\n  background: transparent;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/assets/index.css"],"sourceRoot":""}
--- a/assets/md2site/static/js/0.de7771e5.chunk.js
+++ b/assets/md2site/static/js/0.de7771e5.chunk.js
@ -1,2 +0,0 @@
-webpackJsonp([0],{36:function(n,r){n.exports="## Other Docs\r\n\r\n### Markdown \u6269\u5c55\r\n\r\n\u4f60\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u8bed\u6cd5\u9ad8\u4eae\u4ee3\u7801\u5757\u4e2d\u7684\u67d0\u4e9b\u884c:\r\n\r\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\r\n\r\n\u8f93\u51fa:\r\n\r\n```js {4,20-24}\r\nimport { render, WeElement, define } from 'omi'\r\n\r\ndefine('my-counter', class extends WeElement {\r\n    static observe = true\r\n    \r\n    data = {\r\n      count: 1\r\n    }\r\n\r\n    sub = () => {\r\n      this.data.count--\r\n    }\r\n\r\n    add = () => {\r\n      this.data.count++\r\n    }\r\n\r\n    render() {\r\n      return (\r\n        <div>\r\n          <button onClick={this.sub}>-</button>\r\n          <span>{this.data.count}</span>\r\n          <button onClick={this.add}>+</button>\r\n        </div>\r\n      )\r\n    }\r\n})\r\n\r\nrender(<my-counter />, 'body')\r\n```"}});
-//# sourceMappingURL=0.de7771e5.chunk.js.map
--- a/assets/md2site/static/js/0.de7771e5.chunk.js.map
+++ b/assets/md2site/static/js/0.de7771e5.chunk.js.map
@ -1 +0,0 @@
-{"version":3,"sources":["../static/js/0.de7771e5.chunk.js","docs/zh-cn/other-docs.md"],"names":["webpackJsonp","36","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/0.de7771e5.chunk.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 36:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Other Docs\\r\\n\\r\\n### Markdown 扩展\\r\\n\\r\\n你可以通过下面的语法高亮代码块中的某些行:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\n输出:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n    static observe = true\\r\\n    \\r\\n    data = {\\r\\n      count: 1\\r\\n    }\\r\\n\\r\\n    sub = () => {\\r\\n      this.data.count--\\r\\n    }\\r\\n\\r\\n    add = () => {\\r\\n      this.data.count++\\r\\n    }\\r\\n\\r\\n    render() {\\r\\n      return (\\r\\n        <div>\\r\\n          <button onClick={this.sub}>-</button>\\r\\n          <span>{this.data.count}</span>\\r\\n          <button onClick={this.add}>+</button>\\r\\n        </div>\\r\\n      )\\r\\n    }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.de7771e5.chunk.js","module.exports = \"## Other Docs\\r\\n\\r\\n### Markdown 扩展\\r\\n\\r\\n你可以通过下面的语法高亮代码块中的某些行:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\n输出:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n    static observe = true\\r\\n    \\r\\n    data = {\\r\\n      count: 1\\r\\n    }\\r\\n\\r\\n    sub = () => {\\r\\n      this.data.count--\\r\\n    }\\r\\n\\r\\n    add = () => {\\r\\n      this.data.count++\\r\\n    }\\r\\n\\r\\n    render() {\\r\\n      return (\\r\\n        <div>\\r\\n          <button onClick={this.sub}>-</button>\\r\\n          <span>{this.data.count}</span>\\r\\n          <button onClick={this.add}>+</button>\\r\\n        </div>\\r\\n      )\\r\\n    }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/other-docs.md\n// module id = 36\n// module chunks = 0"],"sourceRoot":""}
--- a/assets/md2site/static/js/1.3d241617.chunk.js
+++ b/assets/md2site/static/js/1.3d241617.chunk.js
@ -1,2 +0,0 @@
-webpackJsonp([1],{35:function(n,r){n.exports="## \u7b80\u4ecb\r\n\r\nMd2site \u662f\u57fa\u4e8e [Omi](https://github.com/Tencent/omi) \u7684\u4e00\u6b3e Markdown \u8f6c\u7f51\u7ad9\u5de5\u5177\uff0c\u4f7f\u7528\u7b80\u5355\uff0c\u751f\u6210\u7684\u6587\u4ef6\u8f7b\u5de7\uff0c\u529f\u80fd\u5f3a\u5927\u3002\r\n\r\n## \u7279\u6027\r\n\r\n* \u5b8c\u6574 markdown \u8bed\u6cd5\u652f\u6301\r\n* \u4ee3\u7801\u9ad8\u4eae\uff0c\u7279\u5b9a\u884c\u9ad8\u4eae\r\n* \u591a\u8bed\u8a00\u652f\u6301\r\n* \u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0c\u624b\u673a\u9605\u8bfb\u4f53\u9a8c\u53cb\u597d\r\n* \u52a8\u6001\u52a0\u8f7d md \u6587\u4ef6\r\n* \u57fa\u4e8e [Omio framework](https://github.com/Tencent/omi/tree/master/packages/omio) \u548c [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)\uff0c\u517c\u5bb9 IE8+\r\n\r\n## \u5b89\u88c5\r\n\r\n``` bash {2}\r\nnpm i omi-cli -g           \r\nomi init-md2site my-app  \r\ncd my-app           \r\nnpm start               \r\nnpm run build            \r\n```\r\n\r\n> `npx omi-cli init-md2site my-app` (npm v5.2.0+ \u53ef\u4ee5\u4e00\u6761\u547d\u4ee4\u76f4\u63a5\u4f7f\u7528).\r\n\r\n\u6587\u4ef6\u76ee\u5f55\u63cf\u8ff0:\r\n\r\n```\r\n\u251c\u2500 config\r\n\u251c\u2500 public\r\n\u251c\u2500 scripts\r\n\u251c\u2500 src\r\n\u2502  \u251c\u2500 assets\r\n\u2502  \u251c\u2500 docs           //\u6587\u6863\u7684\u76ee\u5f55\r\n\u2502  \u2502   \u251c\u2500 en         //\u82f1\u6587\u6587\u6863\u76ee\u5f55\r\n\u2502  \u2502   \u251c\u2500 zh-cn      //\u7b80\u4f53\u4e2d\u6587\u76ee\u5f55\r\n\u2502  \u2502   \u2514\u2500 config.js  //\u914d\u7f6e\r\n\u2502  \u251c\u2500 elements       //\u6240\u6709\u7ec4\u4ef6\r\n\u2502  \u251c\u2500 store          \r\n\u2502  \u251c\u2500 index.js       //\u7f16\u8bd1\u7684\u5165\u53e3\uff0c\u5bf9\u5e94\u7f16\u8bd1\u6210 index.html\r\n\u2502  \u2514\u2500 zh-cn.js       //\u7f16\u8bd1\u7684\u5165\u53e3\uff0c\u5bf9\u5e94\u7f16\u8bd1\u6210 zh-cn.html\r\n```\r\n\r\n### \u8868\u683c\u6d4b\u8bd5\r\n\r\n|    | Hexo        | Md2site  |\r\n| ------------- |:-------------:|:-----:|\r\n| Markdown \u652f\u6301 | \u2605\u2605\u2605\u2605\u2605| \u2605\u2605\u2605\u2605\u2605 |\r\n| \u8f93\u51fa\u6587\u4ef6\u5c3a\u5bf8 | \u2605\u2605\u2605\u2606\u2606   |   \u2605\u2605\u2605\u2606\u2606 |\r\n| \u4e0a\u624b\u96be\u5ea6  | \u2605\u2605\u2605\u2606\u2606| \u2605\u2605\u2605\u2606\u2606 |\r\n| \u4e8c\u6b21\u5f00\u53d1 | \u2605\u2605\u2605\u2605\u2606     |   \u2605\u2605\u2605\u2605\u2606 |\r\n| \u4e3b\u9898\u548c\u63d2\u4ef6  | \u2605\u2605\u2605\u2605\u2606     |   \u2605\u2605\u2605\u2605\u2606 |\r\n| \u4ee3\u7801\u9ad8\u4eae | \u2605\u2605\u2605\u2605\u2606    |   \u2605\u2605\u2605\u2605\u2606 |\r\n| \u56fd\u9645\u5316 | \u2605\u2605\u2605\u2605\u2606    |   \u2605\u2605\u2605\u2605\u2606 |\r\n| \u54cd\u5e94\u5f0f | \u2605\u2605\u2605\u2605\u2605    |   \u2605\u2605\u2605\u2605\u2605 |"}});
-//# sourceMappingURL=1.3d241617.chunk.js.map
--- a/assets/md2site/static/js/1.3d241617.chunk.js.map
+++ b/assets/md2site/static/js/1.3d241617.chunk.js.map
@ -1 +0,0 @@
-{"version":3,"sources":["../static/js/1.3d241617.chunk.js","docs/zh-cn/introduction.md"],"names":["webpackJsonp","35","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/1.3d241617.chunk.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 35:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## 简介\\r\\n\\r\\nMd2site 是基于 [Omi](https://github.com/Tencent/omi) 的一款 Markdown 转网站工具，使用简单，生成的文件轻巧，功能强大。\\r\\n\\r\\n## 特性\\r\\n\\r\\n* 完整 markdown 语法支持\\r\\n* 代码高亮，特定行高亮\\r\\n* 多语言支持\\r\\n* 响应式设计，手机阅读体验友好\\r\\n* 动态加载 md 文件\\r\\n* 基于 [Omio framework](https://github.com/Tencent/omi/tree/master/packages/omio) 和 [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)，兼容 IE8+\\r\\n\\r\\n## 安装\\r\\n\\r\\n``` bash {2}\\r\\nnpm i omi-cli -g           \\r\\nomi init-md2site my-app  \\r\\ncd my-app           \\r\\nnpm start               \\r\\nnpm run build            \\r\\n```\\r\\n\\r\\n> `npx omi-cli init-md2site my-app` (npm v5.2.0+ 可以一条命令直接使用).\\r\\n\\r\\n文件目录描述:\\r\\n\\r\\n```\\r\\n├─ config\\r\\n├─ public\\r\\n├─ scripts\\r\\n├─ src\\r\\n│  ├─ assets\\r\\n│  ├─ docs           //文档的目录\\r\\n│  │   ├─ en         //英文文档目录\\r\\n│  │   ├─ zh-cn      //简体中文目录\\r\\n│  │   └─ config.js  //配置\\r\\n│  ├─ elements       //所有组件\\r\\n│  ├─ store          \\r\\n│  ├─ index.js       //编译的入口，对应编译成 index.html\\r\\n│  └─ zh-cn.js       //编译的入口，对应编译成 zh-cn.html\\r\\n```\\r\\n\\r\\n### 表格测试\\r\\n\\r\\n|    | Hexo        | Md2site  |\\r\\n| ------------- |:-------------:|:-----:|\\r\\n| Markdown 支持 | ★★★★★| ★★★★★ |\\r\\n| 输出文件尺寸 | ★★★☆☆   |   ★★★☆☆ |\\r\\n| 上手难度  | ★★★☆☆| ★★★☆☆ |\\r\\n| 二次开发 | ★★★★☆     |   ★★★★☆ |\\r\\n| 主题和插件  | ★★★★☆     |   ★★★★☆ |\\r\\n| 代码高亮 | ★★★★☆    |   ★★★★☆ |\\r\\n| 国际化 | ★★★★☆    |   ★★★★☆ |\\r\\n| 响应式 | ★★★★★    |   ★★★★★ |\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/1.3d241617.chunk.js","module.exports = \"## 简介\\r\\n\\r\\nMd2site 是基于 [Omi](https://github.com/Tencent/omi) 的一款 Markdown 转网站工具，使用简单，生成的文件轻巧，功能强大。\\r\\n\\r\\n## 特性\\r\\n\\r\\n* 完整 markdown 语法支持\\r\\n* 代码高亮，特定行高亮\\r\\n* 多语言支持\\r\\n* 响应式设计，手机阅读体验友好\\r\\n* 动态加载 md 文件\\r\\n* 基于 [Omio framework](https://github.com/Tencent/omi/tree/master/packages/omio) 和 [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)，兼容 IE8+\\r\\n\\r\\n## 安装\\r\\n\\r\\n``` bash {2}\\r\\nnpm i omi-cli -g           \\r\\nomi init-md2site my-app  \\r\\ncd my-app           \\r\\nnpm start               \\r\\nnpm run build            \\r\\n```\\r\\n\\r\\n> `npx omi-cli init-md2site my-app` (npm v5.2.0+ 可以一条命令直接使用).\\r\\n\\r\\n文件目录描述:\\r\\n\\r\\n```\\r\\n├─ config\\r\\n├─ public\\r\\n├─ scripts\\r\\n├─ src\\r\\n│  ├─ assets\\r\\n│  ├─ docs           //文档的目录\\r\\n│  │   ├─ en         //英文文档目录\\r\\n│  │   ├─ zh-cn      //简体中文目录\\r\\n│  │   └─ config.js  //配置\\r\\n│  ├─ elements       //所有组件\\r\\n│  ├─ store          \\r\\n│  ├─ index.js       //编译的入口，对应编译成 index.html\\r\\n│  └─ zh-cn.js       //编译的入口，对应编译成 zh-cn.html\\r\\n```\\r\\n\\r\\n### 表格测试\\r\\n\\r\\n|    | Hexo        | Md2site  |\\r\\n| ------------- |:-------------:|:-----:|\\r\\n| Markdown 支持 | ★★★★★| ★★★★★ |\\r\\n| 输出文件尺寸 | ★★★☆☆   |   ★★★☆☆ |\\r\\n| 上手难度  | ★★★☆☆| ★★★☆☆ |\\r\\n| 二次开发 | ★★★★☆     |   ★★★★☆ |\\r\\n| 主题和插件  | ★★★★☆     |   ★★★★☆ |\\r\\n| 代码高亮 | ★★★★☆    |   ★★★★☆ |\\r\\n| 国际化 | ★★★★☆    |   ★★★★☆ |\\r\\n| 响应式 | ★★★★★    |   ★★★★★ |\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/introduction.md\n// module id = 35\n// module chunks = 1"],"sourceRoot":""}
--- a/assets/md2site/static/js/2.916a2d79.chunk.js
+++ b/assets/md2site/static/js/2.916a2d79.chunk.js
@ -1,2 +0,0 @@
-webpackJsonp([2],{34:function(n,r){n.exports="## \u914d\u7f6e\r\n\r\n```js\r\nconst config = {\r\n  lan: 'en',\r\n  menus: {\r\n    cn: [\r\n      {\r\n        title: '\u5feb\u901f\u5f00\u59cb',\r\n        list: [\r\n          { name: '\u5b89\u88c5', md: 'installation' },\r\n          { name: '\u914d\u7f6e', md: 'config' }\r\n        ]\r\n      },\r\n      {\r\n        title: '\u5176\u4ed6\u7248\u5757',\r\n        list: [\r\n          { name: '\u6d4b\u8bd5\u5176\u4ed6', md: 'other-docs' }\r\n        ]\r\n      }\r\n    ],\r\n    en: [\r\n      {\r\n        title: 'QUICK START',\r\n        list: [\r\n          { name: 'Introduction', md: 'introduction' },\r\n          { name: 'Config', md: 'config' }\r\n        ]\r\n      },\r\n      {\r\n        title: 'Other',\r\n        list: [\r\n          { name: 'Other Docs', md: 'other-docs' }\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}\r\n\r\nexport default config\r\n```"}});
-//# sourceMappingURL=2.916a2d79.chunk.js.map
--- a/assets/md2site/static/js/2.916a2d79.chunk.js.map
+++ b/assets/md2site/static/js/2.916a2d79.chunk.js.map
@ -1 +0,0 @@
-{"version":3,"sources":["../static/js/2.916a2d79.chunk.js","docs/zh-cn/config.md"],"names":["webpackJsonp","34","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/2.916a2d79.chunk.js","sourcesContent":["webpackJsonp([2],{\n\n/***/ 34:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## 配置\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n  lan: 'en',\\r\\n  menus: {\\r\\n    cn: [\\r\\n      {\\r\\n        title: '快速开始',\\r\\n        list: [\\r\\n          { name: '安装', md: 'installation' },\\r\\n          { name: '配置', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: '其他版块',\\r\\n        list: [\\r\\n          { name: '测试其他', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ],\\r\\n    en: [\\r\\n      {\\r\\n        title: 'QUICK START',\\r\\n        list: [\\r\\n          { name: 'Introduction', md: 'introduction' },\\r\\n          { name: 'Config', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: 'Other',\\r\\n        list: [\\r\\n          { name: 'Other Docs', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ]\\r\\n  }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/2.916a2d79.chunk.js","module.exports = \"## 配置\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n  lan: 'en',\\r\\n  menus: {\\r\\n    cn: [\\r\\n      {\\r\\n        title: '快速开始',\\r\\n        list: [\\r\\n          { name: '安装', md: 'installation' },\\r\\n          { name: '配置', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: '其他版块',\\r\\n        list: [\\r\\n          { name: '测试其他', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ],\\r\\n    en: [\\r\\n      {\\r\\n        title: 'QUICK START',\\r\\n        list: [\\r\\n          { name: 'Introduction', md: 'introduction' },\\r\\n          { name: 'Config', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: 'Other',\\r\\n        list: [\\r\\n          { name: 'Other Docs', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ]\\r\\n  }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/config.md\n// module id = 34\n// module chunks = 2"],"sourceRoot":""}
--- a/assets/md2site/static/js/3.76509d8c.chunk.js
+++ b/assets/md2site/static/js/3.76509d8c.chunk.js
@ -1,2 +0,0 @@
-webpackJsonp([3],{33:function(n,r){n.exports="## Other Docs\r\n\r\n### Markdown Extensions\r\n\r\nYou can highlight some lines in the code block through the following syntax.\r\n\r\nInput:\r\n\r\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\r\n\r\nOutput:\r\n\r\n```js {4,20-24}\r\nimport { render, WeElement, define } from 'omi'\r\n\r\ndefine('my-counter', class extends WeElement {\r\n    static observe = true\r\n    \r\n    data = {\r\n      count: 1\r\n    }\r\n\r\n    sub = () => {\r\n      this.data.count--\r\n    }\r\n\r\n    add = () => {\r\n      this.data.count++\r\n    }\r\n\r\n    render() {\r\n      return (\r\n        <div>\r\n          <button onClick={this.sub}>-</button>\r\n          <span>{this.data.count}</span>\r\n          <button onClick={this.add}>+</button>\r\n        </div>\r\n      )\r\n    }\r\n})\r\n\r\nrender(<my-counter />, 'body')\r\n```"}});
-//# sourceMappingURL=3.76509d8c.chunk.js.map
--- a/assets/md2site/static/js/3.76509d8c.chunk.js.map
+++ b/assets/md2site/static/js/3.76509d8c.chunk.js.map
@ -1 +0,0 @@
-{"version":3,"sources":["../static/js/3.76509d8c.chunk.js","docs/en/other-docs.md"],"names":["webpackJsonp","33","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/3.76509d8c.chunk.js","sourcesContent":["webpackJsonp([3],{\n\n/***/ 33:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Other Docs\\r\\n\\r\\n### Markdown Extensions\\r\\n\\r\\nYou can highlight some lines in the code block through the following syntax.\\r\\n\\r\\nInput:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\nOutput:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n    static observe = true\\r\\n    \\r\\n    data = {\\r\\n      count: 1\\r\\n    }\\r\\n\\r\\n    sub = () => {\\r\\n      this.data.count--\\r\\n    }\\r\\n\\r\\n    add = () => {\\r\\n      this.data.count++\\r\\n    }\\r\\n\\r\\n    render() {\\r\\n      return (\\r\\n        <div>\\r\\n          <button onClick={this.sub}>-</button>\\r\\n          <span>{this.data.count}</span>\\r\\n          <button onClick={this.add}>+</button>\\r\\n        </div>\\r\\n      )\\r\\n    }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/3.76509d8c.chunk.js","module.exports = \"## Other Docs\\r\\n\\r\\n### Markdown Extensions\\r\\n\\r\\nYou can highlight some lines in the code block through the following syntax.\\r\\n\\r\\nInput:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\nOutput:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n    static observe = true\\r\\n    \\r\\n    data = {\\r\\n      count: 1\\r\\n    }\\r\\n\\r\\n    sub = () => {\\r\\n      this.data.count--\\r\\n    }\\r\\n\\r\\n    add = () => {\\r\\n      this.data.count++\\r\\n    }\\r\\n\\r\\n    render() {\\r\\n      return (\\r\\n        <div>\\r\\n          <button onClick={this.sub}>-</button>\\r\\n          <span>{this.data.count}</span>\\r\\n          <button onClick={this.add}>+</button>\\r\\n        </div>\\r\\n      )\\r\\n    }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/other-docs.md\n// module id = 33\n// module chunks = 3"],"sourceRoot":""}
--- a/assets/md2site/static/js/4.466db21e.chunk.js
+++ b/assets/md2site/static/js/4.466db21e.chunk.js
@ -1,2 +0,0 @@
-webpackJsonp([4],{32:function(n,r){n.exports="## Introduction \r\n\r\nMd2site is a fast, simple & powerful tool that can be used for transformation of markdown to website powered by [Omi framework](https://github.com/Tencent/omi).\r\n\r\n## Features\r\n\r\n* Complete markdown syntax support\r\n* Line Highlighting of code block with Simple syntax\r\n* Multi-Language Support\r\n* Responsive design\r\n* Dynamic loading of MD files\r\n* Based on [Omio framework](https://github.com/Tencent/omi/tree/master/packages/omio) and [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)\r\n\r\n## Usage\r\n\r\n``` bash {2}\r\nnpm i omi-cli -g           \r\nomi init-md2site my-app  \r\ncd my-app           \r\nnpm start               \r\nnpm run build            \r\n```\r\n\r\n> `npx omi-cli init-md2site my-app` is also supported(npm v5.2.0+).\r\n\r\nDirectory description:\r\n\r\n```\r\n\u251c\u2500 config\r\n\u251c\u2500 public\r\n\u251c\u2500 scripts\r\n\u251c\u2500 src\r\n\u2502  \u251c\u2500 assets\r\n\u2502  \u251c\u2500 docs           //Store all your md of docs \r\n\u2502  \u2502   \u251c\u2500 en         //Store all your md of docs \r\n\u2502  \u2502   \u251c\u2500 zh-cn      //Store all your md of docs \r\n\u2502  \u2502   \u2514\u2500 config.js  //Config of your app\r\n\u2502  \u251c\u2500 elements       //Store all custom elements\r\n\u2502  \u251c\u2500 store          //Store all this store of pages\r\n\u2502  \u251c\u2500 index.js       //Entry js of compiler\uff0cwill build to index.html\r\n\u2502  \u2514\u2500 zh-cn.js       //Entry js of compiler\uff0cwill build to zh-cn.html\r\n```\r\n\r\n\r\n### Table Test\r\n\r\n|    | Hexo        | Md2site  |\r\n| ------------- |:-------------:|:-----:|\r\n| Markdown support | \u2605\u2605\u2605\u2605\u2605| \u2605\u2605\u2605\u2605\u2605 |\r\n| File size of generated website | \u2605\u2605\u2605\u2606\u2606   |   \u2605\u2605\u2605\u2606\u2606 |\r\n| Difficulty of getting started  | \u2605\u2605\u2605\u2606\u2606| \u2605\u2605\u2605\u2606\u2606 |\r\n|  Secondary development | \u2605\u2605\u2605\u2605\u2606     |   \u2605\u2605\u2605\u2605\u2606 |\r\n| Themes and plugins  | \u2605\u2605\u2605\u2605\u2606     |   \u2605\u2605\u2605\u2605\u2606 |\r\n| Code highlight | \u2605\u2605\u2605\u2605\u2606    |   \u2605\u2605\u2605\u2605\u2606 |\r\n| Multi language support | \u2605\u2605\u2605\u2605\u2606    |   \u2605\u2605\u2605\u2605\u2606 |\r\n| Responsive | \u2605\u2605\u2605\u2605\u2605    |   \u2605\u2605\u2605\u2605\u2605 |"}});
-//# sourceMappingURL=4.466db21e.chunk.js.map
--- a/assets/md2site/static/js/4.466db21e.chunk.js.map
+++ b/assets/md2site/static/js/4.466db21e.chunk.js.map
--- a/assets/md2site/static/js/5.499a3d67.chunk.js
+++ b/assets/md2site/static/js/5.499a3d67.chunk.js
@ -1,2 +0,0 @@
-webpackJsonp([5],{31:function(n,r){n.exports="## Config\r\n\r\n```js\r\nconst config = {\r\n  lan: 'en',\r\n  menus: {\r\n    cn: [\r\n      {\r\n        title: '\u5feb\u901f\u5f00\u59cb',\r\n        list: [\r\n          { name: '\u5b89\u88c5', md: 'installation' },\r\n          { name: '\u914d\u7f6e', md: 'config' }\r\n        ]\r\n      },\r\n      {\r\n        title: '\u5176\u4ed6\u7248\u5757',\r\n        list: [\r\n          { name: '\u6d4b\u8bd5\u5176\u4ed6', md: 'other-docs' }\r\n        ]\r\n      }\r\n    ],\r\n    en: [\r\n      {\r\n        title: 'QUICK START',\r\n        list: [\r\n          { name: 'Introduction', md: 'introduction' },\r\n          { name: 'Config', md: 'config' }\r\n        ]\r\n      },\r\n      {\r\n        title: 'Other',\r\n        list: [\r\n          { name: 'Other Docs', md: 'other-docs' }\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}\r\n\r\nexport default config\r\n```"}});
-//# sourceMappingURL=5.499a3d67.chunk.js.map
--- a/assets/md2site/static/js/5.499a3d67.chunk.js.map
+++ b/assets/md2site/static/js/5.499a3d67.chunk.js.map
@ -1 +0,0 @@
-{"version":3,"sources":["../static/js/5.499a3d67.chunk.js","docs/en/config.md"],"names":["webpackJsonp","31","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/5.499a3d67.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/***/ 31:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Config\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n  lan: 'en',\\r\\n  menus: {\\r\\n    cn: [\\r\\n      {\\r\\n        title: '快速开始',\\r\\n        list: [\\r\\n          { name: '安装', md: 'installation' },\\r\\n          { name: '配置', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: '其他版块',\\r\\n        list: [\\r\\n          { name: '测试其他', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ],\\r\\n    en: [\\r\\n      {\\r\\n        title: 'QUICK START',\\r\\n        list: [\\r\\n          { name: 'Introduction', md: 'introduction' },\\r\\n          { name: 'Config', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: 'Other',\\r\\n        list: [\\r\\n          { name: 'Other Docs', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ]\\r\\n  }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/5.499a3d67.chunk.js","module.exports = \"## Config\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n  lan: 'en',\\r\\n  menus: {\\r\\n    cn: [\\r\\n      {\\r\\n        title: '快速开始',\\r\\n        list: [\\r\\n          { name: '安装', md: 'installation' },\\r\\n          { name: '配置', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: '其他版块',\\r\\n        list: [\\r\\n          { name: '测试其他', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ],\\r\\n    en: [\\r\\n      {\\r\\n        title: 'QUICK START',\\r\\n        list: [\\r\\n          { name: 'Introduction', md: 'introduction' },\\r\\n          { name: 'Config', md: 'config' }\\r\\n        ]\\r\\n      },\\r\\n      {\\r\\n        title: 'Other',\\r\\n        list: [\\r\\n          { name: 'Other Docs', md: 'other-docs' }\\r\\n        ]\\r\\n      }\\r\\n    ]\\r\\n  }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/config.md\n// module id = 31\n// module chunks = 5"],"sourceRoot":""}
--- a/assets/md2site/static/js/index.13b914c0.js
+++ b/assets/md2site/static/js/index.13b914c0.js
--- a/assets/md2site/static/js/index.13b914c0.js.map
+++ b/assets/md2site/static/js/index.13b914c0.js.map
--- a/assets/md2site/static/js/zh-cn.0f628f3b.js
+++ b/assets/md2site/static/js/zh-cn.0f628f3b.js
--- a/assets/md2site/static/js/zh-cn.0f628f3b.js.map
+++ b/assets/md2site/static/js/zh-cn.0f628f3b.js.map
--- a/assets/md2site/static/media/omi-logo.979f9173.svg
+++ b/assets/md2site/static/media/omi-logo.979f9173.svg
@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="544px" height="544px" viewBox="0 0 544 544" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>OMI</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="white" offset="0%"></stop>
-            <stop stop-color="white" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="white" offset="0%"></stop>
-            <stop stop-color="white" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
-            <stop stop-color="white" offset="0%"></stop>
-            <stop stop-color="white" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="OMI" transform="translate(-72 -72) scale(1.3, 1.3)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path   transform="translate(28 30) scale(0.9, 0.9)" d="M360.461194,392.400665 L331.766299,363.852923 C362.137315,342.610697 382,307.374938 382,267.5 C382,242.280821 374.054892,218.917322 360.531177,199.776002 L264.653589,295.653589 L249.205844,280.205844 L249.063708,280.34798 L168.478308,199.762579 C154.948823,218.906399 147,242.274926 147,267.5 C147,307.374938 166.862685,342.610697 197.233701,363.852923 L168.538806,392.400665 C131.116001,363.605836 107,318.369215 107,267.5 C107,216.869975 130.889745,171.819699 168.011797,143.006609 L222.432893,197.148622 L264.511454,239.227182 L311.034034,192.704602 L360.988203,143.006609 C398.110255,171.819699 422,216.869975 422,267.5 C422,318.369215 397.883999,363.605836 360.461194,392.400665 Z" id="M" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
-        <path d="M264.5,472 C149.900914,472 57,379.099086 57,264.5 C57,149.900914 149.900914,57 264.5,57 C379.099086,57 472,149.900914 472,264.5 C472,379.099086 379.099086,472 264.5,472 Z M263.5,436 C357.112265,436 433,360.112265 433,266.5 C433,172.887735 357.112265,97 263.5,97 C169.887735,97 94,172.887735 94,266.5 C94,360.112265 169.887735,436 263.5,436 Z" id="O" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
-        <circle id="I-Dot" fill="url(#linearGradient-3)" fill-rule="nonzero" cx="319" cy="142" r="20"></circle>
-    </g>
-</svg>
--- a/assets/md2site/zh-cn.html
+++ b/assets/md2site/zh-cn.html
@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/dracula.css"><title>Omi</title><link href="./static/css/zh-cn.7fd94fa3.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/highlight.pack.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/zh-cn.0f628f3b.js"></script></body></html>
--- a/assets/mobile.jpg
+++ b/assets/mobile.jpg
--- a/assets/mp-jsx.gif
+++ b/assets/mp-jsx.gif
--- a/assets/mp-jsx.jpg
+++ b/assets/mp-jsx.jpg
--- a/assets/mp-mvvm3.jpg
+++ b/assets/mp-mvvm3.jpg
--- a/assets/mp.png
+++ b/assets/mp.png
--- a/assets/mps.gif
+++ b/assets/mps.gif
--- a/assets/mps.png
+++ b/assets/mps.png
--- a/assets/mvc-mvp-mvvm.png
+++ b/assets/mvc-mvp-mvvm.png
--- a/assets/mvx.png
+++ b/assets/mvx.png
--- a/assets/oc.jpg
+++ b/assets/oc.jpg
--- a/assets/omi-cloud-db-todo.jpg
+++ b/assets/omi-cloud-db-todo.jpg
--- a/assets/omi-cloud-db.jpg
+++ b/assets/omi-cloud-db.jpg
--- a/assets/omi-cloud-list.jpg
+++ b/assets/omi-cloud-list.jpg
--- a/assets/omi-cloud.jpg
+++ b/assets/omi-cloud.jpg
--- a/assets/omi-html.html
+++ b/assets/omi-html.html
@ -4,55 +4,46 @@
 <head>
 	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 	<meta charset="UTF-8" />
-	<title>Omi</title>
+	<title>Using omi-html</title>
 </head>

 <body>
 	<script src="https://unpkg.com/omi"></script>
+	<script src="https://unpkg.com/omi-html"></script>
 	<script>
-		const {
-			define,
-			render,
-			h
-		} = Omi
+		const { define, WeElement, render } = Omi

-		class Store {
-			data = {
-				count: 1
+		define('my-counter', class extends WeElement {
+
+			install() {
+				this.constructor.observe = true
+				this.data.count = 1
+				this.sub = this.sub.bind(this)
+				this.add = this.add.bind(this)
 			}
-			sub = () => {
+
+			sub() {
 				this.data.count--
 			}
-			add = () => {
+
+			add() {
 				this.data.count++
 			}
-		}

-		define('my-counter', _ => (
-			h(h.f, null,
-				h('button', {
-					onClick: _.store.sub
-				}, '-'),
-				h('span', null, _.store.data.count),
-				h('button', {
-					onClick: _.store.add
-				}, '+')
-			)
-		), {
-			use: ['count'],
-			//or using useSelf, useSelf will update self only, exclude children components
-			//useSelf: ['count'],
-			css: `span { color: red; }`,
-			installed() {
-				console.log('installed')
-			}
+			render() {
+				return html`
+					<div>
+						<button onClick=${this.sub}>-</button>
+						<span>${this.data.count}</span>
+						<button onClick=${this.add}>+</button>
+					</div>
+					`}
 		})

-		render(h('my-counter'), 'body', new Store)
-
+		render(html`<my-counter />`, 'body')
 	</script>

-	<a href="https://github.com/Tencent/omi/" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
+	<a href="https://github.com/Tencent/omi/tree/master/packages/omi-html" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
 		<img src="//alloyteam.github.io/github.png" alt="">
 	</a>
 </body>
--- a/assets/omi-in-out.jpg
+++ b/assets/omi-in-out.jpg
--- a/assets/omi-inside-outside.jpg
+++ b/assets/omi-inside-outside.jpg
--- a/assets/omi-logo-140.png
+++ b/assets/omi-logo-140.png
--- a/assets/omi-logo.new.svg
+++ b/assets/omi-logo.new.svg
@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="544px" height="544px" viewBox="0 0 544 544" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>OMI</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#F09E9D" offset="0%"></stop>
-            <stop stop-color="#F95050" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#07C160" offset="0%"></stop>
-            <stop stop-color="#9CE6BF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="70%" id="linearGradient-3">
-            <stop stop-color="#07C160" offset="0%"></stop>
-            <stop stop-color="#F09E9D" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="OMI" transform="translate(-72 -72) scale(1.3, 1.3)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path   transform="translate(28 30) scale(0.9, 0.9)" d="M360.461194,392.400665 L331.766299,363.852923 C362.137315,342.610697 382,307.374938 382,267.5 C382,242.280821 374.054892,218.917322 360.531177,199.776002 L264.653589,295.653589 L249.205844,280.205844 L249.063708,280.34798 L168.478308,199.762579 C154.948823,218.906399 147,242.274926 147,267.5 C147,307.374938 166.862685,342.610697 197.233701,363.852923 L168.538806,392.400665 C131.116001,363.605836 107,318.369215 107,267.5 C107,216.869975 130.889745,171.819699 168.011797,143.006609 L222.432893,197.148622 L264.511454,239.227182 L311.034034,192.704602 L360.988203,143.006609 C398.110255,171.819699 422,216.869975 422,267.5 C422,318.369215 397.883999,363.605836 360.461194,392.400665 Z" id="M" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
-        <path d="M264.5,472 C149.900914,472 57,379.099086 57,264.5 C57,149.900914 149.900914,57 264.5,57 C379.099086,57 472,149.900914 472,264.5 C472,379.099086 379.099086,472 264.5,472 Z M263.5,436 C357.112265,436 433,360.112265 433,266.5 C433,172.887735 357.112265,97 263.5,97 C169.887735,97 94,172.887735 94,266.5 C94,360.112265 169.887735,436 263.5,436 Z" id="O" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
-        <circle id="I-Dot" fill="url(#linearGradient-3)" fill-rule="nonzero" cx="319" cy="142" r="20"></circle>
-    </g>
-</svg>
--- a/assets/omi-logo.old.svg
+++ b/assets/omi-logo.old.svg
@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="544px" height="544px" viewBox="0 0 544 544" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>OMI</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#FFD4DE" offset="0%"></stop>
-            <stop stop-color="#D0021B" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#00375E" offset="0%"></stop>
-            <stop stop-color="#9ECAFD" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
-            <stop stop-color="#B4EC51" offset="0%"></stop>
-            <stop stop-color="#429321" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="OMI" transform="translate(-72 -72) scale(1.3, 1.3)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path   transform="translate(28 30) scale(0.9, 0.9)" d="M360.461194,392.400665 L331.766299,363.852923 C362.137315,342.610697 382,307.374938 382,267.5 C382,242.280821 374.054892,218.917322 360.531177,199.776002 L264.653589,295.653589 L249.205844,280.205844 L249.063708,280.34798 L168.478308,199.762579 C154.948823,218.906399 147,242.274926 147,267.5 C147,307.374938 166.862685,342.610697 197.233701,363.852923 L168.538806,392.400665 C131.116001,363.605836 107,318.369215 107,267.5 C107,216.869975 130.889745,171.819699 168.011797,143.006609 L222.432893,197.148622 L264.511454,239.227182 L311.034034,192.704602 L360.988203,143.006609 C398.110255,171.819699 422,216.869975 422,267.5 C422,318.369215 397.883999,363.605836 360.461194,392.400665 Z" id="M" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
-        <path d="M264.5,472 C149.900914,472 57,379.099086 57,264.5 C57,149.900914 149.900914,57 264.5,57 C379.099086,57 472,149.900914 472,264.5 C472,379.099086 379.099086,472 264.5,472 Z M263.5,436 C357.112265,436 433,360.112265 433,266.5 C433,172.887735 357.112265,97 263.5,97 C169.887735,97 94,172.887735 94,266.5 C94,360.112265 169.887735,436 263.5,436 Z" id="O" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
-        <circle id="I-Dot" fill="url(#linearGradient-3)" fill-rule="nonzero" cx="319" cy="142" r="20"></circle>
-    </g>
-</svg>
--- a/assets/omi-logo.svg
+++ b/assets/omi-logo.svg
@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="544px" height="544px" viewBox="0 0 544 544" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="529px" height="529px" viewBox="0 0 529 529" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
    <title>OMI</title>
    <desc>Created with Sketch.</desc>
@ -17,8 +17,8 @@
            <stop stop-color="#429321" offset="100%"></stop>
        </linearGradient>
    </defs>
-    <g id="OMI" transform="translate(-72 -72) scale(1.3, 1.3)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path   transform="translate(28 30) scale(0.9, 0.9)" d="M360.461194,392.400665 L331.766299,363.852923 C362.137315,342.610697 382,307.374938 382,267.5 C382,242.280821 374.054892,218.917322 360.531177,199.776002 L264.653589,295.653589 L249.205844,280.205844 L249.063708,280.34798 L168.478308,199.762579 C154.948823,218.906399 147,242.274926 147,267.5 C147,307.374938 166.862685,342.610697 197.233701,363.852923 L168.538806,392.400665 C131.116001,363.605836 107,318.369215 107,267.5 C107,216.869975 130.889745,171.819699 168.011797,143.006609 L222.432893,197.148622 L264.511454,239.227182 L311.034034,192.704602 L360.988203,143.006609 C398.110255,171.819699 422,216.869975 422,267.5 C422,318.369215 397.883999,363.605836 360.461194,392.400665 Z" id="M" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+    <g id="OMI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M360.461194,392.400665 L331.766299,363.852923 C362.137315,342.610697 382,307.374938 382,267.5 C382,242.280821 374.054892,218.917322 360.531177,199.776002 L264.653589,295.653589 L249.205844,280.205844 L249.063708,280.34798 L168.478308,199.762579 C154.948823,218.906399 147,242.274926 147,267.5 C147,307.374938 166.862685,342.610697 197.233701,363.852923 L168.538806,392.400665 C131.116001,363.605836 107,318.369215 107,267.5 C107,216.869975 130.889745,171.819699 168.011797,143.006609 L222.432893,197.148622 L264.511454,239.227182 L311.034034,192.704602 L360.988203,143.006609 C398.110255,171.819699 422,216.869975 422,267.5 C422,318.369215 397.883999,363.605836 360.461194,392.400665 Z" id="M" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
        <path d="M264.5,472 C149.900914,472 57,379.099086 57,264.5 C57,149.900914 149.900914,57 264.5,57 C379.099086,57 472,149.900914 472,264.5 C472,379.099086 379.099086,472 264.5,472 Z M263.5,436 C357.112265,436 433,360.112265 433,266.5 C433,172.887735 357.112265,97 263.5,97 C169.887735,97 94,172.887735 94,266.5 C94,360.112265 169.887735,436 263.5,436 Z" id="O" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
        <circle id="I-Dot" fill="url(#linearGradient-3)" fill-rule="nonzero" cx="319" cy="142" r="20"></circle>
    </g>
--- a/assets/omi-logo2.svg
+++ b/assets/omi-logo2.svg
@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="529px" height="529px" viewBox="0 0 529 529" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>OMI</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#FF661F" offset="0%"></stop>
-            <stop stop-color="#0053DB" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#FF661F" offset="0%"></stop>
-            <stop stop-color="#0053DB" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
-            <stop stop-color="#FF661F" offset="0%"></stop>
-            <stop stop-color="#FF661F" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="OMI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path   transform="translate(28 30) scale(0.9, 0.9)" d="M360.461194,392.400665 L331.766299,363.852923 C362.137315,342.610697 382,307.374938 382,267.5 C382,242.280821 374.054892,218.917322 360.531177,199.776002 L264.653589,295.653589 L249.205844,280.205844 L249.063708,280.34798 L168.478308,199.762579 C154.948823,218.906399 147,242.274926 147,267.5 C147,307.374938 166.862685,342.610697 197.233701,363.852923 L168.538806,392.400665 C131.116001,363.605836 107,318.369215 107,267.5 C107,216.869975 130.889745,171.819699 168.011797,143.006609 L222.432893,197.148622 L264.511454,239.227182 L311.034034,192.704602 L360.988203,143.006609 C398.110255,171.819699 422,216.869975 422,267.5 C422,318.369215 397.883999,363.605836 360.461194,392.400665 Z" id="M" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
-        <path d="M264.5,472 C149.900914,472 57,379.099086 57,264.5 C57,149.900914 149.900914,57 264.5,57 C379.099086,57 472,149.900914 472,264.5 C472,379.099086 379.099086,472 264.5,472 Z M263.5,436 C357.112265,436 433,360.112265 433,266.5 C433,172.887735 357.112265,97 263.5,97 C169.887735,97 94,172.887735 94,266.5 C94,360.112265 169.887735,436 263.5,436 Z" id="O" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
-        <circle id="I-Dot" fill="url(#linearGradient-3)" fill-rule="nonzero" cx="319" cy="142" r="20"></circle>
-    </g>
-</svg>
--- a/assets/omi-logo2019.svg
+++ b/assets/omi-logo2019.svg
@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Creator: CorelDRAW 2017 -->
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
-viewBox="0 0 1024 1024"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
-  <style type="text/css">
-   <![CDATA[
-    .fil0 {fill:none}
-    .fil2 {fill:#FEFEFE}
-    .fil1 {fill:#07C160}
-   ]]>
-  </style>
- </defs>
- <g id="图层_x0020_1">
-  <metadata id="CorelCorpID_0Corel-Layer"/>
-  <rect class="fil0" width="1024" height="1024"/>
-  <rect class="fil0" width="1024" height="1024"/>
-  <g id="_2225049615792">
-   <circle class="fil1" cx="512" cy="512" r="512"/>
-   <polygon class="fil2" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/>
-   <circle class="fil2" cx="839.36" cy="242.47" r="50"/>
-  </g>
- </g>
-</svg>
--- a/assets/omi-rm-v1.png
+++ b/assets/omi-rm-v1.png
--- a/assets/omi-snake-html-omio.png
+++ b/assets/omi-snake-html-omio.png
--- a/assets/omi-snake-html.png
+++ b/assets/omi-snake-html.png
--- a/assets/omi-snake.png
+++ b/assets/omi-snake.png
--- a/assets/omi-snap/blank.png
+++ b/assets/omi-snap/blank.png
--- a/assets/omi-snap/comapre-snap-before-after.png
+++ b/assets/omi-snap/comapre-snap-before-after.png
--- a/assets/omi-snap/initial.png
+++ b/assets/omi-snap/initial.png
--- a/assets/omi-snap/omi-snap.gif
+++ b/assets/omi-snap/omi-snap.gif
--- a/assets/omi-snap/omi.gif
+++ b/assets/omi-snap/omi.gif
--- a/assets/omi-snap/snap-html.png
+++ b/assets/omi-snap/snap-html.png
--- a/assets/omi-v6.jpg
+++ b/assets/omi-v6.jpg
--- a/assets/omi.html
+++ b/assets/omi.html
@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
-	<meta charset="UTF-8" />
-	<link rel="shortcut icon" href="https://tencent.github.io/omi/packages/omiu/examples/build/favicon.ico">
-	<title>Omi</title>
-</head>
-
-<body>
-	<script src="https://unpkg.com/omi"></script>
-	<script>
-		const { define, WeElement, h, render } = Omi
-
-		define('my-counter', class extends WeElement {
-			install() {
-				this.data.count = 1
-				this.sub = this.sub.bind(this)
-				this.add = this.add.bind(this)
-			}
-
-			sub() {
-				this.data.count--
-				this.update()
-			}
-
-			add() {
-				this.data.count++
-				this.update()
-			}
-
-			render() {
-				return h(
-					'div',
-					null,
-					h(
-						'button',
-						{ onClick: this.sub },
-						'-'
-					),
-					h(
-						'span',
-						null,
-						this.data.count
-					),
-					h(
-						'button',
-						{ onClick: this.add },
-						'+'
-					)
-				)
-			}
-		})
-
-		render(h('my-counter'), 'body')
-	</script>
-
-	<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
-		<img src="//alloyteam.github.io/github.png" alt="">
-	</a>
-</body>
-
-</html>
--- a/assets/omi.jpg
+++ b/assets/omi.jpg
--- a/assets/omi3.png
+++ b/assets/omi3.png
--- a/assets/omi_new.html
+++ b/assets/omi_new.html
@ -1,44 +0,0 @@
-<p align="center" style="margin-top:120px;"><svg style="width:150px;height:150px;" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
-	viewBox="0 0 1024 1024"
-	 xmlns:xlink="http://www.w3.org/1999/xlink">
-	 <defs>
-		<style type="text/css">
-		 <![CDATA[
-			.fil0 {fill:none}
-			.fil2 {fill:#FEFEFE}
-			.fil1 {fill:#07C160}
-		 ]]>
-		</style>
-	 </defs>
-	 <g id="图层_x0020_1">
-		<metadata id="CorelCorpID_0Corel-Layer"/>
-		<rect class="fil0" width="1024" height="1024"/>
-		<rect class="fil0" width="1024" height="1024"/>
-		<g id="_2225049615792">
-		 <circle class="fil1" cx="512" cy="512" r="512"/>
-		 <polygon class="fil2" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/>
-		 <circle class="fil2" cx="839.36" cy="242.47" r="50"/>
-		</g>
-	 </g>
-	</svg>
-	<span style="
-	COLOR: #00cd62;
-    FONT-SIZE: 163PX;
-    position: relative;
-    top: -13px;
-    left: 13px;
-">OMI
-</span></p>
-
-<h2 align="center" style="
-		font-size: 50px;
-		margin-top: -28px;
-    margin-bottom: 8px;
-"><a id="user-content-omi----front-end-cross-frameworks-framework" class="anchor" aria-hidden="true" href="#omi----front-end-cross-frameworks-framework"></a>Front End Cross-Frameworks Framework</h2>
-
-<p align="center" style="
-    font-size: 30px;
-		padding-bottom: 106px;
-		margin: 0 auto;
-		width:990px;
-"><a id="user-content-omi----front-end-cross-frameworks-framework" class="anchor" aria-hidden="true" href="#omi----front-end-cross-frameworks-framework"></a>Merge Web Components, JSX, HTM, Virtual DOM and Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Vue or Angular.</p>
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/dracula.css"><title>Omi</title><link href="./static/css/index.7fd94fa3.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/highlight.pack.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.13b914c0.js"></script></body></html>
				`@ -1 +0,0 @@`
				"use strict";var precacheConfig=[["./index.html","93a4f3028ba80037dad65104c68da9b1"],["./static/css/index.7fd94fa3.css","f92706c168ce617a52e7bdb97ea8f974"],["./static/css/zh-cn.7fd94fa3.css","3cf2a12d743b914e6606d48646d6caef"],["./static/js/0.de7771e5.chunk.js","4c570a8d3f676537bfc3f05084da8336"],["./static/js/1.3d241617.chunk.js","2e04b36b2e77476d2d7fc32b2328831e"],["./static/js/2.916a2d79.chunk.js","3853322a6ef3358b2bb419b8bb067e8a"],["./static/js/3.76509d8c.chunk.js","fe8c667f81d2a88cd167f95d043f88ff"],["./static/js/4.466db21e.chunk.js","11618163038ee21503bf7373e59fc277"],["./static/js/5.499a3d67.chunk.js","1a4fb9d90f1a924f909d9fe1e8e497aa"],["./static/js/index.13b914c0.js","180bdec97b7c2e0e303357492afe08de"],["./static/js/zh-cn.0f628f3b.js","51cc738968b97a60d16187a9565759ae"],["./static/media/omi-logo.979f9173.svg","979f9173db1ab18c35b7e720f0bb41a0"],["./zh-cn.html","694fe2295ebc2e4aced861546b3af310"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)\|\|(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))\|\|(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});
				`@ -1 +0,0 @@`
				{"version":3,"sources":["assets/index.css"],"names":[],"mappings":"AAAA,UAIE,yBACA,sJAA4J,CAG9J,oBAPE,SACA,UACA,QAAU,CAWZ,MACE,sBAAwB,CAG1B,EACE,qBACA,aAAe,CAEjB,MACE,wBAA0B,CAE5B,YACE,qBAAuB,CAGzB,MACE,eAAiB,CAGnB,yCACE,UAEE,iBAAmB,CAGrB,aACI,UAAY,CAIhB,+DAEI,uDACA,iBACA,eACA,SACA,WACA,8BACQ,qBAAuB,CAGnC,+BACI,iBAAmB,CAEvB,WACI,cAAgB,CAEpB,uEACI,kBACA,kBAAmB,CAGvB,uDACI,KAAS,CACZ,CAGH,EACE,8BACQ,qBAAuB,CAGjC,cACE,kBACA,cACA,eAAiB,CAGnB,MACE,cAAgB,CAGlB,UACE,qBACA,kBACA,cACA,kBACA,QACA,oCACA,iBAAmB,CAGrB,kBACE,WACA,kBACA,OACA,SACA,yBACA,YACA,SAAW,CAGb,WACE,kBACA,SACA,iBAAmB,CAGrB,qBACE,QACA,6BACA,eAAmB,CAGrB,WACE,kBACA,YACA,yBACA,kBACA,gBACA,gBACA,mBAEA,eAAiB,CAGnB,gBAJE,gBAAkB,CAgBnB,KAXC,yBACA,sBACA,qBACA,iBACA,gBACA,kBACA,SACA,OACA,UAAY,CAKd,MACE,yBACA,YACA,UAAY,CAYd,+BACE,uBACE,kBACA,SAAW","file":"static/css/index.7fd94fa3.css","sourcesContent":["html,body{\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n background-color: #f6f8fa;\r\n font-family:proxima-nova,\"Helvetica Neue\",Helvetica,Roboto, PT Sans, DejaVu Sans, Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif';\r\n}\r\n\r\nimg,ul,li{\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n}\r\n\r\nul,li{\r\n list-style:disc inside ;\r\n}\r\n\r\na{\r\n text-decoration: none;\r\n color: #0366d6;\r\n}\r\ntable{\r\n border-collapse: collapse;\r\n}\r\ntable,td,th{\r\n border: 1px solid #ccc;\r\n}\r\n\r\ntd,th{\r\n padding: 4px 8px;\r\n}\r\n\r\n@media only screen and (max-width: 768px) {\r\n html,body{\r\n\r\n overflow-x: hidden;\r\n }\r\n\r\n .content img{\r\n width: 100%;\r\n }\r\n\r\n\r\n .content code[class=\"language-\"],\r\n .content pre[class=\"language-\"] {\r\n font-family: Consolas, \"Liberation Mono\", Courier, monospace;\r\n line-height: 18px;\r\n font-size: 13px;\r\n margin: 0;\r\n width: 100%;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n }\r\n\r\n .content pre[class=\"language-\"] {\r\n padding-left: 10px;\r\n }\r\n .content p{\r\n font-size: 14px;\r\n }\r\n .content p,.content h1,.content h2,.content h3,.content h4,.content h5{\r\n padding-left:10px;\r\n padding-right:10px;\r\n }\r\n\r\n .line-highlight:before, .line-highlight[data-end]:after{\r\n top: 0em;\r\n }\r\n}\r\n\r\n{\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n}\r\n\r\npre code.hljs{\r\n padding-left: 14px;\r\n display: block;\r\n overflow-x: auto;\r\n}\r\n\r\n.hljs{\r\n font-size: 14px;\r\n}\r\n\r\ncode.hljs{\r\n display: inline-block;\r\n overflow-x: hidden;\r\n text-indent: 0;\r\n position: relative;\r\n top: 8px;\r\n background-color:rgba(27,31,35,.05); \r\n border-radius: 3px;\r\n}\r\n\r\nblockquote::before{\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top:11px;\r\n background-color: #dfe2e5;\r\n height: 24px;\r\n width: 4px;\r\n}\r\n\r\nblockquote {\r\n position: relative;\r\n margin: 0;\r\n padding-left: 20px; \r\n}\r\n\r\n._code-ctn code.hljs{\r\n top: 2px;\r\n background-color:transparent;\r\n border-radius: 0px;\r\n}\r\n\r\n._code-ctn{\r\n position: relative;\r\n height: auto;\r\n background-color: #282C34;\r\n border-radius: 3px;\r\n padding-top:1px; \r\n margin-top: 15px; \r\n padding-bottom:1px; \r\n line-height: 18px;\r\n max-width: 900px;\r\n}\r\n\r\n._hl{\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n padding-top: 5px;\r\n position: absolute;\r\n top: -1px;\r\n left: 0;\r\n width: 100%;\r\n line-height: 18px;\r\n\r\n}\r\n\r\n._hll{\r\n background-color: rgb(72, 77, 87);\r\n height: 18px;\r\n width: 100%;\r\n\r\n}\r\n\r\n\r\n._code-ctn pre{\r\n background: transparent;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n\r\n._code-ctn code{\r\n background: transparent;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/assets/index.css"],"sourceRoot":""}
				`@ -1 +0,0 @@`
				{"version":3,"sources":["../static/js/0.de7771e5.chunk.js","docs/zh-cn/other-docs.md"],"names":["webpackJsonp","36","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/0.de7771e5.chunk.js","sourcesContent":["webpackJsonp([0],{\n\n/*/ 36:\n// (function(module, exports) {\n\nmodule.exports = \"## Other Docs\\r\\n\\r\\n### Markdown 扩展\\r\\n\\r\\n你可以通过下面的语法高亮代码块中的某些行:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\n输出:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n static observe = true\\r\\n \\r\\n data = {\\r\\n count: 1\\r\\n }\\r\\n\\r\\n sub = () => {\\r\\n this.data.count--\\r\\n }\\r\\n\\r\\n add = () => {\\r\\n this.data.count++\\r\\n }\\r\\n\\r\\n render() {\\r\\n return (\\r\\n <div>\\r\\n <button onClick={this.sub}>-</button>\\r\\n <span>{this.data.count}</span>\\r\\n <button onClick={this.add}>+</button>\\r\\n </div>\\r\\n )\\r\\n }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n/**/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.de7771e5.chunk.js","module.exports = \"## Other Docs\\r\\n\\r\\n### Markdown 扩展\\r\\n\\r\\n你可以通过下面的语法高亮代码块中的某些行:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\n输出:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n static observe = true\\r\\n \\r\\n data = {\\r\\n count: 1\\r\\n }\\r\\n\\r\\n sub = () => {\\r\\n this.data.count--\\r\\n }\\r\\n\\r\\n add = () => {\\r\\n this.data.count++\\r\\n }\\r\\n\\r\\n render() {\\r\\n return (\\r\\n <div>\\r\\n <button onClick={this.sub}>-</button>\\r\\n <span>{this.data.count}</span>\\r\\n <button onClick={this.add}>+</button>\\r\\n </div>\\r\\n )\\r\\n }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/other-docs.md\n// module id = 36\n// module chunks = 0"],"sourceRoot":""}
				`@ -1 +0,0 @@`
				{"version":3,"sources":["../static/js/1.3d241617.chunk.js","docs/zh-cn/introduction.md"],"names":["webpackJsonp","35","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/1.3d241617.chunk.js","sourcesContent":["webpackJsonp([1],{\n\n/*/ 35:\n// (function(module, exports) {\n\nmodule.exports = \"## 简介\\r\\n\\r\\nMd2site 是基于 [Omi](https://github.com/Tencent/omi) 的一款 Markdown 转网站工具，使用简单，生成的文件轻巧，功能强大。\\r\\n\\r\\n## 特性\\r\\n\\r\\n 完整 markdown 语法支持\\r\\n* 代码高亮，特定行高亮\\r\\n* 多语言支持\\r\\n* 响应式设计，手机阅读体验友好\\r\\n* 动态加载 md 文件\\r\\n* 基于 [Omio framework](https://github.com/Tencent/omi/tree/master/packages/omio) 和 [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)，兼容 IE8+\\r\\n\\r\\n## 安装\\r\\n\\r\\n``` bash {2}\\r\\nnpm i omi-cli -g \\r\\nomi init-md2site my-app \\r\\ncd my-app \\r\\nnpm start \\r\\nnpm run build \\r\\n```\\r\\n\\r\\n> `npx omi-cli init-md2site my-app` (npm v5.2.0+ 可以一条命令直接使用).\\r\\n\\r\\n文件目录描述:\\r\\n\\r\\n```\\r\\n├─ config\\r\\n├─ public\\r\\n├─ scripts\\r\\n├─ src\\r\\n│ ├─ assets\\r\\n│ ├─ docs //文档的目录\\r\\n│ │ ├─ en //英文文档目录\\r\\n│ │ ├─ zh-cn //简体中文目录\\r\\n│ │ └─ config.js //配置\\r\\n│ ├─ elements //所有组件\\r\\n│ ├─ store \\r\\n│ ├─ index.js //编译的入口，对应编译成 index.html\\r\\n│ └─ zh-cn.js //编译的入口，对应编译成 zh-cn.html\\r\\n```\\r\\n\\r\\n### 表格测试\\r\\n\\r\\n\| \| Hexo \| Md2site \|\\r\\n\| ------------- \|:-------------:\|:-----:\|\\r\\n\| Markdown 支持 \| ★★★★★\| ★★★★★ \|\\r\\n\| 输出文件尺寸 \| ★★★☆☆ \| ★★★☆☆ \|\\r\\n\| 上手难度 \| ★★★☆☆\| ★★★☆☆ \|\\r\\n\| 二次开发 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 主题和插件 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 代码高亮 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 国际化 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 响应式 \| ★★★★★ \| ★★★★★ \|\"\n\n/**/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/1.3d241617.chunk.js","module.exports = \"## 简介\\r\\n\\r\\nMd2site 是基于 [Omi](https://github.com/Tencent/omi) 的一款 Markdown 转网站工具，使用简单，生成的文件轻巧，功能强大。\\r\\n\\r\\n## 特性\\r\\n\\r\\n 完整 markdown 语法支持\\r\\n* 代码高亮，特定行高亮\\r\\n* 多语言支持\\r\\n* 响应式设计，手机阅读体验友好\\r\\n* 动态加载 md 文件\\r\\n* 基于 [Omio framework](https://github.com/Tencent/omi/tree/master/packages/omio) 和 [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)，兼容 IE8+\\r\\n\\r\\n## 安装\\r\\n\\r\\n``` bash {2}\\r\\nnpm i omi-cli -g \\r\\nomi init-md2site my-app \\r\\ncd my-app \\r\\nnpm start \\r\\nnpm run build \\r\\n```\\r\\n\\r\\n> `npx omi-cli init-md2site my-app` (npm v5.2.0+ 可以一条命令直接使用).\\r\\n\\r\\n文件目录描述:\\r\\n\\r\\n```\\r\\n├─ config\\r\\n├─ public\\r\\n├─ scripts\\r\\n├─ src\\r\\n│ ├─ assets\\r\\n│ ├─ docs //文档的目录\\r\\n│ │ ├─ en //英文文档目录\\r\\n│ │ ├─ zh-cn //简体中文目录\\r\\n│ │ └─ config.js //配置\\r\\n│ ├─ elements //所有组件\\r\\n│ ├─ store \\r\\n│ ├─ index.js //编译的入口，对应编译成 index.html\\r\\n│ └─ zh-cn.js //编译的入口，对应编译成 zh-cn.html\\r\\n```\\r\\n\\r\\n### 表格测试\\r\\n\\r\\n\| \| Hexo \| Md2site \|\\r\\n\| ------------- \|:-------------:\|:-----:\|\\r\\n\| Markdown 支持 \| ★★★★★\| ★★★★★ \|\\r\\n\| 输出文件尺寸 \| ★★★☆☆ \| ★★★☆☆ \|\\r\\n\| 上手难度 \| ★★★☆☆\| ★★★☆☆ \|\\r\\n\| 二次开发 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 主题和插件 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 代码高亮 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 国际化 \| ★★★★☆ \| ★★★★☆ \|\\r\\n\| 响应式 \| ★★★★★ \| ★★★★★ \|\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/introduction.md\n// module id = 35\n// module chunks = 1"],"sourceRoot":""}
				`@ -1 +0,0 @@`
				{"version":3,"sources":["../static/js/2.916a2d79.chunk.js","docs/zh-cn/config.md"],"names":["webpackJsonp","34","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/2.916a2d79.chunk.js","sourcesContent":["webpackJsonp([2],{\n\n/*/ 34:\n// (function(module, exports) {\n\nmodule.exports = \"## 配置\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n lan: 'en',\\r\\n menus: {\\r\\n cn: [\\r\\n {\\r\\n title: '快速开始',\\r\\n list: [\\r\\n { name: '安装', md: 'installation' },\\r\\n { name: '配置', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: '其他版块',\\r\\n list: [\\r\\n { name: '测试其他', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ],\\r\\n en: [\\r\\n {\\r\\n title: 'QUICK START',\\r\\n list: [\\r\\n { name: 'Introduction', md: 'introduction' },\\r\\n { name: 'Config', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: 'Other',\\r\\n list: [\\r\\n { name: 'Other Docs', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ]\\r\\n }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n/**/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/2.916a2d79.chunk.js","module.exports = \"## 配置\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n lan: 'en',\\r\\n menus: {\\r\\n cn: [\\r\\n {\\r\\n title: '快速开始',\\r\\n list: [\\r\\n { name: '安装', md: 'installation' },\\r\\n { name: '配置', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: '其他版块',\\r\\n list: [\\r\\n { name: '测试其他', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ],\\r\\n en: [\\r\\n {\\r\\n title: 'QUICK START',\\r\\n list: [\\r\\n { name: 'Introduction', md: 'introduction' },\\r\\n { name: 'Config', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: 'Other',\\r\\n list: [\\r\\n { name: 'Other Docs', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ]\\r\\n }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/config.md\n// module id = 34\n// module chunks = 2"],"sourceRoot":""}
				`@ -1 +0,0 @@`
				{"version":3,"sources":["../static/js/3.76509d8c.chunk.js","docs/en/other-docs.md"],"names":["webpackJsonp","33","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/3.76509d8c.chunk.js","sourcesContent":["webpackJsonp([3],{\n\n/*/ 33:\n// (function(module, exports) {\n\nmodule.exports = \"## Other Docs\\r\\n\\r\\n### Markdown Extensions\\r\\n\\r\\nYou can highlight some lines in the code block through the following syntax.\\r\\n\\r\\nInput:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\nOutput:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n static observe = true\\r\\n \\r\\n data = {\\r\\n count: 1\\r\\n }\\r\\n\\r\\n sub = () => {\\r\\n this.data.count--\\r\\n }\\r\\n\\r\\n add = () => {\\r\\n this.data.count++\\r\\n }\\r\\n\\r\\n render() {\\r\\n return (\\r\\n <div>\\r\\n <button onClick={this.sub}>-</button>\\r\\n <span>{this.data.count}</span>\\r\\n <button onClick={this.add}>+</button>\\r\\n </div>\\r\\n )\\r\\n }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n/**/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/3.76509d8c.chunk.js","module.exports = \"## Other Docs\\r\\n\\r\\n### Markdown Extensions\\r\\n\\r\\nYou can highlight some lines in the code block through the following syntax.\\r\\n\\r\\nInput:\\r\\n\\r\\n![Line Highlighting ](https://act.weixin.qq.com/static/images/201812/2a6077789545f695b3f5758f32b5070e.png)\\r\\n\\r\\nOutput:\\r\\n\\r\\n```js {4,20-24}\\r\\nimport { render, WeElement, define } from 'omi'\\r\\n\\r\\ndefine('my-counter', class extends WeElement {\\r\\n static observe = true\\r\\n \\r\\n data = {\\r\\n count: 1\\r\\n }\\r\\n\\r\\n sub = () => {\\r\\n this.data.count--\\r\\n }\\r\\n\\r\\n add = () => {\\r\\n this.data.count++\\r\\n }\\r\\n\\r\\n render() {\\r\\n return (\\r\\n <div>\\r\\n <button onClick={this.sub}>-</button>\\r\\n <span>{this.data.count}</span>\\r\\n <button onClick={this.add}>+</button>\\r\\n </div>\\r\\n )\\r\\n }\\r\\n})\\r\\n\\r\\nrender(<my-counter />, 'body')\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/other-docs.md\n// module id = 33\n// module chunks = 3"],"sourceRoot":""}
				`@ -1 +0,0 @@`
				{"version":3,"sources":["../static/js/5.499a3d67.chunk.js","docs/en/config.md"],"names":["webpackJsonp","31","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/5.499a3d67.chunk.js","sourcesContent":["webpackJsonp([5],{\n\n/*/ 31:\n// (function(module, exports) {\n\nmodule.exports = \"## Config\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n lan: 'en',\\r\\n menus: {\\r\\n cn: [\\r\\n {\\r\\n title: '快速开始',\\r\\n list: [\\r\\n { name: '安装', md: 'installation' },\\r\\n { name: '配置', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: '其他版块',\\r\\n list: [\\r\\n { name: '测试其他', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ],\\r\\n en: [\\r\\n {\\r\\n title: 'QUICK START',\\r\\n list: [\\r\\n { name: 'Introduction', md: 'introduction' },\\r\\n { name: 'Config', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: 'Other',\\r\\n list: [\\r\\n { name: 'Other Docs', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ]\\r\\n }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n/**/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/5.499a3d67.chunk.js","module.exports = \"## Config\\r\\n\\r\\n```js\\r\\nconst config = {\\r\\n lan: 'en',\\r\\n menus: {\\r\\n cn: [\\r\\n {\\r\\n title: '快速开始',\\r\\n list: [\\r\\n { name: '安装', md: 'installation' },\\r\\n { name: '配置', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: '其他版块',\\r\\n list: [\\r\\n { name: '测试其他', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ],\\r\\n en: [\\r\\n {\\r\\n title: 'QUICK START',\\r\\n list: [\\r\\n { name: 'Introduction', md: 'introduction' },\\r\\n { name: 'Config', md: 'config' }\\r\\n ]\\r\\n },\\r\\n {\\r\\n title: 'Other',\\r\\n list: [\\r\\n { name: 'Other Docs', md: 'other-docs' }\\r\\n ]\\r\\n }\\r\\n ]\\r\\n }\\r\\n}\\r\\n\\r\\nexport default config\\r\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/config.md\n// module id = 31\n// module chunks = 5"],"sourceRoot":""}