Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(![](\"https://opencollective.com/preact/backer/0/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/1/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/2/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/3/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/4/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/5/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/6/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/7/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/8/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/9/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/10/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/11/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/12/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/13/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/14/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/15/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/16/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/17/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/18/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/19/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/20/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/21/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/22/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/23/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/24/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/25/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/26/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/27/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/28/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/backer/29/avatar.svg\"){kind=avatar}
\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n![](\"https://opencollective.com/preact/sponsor/0/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/1/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/2/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/3/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/4/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/5/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/6/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/7/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/8/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/9/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/10/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/11/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/12/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/13/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/14/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/15/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/16/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/17/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/18/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/19/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/20/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/21/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/22/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/23/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/24/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/25/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/26/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/27/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/28/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/preact/sponsor/29/avatar.svg\"){kind=avatar}
\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","_id":"stb-react@0.5.0-beta.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-oQpIHKLie5fOyMm8gTBxNiWpiWMRbJyqBNibOObkDulsnx2kVw0sI/ZBE7Sc+jCgoDTmq0eaAliK/DE4+wN+nw==","shasum":"b8bbf0558e58122c20f8fcc94d82b3b5aafe49f6","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.1.tgz","fileCount":39,"unpackedSize":172047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2+lNCRA9TVsSAnZWagAAI+wP/0iRGfvF4hHF1yuFv06U\nsRxB651Q8czhHwmCvKZe/f7GnsfQSxTd+Hk+lpvzhdyOuDRcQI/XUHUvr66k\nd/KckaCclRv4c5s6SgZhBZR6EFGtu2grM9yV+kfa/f5HMMh0OlcXCjvhQhON\nPpRhaA75tDcInvkgLt51tTpM8gj9/uZRufcOPsOyu4hfs17boB43iSTmxOfG\nT3vFfcvbGiTF7XIpSkxp02RfE7TmTP0huvH12v+Se/vGG1PC2iR1qv/azQJw\nFOBUsrFQt/WUmL7iUXFc1rfGgybYWkQxER/9WIPG4dxvgAfxTtIripTy2KcE\nqeLe6tTP7Y7pbNnBoI4Uzq3l9sVipy+EIpwBdb7GMMjy1Aj5a3EFabzJu+PR\n3Ar06tKyPOQprlPGRStNjbdlJD/JJxEtmrXXOi2amHO28PaZrmJH9kXvxQlh\nDVuTZAm2wEhh+bSo56dMNhP2n0UxqeGuZvpuYOTjchDidijRLZXYd0J9mZMZ\nmNT9NILEQHrmU3z2UkivIqnLxuyLwDrx3rqE0PVtcvfe9DhUBsqVs3tpW4Ex\nXbCL/Em8akizDZIJtCO7UNzA7BOOEAscAQ7s0a/RmfIn9ttuDDNQAjNs+/Zx\no2riVk5L8xf7ZZ6vv5V8nkxWwKSp3hW57lmRfaVJjzzgJAogQUUzNLc3d9/p\nzuAB\r\n=AG5u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDGh/R6QCXRgwX7BkpDitb2ZUAX0ovRu56IUOoHaHG/AiEAx6NrIQPSftr8WQjpSFt83nGWiIJ/7VX+WMDekDkpg44="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.1_1557915980912_0.9018699894569531"},"_hasShrinkwrap":false},"0.5.0-beta.2":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.2","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","_id":"stb-react@0.5.0-beta.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-q5CSUtRn6GJ+HW1tMdnGXmCJwZTSFOd0GP15tK7/4iSc66LD/oYwJYbC2SkVFxdbTMpXjcddaYRLtKbk39Vcjg==","shasum":"40f0aa94e3ed6b210a433785878fb90e003295a9","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.2.tgz","fileCount":69,"unpackedSize":653522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2+yoCRA9TVsSAnZWagAAamEP/iVpTSoiXgv91tOfdtZr\n2cv2Qxu2GKSFAF0kWQ90Ih1cGAYEYvsKtjjK1H13SsrM984b5y/cZm5ZY0CP\nXLvIM4rv2Kjtx8rwcH2t2OuUpEpAspcFl+I3zOcR78heJ7ACIGm5aG3RNtxL\n+O8HATDw45WY+ChvK1fuL+cVYMmaag9uEWYwscFjkeTvJHyKWGpvmtXbV3AQ\nCsMSx7JfxFORv9BL/7N6NTNZo7nT5Zfv6ICYDNpVmLzf/NJ1FheMTAL+lb7X\n0MxJt/aI9uCASN4cr1dSSVtldVq52alvm0paPof8GkjgXxxdMTKWFAeTRUfb\nqui45p7rMn6D3GmB+nmuaQja3VSjHIugQRLxchBdUz0/TeqGrJ8tKJcGvt6F\nYQieGuHofHZITvUJPgHkNyhHIXpVz7lLt9EKZ4xYiyQuHsR+/jzb+RGor0mH\nGf/TPRswVH0Ysn7lb9sP0/u4XYBWzaoAp+tgSVnf636EaoGMLHlaPXraOQOM\nlgd2NAyG8mFI18lG4+E1+rV9mejpTl7CFvOCqGi8t2OngM5R3Hjewy5KuTDQ\ninJtO6aR5KyTgVA/FmeoL//wPtQTie2x6FsaNxPXk39VmmKU4ey/ivRlo0Hi\nOWFOxGqUizodrVUVG8OPd5FfpsRFxiAak1MP40veddupkehOT1yPylPPBURU\nOG6X\r\n=oPCT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID44bWQtwjhdHZIl7rFgmp4oi//a1SXBr0eW/5bkbr6vAiEAoJLzdj5fABiYPqkgAIYrFk4bObdc/EpTaEAlWXmPe/c="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.2_1557916839802_0.8633328308562132"},"_hasShrinkwrap":false},"0.5.0-beta.3":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.3","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"2aff189baf4694e2508cd2d491ce7225e25ca6e5","_id":"stb-react@0.5.0-beta.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-R8qBffdwEnflkCmqFtaUIRq2F9rtYzh7ol5vYpyYu9bDebvahSUCehXtrTUyY4fzA03TBrztO7hkkFE7HXHqRg==","shasum":"a3ac22cad43ca8eb5185317339a636c7006717f9","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.3.tgz","fileCount":69,"unpackedSize":653514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3AJHCRA9TVsSAnZWagAAFrYP/RgeBL5rVNYBtzfZ2lK0\ntUUewVGkE617IYCTDEYYCYONLF+6cN4BdiX+AwPgNxDnxVTxW3l8ZI9SbvJn\nnNcCq6qd9iquva5pE45wQudX9w3JpOPDXYxemzGznDBvxkWVOBYPRTB5UV5t\n61EbIzb/LtakpSNo8vS+1OVeztkiFVJ3VdGNfT9n9yL+FkO0kEtFQf7JuE7j\ngX49A00D1STl0zL9r/KbKmNSybbFG87/s3NJTa5i2g7iJajBINAOB9zASmwj\nWwGl1q2QlosMGEmaHAIy9hkgaiQlXq7lk92JfynRBXcoltHszFJ1+2Pm4/OK\nJI8y99z2OCd7BXw2gzyPxOXVcqnBYMbGpKUSo19JOs07nUkkN1vmPpBOpgmi\nGqS9TX9U+YTucHRhg3C+FZ3r6BEwu5ZLirx0h1oHhal7fOF/n5kzHquZu20J\ns7ANHXzDA7ljhIw22MAqnEhSCxhCWvRJQGPg+BSUEvLxpACy6Dbr1dKk4Xvn\nIc17HHvCrZVpKzzv+OuQtW8twTH/OyZMaZGgD//lvJU2pblx+sxIHxGSc9bw\nzVQ3v59V9koukiAnBPEtqZ/VDUyFqKmfSq5ukh3TEGTw7dDVO9uaqqKPcR/X\nw+Kl8kaCem7LxrXevHuUV4NHwsDVjPK5hykB6AAhSeguxhTW/YVVqMLoTArJ\nf1EY\r\n=L3E0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1ZwB0tbYYe25/trKudFkybUGWP3aMncCUUzOTN4PNLAiEAydoJM8DBZh2vFPqVTSK1cztHeS7+xLBW5h9OT4bQ34c="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.3_1557922374584_0.21526713034085665"},"_hasShrinkwrap":false},"0.5.0-beta.4":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.4","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"2aff189baf4694e2508cd2d491ce7225e25ca6e5","_id":"stb-react@0.5.0-beta.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-lfWaSsEPlIvCt4aCSVaLj89cRFwHhN/vn5pHDHkkYYOeufAuKtiQHPD7Ys4G0plA2oKP4VoSzscnjV0g6LHYDw==","shasum":"8c04e1adf1ee06118779025a6b3e954182d5e279","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.4.tgz","fileCount":69,"unpackedSize":653385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3AJsCRA9TVsSAnZWagAAmx4P/3RimVEmQiz80k+XLvJc\nhe2Mhf758X+nDNbkKpNrHY8I3H1s695+NMlY1sF2xEb4MGCc+UCjFMIwTrqG\nosrGxq1ROz/ORx2TQLlBErMcXLHl6YeJcxP6ZJGV+PRsBoYP5/QVZtkAvH5d\nyL8Hcg3nFsPCqjGPUjN+JMhSV3OV62hhf6ogoB8moVB9X7001YhT1vOvbIai\n+G+O5lpMadqtgIFRZd/uhLEHwy01mbjle5TawO1jc5Ahr++LmMuYd0GS8A/C\n93DYrvgwBubgKNwkJ9OqUJdyi1hpR2ZpV0qxuPRn+5EoMgzB5Un1QQgYsO1s\nB+E+Y54z9V+MhLfSLMon5dCR+3DbhUtWqYl15WIyWYAGD9nfFnznuPqnvcsE\nHTHLqP4kwffA3pN/wJl7PNiz0VJLmMD40B+3wPuk2Fu8zIv6bHDhNNQSSTNB\nwUy794hfT76FN8zbZHTWBhThHe1zXlkQVCrp37tRXa/PKNaASXcbtVfT1Zwl\nOO883cnkpMb5x1Ug6IdQ8RTnRtEeogQ+W9EGbe4Es/gAFQNCKJT0JMWab7mM\ntqP11A8ax5+sKTN4tI8eWOQ+2kMDDxWfVWg0CXW+NMXlHwqswjCw93BTRpsX\nMDXB5Lb3Dd/qTR0FqcRIqZOpTAKbQuy2ut/ruZOS3/zXV+GXGBlxsaO7vzQE\nwmFt\r\n=nkdQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1DTt35FOg7RqSFUJZgd04subH+ZbHrJJIKzCICCiv6gIgDu9u20indLT6C0LV2fyIrF9lZw6+l8PssXE0WGiNuZk="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.4_1557922411800_0.45912920649588185"},"_hasShrinkwrap":false},"0.5.0-beta.5":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.5","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"34ad5cde18537c73d1c9597be24d5c1fe52dd44b","_id":"stb-react@0.5.0-beta.5","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-rJNZ4RyNkXFlL2N8jfcerVqlCinRrZmzoABP38D6viOnDL16INc2JEdYQ3KP9JaantGpzLSLkJKMclmyNphcsw==","shasum":"d6f0fb2aa5d53f7bbc4c0c8b9cbfab09c0616b4f","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.5.tgz","fileCount":69,"unpackedSize":657188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3lZ9CRA9TVsSAnZWagAAXzMP/R181PnYoTgeAS+3rZnw\ndpGV1MWgSn8loz6IMURc+5zmSi8/Qdr4TVLbT7FjDyw8fBLh5eeAFYgPO+hR\nh7YTu0lYe0yw0Cbc4HRJqct4mF/mxWizQIAaE0om3x0Y2y6Kdd2c9gGOGLB6\nAp55IxbzU/YGvv1vxDKDh/2q8IfvmNlNxjmckCU4hh06UM4V1nXB/SfbW0Sj\n5XuSDpfNEkofvkz8JXVYSZkW5EJ6Bpgro/tf4Pky85TBhCHcisQicOaM6GAU\n5wdB3GnL8E2MJS9vRq2MFMFhJYmbBORPvlYXc5kRsix3RLbo/xxngVRm3Ek4\nmh1di80ST/84eIbTZWrRkIo8i8HnS69obWGtBit8aw2N4RiNmT4o5z0GBq6L\nSPMDWiu/3cAnXfLqK5Ejvn12ivdUsDxFHcfS/xfzQFzkZ3h9C4eVn4H1V8Zv\n9yOFfU0GUCRpCQVGMdb0Hdx+eoFLvmSQojzPDyxnRjFfWCBEjuEx4zb6PmaT\nTPqa86nT+CV6f6X3zsXJk7CnoiHz93eB5XITPlvQxN4kJwYL8dY80Qliozqy\ngdqRm1IL5hdGxYAiP+ahNk87nNMF/gHHen46MQD0vIiHE5FAXzTA99YycJyC\nXxbO1HuxmJAiNs2/wm619Q3T/IjdwoSrhosmDN3xYgjO7MjN5jRH2TBnO9c0\n2Et/\r\n=QttJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkBV+KKM3Kyxvyy22JLtFPPUhhtV11ogHDAqx9SgO/KAIhANdadesDXbzVDYdsJTAbVOX74/l1Ud/G3pp/SdRFpaGV"}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.5_1558075004393_0.41014430988782835"},"_hasShrinkwrap":false},"0.4.7-beta":{"name":"stb-react","version":"0.4.7-beta","description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","jsnext:main":"dist/preact.mjs","module":"dist/preact.mjs","dev:main":"dist/preact.dev.js","minified:main":"dist/preact.min.js","types":"dist/preact.d.ts","scripts":{"clean":"rimraf dist/ devtools.js devtools.js.map debug.js debug.js.map test/ts/**/*.js","copy-flow-definition":"copyfiles -f src/preact.js.flow dist","copy-typescript-definition":"copyfiles -f src/preact.d.ts dist","build":"npm-run-all --silent clean transpile copy-flow-definition copy-typescript-definition strip optimize minify size","flow":"flow","transpile:main":"rollup -c config/rollup.config.js","transpile:devtools":"rollup -c config/rollup.config.devtools.js","transpile:esm":"rollup -c config/rollup.config.module.js","transpile:debug":"babel debug/ -o debug.js -s","transpile":"npm-run-all transpile:main transpile:esm transpile:devtools transpile:debug","optimize":"uglifyjs dist/preact.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|normalizedNodeName|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/preact.js -p relative --in-source-map dist/preact.dev.js.map --source-map dist/preact.js.map","minify":"uglifyjs dist/preact.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/preact.min.js -p relative --in-source-map dist/preact.js.map --source-map dist/preact.min.js.map","prepare":"npm run build","strip:main":"jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.dev.js","strip:esm":"jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.mjs","strip":"npm-run-all strip:main strip:esm","size":"node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/preact.min.js","test":"npm-run-all lint --parallel test:mocha test:karma test:ts test:flow test:size","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"karma start test/karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"npm run test:karma -- no-single-run","test:size":"bundlesize","lint":"eslint debug devtools src test","prepublishOnly":"npm run build","smart-release":"npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish","release":"cross-env npm run smart-release","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"./config/eslint-config.js"},"typings":"./dist/preact.d.ts","repository":{"type":"git","url":"git+https://github.com/shitaozhang/stb-react.git"},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom","stb","iptv","frontend"],"author":{"name":"shitaozhang"},"license":"MIT","bugs":{"url":"https://github.com/shitaozhang/stb/issues"},"homepage":"https://github.com/shitaozhang","devDependencies":{"@types/chai":"^4.1.7","@types/mocha":"^5.2.5","@types/node":"^9.6.40","babel-cli":"^6.24.1","babel-core":"^6.24.1","babel-eslint":"^8.2.6","babel-loader":"^7.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.6.1","bundlesize":"^0.17.0","chai":"^4.2.0","copyfiles":"^2.1.0","core-js":"^2.6.0","coveralls":"^3.0.0","cross-env":"^5.1.4","diff":"^3.0.0","eslint":"^4.18.2","eslint-plugin-react":"^7.11.1","flow-bin":"^0.67.1","gzip-size-cli":"^2.0.0","istanbul-instrumenter-loader":"^3.0.0","jscodeshift":"^0.5.0","karma":"^2.0.5","karma-babel-preprocessor":"^7.0.0","karma-chai-sinon":"^0.1.5","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.0.0","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.0.4","karma-sauce-launcher":"^1.1.0","karma-sinon":"^1.0.5","karma-source-map-support":"^1.2.0","karma-sourcemap-loader":"^0.3.6","karma-webpack":"^3.0.5","mocha":"^5.0.4","npm-run-all":"^4.1.5","puppeteer":"^1.11.0","rimraf":"^2.5.3","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.2","rollup-plugin-memory":"^3.0.0","rollup-plugin-node-resolve":"^3.4.0","sinon":"^4.4.2","sinon-chai":"^3.3.0","typescript":"^3.0.1","uglify-js":"^2.7.5","webpack":"^4.27.1"},"greenkeeper":{"ignore":["babel-cli","babel-core","babel-eslint","babel-loader","jscodeshift","rollup-plugin-babel"]},"bundlesize":[{"path":"./dist/preact.min.js","threshold":"4Kb"}],"dependencies":{"stb-event":"0.0.9-beta","stb-tools":"0.0.9-beta"},"readme":"\n使用相同的现代API 快速3KB实现STB(Set Top Box)端React。
\n\n**Virtual DOM 组件的所有功能：**\n\n- 熟悉的 React API 和模式：ES6 类和功能组件\n- 通过简单的 preact-compat 别名实现广泛的 React 兼容性\n- 你需要的一切：JSX，VDOM，React DevTools，HMR，SSR ..\n- 高度优化的差异算法和无缝的服务器端渲染\n- 使用可插拔调度程序的透明异步呈现\n\n**技术支持：**\n\n- 核心源码基于 preact@8.4.2\n- 描述文件基于 preact@8.3.1\n\n### 💁 Preact 网站上的 [Preact Website ➞](https://preactjs.com)\n\nPreact 会调用以下生命周期方法：\n\n| 生命周期方法 | 当它被调用时 |\n| --------------------------- | ------------------------------------------------------------------- |\n| `componentWillMount` | 在组件挂载到 DOM 之前 |\n| `componentDidMount` | 在组件被挂载到 DOM 之后 |\n| `componentWillUnmount` | 在从 DOM 中删除之前 |\n| `componentWillReceiveProps` | 在新道具被接受之前 |\n| `shouldComponentUpdate` | 在`render()`之前返回 `false`跳过渲染 |\n| `componentWillUpdate` | `render()` 之前 |\n| `componentDidUpdate` | `render()` 之后 |\n| `componentFocusDidUpdate` | `componentDidUpdate()&PageType.Focus&PageType.Blur&setFocus()` 之后 |\n\n## 更新日志\n\n- ✅ 扩展 JSX tag 属性，取值 \"focus\"\n- ✅ 扩展 tags 属性\n- ✅ 扩展组件 identCode 属性\n- ✅ 扩展组件 event 对象\n- ✅ 扩展组件 index 属性\n- ✅ 扩展组件 subscribeToEvents 事件\n- ✅ 扩展组件 componentFocusDidUpdate 事件\n- ✅ 扩展组件 setIndex 方法\n- ✅ 扩展组件 setFocus 方法\n- ✅ 扩展组件 onfocus 事件\n- ✅ 扩展组件 onblur 事件\n- ✅ 扩展组件 onkeydown 事件\n- ✅ 扩展组件 target 事件\n- ✅ 扩展组件 trigger 事件\n- ✅ 扩展组件 IFocusProps 属性接口\n- ✅ 更新组件 tags 属性作为 HElement 类实例\n- ✅ 取消组件预注册机制，考虑到相同布局的多套组件，无法确定其数量\n- ✅ 扩展组件 triggerGlobal 事件\n- ✅ 扩展组件 onChange(true, keyCode) 事件\n- ✅ 扩展组件 autoFocus(keyCode) 事件\n- ✅ 扩展组件 onEnter(keyCode) 事件\n- ✅ 扩展组件 onBackspace(keyCode) 事件\n- ✅ 扩展组件 焦点组件与子组件关联关系，实现模块级别关联\n- ✅ 调整组件 componentFocusDidUpdate 事件通知参数取值(\"didupdate\"|\"exception\"|\"focus\"|\"blur\"|\"change\")\n- ✅ 扩展方法 props 事假参数绑定\n- ✅ 扩展组件 新增标签属性 alias: \"marquee\" | \"tab-group\" | \"tab\";\n- 扩展全局接口 ISubmoduleProps IModuleProps\n- 关联组件刷新也要刷新父组件焦点事件\n- 验证组件更新导致 tag 个数变动 tags 是否能同步消息;父组件更新关联节点保持同步；关联节点更新父组件保持同步\n- 修复组件 关联子组件，父组件重载时子组件未卸载，父组件丢失了子组件注册节点信息\n\n## Sponsors\n\n支持我们，并帮助我们继续我们的活动。\n\n\n","readmeFilename":"README.md","gitHead":"6c58d10ed2c1a117431fa638cfc0e7200b89fafd","_id":"stb-react@0.4.7-beta","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-g6lZJWP47RqLxf8yMHOlLWJE0K1UBSKv7NOc93Ggjs6t0ZG/chMPaSrMCAmcP2sEVJeeVGH+pdQqgLoTUvEbjA==","shasum":"dd533f20ac9e4acc4ddf71de6e0d702bbc2df714","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.4.7-beta.tgz","fileCount":39,"unpackedSize":779074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc51oICRA9TVsSAnZWagAA6cAP/i3crkAiKofVlgdxwPdC\nongl2hwzhZ47bpridArym5Wi3GGWes3ZTlnA1uWw10MyMya2LU5IXu4Sq6zH\nCLTNJk724rZ6NjFN0usOEY8ikVadCsDOUK7eWHlaBV6VeJ9jcKCUtylRXG/Q\nIjYDBxESvQ03lUT71JIsNUNYVqwNdGwHvncQ9FBKqpradh30srVz7a15LMFL\ntkTqymU2X8as3GDSq/mqHYJpJljtys8KODKfid2qyURyB6zYD/2GOWYc0Q8t\n7X+BUctJnyn4V2SoM0RHNUjEBG0H1kbP16Bip+OlcbKVv6VC2l/HtrUGSugQ\nyd3/fJySOrRj93YewYF6EMigi3Vy70WaFe3uzEdFYHVRNK5RpDLmHl1Vkhp+\nejyyc7EeCm1/S6LQ9VBiaGUVOnd5IGKOf5tdPMjv4PpBDgp7/LlNiNGK6CsD\nkwykHHt9FXNRzL4PgfhSB4kRa1a6zhco3T22cLT+ksISIyf6QawvwbDJq+64\nZzGpRi+5n4GttscU6kj2bK7nOGzR2+B0sb5h1bl2pAeuMhiak9BC0ctGlcTy\nvLxLBlvZSNDPOZxelJwLP1J6ogyGVnun6jgU1omvD+1mlF6bu/O3PozqfvQN\nn9JL4WS/i4N0Hp8C2THmWWLl7ZTFMHvFngrpVmuPqq0KBDPpFr5YLLnFAN/T\nK37o\r\n=3/6C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD98gggUbgRZ1Fb/2XqLgq20rmzWNdAukKv6kSiRQ5y4wIgeiyCQCni4wU9Qj6fg4I6tEJFwIroon08EgraeeAHW38="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.4.7-beta_1558665735354_0.1953856466483066"},"_hasShrinkwrap":false},"0.4.8-beta":{"name":"stb-react","version":"0.4.8-beta","description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","jsnext:main":"dist/preact.mjs","module":"dist/preact.mjs","dev:main":"dist/preact.dev.js","minified:main":"dist/preact.min.js","types":"dist/preact.d.ts","scripts":{"clean":"rimraf dist/ devtools.js devtools.js.map debug.js debug.js.map test/ts/**/*.js","copy-flow-definition":"copyfiles -f src/preact.js.flow dist","copy-typescript-definition":"copyfiles -f src/preact.d.ts dist","build":"npm-run-all --silent clean transpile copy-flow-definition copy-typescript-definition strip optimize minify size","flow":"flow","transpile:main":"rollup -c config/rollup.config.js","transpile:devtools":"rollup -c config/rollup.config.devtools.js","transpile:esm":"rollup -c config/rollup.config.module.js","transpile:debug":"babel debug/ -o debug.js -s","transpile":"npm-run-all transpile:main transpile:esm transpile:devtools transpile:debug","optimize":"uglifyjs dist/preact.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|normalizedNodeName|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/preact.js -p relative --in-source-map dist/preact.dev.js.map --source-map dist/preact.js.map","minify":"uglifyjs dist/preact.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/preact.min.js -p relative --in-source-map dist/preact.js.map --source-map dist/preact.min.js.map","prepare":"npm run build","strip:main":"jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.dev.js","strip:esm":"jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.mjs","strip":"npm-run-all strip:main strip:esm","size":"node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/preact.min.js","test":"npm-run-all lint --parallel test:mocha test:karma test:ts test:flow test:size","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"karma start test/karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"npm run test:karma -- no-single-run","test:size":"bundlesize","lint":"eslint debug devtools src test","prepublishOnly":"npm run build","smart-release":"npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish","release":"cross-env npm run smart-release","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"./config/eslint-config.js"},"typings":"./dist/preact.d.ts","repository":{"type":"git","url":"git+https://github.com/shitaozhang/stb-react.git"},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom","stb","iptv","frontend"],"author":{"name":"shitaozhang"},"license":"MIT","bugs":{"url":"https://github.com/shitaozhang/stb/issues"},"homepage":"https://github.com/shitaozhang","devDependencies":{"@types/chai":"^4.1.7","@types/mocha":"^5.2.5","@types/node":"^9.6.40","babel-cli":"^6.24.1","babel-core":"^6.24.1","babel-eslint":"^8.2.6","babel-loader":"^7.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.6.1","bundlesize":"^0.17.0","chai":"^4.2.0","copyfiles":"^2.1.0","core-js":"^2.6.0","coveralls":"^3.0.0","cross-env":"^5.1.4","diff":"^3.0.0","eslint":"^4.18.2","eslint-plugin-react":"^7.11.1","flow-bin":"^0.67.1","gzip-size-cli":"^2.0.0","istanbul-instrumenter-loader":"^3.0.0","jscodeshift":"^0.5.0","karma":"^2.0.5","karma-babel-preprocessor":"^7.0.0","karma-chai-sinon":"^0.1.5","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.0.0","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.0.4","karma-sauce-launcher":"^1.1.0","karma-sinon":"^1.0.5","karma-source-map-support":"^1.2.0","karma-sourcemap-loader":"^0.3.6","karma-webpack":"^3.0.5","mocha":"^5.0.4","npm-run-all":"^4.1.5","puppeteer":"^1.11.0","rimraf":"^2.5.3","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.2","rollup-plugin-memory":"^3.0.0","rollup-plugin-node-resolve":"^3.4.0","sinon":"^4.4.2","sinon-chai":"^3.3.0","typescript":"^3.0.1","uglify-js":"^2.7.5","webpack":"^4.27.1"},"greenkeeper":{"ignore":["babel-cli","babel-core","babel-eslint","babel-loader","jscodeshift","rollup-plugin-babel"]},"bundlesize":[{"path":"./dist/preact.min.js","threshold":"4Kb"}],"dependencies":{"stb-event":"0.0.9-beta","stb-tools":"0.0.9-beta"},"readme":"\n使用相同的现代API 快速3KB实现STB(Set Top Box)端React。
\n\n**Virtual DOM 组件的所有功能：**\n\n- 熟悉的 React API 和模式：ES6 类和功能组件\n- 通过简单的 preact-compat 别名实现广泛的 React 兼容性\n- 你需要的一切：JSX，VDOM，React DevTools，HMR，SSR ..\n- 高度优化的差异算法和无缝的服务器端渲染\n- 使用可插拔调度程序的透明异步呈现\n\n**技术支持：**\n\n- 核心源码基于 preact@8.4.2\n- 描述文件基于 preact@8.3.1\n\n### 💁 Preact 网站上的 [Preact Website ➞](https://preactjs.com)\n\nPreact 会调用以下生命周期方法：\n\n| 生命周期方法 | 当它被调用时 |\n| --------------------------- | ------------------------------------------------------------------- |\n| `componentWillMount` | 在组件挂载到 DOM 之前 |\n| `componentDidMount` | 在组件被挂载到 DOM 之后 |\n| `componentWillUnmount` | 在从 DOM 中删除之前 |\n| `componentWillReceiveProps` | 在新道具被接受之前 |\n| `shouldComponentUpdate` | 在`render()`之前返回 `false`跳过渲染 |\n| `componentWillUpdate` | `render()` 之前 |\n| `componentDidUpdate` | `render()` 之后 |\n| `componentFocusDidUpdate` | `componentDidUpdate()&PageType.Focus&PageType.Blur&setFocus()` 之后 |\n\n## 更新日志\n\n- ✅ 扩展 JSX tag 属性，取值 \"focus\"\n- ✅ 扩展 tags 属性\n- ✅ 扩展组件 identCode 属性\n- ✅ 扩展组件 event 对象\n- ✅ 扩展组件 index 属性\n- ✅ 扩展组件 subscribeToEvents 事件\n- ✅ 扩展组件 componentFocusDidUpdate 事件\n- ✅ 扩展组件 setIndex 方法\n- ✅ 扩展组件 setFocus 方法\n- ✅ 扩展组件 onfocus 事件\n- ✅ 扩展组件 onblur 事件\n- ✅ 扩展组件 onkeydown 事件\n- ✅ 扩展组件 target 事件\n- ✅ 扩展组件 trigger 事件\n- ✅ 扩展组件 IFocusProps 属性接口\n- ✅ 更新组件 tags 属性作为 HElement 类实例\n- ✅ 取消组件预注册机制，考虑到相同布局的多套组件，无法确定其数量\n- ✅ 扩展组件 triggerGlobal 事件\n- ✅ 扩展组件 onChange(true, keyCode) 事件\n- ✅ 扩展组件 autoFocus(keyCode) 事件\n- ✅ 扩展组件 onEnter(keyCode) 事件\n- ✅ 扩展组件 onBackspace(keyCode) 事件\n- ✅ 扩展组件 焦点组件与子组件关联关系，实现模块级别关联\n- ✅ 调整组件 componentFocusDidUpdate 事件通知参数取值(\"didupdate\"|\"exception\"|\"focus\"|\"blur\"|\"change\")\n- ✅ 扩展方法 props 事假参数绑定\n- ✅ 扩展组件 新增标签属性 alias: \"marquee\" | \"tab-group\" | \"tab\";\n- 扩展全局接口 ISubmoduleProps IModuleProps\n- 关联组件刷新也要刷新父组件焦点事件\n- 验证组件更新导致 tag 个数变动 tags 是否能同步消息;父组件更新关联节点保持同步；关联节点更新父组件保持同步\n- 修复组件 关联子组件，父组件重载时子组件未卸载，父组件丢失了子组件注册节点信息\n\n## Sponsors\n\n支持我们，并帮助我们继续我们的活动。\n\n\n","readmeFilename":"README.md","gitHead":"4f946bd489f318dc156e864fc5789e188f732e8b","_id":"stb-react@0.4.8-beta","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-o8O5LpJMEXSGYRvquLgp+SdHCUfxrIyoifQYYZrIfvubMRmIqbcsQ0pKxVU3UXaz5TUZ8d+GfWbzYffWm+Sy1A==","shasum":"21953eb5040092a1ee88b323f9c354e6576acaf9","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.4.8-beta.tgz","fileCount":39,"unpackedSize":779076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc51qpCRA9TVsSAnZWagAAKeAP/AxpoM6bEg/wbfXWUueZ\nh5givaQHDdu7CeURDw93nskyRX9LEdU+i9/6F7YBkJDJ9+h4xroMGbyn3cxK\n+1iBC4kKwAtAaGDvlCDLwK73rCFD3xcv3+LV5BqY2GsxVgUYKsZfQHkL4aNq\nIVcRmCFw19SiPoyOaNyczRotfwfw/dRvKV4gmhEQc0HaGKIBfcb+0QeLXhjI\nDbsE6NwaEjgslXoAYDpcIphULzq+M/q3XAoLeSqPXunRD3s4C4DNGSmcCsio\nktB2ufIFqhXIn8dt0dQxe0Mo9yj+9FCuQizuGhOSRGkAAEdf2v4Vv3J3l75X\ncvzNv2Uw/O8UVQDnlbxcTrEIdJmmWeyWyL+ti5rrMj3/7UFF2aNYFXM945rJ\nYufuw5IV3Nsu7ErnGjM+tLCFgq3kMuoghRLXnO0u8CamTm5kZdIh7QMkOt6O\nEtdRSickbhIlaxK+Qt3SjLInY9W7Ki1Wv606Mqid0UnqaHYp8tPNrJaA5iEV\nxRl3+w2rbTe/HrPvN+VfUzrV3GL8fY2PE4TI5l29RPLp96m1U0MXp/rdvZeS\nPrMMnYr8ARfZrGatgOdAqQN02GRxa9EQFmUN4B6vbaqT77NodlbY9IVVrDXW\nhDQVfNCFI7nvnO2mBozCdFCe4NV0U7XxojPXQVd3s9kW/ZjJsOQRBI8rKekA\nUuS4\r\n=Ie5p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJBQTwNGidPdF6ZyBpyWZG4YTNb9T9yufQaIPSKKE06AiEA7cHrhRiD87PZHvZV4h8P3QIA3poFhEljCP73fq+Dnqk="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.4.8-beta_1558665896641_0.7840843385637748"},"_hasShrinkwrap":false},"0.4.9-beta":{"name":"stb-react","version":"0.4.9-beta","description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","jsnext:main":"dist/preact.mjs","module":"dist/preact.mjs","dev:main":"dist/preact.dev.js","minified:main":"dist/preact.min.js","types":"dist/preact.d.ts","scripts":{"clean":"rimraf dist/ devtools.js devtools.js.map debug.js debug.js.map test/ts/**/*.js","copy-flow-definition":"copyfiles -f src/preact.js.flow dist","copy-typescript-definition":"copyfiles -f src/preact.d.ts dist","build":"npm-run-all --silent clean transpile copy-flow-definition copy-typescript-definition strip optimize minify size","flow":"flow","transpile:main":"rollup -c config/rollup.config.js","transpile:devtools":"rollup -c config/rollup.config.devtools.js","transpile:esm":"rollup -c config/rollup.config.module.js","transpile:debug":"babel debug/ -o debug.js -s","transpile":"npm-run-all transpile:main transpile:esm transpile:devtools transpile:debug","optimize":"uglifyjs dist/preact.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|normalizedNodeName|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/preact.js -p relative --in-source-map dist/preact.dev.js.map --source-map dist/preact.js.map","minify":"uglifyjs dist/preact.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/preact.min.js -p relative --in-source-map dist/preact.js.map --source-map dist/preact.min.js.map","prepare":"npm run build","strip:main":"jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.dev.js","strip:esm":"jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.mjs","strip":"npm-run-all strip:main strip:esm","size":"node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/preact.min.js","test":"npm-run-all lint --parallel test:mocha test:karma test:ts test:flow test:size","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"karma start test/karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"npm run test:karma -- no-single-run","test:size":"bundlesize","lint":"eslint debug devtools src test","prepublishOnly":"npm run build","smart-release":"npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish","release":"cross-env npm run smart-release","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"./config/eslint-config.js"},"typings":"./dist/preact.d.ts","repository":{"type":"git","url":"git+https://github.com/shitaozhang/stb-react.git"},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom","stb","iptv","frontend"],"author":{"name":"shitaozhang"},"license":"MIT","bugs":{"url":"https://github.com/shitaozhang/stb/issues"},"homepage":"https://github.com/shitaozhang","devDependencies":{"@types/chai":"^4.1.7","@types/mocha":"^5.2.5","@types/node":"^9.6.40","babel-cli":"^6.24.1","babel-core":"^6.24.1","babel-eslint":"^8.2.6","babel-loader":"^7.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.6.1","bundlesize":"^0.17.0","chai":"^4.2.0","copyfiles":"^2.1.0","core-js":"^2.6.0","coveralls":"^3.0.0","cross-env":"^5.1.4","diff":"^3.0.0","eslint":"^4.18.2","eslint-plugin-react":"^7.11.1","flow-bin":"^0.67.1","gzip-size-cli":"^2.0.0","istanbul-instrumenter-loader":"^3.0.0","jscodeshift":"^0.5.0","karma":"^2.0.5","karma-babel-preprocessor":"^7.0.0","karma-chai-sinon":"^0.1.5","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.0.0","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.0.4","karma-sauce-launcher":"^1.1.0","karma-sinon":"^1.0.5","karma-source-map-support":"^1.2.0","karma-sourcemap-loader":"^0.3.6","karma-webpack":"^3.0.5","mocha":"^5.0.4","npm-run-all":"^4.1.5","puppeteer":"^1.11.0","rimraf":"^2.5.3","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.2","rollup-plugin-memory":"^3.0.0","rollup-plugin-node-resolve":"^3.4.0","sinon":"^4.4.2","sinon-chai":"^3.3.0","typescript":"^3.0.1","uglify-js":"^2.7.5","webpack":"^4.27.1"},"greenkeeper":{"ignore":["babel-cli","babel-core","babel-eslint","babel-loader","jscodeshift","rollup-plugin-babel"]},"bundlesize":[{"path":"./dist/preact.min.js","threshold":"4Kb"}],"dependencies":{"stb-event":"0.0.9-beta","stb-tools":"0.0.9-beta"},"readme":"\n使用相同的现代API 快速3KB实现STB(Set Top Box)端React。
\n\n**Virtual DOM 组件的所有功能：**\n\n- 熟悉的 React API 和模式：ES6 类和功能组件\n- 通过简单的 preact-compat 别名实现广泛的 React 兼容性\n- 你需要的一切：JSX，VDOM，React DevTools，HMR，SSR ..\n- 高度优化的差异算法和无缝的服务器端渲染\n- 使用可插拔调度程序的透明异步呈现\n\n**技术支持：**\n\n- 核心源码基于 preact@8.4.2\n- 描述文件基于 preact@8.3.1\n\n### 💁 Preact 网站上的 [Preact Website ➞](https://preactjs.com)\n\nPreact 会调用以下生命周期方法：\n\n| 生命周期方法 | 当它被调用时 |\n| --------------------------- | ------------------------------------------------------------------- |\n| `componentWillMount` | 在组件挂载到 DOM 之前 |\n| `componentDidMount` | 在组件被挂载到 DOM 之后 |\n| `componentWillUnmount` | 在从 DOM 中删除之前 |\n| `componentWillReceiveProps` | 在新道具被接受之前 |\n| `shouldComponentUpdate` | 在`render()`之前返回 `false`跳过渲染 |\n| `componentWillUpdate` | `render()` 之前 |\n| `componentDidUpdate` | `render()` 之后 |\n| `componentFocusDidUpdate` | `componentDidUpdate()&PageType.Focus&PageType.Blur&setFocus()` 之后 |\n\n## 更新日志\n\n- ✅ 扩展 JSX tag 属性，取值 \"focus\"\n- ✅ 扩展 tags 属性\n- ✅ 扩展组件 identCode 属性\n- ✅ 扩展组件 event 对象\n- ✅ 扩展组件 index 属性\n- ✅ 扩展组件 subscribeToEvents 事件\n- ✅ 扩展组件 componentFocusDidUpdate 事件\n- ✅ 扩展组件 setIndex 方法\n- ✅ 扩展组件 setFocus 方法\n- ✅ 扩展组件 onfocus 事件\n- ✅ 扩展组件 onblur 事件\n- ✅ 扩展组件 onkeydown 事件\n- ✅ 扩展组件 target 事件\n- ✅ 扩展组件 trigger 事件\n- ✅ 扩展组件 IFocusProps 属性接口\n- ✅ 更新组件 tags 属性作为 HElement 类实例\n- ✅ 取消组件预注册机制，考虑到相同布局的多套组件，无法确定其数量\n- ✅ 扩展组件 triggerGlobal 事件\n- ✅ 扩展组件 onChange(true, keyCode) 事件\n- ✅ 扩展组件 autoFocus(keyCode) 事件\n- ✅ 扩展组件 onEnter(keyCode) 事件\n- ✅ 扩展组件 onBackspace(keyCode) 事件\n- ✅ 扩展组件 焦点组件与子组件关联关系，实现模块级别关联\n- ✅ 调整组件 componentFocusDidUpdate 事件通知参数取值(\"didupdate\"|\"exception\"|\"focus\"|\"blur\"|\"change\")\n- ✅ 扩展方法 props 事假参数绑定\n- ✅ 扩展组件 新增标签属性 alias: \"marquee\" | \"tab-group\" | \"tab\";\n- 扩展全局接口 ISubmoduleProps IModuleProps\n- 关联组件刷新也要刷新父组件焦点事件\n- 验证组件更新导致 tag 个数变动 tags 是否能同步消息;父组件更新关联节点保持同步；关联节点更新父组件保持同步\n- 修复组件 关联子组件，父组件重载时子组件未卸载，父组件丢失了子组件注册节点信息\n\n## Sponsors\n\n支持我们，并帮助我们继续我们的活动。\n\n\n","readmeFilename":"README.md","gitHead":"576871bd5b8fabcb83c10657c4e2c56068da54d0","_id":"stb-react@0.4.9-beta","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-nnEhHTbit5JweDu7X8CGPZS6cnpsjMVDgjxo3mSB15LaHI6WNci1yGMVaTJg/LMGcZn3VGvIWJe1qlU6h9YkLQ==","shasum":"a318f30498bbedbe3136703bf12acb5e46e314cb","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.4.9-beta.tgz","fileCount":39,"unpackedSize":779074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc51uCCRA9TVsSAnZWagAAwi8P/1v5whEICzoxac3L1g9h\n2oycjqaF6lxjj9n3zTjALIpXnMDHnahda12eyu7TcbCP0xVvhigUEPw9ldtl\nK6HzIHycxl1A46DkT8QtQeuES3uir4fzoI2jQVCT/rYwmjjz5CsB7GY7w4dV\nY6tmYtnxVIBrh69saAGzXlC0sygG12XKCI23NHgYILZdI9Bau9snCZKd6Cd8\npfcwiPQ3FZQfPHacO6M1XytOyiy4Hvv3JA7wkRcZsWjPNoxI9x3wacicq4KT\nkDCPECqNcjCd4Zk5KPcQ7nPem0NsYQ209T66rRVFxX6V9qUaPdFceO3xcenp\nzlhzPsh2h0xZgWKm/vvAq020PLct/xJxxRMPkhKyvhLRBbi+SdLTI6SnQM8p\n9Fhr5OlF5F1E+zDtLGa7bb8ecpP1wSqprq4uVcO/GnIqapUQi+wJzOQLmSVB\nI73QA2C6PSoGjirmFCBruyxdAfPRUvdVLVx7VRXTPs/YfVWe+FugTzRVTHxm\nXIVBm5VoqnCykE5ucip6cUTFJIcWKss3rrMDQHD686XSg5nfEeuCBPyXvSTx\nCilcshOBKIXGjgypgG2U+KTP1zJAawzCB7KEtD7P2o+XgSDCUtQknor5JENE\nnSNT/qEytVenA8NKlUYQ7Mr1wSNjrUe1XNfMS6uCTKkjRyLVaJIG3aHeKDv6\nFxyE\r\n=5byE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvlEP2xgCmQ6ambdt0pfhrX+GLqKe7iGwfOmOpHema1wIhAPWpw295TfH+oD3kvhSHtOShIOJh2RuCZ9eBa/jLvWw1"}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.4.9-beta_1558666113721_0.08682335727388169"},"_hasShrinkwrap":false},"0.5.0-beta.6":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.6","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason MillerFast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"df61a204adb2e25ff2cf63aa0fc697cdba4db450","_id":"stb-react@0.5.0-beta.6","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-m+kkQOygTYGX9OTNjwtM647A+3sKxEuIR5jjQVTySbces4lZNUP8hnDiVTOTtwOetWJGfe8KEQdFtT9jP1VNIw==","shasum":"3ee900e13e82e913d676e8e9a65a563b176383c4","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.6.tgz","fileCount":69,"unpackedSize":657231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc52KtCRA9TVsSAnZWagAAeaYP/05NoIhs1JkEwlLa+K2t\nD5tsUlc3GO7POzoSDhAkKllnUf3l9862dQ015OA7uBL+5kpmNqIyik6IJ9sK\na0JoiFzU9bI//Cw/9KmbtavRfkdyPapiPx8CiK25l8N2brXJ4L2BvdvbOF4L\nS8TYQCgg785GHf06RChJo93YpWx1RUc2bkHAMbXVB+YSTWJNpyDEgCpU7XMt\n2fn7MTk9x3rB3fFyxImTzL31n3c0GsybdnXVioJoa+r4BJt0Ebp6SeenTn05\nHFxLv1RwmKNKb00Ggf1aVCTg5cyyAUZJWW6Y6azd2oMyQfozWOnwNHsSmcQU\nvSLrWgy5/JGO6Ur+l96ABqcFB6RCTuuIXIKlHUhPKY4HBBO/i9M1EjZ81jAc\nNjNvxWyou5HEiua4k7R/o81ofyl6zISoBwKCnq1NXGIbQmKmZPz7/x1GvH64\nzYuTOsgplWZbvJneEWcmyUGxDOt0fsywHtUt837heCwCB4EEO2xAUERZ1FRC\nes7b0BslE9spNsD8yHJuB8pZFcd8TrN3xJLsOq/xezombQRqKdvVu0tJyjfu\n2BW76VBCfaQELY0RWmUJ2dHqJhYj6aR4NkrL8/8Ve1/0b+h6P/p2XgCGvSgv\n4myouzXsaTVWYvqVcHfzX6nO2Y44Zdxrt5l7qr0MPAMhejXM4evPM60+RL6/\nQDdV\r\n=d7dN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHxO4tYbghnXGFURtCssYESmgkGgequhS7ZF96Q365dgIgQyMliGqLOYdVPpCJUPqDGrXVA8Fs+JqMVvm48vJ0xdg="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.6_1558667948667_0.11010056043802385"},"_hasShrinkwrap":false},"0.5.0-beta.7":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.7","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"1fb31899e4bed729416d1150a9de19c95cb8d626","_id":"stb-react@0.5.0-beta.7","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-EcboOBJm+lA7wWkNqL9+XwpfhMQIGtG6GuEoRFW7nkWWBJhA+ellt/tO+DmiEfPJ9B+fsNGBrmiAhsp4Wq22bg==","shasum":"6796bcaf68fea8c1b4888a928dc30d8d4b36639a","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.7.tgz","fileCount":69,"unpackedSize":658805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc64XDCRA9TVsSAnZWagAA6EYP/2nMUaif6rBG27lQAM4z\nuR34GrBRcNktPpTCaUJ9V799PLXtoHNSu3iZjdh6dV0NcTVQfvDIVEbbovs5\nC19G6t8nv/4Oyh0+Y729LQd7OGSO7SLC7+qsFjt5uCC8zDWXgvIpRrWbHSWN\nl2Eb/mdp1lI6da3kKAIxCMMAuj1csm7xH9mOtEbAHPMV6QD4/fm1pGXcqq2I\nEanTuITIXq4Gq/CnpJ9PxCVZaq0Fxf304q6BL2FVEtx+Sl7MaaWjug+wEpZj\nmmI5FgGuQiNDlNXt+bZKhcGijZGdc/llCN21sMyTkD5xHYiV4jukL1Ozn3O0\nNR/xW3bVbUu3Bim7+asX5hVLa6L/InTOn+COdzeQY1STbM65bFhv/u9d96q8\npPBOUIxyBAfeVSiOaswMHYXkz/6M4Whpv8VR4KTEckNgmkkdXZCRkZxJBrCG\ngAgtZPBLCdGdvP5O/oQwwSvEyzpbMhrRci6lp+tTQNNNZLtgVRBeQMVeUnaE\n3RjiJT99Nxm6GYDSdis+xcdUNsAryAYnwD0qWwyYsBQ9gi1BYKcHVARKMggt\nQaB1Q3z8bujCHOFebx8WcaCCTYMCzCJtrWZxTLcg0idyRbcUBeIba3WR99S8\n561nCkVpJvkSYCjG1DIz4TQx1nsl1PYF59HXmmbuFkJ00qCwE2OannSsrTx9\n5ZDw\r\n=MGPZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6GiVZRo+EebBZ87w57lpJgYf0KWVFAhTJM65t+3PXdAiEAntIIWWmzILkxhnW64eeQndtD5B/EiHkO2P2Fof9I6SA="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.7_1558939074846_0.13249267369364892"},"_hasShrinkwrap":false},"0.5.0-beta.8":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.8","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"c73c20c527728ca88b12cdd5d23ae3499b94b6ea","_id":"stb-react@0.5.0-beta.8","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-vbxsySOuhUyIkTyQpPLeeNa7zKIZu0mufPlFcbZrTnhU6g0rkcCmhJJhxgezY5/BARS3eh5CCcCERAVHlEGb5Q==","shasum":"11d69faa1d0a45d99fcb0f15e3266582331854c2","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.8.tgz","fileCount":69,"unpackedSize":659816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc64mbCRA9TVsSAnZWagAA8kMP/1wzdbfOfL3nGCoIhW9P\nx6wbNMTmYJNi21HkXOoHgkFoBhsBgBsMwQ0ub0Ky+sPJESBbtHH36vV6l9U8\n2yQ+EycB+4V2vHpycphTpRVglbq8gQ2GttTgKz6+7ZBGPl1NPWK5AMC+PPul\n1CZG32l6GunVrPgaqWxCTnFYdVD7THlRSQ8fdJ0xO/DOXuijEmstYY4eAzTk\nrgHFNK5hyw/n8NnWiBi87rStwQc7nbhPG+q9OyxwdYjG1bwgH9B7e6ucVo0i\nmaw3f3a0NpW99yq+6YCf3EN40aL5zPsmM+Kc1sxH9fPixN+GkEDqpEAIEw/c\nbttN9i9Gr5uR61bH+t9q2lCd5KhhUPE/Wglbn/PsUEamd4G/wNhDTxUjBx5H\nFZJKqUy4BkSTtTT7mJXvgoUWFo0efyVpTcuGOUrHTvrfa+9Esjc3LLqjtt86\n9EnjLQR6hZT+og/MTY0ZwC300PrgrsOuxOmC7Sbnx5cfLzxC3copbdC+IbHa\nZt2WClqnj6gn6Yy1O5rg9fcI/piiAJiwSAXMZRIXYQzHyRkwKhR7AuqblEPr\n8Z1uHNciBmVOsRVFIwjf9L5yP/iyyFdpFAVrJTcH4roJS407m7ViArsJ2kBn\nXgf/WcqspU/Pp8Nzd4BvoMBABlhVdcGYe3bQ27bz7+5b8e75Z0g6k8gWXK68\nyI8t\r\n=YqPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoMwnRNe4BE+K3LsFSrzKZHbp85O0zVVEQShGcP+oRrwIhANFBOc5kdcNQWj1KxDeoHJfMVwEPfBUEc3Bw/A0IwFX4"}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.8_1558940058842_0.5271411287454186"},"_hasShrinkwrap":false},"0.5.0-beta.9":{"name":"stb-react","amdName":"stb-react","version":"0.5.0-beta.9","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"c73c20c527728ca88b12cdd5d23ae3499b94b6ea","_id":"stb-react@0.5.0-beta.9","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-7CIvq5I8nS49ODFG8egSQkGqnwRsCQmhCmELHLG+dFrSRhVq83298h/G3MgGJZ1fNVq+P2ozVDf4aL20P8wrKw==","shasum":"c8e42cf5971368ba8320ffd5a063c72178f78c4c","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.0-beta.9.tgz","fileCount":69,"unpackedSize":659820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc70V2CRA9TVsSAnZWagAA7YQP/2uBS9PqZyroFRqXsAWM\nmwgY3jegdcXDKSYgKe31Mr/thmnd/IiNSmMN4Ums8Wo6aZpZZCvq2eRUqDyb\nDXRFnLuxMH0w0ZzmZel3pMX6J94TVHvLBntV8yoLP5BB3h1F9ywJ2GW7H+pZ\nh62TNUivvMyN9oq3ArxGg3CXeMQoGGqD2pCMOdNhuUD4N1NIMTTHcfp/MlwI\n0AH9KumwVWlgRjgN+Xf2EzCfMzqggClk4ev06je0bLRCDX8bBRP9KkMjP5EN\njJOolhody+Hf4+GVhPXmtZy1Q9hG4Z+6/zCsPk9eigOo8lXF7XWxMeNTgy5O\nPkacq77cyUnrNghOKJtyI3knB8Lyx/00172NVPA3rlxopZoN2xYX5F2D5ebW\nwQV41Qog3fHWR+cFgpf+HhZuSyLGYp9IB1d2AJjRob9BOP4kyG4s8ziNEcba\nSdsH9iF5imRPOz1mAnYMaCVHED8xtIBLR3PY5MYhM8pvpYUHYsbPgDCFHaQq\nQ0ZB9p30hiAENhbeNvUePY7u9gn5A4LEYi3HyX0aaQGiaiwXIi9glsTaj9DJ\nCjt3+Sm+f3MweEGUgkzQS9+rG72IPQX6ZCU9GLdxKXPgwoESv8Wtcpsf+FV0\nTTvdW1m7c6CEbuQU0Ja1XWWBClGB2Fl3QWKc68i2xT+db8QlIL6oodu3GI1B\nItV/\r\n=SYkD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqYlbK84suxPCnsx1uOSaspC/DhwXTjtVBcNITQAzHdAiAUEjQYnEo4hwLLYSsz9L2SEqDKbyONmqT06MSnXl8zGA=="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.0-beta.9_1559184757936_0.6847337412030483"},"_hasShrinkwrap":false},"0.5.1-beta":{"name":"stb-react","amdName":"stb-react","version":"0.5.1-beta","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"1f68c0568835acc1577c462d23cabeb9883b3b03","_id":"stb-react@0.5.1-beta","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-S6TLzPmBSciomoQX9FpzQ1SISIfQ+4ZfZC8HWrpu1pIbyujWPa7G6ADmD0a81Sq22JpHK3kW2gacAjf9UhnN0w==","shasum":"ea9ec6c96d16736c1810e535d9fcab7a783f21b2","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.1-beta.tgz","fileCount":69,"unpackedSize":660471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc74pBCRA9TVsSAnZWagAACvIP/R8+vpPxz6DpvHnBq0xB\nvy/E0yCCLCBk0mOnOUy106T8JemzAW0k4M0Co0onir4iIk5uFv6KNpBGmGb+\nnRLuf4P/bpj9ALj8XvcnTtQuMNusdlrLxESf4f/GQefaUuiro4nT6OY/Ns6/\nb9LJCQBOgnTpxVCV5x/tjA5I/ACtQaT2In+x0okPf4eMtXoBNfJcrBy06kKf\nib0L8dZr+V1LlvTzMiI+MT79gTXuAoBK60b963bGzsenoj5X3T4AHg3vk0Km\nWB3cT/U8XdTP5/xWVCFbfR2VGIGvI2wYkqtjRC4k43kOIRUuWptOAwe+NYuN\nIRAx2+MEnM8i9vQ/TJwK7Mhn19gc522J+aok5HvhF9DldL5s2w7mNc/GSYnV\n+Hn1sQf4oEcCAQrfxFMP4WM93fxliiCbk9HKSSJSUxCgjW0VoYrKlLe5ZF22\nr2tKfeDq1fqoaz20rYl0h44xa0gVqKlgP0CvP5enwvkcqdHTF32XvLVZpF+s\nK4jsm9d6i8kEFV+M9OGk4IWqHLDK3hihsgnSAR1wm8dzaX2lnKsxIgtX2tEg\nE8hvSeLoIfhtd3aa+3qQOa5YxoCZBXLXtzi3feFIy7I1n8tlGA0VYX1YCZQa\nVPx3/qwesKHEmwHdcSW6gU/6W6uU51mwhtFIyYwDb7j1WJr/jNyh+MKcOS68\n4vm5\r\n=avQL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPrgJ8VFD3SxT85xAWVCfsnmfIVeQDeK+B6zzS7CbhGAiBtDNPv4INENoP36eoxghtjiTdnpw/WaG+rQZkpSlzW9A=="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.1-beta_1559202368651_0.8319204668461524"},"_hasShrinkwrap":false},"0.5.1-beta.1":{"name":"stb-react","amdName":"stb-react","version":"0.5.1-beta.1","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"1f68c0568835acc1577c462d23cabeb9883b3b03","_id":"stb-react@0.5.1-beta.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-dtcT+YkbBuc26AuD3TwMNqKyIXIAq4ip1j2pn14Q3KH5PG18FtOK9u7VqctDLPvBqSALhTUOfm+9mSKEZvZAdg==","shasum":"20f0e92be6fa1d3bbbdfdfd45d0c81eb01d77740","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.1-beta.1.tgz","fileCount":69,"unpackedSize":660490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7451CRA9TVsSAnZWagAAcIUP/1MgXAYGK8jtSlviiWBR\nnt6wILMY9q+gh8XxmRB6E7motS2x5Dl8dkDRlEiGBqhozrf/nDsLfsYd1abr\ns1BINc3+HzgiPiLiyArK+qDQumm3prEIrUWn7ArqhNhs2hH4JM+5vbYZS54/\nFPmiY1dqhSopyHKI1QasUNi2Ka+gWxkSnUQPnq6LFoH20dJ5Dy+lsnh2aWPF\nqQGoPJoPJzEFT9uzmqrDIM8tJNcGhtlmPaBwIJwNcOwrisZtOOX3Gdr1oHSC\nGAs/BzY9qdziBJFzr2DDWjqfBYt8sn2qXJdeyQsvQlAo3aNb5+QwKVj3Froe\n+VEVa87wmsnJ2X+plBA205CAqodV+CnkbQVlQrf0VlIGSWLbToIBW4EKYLE+\nguO46efzG6FpeTDw8oEm48T29a6U9+A6IEEsUUhoiNv4gUbEqSMt7Z4v2Y/j\nGyGf48ZqifjtMo/wXqtVrcVlHd6Ev7boI/TRV2zLj7vmS9zgsxEdnozydqlc\nHso+dhQTnZLrwM8HJSMlP3mYwnBrsCkAA7/HWmel1ayIoR7e1YhVkjqGiac1\ntD9DIVCyBg2wO0d5AOAqGV+S45UUIBaDQY+T9ZqYQmDm20QTWGmM3UNHOA+d\naVsZH1uWr4uQeuisiJHUOxO2VbD5gIKYiJop6yW+LhKbIWBeVcpjiso46KLl\nmVjg\r\n=J8Cn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHA435VGhkaGBBK9mDwJXj6boIWW7Yi8QCECzNNKgDZQAiBxyBBpRl4NZaAxQe0uuRUk7TZR8W51jBPTkNMT230Qbg=="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.1-beta.1_1559203445088_0.12259065198825692"},"_hasShrinkwrap":false},"0.5.1-beta.2":{"name":"stb-react","amdName":"stb-react","version":"0.5.1-beta.2","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started)\n\t- [Import what you need](#import-what-you-need)\n\t- [Rendering JSX](#rendering-jsx)\n\t- [Components](#components)\n\t- [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n\n---\n\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [*Create your Own!*](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))*\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from 'preact';\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from 'preact';\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \"plugins\": [\n> [\"@babel/plugin-transform-react-jsx\", { \"pragma\":\"h\" }]\n> ]\n> }\n> ```\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \"jsx\": \"react\",\n> \"jsxFactory\": \"h\",\n> }\n> ```\n\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from 'preact';\n\nrender((\n\t\n\t\tHello, world!\n\t\t\n\t
\n), document.body);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from 'preact';\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn ;\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n\n\n[](https://preactjs.com)\n\n\n[preact-compat]: https://github.com/developit/preact-compat\n[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n","readmeFilename":"README.md","gitHead":"1f68c0568835acc1577c462d23cabeb9883b3b03","_id":"stb-react@0.5.1-beta.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"dist":{"integrity":"sha512-OdtgzL1OepfB34VDUtCBDneVcQRcQrrRrwwcYWIE7e0cqPSyarhX6YUPe1ccqy9K7SFKY0hCmgxJjQNhUDO0LA==","shasum":"6e76efce94455f0e08c00fc1958f39640e5086b2","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.1-beta.2.tgz","fileCount":69,"unpackedSize":660607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc747YCRA9TVsSAnZWagAA1DMP/2/h6j0kumOvw66NJcjI\noU6iDjUOEX8PuUMVU2rg+tVE329MWapjzcYY3ZFxKLYRgyffqyDKx5vfFjT2\nwoKbSiQbPd3n+y1wcj/0xxH85Bn2sOV5t6IHtai8vd3WacJCsA9flbdzrWVG\nqI+1GGuu5CpKHCIQKLGp/M5N+l/0wpXkcoJXsNS9nNSt8UGZjbbommI+kyzJ\nuRMBoBlbYOoxLG/phHwvWu5Dkkv1XMVh/KranBlW+MzhPRt2zS0AM9Z6sjAi\nrAaIxk1UKcIKWM7xRDlP+1auu8umOB73nLzFZnGIyMZgr8DGyFks94822PDt\nwLnD/N8GLY9+WCGS60vX47A30Wd9AecMY1GtrpmnwdL/Iy05x1ltv3ZXl82x\nisa9pXQgNrkH/zcLIAuHcMhsmGCu9tIXtE9R8hwP1TNdUzlhmRPutjRanCAc\n6umvOc4kHyroipFLt2vKwMMYW0mZVkqYAF3RZbYMW8y3BIjydkMbiLaAi6Nq\ntW6g6iDJ6SOUbhhoR4Zr3+hIXEabbcZu6PGCf8IMxlhj8AB1mmNXNky6Hyyo\nShgClG7ZrdB/AY9snR1TfP83F597m90eilWzulw66Z4RXi+m5OWUAI19fkgs\nwlYPamfaw950pVPRSYLUpPCLUDu9QwowbT93gVYnfTcvRq4R8zcH1E0jWuX5\n7bsf\r\n=Yn1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC0iSKw7BMKtGdS/9XQ4T6hbzDNoqe8xM/T/nxO7iVXXAiBWIzc6EhyHGKbhUjko6VHji5yjqiHddbWvdRVO2X2j8w=="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.1-beta.2_1559203544024_0.9105126573142699"},"_hasShrinkwrap":false},"0.5.1-beta.3":{"name":"stb-react","amdName":"stb-react","version":"0.5.1-beta.3","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started) - [Import what you need](#import-what-you-need) - [Rendering JSX](#rendering-jsx) - [Components](#components) - [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n---\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [_Create your Own!_](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact _([full example](http://git.io/preact-compat-example))_\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from \"preact\";\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from \"preact\";\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \t\"plugins\": [[\"transform-react-jsx\", { \"pragma\": \"h\" }]]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \t\"plugins\": [[\"@babel/plugin-transform-react-jsx\", { \"pragma\": \"h\" }]]\n> }\n> ```\n>\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \t\"jsx\": \"react\",\n> \t\"jsxFactory\": \"h\"\n> }\n> ```\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from \"preact\";\n\nrender(\n\t\n\t\tHello, world!\n\t\t\n\t
,\n\tdocument.body\n);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from \"preact\";\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn (\n\t\t\t\n\t\t);\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n[](https://preactjs.com)\n\n[preact-compat]: https://github.com/developit/preact-compat\n[es6 class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[functional components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n\n## 更新日志\n\n### 2019-08-28\n\n- ✅ mobx 替代方案 forceUpdate(identCode:number|string,callback?: () => void): void;\n","readmeFilename":"README.md","_id":"stb-react@0.5.1-beta.3","_nodeVersion":"8.12.0","_npmVersion":"6.10.1","dist":{"integrity":"sha512-VSMMPrjBO6DXNQyAKI+PUcHllUtnmR0WMNkCewudUGHdx+aMUWkkJ/XSrQ5yy06jGMziqCLjNNjq1nLOqHdC4A==","shasum":"8c7134235fd5e3b78bd0beabbfa4c97a159416d4","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.1-beta.3.tgz","fileCount":69,"unpackedSize":662905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZkHpCRA9TVsSAnZWagAAnV0QAI/p3zgbcdLChK8yQ1fb\nQ3gTIBRb5lRy5zSkbBm+owNy71cdzcmG7BaWHiHc17mSKkh8O+dt5RGj93LV\nYM/Vt30eU527lTMmc6pRtyiX5iRwQO/EOyiAQETrflzyQBiPGqFteXaHaV12\n74nAPpKZyZs2b2HXArOHndXP6KVP6TDQZDkisreW5tG8axXP1y5M4CURqYS7\nv/UkkDW+pVwqMKvjrmuSlbRFqZf/q6A97xYezFmxW4v1Ie4YeHvWIvXJk2b/\nfKn3UMd9znZzu29FX+rDhNLcMbmCT0Q8VZKSKJPnzZnxVlhB07TifsgZtIfi\nNk9YbFHRoQbdif8u5sO9QXZ5y7qBfV9Ke8Bex2dR1DorvLRvciORJhKRxxRf\nIV5Ck+4xaD6NZLEP5GajhFf58AiktOQYHNJ5OH+NFJyG93GVp0eWpHYZNYwJ\nvK5KEKlI2HXVwApIx8RIw0Q1xgDm5v4cMyjDAJiC68acJHOy+yFw3+gvVAGm\nZYDjAQYheiXifu5GEvweH4pB/y8hWwWMRel0Dt1U9fLxhnN5LZTafgrZVvvP\nhFtEVko2tvT04kqji/NjBaM8oro2+iSB2S95chzzJrIn+2Ju/tyCKyJZA6Fa\nWA0kOPMKpypi+uBjWVcN5l88144MZuGymTW5N4MVNzR4fo5cEUqy5ni5dyui\nw1Og\r\n=kdLl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAs1ysr8ZckDJ+OfNJVIWbrto17lB5iyItzVqq4WQv3XAiBKK0ozou8+mtl0SriMuO4dOC11Nwjs5/fT/NtBFifz3A=="}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.1-beta.3_1566982632225_0.3540041902704749"},"_hasShrinkwrap":false},"0.5.1-beta.4":{"name":"stb-react","amdName":"stb-react","version":"0.5.1-beta.4","private":false,"description":"3kb 大小源码享受 preact 在 epg 平台的极速开发体验！","main":"dist/preact.js","module":"dist/preact.module.js","umd:main":"dist/preact.umd.js","source":"src/index.js","license":"MIT","types":"src/index.d.ts","scripts":{"build":"npm-run-all --parallel build:*","build:core":"microbundle build --raw","build:debug":"microbundle build --raw --cwd debug","build:hooks":"microbundle build --raw --cwd hooks","build:test-utils":"microbundle build --raw --cwd test-utils","build:compat":"microbundle build --raw --cwd compat --globals 'preact/hooks=preactHooks'","dev":"microbundle watch --raw --format cjs,umd","dev:hooks":"microbundle watch --raw --format cjs --cwd hooks","test":"npm-run-all lint build --parallel test:mocha test:karma test:ts","test:flow":"flow check","test:ts":"tsc -p test/ts/ && mocha --require babel-register test/ts/**/*-test.js","test:mocha":"mocha --recursive --require babel-register test/shared test/node","test:karma":"cross-env COVERAGE=true karma start karma.conf.js --single-run","test:mocha:watch":"npm run test:mocha -- --watch","test:karma:watch":"karma start karma.conf.js --no-single-run","test:karma:hooks":"cross-env COVERAGE=false karma start karma.conf.js --grep=hooks/test/browser/**.js --no-single-run","test:karma:test-utils":"cross-env PERFORMANCE=false COVERAGE=false karma start karma.conf.js --grep=test-utils/test/shared/**.js --no-single-run","test:karma:bench":"cross-env PERFORMANCE=true COVERAGE=false karma start karma.conf.js --grep=test/benchmarks/**.js --single-run","benchmark":"npm run test:karma:bench -- no-single-run","test:size":"bundlesize","lint":"eslint src test","postinstall":"node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""},"eslintConfig":{"extends":"developit","settings":{"react":{"pragma":"createElement"}},"rules":{"prefer-rest-params":0,"prefer-spread":0,"no-cond-assign":0,"react/jsx-no-bind":0,"react/prefer-stateless-function":0,"react/sort-comp":0,"jest/valid-expect":0,"jest/no-disabled-tests":0,"react/no-find-dom-node":0}},"keywords":["preact","react","virtual dom","vdom","components","virtual","dom"],"authors":["Jason Miller Fast 3kB alternative to React with the same modern API.
\n\n**All the power of Virtual DOM components, without the overhead:**\n\n- Familiar React API & patterns: [ES6 Class] and [Functional Components]\n- Extensive React compatibility via a simple [preact-compat] alias\n- Everything you need: JSX, VDOM, React DevTools, HMR, SSR..\n- A highly optimized diff algorithm and seamless Server Side Rendering\n- Transparent asynchronous rendering with a pluggable scheduler\n- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**\n\n### 💁 More information at the [Preact Website ➞](https://preactjs.com)\n\n---\n\n\n\n- [Demos](#demos)\n- [Libraries & Add-ons](#libraries--add-ons)\n- [Getting Started](#getting-started) - [Import what you need](#import-what-you-need) - [Rendering JSX](#rendering-jsx) - [Components](#components) - [Props & State](#props--state)\n- [Linked State](#linked-state)\n- [Examples](#examples)\n- [Extensions](#extensions)\n- [Debug Mode](#debug-mode)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n\n\n# Preact\n\n[](http://npm.im/preact)\n[](https://cdnjs.com/libraries/preact)\n[](https://preact-slack.now.sh)\n[](#backers)\n[](#sponsors)\n[](https://travis-ci.org/developit/preact)\n[](https://coveralls.io/github/developit/preact)\n[](https://unpkg.com/preact/dist/preact.min.js)\n[](https://packagephobia.now.sh/result?p=preact)\n\nPreact supports modern browsers and IE9+:\n\n[](https://saucelabs.com/u/preact)\n\n---\n\n## Demos\n\n#### Real-World Apps\n\n- [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_\n- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_\n- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_\n- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact.\n- [**ESBench**](http://esbench.com) is built using Preact.\n- [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_\n- [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:\n- [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_\n- [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_\n- [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_\n- [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art:\n- [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:\n- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:\n- [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_\n- [**Preact Gallery**](https://preact.gallery/) an 8KB photo gallery PWA built using Preact.\n- [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) Preact app to translate real life color to digital color _([Github project](https://github.com/vaneenige/rainbow-explorer))_.\n- [**YASCC**](https://carlosqsilva.github.io/YASCC/#/) Yet Another SoundCloud Client _([Github project](https://github.com/carlosqsilva/YASCC))_.\n- [**Journalize**](https://preact-journal.herokuapp.com/) 14k offline-capable journaling PWA using preact. _([Github project](https://github.com/jpodwys/preact-journal))_.\n\n#### Runnable Examples\n\n- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen)\n- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen)\n- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen)\n- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle)\n- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen)\n- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen)\n- [_Create your Own!_](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle)\n\n### Starter Projects\n\n- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:\n- [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:\n- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:\n- [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)\n- [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:\n- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:\n- [**Preact Redux/RxJS/Reselect Example**](https://github.com/continuata/preact-seed)\n- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact)\n- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee)\n- [**Preact + TypeScript + Webpack**](https://github.com/k1r0s/bleeding-preact-starter)\n- [**0 config => Preact + Poi**](https://github.com/k1r0s/preact-poi-starter)\n- [**Zero configuration => Preact + Typescript + Parcel**](https://github.com/aalises/preact-typescript-parcel-starter)\n\n---\n\n## Libraries & Add-ons\n\n- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact _([full example](http://git.io/preact-compat-example))_\n- :twisted_rightwards_arrows: [**preact-context**](https://github.com/valotas/preact-context): React's `createContext` api for Preact\n- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering.\n- :eyes: [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy): Enzyme-lite: Renderer with access to the produced virtual dom for testing.\n- :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing.\n- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components\n- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components\n- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way:\n- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component\n- :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags\n- :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/))\n- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact\n- :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library\n- :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)\n- :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX\n- :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).\n- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_\n- :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword\n- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements\n- :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper.\n- :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact.\n- :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact\n- :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events\n- :art: [**preact-stylesheet-decorator**](https://github.com/k1r0s/preact-stylesheet-decorator): Add Scoped Stylesheets to your Preact Components\n- :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators\n- :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback\n- :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).\n- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components\n\n#### UI Component Libraries\n\n> Want to prototype something or speed up your development? Try one of these toolkits:\n\n- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://material.preactjs.com/))\n- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))\n- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.\n- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)\n- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact\n- [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact\n\n---\n\n## Getting Started\n\n> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_\n\nThe easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.\n\nThe following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.\n\nYou can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).\n\n### Import what you need\n\nThe `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals:\n\n##### Named:\n\n```js\nimport { h, render, Component } from \"preact\";\n\n// Tell Babel to transform JSX into h() calls:\n/** @jsx h */\n```\n\n##### Default:\n\n```js\nimport preact from \"preact\";\n\n// Tell Babel to transform JSX into preact.h() calls:\n/** @jsx preact.h */\n```\n\n> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library.\n>\n> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`:\n>\n> **For Babel 5 and prior:**\n>\n> ```json\n> { \"jsxPragma\": \"h\" }\n> ```\n>\n> **For Babel 6:**\n>\n> ```json\n> {\n> \t\"plugins\": [[\"transform-react-jsx\", { \"pragma\": \"h\" }]]\n> }\n> ```\n>\n> **For Babel 7:**\n>\n> ```json\n> {\n> \t\"plugins\": [[\"@babel/plugin-transform-react-jsx\", { \"pragma\": \"h\" }]]\n> }\n> ```\n>\n> **For using Preact along with TypeScript add to `tsconfig.json`:**\n>\n> ```json\n> {\n> \t\"jsx\": \"react\",\n> \t\"jsxFactory\": \"h\"\n> }\n> ```\n\n### Rendering JSX\n\nOut of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM.\n\nTo render some JSX, just import those two functions and use them like so:\n\n```js\nimport { h, render } from \"preact\";\n\nrender(\n\t\n\t\tHello, world!\n\t\t\n\t
,\n\tdocument.body\n);\n```\n\nThis should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the `h()` function import gets used in the final, transpiled code as a drop in replacement for `React.createElement()`, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in \"pure JavaScript\" (you know who you are) you will need to use `h()` wherever you would otherwise use `React.createElement()`.\n\nRendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2:\n\n### Components\n\nPreact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update.\n\nComponents also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX.\n\nLet's take a look at a very simple `Clock` component, which shows the current time.\n\n```js\nimport { h, render, Component } from \"preact\";\n\nclass Clock extends Component {\n\trender() {\n\t\tlet time = new Date();\n\t\treturn (\n\t\t\t\n\t\t);\n\t}\n}\n\n// render an instance of Clock into :\nrender(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n[](https://preactjs.com)\n\n[preact-compat]: https://github.com/developit/preact-compat\n[es6 class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes\n[functional components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components\n[hyperscript]: https://github.com/dominictarr/hyperscript\n[preact-boilerplate]: https://github.com/developit/preact-boilerplate\n[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html\n\n## 更新日志\n\n### 2019-08-28\n\n- ✅ mobx 替代方案 forceUpdate(identCode:number|string,callback?: () => void): void;\n","readmeFilename":"README.md","gitHead":"2608ca7ae0e62bea934bfdbe298e52b7db16c0b9","_id":"stb-react@0.5.1-beta.4","_nodeVersion":"8.12.0","_npmVersion":"6.10.1","dist":{"integrity":"sha512-7KHvif+vc9oO3TFRp+ZBet9WmVm0pj+0s6Sgpmq5SNPZiXm9SJcqz8EYPvRz0D/73IcPmFYyAT4BUlLat7HQVA==","shasum":"f78b16c401d337410887ca6973e847e0052e7c90","tarball":"https://registry.npmjs.org/stb-react/-/stb-react-0.5.1-beta.4.tgz","fileCount":69,"unpackedSize":665301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcKebCRA9TVsSAnZWagAAaDsP/2VcoPoU1yxxvXprHwcf\nScltjILcEZu1pXi6U948i8YqyItb2emks5mnvhRxc77aLJ9/HX6cahakf0Me\nYpHVqZY+q0p5WqDrjzl18Hffc6j91jsMwn9uPUf0XSH8EKPtTCtCrY85fRqw\nzz5bn/sEixlBCdd8cR8BfFIHnc/W6qxpRcXR7+Cj0w14+NJINHXFJwsbjrDv\nj8mnFR/bWSF3X3orUKvIU9cMKm+IEIiuBq+cyWC1dFqxhkZHpuMbnyZG2w9L\nYOyitATKxTASF1a4K6XQN4XBn4naqG96CrgyXX06GXP2YPg6lOzbn/zVfsK5\n3AH1xOSp3gC25PAymqzOR0s0QiEA3gnuUy3a8BZYH8CYKIY7kAUpd2uT9Hih\nZCEnJLzC7nUkjE52LnxBzYnZGfFyzX0GdfwHhenkMOsIQoOiZ9qckG9tbEZE\n1NbbwldWeWyEJZtWF+sVfyfGLhoiVW0I9yOla36RDnsQ3oXJV/xsql4ZshE0\nfBBp8GzNTlqt5BkvPxw8LrReNHgq7sGyaTGH00VM2cOFPMHbjO4JhKXIFJW0\nh4xRFsN/XNeRSFaACOfSGyLV2/l6u1qJc6jjLV2wBQy9wlCPS95VmJZ9VPIw\nvT+Fagqw8Gqu1c3V4+OoqAn5Yy8x9yJFbQLBldnKjJBhVbfDfO3IPVnsd744\nS9oo\r\n=nWBT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8bd76w0cNfaetTnWb6w6A69QbO9UOMHZWbU7ndl18uQIhAPfq0Mpco4cR0ElOZSGDXI+M5hPVk8RTXTMArgjz2H8m"}]},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"_npmUser":{"name":"zst442331311","email":"442331311@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stb-react_0.5.1-beta.4_1567664027096_0.48672391169184737"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-30T14:21:34.444Z","0.0.1":"2019-04-30T14:21:34.643Z","modified":"2022-05-18T16:52:08.050Z","0.0.1-beta":"2019-04-30T14:51:20.847Z","0.0.2-beta":"2019-04-30T15:01:56.534Z","0.0.3-beta":"2019-04-30T15:22:45.019Z","0.0.4-beta":"2019-04-30T16:22:49.637Z","0.0.5-beta":"2019-05-01T05:57:26.207Z","0.0.6-beta":"2019-05-07T10:02:14.567Z","0.0.7-beta":"2019-05-11T06:10:41.754Z","0.0.8-beta":"2019-05-11T08:03:21.790Z","0.0.9-beta":"2019-05-11T08:32:55.214Z","0.1.0-beta":"2019-05-11T11:40:27.577Z","0.1.1-beta":"2019-05-11T12:46:57.386Z","0.1.2-beta":"2019-05-11T13:43:35.463Z","0.1.3-beta":"2019-05-11T14:19:56.574Z","0.1.4-beta":"2019-05-11T14:24:23.527Z","0.1.5-beta":"2019-05-12T04:30:37.315Z","0.1.6-beta":"2019-05-12T06:30:01.546Z","0.1.7-beta":"2019-05-12T10:36:05.462Z","0.1.8-beta":"2019-05-12T10:45:16.791Z","0.1.9-beta":"2019-05-13T04:00:04.691Z","0.2.0-beta":"2019-05-13T05:44:23.005Z","0.2.1-beta":"2019-05-13T05:59:08.443Z","0.2.2-beta":"2019-05-13T09:51:19.749Z","0.2.3-beta":"2019-05-13T10:12:13.855Z","0.2.4-beta":"2019-05-13T11:40:48.719Z","0.2.5-beta":"2019-05-13T13:56:16.146Z","0.2.6-beta":"2019-05-14T01:55:27.201Z","0.2.7-beta":"2019-05-14T02:00:20.751Z","0.2.8-beta":"2019-05-14T02:19:25.112Z","0.2.9-beta":"2019-05-14T02:25:36.762Z","0.3.0-beta":"2019-05-14T02:42:51.137Z","0.3.1-beta":"2019-05-14T02:57:06.200Z","0.3.2-beta":"2019-05-14T03:21:27.159Z","0.3.3-beta":"2019-05-14T03:24:29.934Z","0.3.4-beta":"2019-05-14T09:04:06.236Z","0.3.5-beta":"2019-05-14T09:08:01.865Z","0.3.6-beta":"2019-05-14T09:45:28.797Z","0.3.7-beta":"2019-05-14T10:05:28.137Z","0.3.8-beta":"2019-05-14T10:57:26.889Z","0.3.9-beta":"2019-05-14T11:07:53.301Z","0.4.0-beta":"2019-05-14T11:15:49.627Z","0.4.1-beta":"2019-05-14T11:54:43.709Z","0.4.2-beta":"2019-05-14T12:59:34.812Z","0.4.3-beta":"2019-05-15T02:14:30.632Z","0.4.4-beta":"2019-05-15T02:35:43.610Z","0.4.5-beta":"2019-05-15T03:28:49.198Z","0.4.6-beta":"2019-05-15T05:17:19.878Z","0.5.0-beta.1":"2019-05-15T10:26:21.109Z","0.5.0-beta.2":"2019-05-15T10:40:39.936Z","0.5.0-beta.3":"2019-05-15T12:12:54.726Z","0.5.0-beta.4":"2019-05-15T12:13:31.934Z","0.5.0-beta.5":"2019-05-17T06:36:44.659Z","0.4.7-beta":"2019-05-24T02:42:15.577Z","0.4.8-beta":"2019-05-24T02:44:57.013Z","0.4.9-beta":"2019-05-24T02:48:33.935Z","0.5.0-beta.6":"2019-05-24T03:19:08.916Z","0.5.0-beta.7":"2019-05-27T06:37:55.076Z","0.5.0-beta.8":"2019-05-27T06:54:19.028Z","0.5.0-beta.9":"2019-05-30T02:52:38.213Z","0.5.1-beta":"2019-05-30T07:46:08.999Z","0.5.1-beta.1":"2019-05-30T08:04:05.388Z","0.5.1-beta.2":"2019-05-30T08:05:44.294Z","0.5.1-beta.3":"2019-08-28T08:57:12.581Z","0.5.1-beta.4":"2019-09-05T06:13:47.304Z"},"maintainers":[{"name":"zst442331311","email":"442331311@qq.com"}],"description":"享受 preact 在 epg 平台的极速开发体验！","keywords":["starter","frontend","preact","redux","typescript","epg","stb"],"author":{"name":"shitaozhang"},"license":"MIT","readme":"","readmeFilename":""}