doc - build omis site
This commit is contained in:
dntzhang
parent
0987e14ef3
commit
77858c808d
|
|
@ -58,6 +58,21 @@ span{
|
|||
render(<Counter />, 'body')
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
```jsx
|
||||
const Comp = (props, store, _, $) => {
|
||||
|
||||
}
|
||||
|
||||
Comp.store = (_, $) => {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
* `_` 代表 `component`
|
||||
* `$` 代表 `globalStore`
|
||||
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -58,6 +58,21 @@ span{
|
|||
render(<Counter />, 'body')
|
||||
```
|
||||
|
||||
## Description of parameters
|
||||
|
||||
```jsx
|
||||
const Comp = (props, store, _, $) => {
|
||||
|
||||
}
|
||||
|
||||
Comp.store = (_, $) => {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
* `_` represents `component`
|
||||
* `$` represents `globalStore`
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const config = {
|
|||
{ name: 'Props', md: 'props' },
|
||||
{ name: '事件', md: 'event' },
|
||||
{ name: '生命周期', md: 'lifecycle' },
|
||||
// { name: 'Ref', md: 'ref' },
|
||||
{ name: 'Ref', md: 'ref' },
|
||||
{ name: 'GlobalStore-$', md: 'global-store' },
|
||||
{ name: 'CSS', md: 'css' }
|
||||
]
|
||||
|
|
@ -36,7 +36,7 @@ const config = {
|
|||
{ name: 'Props', md: 'props' },
|
||||
{ name: 'Event', md: 'event' },
|
||||
{ name: 'Lifecycle', md: 'lifecycle' },
|
||||
// { name: 'Ref', md: 'ref' },
|
||||
{ name: 'Ref', md: 'ref' },
|
||||
{ name: 'GlobalStore-$', md: 'global-store' },
|
||||
{ name: 'CSS', md: 'css' }
|
||||
]
|
||||
|
|
|
|||
|
|
@ -63,4 +63,19 @@ const Counter = (props, store) => {
|
|||
}
|
||||
```
|
||||
|
||||
## Description of parameters
|
||||
|
||||
```jsx
|
||||
const Comp = (props, store, _, $) => {
|
||||
|
||||
}
|
||||
|
||||
Comp.store = (_, $) => {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
* `_` represents `component`
|
||||
* `$` represents `globalStore`
|
||||
|
||||
You're already getting started! Congratulations!
|
||||
|
|
|
|||
|
|
@ -1,62 +1,18 @@
|
|||
## Ref
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
}
|
||||
Ref provides a way to access DOM nodes or Components created in render methods.
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
```jsx
|
||||
const HelloMessage = (props, store, _) => {
|
||||
return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)
|
||||
}
|
||||
|
||||
HelloMessage.store = _ => {
|
||||
return {
|
||||
installed() {
|
||||
//h1 dom element
|
||||
console.log(_.h1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
Add `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:
|
||||
|
||||
* Assignment ahead of time
|
||||
* createRef
|
||||
|
||||
### Assignment ahead of time
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
}
|
||||
|
||||
myRef = e => { this.h1 = e }
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### createRef
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.myRef.current) //h1
|
||||
}
|
||||
|
||||
myRef = createRef()
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
|
@ -63,4 +63,19 @@ const Counter = (props, store) => {
|
|||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
```jsx
|
||||
const Comp = (props, store, _, $) => {
|
||||
|
||||
}
|
||||
|
||||
Comp.store = (_, $) => {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
* `_` 代表 `component`
|
||||
* `$` 代表 `globalStore`
|
||||
|
||||
恭喜你已经入门！
|
||||
|
|
|
|||
|
|
@ -1,64 +1,18 @@
|
|||
## Ref
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：
|
||||
|
||||
* 提前赋值
|
||||
* createRef
|
||||
|
||||
### 提前赋值
|
||||
Ref 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 Component。
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
const HelloMessage = (props, store, _) => {
|
||||
return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)
|
||||
}
|
||||
|
||||
HelloMessage.store = _ => {
|
||||
return {
|
||||
installed() {
|
||||
//h1 dom element
|
||||
console.log(_.h1)
|
||||
}
|
||||
}
|
||||
|
||||
myRef = e => { this.h1 = e }
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### createRef
|
||||
|
||||
你也可以使用 `createRef` 来得到更高的性能:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.myRef.current) //h1
|
||||
}
|
||||
|
||||
myRef = createRef()
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.4dd07f49.css",
|
||||
"cn.css.map": "static/css/cn.4dd07f49.css.map",
|
||||
"cn.js": "static/js/cn.00c021ee.js",
|
||||
"cn.js.map": "static/js/cn.00c021ee.js.map",
|
||||
"cn.js": "static/js/cn.00679351.js",
|
||||
"cn.js.map": "static/js/cn.00679351.js.map",
|
||||
"index.css": "static/css/index.4dd07f49.css",
|
||||
"index.css.map": "static/css/index.4dd07f49.css.map",
|
||||
"index.js": "static/js/index.0673f9b8.js",
|
||||
"index.js.map": "static/js/index.0673f9b8.js.map",
|
||||
"static/js/0.39ef1a0a.chunk.js": "static/js/0.39ef1a0a.chunk.js",
|
||||
"static/js/0.39ef1a0a.chunk.js.map": "static/js/0.39ef1a0a.chunk.js.map",
|
||||
"index.js": "static/js/index.55d02fa3.js",
|
||||
"index.js.map": "static/js/index.55d02fa3.js.map",
|
||||
"static/js/0.8011c5a4.chunk.js": "static/js/0.8011c5a4.chunk.js",
|
||||
"static/js/0.8011c5a4.chunk.js.map": "static/js/0.8011c5a4.chunk.js.map",
|
||||
"static/js/1.50ce9893.chunk.js": "static/js/1.50ce9893.chunk.js",
|
||||
"static/js/1.50ce9893.chunk.js.map": "static/js/1.50ce9893.chunk.js.map",
|
||||
"static/js/10.079da8e1.chunk.js": "static/js/10.079da8e1.chunk.js",
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
"static/js/11.539ad1d3.chunk.js.map": "static/js/11.539ad1d3.chunk.js.map",
|
||||
"static/js/12.4e8c5423.chunk.js": "static/js/12.4e8c5423.chunk.js",
|
||||
"static/js/12.4e8c5423.chunk.js.map": "static/js/12.4e8c5423.chunk.js.map",
|
||||
"static/js/13.395c8cbd.chunk.js": "static/js/13.395c8cbd.chunk.js",
|
||||
"static/js/13.395c8cbd.chunk.js.map": "static/js/13.395c8cbd.chunk.js.map",
|
||||
"static/js/13.29ee0a83.chunk.js": "static/js/13.29ee0a83.chunk.js",
|
||||
"static/js/13.29ee0a83.chunk.js.map": "static/js/13.29ee0a83.chunk.js.map",
|
||||
"static/js/14.7a34335f.chunk.js": "static/js/14.7a34335f.chunk.js",
|
||||
"static/js/14.7a34335f.chunk.js.map": "static/js/14.7a34335f.chunk.js.map",
|
||||
"static/js/15.37ec360b.chunk.js": "static/js/15.37ec360b.chunk.js",
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
"static/js/2.e1f2d88b.chunk.js.map": "static/js/2.e1f2d88b.chunk.js.map",
|
||||
"static/js/3.f2d1a5c5.chunk.js": "static/js/3.f2d1a5c5.chunk.js",
|
||||
"static/js/3.f2d1a5c5.chunk.js.map": "static/js/3.f2d1a5c5.chunk.js.map",
|
||||
"static/js/4.b83b6976.chunk.js": "static/js/4.b83b6976.chunk.js",
|
||||
"static/js/4.b83b6976.chunk.js.map": "static/js/4.b83b6976.chunk.js.map",
|
||||
"static/js/4.58424fa9.chunk.js": "static/js/4.58424fa9.chunk.js",
|
||||
"static/js/4.58424fa9.chunk.js.map": "static/js/4.58424fa9.chunk.js.map",
|
||||
"static/js/5.bcc359c6.chunk.js": "static/js/5.bcc359c6.chunk.js",
|
||||
"static/js/5.bcc359c6.chunk.js.map": "static/js/5.bcc359c6.chunk.js.map",
|
||||
"static/js/6.e19277b4.chunk.js": "static/js/6.e19277b4.chunk.js",
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
"static/js/7.ba732eb4.chunk.js.map": "static/js/7.ba732eb4.chunk.js.map",
|
||||
"static/js/8.8d224a42.chunk.js": "static/js/8.8d224a42.chunk.js",
|
||||
"static/js/8.8d224a42.chunk.js.map": "static/js/8.8d224a42.chunk.js.map",
|
||||
"static/js/9.cd41291b.chunk.js": "static/js/9.cd41291b.chunk.js",
|
||||
"static/js/9.cd41291b.chunk.js.map": "static/js/9.cd41291b.chunk.js.map",
|
||||
"static/js/9.681a35ad.chunk.js": "static/js/9.681a35ad.chunk.js",
|
||||
"static/js/9.681a35ad.chunk.js.map": "static/js/9.681a35ad.chunk.js.map",
|
||||
"static/media/omi-logo2019.svg": "static/media/omi-logo2019.923166c3.svg"
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
<!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="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.4dd07f49.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/prism.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/cn.00c021ee.js"></script></body></html>
|
||||
<!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="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.4dd07f49.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/prism.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/cn.00679351.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
<!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="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.4dd07f49.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/prism.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.0673f9b8.js"></script></body></html>
|
||||
<!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="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.4dd07f49.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/prism.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.55d02fa3.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
"use strict";var precacheConfig=[["./cn.html","2c692885c5fba3ff602a26632a496617"],["./index.html","90ecc2c312d1a75316525ce00561afbe"],["./static/css/cn.4dd07f49.css","476d16186dc05ff3faa0a5d4dc9ac72c"],["./static/css/index.4dd07f49.css","9ad340cc60e8fed0f9856b562708144e"],["./static/js/0.39ef1a0a.chunk.js","3dbeff7f40f6eac2d93851b067d71463"],["./static/js/1.50ce9893.chunk.js","981e170f32f93363756f47acc355b3fb"],["./static/js/10.079da8e1.chunk.js","7d2efbdfe324d4541bec143b626b73bf"],["./static/js/11.539ad1d3.chunk.js","69dc127c5687d87a9ce565663fe08677"],["./static/js/12.4e8c5423.chunk.js","49d5076f482fc5291c9dde2a1d97ea93"],["./static/js/13.395c8cbd.chunk.js","e542ca281f3e2ae9e96cf4256e81a40c"],["./static/js/14.7a34335f.chunk.js","904565ec073b72cdc66dad6cd4df31cd"],["./static/js/15.37ec360b.chunk.js","3284817b7224bd4fe72cdf2b3b52f4d0"],["./static/js/16.90a95764.chunk.js","246eeb90c63366cf2dcc68a06b9912a5"],["./static/js/17.4b2bd9bb.chunk.js","5d634dd578578cecf497da7d9dce5994"],["./static/js/2.e1f2d88b.chunk.js","1c3fbd6f6a07672be0f63e1689c896ae"],["./static/js/3.f2d1a5c5.chunk.js","e4dd0a90e6db1cd957971f2207059481"],["./static/js/4.b83b6976.chunk.js","784835c053da0f5b5fdf0627a0efa243"],["./static/js/5.bcc359c6.chunk.js","c3fa370d0c2ae439591ad07f031d9df1"],["./static/js/6.e19277b4.chunk.js","bfa94015a5274e7730f40e94a0d535b7"],["./static/js/7.ba732eb4.chunk.js","5b4b84682920c6e878c945330e7d8874"],["./static/js/8.8d224a42.chunk.js","794340334a59d79664621541b3ae4236"],["./static/js/9.cd41291b.chunk.js","46a4e4d11f6e213f803d0114328bd0d3"],["./static/js/cn.00c021ee.js","3f92bca1cf4db6ffb9befe6d74b5ac27"],["./static/js/index.0673f9b8.js","149a3ae8fc2b788d6270a1415565c1de"],["./static/media/omi-logo2019.923166c3.svg","923166c362dce831a15c447b19a622f9"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var c=new URL(e);return"/"===c.pathname.slice(-1)&&(c.pathname+=t),c.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,c,n){var a=new URL(e);return n&&a.pathname.match(n)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(c)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var c=new URL(t).pathname;return e.some(function(e){return c.match(e)})},stripIgnoredUrlParameters=function(e,c){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 c.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],c=e[1],n=new URL(t,self.location),a=createCacheKey(n,hashParamName,c,/\.\w{8}\./);return[n.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(n){return setOfCachedUrls(n).then(function(c){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!c.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 n.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var c=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(!c.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,c=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),n="index.html";(e=urlsToCacheKeys.has(c))||(c=addDirectoryIndex(c,n),e=urlsToCacheKeys.has(c));var a="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(c=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(c)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(c)).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)}))}});
|
||||
"use strict";var precacheConfig=[["./cn.html","4afbd43d89bb4a1707576a7ea89c4102"],["./index.html","16fcd4d77b33dbdc96fddb402a2c6a5a"],["./static/css/cn.4dd07f49.css","476d16186dc05ff3faa0a5d4dc9ac72c"],["./static/css/index.4dd07f49.css","9ad340cc60e8fed0f9856b562708144e"],["./static/js/0.8011c5a4.chunk.js","1b2dba0303df648f158e1a3efc665566"],["./static/js/1.50ce9893.chunk.js","981e170f32f93363756f47acc355b3fb"],["./static/js/10.079da8e1.chunk.js","7d2efbdfe324d4541bec143b626b73bf"],["./static/js/11.539ad1d3.chunk.js","69dc127c5687d87a9ce565663fe08677"],["./static/js/12.4e8c5423.chunk.js","49d5076f482fc5291c9dde2a1d97ea93"],["./static/js/13.29ee0a83.chunk.js","a1593dfb62a0797bfdd6eda64e307e25"],["./static/js/14.7a34335f.chunk.js","904565ec073b72cdc66dad6cd4df31cd"],["./static/js/15.37ec360b.chunk.js","3284817b7224bd4fe72cdf2b3b52f4d0"],["./static/js/16.90a95764.chunk.js","246eeb90c63366cf2dcc68a06b9912a5"],["./static/js/17.4b2bd9bb.chunk.js","5d634dd578578cecf497da7d9dce5994"],["./static/js/2.e1f2d88b.chunk.js","1c3fbd6f6a07672be0f63e1689c896ae"],["./static/js/3.f2d1a5c5.chunk.js","e4dd0a90e6db1cd957971f2207059481"],["./static/js/4.58424fa9.chunk.js","753f5fdda07cee60d26ad03e85ca2ac0"],["./static/js/5.bcc359c6.chunk.js","c3fa370d0c2ae439591ad07f031d9df1"],["./static/js/6.e19277b4.chunk.js","bfa94015a5274e7730f40e94a0d535b7"],["./static/js/7.ba732eb4.chunk.js","5b4b84682920c6e878c945330e7d8874"],["./static/js/8.8d224a42.chunk.js","794340334a59d79664621541b3ae4236"],["./static/js/9.681a35ad.chunk.js","cb4528ca5b1b0e47b6eae8f1e189ffe6"],["./static/js/cn.00679351.js","f72cca2d4787341c9138f19f69470c53"],["./static/js/index.55d02fa3.js","02197100d446a66264bbf26a60329fe6"],["./static/media/omi-logo2019.923166c3.svg","923166c362dce831a15c447b19a622f9"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var c=new URL(e);return"/"===c.pathname.slice(-1)&&(c.pathname+=t),c.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,c,a){var n=new URL(e);return a&&n.pathname.match(a)||(n.search+=(n.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(c)),n.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var c=new URL(t).pathname;return e.some(function(e){return c.match(e)})},stripIgnoredUrlParameters=function(e,c){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 c.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],c=e[1],a=new URL(t,self.location),n=createCacheKey(a,hashParamName,c,/\.\w{8}\./);return[a.toString(),n]}));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(a){return setOfCachedUrls(a).then(function(c){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!c.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 a.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var c=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(!c.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,c=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),a="index.html";(e=urlsToCacheKeys.has(c))||(c=addDirectoryIndex(c,a),e=urlsToCacheKeys.has(c));var n="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(c=new URL(n,self.location).toString(),e=urlsToCacheKeys.has(c)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(c)).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 @@
|
|||
webpackJsonp([0],{56:function(n,e){n.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 <div>\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n\u5728\u5143\u7d20\u4e0a\u6dfb\u52a0 `ref={e => { this.anyNameYouWant = e }}` \uff0c\u7136\u540e\u4f60\u5c31\u53ef\u4ee5 JS \u4ee3\u7801\u91cc\u4f7f\u7528 `this.anyNameYouWant` \u8bbf\u95ee\u8be5\u5143\u7d20\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u4e24\u79cd\u65b9\u5f0f\u6765\u63d0\u9ad8 update \u7684\u6027\u80fd\uff1a\n\n* \u63d0\u524d\u8d4b\u503c\n* createRef\n\n### \u63d0\u524d\u8d4b\u503c\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 <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```\n\n### createRef\n\n\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 `createRef` \u6765\u5f97\u5230\u66f4\u9ad8\u7684\u6027\u80fd:\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 <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=0.39ef1a0a.chunk.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/0.39ef1a0a.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","56","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/0.39ef1a0a.chunk.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 56:\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 <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\\n\\n* 提前赋值\\n* createRef\\n\\n### 提前赋值\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.39ef1a0a.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 <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\\n\\n* 提前赋值\\n* createRef\\n\\n### 提前赋值\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\\n\\n### createRef\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/ref.md\n// module id = 56\n// module chunks = 0"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([0],{56:function(n,e){n.exports="## Ref\n\nRef \u63d0\u4f9b\u4e86\u4e00\u79cd\u65b9\u5f0f\uff0c\u5141\u8bb8\u6211\u4eec\u8bbf\u95ee DOM \u8282\u70b9\u6216\u5728 render \u65b9\u6cd5\u4e2d\u521b\u5efa\u7684 Component\u3002\n\n```jsx\nconst HelloMessage = (props, store, _) => {\n return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)\n}\n\nHelloMessage.store = _ => {\n return {\n installed() {\n //h1 dom element\n console.log(_.h1)\n }\n }\n}\n```"}});
|
||||
//# sourceMappingURL=0.8011c5a4.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/0.8011c5a4.chunk.js","docs/zh-cn/ref.md"],"names":["webpackJsonp","56","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/0.8011c5a4.chunk.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 56:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Ref\\n\\nRef 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 Component。\\n\\n```jsx\\nconst HelloMessage = (props, store, _) => {\\n return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)\\n}\\n\\nHelloMessage.store = _ => {\\n return {\\n installed() {\\n //h1 dom element\\n console.log(_.h1)\\n }\\n }\\n}\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.8011c5a4.chunk.js","module.exports = \"## Ref\\n\\nRef 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 Component。\\n\\n```jsx\\nconst HelloMessage = (props, store, _) => {\\n return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)\\n}\\n\\nHelloMessage.store = _ => {\\n return {\\n installed() {\\n //h1 dom element\\n console.log(_.h1)\\n }\\n }\\n}\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/ref.md\n// module id = 56\n// module chunks = 0"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([13],{43:function(n,t){n.exports="## What's Omis \uff1f\n\nOmis (pronounced /\u02c8om\u026as/) is Functional Style, Easy Store and Hyperscript Component Framework in 3KB.\n\n* Functional style but non-functional programming\n* Structure-Style-Behavior Separation\n* Hyperscript is visually more friendly\n* Each component can have a store and be de-centralized\n* Support global store to share data and update on demand\n* Each component store has an update method that executes the method to customize local refresh components\n\n[\u2192 Omis Codepen Demos](https://codepen.io/collection/XjLaRo/)\n\n## Add Omi in One Minute\n\n```jsx\nimport { render, h } from 'omi'\n\nconst Counter = (props, store) => {\n return (\n <div>\n <button onClick={store.sub}>-</button>\n <span>{store.count}</span>\n <button onClick={store.add}>+</button>\n </div>\n )\n}\n\nCounter.store = _ => {\n return {\n count: 1,\n add() {\n this.count++\n this.update()\n },\n sub() {\n this.count--\n this.update()\n }\n }\n}\n\nCounter.css = `\nspan{\n color: red;\n}\n`\n\nrender(<Counter />, 'body')\n```\n\nYou can also use hyperscript **with no build tooling**:\n\n```js\nconst Counter = (props, store) => {\n return (\n h('div', {}, [\n h('button', { onClick: store.sub }, '-'),\n h('span', {}, store.count),\n h('button', { onClick: store.add }, '+')\n ])\n )\n}\n```\n\nYou're already getting started! Congratulations!\n"}});
|
||||
//# sourceMappingURL=13.395c8cbd.chunk.js.map
|
||||
webpackJsonp([13],{43:function(n,o){n.exports="## What's Omis \uff1f\n\nOmis (pronounced /\u02c8om\u026as/) is Functional Style, Easy Store and Hyperscript Component Framework in 3KB.\n\n* Functional style but non-functional programming\n* Structure-Style-Behavior Separation\n* Hyperscript is visually more friendly\n* Each component can have a store and be de-centralized\n* Support global store to share data and update on demand\n* Each component store has an update method that executes the method to customize local refresh components\n\n[\u2192 Omis Codepen Demos](https://codepen.io/collection/XjLaRo/)\n\n## Add Omi in One Minute\n\n```jsx\nimport { render, h } from 'omi'\n\nconst Counter = (props, store) => {\n return (\n <div>\n <button onClick={store.sub}>-</button>\n <span>{store.count}</span>\n <button onClick={store.add}>+</button>\n </div>\n )\n}\n\nCounter.store = _ => {\n return {\n count: 1,\n add() {\n this.count++\n this.update()\n },\n sub() {\n this.count--\n this.update()\n }\n }\n}\n\nCounter.css = `\nspan{\n color: red;\n}\n`\n\nrender(<Counter />, 'body')\n```\n\nYou can also use hyperscript **with no build tooling**:\n\n```js\nconst Counter = (props, store) => {\n return (\n h('div', {}, [\n h('button', { onClick: store.sub }, '-'),\n h('span', {}, store.count),\n h('button', { onClick: store.add }, '+')\n ])\n )\n}\n```\n\n## Description of parameters\n\n```jsx\nconst Comp = (props, store, _, $) => {\n\n}\n\nComp.store = (_, $) => {\n\n}\n```\n\n* `_` represents `component`\n* `$` represents `globalStore`\n\nYou're already getting started! Congratulations!\n"}});
|
||||
//# sourceMappingURL=13.29ee0a83.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/13.29ee0a83.chunk.js","docs/en/introduction.md"],"names":["webpackJsonp","43","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/13.29ee0a83.chunk.js","sourcesContent":["webpackJsonp([13],{\n\n/***/ 43:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## What's Omis ？\\n\\nOmis (pronounced /ˈomɪs/) is Functional Style, Easy Store and Hyperscript Component Framework in 3KB.\\n\\n* Functional style but non-functional programming\\n* Structure-Style-Behavior Separation\\n* Hyperscript is visually more friendly\\n* Each component can have a store and be de-centralized\\n* Support global store to share data and update on demand\\n* Each component store has an update method that executes the method to customize local refresh components\\n\\n[→ Omis Codepen Demos](https://codepen.io/collection/XjLaRo/)\\n\\n## Add Omi in One Minute\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\nYou can also use hyperscript **with no build tooling**:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\n## Description of parameters\\n\\n```jsx\\nconst Comp = (props, store, _, $) => {\\n\\n}\\n\\nComp.store = (_, $) => {\\n\\n}\\n```\\n\\n* `_` represents `component`\\n* `$` represents `globalStore`\\n\\nYou're already getting started! Congratulations!\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/13.29ee0a83.chunk.js","module.exports = \"## What's Omis ？\\n\\nOmis (pronounced /ˈomɪs/) is Functional Style, Easy Store and Hyperscript Component Framework in 3KB.\\n\\n* Functional style but non-functional programming\\n* Structure-Style-Behavior Separation\\n* Hyperscript is visually more friendly\\n* Each component can have a store and be de-centralized\\n* Support global store to share data and update on demand\\n* Each component store has an update method that executes the method to customize local refresh components\\n\\n[→ Omis Codepen Demos](https://codepen.io/collection/XjLaRo/)\\n\\n## Add Omi in One Minute\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\nYou can also use hyperscript **with no build tooling**:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\n## Description of parameters\\n\\n```jsx\\nconst Comp = (props, store, _, $) => {\\n\\n}\\n\\nComp.store = (_, $) => {\\n\\n}\\n```\\n\\n* `_` represents `component`\\n* `$` represents `globalStore`\\n\\nYou're already getting started! Congratulations!\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/introduction.md\n// module id = 43\n// module chunks = 13"],"sourceRoot":""}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/13.395c8cbd.chunk.js","docs/en/introduction.md"],"names":["webpackJsonp","43","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/13.395c8cbd.chunk.js","sourcesContent":["webpackJsonp([13],{\n\n/***/ 43:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## What's Omis ？\\n\\nOmis (pronounced /ˈomɪs/) is Functional Style, Easy Store and Hyperscript Component Framework in 3KB.\\n\\n* Functional style but non-functional programming\\n* Structure-Style-Behavior Separation\\n* Hyperscript is visually more friendly\\n* Each component can have a store and be de-centralized\\n* Support global store to share data and update on demand\\n* Each component store has an update method that executes the method to customize local refresh components\\n\\n[→ Omis Codepen Demos](https://codepen.io/collection/XjLaRo/)\\n\\n## Add Omi in One Minute\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\nYou can also use hyperscript **with no build tooling**:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\nYou're already getting started! Congratulations!\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/13.395c8cbd.chunk.js","module.exports = \"## What's Omis ？\\n\\nOmis (pronounced /ˈomɪs/) is Functional Style, Easy Store and Hyperscript Component Framework in 3KB.\\n\\n* Functional style but non-functional programming\\n* Structure-Style-Behavior Separation\\n* Hyperscript is visually more friendly\\n* Each component can have a store and be de-centralized\\n* Support global store to share data and update on demand\\n* Each component store has an update method that executes the method to customize local refresh components\\n\\n[→ Omis Codepen Demos](https://codepen.io/collection/XjLaRo/)\\n\\n## Add Omi in One Minute\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\nYou can also use hyperscript **with no build tooling**:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\nYou're already getting started! Congratulations!\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/introduction.md\n// module id = 43\n// module chunks = 13"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([4],{52:function(n,t){n.exports="## Omis\n\nOmis (\u8bfb /\u02c8om\u026as/) \u662f\u51fd\u6570\u5f0f\u98ce\u683c\uff0c\u81ea\u5e26 store \u4e14 hyperscript \u53cb\u597d\u7684\u7ec4\u4ef6\u6846\u67b6\uff0c\u53ea\u6709 3KB\u3002\n\n* \u51fd\u6570\u5f0f\u98ce\u683c\u4f46\u975e\u51fd\u6570\u5f0f\u7f16\u7a0b \n* \u7ed3\u6784-\u6837\u5f0f-\u884c\u4e3a\u5206\u79bb\n* hyperscript \u89c6\u89c9\u4e0a\u66f4\u52a0\u53cb\u597d\n* \u6bcf\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u5e26\u6709\u4e00\u4e2a store\uff0c\u53bb\u4e2d\u5fc3\u5316\n* \u652f\u6301\u5168\u5c40 store \u5171\u4eab\u6570\u636e\uff0c\u5e76\u4e14\u6309\u9700\u5c40\u90e8\u66f4\u65b0\u7ec4\u4ef6\n* \u6bcf\u4e2a\u7ec4\u4ef6 store \u62e5\u6709 update \u65b9\u6cd5\uff0c\u6267\u884c\u8be5\u65b9\u6cd5\u81ea\u5b9a\u5c40\u90e8\u5237\u65b0\u7ec4\u4ef6\n\n[\u2192 Omis \u5728\u7ebf\u4f8b\u5b50](https://codepen.io/collection/XjLaRo/)\n\n## \u4e00\u5206\u949f\u5165\u95e8\n\n```jsx\nimport { render, h } from 'omi'\n\nconst Counter = (props, store) => {\n return (\n <div>\n <button onClick={store.sub}>-</button>\n <span>{store.count}</span>\n <button onClick={store.add}>+</button>\n </div>\n )\n}\n\nCounter.store = _ => {\n return {\n count: 1,\n add() {\n this.count++\n this.update()\n },\n sub() {\n this.count--\n this.update()\n }\n }\n}\n\nCounter.css = `\nspan{\n color: red;\n}\n`\n\nrender(<Counter />, 'body')\n```\n\n\u4e5f\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 hyperscript\uff0c\u65e0\u9700\u4efb\u4f55\u7f16\u8bd1\u76f4\u63a5\u8fd0\u884c:\n\n```js\nconst Counter = (props, store) => {\n return (\n h('div', {}, [\n h('button', { onClick: store.sub }, '-'),\n h('span', {}, store.count),\n h('button', { onClick: store.add }, '+')\n ])\n )\n}\n```\n\n\u606d\u559c\u4f60\u5df2\u7ecf\u5165\u95e8\uff01\n"}});
|
||||
//# sourceMappingURL=4.b83b6976.chunk.js.map
|
||||
webpackJsonp([4],{52:function(n,o){n.exports="## Omis\n\nOmis (\u8bfb /\u02c8om\u026as/) \u662f\u51fd\u6570\u5f0f\u98ce\u683c\uff0c\u81ea\u5e26 store \u4e14 hyperscript \u53cb\u597d\u7684\u7ec4\u4ef6\u6846\u67b6\uff0c\u53ea\u6709 3KB\u3002\n\n* \u51fd\u6570\u5f0f\u98ce\u683c\u4f46\u975e\u51fd\u6570\u5f0f\u7f16\u7a0b \n* \u7ed3\u6784-\u6837\u5f0f-\u884c\u4e3a\u5206\u79bb\n* hyperscript \u89c6\u89c9\u4e0a\u66f4\u52a0\u53cb\u597d\n* \u6bcf\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u5e26\u6709\u4e00\u4e2a store\uff0c\u53bb\u4e2d\u5fc3\u5316\n* \u652f\u6301\u5168\u5c40 store \u5171\u4eab\u6570\u636e\uff0c\u5e76\u4e14\u6309\u9700\u5c40\u90e8\u66f4\u65b0\u7ec4\u4ef6\n* \u6bcf\u4e2a\u7ec4\u4ef6 store \u62e5\u6709 update \u65b9\u6cd5\uff0c\u6267\u884c\u8be5\u65b9\u6cd5\u81ea\u5b9a\u5c40\u90e8\u5237\u65b0\u7ec4\u4ef6\n\n[\u2192 Omis \u5728\u7ebf\u4f8b\u5b50](https://codepen.io/collection/XjLaRo/)\n\n## \u4e00\u5206\u949f\u5165\u95e8\n\n```jsx\nimport { render, h } from 'omi'\n\nconst Counter = (props, store) => {\n return (\n <div>\n <button onClick={store.sub}>-</button>\n <span>{store.count}</span>\n <button onClick={store.add}>+</button>\n </div>\n )\n}\n\nCounter.store = _ => {\n return {\n count: 1,\n add() {\n this.count++\n this.update()\n },\n sub() {\n this.count--\n this.update()\n }\n }\n}\n\nCounter.css = `\nspan{\n color: red;\n}\n`\n\nrender(<Counter />, 'body')\n```\n\n\u4e5f\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 hyperscript\uff0c\u65e0\u9700\u4efb\u4f55\u7f16\u8bd1\u76f4\u63a5\u8fd0\u884c:\n\n```js\nconst Counter = (props, store) => {\n return (\n h('div', {}, [\n h('button', { onClick: store.sub }, '-'),\n h('span', {}, store.count),\n h('button', { onClick: store.add }, '+')\n ])\n )\n}\n```\n\n## \u53c2\u6570\u8bf4\u660e\n\n```jsx\nconst Comp = (props, store, _, $) => {\n\n}\n\nComp.store = (_, $) => {\n\n}\n```\n\n* `_` \u4ee3\u8868 `component`\n* `$` \u4ee3\u8868 `globalStore`\n\n\u606d\u559c\u4f60\u5df2\u7ecf\u5165\u95e8\uff01\n"}});
|
||||
//# sourceMappingURL=4.58424fa9.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/4.58424fa9.chunk.js","docs/zh-cn/introduction.md"],"names":["webpackJsonp","52","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/4.58424fa9.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 52:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Omis\\n\\nOmis (读 /ˈomɪs/) 是函数式风格，自带 store 且 hyperscript 友好的组件框架，只有 3KB。\\n\\n* 函数式风格但非函数式编程 \\n* 结构-样式-行为分离\\n* hyperscript 视觉上更加友好\\n* 每个组件可以带有一个 store，去中心化\\n* 支持全局 store 共享数据，并且按需局部更新组件\\n* 每个组件 store 拥有 update 方法，执行该方法自定局部刷新组件\\n\\n[→ Omis 在线例子](https://codepen.io/collection/XjLaRo/)\\n\\n## 一分钟入门\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\n也可以直接使用 hyperscript，无需任何编译直接运行:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\n## 参数说明\\n\\n```jsx\\nconst Comp = (props, store, _, $) => {\\n\\n}\\n\\nComp.store = (_, $) => {\\n\\n}\\n```\\n\\n* `_` 代表 `component`\\n* `$` 代表 `globalStore`\\n\\n恭喜你已经入门！\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/4.58424fa9.chunk.js","module.exports = \"## Omis\\n\\nOmis (读 /ˈomɪs/) 是函数式风格，自带 store 且 hyperscript 友好的组件框架，只有 3KB。\\n\\n* 函数式风格但非函数式编程 \\n* 结构-样式-行为分离\\n* hyperscript 视觉上更加友好\\n* 每个组件可以带有一个 store，去中心化\\n* 支持全局 store 共享数据，并且按需局部更新组件\\n* 每个组件 store 拥有 update 方法，执行该方法自定局部刷新组件\\n\\n[→ Omis 在线例子](https://codepen.io/collection/XjLaRo/)\\n\\n## 一分钟入门\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\n也可以直接使用 hyperscript，无需任何编译直接运行:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\n## 参数说明\\n\\n```jsx\\nconst Comp = (props, store, _, $) => {\\n\\n}\\n\\nComp.store = (_, $) => {\\n\\n}\\n```\\n\\n* `_` 代表 `component`\\n* `$` 代表 `globalStore`\\n\\n恭喜你已经入门！\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/introduction.md\n// module id = 52\n// module chunks = 4"],"sourceRoot":""}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/4.b83b6976.chunk.js","docs/zh-cn/introduction.md"],"names":["webpackJsonp","52","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/4.b83b6976.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 52:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Omis\\n\\nOmis (读 /ˈomɪs/) 是函数式风格，自带 store 且 hyperscript 友好的组件框架，只有 3KB。\\n\\n* 函数式风格但非函数式编程 \\n* 结构-样式-行为分离\\n* hyperscript 视觉上更加友好\\n* 每个组件可以带有一个 store，去中心化\\n* 支持全局 store 共享数据，并且按需局部更新组件\\n* 每个组件 store 拥有 update 方法，执行该方法自定局部刷新组件\\n\\n[→ Omis 在线例子](https://codepen.io/collection/XjLaRo/)\\n\\n## 一分钟入门\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\n也可以直接使用 hyperscript，无需任何编译直接运行:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\n恭喜你已经入门！\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/4.b83b6976.chunk.js","module.exports = \"## Omis\\n\\nOmis (读 /ˈomɪs/) 是函数式风格，自带 store 且 hyperscript 友好的组件框架，只有 3KB。\\n\\n* 函数式风格但非函数式编程 \\n* 结构-样式-行为分离\\n* hyperscript 视觉上更加友好\\n* 每个组件可以带有一个 store，去中心化\\n* 支持全局 store 共享数据，并且按需局部更新组件\\n* 每个组件 store 拥有 update 方法，执行该方法自定局部刷新组件\\n\\n[→ Omis 在线例子](https://codepen.io/collection/XjLaRo/)\\n\\n## 一分钟入门\\n\\n```jsx\\nimport { render, h } from 'omi'\\n\\nconst Counter = (props, store) => {\\n return (\\n <div>\\n <button onClick={store.sub}>-</button>\\n <span>{store.count}</span>\\n <button onClick={store.add}>+</button>\\n </div>\\n )\\n}\\n\\nCounter.store = _ => {\\n return {\\n count: 1,\\n add() {\\n this.count++\\n this.update()\\n },\\n sub() {\\n this.count--\\n this.update()\\n }\\n }\\n}\\n\\nCounter.css = `\\nspan{\\n color: red;\\n}\\n`\\n\\nrender(<Counter />, 'body')\\n```\\n\\n也可以直接使用 hyperscript，无需任何编译直接运行:\\n\\n```js\\nconst Counter = (props, store) => {\\n return (\\n h('div', {}, [\\n h('button', { onClick: store.sub }, '-'),\\n h('span', {}, store.count),\\n h('button', { onClick: store.add }, '+')\\n ])\\n )\\n}\\n```\\n\\n恭喜你已经入门！\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/introduction.md\n// module id = 52\n// module chunks = 4"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([9],{47:function(e,n){e.exports="## Ref\n\nRef provides a way to access DOM nodes or Components created in render methods.\n\n```jsx\nconst HelloMessage = (props, store, _) => {\n return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)\n}\n\nHelloMessage.store = _ => {\n return {\n installed() {\n //h1 dom element\n console.log(_.h1)\n }\n }\n}\n```\n"}});
|
||||
//# sourceMappingURL=9.681a35ad.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/9.681a35ad.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","47","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/9.681a35ad.chunk.js","sourcesContent":["webpackJsonp([9],{\n\n/***/ 47:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Ref\\n\\nRef provides a way to access DOM nodes or Components created in render methods.\\n\\n```jsx\\nconst HelloMessage = (props, store, _) => {\\n return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)\\n}\\n\\nHelloMessage.store = _ => {\\n return {\\n installed() {\\n //h1 dom element\\n console.log(_.h1)\\n }\\n }\\n}\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/9.681a35ad.chunk.js","module.exports = \"## Ref\\n\\nRef provides a way to access DOM nodes or Components created in render methods.\\n\\n```jsx\\nconst HelloMessage = (props, store, _) => {\\n return h('h1', { ref: ele => _.h1 = ele }, `Hello ${props.name}`)\\n}\\n\\nHelloMessage.store = _ => {\\n return {\\n installed() {\\n //h1 dom element\\n console.log(_.h1)\\n }\\n }\\n}\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/ref.md\n// module id = 47\n// module chunks = 9"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([9],{47:function(n,e){n.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 <div>\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\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 <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\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 <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=9.cd41291b.chunk.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/9.cd41291b.chunk.js","docs/en/ref.md"],"names":["webpackJsonp","47","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/9.cd41291b.chunk.js","sourcesContent":["webpackJsonp([9],{\n\n/***/ 47:\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 <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/9.cd41291b.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 <div>\\n <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\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 <div>\\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\\n </div>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/ref.md\n// module id = 47\n// module chunks = 9"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue