Compare commits
No commits in common. "master" and "add-app-ts" have entirely different histories.
master
...
add-app-ts
|
@ -1,14 +1,13 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
indent_style = tab
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[{package.json,.*rc,*.yml,*.md,*.js,*.ts,*.css}]
|
||||
[{package.json,.*rc,*.yml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
{
|
||||
"extends": ["plugin:prettier/recommended"],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module",
|
||||
|
@ -7,10 +6,7 @@
|
|||
"jsx": true
|
||||
}
|
||||
},
|
||||
"plugins": ["prettier"],
|
||||
"rules": {
|
||||
"semi": [1, "never"],
|
||||
"indent": ["error", 2],
|
||||
"prettier/prettier": "error"
|
||||
"semi": 2
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
dist
|
||||
node_modules
|
|
@ -1,9 +0,0 @@
|
|||
module.exports = {
|
||||
printWidth: 80,
|
||||
tabWidth: 2,
|
||||
useTabs: false,
|
||||
singleQuote: true,
|
||||
semi: false,
|
||||
trailingComma: "none",
|
||||
bracketSpacing: true
|
||||
};
|
|
@ -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.
|
3
LICENSE
|
@ -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
|
||||
|
|
792
README.CN.md
|
@ -1,377 +1,215 @@
|
|||
[English](./README.md) | 简体中文
|
||||
[English](./README.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://github.com/Tencent/omi/tree/master/packages/omi-snake)| omi 写的 MVP 架构的贪吃蛇游戏 |
|
||||
| [omi-kbone-snake ](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://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://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="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)
|
||||
- 增强了 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
|
||||
- 小巧的尺寸(gzip压缩后仅4kb)
|
||||
- 支持 `TypeScript`
|
||||
- 响应式数据绑定
|
||||
- [基于 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
|
||||
- 通过 omi-mobx 让 omi 和 mobx 一起良好地制作响应式视图(免去 `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` 是最完美的方案
|
||||
- JSX 是开发体验最棒(智能提示)、[语法噪音最少](https://github.com/facebook/jsx#why-not-template-literals)的 UI 表达式
|
||||
- 独创的 `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`),都是 hack 技术;`Shadow DOM Style` 是最完美的方案
|
||||
|
||||
对比同样开发 TodoApp, Omi 和 React 渲染完的 DOM 结构,Omi 使用 Shadow/Light DOM 隔离样式和语义化结构:
|
||||
对比同样开发 TodoApp, Omi 和 React 渲染完的 DOM 结构:
|
||||
|
||||
| **Omi** | **React** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
|  |  |
|
||||
| **Omi** | **React** |
|
||||
|-|-|
|
||||
|  |  |
|
||||
|
||||
左边是Omi,右边是 React,Omi 使用 Shadow DOM 隔离样式和语义化结构。
|
||||
|
||||
### TypeScript 智能提示
|
||||
|
||||
```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
|
||||
}
|
||||
|
||||
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"/>
|
||||
|
||||
## 必须收藏的资源
|
||||
|
||||
* [使用 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)
|
||||
* [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)
|
||||
* [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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
|
||||
* [CSS Variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables)
|
||||
* [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-生态)
|
||||
- [必须收藏的资源](#必须收藏的资源)
|
||||
- [一个 HTML 完全上手](#一个-html-完全上手)
|
||||
- [快速入门](#快速入门)
|
||||
- [项目模板](#项目模板)
|
||||
- [Hello Element](#hello-element)
|
||||
- [生命周期](#生命周期)
|
||||
- [安装](#安装)
|
||||
- [Hello Element](#hello-element)
|
||||
- [TodoApp](#todoapp)
|
||||
- [Store](#store)
|
||||
- [生命周期](#生命周期)
|
||||
- [生态](#生态)
|
||||
- [调试工具](#调试工具)
|
||||
- [Omi Mobx](#omi-mobx)
|
||||
- [浏览器兼容](#浏览器兼容)
|
||||
- [相关链接](#相关链接)
|
||||
- [贡献者们](#贡献者们)
|
||||
- [维护者](#维护者)
|
||||
- [感谢](#感谢)
|
||||
- [贡献代码](#贡献代码)
|
||||
- [License](#license)
|
||||
|
||||
## 一个 HTML 完全上手
|
||||
|
||||
下面这个页面不需要任何构建工具就可以执行
|
||||
|
||||
* [点击这里看执行结果](https://tencent.github.io/omi/assets/)
|
||||
* [Omi 文档](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md)
|
||||
* [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>
|
||||
```
|
||||
|
||||
通过上面脚本的执行,你已经定义好了一个自定义标签,可以不使用 render 方法,直接使用 `like-button` 标签:
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<like-button></like-button>
|
||||
</body>
|
||||
```
|
||||
|
||||
## 快速入门
|
||||
|
||||
<!-- 关于编译网站的 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)
|
||||
|
||||
比如在 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"
|
||||
}
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init your_project_name # init project, you can also exec 'omi init' in an empty folder
|
||||
$ cd your_project_name # please ignore this command if you executed 'omi init' in an empty folder
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
在 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"
|
||||
},
|
||||
```
|
||||
|
||||
如果你只想使用相对地址:
|
||||
目录说明:
|
||||
|
||||
```
|
||||
"build":"set PUBLIC_URL=.&& npm run _build" //windows
|
||||
"build":"PUBLIC_URL=. npm run _build", //mac os
|
||||
``` -->
|
||||
├─ config
|
||||
├─ public
|
||||
├─ scripts
|
||||
├─ src
|
||||
│ ├─ assets
|
||||
│ ├─ elements //存放所有 custom elements
|
||||
│ ├─ store //存放所有页面的 store
|
||||
│ ├─ admin.js //入口文件,会 build 成 admin.html
|
||||
│ └─ index.js //入口文件,会 build 成 index.html
|
||||
```
|
||||
|
||||
### 项目模板
|
||||
|
||||
| **Template Type**| **Command**| **Describe**|
|
||||
| ------------ | -----------| ----------------- |
|
||||
|基础模板(v3.3.0+)|`omi init my-app`| 基础模板,支持 omi 和 omio(IE8+)|
|
||||
|Kbone Template|`omi init-kbone my-app` | 使用 omi 开发小程序或者 Web|
|
||||
Cli 自动创建的项目脚手架是基于单页的 create-react-app 改造成多页的,有配置方面的问题可以查看 [create-react-app 用户指南](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md)。
|
||||
|
||||
### Hello Element
|
||||
|
||||
先创建一个自定义元素:
|
||||
|
||||
```js
|
||||
import { define, WeElement } from 'omi'
|
||||
import { tag, WeElement, render } from 'omi'
|
||||
|
||||
define('hello-element', class extends WeElement {
|
||||
onClick = evt => {
|
||||
// trigger CustomEvent
|
||||
this.fire('Abc', { name: 'dntzhang', age: 12 })
|
||||
evt.stopPropagation()
|
||||
}
|
||||
@tag('hello-element')
|
||||
class HelloElement extends WeElement {
|
||||
|
||||
//如果需要在 html 里直接使用 <hello-element></hello-element>,必须声明 propTypes
|
||||
static propTypes = {
|
||||
msg: String
|
||||
}
|
||||
onClick = (evt) => {
|
||||
//trigger CustomEvent
|
||||
this.fire('abc', { name : 'dntzhang', age: 12 })
|
||||
evt.stopPropagation()
|
||||
}
|
||||
|
||||
static css = `
|
||||
div {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}`
|
||||
css() {
|
||||
return `
|
||||
div{
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}`
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div onClick={this.onClick}>
|
||||
Hello {props.msg}
|
||||
<div>Click Me!</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
render(props) {
|
||||
return (
|
||||
<div onClick={this.onClick}>
|
||||
Hello {props.msg} {props.propFromParent}
|
||||
<div>Click Me!</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
使用该元素:
|
||||
|
||||
```js
|
||||
import { define, render, WeElement } from 'omi'
|
||||
``` js
|
||||
import { tag, WeElement, render } from 'omi'
|
||||
import './hello-element'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
data = { abc: 'abc' }
|
||||
@tag('my-app')
|
||||
class MyApp extends WeElement {
|
||||
static get data() {
|
||||
return { abc: '', passToChild: '' }
|
||||
}
|
||||
|
||||
// define CustomEvent Handler
|
||||
onAbc = evt => {
|
||||
// get evt data by evt.detail
|
||||
this.data.abc = ' by ' + evt.detail.name
|
||||
this.update()
|
||||
}
|
||||
//bind CustomEvent
|
||||
onAbc = (evt) => {
|
||||
// get evt data by evt.detail
|
||||
this.data.abc = ' by ' + evt.detail.name
|
||||
this.update()
|
||||
}
|
||||
|
||||
static css = `
|
||||
div{
|
||||
color: green;
|
||||
}`
|
||||
css() {
|
||||
return `
|
||||
div{
|
||||
color: green;
|
||||
}`
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
Hello {this.data.abc}
|
||||
<hello-element
|
||||
onAbc={this.onAbc}
|
||||
msg="WeElement"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
Hello {props.name} {data.abc}
|
||||
<hello-element onAbc={this.onAbc} prop-from-parent={data.passToChild} msg="WeElement"></hello-element>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-app name="Omi v4.0" />, 'body')
|
||||
render(<my-app name='Omi v4.0'></my-app>, 'body')
|
||||
```
|
||||
|
||||
告诉 Babel 把 JSX 转化成 Omi.h() 的调用:
|
||||
|
@ -389,28 +227,6 @@ render(<my-app name="Omi v4.0" />, 'body')
|
|||
"babel-preset-omi": "^0.1.1",
|
||||
```
|
||||
|
||||
如果你使用 babel7,也可以使用如下包和配置:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @babel/preset-env
|
||||
npm install --save-dev @babel/preset-react
|
||||
```
|
||||
|
||||
```js
|
||||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
[
|
||||
"@babel/preset-react",
|
||||
{
|
||||
"pragma": "Omi.h",
|
||||
"pragmaFrag": "Omi.h.f"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
如果不想把 css 写在 js 里,你可以使用 webpack [to-string-loader](https://www.npmjs.com/package/to-string-loader), 比如下面配置:
|
||||
|
||||
``` js
|
||||
|
@ -423,87 +239,92 @@ 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
|
||||
}
|
||||
...
|
||||
...
|
||||
...
|
||||
```
|
||||
|
||||
你也可以忘掉这一对繁琐的配置直接使用 omi-cli,不需要你配置任何东西。
|
||||
|
||||
<!-- ### TodoApp
|
||||
### TodoApp
|
||||
|
||||
下面列举一个相对完整的 TodoApp 的例子:
|
||||
|
||||
```js
|
||||
import { define, render, WeElement } from 'omi'
|
||||
import { tag, WeElement, render } 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-app', class extends WeElement {
|
||||
items = []
|
||||
text = ''
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h3>TODO</h3>
|
||||
<todo-list items={this.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input
|
||||
id="new-todo"
|
||||
onChange={this.handleChange}
|
||||
value={this.text}
|
||||
/>
|
||||
<button>Add #{this.items.length + 1}</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
this.text = e.target.value
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault()
|
||||
if (!this.text.trim().length) {
|
||||
return
|
||||
@tag('todo-list')
|
||||
class TodoList extends WeElement {
|
||||
render(props) {
|
||||
return (
|
||||
<ul>
|
||||
{props.items.map(item => (
|
||||
<li key={item.id}>{item.text}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
this.items.push({
|
||||
text: this.text,
|
||||
id: Date.now()
|
||||
})
|
||||
this.text = ''
|
||||
this.update()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render(<todo-app />, 'body')
|
||||
``` -->
|
||||
@tag('todo-app')
|
||||
class TodoApp extends WeElement {
|
||||
static get data() {
|
||||
return { 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 = '';
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
|
||||
render(<todo-app></todo-app>, 'body')
|
||||
```
|
||||
|
||||
### Store
|
||||
|
||||
<!--
|
||||
使用 Store 体系可以告别 update 方法,基于 Proxy 的全自动属性追踪和更新机制。强大的 Store 体系是高性能的原因,除了靠 props 决定组件状态的组件,其余组件所有 data 都挂载在 store 上,
|
||||
|
||||
```js
|
||||
|
@ -538,7 +359,7 @@ export default {
|
|||
自定义 Element 需要声明依赖的 data,这样 Omi store 根据自定义组件上声明的 data 计算依赖 path 并会按需局部更新。如:
|
||||
|
||||
```js
|
||||
define('todo-app', class extends WeElement {
|
||||
class TodoApp extends WeElement {
|
||||
static get data() {
|
||||
//如果你用了 store,这个只是用来声明依赖,按需 Path Updating
|
||||
return { items: [], text: '' }
|
||||
|
@ -554,7 +375,7 @@ define('todo-app', class extends WeElement {
|
|||
e.preventDefault()
|
||||
this.store.add()
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
* 数据的逻辑都封装在了 store 定义的方法里 (如 store.add)
|
||||
|
@ -571,133 +392,102 @@ 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 -->
|
||||
<!--
|
||||
## Mitt
|
||||
* globalData 里声明的 path,只要修改了对应 path 的值,就会刷新所有页面和组件,globalData 可以用来列出所有页面或大部分公共的属性 Path
|
||||
|
||||
如果不想使用 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) -->
|
||||
| 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 `render()` |
|
||||
| `afterUpdate` | after `render()` |
|
||||
|
||||
<!--
|
||||
如果你想要兼容 IE11,请使用 `omi-mobx` 代替 omi 自带的 observe,往下看..
|
||||
## 生态
|
||||
|
||||
### Omi Mobx
|
||||
* [https://www.webcomponents.org/](https://www.webcomponents.org/)
|
||||
* [https://www.webcomponents.org/elements](https://www.webcomponents.org/elements)
|
||||
|
||||
在里面查找你想要的组件,直接使用,或者花几分钟就能转换成 Omi Element(把模板拷贝到 render 方法,style拷贝到 css 方法)。
|
||||
|
||||
## 调试工具
|
||||
|
||||
使用 [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 Mobx
|
||||
|
||||
你也可以放弃 store 体系,使用 omi-mobx 来制作响应式视图:
|
||||
|
||||
```js
|
||||
import { tag, WeElement } from "omi"
|
||||
import { observe } from "omi-mobx"
|
||||
import { tag, WeElement } from 'omi'
|
||||
import { observe } from 'omi-mobx'
|
||||
|
||||
@observe
|
||||
@tag("my-app")
|
||||
@tag('my-app')
|
||||
class MyApp extends WeElement {
|
||||
|
||||
install() {
|
||||
this.data.name = "omi"
|
||||
this.data.name = 'omi'
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
this.data.name = "Omi V4.0"
|
||||
this.data.name = 'Omi V4.0'
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div onClick={this.onClick}>
|
||||
<h1>Welcome to {data.name}</h1>
|
||||
<h1 >Welcome to {data.name}</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
``` -->
|
||||
|
||||
### 生命周期
|
||||
|
||||
| 钩子方法 | 触发时机 |
|
||||
| ---------------- | -------------------------------------------- |
|
||||
| `install` | 初始化安装 |
|
||||
| `installed` | 插入到文档之后且安装完成 |
|
||||
| `uninstall` | 从文档中卸载移除 |
|
||||
| `beforeUpdate` | update 之前 |
|
||||
| `updated` | update 之后 |
|
||||
| `beforeRender` | `render()` 之前 |
|
||||
| `receiveProps` | 父组件更新时候触发, 返回 false 可以阻止更新 |
|
||||
|
||||
### 查看所有注册的元素
|
||||
|
||||
```js
|
||||
console.log(Omi.elements)
|
||||
```
|
||||
|
||||
<!--
|
||||
## React 组件转成 Omi
|
||||
|
||||
举个例子,下面是吧 weui react 的 button 转成 weui omi 的 button 的例子 :
|
||||
|
||||

|
||||
|
||||
* [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) -->
|
||||
|
||||
## 浏览器兼容
|
||||
|
||||
> [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.
|
||||
|
||||

|
||||
|
||||
[→ 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:
|
||||
- [westore](https://github.com/dntzhang/westore)
|
||||
- [omijs.org](http://omijs.org/)
|
||||
- [Omi.js 谷歌开发工具扩展 by F](https://github.com/f/omi-devtools)
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
## 贡献代码
|
||||
|
||||
Unit testing
|
||||
1. 先 Fork (https://github.com/Tencent/omi/fork)
|
||||
2. 创建分支 (`git checkout -b my-urgent-hotfix`)
|
||||
3. 提交更改 (`git commit -am 'Fixed something'`)
|
||||
4. 推送更改 (`git push origin my-urgent-hotfix`)
|
||||
5. 创建一个 Pull Request
|
||||
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
任何 Omi 相关问题欢迎联系我们:
|
||||
|
||||
## 贡献者们
|
||||
* [@f](https://github.com/f)
|
||||
* [@dntzhang](https://github.com/dntzhang)
|
||||
|
||||
<a href="https://github.com/Tencent/omi/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=Tencent/omi" />
|
||||
</a>
|
||||
## 贡献 Element-UI 到 Omi
|
||||
|
||||
感谢所有贡献者,欢迎更多人加入一起贡献。
|
||||
|
||||
## 核心维护者
|
||||
|
||||
- [@dntzhang](https://github.com/dntzhang)
|
||||
- [@Wscats](https://github.com/Wscats)
|
||||
- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
|
||||
- [@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)
|
||||
* [JSX](https://github.com/facebook/jsx)
|
||||
[→ 现在就去](https://github.com/Tencent/omi/tree/master/packages/omi-element-ui)
|
||||
|
||||
## License
|
||||
|
||||
MIT © Tencent
|
||||
MIT © Tencent
|
814
README.md
|
@ -1,313 +1,227 @@
|
|||
English | [简体中文](./README.CN.md)
|
||||
|
||||
<p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
|
||||
<h2 align="center">Omi - Front End Cross-Frameworks Framework</h2>
|
||||
|
||||
> Omiu - Cross-Frameworks and [Cross-Themes](https://omi.cdn-go.cn/admin/latest/index.html#/docs/theme) UI Components powered by Omi
|
||||
|
||||
* [💯Omi Admin by Omiu](https://tencent.github.io/omi/packages/admin/dist/index.html)
|
||||
* [💯国内加速访问 Omi Admin](https://omi.cdn-go.cn/admin/latest/index.html)
|
||||
|
||||
|
||||
Define cross-frameworks button element with 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>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### New Project by Omi
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init my-app # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
> `npx omi-cli init my-app` is also supported(npm v5.2.0+).
|
||||
|
||||
|
||||
### New Component by Omi
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init-component my-component # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
> `npx omi-cli init-component my-component` is also supported(npm v5.2.0+).
|
||||
|
||||
|
||||
|
||||
## Ecosystem of Omi
|
||||
|
||||
#### :100:Base
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/index.html) and [codepen](https://codepen.io/collection/DrMYgV/) | Omi official documents |
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding. [→ Base Templates](https://github.com/Tencent/omi/tree/master/packages/omi-cli/template)|
|
||||
|[CEE](https://omijs.github.io/cee/out/)| Fork from custom-elements-everywhere |
|
||||
|
||||
#### :snake:Snake MVP
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-snake ](https://github.com/Tencent/omi/tree/master/packages/omi-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/omi-snake/dist/index.html)| The Snake-Eating Game Based on MVP Architecture Written by Omi |
|
||||
| [omi-kbone-snake ](https://github.com/Tencent/omi/tree/v6/packages/omi-kbone)| omi-kbone 写的 MVP 架构的跨端贪吃蛇游戏,支持小程序和 H5 |
|
||||
| [Preact-snake](https://github.com/Tencent/omi/tree/v6/packages/preact-css/examples/snake) | The Snake-Eating Game Based on MVP Architecture Written by Preact + [Preact-CSS](https://github.com/Tencent/omi/tree/v6/packages/preact-css) + Omis |
|
||||
| [[P]react-snake](https://github.com/Tencent/omi/tree/v6/packages/react-snake) | The Snake-Eating Game Based on MVP Architecture Written by React/Preact |
|
||||
| [omix-snake](https://github.com/Tencent/omi/tree/v6/packages/omix-snake) | 小程序贪吃蛇 |
|
||||
|
||||
#### :books:Other
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-piano](https://github.com/Wscats/piano) |Build piano with Omi and Omi Snippets, [Enjoy now!](https://wscats.github.io/piano/build/)|
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/v6/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/v6/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|
|
||||
| [omi-canvas](https://github.com/Tencent/omi/tree/v6/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|
|
||||
| [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-ex](https://github.com/Tencent/omi/tree/v6/packages/omi-ex)| Omi.js extension(TypeScript) |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/v6/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|
|
||||
| [omi-finger](https://github.com/Tencent/omi/tree/v6/packages/omi-finger)|Support touch and gesture events in your Omi project.|
|
||||
| [omi-touch](https://github.com/Tencent/omi/tree/v6/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|
|
||||
| [omi-native](https://github.com/Tencent/omi/tree/v6/packages/omi-native)|Render web components to native|
|
||||
| [omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |
|
||||
| [omie](https://github.com/Wscats/omi-electron) |Build cross platform desktop apps with Omi.js and Electron.js|
|
||||
| [omi-cv](https://github.com/Wscats/CV) |Create a front-end engineer curriculum vitae, [Get Started!](http://wscats.github.io/CV/omi/build/index.html)|
|
||||
| [Soo](https://github.com/tonis2/Soo)| Has same API as omi but is great alternative if you want to create custom elements without JSX, virtual DOM and store |
|
||||
English | [简体中文](./README.CN.md)
|
||||
|
||||
<p align="center"><img src="./assets/omi-logo.svg" alt="omi" width="300"/></p>
|
||||
<h2 align="center">Omi: Next Generation Web Framework in 4kb JavaScript</h2>
|
||||
<p align="center"><b>Merge JSX, Web Components, Proxy, Store, Path Updating together</b></p>
|
||||
|
||||
## Why Omi?
|
||||
|
||||
- Tiny size and [High performance](https://tencent.github.io/omi/packages/omi/examples/perfs/)
|
||||
- Cross frameworks(react, preact, vue, angular), components of omi are pure custom elements
|
||||
- One framework. Mobile & desktop & mini program
|
||||
- Stateless View Architecture Design
|
||||
- Be friendly to custom elements, you can pass `false` attributes to elements through string `'0'` or string `'false'`, you can [pass `object` attributes to elements through `:` prefix and `Omi.$`](https://github.com/Tencent/omi/releases/tag/v6.8.0)
|
||||
- [Easy two way binding by extend api](https://codepen.io/omijs/pen/aeLYjx)
|
||||
- Enhanced CSS, [rpx unit support](https://github.com/Tencent/omi/releases/tag/v4.0.26) base on **750** screen width
|
||||
- Compliance with browser trend and API design
|
||||
- Merge [**Web Components**](https://developers.google.com/web/fundamentals/web-components/), [**JSX**](https://reactjs.org/docs/introducing-jsx.html) into one framework
|
||||
- Tiny size. _(**4kb** gzipped)_
|
||||
- Supports TypeScript.
|
||||
- Reactive data-binding
|
||||
- [Based on Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)
|
||||
- Easy to debug via [Omi DevTools Extension](https://github.com/f/omi-devtools) [[Install from Chrome WebStore](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd)]
|
||||
- Compliance with browser trend and API design.
|
||||
- Merge [**Web Components**](https://developers.google.com/web/fundamentals/web-components/) and [**JSX**](https://reactjs.org/docs/introducing-jsx.html) into one framework.
|
||||
- Work well with mobx by omi-mobx (No need to call `this.update()`).
|
||||
- Web Components can also be a data-driven view, **`UI = fn(data)`**.
|
||||
- JSX is the best development experience (code intelligent completion and tip) UI Expression with least [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals) and it's turing complete(template engine is not, es template string is but grammatical noise is too loud)
|
||||
- Look at [Facebook React vs Web Components](https://softwareengineering.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer),Omi **combines their advantages** and gives developers the **freedom to choose the way they like**
|
||||
- **Shadow DOM or Light DOM merges with Virtual DOM**, Omi uses both virtual DOM and real Shadow DOM to make view updates more accurate and faster
|
||||
- **Scoped CSS**'s best solution is [**Shadow DOM**](https://developers.google.com/web/fundamentals/web-components/shadowdom), the community churning out frameworks and libraries for Scoped CSS (using JS or JSON writing styles such as Radium, jsxstyle, react-style; binding to webpack using generated unique `className` `filename-classname-hash`, such as CSS Modules, Vue), are hack technologies; _and Shadow DOM Style is the perfect solution_.
|
||||
- JSX is the best development experience (code intelligent completion and tip) UI Expression with least [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals).
|
||||
- The original **Path Updating** system. Proxy-based automatic **accurate** update, **low power consumption**, high degree of freedom, excellent performance, easy integration of `requestIdleCallback`
|
||||
- Say goodbye to `this.update` method when using **store system**! It will automatically update UI partially when data is changed.
|
||||
- Look at [Facebook React vs Web Components](https://softwareengineering.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer),Omi **combines their advantages** and gives developers the **freedom to choose the way they like**.
|
||||
- **Shadow DOM merges with Virtual DOM**, Omi uses both virtual DOM and real Shadow DOM to make view updates more accurate and faster.
|
||||
- With a Store system, 99.9% of projects don't need time travel, and not only Redux can travel, please don't come up on Redux, Omi store system can meet all projects
|
||||
- **Scoped CSS**'s best solution is **Shadow DOM**, the community churning out frameworks and libraries for Scoped CSS (using JS or JSON writing styles such as Radium, jsxstyle, react-style; binding to webpack using generated unique `className` `filename-classname-hash`, such as CSS Modules, Vue), are hack technologies; _and Shadow DOM Style is the perfect solution_.
|
||||
|
||||
Compare TodoApp by Omi and React, Omi and React rendering DOM structure:
|
||||
|
||||
| **Omi** | **React** |
|
||||
| **Omi** | **React** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
Omi uses Shadow DOM or Light DOM based style isolation and semantic structure.
|
||||
On the left is Omi, the right side is React, and Omi uses Shadow DOM based style isolation and semantic structure.
|
||||
|
||||
## Useful Resources
|
||||
---
|
||||
|
||||
| **Title Name** | **Other language** | **Related**|
|
||||
| ----------------------------------------- | ------------------ |-----------------|
|
||||
|[Web Components bookmarks](https://www.notion.so/Web-Components-bookmarks-64066078f891433dbc74997dc4d64302)|||
|
||||
|[Snake-Eating Game Making with Web Components of Omi and MVP Architecture](https://github.com/Tencent/omi/blob/master/tutorial/omi-web-components-snake-game-mvp.md)|||
|
||||
|[Constructable Stylesheets: seamless reusable styles](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)|||
|
||||
|[Web Components specifications](https://github.com/w3c/webcomponents)|||
|
||||
|[Web Components in a Nutshell](https://levelup.gitconnected.com/web-components-in-a-nutshell-1e114aa971b9)|||
|
||||
|[Using Web Components with React in 2019](https://www.grapecity.com/blogs/using-web-components-with-react-2019)|||
|
||||
|[Using Web Components in React](https://coryrylan.com/blog/using-web-components-in-react)|||
|
||||
|[Styling We Components Using A Shared Style Sheet](https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/)|
|
||||
|[Developer Tools support for Web Components in Firefox 63](https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/)||
|
||||
|[Develop W3C Web Components with WebAssembly](https://medium.com/coinmonks/develop-w3c-web-components-with-webassembly-d65938284255)||
|
||||
| [60FPS Animation In Omi](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.md)| [简体中文](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.cn.md) [한국어](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.kr.md)|
|
||||
| [Render Web Components To Native](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.md)|[简体中文](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.cn.md) [한국어](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.kr.md)|
|
||||
| [Shadow Dom In Depth](https://github.com/praveenpuglia/shadow-dom-in-depth)| [简体中文](https://github.com/Tencent/omi/blob/master/tutorial/shadow-dom-in-depth.cn.md)|
|
||||
| [Part Theme Explainer](https://meowni.ca/posts/part-theme-explainer/)|求翻译|
|
||||
| [Web Components MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components)| [简体中文](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)|
|
||||
| [Web Components Google](https://developers.google.com/web/fundamentals/web-components/)|
|
||||
| [Web Components Org](https://www.webcomponents.org/introduction)|
|
||||
| [Web Components: the Right Way](https://github.com/mateusortiz/webcomponents-the-right-way)|
|
||||
| [Proxy MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)|[简体中文](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) [한국어](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy)|
|
||||
| [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)|[简体中文](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables) [한국어](https://developer.mozilla.org/ko-KR/docs/Web/CSS/Using_CSS_variables)|
|
||||
| [CSS Shadow Parts](https://drafts.csswg.org/css-shadow-parts-1/)|
|
||||
| [Platform HTML5](https://platform.html5.org/)|
|
||||
| [Using requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)|[简体中文](https://div.io/topic/1370)| [A polyfill](https://gist.github.com/paullewis/55efe5d6f05434a96c36)|
|
||||
| [The Power Of Web Components](https://hacks.mozilla.org/2018/11/the-power-of-web-components/)|[简体中文](https://github.com/Tencent/omi/blob/master/tutorial/the-power-of-web-components.cn.md)|
|
||||
|[ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)|[简体中文](https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot)||
|
||||
|
||||
# Overview of the Readme
|
||||
|
||||
- [Ecosystem of Omi](#ecosystem-of-omi)
|
||||
- [Useful Resources](#useful-resources)
|
||||
- [Why Omi?](#why-omi)
|
||||
- [Add Omi in One Minute](#add-omi-in-one-minute)
|
||||
- [Getting Started](#getting-started)
|
||||
- [Project Template](#project-template)
|
||||
- [Hello Element](#hello-element)
|
||||
- [TypeScript Auto Complete](#typescript-auto-complete)
|
||||
- [Lifecycle](#lifecycle)
|
||||
- [Install](#install)
|
||||
- [Hello Element](#hello-element)
|
||||
- [TodoApp](#todoapp)
|
||||
- [Store](#store)
|
||||
- [Summary:](#summary)
|
||||
- [Lifecycle](#lifecycle)
|
||||
- [Component Ecosystem](#component-ecosystem)
|
||||
- [Debugging](#debugging)
|
||||
- [Omi Mobx](#omi-mobx)
|
||||
- [Browsers Support](#browsers-support)
|
||||
- [Contributors](#contributors)
|
||||
- [Maintainers](#maintainers)
|
||||
- [Thanks](#thanks)
|
||||
- [Links](#links)
|
||||
- [Contribution](#contribution)
|
||||
- [License](#license)
|
||||
|
||||
## Add Omi in One Minute
|
||||
|
||||
This page demonstrates using Omi **with no build tooling**.
|
||||
|
||||
- [Online Demo!](https://tencent.github.io/omi/assets/)
|
||||
- [Omi Docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md)
|
||||
- [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>
|
||||
```
|
||||
|
||||
You can also use `like-button` tag directly in HTML:
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<like-button />
|
||||
</body>
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Install
|
||||
|
||||
### Project Template
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init your_project_name # init project, you can also exec 'omi init' in an empty folder
|
||||
$ cd your_project_name # please ignore this command if you executed 'omi init' in an empty folder
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
| **Template Type**| **Command**| **Describe**|
|
||||
| ------------ | -----------| ----------------- |
|
||||
|Base Template|`omi init my-app`| Basic omi project template.|
|
||||
|Kbone Template|`omi init-kbone my-app` |Developing mini program or web using omi.|
|
||||
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
|
||||
```
|
||||
|
||||
CLI's auto-created project scaffolding is based on a single-page create-react-app to be converted into a multi-page one, with configuration issues to see [create-react-app user guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md)
|
||||
|
||||
### Hello Element
|
||||
|
||||
Define a custom element by extending **`WeElement`** base class:
|
||||
Define a custom element by extending **`WeElement`** base class and name it using **`@tag`** decorator:
|
||||
|
||||
```js
|
||||
import { define, WeElement } from 'omi'
|
||||
import { tag, WeElement, render } from "omi";
|
||||
|
||||
define('hello-element', class extends WeElement {
|
||||
onClick = evt => {
|
||||
// trigger CustomEvent
|
||||
this.fire('Abc', { name: 'dntzhang', age: 12 })
|
||||
evt.stopPropagation()
|
||||
}
|
||||
@tag("hello-element")
|
||||
class HelloElement extends WeElement {
|
||||
onClick = evt => {
|
||||
// trigger CustomEvent
|
||||
this.fire("abc", { name: "dntzhang", age: 12 });
|
||||
evt.stopPropagation();
|
||||
};
|
||||
|
||||
//If you need to use <hello-element></hello-element> directly in html, you must declare 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}
|
||||
<div>Click Me!</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
render(props) {
|
||||
return (
|
||||
<div onClick={this.onClick}>
|
||||
Hello {props.msg} {props.propFromParent}
|
||||
<div>Click Me!</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Using `hello-element`:
|
||||
|
||||
```js
|
||||
import { define, render, WeElement } from 'omi'
|
||||
import './hello-element'
|
||||
import { tag, WeElement, render } from "omi";
|
||||
import "./hello-element";
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
data = { abc: 'abc' }
|
||||
@tag("my-app")
|
||||
class MyApp extends WeElement {
|
||||
static get data() {
|
||||
return { abc: "", passToChild: "" };
|
||||
}
|
||||
|
||||
// define CustomEvent Handler
|
||||
onAbc = evt => {
|
||||
// get evt data by evt.detail
|
||||
this.data.abc = ' by ' + evt.detail.name
|
||||
this.update()
|
||||
}
|
||||
// bind CustomEvent
|
||||
onAbc = evt => {
|
||||
// get evt data by evt.detail
|
||||
this.data.abc = ` by ${evt.detail.name}`;
|
||||
this.update();
|
||||
};
|
||||
|
||||
static css = `
|
||||
div{
|
||||
color: green;
|
||||
}`
|
||||
css() {
|
||||
return `
|
||||
div {
|
||||
color: green;
|
||||
}`;
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
Hello {this.data.abc}
|
||||
<hello-element
|
||||
onAbc={this.onAbc}
|
||||
msg="WeElement"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
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')
|
||||
render(<my-app name="Omi v4.0" />, "body");
|
||||
```
|
||||
|
||||
Tell Babel to transform JSX into `Omi.h()` call:
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["env", "omi"]
|
||||
"presets": ["env", "omi"]
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -318,29 +232,7 @@ The following two NPM packages need to be installed to support the above configu
|
|||
"babel-preset-omi": "^0.1.1",
|
||||
```
|
||||
|
||||
If you use babel7, you can also use the following packages and configuration:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @babel/preset-env
|
||||
npm install --save-dev @babel/preset-react
|
||||
```
|
||||
|
||||
```js
|
||||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
[
|
||||
"@babel/preset-react",
|
||||
{
|
||||
"pragma": "Omi.h",
|
||||
"pragmaFrag": "Omi.h.f"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
If you don't want to write CSS in JS, you can use [to-string-loader](https://www.npmjs.com/package/to-string-loader) of webpack.
|
||||
If you don't want to write CSS in JS, you can use [to-string-loader](https://www.npmjs.com/package/to-string-loader) of webpack,
|
||||
For example, the following configuration:
|
||||
|
||||
```js
|
||||
|
@ -353,118 +245,160 @@ For example, the following configuration:
|
|||
}
|
||||
```
|
||||
|
||||
If your CSS file starts with "`_`", CSS will use `to-string-loader`, such as:
|
||||
If your CSS file starts with "`_`", CSS will use `to-string-loader`., such as:
|
||||
|
||||
``` js
|
||||
```js
|
||||
import { tag, WeElement render } from 'omi'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
// typeof cssStr is string
|
||||
import cssStr from './_index.css'
|
||||
|
||||
css = require('./_index.css')
|
||||
@tag('my-app')
|
||||
class MyApp extends WeElement {
|
||||
|
||||
css() {
|
||||
return cssStr
|
||||
}
|
||||
...
|
||||
...
|
||||
...
|
||||
```
|
||||
|
||||
You can also forget the tedious configuration and use omi-cli directly, no need to configure anything.
|
||||
<!--
|
||||
### TodoApp
|
||||
|
||||
Here is a relatively complete example of TodoApp:
|
||||
|
||||
```js
|
||||
import { define, render, WeElement } from 'omi'
|
||||
import { tag, WeElement, render } 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-app', class extends WeElement {
|
||||
items = []
|
||||
text = ''
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h3>TODO</h3>
|
||||
<todo-list items={this.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input
|
||||
id="new-todo"
|
||||
onChange={this.handleChange}
|
||||
value={this.text}
|
||||
/>
|
||||
<button>Add #{this.items.length + 1}</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
this.text = e.target.value
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault()
|
||||
if (!this.text.trim().length) {
|
||||
return
|
||||
}
|
||||
this.items.push({
|
||||
text: this.text,
|
||||
id: Date.now()
|
||||
})
|
||||
this.text = ''
|
||||
this.update()
|
||||
}
|
||||
})
|
||||
|
||||
render(<todo-app />, 'body')
|
||||
``` -->
|
||||
|
||||
### TypeScript Auto Complete
|
||||
|
||||
```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
|
||||
@tag("todo-list")
|
||||
class TodoList extends WeElement {
|
||||
render(props) {
|
||||
return (
|
||||
<ul>
|
||||
{props.items.map(item => (
|
||||
<li key={item.id}>{item.text}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const TAG = 'o-button'
|
||||
@tag("todo-app")
|
||||
class TodoApp extends WeElement {
|
||||
static get data() {
|
||||
return { items: [], text: "" };
|
||||
}
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
[TAG]: Omi.Props & ButtonProps
|
||||
}
|
||||
}
|
||||
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 = "";
|
||||
this.update();
|
||||
};
|
||||
}
|
||||
|
||||
@tag(TAG)
|
||||
export default class oButton extends WeElement<ButtonProps> {
|
||||
...
|
||||
...
|
||||
...
|
||||
render(<todo-app />, "body");
|
||||
```
|
||||
|
||||
<img src="./assets/ts.png" alt="omi" width="427"/>
|
||||
### Store
|
||||
|
||||
Say goodbye to `this.update` method when using store system! It will automatically update the UI partially when data is changed. The powerful **Store architecture** is high-performanced since all the data is mounted on the store, except for components that rely on props to determine the state of the component.
|
||||
|
||||
```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
|
||||
};
|
||||
```
|
||||
|
||||
Custom Element requires declaring dependent data so that Omi stores compute the dependency path based on the data declared on the custom component and update it locally as needed. Such as:
|
||||
|
||||
```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();
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
- The logic of data is **encapsulated in the store definition method** (such as `store.add`).
|
||||
- Views are only **responsible for passing data to store**, such as calling `store.add` or setting `store.data.text` on top.
|
||||
|
||||
You need to inject `store` from the root node at render time to use this store:
|
||||
|
||||
```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` is used to list all attributes and default values (except the components of the view decided by props).
|
||||
- The static data of the element is used to list the attributes of the dependent store.data _(Omi will record path)_ and update on demand.
|
||||
- If there are few simple components on the page, `updateAll` can be set to `true`, and components and pages don't need to declare data, and they don't update on demand
|
||||
- The path declared in `globalData` refreshes all pages and components by modifying the value of the corresponding path, which can be used to list all pages or most of the public properties path
|
||||
|
||||
### Lifecycle
|
||||
|
||||
|
@ -473,86 +407,88 @@ export default class oButton extends WeElement<ButtonProps> {
|
|||
| `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 |
|
||||
| `updated` | after update |
|
||||
| `beforeRender` | before `render()` |
|
||||
| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action|
|
||||
| `beforeUpdate` | before `render()` |
|
||||
| `afterUpdate` | after `render()` |
|
||||
|
||||
### View registered elements
|
||||
## Component Ecosystem
|
||||
|
||||
- [https://www.webcomponents.org/](https://www.webcomponents.org/)
|
||||
- [https://www.webcomponents.org/elements](https://www.webcomponents.org/elements)
|
||||
|
||||
I believe you can easily convert web components elements to omi elements.
|
||||
|
||||
## Debugging
|
||||
|
||||
Using [Omi DevTools](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd) you can simply debug and manage your UI **without any configuration**. Just install and debug.
|
||||
|
||||
Since Omi uses Web Components and Shadow-DOM, it doesn't need to have another elements panel such as React or Vue has. It just adds a panel to the **Elements' sidebar** and it's powerful as much as React and Vue DevTools.
|
||||
|
||||

|
||||
|
||||
## Omi Mobx
|
||||
|
||||
You can also give up the store system and use omi-mobx to create response views, such as:
|
||||
|
||||
```js
|
||||
console.log(Omi.elements)
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!--
|
||||
## React to Omi
|
||||
|
||||
For example, the below is about migration React button as weui Omi button:
|
||||
|
||||

|
||||
|
||||
* [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 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.
|
||||
|
||||

|
||||
|
||||
[→ Polyfills](https://github.com/webcomponents/webcomponentsjs)
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script>
|
||||
```
|
||||
> If you want to be compatible with IE11, use the Omi file of [→ this project](https://github.com/Tencent/omi/tree/master/packages/omi-ie11). This project uses JSON Diff + Timer instead of Proxy.
|
||||
|
||||
> You can dynamically load the JS of this project in the IE11 environment, and the proxy version is still used in other environments.
|
||||
|
||||
> You can also give up the store system and use omi-mobx to be compatible with IE11.
|
||||
|
||||
## Links
|
||||
|
||||
- [omijs.org](http://omijs.org/)
|
||||
- [Omi.js DevTools](https://github.com/f/omi-devtools)
|
||||
|
||||
## Contribution
|
||||
|
||||
Build a example:
|
||||
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
|
||||
|
||||
```bash
|
||||
npm start example_name
|
||||
```
|
||||
|
||||
Build omi:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Unit testing
|
||||
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
|
||||
## Contributors
|
||||
|
||||
<a href="https://github.com/Tencent/omi/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=Tencent/omi" />
|
||||
</a>
|
||||
|
||||
Any form of contribution is welcome. The above contributors have been officially released by Tencent.
|
||||
|
||||
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.
|
||||
|
||||
## Core Maintainers
|
||||
Please contact us for any questions:
|
||||
|
||||
- [@f](https://github.com/f)
|
||||
- [@dntzhang](https://github.com/dntzhang)
|
||||
- [@Wscats](https://github.com/Wscats)
|
||||
- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
|
||||
- [@xcatliu](https://github.com/xcatliu)
|
||||
- [AlloyTeam](http://alloyteam.com/)
|
||||
|
||||
Please contact us for any questions.
|
||||
## Contribute Element-UI to Omi
|
||||
|
||||
## Thanks
|
||||
|
||||
* [preact](https://github.com/developit/preact)
|
||||
* [JSX](https://github.com/facebook/jsx)
|
||||
[→ Go to contribute elements](https://github.com/Tencent/omi/tree/master/packages/omi-element-ui)
|
||||
|
||||
## License
|
||||
|
||||
|
|
BIN
assets/99.jpg
Before Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 148 KiB |
Before Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 35 KiB |
BIN
assets/cax.gif
Before Width: | Height: | Size: 410 KiB |
Before Width: | Height: | Size: 115 KiB |
BIN
assets/comi.jpg
Before Width: | Height: | Size: 104 KiB |
|
@ -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>
|
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 168 KiB |
BIN
assets/dir.jpg
Before Width: | Height: | Size: 77 KiB |
BIN
assets/env.jpg
Before Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 13 KiB |
BIN
assets/ie9a.jpg
Before Width: | Height: | Size: 65 KiB |
BIN
assets/ie9b.jpg
Before Width: | Height: | Size: 75 KiB |
|
@ -2,46 +2,47 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.min.js"></script>
|
||||
<script>
|
||||
const { WeElement, h, render, define } = Omi
|
||||
<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 }
|
||||
}
|
||||
class LikeButton extends WeElement {
|
||||
install() {
|
||||
this.data = { liked: false }
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.data.liked) {
|
||||
return 'You liked this.'
|
||||
}
|
||||
render() {
|
||||
if (this.data.liked) {
|
||||
return 'You liked this.'
|
||||
}
|
||||
|
||||
return h(
|
||||
'button',
|
||||
{
|
||||
onClick: () => {
|
||||
this.data.liked = true
|
||||
this.update()
|
||||
}
|
||||
},
|
||||
'Like'
|
||||
)
|
||||
}
|
||||
})
|
||||
return h(
|
||||
'button',
|
||||
{
|
||||
onClick: () => {
|
||||
this.data.liked = true
|
||||
this.update()
|
||||
}
|
||||
},
|
||||
'Like'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(h('like-button'), 'body')
|
||||
</script>
|
||||
define('like-button', LikeButton)
|
||||
|
||||
<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>
|
||||
render(h('like-button'), '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>
|
||||
</html>
|
BIN
assets/kbone.png
Before Width: | Height: | Size: 54 KiB |
|
@ -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>
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
assets/logs.png
Before Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 13 KiB |
|
@ -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"
|
||||
}
|
Before Width: | Height: | Size: 66 KiB |
|
@ -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}
|
|
@ -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 = { '&': '&', '<': '<', '>': '>' };
|
||||
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: /#(?!!)/
|
||||
};
|
||||
});
|
|
@ -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,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*/
|
|
@ -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,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*/
|
|
@ -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":""}
|
|
@ -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\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
|
|
@ -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\\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\\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,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
|
|
@ -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,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
|
|
@ -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,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\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
|
|
@ -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\\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\\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,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
|
|
@ -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
|
|
@ -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":""}
|
|
@ -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>
|
Before Width: | Height: | Size: 2.5 KiB |
|
@ -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>
|
Before Width: | Height: | Size: 110 KiB |
BIN
assets/mock.jpg
Before Width: | Height: | Size: 127 KiB |
Before Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 131 KiB |
Before Width: | Height: | Size: 392 KiB |
Before Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 34 KiB |
BIN
assets/mp.png
Before Width: | Height: | Size: 423 KiB |
BIN
assets/mp1.jpg
Before Width: | Height: | Size: 24 KiB |
BIN
assets/mp2.jpg
Before Width: | Height: | Size: 31 KiB |
BIN
assets/mps.gif
Before Width: | Height: | Size: 670 KiB |
BIN
assets/mps.png
Before Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 34 KiB |
BIN
assets/mvvm.png
Before Width: | Height: | Size: 18 KiB |
BIN
assets/mvx.png
Before Width: | Height: | Size: 73 KiB |
BIN
assets/oc.jpg
Before Width: | Height: | Size: 206 KiB |
Before Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 57 KiB |
Before Width: | Height: | Size: 24 KiB |
|
@ -1,60 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Omi</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script>
|
||||
const {
|
||||
define,
|
||||
render,
|
||||
h
|
||||
} = Omi
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
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(h('my-counter'), 'body', new Store)
|
||||
|
||||
</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>
|
Before Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 102 KiB |
Before Width: | Height: | Size: 8.7 KiB |
|
@ -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>
|
Before Width: | Height: | Size: 2.5 KiB |
|
@ -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>
|
Before Width: | Height: | Size: 2.5 KiB |
|
@ -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>
|
||||
|
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.4 KiB |
|
@ -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>
|
Before Width: | Height: | Size: 2.4 KiB |
|
@ -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>
|
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 64 KiB |
Before Width: | Height: | Size: 192 KiB |
Before Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 152 KiB |