From 78627717e7e1f126c0f15d94f8f4a45392d76892 Mon Sep 17 00:00:00 2001 From: Dmitry Filatov Date: Tue, 14 Jun 2016 11:25:47 +0300 Subject: [PATCH] Add naive version of vidom implementation --- lib/vidom.min.js | 2 ++ library-list.js | 3 ++- readme.md | 1 + vidom/app.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++ vidom/index.html | 19 +++++++++++++++ 5 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 lib/vidom.min.js create mode 100644 vidom/app.js create mode 100644 vidom/index.html diff --git a/lib/vidom.min.js b/lib/vidom.min.js new file mode 100644 index 00000000..d01256f4 --- /dev/null +++ b/lib/vidom.min.js @@ -0,0 +1,2 @@ +!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.vidom=t()}}(function(){return function t(e,n,o){function i(u,s){if(!n[u]){if(!e[u]){var a="function"==typeof require&&require;if(!s&&a)return a(u,!0);if(r)return r(u,!0);var l=new Error("Cannot find module '"+u+"'");throw l.code="MODULE_NOT_FOUND",l}var d=n[u]={exports:{}};e[u][0].call(d.exports,function(t){var n=e[u][1][t];return i(n?n:t)},d,d.exports,t,e,n,o)}return n[u].exports}for(var r="function"==typeof require&&require,u=0;u-1,n.isEdge=e.indexOf("Edge")>-1}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],3:[function(t,e,n){(function(e){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){if("type"===e&&"INPUT"===t.tagName){var o=t.value;t.setAttribute(e,""+n),t.value=o}else t.setAttribute(A[e]||e,""+n)}function r(t,e,n){n?i(t,e,n):l(t,e)}function u(t,e,n){t[e]=n}function s(t,e,n){var o=t[e];for(var i in n)o[i]=null==n[i]?"":n[i]}function a(t,e,n){"value"===e&&"SELECT"===t.tagName?f(t,n):t[e]!==n&&(t[e]=n)}function l(t,e){t.removeAttribute(A[e]||e)}function d(t,e){"style"===e?t[e].cssText="":"value"===e&&"SELECT"===t.tagName?c(t):t[e]=_(t.tagName,e)}function f(t,e){for(var n=Array.isArray(e),o=t.options,i=o.length,r=0,u=void 0;i>r;)u=o[r++],u.selected=null!=e&&(n?b["default"](e,u.value):u.value==e)}function c(t){for(var e=t.options,n=e.length,o=0;n>o;)e[o++].selected=!1}function h(t,e){return(A[t]||t)+'="'+g["default"](e)+'"'}function p(t,e){return e?t:""}function m(t,e){var n="";for(var o in e)null!=e[o]&&(n+=C["default"](o)+":"+e[o]+";");return n?t+'="'+n+'"':n}function _(t,e){var n=w[t]||(w[t]={});return e in n?n[e]:n[e]=M.createElement(t)[e]}n.__esModule=!0;"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t};n["default"]=function(t){return E[t]||S};var v=t("../utils/escapeAttr"),g=o(v),y=t("../utils/isInArray"),b=o(y),N=t("../utils/dasherize"),C=o(N),D=t("../utils/console"),M=(o(D),e.document),w={},A={acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv",autoCapitalize:"autocapitalize",autoComplete:"autocomplete",autoCorrect:"autocorrect",autoFocus:"autofocus",autoPlay:"autoplay",encType:"encoding",hrefLang:"hreflang",radioGroup:"radiogroup",spellCheck:"spellcheck",srcDoc:"srcdoc",srcSet:"srcset",tabIndex:"tabindex"},S={set:i,remove:l,toString:h},k={set:r,remove:l,toString:p},T={set:u,remove:d,toString:h},x={set:u,remove:d,toString:p},E={checked:x,controls:T,disabled:k,id:T,ismap:k,loop:T,multiple:x,muted:T,open:k,readOnly:x,selected:x,srcDoc:T,style:{set:s,remove:d,toString:m},value:{set:a,remove:d,toString:h}}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"../utils/console":31,"../utils/dasherize":32,"../utils/escapeAttr":34,"../utils/isInArray":36}],4:[function(t,e,n){"use strict";function o(t,e){if(Array.isArray(t))r(e,t[t.length-1]);else if(Array.isArray(e))for(var n=e.length,i=0;n>i;)o(t,e[i++]);else t.appendChild(e)}function i(t){if(Array.isArray(t))for(var e=t.length,n=0;e>n;)i(t[n++]);else t.parentNode.removeChild(t)}function r(t,e){if(Array.isArray(e)&&(e=e[0]),Array.isArray(t))for(var n=t.length,o=0;n>o;)r(t[o++],e);else e.parentNode.insertBefore(t,e)}function u(t,e,n){if(Array.isArray(e)&&(e=e[e.length-1]),n){var i=e.nextSibling;i?r(t,i):o(e.parentNode,t)}else r(t,e)}function s(t,e){Array.isArray(t)||Array.isArray(e)?(r(e,t),i(t)):t.parentNode.replaceChild(e,t)}function a(t){if(Array.isArray(t))for(var e=t.length-1,n=0;e>n;)i(t[n++]);else t.innerHTML=""}n.__esModule=!0,n["default"]={append:o,remove:i,insertBefore:r,move:u,replace:s,removeChildren:a}},{}],5:[function(t,e,n){"use strict";n.__esModule=!0,n["default"]={onMouseOver:"mouseover",onMouseMove:"mousemove",onMouseOut:"mouseout",onMouseDown:"mousedown",onMouseUp:"mouseup",onMouseEnter:"mouseenter",onMouseLeave:"mouseleave",onClick:"click",onDblClick:"dblclick",onTouchStart:"touchstart",onTouchMove:"touchmove",onTouchEnd:"touchend",onTouchCancel:"touchcancel",onKeyDown:"keydown",onKeyPress:"keypress",onKeyUp:"keyup",onChange:"change",onInput:"input",onSubmit:"submit",onFocus:"focus",onBlur:"blur",onScroll:"scroll",onLoad:"load",onError:"error",onContextMenu:"contextmenu",onDragStart:"dragstart",onDrag:"drag",onDragEnter:"dragenter",onDragOver:"dragover",onDragLeave:"dragleave",onDragEnd:"dragend",onDrop:"drop",onWheel:"wheel",onCopy:"copy",onCut:"cut",onPaste:"paste"}},{}],6:[function(t,e,n){"use strict";function o(t,e){this.type=t,this.target=e.target,this.nativeEvent=e,this._isPropagationStopped=!1,this._isDefaultPrevented=!1,this._isSeized=!1}function i(t,e){var n=r[t];return n&&!n._isPersisted?(n.target=e.target,n.nativeEvent=e,n._isPropagationStopped=!1,n._isDefaultPrevented=!1,n):r[t]=new o(t,e)}n.__esModule=!0,n["default"]=i,o.prototype={stopPropagation:function(){this._isPropagationStopped=!0;var t=this.nativeEvent;t.stopPropagation?t.stopPropagation():t.cancelBubble=!0},isPropagationStopped:function(){return this._isPropagationStopped},preventDefault:function(){this._isDefaultPrevented=!0;var t=this.nativeEvent;t.preventDefault?t.preventDefault():t.returnValue=!1},isDefaultPrevented:function(){return this._isDefaultPrevented},persist:function(){this._isPersisted=!0}};var r={}},{}],7:[function(t,e,n){(function(e){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){e||(e=t.type);for(var n=y[e],o=t.target,i=n.listenersCounter,r=void 0,u=void 0,s=void 0,a=void 0;i>0&&o&&o!==m;)(a=p["default"](o,!0))&&(r=g[a],r&&(u=r[e])&&(s?s.push(u):s=[u],--i)),o=o.parentNode;if(s)for(var l=c["default"](e,t),d=s.length,f=0;d>f&&(s[f++](l),!l.isPropagationStopped()););}function r(t){g[p["default"](t.target)][t.type](c["default"](t.type,t))}function u(t,e,n){var o=y[e];if(o){o.set||(o.setup?o.setup():o.bubbles&&m.addEventListener(e,i,!1),o.set=!0);var u=p["default"](t),s=g[u]||(g[u]={});s[e]||(o.bubbles?++o.listenersCounter:t.addEventListener(e,r,!1)),s[e]=n}}function s(t,e){var n=p["default"](t,!0);if(n){var o=g[n];if(o&&o[e]){o[e]=null;var i=y[e];i&&(i.bubbles?--i.listenersCounter:t.removeEventListener(e,r))}}}function a(t){var e=p["default"](t,!0);if(e){var n=g[e];if(n){delete g[e];for(var o in n)s(t,o)}}}n.__esModule=!0,n.removeListeners=n.removeListener=n.addListener=void 0;var l=t("./isEventSupported"),d=o(l),f=t("./createSyntheticEvent"),c=o(f),h=t("../getDomNodeId"),p=o(h),m=e.document,_=["mouseover","mousemove","mouseout","mousedown","mouseup","click","dblclick","touchstart","touchmove","touchend","touchcancel","keydown","keypress","keyup","change","input","submit","focus","blur","dragstart","drag","dragenter","dragover","dragleave","dragend","drop","contextmenu","wheel","copy","cut","paste"],v=["mouseenter","mouseleave","scroll","load","error"],g={},y={};m&&!function(){for(var t={focus:"focusin",blur:"focusout"},e=0,n=void 0;e<_.length;)n=_[e++],y[n]={type:n,bubbles:!0,listenersCounter:0,set:!1,setup:t[n]?d["default"](t[n])?function(){var e=this.type;m.addEventListener(t[e],function(t){i(t,e)})}:function(){m.addEventListener(this.type,i,!0)}:null};for(e=0;ei;)r=e[i].nodeType,(r===D||r===M)&&o.push(e[i]),i++;return o}function a(t){return t.namespaceURI===w?null:t.namespaceURI}function l(t,e,n,o){i(t,e,n,o,!1)}function d(t,e){i(t,e,null,null,!0)}function f(t,e,n){r(t,e,n,!1)}function c(t){r(t,null,null,!0)}function h(){var t=[],e=void 0;for(var n in A)e=A[n],e.tree&&t.push(e.tree);return t}n.__esModule=!0,n.mountToDom=l,n.mountToDomSync=d,n.unmountFromDom=f,n.unmountFromDomSync=c,n.getMountedRootNodes=h;var p=t("./getDomNodeId"),m=o(p),_=t("./rafBatch"),v=o(_),g=t("../globalHook"),y=(o(g),t("./domOps")),b=o(y),N=t("../nodes/TopNode"),C=o(N),D=1,M=8,w="http://www.w3.org/1999/xhtml",A={},S=0},{"../globalHook":20,"../nodes/TopNode":25,"./domOps":4,"./getDomNodeId":9,"./rafBatch":12}],11:[function(t,e,n){(function(e){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){v["default"].append(t.getDomNode(),e.renderToDom(t)),e.mount()}function r(t,e,n){v["default"].insertBefore(e.renderToDom(t),n.getDomNode()),e.mount()}function u(t){var e=t.getDomNode();t.unmount(),v["default"].remove(e)}function s(t,e,n){var o=N.activeElement;v["default"].move(t.getDomNode(),e.getDomNode(),n),N.activeElement!==o&&o.focus()}function a(t){for(var e=t._children,n=e.length,o=0;n>o;)e[o++].unmount();v["default"].removeChildren(t.getDomNode())}function l(t,e,n){var o=e.getDomNode();e.unmount(),v["default"].replace(o,n.renderToDom(t)),n.mount()}function d(t,e,n){var o=t.getDomNode();b["default"][e]?g.addListener(o,b["default"][e],n):m["default"](e).set(o,e,n)}function f(t,e){var n=t.getDomNode();b["default"][e]?g.removeListener(n,b["default"][e]):m["default"](e).remove(n,e)}function c(t,e,n){var o=t.getDomNode();if(n){var i=o.firstChild;i?i.nodeValue=e:o.textContent=e}else o.innerHTML=e}function h(t){t.getDomNode().innerHTML=""}n.__esModule=!0;var p=t("./domAttrs"),m=o(p),_=t("./domOps"),v=o(_),g=t("./events/domEventManager"),y=t("./events/attrsToEvents"),b=o(y),N=e.document;n["default"]={appendChild:i,insertChild:r,removeChild:u,moveChild:s,removeChildren:a,replace:l,updateAttr:d,removeAttr:f,updateText:c,removeText:h}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./domAttrs":3,"./domOps":4,"./events/attrsToEvents":5,"./events/domEventManager":7}],12:[function(t,e,n){(function(t){"use strict";function e(){for(var t=0;t'+t+"",r.removeChild(r.firstChild).firstChild}n.__esModule=!0;var o=t.document,i={"http://www.w3.org/2000/svg":"svg","http://www.w3.org/1998/Math/MathML":"math"},r=void 0;n["default"]=e}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],15:[function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}n.__esModule=!0;var i=Object.assign||function(t){for(var e=1;eo;)t.push(e[o++].getDomNode());t.push(this._boundaryDomNode)}}return this._domNode},key:function(t){return this._key=t,this},children:function(t){return this._children=r(t),this},ctx:function(t){if(t!==_["default"]){this._ctx=t;var e=this._children;if(e)for(var n=e.length,o=0;n>o;)e[o++].ctx(t)}return this},renderToDom:function(t){d["default"](this,t);var e=this._children,n=[this._boundaryDomNode=u()];if(e)for(var o=e.length-1;o>=0;)n.unshift(e[o--].renderToDom(this));return this._domNode=n},renderToString:function(){var t=this._children,e="";if(t)for(var n=t.length-1;n>=0;)e=t[n--].renderToString()+e;return e},adoptDom:function(t,e,n){d["default"](this,n);for(var o=[],i=this._children,r=i.length,u=0;r>u;)e=i[u].adoptDom(t,e,n),o.push(i[u++].getDomNode());return o.push(this._boundaryDomNode=t[e]),this._domNode=o,e+1},mount:function(){var t=this._children;if(t)for(var e=0,n=t.length;n>e;)t[e++].mount()},unmount:function(){var t=this._children;if(t)for(var e=t.length,n=0;e>n;)t[n++].unmount()},patch:function(t,e){if(this!==t)switch(d["default"](t,e),t.type){case i:t._boundaryDomNode=this._boundaryDomNode,this._patchChildren(t);break;case g["default"]:var n=t._getInstance();this.patch(n.getRootNode(),e),n.mount();break;case b["default"]:this.patch(t._getRootNode(),e);break;default:a["default"].replace(e,this,t)}},_patchChildren:function(t){var e=this._children,n=t._children;if(e!==n){if(!n||!n.length)return void(e&&e.length&&a["default"].removeChildren(this));if(e&&e.length)h["default"](this,t);else for(var o=n.length,i=0;o>i;)a["default"].appendChild(t,n[i++])}}}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"../client/patchOps":11,"../utils/console":31,"../utils/emptyObj":33,"./ComponentNode":21,"./FunctionComponentNode":23,"./utils/checkChildren":26,"./utils/normalizeNs":27,"./utils/patchChildren":28}],23:[function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t){this.type=i,this._component=t,this._key=null,this._attrs=a["default"],this._rootNode=null,this._children=null,this._ns=null,this._ctx=a["default"]}n.__esModule=!0;"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t};n["default"]=i;var r=t("./TagNode"),u=o(r),s=t("../utils/emptyObj"),a=o(s),l=t("./utils/normalizeNs"),d=o(l);i.prototype={getDomNode:function(){return this._rootNode.getDomNode()},key:function(t){return this._key=t,this},attrs:function(t){return this._attrs=t,this},children:function(t){return this._children=t,this},ctx:function(t){return this._ctx=t,this},renderToDom:function(t){return d["default"](this,t),this._getRootNode().renderToDom(this)},renderToString:function(){return this._getRootNode().renderToString()},adoptDom:function(t,e,n){return this._getRootNode().adoptDom(t,e,n)},mount:function(){this._getRootNode().mount()},unmount:function(){this._rootNode&&(this._rootNode.unmount(),this._rootNode=null)},patch:function(t,e){this!==t&&(d["default"](this,e),this._getRootNode().patch(this.type===t.type?t._getRootNode():t,e))},_getRootNode:function(){if(this._rootNode)return this._rootNode;var t=this._component(this._attrs,this._children,this._ctx)||new u["default"]("noscript");return t.ctx(this._ctx),this._rootNode=t}}},{"../utils/emptyObj":33,"./TagNode":24,"./utils/normalizeNs":27}],24:[function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t){this.type=i,this._tag=t,this._domNode=null,this._key=null,this._ns=null,this._attrs=null,this._children=null,this._escapeChildren=!0,this._ctx=S["default"]}function r(t){if(null==t)return null;var e="undefined"==typeof t?"undefined":u(t);if("object"===e){var n=Array.isArray(t)?t:[t];return n}return"string"===e?t:t.toString()}n.__esModule=!0;var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t};n["default"]=i;var s=t("../client/patchOps"),a=o(s),l=t("../client/domAttrs"),d=o(l),f=t("../client/domOps"),c=o(f),h=t("./utils/normalizeNs"),p=o(h),m=t("./utils/checkChildren"),_=(o(m),t("./utils/patchChildren")),v=o(_),g=t("../client/events/domEventManager"),y=t("../client/events/attrsToEvents"),b=o(y),N=t("../utils/escapeHtml"),C=o(N),D=t("../utils/isInArray"),M=o(D),w=t("../utils/console"),A=(o(w),t("../utils/emptyObj")),S=o(A),k=t("../client/browsers"),T=t("../client/utils/createElement"),x=o(T),E=t("../client/utils/createElementByHtml"),O=o(E),R=t("./ComponentNode"),I=o(R),j=t("./FunctionComponentNode"),L=o(j),P={area:!0,base:!0,br:!0,col:!0,command:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,menuitem:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},B=k.isTrident||k.isEdge;i.prototype={getDomNode:function(){return this._domNode},key:function(t){return this._key=t,this},ns:function(t){return this._ns=t,this},attrs:function(t){return this._attrs=t,this},children:function(t){return this._children=r(t),this},ctx:function(t){if(t!==S["default"]){this._ctx=t;var e=this._children;if(e&&"string"!=typeof e)for(var n=e.length,o=0;n>o;)e[o++].ctx(t)}return this},html:function(t){return this._children=t,this._escapeChildren=!1,this},renderToDom:function(t){p["default"](this,t);var e=this._children;if(B&&e&&"string"!=typeof e){var n=O["default"](this.renderToString(),this._tag,this._ns);return this.adoptDom([n],0,t),n}var o=x["default"](this._ns,this._tag),i=this._attrs;if(e)if("string"==typeof e)this._escapeChildren?o.textContent=e:o.innerHTML=e;else for(var r=0,u=e.length;u>r;)c["default"].append(o,e[r++].renderToDom(this));if(i){var s=void 0,a=void 0;for(s in i)null!=(a=i[s])&&(b["default"][s]?g.addListener(o,b["default"][s],a):d["default"](s).set(o,s,a))}return this._domNode=o},renderToString:function(){var t=this._tag,e=this._ns,n=this._attrs,o=this._children,i="<"+t;if(e&&(i+=' xmlns="'+e+'"'),n){var r=void 0,u=void 0,s=void 0;for(r in n)if(u=n[r],null!=u){if("value"===r)switch(t){case"textarea":o=u;continue;case"select":this.ctx({value:u,multiple:n.multiple});continue;case"option":(this._ctx.multiple?M["default"](this._ctx.value,u):this._ctx.value===u)&&(i+=" "+d["default"]("selected").toString("selected",!0))}!b["default"][r]&&(s=d["default"](r).toString(r,u))&&(i+=" "+s)}}if(P[t])i+="/>";else{if(i+=">",o)if("string"==typeof o)i+=this._escapeChildren?C["default"](o):o;else for(var a=0,l=o.length;l>a;)i+=o[a++].renderToString();i+=""}return i},adoptDom:function(t,e,n){p["default"](this,n);var o=this._domNode=t[e],i=this._attrs,r=this._children;if(i){var u=void 0,s=void 0;for(u in i)null!=(s=i[u])&&b["default"][u]&&g.addListener(o,b["default"][u],s)}if(r&&"string"!=typeof r){var a=0,l=r.length;if(l)for(var d=o.childNodes,f=0;l>a;)f=r[a++].adoptDom(d,f,this)}return e+1},mount:function(){var t=this._children;if(t&&"string"!=typeof t)for(var e=0,n=t.length;n>e;)t[e++].mount()},unmount:function(){var t=this._children;if(t&&"string"!=typeof t)for(var e=0,n=t.length;n>e;)t[e++].unmount();g.removeListeners(this._domNode),this._domNode=null},patch:function(t,e){if(this!==t)switch(p["default"](t,e),t.type){case i:this._tag!==t._tag||this._ns!==t._ns?a["default"].replace(e,this,t):(t._domNode=this._domNode,this._patchChildren(t),this._patchAttrs(t));break;case I["default"]:var n=t._getInstance();this.patch(n.getRootNode(),e),n.mount();break;case L["default"]:this.patch(t._getRootNode(),e);break;default:a["default"].replace(e,this,t)}},_patchChildren:function(t){var e=this._children,n=t._children;if(e!==n){var o="string"==typeof e,i="string"==typeof n;if(i)return o?void a["default"].updateText(this,n,t._escapeChildren):(e&&e.length&&a["default"].removeChildren(this),void(n&&a["default"].updateText(this,n,t._escapeChildren)));if(!n||!n.length)return void(e&&(o?a["default"].removeText(this):e.length&&a["default"].removeChildren(this)));if(o&&e&&a["default"].removeText(this),!o&&e&&e.length)v["default"](this,t);else for(var r=n.length,u=0;r>u;)a["default"].appendChild(t,n[u++])}},_patchAttrs:function(t){var e=this._attrs,n=t._attrs;if(e!==n){var o=void 0,i=void 0,r=void 0,s=void 0,l=void 0;if(n)for(o in n)r=n[o],e&&null!=(i=e[o])?null==r?a["default"].removeAttr(this,o):"object"===("undefined"==typeof r?"undefined":u(r))&&"object"===("undefined"==typeof i?"undefined":u(i))?(l=Array.isArray(r), +s=Array.isArray(i),l||s?l&&s?this._patchAttrArr(o,i,r):a["default"].updateAttr(this,o,r):this._patchAttrObj(o,i,r)):i!==r&&a["default"].updateAttr(this,o,r):null!=r&&a["default"].updateAttr(this,o,r);if(e)for(o in e)n&&o in n||null==(i=e[o])||a["default"].removeAttr(this,o)}},_patchAttrArr:function(t,e,n){if(e!==n){var o=e.length,i=!1;if(o===n.length)for(var r=0;!i&&o>r;)e[r]!=n[r]&&(i=!0),++r;else i=!0;i&&a["default"].updateAttr(this,t,n)}},_patchAttrObj:function(t,e,n){if(e!==n){var o=!1,i={};for(var r in n)e[r]!=n[r]&&(o=!0,i[r]=n[r]);for(var u in e)null==e[u]||u in n||(o=!0,i[u]=null);o&&a["default"].updateAttr(this,t,i)}}}},{"../client/browsers":2,"../client/domAttrs":3,"../client/domOps":4,"../client/events/attrsToEvents":5,"../client/events/domEventManager":7,"../client/patchOps":11,"../client/utils/createElement":13,"../client/utils/createElementByHtml":14,"../utils/console":31,"../utils/emptyObj":33,"../utils/escapeHtml":35,"../utils/isInArray":36,"./ComponentNode":21,"./FunctionComponentNode":23,"./utils/checkChildren":26,"./utils/normalizeNs":27,"./utils/patchChildren":28}],25:[function(t,e,n){"use strict";function o(t,e){this._childNode=t,this._ns=e}n.__esModule=!0,n["default"]=o,o.prototype={getDomNode:function(){return this._childNode.getDomNode()},renderToDom:function(){return this._childNode.renderToDom(this)},adoptDom:function(t){this._childNode.adoptDom(t,0,this)},patch:function(t){this._childNode.patch(t,this),this._childNode=t},mount:function(){this._childNode.mount()},unmount:function(){this._childNode.unmount()}}},{}],26:[function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t){for(var e={},n=t.length,o=0,i=void 0;n>o;)i=t[o++],"object"!==("undefined"==typeof i?"undefined":r(i))?s["default"].error("You mustn't use simple child in case of multiple children."):null!=i._key&&(i._key in e?s["default"].error("Childrens' keys must be unique across the children. Found duplicate of \""+i._key+'" key.'):e[i._key]=!0)}n.__esModule=!0;var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t};n["default"]=i;var u=t("../../utils/console"),s=o(u)},{"../../utils/console":31}],27:[function(t,e,n){"use strict";function o(t,e){!t._ns&&e._ns&&(t._ns=e._ns)}n.__esModule=!0,n["default"]=o},{}],28:[function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){var n=t._children,o=e._children,i=n.length,u=o.length;if(1===i&&1===u)return void n[0].patch(o[0],e);for(var a=0,l=i-1,d=n[a],f=d._key,c=n[l],h=c._key,p=0,m=u-1,_=o[p],v=_._key,g=o[m],y=g._key,b=!1,N=!1,C=!1,D=!1,M={},w=void 0,A=void 0,S=void 0;l>=a&&m>=p;)M[a]?b=!0:M[l]?N=!0:f===v?(d.patch(_,e),b=!0,C=!0):h===y?(c.patch(g,e),N=!0,D=!0):null!=f&&f===y?(s["default"].moveChild(d,c,!0),d.patch(g,e),b=!0,D=!0):null!=h&&h===v?(s["default"].moveChild(c,d,!1),c.patch(_,e),N=!0,C=!0):null!=f&&null==v?(s["default"].insertChild(e,_,d),C=!0):null==f&&null!=v?(s["default"].removeChild(d),b=!0):(w||(w=r(n,a,l)),null==(A=w[v])?s["default"].insertChild(e,_,d):(S=n[A],M[A]=!0,s["default"].moveChild(S,d,!1),S.patch(_,e)),C=!0),b&&(b=!1,++a<=l&&(d=n[a],f=d._key)),N&&(N=!1,--l>=a&&(c=n[l],h=c._key)),C&&(C=!1,++p<=m&&(_=o[p],v=_._key)),D&&(D=!1,--m>=p&&(g=o[m],y=g._key));for(;l>=a;)M[a]||s["default"].removeChild(n[a]),++a;for(;m>=p;)u-1>m?s["default"].insertChild(e,o[p],o[m+1]):s["default"].appendChild(e,o[p]),++p}function r(t,e,n){for(var o={},i=void 0;n>e;)i=t[e],null!=i._key&&(o[i._key]=e),++e;return o}n.__esModule=!0,n["default"]=i;var u=t("../../client/patchOps"),s=o(u)},{"../../client/patchOps":11}],29:[function(t,e,n){"use strict";n.__esModule=!0,n["default"]=function(t){return t.renderToString()}},{}],30:[function(t,e,n){"use strict";function o(){this._listeners={}}n.__esModule=!0,o.prototype={on:function(t,e){var n=arguments.length<=2||void 0===arguments[2]?null:arguments[2];return(this._listeners[t]||(this._listeners[t]=[])).push({fn:e,fnCtx:n}),this},off:function(t,e){var n=arguments.length<=2||void 0===arguments[2]?null:arguments[2],o=this._listeners[t];if(o)for(var i=0,r=void 0;i1?o-1:0),r=1;o>r;r++)i[r-1]=arguments[r];for(;n/g,">")}},{}],36:[function(t,e,n){"use strict";n.__esModule=!0,n["default"]=function(t,e){for(var n=t.length,o=0;n>o;)if(t[o++]==e)return!0;return!1}},{}],37:[function(t,e,n){"use strict";n.__esModule=!0,n["default"]=function(){}},{}],38:[function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t){if(null==t)return null;var e="undefined"==typeof t?"undefined":s(t);if("object"!==e)return"string"===e?t||null:""+t;if(!Array.isArray(t))return t;if(!t.length)return null;for(var n=t,o=0,r=t.length,a=!0,l=void 0,d=void 0;r>o;){if(l=i(t[o]),null===l)null!==n&&(a?n=null:n===t&&(n=t.slice(0,o)));else{if(null===n)n=l;else if(Array.isArray(l))n=a?l:(n===t?n.slice(0,o):Array.isArray(n)?n:[n]).concat(l);else if(d="object"===("undefined"==typeof l?"undefined":s(l)),d&&t[o]===l)n!==t&&(n=u(n,l));else{if(n===t){if(a&&d){n=l,a=!1,++o;continue}n=n.slice(0,o)}n=u(n,l)}a=!1}++o}return n}function r(t){return"object"===("undefined"==typeof t?"undefined":s(t))?t:l["default"]("span").children(t)}function u(t,e){return Array.isArray(t)?(t.push(r(e)),t):[r(t),r(e)]}n.__esModule=!0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t};n["default"]=function(t){var e=i(t);return null===e||"object"!==("undefined"==typeof e?"undefined":s(e))||Array.isArray(e)||(e=[e]),e};var a=t("../createNode"),l=o(a)},{"../createNode":19}],39:[function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}n.__esModule=!0,n.Component=n.normalizeChildren=n.renderToString=n.createComponent=n.node=void 0;var i=t("./client/mounter");Object.keys(i).forEach(function(t){"default"!==t&&Object.defineProperty(n,t,{enumerable:!0,get:function(){return i[t]}})});var r=t("./createNode"),u=o(r),s=t("./createComponent"),a=o(s),l=t("./renderToString"),d=o(l),f=t("./utils/normalizeChildren"),c=o(f),h=t("./Component"),p=o(h),m=t("./utils/console");o(m);t("./globalHook"),n.node=u["default"],n.createComponent=a["default"],n.renderToString=d["default"],n.normalizeChildren=c["default"],n.Component=p["default"]},{"./Component":1,"./client/mounter":10,"./createComponent":18,"./createNode":19,"./globalHook":20,"./renderToString":29,"./utils/console":31,"./utils/normalizeChildren":38}]},{},[39])(39)}); \ No newline at end of file diff --git a/library-list.js b/library-list.js index 157c06ba..c4954365 100644 --- a/library-list.js +++ b/library-list.js @@ -54,7 +54,8 @@ { type: 'naive', id: 're-frame', url: './re-frame/index.html', label: 're-frame (Reagent)' }, { type: 'naive', id: 'd3', url: './d3/index.html', label: 'DBMON D3' }, { type: 'naive', id: 'morphdom', url: './morphdom/index.html', label: 'DBMON Morphdom' }, - { type: 'optimized', id: 'frzr', url: './frzr/index.html', label: 'DBMON FRZR' } + { type: 'optimized', id: 'frzr', url: './frzr/index.html', label: 'DBMON FRZR' }, + { type: 'naive', id: 'vidom', url: './vidom/index.html', label: 'DBMON vidom' } ]; function Library() { diff --git a/readme.md b/readme.md index 003d9838..cf9c9ada 100644 --- a/readme.md +++ b/readme.md @@ -36,6 +36,7 @@ You can test it at http://mathieuancelin.github.io/js-repaint-perfs/ * [Ripple](https://github.com/pemrouz/ripple) * [Morphdom](https://github.com/patrick-steele-idem/morphdom) * [FRZR](https://frzr.js.org) +* [Vidom](https://github.com/dfilatov/vidom) ## Todo diff --git a/vidom/app.js b/vidom/app.js new file mode 100644 index 00000000..6bba6434 --- /dev/null +++ b/vidom/app.js @@ -0,0 +1,62 @@ +var node = vidom.node; + +var DBMon = vidom.createComponent({ + onInit: function() { + this.loadSamples = this.loadSamples.bind(this); + }, + + onInitialStateRequest: function() { + return { + databases: [] + }; + }, + + loadSamples: function () { + this.setState({ databases: ENV.generateData().toArray() }); + Monitoring.renderRate.ping(); + setTimeout(this.loadSamples, ENV.timeout); + }, + + onMount: function() { + this.loadSamples(); + }, + + onRender: function() { + return ( + node('div').children([ + node('table').attrs({ className: 'table table-striped latest-data' }).children([ + node('tbody').children(this.getState().databases.map(function(database) { + var children = [ + node('td').key('dbname').attrs({ className: 'dbname' }).children(database.dbname), + node('td').key('query-count').attrs({ className: 'query-count' }).children([ + node('span') + .attrs({ className: database.lastSample.countClassName }) + .children(database.lastSample.nbQueries) + ])]; + + database.lastSample.topFiveQueries.forEach(function(query, index) { + children.push( + node('td') + .key('top' + index) + .attrs({ className: 'Query ' + query.elapsedClassName }) + .children([ + node('span').key('elapsed').children(query.formatElapsed), + node('div') + .key('content') + .attrs({ className : 'popover left' }) + .children([ + node('div').key('content').attrs({ className: 'popover-content' }).children(query.query), + node('div').key('arrow').attrs({ className: 'arrow' }) + ]) + ])); + }); + + return node('tr').key(database.dbname).children(children); + })) + ]) + ]) + ); + } +}); + +vidom.mountToDom(document.getElementById('dbmon'), node(DBMon)); diff --git a/vidom/index.html b/vidom/index.html new file mode 100644 index 00000000..fdf06e78 --- /dev/null +++ b/vidom/index.html @@ -0,0 +1,19 @@ + + + + + + + dbmon (vidom) + + +
+ + + + + + + + +