1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
{  "name": "zerobias/effector",  "version": "0.1.4",  "libraries": {    "xv": "^1.1.25"  },  "title": "Eff",  "branch": "develop",  "style": {    "name": "Future",    "componentSet": {      "nav": "nav/BasicNav",      "header": "header/BannerHeader",      "article": "article/BasicArticle",      "footer": "footer/BasicFooter"    },    "fontFamily": "\"Avenir Next\", Helvetica, sans-serif",    "heading": {      "fontWeight": 500,      "textTransform": "uppercase",      "letterSpacing": "0.2em"    },    "alternativeText": {      "textTransform": "uppercase",      "fontWeight": 400,      "letterSpacing": "0.2em",      "opacity": 0.75    },    "colors": {      "text": "#333",      "background": "#fff",      "primary": "#666",      "secondary": "#888",      "highlight": "#1f80ff",      "muted": "#f6f6f6",      "border": "#eee"    },    "layout": {      "centered": true,      "maxWidth": 1024,      "bannerHeight": "80vh"    }  },  "content": [    {      "component": "nav",      "links": [        {          "href": "https://github.com/zerobias/effector",          "text": "GitHub"        }      ]    },    {      "component": "header",      "heading": "effector",      "subhead": "Reactive state manager",      "children": [        {          "component": "ui/TweetButton",          "text": "effector: Reactive state manager",          "url": ""        },        {          "component": "ui/GithubButton",          "user": "zerobias",          "repo": "effector"        }      ]    },    {      "component": "article",      "metadata": {        "source": "github.readme"      },      "html": "\n\n<h2>Installation</h2>\n<pre>npm install --save effector effector-react</pre><p>Or using <code>yarn</code></p>\n<pre>yarn add effector effector-react</pre><h2>Usage</h2>\n<p><a href=\"https://codesandbox.io/s/vmx6wxww43\"><img src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"></a></p>\n<pre><span class=\"hljs-keyword\">import</span> {\n createStore,\n createEvent,\n createEffect,\n createStoreObject,\n} <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;effector&apos;</span>\n\n<span class=\"hljs-keyword\">import</span> {createStoreConsumer} <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;effector-react&apos;</span>\n\n<span class=\"hljs-keyword\">const</span> changeText = createEvent(<span class=\"hljs-string\">&apos;change todo text&apos;</span>)\n<span class=\"hljs-keyword\">const</span> clickSave = createEvent(<span class=\"hljs-string\">&apos;click save&apos;</span>)\n<span class=\"hljs-keyword\">const</span> toggleComplete = createEvent(<span class=\"hljs-string\">&apos;toggle complete&apos;</span>)\n<span class=\"hljs-keyword\">const</span> resetForm = createEvent(<span class=\"hljs-string\">&apos;reset form&apos;</span>)\n<span class=\"hljs-keyword\">const</span> addTodo = createEvent(<span class=\"hljs-string\">&apos;add todo&apos;</span>)\n<span class=\"hljs-keyword\">const</span> fetchSaveTodo = createEffect(<span class=\"hljs-string\">&apos;save request&apos;</span>)\n\n<span class=\"hljs-keyword\">const</span> todos = createStore([]).on(fetchSaveTodo.done, (state, {params}) =&gt; [\n ...state,\n params,\n])\n\n<span class=\"hljs-keyword\">const</span> text = createStore(<span class=\"hljs-string\">&apos;&apos;</span>).on(changeText, (_, newText) =&gt; newText)\n<span class=\"hljs-keyword\">const</span> complete = createStore(<span class=\"hljs-literal\">false</span>).on(toggleComplete, complete =&gt; !complete)\n\n<span class=\"hljs-keyword\">const</span> form = createStoreObject({\n text,\n complete,\n}).reset(resetForm)\n\n<span class=\"hljs-keyword\">const</span> FormStore = createStoreConsumer(form)\n\n<span class=\"hljs-keyword\">const</span> Form = <span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =&gt;</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">FormStore</span>&gt;</span>\n  {form =&gt; (\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form</span> <span class=\"hljs-attr\">onSubmit</span>=<span class=\"hljs-string\">{resetForm}</span>&gt;</span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">&quot;text&quot;</span> <span class=\"hljs-attr\">onChange</span>=<span class=\"hljs-string\">{e</span> =&gt;</span> changeText(e.currentTarget.value)} /&gt;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button</span> <span class=\"hljs-attr\">onClick</span>=<span class=\"hljs-string\">{resetForm}</span>&gt;</span>reset<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">button</span>&gt;</span>\n   <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">form</span>&gt;</span>\n  )}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">FormStore</span>&gt;</span>\n)</span></pre><h3>Domain hooks</h3>\n<ul>\n<li>onCreateEvent</li>\n<li>onCreateEffect</li>\n<li>onCreateStore</li>\n<li>onCreateDomain (to handle nested domains)</li>\n</ul>\n<pre><span class=\"hljs-keyword\">import</span> {createDomain} <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;effector&apos;</span>\n<span class=\"hljs-keyword\">const</span> mainPage = createDomain(<span class=\"hljs-string\">&apos;main page&apos;</span>)\nmainPage.onCreateEvent(<span class=\"hljs-function\"><span class=\"hljs-params\">event</span> =&gt;</span> {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">&apos;new event: &apos;</span>, event.getType())\n})\nmainPage.onCreateStore(<span class=\"hljs-function\"><span class=\"hljs-params\">store</span> =&gt;</span> {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">&apos;new store: &apos;</span>, store.getState())\n})\n<span class=\"hljs-keyword\">const</span> mount = mainPage.event(<span class=\"hljs-string\">&apos;mount&apos;</span>)\n<span class=\"hljs-comment\">// =&gt; new event: main page/mount</span>\n\n<span class=\"hljs-keyword\">const</span> pageStore = mainPage.store(<span class=\"hljs-number\">0</span>)\n<span class=\"hljs-comment\">// =&gt; new store: 0</span></pre><h2>Typings</h2>\n<p>Effector supports both TypeScript and Flow type annotations out of the box.</p>\n<h2>API</h2>\n<pre><span class=\"hljs-keyword\">import</span> {\n createEvent,\n createEffect,\n createDomain,\n createStore,\n createStoreObject,\n} <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;effector&apos;</span></pre><h2>Core types</h2>\n<pre><span class=\"hljs-keyword\">import</span> type {Domain, Event, Effect, Store} <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;effector&apos;</span></pre>"    },    {      "component": "footer",      "links": [        {          "href": "https://github.com/zerobias/effector",          "text": "GitHub"        },        {          "href": "https://github.com/zerobias",          "text": "zerobias"        }      ]    }  ]}