Skip to content

Instantly share code, notes, and snippets.

@jlgrall
Created February 8, 2019 12:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jlgrall/0e3194fe5e17e423c225dc10c2bd00c6 to your computer and use it in GitHub Desktop.
Save jlgrall/0e3194fe5e17e423c225dc10c2bd00c6 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>domvm-MobX Demo</title>
<style>
.section { margin-left: 1em; }
input[type=text] { width: 10em; }
#limit { width: 3em; }
#listWrapper { margin-top: 1em; }
</style>
</head>
<body>
<script id="dependencies">
// https://github.com/domvm/domvm (v3.4.8, dev build)
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.domvm={})}("undefined"!=typeof self?self:this,function(e){"use strict";var t=0,n=1,r=2,l=3,a=4,o=5,u="undefined"!=typeof window?document:{},i={};function s(){}var f=Array.isArray;function d(e){return null!=e&&e.constructor===Object}function c(e,t,n,r){e.splice.apply(e,[n,r].concat(t))}function v(e){var t=typeof e;return"string"===t||"number"===t}function y(e){return"function"==typeof e}function p(e){return"object"==typeof e&&y(e.then)}function h(e){for(var t=arguments,n=1;n<t.length;n++)for(var r in t[n])e[r]=t[n][r];return e}function m(e,t,n){var r;while(r=t.shift())0===t.length?e[r]=n:e[r]=e=e[r]||{}}function g(e,t){for(var n=[],r=t;r<e.length;r++)n.push(e[r]);return n}function b(e,t){for(var n in e)if(e[n]!==t[n])return false;return true}function w(e,t){var n=e.length;if(t.length!==n)return false;for(var r=0;r<n;r++)if(e[r]!==t[r])return false;return true}function k(e,t){return e===t||null!=t&&null!=e&&(f(e)?w(e,t):!!d(e)&&b(e,t))}function _(e,t,n){return function(){return e.apply(n,t)}}function E(e){var t=e.slice(),n=[];n[0]=0;for(var r,l,a,o=0,u=0;u<e.length;++u){var i=e[u];if(e[a=n[o]]<i)t[u]=a,n[++o]=u;else{r=0,l=o;while(r<l)e[n[a=r+l>>1]]<i?r=a+1:l=a;i<e[n[r]]&&(r>0&&(t[u]=n[r-1]),n[r]=u)}}l=n[o];while(o>=0)n[o--]=l,l=t[l];return n}function x(e,t){var n,r=0,l=t.length-1;if(l<=2147483647)while(r<=l){if(t[n=r+l>>1]===e)return n;t[n]<e?r=n+1:l=n-1}else while(r<=l){if(t[n=Math.floor((r+l)/2)]===e)return n;t[n]<e?r=n+1:l=n-1}return r==t.length?null:r}function T(e){return"."===e[0]}function A(e){return"o"===e[0]&&"n"===e[1]}function N(e){return"_"===e[0]}function D(e){return"style"===e}function R(e){e&&e.el&&e.el.offsetHeight}function C(e){return null!=e.node&&null!=e.node.el}function S(e,t){switch(t){case"value":case"checked":case"selected":return true}return false}function M(e){e=e||i;while(null==e.vm&&e.parent)e=e.parent;return e.vm}function I(){}var L=I.prototype={constructor:I,type:null,vm:null,key:null,ref:null,data:null,hooks:null,ns:null,el:null,tag:null,attrs:null,body:null,flags:0,_diff:null,_dead:false,_lis:false,idx:null,parent:null};function O(e){var t=new I;return t.type=r,t.body=e,t}L._class=null;var H={},U=/\[(\w+)(?:=(\w+))?\]/g;function Y(e){var t=H[e];if(null==t){var n,r,l,a;H[e]=t={tag:(n=e.match(/^[-\w]+/))?n[0]:"div",id:(r=e.match(/#([-\w]+)/))?r[1]:null,class:(l=e.match(/\.([-\w.]+)/))?l[1].replace(/\./g," "):null,attrs:null};while(a=U.exec(e))null==t.attrs&&(t.attrs={}),t.attrs[a[1]]=a[2]||""}return t}var j={warnings:true,verbose:true,mutations:true,DATA_REPLACED:function(e,t,n){if(y(e.view)&&e.view.length>1){return["A view's data was replaced. The data originally passed to the view closure during init is now stale. You may want to rely only on the data passed to render() or vm.data.",e,t,n]}},UNKEYED_INPUT:function(e){return["Unkeyed <input> detected. Consider adding a name, id, _key, or _ref attr to avoid accidental DOM recycling between different <input> types.",e]},UNMOUNTED_REDRAW:function(e){return["Invoking redraw() of an unmounted (sub)view may result in errors.",e]},INLINE_HANDLER:function(e,t,n){return["Anonymous event handlers get re-bound on each redraw, consider defining them outside of templates for better reuse.",e,t,n]},MISMATCHED_HANDLER:function(e,t,n){return["Patching of different event handler styles is not fully supported for performance reasons. Ensure that handlers are defined using the same style.",e,t,n]},SVG_WRONG_FACTORY:function(e){return["<svg> defined using domvm.defineElement. Use domvm.defineSvgElement for <svg> & child nodes.",e]},FOREIGN_ELEMENT:function(e){return["domvm stumbled upon an element in its DOM that it didn't create, which may be problematic. You can inject external elements into the vtree using domvm.injectElement.",e]},REUSED_ATTRS:function(e){return["Attrs objects may only be reused if they are truly static, as a perf optimization. Mutating & reusing them will have no effect on the DOM due to 0 diff.",e]},ADJACENT_TEXT:function(e,t,n){return["Adjacent text nodes will be merged. Consider concatentating them yourself in the template for improved perf.",e,t,n]},ARRAY_FLATTENED:function(e,t){return["Arrays within templates will be flattened. When they are leading or trailing, it's easy and more performant to just .concat() them in the template.",e,t]},ALREADY_HYDRATED:function(e){return["A child view failed to mount because it was already hydrated. Make sure not to invoke vm.redraw() or vm.update() on unmounted views.",e]},ATTACH_IMPLICIT_TBODY:function(e,t){return["<table><tr> was detected in the vtree, but the DOM will be <table><tbody><tr> after HTML's implicit parsing. You should create the <tbody> vnode explicitly to avoid SSR/attach() failures.",e,t]}};function V(e,t){if(j.warnings&&y(j[e])){var n=j[e].apply(null,t);n&&(n[0]=e+": "+(j.verbose?n[0]:""),console.warn.apply(console,n))}}var F=1,P=2,G=4,q=8;function W(e,t,r,l){var a=new I;a.type=n,a.flags=l||0,a.attrs=t||null;var o=Y(e);e=o.tag;var u=null!=o.id,i=null!=o.class,s=null!=o.attrs;if(u||i||s){var f=a.attrs||{};if(u&&null==f.id&&(f.id=o.id),i&&(a._class=o.class,f.class=o.class+(null!=f.class?" "+f.class:"")),s)for(var d in o.attrs)null==f[d]&&(f[d]=o.attrs[d]);a.attrs=f}if(a.tag=e,null!=a.attrs){var c=a.attrs;null!=c._key&&(a.key=c._key),null!=c._ref&&(a.ref=c._ref),null!=c._hooks&&(a.hooks=c._hooks),null!=c._data&&(a.data=c._data),null!=c._flags&&(a.flags=c._flags),null==a.key&&(null!=a.ref?a.key=a.ref:null!=c.id?a.key=c.id:null!=c.name&&(a.key=c.name+("radio"===c.type||"checkbox"===c.type?c.value:"")))}return null!=r&&(a.body=r,r instanceof B&&(a.flags=r.flags)),"svg"===a.tag?setTimeout(function(){null==a.ns&&V("SVG_WRONG_FACTORY",[a])},16):/^(?:input|textarea|select|datalist|output)$/.test(a.tag)&&null==a.key&&V("UNKEYED_INPUT",[a]),a}function B(e,t,n){var r,l=this,o=e.length;l.flags=q,l.items=e,l.length=o,l.key=function(){return null},l.diff={val:function(n,r){return t.val(e[n],r)},eq:function(e,n){return t.eq(n._diff,l.diff.val(e))}},l.tpl=function(t){return r(e[t],t)},l.map=function(e){return r=e,l},l.body=function(e){for(var t=[],n=0;n<o;n++){var r=l.tpl(n);r.type!=a&&(r._diff=l.diff.val(n,e)),t.push(r)}e.body=t,ee(e)},null!=n&&(l.flags|=G,l.key=function(t){return n(e[t],t)}),y(t)&&(l.diff={val:function(n){return t(e[n])},eq:function(e,t){return k(t._diff,l.diff.val(e))}})}var z=function(e){return e},K=s,X=s;function $(e){z=e.val,K=e.on,X=e.off}function J(e,t,n){m(e,("refs."+t).split("."),n)}function Z(e){while(e=e.parent)e.flags|=F}function Q(e,t,n,r){if(e.type!==o&&e.type!==a){e.parent=t,e.idx=n,e.vm=r,null!=e.ref&&J(M(e),e.ref,e);var l=e.hooks,u=r&&r.hooks;(l&&(l.willRemove||l.didRemove)||u&&(u.willUnmount||u.didUnmount))&&Z(e),f(e.body)?ee(e):""===e.body?e.body=null:(e.body=z(e.body,M(e)._stream),null==e.body||e.body instanceof B||(e.body=""+e.body))}}function ee(e){for(var t=e.body,n=0;n<t.length;n++){var l=t[n];false===l||null==l?t.splice(n--,1):f(l)?(0!==n&&n!==t.length-1||V("ARRAY_FLATTENED",[e,l]),c(t,l,n--,1)):(null==l.type&&(t[n]=l=O(""+l)),l.type===r?null==l.body||""===l.body?t.splice(n--,1):n>0&&t[n-1].type===r?(V("ADJACENT_TEXT",[e,t[n-1].body,l.body]),t[n-1].body+=l.body,t.splice(n--,1)):Q(l,e,n,null):Q(l,e,n,null))}}var te={animationIterationCount:true,boxFlex:true,boxFlexGroup:true,boxOrdinalGroup:true,columnCount:true,flex:true,flexGrow:true,flexPositive:true,flexShrink:true,flexNegative:true,flexOrder:true,gridRow:true,gridColumn:true,order:true,lineClamp:true,borderImageOutset:true,borderImageSlice:true,borderImageWidth:true,fontWeight:true,lineHeight:true,opacity:true,orphans:true,tabSize:true,widows:true,zIndex:true,zoom:true,fillOpacity:true,floodOpacity:true,stopOpacity:true,strokeDasharray:true,strokeDashoffset:true,strokeMiterlimit:true,strokeOpacity:true,strokeWidth:true};function ne(e,t){return isNaN(t)||te[e]?t:t+"px"}function re(e,t){var n=(e.attrs||i).style,r=t?(t.attrs||i).style:null;if(null==n||v(n))e.el.style.cssText=n;else{for(var l in n){var a=n[l];n[l]=a=z(a,M(e)._stream),(null==r||null!=a&&a!==r[l])&&(e.el.style[l]=ne(l,a))}if(r)for(var o in r)null==n[o]&&(e.el.style[o]="")}}var le={};function ae(e){h(le,e)}var oe=s,ue=false,ie=s;function se(e){oe=e.onevent||oe,null!=e.syncRedraw&&(ue=e.syncRedraw),null!=e.didRedraws&&(ie=e.didRedraws),e.onemit&&ae(e.onemit),e.stream&&$(e.stream)}var fe={};function de(e){fe[e]||(fe[e]=true,ve(u,e,he,true))}function ce(e,t,n,r){e.removeEventListener(t.slice(2),n,r)}function ve(e,t,n,r){e.addEventListener(t.slice(2),n,r)}function ye(e,t,n,r,l){var a,o,u=e.apply(l,t.concat([n,r,l,l.data]));if(a=l.onevent(n,r,l,l.data,t),o=oe.call(null,n,r,l,l.data,t),false===u||false===a||false===o)return n.preventDefault(),n.stopPropagation(),false}function pe(e,t){var n,r,l="on"+e,a=[];while(t)(r=t.attrs)&&(n=r[l])&&f(n)&&a.unshift(n),t=t.parent;return a}function he(e){var t=e.target._node;if(null!=t)for(var n=pe(e.type,t),r=M(t),l=0;l<n.length;l++){if(false===ye(n[l][0],n[l].slice(1),e,t,r))break}}function me(e,t,n,r){if(n!=r){y(n)&&y(r)&&r.name==n.name&&V("INLINE_HANDLER",[e,r,n]),null==r||null==n||f(r)==f(n)&&d(r)==d(n)&&y(r)==y(n)||V("MISMATCHED_HANDLER",[e,r,n]);var l=e.el;y(n)?ve(l,t,n,false):null!=n&&de(t),y(r)&&ce(l,t,r,false)}}function ge(e,t,n){T(t)&&(t=t.substr(1),n=true),n?e.el[t]="":e.el.removeAttribute(t)}function be(e,t,n,r){var l=e.el;null!=e.ns?l.setAttribute(t,n):"class"===t?l.className=n:"id"===t||"boolean"==typeof n||r?l[t]=n:"."===t[0]?l[t.substr(1)]=n:l.setAttribute(t,n)}function we(e,t){var n=e.attrs||i,r=t.attrs||i;if(n===r)V("REUSED_ATTRS",[e]);else{for(var l in n){var a=n[l];if(null!=a){var o=S(e.tag,l),u=o?e.el[l]:r[l];n[l]=a=z(a,(M(e)||i)._stream),a===u||(D(l)?re(e,t):N(l)||(A(l)?me(e,l,a,u):be(e,l,a,o)))}}for(var l in r)null==n[l]&&(A(l)?me(e,l,n[l],r[l]):N(l)||ge(e,l,S(e.tag,l)))}}function ke(e,t,n,r){return e.type===a&&(t=e.data,n=e.key,r=e.opts,e=e.view),new rt(e,t,n,r)}var _e=[];function Ee(e,t,n,r,l){if(null!=e){var a=n.hooks[t];if(a){if("d"!==t[0]||"i"!==t[1]||"d"!==t[2])return a(n,r);l?(R(n.parent),a(n,r)):_e.push([a,n,r])}}}function xe(e,t){if(_e.length){var n;t&&R(e.node);while(n=_e.shift())n[0](n[1],n[2])}}function Te(e,t){return null!=t?u.createElementNS(t,e):u.createElement(e)}function Ae(e){return u.createTextNode(e)}function Ne(e){return u.createComment(e)}function De(e){return e.nextSibling}function Re(e){var t=e.vm,n=null!=t&&Ee(t.hooks,"willUnmount",t,t.data),r=Ee(e.hooks,"willRemove",e);if((e.flags&F)===F&&f(e.body))for(var l=0;l<e.body.length;l++)Re(e.body[l]);return n||r}function Ce(e,t){if(t){var n=e.vm;null!=n&&(n.node=n.refs=null)}var r=e.body;if(f(r))for(var l=0;l<r.length;l++)Ce(r[l],true)}function Se(e,t,n){var r=t._node,l=r.vm;if(Ce(r,true),(r.flags&F)===F)for(var a=0;a<r.body.length;a++)Se(t,r.body[a].el);delete t._node,e.removeChild(t),Ee(r.hooks,"didRemove",r,null,n),null!=l&&(Ee(l.hooks,"didUnmount",l,l.data,n),l.node=null)}function Me(e,t){var n=t._node;if(!n._dead){var r=Re(n);null!=r&&p(r)?(n._dead=true,r.then(_(Se,[e,t,true]))):Se(e,t)}}function Ie(e){var t=e.el;if(0==(e.flags&F))Ce(e,false),t.textContent=null;else{var n=t.firstChild;if(null!=n)do{var r=De(n);Me(t,n)}while(n=r)}}function Le(e,t,n){var r=t._node,l=null!=t.parentNode,a=t!==n&&l?null:r.vm;null!=a&&Ee(a.hooks,"willMount",a,a.data),Ee(r.hooks,l?"willReinsert":"willInsert",r),e.insertBefore(t,n),Ee(r.hooks,l?"didReinsert":"didInsert",r),null!=a&&Ee(a.hooks,"didMount",a,a.data)}function Oe(e,t,n){Le(e,t,n?De(n):null)}function He(e){for(var t=0;t<e.body.length;t++){var n=e.body[t],r=n.type;if(r<=l)Le(e.el,Ue(n));else if(r===a){r=(u=ke(n.view,n.data,n.key,n.opts)._redraw(e,t,false)).node.type,Le(e.el,Ue(u.node))}else if(r===o){var u;(u=n.vm)._update(n.data,e,t,true,true),r=u.node.type,Le(e.el,u.node.el)}}}function Ue(e,t){return null==e.el&&(e.type===n?(e.el=t||Te(e.tag,e.ns),null!=e.attrs&&we(e,i),(e.flags&q)===q&&e.body.body(e),f(e.body)?He(e):null!=e.body&&(e.el.textContent=e.body)):e.type===r?e.el=t||Ae(e.body):e.type===l&&(e.el=t||Ne(e.body))),e.el._node=e,e.el}function Ye(e){return e.parent}var je=1,Ve=2;function Fe(e,t,n,r,l,a,o,u){return function(i,s,f,d,c,v){var y,p;if(null!=d[r]){if(null==(y=d[r]._node))return V("FOREIGN_ELEMENT",[d[r]]),void(d[r]=e(d[r]));if(Ye(y)!==i)return p=e(d[r]),null!=y.vm?y.vm.unmount(true):Me(s,d[r]),void(d[r]=p)}if(d[l]==c)return Ve;if(null==d[l].el)n(s,Ue(d[l]),d[r]),d[l]=t(d[l],f);else if(d[l].el===d[r])d[l]=t(d[l],f),d[r]=e(d[r]);else{if(v||y!==d[o])return null!=d[l].vm&&V("ALREADY_HYDRATED",[d[l].vm]),v&&null!=d[r]?Pe(e,t,n,r,l,s,f,y,d):je;p=d[r],d[r]=e(p),u(s,p,d[a]),d[a]=p}}}function Pe(e,t,n,r,l,a,o,u,i){if(u._lis)n(a,i[l].el,i[r]),i[l]=t(i[l],o);else{var s=x(u.idx,i.tombs);u._lis=true;var f=e(i[r]);n(a,i[r],null!=s?o[i.tombs[s]].el:s),null==s?i.tombs.push(u.idx):i.tombs.splice(s,0,u.idx),i[r]=f}}var Ge=Fe(De,function(e,t){return t[e.idx+1]},Le,"lftSib","lftNode","rgtSib","rgtNode",Oe),qe=Fe(function(e){return e.previousSibling},function(e,t){return t[e.idx-1]},Oe,"rgtSib","rgtNode","lftSib","lftNode",Le);function We(e,t){var n=t.body,r=e.el,l=e.body,a={lftNode:l[0],rgtNode:l[l.length-1],lftSib:(n[0]||i).el,rgtSib:(n[n.length-1]||i).el};e:while(1){while(1){var o=Ge(e,r,l,a,null,false);if(o===je)break;if(o===Ve)break e}while(1){var u=qe(e,r,l,a,a.lftNode,false);if(u===je)break;if(u===Ve)break e}Be(e,r,l,a);break}}function Be(e,t,n,r){var l=[],a=t.firstChild;do{var o=a._node;o.parent===e&&l.push(o.idx)}while(a=De(a));for(var u=E(l).map(function(e){return l[e]}),i=0;i<u.length;i++)n[u[i]]._lis=true;r.tombs=u;while(1){if(Ge(e,t,n,r,null,true)===Ve)break}}function ze(e){return e.el._node.parent!==e.parent}function Ke(e,t,n){return t[n]}function Xe(e,t,n){for(;n<t.length;n++){var r=t[n];if(null!=r.vm){if(e.type===a&&r.vm.view===e.view&&r.vm.key===e.key||e.type===o&&r.vm===e.vm)return r}else if(!ze(r)&&e.tag===r.tag&&e.type===r.type&&e.key===r.key&&(e.flags&~F)==(r.flags&~F))return r}return null}function $e(e,t,n){if(null==t._keys){if(t[n].key===e.key)return t[n];for(var r={},l=0;l<t.length;l++)r[t[l].key]=l;t._keys=r}return t[t._keys[e.key]]}function Je(e,t){Ee(t.hooks,"willRecycle",t,e);var n=e.el=t.el,l=t.body,a=e.body;if(n._node=e,e.type!==r||a===l){null==e.attrs&&null==t.attrs||we(e,t);var o=f(l),u=f(a),i=(e.flags&q)===q;o?u||i?Ze(e,t):a!==l&&(null!=a?n.textContent=a:Ie(t)):u?(Ie(t),He(e)):a!==l&&(null!=a&&null!=l?n.firstChild.nodeValue=a:n.textContent=a),Ee(t.hooks,"didRecycle",t,e)}else n.nodeValue=a}function Ze(e,t){var r=e.body,u=r.length,i=t.body,f=i.length,d=(e.flags&q)===q,c=(e.flags&P)===P,v=(e.flags&G)===G,y=!c&&e.type===n,p=true,h=0===f?s:v?$e:c||d?Ke:Xe;if(y&&0===u)return Ie(t),void(d&&(e.body=[]));var m,g,b=0,w=false,k=0;if(d)var _={key:null},E=e.body=Array(u);for(var x=0;x<u;x++){if(d){var T=false;p&&(v&&(_.key=r.key(x)),m=h(_,i,k)),null!=m?(g=m.idx,r.diff.eq(x,m)?((A=m).parent=e,A.idx=x,A._lis=false):T=true):T=true,T&&((A=r.tpl(x)).type===a?A=null!=m?m.vm._update(A.data,e,x,true,true).node:ke(A.view,A.data,A.key,A.opts)._redraw(e,x,false).node:(Q(A,e,x),A._diff=r.diff.val(x,e),null!=m&&Je(A,m))),E[x]=A}else{var A,N=(A=r[x]).type;if(N<=l)(m=p&&h(A,i,k))&&(Je(A,m),g=m.idx);else if(N===a)(m=p&&h(A,i,k))?(g=m.idx,m.vm._update(A.data,e,x,true,true)):ke(A.view,A.data,A.key,A.opts)._redraw(e,x,false);else if(N===o){var D=A.vm,R=C(D);R&&D.node.parent!=t&&(D.unmount(true),R=false),D._update(A.data,e,x,R,true)}}if(null!=m&&(g===k?++k===f&&u>f&&(m=null,p=false):w=true,!v&&f>100&&w&&++b%10==0))while(k<f&&ze(i[k]))k++}y&&We(e,t)}var Qe=new Set,et=0;function tt(){Qe.forEach(function(e){if(null!=e.node){var t=e;while(t=t.parent())if(Qe.has(t))return;e.redraw(true)}}),ie(Qe),Qe.clear(),et=0}var nt=null;function rt(e,t,n,r){var l=this;l.view=e,l.data=t,l.key=n,r&&(l.opts=r,l.cfg(r));var a=d(e)?e:e.call(l,l,t,n,r);y(a)?l.render=a:(l.render=a.render,l.cfg(a)),l.init&&l.init.call(l,l,l.data,l.key,r)}function lt(e,t,n){return k(t,n)}function at(e){var t=this;e.init&&(t.init=e.init),e.diff&&(y(e.diff)?t.diff={val:e.diff,eq:lt}:t.diff=e.diff),e.onevent&&(t.onevent=e.onevent),e.hooks&&(t.hooks=h(t.hooks||{},e.hooks)),e.onemit&&(t.onemit=h(t.onemit||{},e.onemit))}j.mutations&&(nt=new function(e){navigator.userAgent.indexOf("Edge");var t=-1!==navigator.userAgent.indexOf("Trident/"),n=Object.getOwnPropertyDescriptor,r=Object.defineProperty,l=Node.prototype,a=n(l,"textContent"),o=n(l,"nodeValue"),u=HTMLElement.prototype,i=n(u,"innerText"),s=Element.prototype,f=n(t?u:s,"innerHTML"),d=n(t?u:s,"className"),c=n(t?u:s,"id"),v=CSSStyleDeclaration.prototype,y=n(v,"cssText"),p=HTMLInputElement.prototype,h=HTMLTextAreaElement.prototype,m=HTMLSelectElement.prototype,g=HTMLOptionElement.prototype,b=n(p,"checked"),w=n(p,"value"),k=n(h,"value"),_=n(m,"value"),E=n(m,"selectedIndex"),x=n(g,"selected"),T={"document.createElement":null,"document.createElementNS":null,"document.createTextNode":null,"document.createComment":null,"document.createDocumentFragment":null,"DocumentFragment.prototype.insertBefore":null,"Element.prototype.appendChild":null,"Element.prototype.removeChild":null,"Element.prototype.insertBefore":null,"Element.prototype.replaceChild":null,"Element.prototype.remove":null,"Element.prototype.setAttribute":null,"Element.prototype.setAttributeNS":null,"Element.prototype.removeAttribute":null,"Element.prototype.removeAttributeNS":null},A={},N=null;function D(e){var t=e.split("."),n=window;while(t.length>1)n=n[t.shift()];return{ctx:n,last:t[0]}}for(var R in T){var C=D(R);null===T[R]&&(T[R]=C.ctx[C.last]),function(e,t){A[t]=0,C.ctx[t]=function(){return A[t]++,T[e].apply(this,arguments)}}(R,C.last)}function S(){for(var e in A)A[e]=0}A.textContent=0,r(l,"textContent",{set:function(e){A.textContent++,a.set.call(this,e)}}),A.nodeValue=0,r(l,"nodeValue",{set:function(e){A.nodeValue++,o.set.call(this,e)}}),A.innerText=0,r(u,"innerText",{set:function(e){A.innerText++,i.set.call(this,e)}}),A.innerHTML=0,r(t?u:s,"innerHTML",{set:function(e){A.innerHTML++,f.set.call(this,e)}}),A.className=0,r(t?u:s,"className",{set:function(e){A.className++,d.set.call(this,e)}}),A.cssText=0,r(v,"cssText",{set:function(e){A.cssText++,y.set.call(this,e)}}),A.id=0,r(t?u:s,"id",{set:function(e){A.id++,c.set.call(this,e)}}),A.checked=0,r(p,"checked",{set:function(e){A.checked++,b.set.call(this,e)}}),A.value=0,r(p,"value",{set:function(e){A.value++,w.set.call(this,e)}}),r(h,"value",{set:function(e){A.value++,k.set.call(this,e)}}),r(m,"value",{set:function(e){A.value++,_.set.call(this,e)}}),A.selectedIndex=0,r(m,"selectedIndex",{set:function(e){A.selectedIndex++,E.set.call(this,e)}}),A.selected=0,r(g,"selected",{set:function(e){A.selected++,x.set.call(this,e)}}),this.start=function(){N=+new Date},this.end=function(){var t=+new Date-N;N=null;var n={};for(var r in A)A[r]>0&&(n[r]=A[r]);return S(),e&&(n._time=t),n}}(true));var ot=rt.prototype={constructor:rt,init:null,view:null,key:null,data:null,state:null,api:null,opts:null,node:null,hooks:null,refs:null,render:null,mount:function(e,t){var n=this;j.mutations&&nt.start();t?(Ie({el:e,flags:0}),n._redraw(null,null,false),e.nodeName.toLowerCase()!==n.node.tag?(Ue(n.node),Le(e.parentNode,n.node.el,e),e.parentNode.removeChild(e)):Le(e.parentNode,Ue(n.node,e),e)):(n._redraw(null,null),e&&Le(e,n.node.el));e&&xe(n,true);j.mutations&&console.log(nt.end());return n},unmount:function(e){X(this._stream),this._stream=null;var t=this.node;Me(t.el.parentNode,t.el),t.el=null,e||xe(this,true)},cfg:at,config:at,parent:function(){return M(this.node.parent)},root:function(){var e=this.node;while(e.parent)e=e.parent;return e.vm},redraw:function(e){return null==e&&(e=ue),e?this._redraw(null,null,C(this)):(Qe.add(this),0===et&&(et=requestAnimationFrame(tt))),this},update:function(e,t){return null==t&&(t=ue),this._update(e,null,null,C(this),t),t||this.redraw(),this},_update:function(e,t,n,r,l){var a=this;null!=e&&a.data!==e&&(V("DATA_REPLACED",[a,a.data,e]),Ee(a.hooks,"willUpdate",a,e),a.data=e);return l?a._redraw(t,n,r):a},_redraw:function(e,t,n){var r=null==e,l=this,a=l.node&&l.node.el&&l.node.el.parentNode;r&&l.node&&l.node.el&&!l.node.el.parentNode&&V("UNMOUNTED_REDRAW",[l]);r&&j.mutations&&a&&nt.start();var o,u,i=null!=l.diff,s=l.node;if(i&&(u=l.diff.val(l,l.data,l.key,e,t),null!=s&&(o=s._diff,l.diff.eq(l,o,u))))return s._diff=u,ut(l,s,e,t);a&&Ee(l.hooks,"willRedraw",l,l.data);var f=l.render.call(l,l,l.data,l.key,e,t);i&&(f._diff=u);if(f===s)return ut(l,s,e,t);l.refs=null,null!=l.key&&f.key!==l.key&&(f.key=l.key);l.node=f,l._stream=[],e?(Q(f,e,t,l),e.body[t]=f):s&&s.parent?(Q(f,s.parent,s.idx,l),s.parent.body[s.idx]=f):Q(f,null,null,l);if(false!==n)if(s)if(s.tag!==f.tag||s.key!==f.key){s.vm=f.vm=null;var d=s.el.parentNode,c=De(s.el);Me(d,s.el),Le(d,Ue(f),c),s.el=f.el,f.vm=l}else Je(f,s);else Ue(f);z(l.data,l._stream),l._stream=K(l._stream,l),a&&Ee(l.hooks,"didRedraw",l,l.data),r&&a&&xe(l,true);r&&j.mutations&&a&&console.log(nt.end());return l}};function ut(e,t,n,r){return null!=n&&(n.body[r]=t,t.idx=r,t.parent=n,t._lis=false),e}function it(e,t,n,r){var l,a;return null==n?d(t)?l=t:a=t:(l=t,a=n),W(e,l,a,r)}ot.onevent=s;var st="http://www.w3.org/2000/svg";function ft(e,t,n,r){this.view=e,this.data=t,this.key=n,this.opts=r}function dt(e,t){this.vm=e,this.data=t}function ct(e,t,n){if(d(t)){var r=Object.create(e);r.attrs=h({},e.attrs),null!=t.class&&null!=e._class&&(t.class=e._class+" "+t.class);h(e.attrs,t);we(e,r),n&&R(e)}else{if(null!=e.vm)return;Q(t,e.parent,e.idx,null),e.parent.body[e.idx]=t,Je(t,e),n&&R(t),xe(M(t),false)}}function vt(e){var t,n,r=arguments,l=r.length;if(l>1){var a=1;d(r[1])&&(n=r[1],a=2),t=l!==a+1||r[a]instanceof I||r[a]instanceof ft||r[a]instanceof dt?g(r,a):r[a]}return W(e,n,t)}function yt(e,t){var n=e.body;if(f(n))for(var r=0;r<n.length;r++){var l=n[r];null!=l.vm?t.push(l.vm):yt(l,t)}return t}function pt(e,t){e.el=t,t._node=e;var n=e.attrs;for(var r in n){var l=n[r],u=S(e.tag,r);D(r)||N(r)||(A(r)?me(e,r,l):null!=l&&u&&be(e,r,l,u))}if((e.flags&q)===q&&e.body.body(e),f(e.body)&&e.body.length>0){var i=t.firstChild,s=0,d=e.body[s];do{d.type===a?d=ke(d.view,d.data,d.key,d.opts)._redraw(e,s,false).node:d.type===o&&(d=d.vm.node||d.vm._update(d.data,e,s,false,true).node),"table"===e.tag&&"tr"===d.tag&&V("ATTACH_IMPLICIT_TBODY",[e,d]),pt(d,i);var c=d.vm;null!=c&&Ee(c.hooks,"willMount",c,c.data),Ee(d.hooks,"willInsert",d),Ee(d.hooks,"didInsert",d),null!=c&&Ee(c.hooks,"didMount",c,c.data)}while((i=i.nextSibling)&&(d=e.body[++s]))}}function ht(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function mt(e){var t="";for(var n in e)null!=e[n]&&(t+=ht(n)+": "+ne(n,e[n])+"; ");return t}function gt(e){return null==e?"":""+e}ft.prototype={constructor:ft,type:a,view:null,data:null,key:null,opts:null},dt.prototype={constructor:dt,type:o,vm:null,data:null},L.patch=function(e,t){ct(this,e,t)},ot.emit=function(e){var t=this,n=t,r=g(arguments,1).concat(n,n.data);do{var l=t.onemit,a=l?l[e]:null;if(a){a.apply(t,r);break}}while(t=t.parent());le[e]&&le[e].apply(t,r)},ot.onemit=null,ot.body=function(){return yt(this.node,[])},ot._stream=null;var bt={area:true,base:true,br:true,col:true,command:true,embed:true,hr:true,img:true,input:true,keygen:true,link:true,meta:true,param:true,source:true,track:true,wbr:true};function wt(e){e=gt(e);for(var t=0,n="";t<e.length;t++)switch(e[t]){case"&":n+="&amp;";break;case"<":n+="&lt;";break;case">":n+="&gt;";break;default:n+=e[t]}return n}function kt(e){e=gt(e);for(var t=0,n="";t<e.length;t++)n+='"'===e[t]?"&quot;":e[t];return n}function _t(e,t){for(var n="",r=0;r<e.length;r++)n+=xt(e[r],t);return n}var Et=".innerHTML";function xt(e,u){var i,s;switch(e.type){case a:i=ke(e.view,e.data,e.key,e.opts).html(u);break;case o:i=e.vm.html();break;case n:case t:if(null!=e.el&&null==e.tag){i=e.el.outerHTML;break}var d="";d+="<"+e.tag;var c=e.attrs,v=null!=c;if(v){for(var y in c)if(!(A(y)||T(y)||N(y)||false===u&&S(e.tag,y))){var p=c[y];"style"!==y||null==p?true===p?d+=" "+wt(y)+'=""':false===p||null!=p&&(d+=" "+wt(y)+'="'+kt(p)+'"'):s="object"==typeof p?mt(p):p}null!=s&&(d+=' style="'+kt(s.trim())+'"')}if(null==e.body&&null!=e.ns&&"svg"!==e.tag)return d+"/>";d+=">",bt[e.tag]||(v&&null!=c[Et]?d+=c[Et]:f(e.body)?d+=_t(e.body,u):(e.flags&q)===q?(e.body.body(e),d+=_t(e.body,u)):d+=wt(e.body),d+="</"+e.tag+">"),i=d;break;case r:i=wt(e.body);break;case l:i="\x3c!--"+wt(e.body)+"--\x3e"}return i}ot.attach=function(e){var t=this;return null==t.node&&t._redraw(null,null,false),pt(t.node,e),xe(t,false),t},ot.html=function(e){null==this.node&&this._redraw(null,null,false);var t=xt(this.node,e);return _e.length=0,t},L.html=function(e){return xt(this,e)},e.DEVMODE=j,e.defineElementSpread=vt,e.defineSvgElementSpread=function(){var e=vt.apply(null,arguments);return e.ns=st,e},e.ViewModel=rt,e.VNode=I,e.createView=ke,e.defineElement=it,e.defineSvgElement=function(e,t,n,r){var l=it(e,t,n,r);return l.ns=st,l},e.defineText=O,e.defineComment=function(e){var t=new I;return t.type=l,t.body=e,t},e.defineView=function(e,t,n,r){return new ft(e,t,n,r)},e.injectView=function(e,t){return new dt(e,t)},e.injectElement=function(e){var n=new I;return n.type=t,n.el=n.key=e,n},e.list=function(e,t,n){return new B(e,t,n)},e.FIXED_BODY=P,e.KEYED_LIST=G,e.config=se,e.cfg=se});
// MobX 5.9.0 (https://github.com/mobxjs/mobx)
// Source: (https://cdnjs.com/libraries/mobx) use "mobx.umd.min.js" version
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).mobx=e()}}(function(){return function e(t,n,r){function i(a,s){if(!n[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(o)return o(a,!0);var c=new Error("Cannot find module '"+a+"'");throw c.code="MODULE_NOT_FOUND",c}var l=n[a]={exports:{}};t[a][0].call(l.exports,function(e){var n=t[a][1][e];return i(n||e)},l,l.exports,e,t,n,r)}return n[a].exports}for(var o="function"==typeof require&&require,a=0;a<r.length;a++)i(r[a]);return i}({1:[function(e,t,n){(function(e,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])};var i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e};function o(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}function a(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return a}var s="An invariant failed, however the error is obfuscated because this is an production build.",u=[];Object.freeze(u);var c={};function l(){return++Se.mobxGuid}function f(e){throw h(!1,e),"X"}function h(e,t){if(!e)throw new Error("[mobx] "+(t||s))}Object.freeze(c);function p(e){var t=!1;return function(){if(!t)return t=!0,e.apply(this,arguments)}}var d=function(){};function v(e){return null!==e&&"object"==typeof e}function y(e){if(null===e||"object"!=typeof e)return!1;var t=Object.getPrototypeOf(e);return t===Object.prototype||null===t}function b(e,t,n){Object.defineProperty(e,t,{enumerable:!1,writable:!0,configurable:!0,value:n})}function g(e,t){var n=Object.getOwnPropertyDescriptor(e,t);return!n||!1!==n.configurable&&!1!==n.writable}function m(e,t){var n="isMobX"+e;return t.prototype[n]=!0,function(e){return v(e)&&!0===e[n]}}function w(e){return e instanceof Map}function O(e){return e instanceof Set}function S(e){return null===e?null:"object"==typeof e?""+e:e}var A=Symbol("mobx administration"),_=function(){function e(e){void 0===e&&(e="Atom@"+l()),this.name=e,this.isPendingUnobservation=!1,this.isBeingObserved=!1,this.observers=new Set,this.diffValue=0,this.lastAccessedBy=0,this.lowestObserverState=n.IDerivationState.NOT_TRACKING}return e.prototype.onBecomeObserved=function(){this.onBecomeObservedListeners&&this.onBecomeObservedListeners.forEach(function(e){return e()})},e.prototype.onBecomeUnobserved=function(){this.onBecomeUnobservedListeners&&this.onBecomeUnobservedListeners.forEach(function(e){return e()})},e.prototype.reportObserved=function(){return je(this)},e.prototype.reportChanged=function(){De(),function(e){if(e.lowestObserverState===n.IDerivationState.STALE)return;e.lowestObserverState=n.IDerivationState.STALE,e.observers.forEach(function(t){t.dependenciesState===n.IDerivationState.UP_TO_DATE&&(t.isTracing!==re.NONE&&Ce(t,e),t.onBecomeStale()),t.dependenciesState=n.IDerivationState.STALE})}(this),Te()},e.prototype.toString=function(){return this.name},e}(),E=m("Atom",_);function x(e,t,n){void 0===t&&(t=d),void 0===n&&(n=d);var r=new _(e);return t!==d&&Ye(r,t),n!==d&&Fe(r,n),r}var D={identity:function(e,t){return e===t},structural:function(e,t){return Ft(e,t)},default:function(e,t){return Object.is(e,t)}},T=Symbol("mobx did run lazy initializers"),j=Symbol("mobx pending decorators"),C={},I={};function N(e){if(!0!==e[T]){var t=e[j];if(t)for(var n in b(e,T,!0),t){var r=t[n];r.propertyCreator(e,r.prop,r.descriptor,r.decoratorTarget,r.decoratorArguments)}}}function V(e,t){return function(){var n,r=function(r,o,a,s){if(!0===s)return t(r,o,a,r,n),null;if(!Object.prototype.hasOwnProperty.call(r,j)){var u=r[j];b(r,j,i({},u))}return r[j][o]={prop:o,propertyCreator:t,descriptor:a,decoratorTarget:r,decoratorArguments:n},function(e,t){var n=t?C:I;return n[e]||(n[e]={configurable:!0,enumerable:t,get:function(){return N(this),this[e]},set:function(t){N(this),this[e]=t}})}(o,e)};return P(arguments)?(n=u,r.apply(null,arguments)):(n=Array.prototype.slice.call(arguments),r)}}function P(e){return(2===e.length||3===e.length)&&"string"==typeof e[1]||4===e.length&&!0===e[3]}function k(e,t,n){return ct(e)?e:Array.isArray(e)?W.array(e,{name:n}):y(e)?W.object(e,void 0,{name:n}):w(e)?W.map(e,{name:n}):O(e)?W.set(e,{name:n}):e}function R(e){return e}function L(t){h(t);var n=V(!0,function(e,n,r,i,o){var a=r?r.initializer?r.initializer.call(e):r.value:void 0;Ut(e).addObservableProp(n,a,t)}),r=(void 0!==e&&e.env,n);return r.enhancer=t,r}var B={deep:!0,name:void 0,defaultDecorator:void 0,proxy:!0};function M(e){return null===e||void 0===e?B:"string"==typeof e?{name:e,deep:!0,proxy:!0}:e}Object.freeze(B);var U=L(k),G=L(function(e,t,n){return void 0===e||null===e?e:qt(e)||It(e)||kt(e)||Bt(e)?e:Array.isArray(e)?W.array(e,{name:n,deep:!1}):y(e)?W.object(e,void 0,{name:n,deep:!1}):w(e)?W.map(e,{name:n,deep:!1}):O(e)?W.set(e,{name:n,deep:!1}):f(!1)}),K=L(R),z=L(function(e,t,n){return Ft(e,t)?t:e});function H(e){return e.defaultDecorator?e.defaultDecorator.enhancer:!1===e.deep?R:k}var q={box:function(e,t){arguments.length>2&&J("box");var n=M(t);return new ie(e,H(n),n.name,!0,n.equals)},array:function(e,t){arguments.length>2&&J("array");var n=M(t);return function(e,t,n,r){void 0===n&&(n="ObservableArray@"+l());void 0===r&&(r=!1);var i=new Dt(n,t,r);o=i.values,a=A,s=i,Object.defineProperty(o,a,{enumerable:!1,writable:!1,configurable:!0,value:s});var o,a,s;var u=new Proxy(i.values,xt);if(i.proxy=u,e&&e.length){var c=ee(!0);i.spliceWithArray(0,0,e),te(c)}return u}(e,H(n),n.name)},map:function(e,t){arguments.length>2&&J("map");var n=M(t);return new Pt(e,H(n),n.name)},set:function(e,t){arguments.length>2&&J("set");var n=M(t);return new Lt(e,H(n),n.name)},object:function(e,t,n){"string"==typeof arguments[1]&&J("object");var r=M(n);if(!1===r.proxy)return Qe({},e,t,r);var i=Ze(r),o=function(e){var t=new Proxy(e,mt);return e[A].proxy=t,t}(Qe({},void 0,void 0,r));return et(o,e,t,i),o},ref:K,shallow:G,deep:U,struct:z},W=function(e,t,n){if("string"==typeof arguments[1])return U.apply(null,arguments);if(ct(e))return e;var r=y(e)?W.object(e,t,n):Array.isArray(e)?W.array(e,t):w(e)?W.map(e,t):O(e)?W.set(e,t):e;if(r!==e)return r;f(!1)};function J(e){f("Expected one or two arguments to observable."+e+". Did you accidentally try to use observable."+e+" as decorator?")}Object.keys(q).forEach(function(e){return W[e]=q[e]});var X=V(!1,function(e,t,n,r,o){var a=n.get,s=n.set,u=o[0]||{};Ut(e).addComputedProp(e,t,i({get:a,set:s,context:e},u))}),Y=X({equals:D.structural}),F=function(e,t,n){if("string"==typeof t)return X.apply(null,arguments);if(null!==e&&"object"==typeof e&&1===arguments.length)return X.apply(null,arguments);var r="object"==typeof t?t:{};return r.get=e,r.set="function"==typeof t?t:r.set,r.name=r.name||e.name||"",new ae(r)};function $(e,t){var n=function(){return Q(e,t,this,arguments)};return n.isMobxAction=!0,n}function Q(e,t,n,r){var i=function(e,t,n,r){var i=Be()&&!!e,o=0;var a=ve();De();var s=ee(!0);return{prevDerivation:a,prevAllowStateChanges:s,notifySpy:i,startTime:o}}(e),o=!0;try{var a=t.apply(n,r);return o=!1,a}finally{o?(Se.suppressReactionErrors=o,Z(i),Se.suppressReactionErrors=!1):Z(i)}}function Z(e){te(e.prevAllowStateChanges),Te(),ye(e.prevDerivation),e.notifySpy}function ee(e){var t=Se.allowStateChanges;return Se.allowStateChanges=e,t}function te(e){Se.allowStateChanges=e}F.struct=Y;var ne,re,ie=function(e){function t(t,n,r,i,o){void 0===r&&(r="ObservableValue@"+l()),void 0===i&&(i=!0),void 0===o&&(o=D.default);var a=e.call(this,r)||this;return a.enhancer=n,a.name=r,a.equals=o,a.hasUnreportedChange=!1,a.value=n(t,void 0,r),i&&Be(),a}return function(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e),t.prototype.dehanceValue=function(e){return void 0!==this.dehancer?this.dehancer(e):e},t.prototype.set=function(e){this.value;if((e=this.prepareNewValue(e))!==Se.UNCHANGED){Be();0,this.setNewValue(e)}},t.prototype.prepareNewValue=function(e){if(fe(this),wt(this)){var t=St(this,{object:this,type:"update",newValue:e});if(!t)return Se.UNCHANGED;e=t.newValue}return e=this.enhancer(e,this.value,this.name),this.equals(this.value,e)?Se.UNCHANGED:e},t.prototype.setNewValue=function(e){var t=this.value;this.value=e,this.reportChanged(),At(this)&&Et(this,{type:"update",object:this,newValue:e,oldValue:t})},t.prototype.get=function(){return this.reportObserved(),this.dehanceValue(this.value)},t.prototype.intercept=function(e){return Ot(this,e)},t.prototype.observe=function(e,t){return t&&e({object:this,type:"update",newValue:this.value,oldValue:void 0}),_t(this,e)},t.prototype.toJSON=function(){return this.get()},t.prototype.toString=function(){return this.name+"["+this.value+"]"},t.prototype.valueOf=function(){return S(this.get())},t.prototype[Symbol.toPrimitive]=function(){return this.valueOf()},t}(_),oe=m("ObservableValue",ie),ae=function(){function e(e){this.dependenciesState=n.IDerivationState.NOT_TRACKING,this.observing=[],this.newObserving=null,this.isBeingObserved=!1,this.isPendingUnobservation=!1,this.observers=new Set,this.diffValue=0,this.runId=0,this.lastAccessedBy=0,this.lowestObserverState=n.IDerivationState.UP_TO_DATE,this.unboundDepsCount=0,this.__mapid="#"+l(),this.value=new ue(null),this.isComputing=!1,this.isRunningSetter=!1,this.isTracing=re.NONE,this.derivation=e.get,this.name=e.name||"ComputedValue@"+l(),e.set&&(this.setter=$(this.name+"-setter",e.set)),this.equals=e.equals||(e.compareStructural||e.struct?D.structural:D.default),this.scope=e.context,this.requiresReaction=!!e.requiresReaction,this.keepAlive=!!e.keepAlive}return e.prototype.onBecomeStale=function(){!function(e){if(e.lowestObserverState!==n.IDerivationState.UP_TO_DATE)return;e.lowestObserverState=n.IDerivationState.POSSIBLY_STALE,e.observers.forEach(function(t){t.dependenciesState===n.IDerivationState.UP_TO_DATE&&(t.dependenciesState=n.IDerivationState.POSSIBLY_STALE,t.isTracing!==re.NONE&&Ce(t,e),t.onBecomeStale())})}(this)},e.prototype.onBecomeObserved=function(){this.onBecomeObservedListeners&&this.onBecomeObservedListeners.forEach(function(e){return e()})},e.prototype.onBecomeUnobserved=function(){this.onBecomeUnobservedListeners&&this.onBecomeUnobservedListeners.forEach(function(e){return e()})},e.prototype.get=function(){this.isComputing&&f("Cycle detected in computation "+this.name+": "+this.derivation),0!==Se.inBatch||0!==this.observers.size||this.keepAlive?(je(this),le(this)&&this.trackAndCompute()&&function(e){if(e.lowestObserverState===n.IDerivationState.STALE)return;e.lowestObserverState=n.IDerivationState.STALE,e.observers.forEach(function(t){t.dependenciesState===n.IDerivationState.POSSIBLY_STALE?t.dependenciesState=n.IDerivationState.STALE:t.dependenciesState===n.IDerivationState.UP_TO_DATE&&(e.lowestObserverState=n.IDerivationState.UP_TO_DATE)})}(this)):le(this)&&(this.warnAboutUntrackedRead(),De(),this.value=this.computeValue(!1),Te());var e=this.value;if(ce(e))throw e.cause;return e},e.prototype.peek=function(){var e=this.computeValue(!1);if(ce(e))throw e.cause;return e},e.prototype.set=function(e){if(this.setter){h(!this.isRunningSetter,"The setter of computed value '"+this.name+"' is trying to update itself. Did you intend to update an _observable_ value, instead of the computed property?"),this.isRunningSetter=!0;try{this.setter.call(this.scope,e)}finally{this.isRunningSetter=!1}}else h(!1,!1)},e.prototype.trackAndCompute=function(){Be();var e=this.value,t=this.dependenciesState===n.IDerivationState.NOT_TRACKING,r=this.computeValue(!0),i=t||ce(e)||ce(r)||!this.equals(e,r);return i&&(this.value=r),i},e.prototype.computeValue=function(e){var t;if(this.isComputing=!0,Se.computationDepth++,e)t=he(this,this.derivation,this.scope);else if(!0===Se.disableErrorBoundaries)t=this.derivation.call(this.scope);else try{t=this.derivation.call(this.scope)}catch(e){t=new ue(e)}return Se.computationDepth--,this.isComputing=!1,t},e.prototype.suspend=function(){this.keepAlive||(pe(this),this.value=void 0)},e.prototype.observe=function(e,t){var n=this,r=!0,i=void 0;return We(function(){var o=n.get();if(!r||t){var a=ve();e({type:"update",object:n,newValue:o,oldValue:i}),ye(a)}r=!1,i=o})},e.prototype.warnAboutUntrackedRead=function(){},e.prototype.toJSON=function(){return this.get()},e.prototype.toString=function(){return this.name+"["+this.derivation.toString()+"]"},e.prototype.valueOf=function(){return S(this.get())},e.prototype[Symbol.toPrimitive]=function(){return this.valueOf()},e}(),se=m("ComputedValue",ae);(ne=n.IDerivationState||(n.IDerivationState={}))[ne.NOT_TRACKING=-1]="NOT_TRACKING",ne[ne.UP_TO_DATE=0]="UP_TO_DATE",ne[ne.POSSIBLY_STALE=1]="POSSIBLY_STALE",ne[ne.STALE=2]="STALE",function(e){e[e.NONE=0]="NONE",e[e.LOG=1]="LOG",e[e.BREAK=2]="BREAK"}(re||(re={}));var ue=function(){return function(e){this.cause=e}}();function ce(e){return e instanceof ue}function le(e){switch(e.dependenciesState){case n.IDerivationState.UP_TO_DATE:return!1;case n.IDerivationState.NOT_TRACKING:case n.IDerivationState.STALE:return!0;case n.IDerivationState.POSSIBLY_STALE:for(var t=ve(),r=e.observing,i=r.length,o=0;o<i;o++){var a=r[o];if(se(a)){if(Se.disableErrorBoundaries)a.get();else try{a.get()}catch(e){return ye(t),!0}if(e.dependenciesState===n.IDerivationState.STALE)return ye(t),!0}}return be(e),ye(t),!1}}function fe(e){var t=e.observers.size>0;Se.computationDepth>0&&t&&f(!1),Se.allowStateChanges||!t&&"strict"!==Se.enforceActions||f(!1)}function he(e,t,r){be(e),e.newObserving=new Array(e.observing.length+100),e.unboundDepsCount=0,e.runId=++Se.runId;var i,o=Se.trackingDerivation;if(Se.trackingDerivation=e,!0===Se.disableErrorBoundaries)i=t.call(r);else try{i=t.call(r)}catch(e){i=new ue(e)}return Se.trackingDerivation=o,function(e){for(var t=e.observing,r=e.observing=e.newObserving,i=n.IDerivationState.UP_TO_DATE,o=0,a=e.unboundDepsCount,s=0;s<a;s++){var u=r[s];0===u.diffValue&&(u.diffValue=1,o!==s&&(r[o]=u),o++),u.dependenciesState>i&&(i=u.dependenciesState)}r.length=o,e.newObserving=null,a=t.length;for(;a--;){var u=t[a];0===u.diffValue&&Ee(u,e),u.diffValue=0}for(;o--;){var u=r[o];1===u.diffValue&&(u.diffValue=0,_e(u,e))}i!==n.IDerivationState.UP_TO_DATE&&(e.dependenciesState=i,e.onBecomeStale())}(e),i}function pe(e){var t=e.observing;e.observing=[];for(var r=t.length;r--;)Ee(t[r],e);e.dependenciesState=n.IDerivationState.NOT_TRACKING}function de(e){var t=ve();try{return e()}finally{ye(t)}}function ve(){var e=Se.trackingDerivation;return Se.trackingDerivation=null,e}function ye(e){Se.trackingDerivation=e}function be(e){if(e.dependenciesState!==n.IDerivationState.UP_TO_DATE){e.dependenciesState=n.IDerivationState.UP_TO_DATE;for(var t=e.observing,r=t.length;r--;)t[r].lowestObserverState=n.IDerivationState.UP_TO_DATE}}var ge=["mobxGuid","spyListeners","enforceActions","computedRequiresReaction","disableErrorBoundaries","runId","UNCHANGED"],me=function(){return function(){this.version=5,this.UNCHANGED={},this.trackingDerivation=null,this.computationDepth=0,this.runId=0,this.mobxGuid=0,this.inBatch=0,this.pendingUnobservations=[],this.pendingReactions=[],this.isRunningReactions=!1,this.allowStateChanges=!0,this.enforceActions=!1,this.spyListeners=[],this.globalReactionErrorHandlers=[],this.computedRequiresReaction=!1,this.disableErrorBoundaries=!1,this.suppressReactionErrors=!1}}(),we=!0,Oe=!1,Se=function(){var e=Ae();return e.__mobxInstanceCount>0&&!e.__mobxGlobals&&(we=!1),e.__mobxGlobals&&e.__mobxGlobals.version!==(new me).version&&(we=!1),we?e.__mobxGlobals?(e.__mobxInstanceCount+=1,e.__mobxGlobals.UNCHANGED||(e.__mobxGlobals.UNCHANGED={}),e.__mobxGlobals):(e.__mobxInstanceCount=1,e.__mobxGlobals=new me):(setTimeout(function(){Oe||f("There are multiple, different versions of MobX active. Make sure MobX is loaded only once or use `configure({ isolateGlobalState: true })`")},1),new me)}();function Ae(){return"undefined"!=typeof window?window:t}function _e(e,t){e.observers.add(t),e.lowestObserverState>t.dependenciesState&&(e.lowestObserverState=t.dependenciesState)}function Ee(e,t){e.observers.delete(t),0===e.observers.size&&xe(e)}function xe(e){!1===e.isPendingUnobservation&&(e.isPendingUnobservation=!0,Se.pendingUnobservations.push(e))}function De(){Se.inBatch++}function Te(){if(0==--Se.inBatch){Pe();for(var e=Se.pendingUnobservations,t=0;t<e.length;t++){var n=e[t];n.isPendingUnobservation=!1,0===n.observers.size&&(n.isBeingObserved&&(n.isBeingObserved=!1,n.onBecomeUnobserved()),n instanceof ae&&n.suspend())}Se.pendingUnobservations=[]}}function je(e){var t=Se.trackingDerivation;return null!==t?(t.runId!==e.lastAccessedBy&&(e.lastAccessedBy=t.runId,t.newObserving[t.unboundDepsCount++]=e,e.isBeingObserved||(e.isBeingObserved=!0,e.onBecomeObserved())),!0):(0===e.observers.size&&Se.inBatch>0&&xe(e),!1)}function Ce(e,t){if(console.log("[mobx.trace] '"+e.name+"' is invalidated due to a change in: '"+t.name+"'"),e.isTracing===re.BREAK){var n=[];!function e(t,n,r){if(n.length>=1e3)return void n.push("(and many more)");n.push(""+new Array(r).join("\t")+t.name);t.dependencies&&t.dependencies.forEach(function(t){return e(t,n,r+1)})}(tt(e),n,1),new Function("debugger;\n/*\nTracing '"+e.name+"'\n\nYou are entering this break point because derivation '"+e.name+"' is being traced and '"+t.name+"' is now forcing it to update.\nJust follow the stacktrace you should now see in the devtools to see precisely what piece of your code is causing this update\nThe stackframe you are looking for is at least ~6-8 stack-frames up.\n\n"+(e instanceof ae?e.derivation.toString().replace(/[*]\//g,"/"):"")+"\n\nThe dependencies for this derivation are:\n\n"+n.join("\n")+"\n*/\n ")()}}var Ie=function(){function e(e,t,r){void 0===e&&(e="Reaction@"+l()),this.name=e,this.onInvalidate=t,this.errorHandler=r,this.observing=[],this.newObserving=[],this.dependenciesState=n.IDerivationState.NOT_TRACKING,this.diffValue=0,this.runId=0,this.unboundDepsCount=0,this.__mapid="#"+l(),this.isDisposed=!1,this._isScheduled=!1,this._isTrackPending=!1,this._isRunning=!1,this.isTracing=re.NONE}return e.prototype.onBecomeStale=function(){this.schedule()},e.prototype.schedule=function(){this._isScheduled||(this._isScheduled=!0,Se.pendingReactions.push(this),Pe())},e.prototype.isScheduled=function(){return this._isScheduled},e.prototype.runReaction=function(){if(!this.isDisposed){if(De(),this._isScheduled=!1,le(this)){this._isTrackPending=!0;try{this.onInvalidate(),this._isTrackPending&&Be()}catch(e){this.reportExceptionInDerivation(e)}}Te()}},e.prototype.track=function(e){De();Be();this._isRunning=!0;var t=he(this,e,void 0);this._isRunning=!1,this._isTrackPending=!1,this.isDisposed&&pe(this),ce(t)&&this.reportExceptionInDerivation(t.cause),Te()},e.prototype.reportExceptionInDerivation=function(e){var t=this;if(this.errorHandler)this.errorHandler(e,this);else{if(Se.disableErrorBoundaries)throw e;var n="[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: '"+this+"'";Se.suppressReactionErrors?console.warn("[mobx] (error in reaction '"+this.name+"' suppressed, fix error of causing action below)"):console.error(n,e),Be()&&Me({type:"error",name:this.name,message:n,error:""+e}),Se.globalReactionErrorHandlers.forEach(function(n){return n(e,t)})}},e.prototype.dispose=function(){this.isDisposed||(this.isDisposed=!0,this._isRunning||(De(),pe(this),Te()))},e.prototype.getDisposer=function(){var e=this.dispose.bind(this);return e[A]=this,e},e.prototype.toString=function(){return"Reaction["+this.name+"]"},e.prototype.trace=function(e){void 0===e&&(e=!1),vt(this,e)},e}();var Ne=100,Ve=function(e){return e()};function Pe(){Se.inBatch>0||Se.isRunningReactions||Ve(ke)}function ke(){Se.isRunningReactions=!0;for(var e=Se.pendingReactions,t=0;e.length>0;){++t===Ne&&(console.error("Reaction doesn't converge to a stable state after "+Ne+" iterations. Probably there is a cycle in the reactive function: "+e[0]),e.splice(0));for(var n=e.splice(0),r=0,i=n.length;r<i;r++)n[r].runReaction()}Se.isRunningReactions=!1}var Re=m("Reaction",Ie);function Le(e){var t=Ve;Ve=function(n){return e(function(){return t(n)})}}function Be(){return!1}function Me(e){}function Ue(e){return console.warn("[mobx.spy] Is a no-op in production builds"),function(){}}function Ge(){f(!1)}function Ke(e){return function(t,n,r){if(r){if(r.value)return{value:$(e,r.value),enumerable:!1,configurable:!0,writable:!0};var i=r.initializer;return{enumerable:!1,configurable:!0,writable:!0,initializer:function(){return $(e,i.call(this))}}}return function(e){return function(t,n,r){Object.defineProperty(t,n,{configurable:!0,enumerable:!1,get:function(){},set:function(t){b(this,n,ze(e,t))}})}}(e).apply(this,arguments)}}var ze=function(e,t,n,r){return 1===arguments.length&&"function"==typeof e?$(e.name||"<unnamed action>",e):2===arguments.length&&"function"==typeof t?$(e,t):1===arguments.length&&"string"==typeof e?Ke(e):!0!==r?Ke(t).apply(null,arguments):void b(e,t,$(e.name||t,n.value))};function He(e){return"function"==typeof e&&!0===e.isMobxAction}function qe(e,t,n){b(e,t,$(t,n.bind(e)))}function We(e,t){void 0===t&&(t=c);var n,r=t&&t.name||e.name||"Autorun@"+l();if(!t.scheduler&&!t.delay)n=new Ie(r,function(){this.track(a)},t.onError);else{var i=Xe(t),o=!1;n=new Ie(r,function(){o||(o=!0,i(function(){o=!1,n.isDisposed||n.track(a)}))},t.onError)}function a(){e(n)}return n.schedule(),n.getDisposer()}ze.bound=function(e,t,n,r){return!0===r?(qe(e,t,n.value),null):n?{configurable:!0,enumerable:!1,get:function(){return qe(this,t,n.value||n.initializer.call(this)),this[t]},set:Ge}:{enumerable:!1,configurable:!0,set:function(e){qe(this,t,e)},get:function(){}}};var Je=function(e){return e()};function Xe(e){return e.scheduler?e.scheduler:e.delay?function(t){return setTimeout(t,e.delay)}:Je}function Ye(e,t,n){return $e("onBecomeObserved",e,t,n)}function Fe(e,t,n){return $e("onBecomeUnobserved",e,t,n)}function $e(e,t,n,r){var i="string"==typeof n?Wt(t,n):Wt(t),o="string"==typeof n?r:n,a=e+"Listeners";return i[a]?i[a].add(o):i[a]=new Set([o]),"function"!=typeof i[e]?f(!1):function(){var e=i[a];e&&(e.delete(o),0===e.size&&delete i[a])}}function Qe(e,t,n,r){var i=Ze(r=M(r));return N(e),Ut(e,r.name,i.enhancer),t&&et(e,t,n,i),e}function Ze(e){return e.defaultDecorator||(!1===e.deep?K:U)}function et(e,t,n,r){De();try{for(var i in t){var o=Object.getOwnPropertyDescriptor(t,i);0;var a=n&&i in n?n[i]:o.get?X:r;0;var s=a(e,i,o,!0);s&&Object.defineProperty(e,i,s)}}finally{Te()}}function tt(e,t){return nt(Wt(e,t))}function nt(e){var t,n,r={name:e.name};return e.observing&&e.observing.length>0&&(r.dependencies=(t=e.observing,n=[],t.forEach(function(e){-1===n.indexOf(e)&&n.push(e)}),n).map(nt)),r}function rt(e){var t,n={name:e.name};return(t=e).observers&&t.observers.size>0&&(n.observers=Array.from(function(e){return e.observers}(e)).map(rt)),n}var it=0;function ot(e){"function"==typeof e.cancel&&e.cancel()}function at(e,t){if(null===e||void 0===e)return!1;if(void 0!==t){if(!1===qt(e))return!1;if(!e[A].values.has(t))return!1;var n=Wt(e,t);return se(n)}return se(e)}function st(e){return arguments.length>1?f(!1):at(e)}function ut(e,t){return null!==e&&void 0!==e&&(void 0!==t?!!qt(e)&&e[A].values.has(t):qt(e)||!!e[A]||E(e)||Re(e)||se(e))}function ct(e){return 1!==arguments.length&&f(!1),ut(e)}function lt(e){return qt(e)?e[A].getKeys():kt(e)?Array.from(e.keys()):Bt(e)?Array.from(e.keys()):It(e)?e.map(function(e,t){return t}):f(!1)}function ft(e,t,n){if(2!==arguments.length)if(qt(e)){var r=e[A];r.values.get(t)?r.write(t,n):r.addObservableProp(t,n,r.defaultEnhancer)}else if(kt(e))e.set(t,n);else{if(!It(e))return f(!1);"number"!=typeof t&&(t=parseInt(t,10)),h(t>=0,"Not a valid index: '"+t+"'"),De(),t>=e.length&&(e.length=t+1),e[t]=n,Te()}else{De();var i=t;try{for(var o in i)ft(e,o,i[o])}finally{Te()}}}function ht(e,t){return qt(e)?Jt(e).has(t):kt(e)?e.has(t):Bt(e)?e.has(t):It(e)?t>=0&&t<e.length:f(!1)}var pt={detectCycles:!0,exportMapsAsObjects:!0,recurseEverything:!1};function dt(e,t,n,r){return r.detectCycles&&e.set(t,n),n}function vt(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=!1;"boolean"==typeof e[e.length-1]&&(n=e.pop());var r=function(e){switch(e.length){case 0:return Se.trackingDerivation;case 1:return Wt(e[0]);case 2:return Wt(e[0],e[1])}}(e);if(!r)return f(!1);r.isTracing===re.NONE&&console.log("[mobx.trace] '"+r.name+"' tracing enabled"),r.isTracing=n?re.BREAK:re.LOG}function yt(e,t){void 0===t&&(t=void 0),De();try{return e.apply(t)}finally{Te()}}function bt(e,t,n){var r;"number"==typeof n.timeout&&(r=setTimeout(function(){if(!o[A].isDisposed){o();var e=new Error("WHEN_TIMEOUT");if(!n.onError)throw e;n.onError(e)}},n.timeout)),n.name=n.name||"When@"+l();var i=$(n.name+"-effect",t),o=We(function(t){e()&&(t.dispose(),r&&clearTimeout(r),i())},n);return o}function gt(e){return e[A]}var mt={has:function(e,t){if(t===A||"constructor"===t||t===T)return!0;var n=gt(e);return"string"==typeof t?n.has(t):t in e},get:function(e,t){if(t===A||"constructor"===t||t===T)return e[t];var n=gt(e),r=n.values.get(t);if(r instanceof _){var i=r.get();return void 0===i&&n.has(t),i}return"string"==typeof t&&n.has(t),e[t]},set:function(e,t,n){return"string"==typeof t&&(ft(e,t,n),!0)},deleteProperty:function(e,t){return"string"==typeof t&&(gt(e).remove(t),!0)},ownKeys:function(e){return gt(e).keysAtom.reportObserved(),Reflect.ownKeys(e)},preventExtensions:function(e){return f("Dynamic observable objects cannot be frozen"),!1}};function wt(e){return void 0!==e.interceptors&&e.interceptors.length>0}function Ot(e,t){var n=e.interceptors||(e.interceptors=[]);return n.push(t),p(function(){var e=n.indexOf(t);-1!==e&&n.splice(e,1)})}function St(e,t){var n=ve();try{var r=e.interceptors;if(r)for(var i=0,o=r.length;i<o&&(h(!(t=r[i](t))||t.type,"Intercept handlers should return nothing or a change object"),t);i++);return t}finally{ye(n)}}function At(e){return void 0!==e.changeListeners&&e.changeListeners.length>0}function _t(e,t){var n=e.changeListeners||(e.changeListeners=[]);return n.push(t),p(function(){var e=n.indexOf(t);-1!==e&&n.splice(e,1)})}function Et(e,t){var n=ve(),r=e.changeListeners;if(r){for(var i=0,o=(r=r.slice()).length;i<o;i++)r[i](t);ye(n)}}var xt={get:function(e,t){return t===A?e[A]:"length"===t?e[A].getArrayLength():"number"==typeof t?Tt.get.call(e,t):"string"!=typeof t||isNaN(t)?Tt.hasOwnProperty(t)?Tt[t]:e[t]:Tt.get.call(e,parseInt(t))},set:function(e,t,n){return"length"===t?(e[A].setArrayLength(n),!0):"number"==typeof t?(Tt.set.call(e,t,n),!0):!isNaN(t)&&(Tt.set.call(e,parseInt(t),n),!0)},preventExtensions:function(e){return f("Observable arrays cannot be frozen"),!1}};var Dt=function(){function e(e,t,n){this.owned=n,this.values=[],this.proxy=void 0,this.lastKnownLength=0,this.atom=new _(e||"ObservableArray@"+l()),this.enhancer=function(n,r){return t(n,r,e+"[..]")}}return e.prototype.dehanceValue=function(e){return void 0!==this.dehancer?this.dehancer(e):e},e.prototype.dehanceValues=function(e){return void 0!==this.dehancer&&e.length>0?e.map(this.dehancer):e},e.prototype.intercept=function(e){return Ot(this,e)},e.prototype.observe=function(e,t){return void 0===t&&(t=!1),t&&e({object:this.proxy,type:"splice",index:0,added:this.values.slice(),addedCount:this.values.length,removed:[],removedCount:0}),_t(this,e)},e.prototype.getArrayLength=function(){return this.atom.reportObserved(),this.values.length},e.prototype.setArrayLength=function(e){if("number"!=typeof e||e<0)throw new Error("[mobx.array] Out of range: "+e);var t=this.values.length;if(e!==t)if(e>t){for(var n=new Array(e-t),r=0;r<e-t;r++)n[r]=void 0;this.spliceWithArray(t,0,n)}else this.spliceWithArray(e,t-e)},e.prototype.updateArrayLength=function(e,t){if(e!==this.lastKnownLength)throw new Error("[mobx] Modification exception: the internal structure of an observable array was changed.");this.lastKnownLength+=t},e.prototype.spliceWithArray=function(e,t,n){var r=this;fe(this.atom);var i=this.values.length;if(void 0===e?e=0:e>i?e=i:e<0&&(e=Math.max(0,i+e)),t=1===arguments.length?i-e:void 0===t||null===t?0:Math.max(0,Math.min(t,i-e)),void 0===n&&(n=u),wt(this)){var o=St(this,{object:this.proxy,type:"splice",index:e,removedCount:t,added:n});if(!o)return u;t=o.removedCount,n=o.added}n=0===n.length?n:n.map(function(e){return r.enhancer(e,void 0)});var a=this.spliceItemsIntoValues(e,t,n);return 0===t&&0===n.length||this.notifyArraySplice(e,n,a),this.dehanceValues(a)},e.prototype.spliceItemsIntoValues=function(e,t,n){var r;if(n.length<1e4)return(r=this.values).splice.apply(r,function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(a(arguments[t]));return e}([e,t],n));var i=this.values.slice(e,e+t);return this.values=this.values.slice(0,e).concat(n,this.values.slice(e+t)),i},e.prototype.notifyArrayChildUpdate=function(e,t,n){var r=!this.owned&&!1,i=At(this),o=i||r?{object:this.proxy,type:"update",index:e,newValue:t,oldValue:n}:null;this.atom.reportChanged(),i&&Et(this,o)},e.prototype.notifyArraySplice=function(e,t,n){var r=!this.owned&&!1,i=At(this),o=i||r?{object:this.proxy,type:"splice",index:e,removed:n,added:t,removedCount:n.length,addedCount:t.length}:null;this.atom.reportChanged(),i&&Et(this,o)},e}(),Tt={intercept:function(e){return this[A].intercept(e)},observe:function(e,t){return void 0===t&&(t=!1),this[A].observe(e,t)},clear:function(){return this.splice(0)},replace:function(e){var t=this[A];return t.spliceWithArray(0,t.values.length,e)},toJS:function(){return this.slice()},toJSON:function(){return this.toJS()},splice:function(e,t){for(var n=[],r=2;r<arguments.length;r++)n[r-2]=arguments[r];var i=this[A];switch(arguments.length){case 0:return[];case 1:return i.spliceWithArray(e);case 2:return i.spliceWithArray(e,t)}return i.spliceWithArray(e,t,n)},spliceWithArray:function(e,t,n){return this[A].spliceWithArray(e,t,n)},push:function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=this[A];return n.spliceWithArray(n.values.length,0,e),n.values.length},pop:function(){return this.splice(Math.max(this[A].values.length-1,0),1)[0]},shift:function(){return this.splice(0,1)[0]},unshift:function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=this[A];return n.spliceWithArray(0,0,e),n.values.length},reverse:function(){var e=this.slice();return e.reverse.apply(e,arguments)},sort:function(e){var t=this.slice();return t.sort.apply(t,arguments)},remove:function(e){var t=this[A],n=t.dehanceValues(t.values).indexOf(e);return n>-1&&(this.splice(n,1),!0)},get:function(e){var t=this[A];if(t){if(e<t.values.length)return t.atom.reportObserved(),t.dehanceValue(t.values[e]);console.warn("[mobx.array] Attempt to read an array index ("+e+") that is out of bounds ("+t.values.length+"). Please check length first. Out of bound indices will not be tracked by MobX")}},set:function(e,t){var n=this[A],r=n.values;if(e<r.length){fe(n.atom);var i=r[e];if(wt(n)){var o=St(n,{type:"update",object:this,index:e,newValue:t});if(!o)return;t=o.newValue}(t=n.enhancer(t,i))!==i&&(r[e]=t,n.notifyArrayChildUpdate(e,t,i))}else{if(e!==r.length)throw new Error("[mobx.array] Index out of bounds, "+e+" is larger than "+r.length);n.spliceWithArray(e,0,[t])}}};["concat","every","filter","forEach","indexOf","join","lastIndexOf","map","reduce","reduceRight","slice","some","toString","toLocaleString"].forEach(function(e){Tt[e]=function(){var t=this[A];t.atom.reportObserved();var n=t.dehanceValues(t.values);return n[e].apply(n,arguments)}});var jt,Ct=m("ObservableArrayAdministration",Dt);function It(e){return v(e)&&Ct(e[A])}var Nt,Vt={},Pt=function(){function e(e,t,n){if(void 0===t&&(t=k),void 0===n&&(n="ObservableMap@"+l()),this.enhancer=t,this.name=n,this[jt]=Vt,this._keysAtom=x(this.name+".keys()"),this[Symbol.toStringTag]="Map","function"!=typeof Map)throw new Error("mobx.map requires Map polyfill for the current browser. Check babel-polyfill or core-js/es6/map.js");this._data=new Map,this._hasMap=new Map,this.merge(e)}return e.prototype._has=function(e){return this._data.has(e)},e.prototype.has=function(e){return this._hasMap.has(e)?this._hasMap.get(e).get():this._updateHasMapEntry(e,!1).get()},e.prototype.set=function(e,t){var n=this._has(e);if(wt(this)){var r=St(this,{type:n?"update":"add",object:this,newValue:t,name:e});if(!r)return this;t=r.newValue}return n?this._updateValue(e,t):this._addValue(e,t),this},e.prototype.delete=function(e){var t=this;if(wt(this)&&!(r=St(this,{type:"delete",object:this,name:e})))return!1;if(this._has(e)){var n=At(this),r=n?{type:"delete",object:this,oldValue:this._data.get(e).value,name:e}:null;return yt(function(){t._keysAtom.reportChanged(),t._updateHasMapEntry(e,!1),t._data.get(e).setNewValue(void 0),t._data.delete(e)}),n&&Et(this,r),!0}return!1},e.prototype._updateHasMapEntry=function(e,t){var n=this._hasMap.get(e);return n?n.setNewValue(t):(n=new ie(t,R,this.name+"."+e+"?",!1),this._hasMap.set(e,n)),n},e.prototype._updateValue=function(e,t){var n=this._data.get(e);if((t=n.prepareNewValue(t))!==Se.UNCHANGED){var r=At(this),i=r?{type:"update",object:this,oldValue:n.value,name:e,newValue:t}:null;0,n.setNewValue(t),r&&Et(this,i)}},e.prototype._addValue=function(e,t){var n=this;fe(this._keysAtom),yt(function(){var r=new ie(t,n.enhancer,n.name+"."+e,!1);n._data.set(e,r),t=r.value,n._updateHasMapEntry(e,!0),n._keysAtom.reportChanged()});var r=At(this),i=r?{type:"add",object:this,name:e,newValue:t}:null;r&&Et(this,i)},e.prototype.get=function(e){return this.has(e)?this.dehanceValue(this._data.get(e).get()):this.dehanceValue(void 0)},e.prototype.dehanceValue=function(e){return void 0!==this.dehancer?this.dehancer(e):e},e.prototype.keys=function(){return this._keysAtom.reportObserved(),this._data.keys()},e.prototype.values=function(){var e=this,t=0,n=Array.from(this.keys());return en({next:function(){return t<n.length?{value:e.get(n[t++]),done:!1}:{done:!0}}})},e.prototype.entries=function(){var e=this,t=0,n=Array.from(this.keys());return en({next:function(){if(t<n.length){var r=n[t++];return{value:[r,e.get(r)],done:!1}}return{done:!0}}})},e.prototype[(jt=A,Symbol.iterator)]=function(){return this.entries()},e.prototype.forEach=function(e,t){var n,r;try{for(var i=o(this),s=i.next();!s.done;s=i.next()){var u=a(s.value,2),c=u[0],l=u[1];e.call(t,l,c,this)}}catch(e){n={error:e}}finally{try{s&&!s.done&&(r=i.return)&&r.call(i)}finally{if(n)throw n.error}}},e.prototype.merge=function(e){var t=this;return kt(e)&&(e=e.toJS()),yt(function(){if(y(e))Object.keys(e).forEach(function(n){return t.set(n,e[n])});else if(Array.isArray(e))e.forEach(function(e){var n=a(e,2),r=n[0],i=n[1];return t.set(r,i)});else if(w(e)){if(e.constructor!==Map)return f("Cannot initialize from classes that inherit from Map: "+e.constructor.name);e.forEach(function(e,n){return t.set(n,e)})}else null!==e&&void 0!==e&&f("Cannot initialize map from "+e)}),this},e.prototype.clear=function(){var e=this;yt(function(){de(function(){var t,n;try{for(var r=o(e.keys()),i=r.next();!i.done;i=r.next()){var a=i.value;e.delete(a)}}catch(e){t={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}})})},e.prototype.replace=function(e){var t=this;return yt(function(){var n,r=y(n=e)?Object.keys(n):Array.isArray(n)?n.map(function(e){return a(e,1)[0]}):w(n)||kt(n)?Array.from(n.keys()):f("Cannot get keys from '"+n+"'");Array.from(t.keys()).filter(function(e){return-1===r.indexOf(e)}).forEach(function(e){return t.delete(e)}),t.merge(e)}),this},Object.defineProperty(e.prototype,"size",{get:function(){return this._keysAtom.reportObserved(),this._data.size},enumerable:!0,configurable:!0}),e.prototype.toPOJO=function(){var e,t,n={};try{for(var r=o(this),i=r.next();!i.done;i=r.next()){var s=a(i.value,2),u=s[0],c=s[1];n[""+u]=c}}catch(t){e={error:t}}finally{try{i&&!i.done&&(t=r.return)&&t.call(r)}finally{if(e)throw e.error}}return n},e.prototype.toJS=function(){return new Map(this)},e.prototype.toJSON=function(){return this.toPOJO()},e.prototype.toString=function(){var e=this;return this.name+"[{ "+Array.from(this.keys()).map(function(t){return t+": "+e.get(t)}).join(", ")+" }]"},e.prototype.observe=function(e,t){return _t(this,e)},e.prototype.intercept=function(e){return Ot(this,e)},e}(),kt=m("ObservableMap",Pt),Rt={},Lt=function(){function e(e,t,n){if(void 0===t&&(t=k),void 0===n&&(n="ObservableSet@"+l()),this.name=n,this[Nt]=Rt,this._data=new Set,this._atom=x(this.name),this[Symbol.toStringTag]="Set","function"!=typeof Set)throw new Error("mobx.set requires Set polyfill for the current browser. Check babel-polyfill or core-js/es6/set.js");this.enhancer=function(e,r){return t(e,r,n)},e&&this.replace(e)}return e.prototype.dehanceValue=function(e){return void 0!==this.dehancer?this.dehancer(e):e},e.prototype.clear=function(){var e=this;yt(function(){de(function(){var t,n;try{for(var r=o(e._data.values()),i=r.next();!i.done;i=r.next()){var a=i.value;e.delete(a)}}catch(e){t={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}})})},e.prototype.forEach=function(e,t){var n,r;try{for(var i=o(this),a=i.next();!a.done;a=i.next()){var s=a.value;e.call(t,s,s,this)}}catch(e){n={error:e}}finally{try{a&&!a.done&&(r=i.return)&&r.call(i)}finally{if(n)throw n.error}}},Object.defineProperty(e.prototype,"size",{get:function(){return this._atom.reportObserved(),this._data.size},enumerable:!0,configurable:!0}),e.prototype.add=function(e){var t=this;if((fe(this._atom),wt(this))&&!(r=St(this,{type:"add",object:this,newValue:e})))return this;if(!this.has(e)){yt(function(){t._data.add(t.enhancer(e,void 0)),t._atom.reportChanged()});var n=At(this),r=n?{type:"add",object:this,newValue:e}:null;0,n&&Et(this,r)}return this},e.prototype.delete=function(e){var t=this;if(wt(this)&&!(r=St(this,{type:"delete",object:this,oldValue:e})))return!1;if(this.has(e)){var n=At(this),r=n?{type:"delete",object:this,oldValue:e}:null;return yt(function(){t._atom.reportChanged(),t._data.delete(e)}),n&&Et(this,r),!0}return!1},e.prototype.has=function(e){return this._atom.reportObserved(),this._data.has(this.dehanceValue(e))},e.prototype.entries=function(){var e=0,t=Array.from(this.keys()),n=Array.from(this.values());return en({next:function(){var r=e;return e+=1,r<n.length?{value:[t[r],n[r]],done:!1}:{done:!0}}})},e.prototype.keys=function(){return this.values()},e.prototype.values=function(){this._atom.reportObserved();var e=this,t=0,n=Array.from(this._data.values());return en({next:function(){return t<n.length?{value:e.dehanceValue(n[t++]),done:!1}:{done:!0}}})},e.prototype.replace=function(e){var t=this;return Bt(e)&&(e=e.toJS()),yt(function(){Array.isArray(e)?(t.clear(),e.forEach(function(e){return t.add(e)})):O(e)?(t.clear(),e.forEach(function(e){return t.add(e)})):null!==e&&void 0!==e&&f("Cannot initialize set from "+e)}),this},e.prototype.observe=function(e,t){return _t(this,e)},e.prototype.intercept=function(e){return Ot(this,e)},e.prototype.toJS=function(){return new Set(this)},e.prototype.toString=function(){return this.name+"[ "+Array.from(this).join(", ")+" ]"},e.prototype[(Nt=A,Symbol.iterator)]=function(){return this.values()},e}(),Bt=m("ObservableSet",Lt),Mt=function(){function e(e,t,n,r){void 0===t&&(t=new Map),this.target=e,this.values=t,this.name=n,this.defaultEnhancer=r,this.keysAtom=new _(n+".keys")}return e.prototype.read=function(e){return this.values.get(e).get()},e.prototype.write=function(e,t){var n=this.target,r=this.values.get(e);if(r instanceof ae)r.set(t);else{if(wt(this)){if(!(o=St(this,{type:"update",object:this.proxy||n,name:e,newValue:t})))return;t=o.newValue}if((t=r.prepareNewValue(t))!==Se.UNCHANGED){var i=At(this),o=i?{type:"update",object:this.proxy||n,oldValue:r.value,name:e,newValue:t}:null;0,r.setNewValue(t),i&&Et(this,o)}}},e.prototype.has=function(e){var t=this.pendingKeys||(this.pendingKeys=new Map),n=t.get(e);if(n)return n.get();var r=!!this.values.get(e);return n=new ie(r,R,this.name+"."+e.toString()+"?",!1),t.set(e,n),n.get()},e.prototype.addObservableProp=function(e,t,n){void 0===n&&(n=this.defaultEnhancer);var r=this.target;if(wt(this)){var i=St(this,{object:this.proxy||r,name:e,type:"add",newValue:t});if(!i)return;t=i.newValue}var o=new ie(t,n,this.name+"."+e,!1);this.values.set(e,o),t=o.value,Object.defineProperty(r,e,function(e){return Gt[e]||(Gt[e]={configurable:!0,enumerable:!0,get:function(){return this[A].read(e)},set:function(t){this[A].write(e,t)}})}(e)),this.notifyPropertyAddition(e,t)},e.prototype.addComputedProp=function(e,t,n){var r=this.target;n.name=n.name||this.name+"."+t,this.values.set(t,new ae(n)),(e===r||g(e,t))&&Object.defineProperty(e,t,function(e){return Kt[e]||(Kt[e]={configurable:!1,enumerable:!1,get:function(){return zt(this).read(e)},set:function(t){zt(this).write(e,t)}})}(t))},e.prototype.remove=function(e){if(this.values.has(e)){var t=this.target;if(wt(this))if(!(a=St(this,{object:this.proxy||t,name:e,type:"remove"})))return;try{De();var n=At(this),r=this.values.get(e),i=r&&r.get();if(r&&r.set(void 0),this.keysAtom.reportChanged(),this.values.delete(e),this.pendingKeys){var o=this.pendingKeys.get(e);o&&o.set(!1)}delete this.target[e];var a=n?{type:"remove",object:this.proxy||t,oldValue:i,name:e}:null;0,n&&Et(this,a)}finally{Te()}}},e.prototype.illegalAccess=function(e,t){console.warn("Property '"+t+"' of '"+e+"' was accessed through the prototype chain. Use 'decorate' instead to declare the prop or access it statically through it's owner")},e.prototype.observe=function(e,t){return _t(this,e)},e.prototype.intercept=function(e){return Ot(this,e)},e.prototype.notifyPropertyAddition=function(e,t){var n=At(this),r=n?{type:"add",object:this.proxy||this.target,name:e,newValue:t}:null;if(n&&Et(this,r),this.pendingKeys){var i=this.pendingKeys.get(e);i&&i.set(!0)}this.keysAtom.reportChanged()},e.prototype.getKeys=function(){var e,t;this.keysAtom.reportObserved();var n=[];try{for(var r=o(this.values),i=r.next();!i.done;i=r.next()){var s=a(i.value,2),u=s[0];s[1]instanceof ie&&n.push(u)}}catch(t){e={error:t}}finally{try{i&&!i.done&&(t=r.return)&&t.call(r)}finally{if(e)throw e.error}}return n},e}();function Ut(e,t,n){if(void 0===t&&(t=""),void 0===n&&(n=k),Object.prototype.hasOwnProperty.call(e,A))return e[A];y(e)||(t=(e.constructor.name||"ObservableObject")+"@"+l()),t||(t="ObservableObject@"+l());var r=new Mt(e,new Map,t,n);return b(e,A,r),r}var Gt=Object.create(null),Kt=Object.create(null);function zt(e){var t=e[A];return t||(N(e),e[A])}var Ht=m("ObservableObjectAdministration",Mt);function qt(e){return!!v(e)&&(N(e),Ht(e[A]))}function Wt(e,t){if("object"==typeof e&&null!==e){if(It(e))return void 0!==t&&f(!1),e[A].atom;if(Bt(e))return e[A];if(kt(e)){var n=e;return void 0===t?n._keysAtom:((r=n._data.get(t)||n._hasMap.get(t))||f(!1),r)}var r;if(N(e),t&&!e[A]&&e[t],qt(e))return t?((r=e[A].values.get(t))||f(!1),r):f(!1);if(E(e)||se(e)||Re(e))return e}else if("function"==typeof e&&Re(e[A]))return e[A];return f(!1)}function Jt(e,t){return e||f("Expecting some object"),void 0!==t?Jt(Wt(e,t)):E(e)||se(e)||Re(e)?e:kt(e)||Bt(e)?e:(N(e),e[A]?e[A]:void f(!1))}function Xt(e,t){return(void 0!==t?Wt(e,t):qt(e)||kt(e)||Bt(e)?Jt(e):Wt(e)).name}var Yt=Object.prototype.toString;function Ft(e,t){return $t(e,t)}function $t(e,t,n,r){if(e===t)return 0!==e||1/e==1/t;if(null==e||null==t)return!1;if(e!=e)return t!=t;var i=typeof e;return("function"===i||"object"===i||"object"==typeof t)&&function(e,t,n,r){e=Qt(e),t=Qt(t);var i=Yt.call(e);if(i!==Yt.call(t))return!1;switch(i){case"[object RegExp]":case"[object String]":return""+e==""+t;case"[object Number]":return+e!=+e?+t!=+t:0==+e?1/+e==1/t:+e==+t;case"[object Date]":case"[object Boolean]":return+e==+t;case"[object Symbol]":return"undefined"!=typeof Symbol&&Symbol.valueOf.call(e)===Symbol.valueOf.call(t)}var o="[object Array]"===i;if(!o){if("object"!=typeof e||"object"!=typeof t)return!1;var a=e.constructor,s=t.constructor;if(a!==s&&!("function"==typeof a&&a instanceof a&&"function"==typeof s&&s instanceof s)&&"constructor"in e&&"constructor"in t)return!1}n=n||[],r=r||[];var u=n.length;for(;u--;)if(n[u]===e)return r[u]===t;if(n.push(e),r.push(t),o){if((u=e.length)!==t.length)return!1;for(;u--;)if(!$t(e[u],t[u],n,r))return!1}else{var c,l=Object.keys(e);if(u=l.length,Object.keys(t).length!==u)return!1;for(;u--;)if(c=l[u],!Zt(t,c)||!$t(e[c],t[c],n,r))return!1}return n.pop(),r.pop(),!0}(e,t,n,r)}function Qt(e){return It(e)?e.slice():w(e)||kt(e)?Array.from(e.entries()):O(e)||Bt(e)?Array.from(e.entries()):e}function Zt(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function en(e){return e[Symbol.iterator]=tn,e}function tn(){return this}if("undefined"==typeof Proxy||"undefined"==typeof Symbol)throw new Error("[mobx] MobX 5+ requires Proxy and Symbol objects. If your environment doesn't support Proxy objects, please downgrade to MobX 4. For React Native Android, consider upgrading JSCore.");"object"==typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__&&__MOBX_DEVTOOLS_GLOBAL_HOOK__.injectMobx({spy:Ue,extras:{getDebugName:Xt},$mobx:A}),n.Reaction=Ie,n.untracked=de,n.createAtom=x,n.spy=Ue,n.comparer=D,n.isObservableObject=qt,n.isBoxedObservable=oe,n.isObservableArray=It,n.ObservableMap=Pt,n.isObservableMap=kt,n.ObservableSet=Lt,n.isObservableSet=Bt,n.transaction=yt,n.observable=W,n.computed=F,n.isObservable=ct,n.isObservableProp=function(e,t){return"string"!=typeof t?f(!1):ut(e,t)},n.isComputed=st,n.isComputedProp=function(e,t){return"string"!=typeof t?f(!1):at(e,t)},n.extendObservable=Qe,n.observe=function(e,t,n,r){return"function"==typeof n?function(e,t,n,r){return Jt(e,t).observe(n,r)}(e,t,n,r):function(e,t,n){return Jt(e).observe(t,n)}(e,t,n)},n.intercept=function(e,t,n){return"function"==typeof n?function(e,t,n){return Jt(e,t).intercept(n)}(e,t,n):function(e,t){return Jt(e).intercept(t)}(e,t)},n.autorun=We,n.reaction=function(e,t,n){void 0===n&&(n=c);var r,i,o,a=n.name||"Reaction@"+l(),s=ze(a,n.onError?(r=n.onError,i=t,function(){try{return i.apply(this,arguments)}catch(e){r.call(this,e)}}):t),u=!n.scheduler&&!n.delay,f=Xe(n),h=!0,p=!1,d=n.compareStructural?D.structural:n.equals||D.default,v=new Ie(a,function(){h||u?y():p||(p=!0,f(y))},n.onError);function y(){if(p=!1,!v.isDisposed){var t=!1;v.track(function(){var n=e(v);t=h||!d(o,n),o=n}),h&&n.fireImmediately&&s(o,v),h||!0!==t||s(o,v),h&&(h=!1)}}return v.schedule(),v.getDisposer()},n.when=function(e,t,n){return 1===arguments.length||t&&"object"==typeof t?function(e,t){var n,r=new Promise(function(r,o){var a=bt(e,r,i({},t,{onError:o}));n=function(){a(),o("WHEN_CANCELLED")}});return r.cancel=n,r}(e,t):bt(e,t,n||{})},n.action=ze,n.isAction=He,n.runInAction=function(e,t){var n="string"==typeof e?e:e.name||"<unnamed action>",r="function"==typeof e?e:t;return Q(n,r,this,void 0)},n.keys=lt,n.values=function(e){return qt(e)?lt(e).map(function(t){return e[t]}):kt(e)?lt(e).map(function(t){return e.get(t)}):Bt(e)?Array.from(e.values()):It(e)?e.slice():f(!1)},n.entries=function(e){return qt(e)?lt(e).map(function(t){return[t,e[t]]}):kt(e)?lt(e).map(function(t){return[t,e.get(t)]}):Bt(e)?Array.from(e.entries()):It(e)?e.map(function(e,t){return[t,e]}):f(!1)},n.set=ft,n.remove=function(e,t){if(qt(e))e[A].remove(t);else if(kt(e))e.delete(t);else if(Bt(e))e.delete(t);else{if(!It(e))return f(!1);"number"!=typeof t&&(t=parseInt(t,10)),h(t>=0,"Not a valid index: '"+t+"'"),e.splice(t,1)}},n.has=ht,n.get=function(e,t){if(ht(e,t))return qt(e)?e[t]:kt(e)?e.get(t):It(e)?e[t]:f(!1)},n.decorate=function(e,t){var n="function"==typeof e?e.prototype:e,r=function(e){var r=t[e];Array.isArray(r)||(r=[r]);var i=Object.getOwnPropertyDescriptor(n,e),o=r.reduce(function(t,r){return r(n,e,t)},i);o&&Object.defineProperty(n,e,o)};for(var i in t)r(i);return e},n.configure=function(e){var t=e.enforceActions,n=e.computedRequiresReaction,r=e.disableErrorBoundaries,i=e.reactionScheduler;if(!0===e.isolateGlobalState&&((Se.pendingReactions.length||Se.inBatch||Se.isRunningReactions)&&f("isolateGlobalState should be called before MobX is running any reactions"),Oe=!0,we&&(0==--Ae().__mobxInstanceCount&&(Ae().__mobxGlobals=void 0),Se=new me)),void 0!==t){var o=void 0;switch(t){case!0:case"observed":o=!0;break;case!1:case"never":o=!1;break;case"strict":case"always":o="strict";break;default:f("Invalid value for 'enforceActions': '"+t+"', expected 'never', 'always' or 'observed'")}Se.enforceActions=o,Se.allowStateChanges=!0!==o&&"strict"!==o}void 0!==n&&(Se.computedRequiresReaction=!!n),void 0!==r&&(!0===r&&console.warn("WARNING: Debug feature only. MobX will NOT recover from errors when `disableErrorBoundaries` is enabled."),Se.disableErrorBoundaries=!!r),i&&Le(i)},n.onBecomeObserved=Ye,n.onBecomeUnobserved=Fe,n.flow=function(e){1!==arguments.length&&f("Flow expects one 1 argument and cannot be used as decorator");var t=e.name||"<unnamed flow>";return function(){var n,r=arguments,i=++it,o=ze(t+" - runid: "+i+" - init",e).apply(this,r),a=void 0,s=new Promise(function(e,r){var s=0;function u(e){var n;a=void 0;try{n=ze(t+" - runid: "+i+" - yield "+s++,o.next).call(o,e)}catch(e){return r(e)}l(n)}function c(e){var n;a=void 0;try{n=ze(t+" - runid: "+i+" - yield "+s++,o.throw).call(o,e)}catch(e){return r(e)}l(n)}function l(t){if(!t||"function"!=typeof t.then)return t.done?e(t.value):(a=Promise.resolve(t.value)).then(u,c);t.then(l,r)}n=r,u(void 0)});return s.cancel=ze(t+" - runid: "+i+" - cancel",function(){try{a&&ot(a);var e=o.return(),t=Promise.resolve(e.value);t.then(d,d),ot(t),n(new Error("FLOW_CANCELLED"))}catch(e){n(e)}}),s}},n.toJS=function(e,t){var n;return"boolean"==typeof t&&(t={detectCycles:t}),t||(t=pt),t.detectCycles=void 0===t.detectCycles?!0===t.recurseEverything:!0===t.detectCycles,t.detectCycles&&(n=new Map),function e(t,n,r){if(!n.recurseEverything&&!ct(t))return t;if("object"!=typeof t)return t;if(null===t)return null;if(t instanceof Date)return t;if(oe(t))return e(t.get(),n,r);if(ct(t)&&lt(t),!0===n.detectCycles&&null!==t&&r.has(t))return r.get(t);if(It(t)||Array.isArray(t)){var i=dt(r,t,[],n),o=t.map(function(t){return e(t,n,r)});i.length=o.length;for(var a=0,s=o.length;a<s;a++)i[a]=o[a];return i}if(Bt(t)||Object.getPrototypeOf(t)===Set.prototype){if(!1===n.exportMapsAsObjects){var u=dt(r,t,new Set,n);return t.forEach(function(t){u.add(e(t,n,r))}),u}var c=dt(r,t,[],n);return t.forEach(function(t){c.push(e(t,n,r))}),c}if(kt(t)||Object.getPrototypeOf(t)===Map.prototype){if(!1===n.exportMapsAsObjects){var l=dt(r,t,new Map,n);return t.forEach(function(t,i){l.set(i,e(t,n,r))}),l}var f=dt(r,t,{},n);return t.forEach(function(t,i){f[i]=e(t,n,r)}),f}var h=dt(r,t,{},n);for(var p in t)h[p]=e(t[p],n,r);return h}(e,t,n)},n.trace=vt,n.getDependencyTree=tt,n.getObserverTree=function(e,t){return rt(Wt(e,t))},n._resetGlobalState=function(){var e=new me;for(var t in e)-1===ge.indexOf(t)&&(Se[t]=e[t]);Se.allowStateChanges=!Se.enforceActions},n._getGlobalState=function(){return Se},n.getDebugName=Xt,n.getAtom=Wt,n._getAdministration=Jt,n._allowStateChanges=function(e,t){var n,r=ee(e);try{n=t()}finally{te(r)}return n},n._allowStateChangesInsideComputed=function(e){var t,n=Se.computationDepth;Se.computationDepth=0;try{t=e()}finally{Se.computationDepth=n}return t},n.isArrayLike=function(e){return Array.isArray(e)||It(e)},n.$mobx=A,n._isComputingDerivation=function(){return null!==Se.trackingDerivation},n.onReactionError=function(e){return Se.globalReactionErrorHandlers.push(e),function(){var t=Se.globalReactionErrorHandlers.indexOf(e);t>=0&&Se.globalReactionErrorHandlers.splice(t,1)}},n._interceptReads=function(e,t,n){var r;if(kt(e)||It(e)||oe(e))r=Jt(e);else{if(!qt(e))return f(!1);if("string"!=typeof t)return f(!1);r=Jt(e,t)}return void 0!==r.dehancer?f(!1):(r.dehancer="function"==typeof t?t:n,function(){r.dehancer=void 0})}}).call(this,e("_process"),"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{_process:2}],2:[function(e,t,n){var r,i,o=t.exports={};function a(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function u(e){if(r===setTimeout)return setTimeout(e,0);if((r===a||!r)&&setTimeout)return r=setTimeout,setTimeout(e,0);try{return r(e,0)}catch(t){try{return r.call(null,e,0)}catch(t){return r.call(this,e,0)}}}!function(){try{r="function"==typeof setTimeout?setTimeout:a}catch(e){r=a}try{i="function"==typeof clearTimeout?clearTimeout:s}catch(e){i=s}}();var c,l=[],f=!1,h=-1;function p(){f&&c&&(f=!1,c.length?l=c.concat(l):h=-1,l.length&&d())}function d(){if(!f){var e=u(p);f=!0;for(var t=l.length;t;){for(c=l,l=[];++h<t;)c&&c[h].run();h=-1,t=l.length}c=null,f=!1,function(e){if(i===clearTimeout)return clearTimeout(e);if((i===s||!i)&&clearTimeout)return i=clearTimeout,clearTimeout(e);try{i(e)}catch(t){try{return i.call(null,e)}catch(t){return i.call(this,e)}}}(e)}}function v(e,t){this.fun=e,this.array=t}function y(){}o.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];l.push(new v(e,t)),1!==l.length||f||u(d)},v.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=y,o.addListener=y,o.once=y,o.off=y,o.removeListener=y,o.removeAllListeners=y,o.emit=y,o.prependListener=y,o.prependOnceListener=y,o.listeners=function(e){return[]},o.binding=function(e){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(e){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},{}]},{},[1])(1)});
// domvm-MobX:
!function(n,e,r){"use strict";function t(){}function o(n){return n!=r&&n.constructor===Object}function i(n){return"function"==typeof n}function a(n,e){var o=n.hooks||(n.hooks={});n.mobxObserver={name:e,reaction:r,stale:!0,eq:n.diff&&n.diff.eq,render:n.render,willUnmount:o.willUnmount},o.becameStale==r&&(o.becameStale=s);var i=n.diff?n.diff.val:t;n.config({diff:{val:i,eq:f}}),n.render=l,o.willUnmount=m}function c(n){var r=n.mobxObserver;if(r.reaction)throw Error("Reaction already set.");r.stale=!0,r.reaction=new e.Reaction(r.name,function(){r.stale=!0,n.hooks.becameStale&&n.hooks.becameStale(n,n.data)})}function u(n){var e=n.mobxObserver;if(!e.reaction)throw Error("Reaction already unset.");e.reaction.dispose(),e.reaction=r}function s(n){n.redraw()}function f(n){var e=n.mobxObserver;return e.stale?!1:e.eq?e.eq.apply(this,arguments):!0}function l(n){var r,t=n.mobxObserver,o=this,i=arguments;return t.reaction||c(n),t.reaction.track(function(){e._allowStateChanges(!1,function(){r=t.render.apply(o,i)})}),t.stale=!1,r}function m(n){u(n);var e=n.mobxObserver.willUnmount;e&&e.apply(this,arguments)}function b(n,e){n.init=function(n){return function(r){a(r,e),n&&n.apply(this,arguments)}}(n.init)}function v(n,e){n.init&&n.init.mobxObserver||(b(n,e),n.init.mobxObserver=!0)}function d(n){var e=n.displayName||n.name||n.constructor&&(n.constructor.displayName||n.constructor.name)||"<View>";return e+=".render()",o(n)?b(n,e):n=function(n){return function(r){var t=n.apply(this,arguments);return i(t)?b(r,e):v(t,e),t}}(n),n}n.config({didRedraws:function(n){var e=[];n.forEach(function(n){if(n.mobxObserver&&n.mobxObserver.stale&&null!=n.node){for(var r=0,t=n;t=t.parent();)r++;e[r]||(e[r]=[]),e[r].push(n)}});for(var r=0;r<e.length;r++)e[r]&&e[r].forEach(function(n){n.mobxObserver.stale&&null!=n.node&&n.redraw(!0)})}}),n.mobxObserver=d}(window.domvm,window.mobx);
</script>
<script id="demo">
/* jshint esversion: 6 */
/* globals domvm, mobx */
var observable = mobx.observable,
action = mobx.action,
el = domvm.defineElement,
vw = domvm.defineView,
observer = domvm.mobxObserver; // The domvm-MobX observer() function.
var usersState = observable({
users: [
{name: "Dave", car: "BMW"},
{name: "Johnny", car: false},
{name: "Sarah", car: "Toyota"},
{name: "Peter", car: "Volkswagen"},
{name: "Me", car: "???"},
],
// A MobX computed value (automatically caches and recomputes its result):
get usersWithCar() {
return this.users.filter(user => user.car !== false);
},
// Actions:
setName: function(i, name) {
console.log("Set name of user", i, "to:", name);
this.users[i].name = name;
},
setCar: function(i, car) {
console.log("Set car of user", i, "to:", car);
this.users[i].car = car;
},
}, {// Using @action.bound decorator to bind the value of "this":
setName: action.bound,
setCar: action.bound,
});
var appState = observable({
// Set to true to display only users with a car:
hideNoCar: false,
// Action:
toggleHideNoCar: function() {
console.log("Set hide users without car:", this.hideNoCar);
this.hideNoCar = !this.hideNoCar;
},
}, {// Using @action.bound decorator to bind the value of "this":
toggleHideNoCar: action.bound,
});
var AppView = observer({
init: function(vm) {
// To limit the number of displayed users in the user interface.
// We create a new boxed observable so that render() can react to its changes.
// The boxed observable is initialized with the value -1:
vm.limitResults = observable.box(-1);
},
toggleLimit: action(function(e, node, vm) {
var limit = node.el.value;
console.log("Toggle list limit to:", limit >= 0 ? limit : "no limit");
vm.limitResults.set(limit);
}),
lastUserChange: function(prop, e, node, vm) {
var val = node.el.value;
if (prop === "name") usersState.setName(4, val);
else if (prop === "car") usersState.setCar(4, val === "" ? false : val);
},
render: function(vm) {
console.log("Render: AppView");
var users = usersState.users,
lastUserName = users[users.length - 1].name,
lastUserCar = users[users.length - 1].car;
return el("div", [
"Actions: ",
el("div.section", [
"Set first user: name: ",
el("button", {onclick: [usersState.setName, 0, "Dave"]}, "Dave"),
el("button", {onclick: [usersState.setName, 0, "Jessica"]}, "Jessica"),
", car: ",
el("button", {onclick: [usersState.setCar, 0, "BMW"]}, "BMW"),
el("button", {onclick: [usersState.setCar, 0, "Ferrari"]}, "Ferrari"),
el("button", {onclick: [usersState.setCar, 0, false]}, "No car"),
]),
el("div.section", [
"Set last user: ",
el("label[for=lastUserName]", "name: "),
el("input[type=text][id=lastUserName]", {
value: lastUserName,
onchange: [AppView.lastUserChange, "name"],
onkeyup: [AppView.lastUserChange, "name"]
}),
", ",
el("label[for=lastUserCar]", "car: "),
el("input[type=text][id=lastUserCar]", {
value: lastUserCar === false ? "" : lastUserCar,
onchange: [AppView.lastUserChange, "car"],
onkeyup: [AppView.lastUserChange, "car"]
}),
]),
"Display options:",
el("div.section", [
el("label[for=hideNoCar]", "Hide users without car: "),
el("input[type=checkbox][id=hideNoCar]", {
checked: appState.hideNoCar,
onchange: [appState.toggleHideNoCar]
}),
]),
el("div.section", [
el("label[for=limit]", "Limit displayed users: "),
el("input[type=number][id=limit][min=-1]", {
value: vm.limitResults.get(),
onchange: [AppView.toggleLimit]
}),
]),
el("div#listWrapper", [
"List of users with their cars:",
vw(UsersListView, {
state: usersState, // Don't dereference usersState.users here.
limitResults: vm.limitResults, // Don't unbox the value here.
}),
]),
]);
}
});
var UsersListView = observer(function UsersListView() {
return function(vm, data) { // The render() function
console.log("Render: UsersListView");
var state = data.state,
users = appState.hideNoCar ? state.usersWithCar : state.users,
limitResults = data.limitResults.get();
if (limitResults >= 0) users = users.filter((user, i) => i < limitResults);
var displayed = users.length,
total = state.users.length;
// Because this list is dynamic, we MUST key the views.
// Here we use the user name which is unique:
return el("", [
el("ul", users.map((user) => vw(UserView, user, user.name))),
el("div.section", "(Users displayed: " + displayed + "/" + total + ")")
]);
};
});
var UserView = observer(function UserView(vm) {
return {
render: function(vm, user) {
console.log("Render: UserView");
var car = user.car !== false ? "a " + user.car : "no";
return el("li", "Name: " + user.name + ". Has " + car + " car.");
}
};
});
var raf = requestAnimationFrame;
console.log("Action: Mounting AppView...");
var app = domvm.createView(AppView, usersState).mount(document.body);
raf(() => console.log('> First render done. Rendered the "AppView", the "UsersListView" and 5 "UserView".'));
step = 0;
interval = setInterval(() => {
switch(step) {
case 1:
console.log("=> Action 1: Changing car of first user to Ferrari...");
usersState.users[0].car = "Ferrari";
raf(() => console.log('> Only 1 "UserView" has been re-rendered.'));
break;
case 2:
console.log("=> Action 2: Changing car of last user to none...");
usersState.users[4].car = false;
raf(() => console.log('> Only the "AppView" and 1 "UserView" have been re-rendered.'));
break;
case 3:
console.log("=> Action 3: Changing name of first user to Jessica...");
usersState.users[0].name = "Jessica";
raf(() => console.log('> Only the "UsersListView" and 1 "UserView" has been re-rendered.'));
break;
case 4:
console.log("=> Action 4: Limiting the number of displayed users to 3...");
app.limitResults.set(3);
raf(() => console.log('> Only the "AppView" and the "UsersListView" have been re-rendered.'));
break;
case 5:
console.log("=> Action 5: Removing limit on number of displayed users...");
app.limitResults.set(-1);
raf(() => console.log('> Only the "AppView", the "UsersListView" and 2 "UserView" have been re-rendered.'));
break;
case 6:
console.log("=> Action 6: Hide users without car...");
appState.hideNoCar = true;
raf(() => console.log('> Only the "AppView" and the "UsersListView" have been re-rendered.'));
clearInterval(interval);
raf(() => console.log('=> END'));
break;
}
step++;
}, 800);
</script>
</body>
</html>
@jlgrall
Copy link
Author

jlgrall commented Feb 8, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment