20 |
21 | 
27 |
29 | I am omiu button.
31 |
33 | )
34 | }
35 | })
36 |
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-cli/template/app/src/elements/app/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
27 |
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-cli/template/app/src/elements/hello/_index.css:
--------------------------------------------------------------------------------
1 | .hello {
2 | text-align: center;
3 | }
4 |
5 | .omi {
6 | width: 143px;
7 | height: 59px;
8 | margin: 0 auto;
9 | background-image: url(./omi.png);
10 | }
11 |
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-cli/template/app/src/elements/hello/index.js:
--------------------------------------------------------------------------------
1 | import { define, WeElement } from 'omi'
2 |
3 | define('hello-element', class extends WeElement {
4 | css = require('./_index.css')
5 |
6 | installed() {
7 | setTimeout(() => {
8 | this.store.name = 'Good Job!'
9 | this.update()
10 | }, 1000)
11 | }
12 |
13 | render(props, data) {
14 | return (
15 | Welcome to {this.name}
28 |
16 |
20 | )
21 | }
22 | })
23 |
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-cli/template/app/src/elements/hello/omi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZainChen/omi-vscode/b639358ef3ffb2309411f7f7507e68743833a6c3/src/ecosystem/packages/omi-cli/template/app/src/elements/hello/omi.png
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-cli/template/app/src/index.js:
--------------------------------------------------------------------------------
1 | import { render } from 'omi'
2 | import './assets/index.css'
3 | import './elements/app'
4 |
5 | render({this.store.name}
17 | I am hello element.
18 |
19 | Seconds: {this.data.seconds}
\n }\n})\n\nrender(Seconds: {this.data.seconds}
\\n }\\n})\\n\\nrender(Seconds: {this.data.seconds}
\\n }\\n})\\n\\nrender(Hello, world!
\n )\n }\n})\n```\n\n### Custom Event\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n this.fire('myevent', { name: 'abc' })\n }\n\n render(props) {\n return (\nHello, world!
\n )\n }\n})\n```\n\n\u7136\u540e\u5728\u4f60\u7684\u81ea\u5b9a\u4e49\u5143\u7d20\u4e0a\u7ed1\u5b9a\u4e8b\u4ef6\uff1a\n\n```jsx\nHello, world!
\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\nHello, world!
\\n )\\n }\\n})\\n```\\n\\n然后在你的自定义元素上绑定事件：\\n\\n```jsx\\nHello, world!
\\n )\\n }\\n})\\n```\\n\\n### Custom Event\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n this.fire('myevent', { name: 'abc' })\\n }\\n\\n render(props) {\\n return (\\nHello, world!
\\n )\\n }\\n})\\n```\\n\\n然后在你的自定义元素上绑定事件：\\n\\n```jsx\\n\n Look at my color!
\n )\n }\n})\n```\n\n\u4e0a\u9762\u7684 `my-element` \u7684 h1 \u6807\u7b7e\u989c\u8272\u662f\u7ea2\u8272\u3002\u6709\u4ec0\u4e48\u529e\u6cd5\u4fee\u6539\u5417\uff1f\n\n```jsx\ndefine('my-app', class extends WeElement {\n\n myCSS = `\n h1{\n color: green;\n }`\n\n onClick = () => {\n //\u52a8\u6001\u4fee\u6539\n this.myCSS = `\n h1{\n color: blue;\n }`\n this.update()\n }\n\n render() {\n return (\n Look at my color!\n
\n
\n )\n }\n})\n```\n\n\u800c\u4e14\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u65b9\u5f0f\u4fdd\u8bc1\u4e00\u5b9a\u80fd\u591f\u4fee\u6539\uff1a\n\n```css\ncolor: blue!important;\n```\n"}});
2 | //# sourceMappingURL=15.e804bc91.chunk.js.map
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/15.e804bc91.chunk.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../static/js/15.e804bc91.chunk.js","docs/zh-cn/css.md"],"names":["webpackJsonp","55","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/15.e804bc91.chunk.js","sourcesContent":["webpackJsonp([15],{\n\n/***/ 55:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## CSS\\n\\n这里说的是 props 的 css，而不是 `static css`，它提供了修改 shadow dom 内部 scoped style 的能力。\\n\\n### 举个例子\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n \\n Look at my color!
\\n )\\n }\\n})\\n```\\n\\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //动态修改\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n Look at my color!\\n
\\n
\\n )\\n }\\n})\\n```\\n\\n而且还可以通过下面的方式保证一定能够修改：\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/15.e804bc91.chunk.js","module.exports = \"## CSS\\n\\n这里说的是 props 的 css，而不是 `static css`，它提供了修改 shadow dom 内部 scoped style 的能力。\\n\\n### 举个例子\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static css = `h1{\\n color: red;\\n }`\\n\\n render() {\\n return (\\n \\n Look at my color!
\\n )\\n }\\n})\\n```\\n\\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\\n\\n```jsx\\ndefine('my-app', class extends WeElement {\\n\\n myCSS = `\\n h1{\\n color: green;\\n }`\\n\\n onClick = () => {\\n //动态修改\\n this.myCSS = `\\n h1{\\n color: blue;\\n }`\\n this.update()\\n }\\n\\n render() {\\n return (\\n Look at my color!\\n
\\n
\\n )\\n }\\n})\\n```\\n\\n而且还可以通过下面的方式保证一定能够修改：\\n\\n```css\\ncolor: blue!important;\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/css.md\n// module id = 55\n// module chunks = 15"],"sourceRoot":""}
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/16.e084ed27.chunk.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([16],{54:function(s,n){s.exports="## Class\n\nOmi \u6709\u5185\u7f6e\u7684\u4e24\u4e2a class \u65b9\u6cd5 `classNames` \u548c `extractClass`\uff1a\n\n```js\nimport { classNames, extractClass } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n //extractClass \u4f1a\u53d6\u51fa props \u7684 class \u6216 className \u5c5e\u6027\u5e76\u4e0e\u5176\u4ed6 classNames \u5408\u5e76\u5728\u4e00\u8d77\n const cls = extractClass(props, 'o-my-class', {\n 'other-class': true,\n 'other-class-b': this.xxx === 1\n })\n\n return (\n \n Test\n
\n )\n }\n})\n```\n\n\u4e0a\u9762\u7684 `classNames` \u548c npm \u4e0a\u7684 [classNames](https://www.npmjs.com/package/classnames) \u662f\u4e00\u6837\u7684\u3002"}});
2 | //# sourceMappingURL=16.e084ed27.chunk.js.map
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/16.e084ed27.chunk.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../static/js/16.e084ed27.chunk.js","docs/zh-cn/class.md"],"names":["webpackJsonp","54","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/16.e084ed27.chunk.js","sourcesContent":["webpackJsonp([16],{\n\n/***/ 54:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Class\\n\\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n \\n Test\\n
\\n )\\n }\\n})\\n```\\n\\n上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/16.e084ed27.chunk.js","module.exports = \"## Class\\n\\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\\n\\n```js\\nimport { classNames, extractClass } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\\n const cls = extractClass(props, 'o-my-class', {\\n 'other-class': true,\\n 'other-class-b': this.xxx === 1\\n })\\n\\n return (\\n \\n Test\\n
\\n )\\n }\\n})\\n```\\n\\n上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/class.md\n// module id = 54\n// module chunks = 16"],"sourceRoot":""}
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/17.42ec0c78.chunk.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([17],{53:function(e,t){e.exports="\n## Update\n\n`update` method is an important built-in core method for updating components themselves. For example:\n\n```js\nthis.update()\n```\n\nYou can also pass parameters to decide whether to ignore attributes in html mode and force updates:\n\n```js\nthis.update(true)\n```\n\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\n\n```js\nonMaskClick = ()=> {\n //change props\n this.props.show = false\n //prevent parent component from updating diff without results\n this.prevProps.show = false\n //update self and ignore attributes in html mode\n this.update(true)\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\n this.fire('close')\n}\n```"}});
2 | //# sourceMappingURL=17.42ec0c78.chunk.js.map
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/17.42ec0c78.chunk.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../static/js/17.42ec0c78.chunk.js","docs/en/update.md"],"names":["webpackJsonp","53","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/17.42ec0c78.chunk.js","sourcesContent":["webpackJsonp([17],{\n\n/***/ 53:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Update\\n\\n`update` method is an important built-in core method for updating components themselves. For example:\\n\\n```js\\nthis.update()\\n```\\n\\nYou can also pass parameters to decide whether to ignore attributes in html mode and force updates:\\n\\n```js\\nthis.update(true)\\n```\\n\\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\\n\\n```js\\nonMaskClick = ()=> {\\n //change props\\n this.props.show = false\\n //prevent parent component from updating diff without results\\n this.prevProps.show = false\\n //update self and ignore attributes in html mode\\n this.update(true)\\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\\n this.fire('close')\\n}\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/17.42ec0c78.chunk.js","module.exports = \"\\n## Update\\n\\n`update` method is an important built-in core method for updating components themselves. For example:\\n\\n```js\\nthis.update()\\n```\\n\\nYou can also pass parameters to decide whether to ignore attributes in html mode and force updates:\\n\\n```js\\nthis.update(true)\\n```\\n\\nFor example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.\\n\\n```js\\nonMaskClick = ()=> {\\n //change props\\n this.props.show = false\\n //prevent parent component from updating diff without results\\n this.prevProps.show = false\\n //update self and ignore attributes in html mode\\n this.update(true)\\n //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated\\n this.fire('close')\\n}\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/update.md\n// module id = 53\n// module chunks = 17"],"sourceRoot":""}
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/19.e37070eb.chunk.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([19],{51:function(n,e){n.exports="## Server-Side Rendering\n\nServer-Side Rendering(SSR) has two advantages:\n\n* Be friendly to SEO\n* Faster First Screen Display Time\n\nServer-side rendering (SSR) also has drawbacks, such as increasing server-side overhead. Developers can weigh whether to use SSR or pre-render directly with [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md). Pre-rendering does not require additional server-side overhead and generates skeleton screen directly at the time of construction, so there is no dynamic data content. SSR can return HTML generated by dynamic data, and also the serialization data can be returned with HTML.\n\n## Usage\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init-s my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n## Principle\n\nDefine component:\n\n```jsx\nimport { WeElement, define } from 'omio'\n\ndefine('my-element', class extends WeElement {\n install() {\n this.data = { liked: false }\n }\n\n static css = 'button{ color: red; }'\n\n render() {\n if (this.data.liked) {\n return 'You liked this.'\n }\n\n return \n }\n})\n```\n\nNote that omio is used here, SSR can only use omio, not omi, because OMI is web components, node can not render web components.\n\n> Both OMI and omio projects must use omio for SSR\n\nStart a node server:\n\n```jsx\nvar express = require('express')\nvar app = express()\nvar Omi = require('omio')\nrequire('./my-element')\n\napp.get('/', function (req, res) {\n const obj = Omi.renderToString(\n
\n )\n }\n})\n```\n\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\n\n* Assignment ahead of time\n* createRef\n\n### Assignment ahead of time\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.h1)\n }\n\n myRef = e => { this.h1 = e }\n\n render(props) {\n return (\n { this.h1 = e }} onClick={this.onClick}>Hello, world!
\n\n
\n )\n }\n})\n```\n\n### createRef\n\n```jsx\ndefine('my-element', class extends WeElement {\n onClick = (evt) => {\n console.log(this.myRef.current) //h1\n }\n\n myRef = createRef()\n\n render(props) {\n return (\n Hello, world!
\n\n
\n )\n }\n})\n```"}});
2 | //# sourceMappingURL=21.4551715a.chunk.js.map
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/21.4551715a.chunk.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../static/js/21.4551715a.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","49","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/21.4551715a.chunk.js","sourcesContent":["webpackJsonp([21],{\n\n/***/ 49:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n Hello, world!
\n\\n
\\n )\\n }\\n})\\n```\\n\\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\\n\\n* Assignment ahead of time\\n* createRef\\n\\n### Assignment ahead of time\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n { this.h1 = e }} onClick={this.onClick}>Hello, world!
\\n\\n
\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n Hello, world!
\\n\\n
\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/21.4551715a.chunk.js","module.exports = \"## Ref\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n render(props) {\\n return (\\n Hello, world!
\\n\\n
\\n )\\n }\\n})\\n```\\n\\nAdd `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:\\n\\n* Assignment ahead of time\\n* createRef\\n\\n### Assignment ahead of time\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.h1)\\n }\\n\\n myRef = e => { this.h1 = e }\\n\\n render(props) {\\n return (\\n { this.h1 = e }} onClick={this.onClick}>Hello, world!
\\n\\n
\\n )\\n }\\n})\\n```\\n\\n### createRef\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n onClick = (evt) => {\\n console.log(this.myRef.current) //h1\\n }\\n\\n myRef = createRef()\\n\\n render(props) {\\n return (\\n Hello, world!
\\n\\n
\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/ref.md\n// module id = 49\n// module chunks = 21"],"sourceRoot":""}
--------------------------------------------------------------------------------
/src/ecosystem/packages/omi-docs/static/js/22.016f3201.chunk.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([22],{48:function(n,e){n.exports="\n## Props\n\nTransfer data to sub elements through props, such as:\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n Hello, world!
\\nHello, {props.name}!
\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\nHello, {props.myObj.name}!
\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\nHello, {props.name}! Age {props.myAge}
\n )\n }\n})\n```\n\nSpecial attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:\n\n```html\n\nHello, {this.name}!
\n )\n }\n})\n```\n\nNext time the parent component updated and changed props, it will not affect the component."}}); 2 | //# sourceMappingURL=22.016f3201.chunk.js.map -------------------------------------------------------------------------------- /src/ecosystem/packages/omi-docs/static/js/25.734c7748.chunk.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([25],{45:function(e,n){e.exports="## Lifecycle\n\n| Lifecycle method | When it gets called |\n| ---------------- | -------------------------------------------- |\n| `install` | before the component gets mounted to the DOM |\n| `installed` | after the component gets mounted to the DOM |\n| `uninstall` | prior to removal from the DOM |\n| `beforeUpdate` | before update |\n| `updated` | after update |\n| `beforeRender` | before `render()` |\n| `receiveProps` | parent element re-render will trigger it |\n\nFor example:\n\n```js\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-timer', class extends WeElement {\n static observe = true\n\n data = {\n seconds: 0\n }\n\n tick() {\n this.data.seconds++\n }\n\n install() {\n this.interval = setInterval(() => this.tick(), 1000)\n }\n\n uninstall() {\n clearInterval(this.interval)\n }\n\n render() {\n returnSeconds: {this.data.seconds}
\n }\n})\n\nrender(Seconds: {this.data.seconds}
\\n }\\n})\\n\\nrender(Seconds: {this.data.seconds}
\\n }\\n})\\n\\nrender(Hello, world!
\n```\n\n## Data binding\n\nVariables or expressions, or JS statement blocks, are wrapped in single parentheses according to the binding:\n\n```jsx\n{user.name}
\n```\n\nTry it in Omi's render method:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return{props.name}
\n }\n})\n```\n\nUsing element:\n\n```jsx\n{user.age > 18 ? 'Adult' : 'Minor'}\n```\n\nJSX can also be embedded in expressions:\n\n```jsx\n{ user.age > 18 ? Adult : Minor }\n```\n\nThe above three elements are actually if else. If only if, you can:\n\n```jsx\n{ user.age > 18 && \u6210\u5e74 }\n```\n\nPowerful!\n\n## List rendering\n\nDatasource:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX rendering:\n\n```jsx\n\n {arr.map(item =>\n - {item.message}
\n )}\n
\n```\n\nEquate to:\n\n```jsx\n\n {\n arr.map(item => {\n return - {item.message}
\n })\n }\n
\n```\n\nIf it's a `{}'package, you need `return'. If you need an index:\n\n```jsx\n\n {arr.map((item, index) =>\n - {index}: {item.message}
\n )}\n
\n```\n\n## Comprehensive example\n\nHere is a ninety-nine multiplication table:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n \n {props.numbers.map((a, indexA) =>\n \n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && {a}*{b}={a * b} \n })\n }\n \n )}\n \n )\n }\n})\n\nrender(
\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n I really like the trend towards \"frameworks\" that:
\"export default class WeElement extends HTMLElement {..}\"
This one, Omi, is from Tencent. \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\nThis page demonstrates using Omi **with no build tooling**:\n\n```html\n
{ user.age > 18 ? Adult : Minor }\n```\n\nThe above three elements are actually if else. If only if, you can:\n\n```jsx\n{ user.age > 18 && \u6210\u5e74 }\n```\n\nPowerful!\n\n## List rendering\n\nDatasource:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX rendering:\n\n```jsx\n\n {arr.map(item =>\n - {item.message}
\n )}\n
\n```\n\nEquate to:\n\n```jsx\n\n {\n arr.map(item => {\n return - {item.message}
\n })\n }\n
\n```\n\nIf it's a `{}'package, you need `return'. If you need an index:\n\n```jsx\n\n {arr.map((item, index) =>\n - {index}: {item.message}
\n )}\n
\n```\n\n## Comprehensive example\n\nHere is a ninety-nine multiplication table:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n \n {props.numbers.map((a, indexA) =>\n \n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && {a}*{b}={a * b} \n })\n }\n \n )}\n \n )\n }\n})\n\nrender(
\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n I really like the trend towards \"frameworks\" that:
\"export default class WeElement extends HTMLElement {..}\"
This one, Omi, is from Tencent. \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\nThis page demonstrates using Omi **with no build tooling**:\n\n```html\n
{ user.age > 18 && \u6210\u5e74 }\n```\n\nPowerful!\n\n## List rendering\n\nDatasource:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX rendering:\n\n```jsx\n\n {arr.map(item =>\n - {item.message}
\n )}\n
\n```\n\nEquate to:\n\n```jsx\n\n {\n arr.map(item => {\n return - {item.message}
\n })\n }\n
\n```\n\nIf it's a `{}'package, you need `return'. If you need an index:\n\n```jsx\n\n {arr.map((item, index) =>\n - {index}: {item.message}
\n )}\n
\n```\n\n## Comprehensive example\n\nHere is a ninety-nine multiplication table:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n \n {props.numbers.map((a, indexA) =>\n \n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && {a}*{b}={a * b} \n })\n }\n \n )}\n \n )\n }\n})\n\nrender(
\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n I really like the trend towards \"frameworks\" that:
\"export default class WeElement extends HTMLElement {..}\"
This one, Omi, is from Tencent. \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\nThis page demonstrates using Omi **with no build tooling**:\n\n```html\n
- \n {arr.map(item =>\n
- {item.message} \n )}\n
- \n {\n arr.map(item => {\n return
- {item.message} \n })\n }\n
- \n {arr.map((item, index) =>\n
- {index}: {item.message} \n )}\n
\n {props.numbers.map((a, indexA) =>\n
\n )\n }\n})\n\nrender(\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && {a}*{b}={a * b} \n })\n }\n
\n )}\n \n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n I really like the trend towards \"frameworks\" that:
\"export default class WeElement extends HTMLElement {..}\"
This one, Omi, is from Tencent. \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\nThis page demonstrates using Omi **with no build tooling**:\n\n```html\n