shadow-component - npm Package Compare versions

Comparing version 0.1.10 to 0.2.0

babel/builder.js

@@ -1,34 +0,51 @@
-var DefaultCallbacks = {
-  detachedCallback: function detachedCallback() {
+import ShadowDOMShim from './shadowdom-shim'
+
+const DefaultCallbacks = {
+  detachedCallback() {
     this.onUnMount()
     console.log('Was detached')
   },
-  attributeChangedCallback: function attributeChangedCallback() {
+  attributeChangedCallback() {
     console.log('Change attibute')
   },
-  onMount () {},
-  onUnMount () {}
-}
-
-function createDefaultCallbacks (callbacks) {
-  return Object.assign(DefaultCallbacks, {
-    createdCallback: function createdCallback() {
+  onMount() {} ,
+  onUnMount() {},
+  createdCallback() {
+    if (typeof this.createShadowRoot === 'function') {
       this.shadow = this.createShadowRoot()
       this.shadow.innerHTML = this.template
+    } else {
+      ShadowDOMShim.writeStyle(this.template, this.nodeName)
     }
-  }, callbacks)
+  }
 }
 
+function createDefaultCallbacks (callbacks) {
+  return Object.assign({}, createObjDescriptor(DefaultCallbacks), createObjDescriptor(callbacks))
+}
+
+function createObjDescriptor (obj) {
+  let objDescriptor = {}
+  Object.keys(obj).forEach((prop) => {
+    objDescriptor[prop] = {value: obj[prop]}
+  })
+  return objDescriptor
+}
+
 function SetListeners(events = []) {
   return {
     attachedCallback () {
-      console.log('Element attach', this)
-      this.onMount()
-      events.forEach(function(event) {
-        this.addEventListener(event.type, function(e) {
-          if (e.target && e.target.matches(event.selector)) {
-            event.callback.bind(this)(e)
-          }
+      try {
+        console.log('Element attach', this)
+        this.onMount()
+        events.forEach(function(event) {
+          this.addEventListener(event.type, function(e) {
+            if (e.target && e.target.matches(event.selector)) {
+              event.callback.bind(this)(e)
+            }
+          }.bind(this))
         }.bind(this))
-      }.bind(this))
+      } catch(e) {
+        console.log(e)
+      }
     }
@@ -39,4 +56,11 @@ }
 function Builder (tagName, options) {
-  let TagPrototype = Object.create(HTMLElement.prototype)
-  Object.assign(TagPrototype, createDefaultCallbacks(options), SetListeners(options.events))
+  let optionsDescriptor = Object.assign({} ,
+    createDefaultCallbacks(options),
+    createObjDescriptor(SetListeners(options.events))
+  )
+  optionsDescriptor.state = Object.assign({}, optionsDescriptor.state, {
+    enumerable: true,
+    writable: true
+  })
+  let TagPrototype = Object.create(HTMLElement.prototype, optionsDescriptor)
   try {
@@ -43,0 +67,0 @@ let tagNameElement = document.registerElement(tagName, {

babel/index.js

@@ -0,1 +1,2 @@
+import 'document-register-element'
 import {
@@ -51,3 +52,3 @@ elementOpenStart,
 function renderDOM (component, tag, state = {}) {
-  patch(tag, function(data) {
+  return patch(tag, function(data) {
     Shaco.createElement(component, null, data)
@@ -54,0 +55,0 @@ }, state)

dist/shacho.min.js

@@ -1,1 +0,1 @@
-!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.Shaco=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module){function cleanUpNextTick(){draining=!1,currentQueue.length?queue=currentQueue.concat(queue):queueIndex=-1,queue.length&&drainQueue()}function drainQueue(){if(!draining){var timeout=setTimeout(cleanUpNextTick);draining=!0;for(var len=queue.length;len;){for(currentQueue=queue,queue=[];++queueIndex<len;)currentQueue&&currentQueue[queueIndex].run();queueIndex=-1,len=queue.length}currentQueue=null,draining=!1,clearTimeout(timeout)}}function Item(fun,array){this.fun=fun,this.array=array}function noop(){}var currentQueue,process=module.exports={},queue=[],draining=!1,queueIndex=-1;process.nextTick=function(fun){var args=new Array(arguments.length-1);if(arguments.length>1)for(var i=1;i<arguments.length;i++)args[i-1]=arguments[i];queue.push(new Item(fun,args)),1!==queue.length||draining||setTimeout(drainQueue,0)},Item.prototype.run=function(){this.fun.apply(null,this.array)},process.title="browser",process.browser=!0,process.env={},process.argv=[],process.version="",process.versions={},process.on=noop,process.addListener=noop,process.once=noop,process.off=noop,process.removeListener=noop,process.removeAllListeners=noop,process.emit=noop,process.binding=function(){throw new Error("process.binding is not supported")},process.cwd=function(){return"/"},process.chdir=function(){throw new Error("process.chdir is not supported")},process.umask=function(){return 0}},{}],2:[function(require,module,exports){(function(process){"use strict";function Context(){this.created=exports.notifications.nodesCreated&&[],this.deleted=exports.notifications.nodesDeleted&&[]}function NodeData(nodeName,key){this.attrs=createMap(),this.attrsArr=[],this.newAttrs=createMap(),this.key=key,this.keyMap=null,this.keyMapValid=!0,this.nodeName=nodeName,this.text=null}var inAttributes=!1,inSkip=!1,assertInPatch=function(context){if(!context)throw new Error("Cannot call currentElement() unless in patch")},assertKeyedTagMatches=function(nodeName,tag,key){if(nodeName!==tag)throw new Error('Was expecting node with key "'+key+'" to be a '+tag+", not a "+nodeName+".")},assertNoUnclosedTags=function(openElement,root){if(openElement!==root){for(var currentElement=openElement,openTags=[];currentElement&&currentElement!==root;)openTags.push(currentElement.nodeName.toLowerCase()),currentElement=currentElement.parentNode;throw new Error("One or more tags were not closed:\n"+openTags.join("\n"))}},assertNotInAttributes=function(functionName){if(inAttributes)throw new Error(functionName+"() may not be called between elementOpenStart() and elementOpenEnd().")},assertNotInSkip=function(functionName){if(inSkip)throw new Error(functionName+"() may not be called inside an element that has called skip().")},assertInAttributes=function(functionName){if(!inAttributes)throw new Error(functionName+"() must be called after elementOpenStart().")},assertVirtualAttributesClosed=function(){if(inAttributes)throw new Error("elementOpenEnd() must be called after calling elementOpenStart().")},assertPlaceholderKeySpecified=function(key){if(!key)throw new Error("Placeholder elements must have a key specified.")},assertCloseMatchesOpenTag=function(nodeName,tag){if(nodeName!==tag)throw new Error("Received a call to close "+tag+" but "+nodeName+" was open.")},assertNoChildrenDeclaredYet=function(functionName,previousNode){if(null!==previousNode)throw new Error(functionName+"() must come before any child declarations inside the current element.")},setInAttributes=function(value){var previous=inAttributes;return inAttributes=value,previous},setInSkip=function(value){var previous=inSkip;return inSkip=value,previous};exports.notifications={nodesCreated:null,nodesDeleted:null},Context.prototype.markCreated=function(node){this.created&&this.created.push(node)},Context.prototype.markDeleted=function(node){this.deleted&&this.deleted.push(node)},Context.prototype.notifyChanges=function(){this.created&&this.created.length>0&&exports.notifications.nodesCreated(this.created),this.deleted&&this.deleted.length>0&&exports.notifications.nodesDeleted(this.deleted)};var hasOwnProperty=Object.prototype.hasOwnProperty,create=Object.create,has=function(map,property){return hasOwnProperty.call(map,property)},createMap=function(){return create(null)},initData=function(node,nodeName,key){var data=new NodeData(nodeName,key);return node.__incrementalDOMData=data,data},getData=function(node){var data=node.__incrementalDOMData;if(!data){var nodeName=node.nodeName.toLowerCase(),key=null;node instanceof Element&&(key=node.getAttribute("key")),data=initData(node,nodeName,key)}return data};exports.symbols={"default":"__default",placeholder:"__placeholder"},exports.applyAttr=function(el,name,value){null==value?el.removeAttribute(name):el.setAttribute(name,value)},exports.applyProp=function(el,name,value){el[name]=value};var applyStyle=function(el,name,style){if("string"==typeof style)el.style.cssText=style;else{el.style.cssText="";var elStyle=el.style,obj=style;for(var prop in obj)has(obj,prop)&&(elStyle[prop]=obj[prop])}},applyAttributeTyped=function(el,name,value){var type=typeof value;"object"===type||"function"===type?exports.applyProp(el,name,value):exports.applyAttr(el,name,value)},updateAttribute=function(el,name,value){var data=getData(el),attrs=data.attrs;if(attrs[name]!==value){var mutator=exports.attributes[name]||exports.attributes[exports.symbols["default"]];mutator(el,name,value),attrs[name]=value}};exports.attributes=createMap(),exports.attributes[exports.symbols["default"]]=applyAttributeTyped,exports.attributes[exports.symbols.placeholder]=function(){},exports.attributes.style=applyStyle;var currentNode,currentParent,previousNode,root,doc,getNamespaceForTag=function(tag,parent){return"svg"===tag?"http://www.w3.org/2000/svg":"foreignObject"===getData(parent).nodeName?null:parent.namespaceURI},createElement=function(doc,parent,tag,key,statics){var el,namespace=getNamespaceForTag(tag,parent);if(el=namespace?doc.createElementNS(namespace,tag):doc.createElement(tag),initData(el,tag,key),statics)for(var i=0;i<statics.length;i+=2)updateAttribute(el,statics[i],statics[i+1]);return el},createText=function(doc){var node=doc.createTextNode("");return initData(node,"#text",null),node},createKeyMap=function(el){for(var map=createMap(),children=el.children,count=children.length,i=0;count>i;i+=1){var child=children[i],key=getData(child).key;key&&(map[key]=child)}return map},getKeyMap=function(el){var data=getData(el);return data.keyMap||(data.keyMap=createKeyMap(el)),data.keyMap},getChild=function(parent,key){return key?getKeyMap(parent)[key]:null},registerChild=function(parent,key,child){getKeyMap(parent)[key]=child},context=null;exports.patch=function(node,fn,data){var prevContext=context,prevRoot=root,prevDoc=doc,prevCurrentNode=currentNode,prevCurrentParent=currentParent,prevPreviousNode=previousNode,previousInAttributes=!1,previousInSkip=!1;context=new Context,root=node,doc=node.ownerDocument,currentNode=node,currentParent=null,previousNode=null,"production"!==process.env.NODE_ENV&&(previousInAttributes=setInAttributes(!1),previousInSkip=setInSkip(!1)),enterNode(),fn(data),exitNode(),"production"!==process.env.NODE_ENV&&(assertVirtualAttributesClosed(),assertNoUnclosedTags(previousNode,node),setInAttributes(previousInAttributes),setInSkip(previousInSkip)),context.notifyChanges(),context=prevContext,root=prevRoot,doc=prevDoc,currentNode=prevCurrentNode,currentParent=prevCurrentParent,previousNode=prevPreviousNode};var matches=function(nodeName,key){var data=getData(currentNode);return nodeName===data.nodeName&&key==data.key},alignWithDOM=function(nodeName,key,statics){if(!currentNode||!matches(nodeName,key)){var node;key&&(node=getChild(currentParent,key),node&&"production"!==process.env.NODE_ENV&&assertKeyedTagMatches(getData(node).nodeName,nodeName,key)),node||(node="#text"===nodeName?createText(doc):createElement(doc,currentParent,nodeName,key,statics),key&&registerChild(currentParent,key,node),context.markCreated(node)),currentNode&&getData(currentNode).key?(currentParent.replaceChild(node,currentNode),getData(currentParent).keyMapValid=!1):currentParent.insertBefore(node,currentNode),currentNode=node}},clearUnvisitedDOM=function(){var key,node=currentParent,data=getData(node),keyMap=data.keyMap,keyMapValid=data.keyMapValid,child=node.lastChild;if(!(child===previousNode&&keyMapValid||data.attrs[exports.symbols.placeholder]&&node!==root)){for(;child!==previousNode;)node.removeChild(child),context.markDeleted(child),key=getData(child).key,key&&delete keyMap[key],child=node.lastChild;if(!keyMapValid){for(key in keyMap)child=keyMap[key],child.parentNode!==node&&(context.markDeleted(child),delete keyMap[key]);data.keyMapValid=!0}}},enterNode=function(){currentParent=currentNode,currentNode=currentNode.firstChild,previousNode=null},nextNode=function(){previousNode=currentNode,currentNode=currentNode.nextSibling},exitNode=function(){clearUnvisitedDOM(),previousNode=currentParent,currentNode=currentParent.nextSibling,currentParent=currentParent.parentNode},_elementOpen=function(tag,key,statics){return alignWithDOM(tag,key,statics),enterNode(),currentParent},_elementClose=function(){return"production"!==process.env.NODE_ENV&&setInSkip(!1),exitNode(),previousNode},_text=function(){return alignWithDOM("#text",null,null),nextNode(),previousNode};exports.currentElement=function(){return"production"!==process.env.NODE_ENV&&(assertInPatch(context),assertNotInAttributes("currentElement")),currentParent},exports.skip=function(){"production"!==process.env.NODE_ENV&&(assertNoChildrenDeclaredYet("skip",previousNode),setInSkip(!0)),previousNode=currentParent.lastChild};var ATTRIBUTES_OFFSET=3,argsBuilder=[];exports.elementOpen=function(tag,key,statics){"production"!==process.env.NODE_ENV&&(assertNotInAttributes("elementOpen"),assertNotInSkip("elementOpen"));for(var node=_elementOpen(tag,key,statics),data=getData(node),attrsArr=data.attrsArr,newAttrs=data.newAttrs,attrsChanged=!1,i=ATTRIBUTES_OFFSET,j=0;i<arguments.length;i+=1,j+=1)if(attrsArr[j]!==arguments[i]){attrsChanged=!0;break}for(;i<arguments.length;i+=1,j+=1)attrsArr[j]=arguments[i];if(j<attrsArr.length&&(attrsChanged=!0,attrsArr.length=j),attrsChanged){for(i=ATTRIBUTES_OFFSET;i<arguments.length;i+=2)newAttrs[arguments[i]]=arguments[i+1];for(var attr in newAttrs)updateAttribute(node,attr,newAttrs[attr]),newAttrs[attr]=void 0}return node},exports.elementOpenStart=function(tag,key,statics){"production"!==process.env.NODE_ENV&&(assertNotInAttributes("elementOpenStart"),setInAttributes(!0)),argsBuilder[0]=tag,argsBuilder[1]=key,argsBuilder[2]=statics},exports.attr=function(name,value){"production"!==process.env.NODE_ENV&&assertInAttributes("attr"),argsBuilder.push(name,value)},exports.elementOpenEnd=function(){"production"!==process.env.NODE_ENV&&(assertInAttributes("elementOpenEnd"),setInAttributes(!1));var node=exports.elementOpen.apply(null,argsBuilder);return argsBuilder.length=0,node},exports.elementClose=function(tag){"production"!==process.env.NODE_ENV&&assertNotInAttributes("elementClose");var node=_elementClose();return"production"!==process.env.NODE_ENV&&assertCloseMatchesOpenTag(getData(node).nodeName,tag),node},exports.elementVoid=function(){var node=exports.elementOpen.apply(null,arguments);return exports.elementClose.apply(null,arguments),node},exports.elementPlaceholder=function(tag,key){return"production"!==process.env.NODE_ENV&&assertPlaceholderKeySpecified(key),exports.elementOpen.apply(null,arguments),exports.skip(),exports.elementClose.apply(null,arguments)},exports.text=function(value){"production"!==process.env.NODE_ENV&&(assertNotInAttributes("text"),assertNotInSkip("text"));var node=_text(),data=getData(node);if(data.text!==value){data.text=value;for(var formatted=value,i=1;i<arguments.length;i+=1)formatted=arguments[i](formatted);node.data=formatted}return node}}).call(this,require("_process"))},{_process:1}],3:[function(require,module,exports){"use strict";function createDefaultCallbacks(callbacks){return Object.assign(DefaultCallbacks,{createdCallback:function(){this.shadow=this.createShadowRoot(),this.shadow.innerHTML=this.template}},callbacks)}function SetListeners(){var events=arguments.length<=0||void 0===arguments[0]?[]:arguments[0];return{attachedCallback:function(){console.log("Element attach",this),this.onMount(),events.forEach(function(event){this.addEventListener(event.type,function(e){e.target&&e.target.matches(event.selector)&&event.callback.bind(this)(e)}.bind(this))}.bind(this))}}}function Builder(tagName,options){var TagPrototype=Object.create(HTMLElement.prototype);Object.assign(TagPrototype,createDefaultCallbacks(options),SetListeners(options.events));try{var tagNameElement=document.registerElement(tagName,{prototype:TagPrototype});return new tagNameElement}catch(e){return console.log(e),document.createElement(tagName)}}Object.defineProperty(exports,"__esModule",{value:!0});var DefaultCallbacks={detachedCallback:function(){this.onUnMount(),console.log("Was detached")},attributeChangedCallback:function(){console.log("Change attibute")},onMount:function(){},onUnMount:function(){}};exports["default"]=Builder},{}],4:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function validateRequiredFields(options){if(!options.hasOwnProperty("template"))throw _exceptions2["default"].WITHOUT_TEMPLATE;if(!options.hasOwnProperty("view"))throw _exceptions2["default"].WITHOUT_VIEW;if(!options.hasOwnProperty("elementName"))throw _exceptions2["default"].WITHOUT_TAGNAME;if("string"!=typeof options.view&&"function"!=typeof options.view)throw _exceptions2["default"].VIEW_MUST_BE_STRING_OR_FUNTION}function renderFactory(view){return{render:function(reRender){reRender?_incrementalDom.patch(this,function(scope){renderElement(view,scope)},this):renderElement(view,this)}}}function renderElement(view,scope){var result=view.bind(scope)();"function"==typeof result&&result.bind(scope)()}function setStateFactory(){return{setState:function(newState){var force=arguments.length<=1||void 0===arguments[1]?!1:arguments[1];return this.state=Object.assign({},this.state,newState),this.render(force),this.state}}}function TagFactory(){var options=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];validateRequiredFields(options);var CloneOptions=Object.assign({},{name:options.elementName});return delete Object.elementName,Object.assign(options,renderFactory(options.view),setStateFactory()),_builder2["default"](CloneOptions.name,options)}Object.defineProperty(exports,"__esModule",{value:!0});var _builder=require("./builder"),_builder2=_interopRequireDefault(_builder),_exceptions=require("./exceptions"),_exceptions2=_interopRequireDefault(_exceptions),_incrementalDom=require("incremental-dom");Array.isArray||(Array.isArray=function(arg){return"[object Array]"===Object.prototype.toString.call(arg)}),exports["default"]=TagFactory},{"./builder":3,"./exceptions":5,"incremental-dom":2}],5:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var ComponentExceptions={WITHOUT_TEMPLATE:{message:"The new component need a Template",name:"ComponentWithOutTemplate"},WITHOUT_VIEW:{message:"The new component must have a view rendering",name:"ComponentWithOutView"},WITHOUT_TAGNAME:{message:"You can't create a component without the tagName, you must pass that to ComponentFactory",name:"ComponentWithPutTagName"},VIEW_MUST_BE_STRING_OR_FUNTION:{message:"The attribute view must be a string or a funtion.",name:"ComponentViewMustBeAStringOrFunction"}};exports["default"]=ComponentExceptions},{}],6:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function createElement(tagName){var key=arguments.length<=1||void 0===arguments[1]?null:arguments[1],state=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],options=arguments.length<=3||void 0===arguments[3]?{}:arguments[3],child=arguments[4];_incrementalDom.elementOpenStart(tagName,key),Object.keys(options).forEach(function(option){_incrementalDom.attr(option,options[option])});var element=_incrementalDom.elementOpenEnd(tagName);return"undefined"!=typeof element.setState?element.setState(Object.assign({},state,{child:child})):renderChild(child),_incrementalDom.elementClose(tagName),element}function renderChild(child){return"undefined"!=typeof child?"string"==typeof child?_incrementalDom.text(child.trim()):"function"==typeof child?child():Array.isArray(child)?void child.forEach(renderChild):child:void 0}function ComponentFactory(){var object=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];object=Object.assign({},DefaultComponentObject,object);var tag=_create2["default"](object);return tag}function renderDOM(component,tag){var state=arguments.length<=2||void 0===arguments[2]?{}:arguments[2];_incrementalDom.patch(tag,function(data){Shaco.createElement(component,null,data)},state)}Object.defineProperty(exports,"__esModule",{value:!0});var _incrementalDom=require("incremental-dom"),_create=require("./create"),_create2=_interopRequireDefault(_create),DefaultComponentObject={state:{}},Shaco={ComponentFactory:ComponentFactory,createElement:createElement,renderDOM:renderDOM,patch:_incrementalDom.patch};exports["default"]=Shaco},{"./create":4,"incremental-dom":2}]},{},[6])(6)});
+!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.Shaco=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module){function cleanUpNextTick(){draining=!1,currentQueue.length?queue=currentQueue.concat(queue):queueIndex=-1,queue.length&&drainQueue()}function drainQueue(){if(!draining){var timeout=setTimeout(cleanUpNextTick);draining=!0;for(var len=queue.length;len;){for(currentQueue=queue,queue=[];++queueIndex<len;)currentQueue&&currentQueue[queueIndex].run();queueIndex=-1,len=queue.length}currentQueue=null,draining=!1,clearTimeout(timeout)}}function Item(fun,array){this.fun=fun,this.array=array}function noop(){}var currentQueue,process=module.exports={},queue=[],draining=!1,queueIndex=-1;process.nextTick=function(fun){var args=new Array(arguments.length-1);if(arguments.length>1)for(var i=1;i<arguments.length;i++)args[i-1]=arguments[i];queue.push(new Item(fun,args)),1!==queue.length||draining||setTimeout(drainQueue,0)},Item.prototype.run=function(){this.fun.apply(null,this.array)},process.title="browser",process.browser=!0,process.env={},process.argv=[],process.version="",process.versions={},process.on=noop,process.addListener=noop,process.once=noop,process.off=noop,process.removeListener=noop,process.removeAllListeners=noop,process.emit=noop,process.binding=function(){throw new Error("process.binding is not supported")},process.cwd=function(){return"/"},process.chdir=function(){throw new Error("process.chdir is not supported")},process.umask=function(){return 0}},{}],2:[function(){!function(e,t,n,r){"use strict";function rt(e,t){for(var n=0,r=e.length;r>n;n++)vt(e[n],t)}function it(e){for(var r,t=0,n=e.length;n>t;t++)r=e[t],nt(r,b[ot(r)])}function st(e){return function(t){j(t)&&(vt(t,e),rt(t.querySelectorAll(w),e))}}function ot(e){var t=e.getAttribute("is"),n=e.nodeName.toUpperCase(),r=S.call(y,t?v+t.toUpperCase():d+n);return t&&r>-1&&!ut(n,t)?-1:r}function ut(e,t){return-1<w.indexOf(e+'[is="'+t+'"]')}function at(e){var t=e.currentTarget,n=e.attrChange,r=e.attrName,i=e.target;Q&&(!i||i===t)&&t.attributeChangedCallback&&"style"!==r&&e.prevValue!==e.newValue&&t.attributeChangedCallback(r,n===e[a]?null:e.prevValue,n===e[l]?null:e.newValue)}function ft(e){var t=st(e);return function(e){X.push(t,e.target)}}function lt(e){K&&(K=!1,e.currentTarget.removeEventListener(h,lt)),rt((e.target||t).querySelectorAll(w),e.detail===o?o:s),B&&pt()}function ct(e,t){var n=this;q.call(n,e,t),G.call(n,{target:n})}function ht(e,t){D(e,t),et?et.observe(e,z):(J&&(e.setAttribute=ct,e[i]=Z(e),e.addEventListener(p,G)),e.addEventListener(c,at)),e.createdCallback&&Q&&(e.created=!0,e.createdCallback(),e.created=!1)}function pt(){for(var e,t=0,n=F.length;n>t;t++)e=F[t],E.contains(e)||(n--,F.splice(t--,1),vt(e,o))}function dt(e){throw new Error("A "+e+" type is already registered")}function vt(e,t){var n,r=ot(e);r>-1&&(tt(e,b[r]),r=0,t!==s||e[s]?t===o&&!e[o]&&(e[s]=!1,e[o]=!0,r=1):(e[o]=!1,e[s]=!0,r=1,B&&S.call(F,e)<0&&F.push(e)),r&&(n=e[t+"Callback"])&&n.call(e))}if(!(r in t)){var X,G,Y,Z,et,tt,nt,i="__"+r+(1e5*Math.random()>>0),s="attached",o="detached",u="extends",a="ADDITION",f="MODIFICATION",l="REMOVAL",c="DOMAttrModified",h="DOMContentLoaded",p="DOMSubtreeModified",d="<",v="=",m=/^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,g=["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"],y=[],b=[],w="",E=t.documentElement,S=y.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},x=n.prototype,T=x.hasOwnProperty,N=x.isPrototypeOf,C=n.defineProperty,k=n.getOwnPropertyDescriptor,L=n.getOwnPropertyNames,A=n.getPrototypeOf,O=n.setPrototypeOf,M=!!n.__proto__,_=n.create||function mt(e){return e?(mt.prototype=e,new mt):this},D=O||(M?function(e,t){return e.__proto__=t,e}:L&&k?function(){function e(e,t){for(var n,r=L(t),i=0,s=r.length;s>i;i++)n=r[i],T.call(e,n)||C(e,n,k(t,n))}return function(t,n){do e(t,n);while((n=A(n))&&!N.call(n,t));return t}}():function(e,t){for(var n in t)e[n]=t[n];return e}),P=e.MutationObserver||e.WebKitMutationObserver,H=(e.HTMLElement||e.Element||e.Node).prototype,B=!N.call(H,E),j=B?function(e){return 1===e.nodeType}:function(e){return N.call(H,e)},F=B&&[],I=H.cloneNode,q=H.setAttribute,R=H.removeAttribute,U=t.createElement,z=P&&{attributes:!0,characterData:!0,attributeOldValue:!0},W=P||function(){J=!1,E.removeEventListener(c,W)},V=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,10)},$=!1,J=!0,K=!0,Q=!0;O||M?(tt=function(e,t){N.call(t,e)||ht(e,t)},nt=ht):(tt=function(e,t){e[i]||(e[i]=n(!0),ht(e,t))},nt=tt),B?(J=!1,function(){var e=k(H,"addEventListener"),t=e.value,n=function(e){var t=new CustomEvent(c,{bubbles:!0});t.attrName=e,t.prevValue=this.getAttribute(e),t.newValue=null,t[l]=t.attrChange=2,R.call(this,e),this.dispatchEvent(t)},r=function(e,t){var n=this.hasAttribute(e),r=n&&this.getAttribute(e),i=new CustomEvent(c,{bubbles:!0});q.call(this,e,t),i.attrName=e,i.prevValue=n?r:null,i.newValue=t,n?i[f]=i.attrChange=1:i[a]=i.attrChange=0,this.dispatchEvent(i)},s=function(e){var s,t=e.currentTarget,n=t[i],r=e.propertyName;n.hasOwnProperty(r)&&(n=n[r],s=new CustomEvent(c,{bubbles:!0}),s.attrName=n.name,s.prevValue=n.value||null,s.newValue=n.value=t[r]||null,null==s.prevValue?s[a]=s.attrChange=0:s[f]=s.attrChange=1,t.dispatchEvent(s))};e.value=function(e,o,u){e===c&&this.attributeChangedCallback&&this.setAttribute!==r&&(this[i]={className:{name:"class",value:this.className}},this.setAttribute=r,this.removeAttribute=n,t.call(this,"propertychange",s)),t.call(this,e,o,u)},C(H,"addEventListener",e)}()):P||(E.addEventListener(c,W),E.setAttribute(i,1),E.removeAttribute(i),J&&(G=function(e){var n,r,s,t=this;if(t===e.target){n=t[i],t[i]=r=Z(t);for(s in r){if(!(s in n))return Y(0,t,s,n[s],r[s],a);if(r[s]!==n[s])return Y(1,t,s,n[s],r[s],f)}for(s in n)if(!(s in r))return Y(2,t,s,n[s],r[s],l)}},Y=function(e,t,n,r,i,s){var o={attrChange:e,currentTarget:t,attrName:n,prevValue:r,newValue:i};o[s]=e,at(o)},Z=function(e){for(var t,n,r={},i=e.attributes,s=0,o=i.length;o>s;s++)t=i[s],n=t.name,"setAttribute"!==n&&(r[n]=t.value);return r})),t[r]=function(n,r){if(c=n.toUpperCase(),$||($=!0,P?(et=function(e,t){function n(e,t){for(var n=0,r=e.length;r>n;t(e[n++]));}return new P(function(r){for(var i,s,o,u=0,a=r.length;a>u;u++)i=r[u],"childList"===i.type?(n(i.addedNodes,e),n(i.removedNodes,t)):(s=i.target,Q&&s.attributeChangedCallback&&"style"!==i.attributeName&&(o=s.getAttribute(i.attributeName),o!==i.oldValue&&s.attributeChangedCallback(i.attributeName,i.oldValue,o)))})}(st(s),st(o)),et.observe(t,{childList:!0,subtree:!0})):(X=[],V(function E(){for(;X.length;)X.shift().call(null,X.shift());V(E)}),t.addEventListener("DOMNodeInserted",ft(s)),t.addEventListener("DOMNodeRemoved",ft(o))),t.addEventListener(h,lt),t.addEventListener("readystatechange",lt),t.createElement=function(e,n){var r=U.apply(t,arguments),i=""+e,s=S.call(y,(n?v:d)+(n||i).toUpperCase()),o=s>-1;return n&&(r.setAttribute("is",n=n.toLowerCase()),o&&(o=ut(i.toUpperCase(),n))),Q=!t.createElement.innerHTMLHelper,o&&nt(r,b[s]),r},H.cloneNode=function(e){var t=I.call(this,!!e),n=ot(t);return n>-1&&nt(t,b[n]),e&&it(t.querySelectorAll(w)),t}),-2<S.call(y,v+c)+S.call(y,d+c)&&dt(n),!m.test(c)||-1<S.call(g,c))throw new Error("The type "+n+" is invalid");var c,p,i=function(){return f?t.createElement(l,c):t.createElement(l)},a=r||x,f=T.call(a,u),l=f?r[u].toUpperCase():c;return f&&-1<S.call(y,d+l)&&dt(l),p=y.push((f?v:d)+c)-1,w=w.concat(w.length?",":"",f?l+'[is="'+n.toLowerCase()+'"]':l),i.prototype=b[p]=T.call(a,"prototype")?a.prototype:_(H),rt(t.querySelectorAll(w),s),i}}}(window,document,Object,"registerElement")},{}],3:[function(require,module,exports){(function(process){"use strict";function Context(){this.created=exports.notifications.nodesCreated&&[],this.deleted=exports.notifications.nodesDeleted&&[]}function NodeData(nodeName,key){this.attrs=createMap(),this.attrsArr=[],this.newAttrs=createMap(),this.key=key,this.keyMap=null,this.keyMapValid=!0,this.nodeName=nodeName,this.text=null}var inAttributes=!1,inSkip=!1,assertInPatch=function(context){if(!context)throw new Error("Cannot call currentElement() unless in patch")},assertKeyedTagMatches=function(nodeName,tag,key){if(nodeName!==tag)throw new Error('Was expecting node with key "'+key+'" to be a '+tag+", not a "+nodeName+".")},assertNoUnclosedTags=function(openElement,root){if(openElement!==root){for(var currentElement=openElement,openTags=[];currentElement&&currentElement!==root;)openTags.push(currentElement.nodeName.toLowerCase()),currentElement=currentElement.parentNode;throw new Error("One or more tags were not closed:\n"+openTags.join("\n"))}},assertNotInAttributes=function(functionName){if(inAttributes)throw new Error(functionName+"() may not be called between elementOpenStart() and elementOpenEnd().")},assertNotInSkip=function(functionName){if(inSkip)throw new Error(functionName+"() may not be called inside an element that has called skip().")},assertInAttributes=function(functionName){if(!inAttributes)throw new Error(functionName+"() must be called after elementOpenStart().")},assertVirtualAttributesClosed=function(){if(inAttributes)throw new Error("elementOpenEnd() must be called after calling elementOpenStart().")},assertPlaceholderKeySpecified=function(key){if(!key)throw new Error("Placeholder elements must have a key specified.")},assertCloseMatchesOpenTag=function(nodeName,tag){if(nodeName!==tag)throw new Error("Received a call to close "+tag+" but "+nodeName+" was open.")},assertNoChildrenDeclaredYet=function(functionName,previousNode){if(null!==previousNode)throw new Error(functionName+"() must come before any child declarations inside the current element.")},setInAttributes=function(value){var previous=inAttributes;return inAttributes=value,previous},setInSkip=function(value){var previous=inSkip;return inSkip=value,previous};exports.notifications={nodesCreated:null,nodesDeleted:null},Context.prototype.markCreated=function(node){this.created&&this.created.push(node)},Context.prototype.markDeleted=function(node){this.deleted&&this.deleted.push(node)},Context.prototype.notifyChanges=function(){this.created&&this.created.length>0&&exports.notifications.nodesCreated(this.created),this.deleted&&this.deleted.length>0&&exports.notifications.nodesDeleted(this.deleted)};var hasOwnProperty=Object.prototype.hasOwnProperty,create=Object.create,has=function(map,property){return hasOwnProperty.call(map,property)},createMap=function(){return create(null)},initData=function(node,nodeName,key){var data=new NodeData(nodeName,key);return node.__incrementalDOMData=data,data},getData=function(node){var data=node.__incrementalDOMData;if(!data){var nodeName=node.nodeName.toLowerCase(),key=null;node instanceof Element&&(key=node.getAttribute("key")),data=initData(node,nodeName,key)}return data};exports.symbols={"default":"__default",placeholder:"__placeholder"},exports.applyAttr=function(el,name,value){null==value?el.removeAttribute(name):el.setAttribute(name,value)},exports.applyProp=function(el,name,value){el[name]=value};var applyStyle=function(el,name,style){if("string"==typeof style)el.style.cssText=style;else{el.style.cssText="";var elStyle=el.style,obj=style;for(var prop in obj)has(obj,prop)&&(elStyle[prop]=obj[prop])}},applyAttributeTyped=function(el,name,value){var type=typeof value;"object"===type||"function"===type?exports.applyProp(el,name,value):exports.applyAttr(el,name,value)},updateAttribute=function(el,name,value){var data=getData(el),attrs=data.attrs;if(attrs[name]!==value){var mutator=exports.attributes[name]||exports.attributes[exports.symbols["default"]];mutator(el,name,value),attrs[name]=value}};exports.attributes=createMap(),exports.attributes[exports.symbols["default"]]=applyAttributeTyped,exports.attributes[exports.symbols.placeholder]=function(){},exports.attributes.style=applyStyle;var currentNode,currentParent,previousNode,root,doc,getNamespaceForTag=function(tag,parent){return"svg"===tag?"http://www.w3.org/2000/svg":"foreignObject"===getData(parent).nodeName?null:parent.namespaceURI},createElement=function(doc,parent,tag,key,statics){var el,namespace=getNamespaceForTag(tag,parent);if(el=namespace?doc.createElementNS(namespace,tag):doc.createElement(tag),initData(el,tag,key),statics)for(var i=0;i<statics.length;i+=2)updateAttribute(el,statics[i],statics[i+1]);return el},createText=function(doc){var node=doc.createTextNode("");return initData(node,"#text",null),node},createKeyMap=function(el){for(var map=createMap(),children=el.children,count=children.length,i=0;count>i;i+=1){var child=children[i],key=getData(child).key;key&&(map[key]=child)}return map},getKeyMap=function(el){var data=getData(el);return data.keyMap||(data.keyMap=createKeyMap(el)),data.keyMap},getChild=function(parent,key){return key?getKeyMap(parent)[key]:null},registerChild=function(parent,key,child){getKeyMap(parent)[key]=child},context=null;exports.patch=function(node,fn,data){var prevContext=context,prevRoot=root,prevDoc=doc,prevCurrentNode=currentNode,prevCurrentParent=currentParent,prevPreviousNode=previousNode,previousInAttributes=!1,previousInSkip=!1;context=new Context,root=node,doc=node.ownerDocument,currentNode=node,currentParent=null,previousNode=null,"production"!==process.env.NODE_ENV&&(previousInAttributes=setInAttributes(!1),previousInSkip=setInSkip(!1)),enterNode(),fn(data),exitNode(),"production"!==process.env.NODE_ENV&&(assertVirtualAttributesClosed(),assertNoUnclosedTags(previousNode,node),setInAttributes(previousInAttributes),setInSkip(previousInSkip)),context.notifyChanges(),context=prevContext,root=prevRoot,doc=prevDoc,currentNode=prevCurrentNode,currentParent=prevCurrentParent,previousNode=prevPreviousNode};var matches=function(nodeName,key){var data=getData(currentNode);return nodeName===data.nodeName&&key==data.key},alignWithDOM=function(nodeName,key,statics){if(!currentNode||!matches(nodeName,key)){var node;key&&(node=getChild(currentParent,key),node&&"production"!==process.env.NODE_ENV&&assertKeyedTagMatches(getData(node).nodeName,nodeName,key)),node||(node="#text"===nodeName?createText(doc):createElement(doc,currentParent,nodeName,key,statics),key&&registerChild(currentParent,key,node),context.markCreated(node)),currentNode&&getData(currentNode).key?(currentParent.replaceChild(node,currentNode),getData(currentParent).keyMapValid=!1):currentParent.insertBefore(node,currentNode),currentNode=node}},clearUnvisitedDOM=function(){var key,node=currentParent,data=getData(node),keyMap=data.keyMap,keyMapValid=data.keyMapValid,child=node.lastChild;if(!(child===previousNode&&keyMapValid||data.attrs[exports.symbols.placeholder]&&node!==root)){for(;child!==previousNode;)node.removeChild(child),context.markDeleted(child),key=getData(child).key,key&&delete keyMap[key],child=node.lastChild;if(!keyMapValid){for(key in keyMap)child=keyMap[key],child.parentNode!==node&&(context.markDeleted(child),delete keyMap[key]);data.keyMapValid=!0}}},enterNode=function(){currentParent=currentNode,currentNode=currentNode.firstChild,previousNode=null},nextNode=function(){previousNode=currentNode,currentNode=currentNode.nextSibling},exitNode=function(){clearUnvisitedDOM(),previousNode=currentParent,currentNode=currentParent.nextSibling,currentParent=currentParent.parentNode},_elementOpen=function(tag,key,statics){return alignWithDOM(tag,key,statics),enterNode(),currentParent},_elementClose=function(){return"production"!==process.env.NODE_ENV&&setInSkip(!1),exitNode(),previousNode},_text=function(){return alignWithDOM("#text",null,null),nextNode(),previousNode};exports.currentElement=function(){return"production"!==process.env.NODE_ENV&&(assertInPatch(context),assertNotInAttributes("currentElement")),currentParent},exports.skip=function(){"production"!==process.env.NODE_ENV&&(assertNoChildrenDeclaredYet("skip",previousNode),setInSkip(!0)),previousNode=currentParent.lastChild};var ATTRIBUTES_OFFSET=3,argsBuilder=[];exports.elementOpen=function(tag,key,statics){"production"!==process.env.NODE_ENV&&(assertNotInAttributes("elementOpen"),assertNotInSkip("elementOpen"));for(var node=_elementOpen(tag,key,statics),data=getData(node),attrsArr=data.attrsArr,newAttrs=data.newAttrs,attrsChanged=!1,i=ATTRIBUTES_OFFSET,j=0;i<arguments.length;i+=1,j+=1)if(attrsArr[j]!==arguments[i]){attrsChanged=!0;break}for(;i<arguments.length;i+=1,j+=1)attrsArr[j]=arguments[i];if(j<attrsArr.length&&(attrsChanged=!0,attrsArr.length=j),attrsChanged){for(i=ATTRIBUTES_OFFSET;i<arguments.length;i+=2)newAttrs[arguments[i]]=arguments[i+1];for(var attr in newAttrs)updateAttribute(node,attr,newAttrs[attr]),newAttrs[attr]=void 0}return node},exports.elementOpenStart=function(tag,key,statics){"production"!==process.env.NODE_ENV&&(assertNotInAttributes("elementOpenStart"),setInAttributes(!0)),argsBuilder[0]=tag,argsBuilder[1]=key,argsBuilder[2]=statics},exports.attr=function(name,value){"production"!==process.env.NODE_ENV&&assertInAttributes("attr"),argsBuilder.push(name,value)},exports.elementOpenEnd=function(){"production"!==process.env.NODE_ENV&&(assertInAttributes("elementOpenEnd"),setInAttributes(!1));var node=exports.elementOpen.apply(null,argsBuilder);return argsBuilder.length=0,node},exports.elementClose=function(tag){"production"!==process.env.NODE_ENV&&assertNotInAttributes("elementClose");var node=_elementClose();return"production"!==process.env.NODE_ENV&&assertCloseMatchesOpenTag(getData(node).nodeName,tag),node},exports.elementVoid=function(){var node=exports.elementOpen.apply(null,arguments);return exports.elementClose.apply(null,arguments),node},exports.elementPlaceholder=function(tag,key){return"production"!==process.env.NODE_ENV&&assertPlaceholderKeySpecified(key),exports.elementOpen.apply(null,arguments),exports.skip(),exports.elementClose.apply(null,arguments)},exports.text=function(value){"production"!==process.env.NODE_ENV&&(assertNotInAttributes("text"),assertNotInSkip("text"));var node=_text(),data=getData(node);if(data.text!==value){data.text=value;for(var formatted=value,i=1;i<arguments.length;i+=1)formatted=arguments[i](formatted);node.data=formatted}return node}}).call(this,require("_process"))},{_process:1}],4:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function createDefaultCallbacks(callbacks){return Object.assign({},createObjDescriptor(DefaultCallbacks),createObjDescriptor(callbacks))}function createObjDescriptor(obj){var objDescriptor={};return Object.keys(obj).forEach(function(prop){objDescriptor[prop]={value:obj[prop]}}),objDescriptor}function SetListeners(){var events=arguments.length<=0||void 0===arguments[0]?[]:arguments[0];return{attachedCallback:function(){try{console.log("Element attach",this),this.onMount(),events.forEach(function(event){this.addEventListener(event.type,function(e){e.target&&e.target.matches(event.selector)&&event.callback.bind(this)(e)}.bind(this))}.bind(this))}catch(e){console.log(e)}}}}function Builder(tagName,options){var optionsDescriptor=Object.assign({},createDefaultCallbacks(options),createObjDescriptor(SetListeners(options.events)));optionsDescriptor.state=Object.assign({},optionsDescriptor.state,{enumerable:!0,writable:!0});var TagPrototype=Object.create(HTMLElement.prototype,optionsDescriptor);try{var tagNameElement=document.registerElement(tagName,{prototype:TagPrototype});return new tagNameElement}catch(e){return console.log(e),document.createElement(tagName)}}Object.defineProperty(exports,"__esModule",{value:!0});var _shadowdomShim=require("./shadowdom-shim"),_shadowdomShim2=_interopRequireDefault(_shadowdomShim),DefaultCallbacks={detachedCallback:function(){this.onUnMount(),console.log("Was detached")},attributeChangedCallback:function(){console.log("Change attibute")},onMount:function(){},onUnMount:function(){},createdCallback:function(){"function"==typeof this.createShadowRoot?(this.shadow=this.createShadowRoot(),this.shadow.innerHTML=this.template):_shadowdomShim2["default"].writeStyle(this.template,this.nodeName)}};exports["default"]=Builder},{"./shadowdom-shim":8}],5:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function validateRequiredFields(options){if(!options.hasOwnProperty("template"))throw _exceptions2["default"].WITHOUT_TEMPLATE;if(!options.hasOwnProperty("view"))throw _exceptions2["default"].WITHOUT_VIEW;if(!options.hasOwnProperty("elementName"))throw _exceptions2["default"].WITHOUT_TAGNAME;if("string"!=typeof options.view&&"function"!=typeof options.view)throw _exceptions2["default"].VIEW_MUST_BE_STRING_OR_FUNTION}function renderFactory(view){return{render:function(reRender){reRender?_incrementalDom.patch(this,function(scope){renderElement(view,scope)},this):renderElement(view,this)}}}function renderElement(view,scope){var result=view.bind(scope)();"function"==typeof result&&result.bind(scope)()}function setStateFactory(){return{setState:function(newState){var force=arguments.length<=1||void 0===arguments[1]?!1:arguments[1];return this.state=Object.assign({},this.state,newState),this.render(force),this.state}}}function TagFactory(){var options=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];validateRequiredFields(options);var CloneOptions=Object.assign({},{name:options.elementName});return delete Object.elementName,Object.assign(options,renderFactory(options.view),setStateFactory()),_builder2["default"](CloneOptions.name,options)}Object.defineProperty(exports,"__esModule",{value:!0});var _builder=require("./builder"),_builder2=_interopRequireDefault(_builder),_exceptions=require("./exceptions"),_exceptions2=_interopRequireDefault(_exceptions),_incrementalDom=require("incremental-dom");Array.isArray||(Array.isArray=function(arg){return"[object Array]"===Object.prototype.toString.call(arg)}),exports["default"]=TagFactory},{"./builder":4,"./exceptions":6,"incremental-dom":3}],6:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var ComponentExceptions={WITHOUT_TEMPLATE:{message:"The new component need a Template",name:"ComponentWithOutTemplate"},WITHOUT_VIEW:{message:"The new component must have a view rendering",name:"ComponentWithOutView"},WITHOUT_TAGNAME:{message:"You can't create a component without the tagName, you must pass that to ComponentFactory",name:"ComponentWithPutTagName"},VIEW_MUST_BE_STRING_OR_FUNTION:{message:"The attribute view must be a string or a funtion.",name:"ComponentViewMustBeAStringOrFunction"}};exports["default"]=ComponentExceptions},{}],7:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function createElement(tagName){var key=arguments.length<=1||void 0===arguments[1]?null:arguments[1],state=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],options=arguments.length<=3||void 0===arguments[3]?{}:arguments[3],child=arguments[4];_incrementalDom.elementOpenStart(tagName,key),Object.keys(options).forEach(function(option){_incrementalDom.attr(option,options[option])});var element=_incrementalDom.elementOpenEnd(tagName);return"undefined"!=typeof element.setState?element.setState(Object.assign({},state,{child:child})):renderChild(child),_incrementalDom.elementClose(tagName),element}function renderChild(child){return"undefined"!=typeof child?"string"==typeof child?_incrementalDom.text(child.trim()):"function"==typeof child?child():Array.isArray(child)?void child.forEach(renderChild):child:void 0}function ComponentFactory(){var object=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];object=Object.assign({},DefaultComponentObject,object);var tag=_create2["default"](object);return tag}function renderDOM(component,tag){var state=arguments.length<=2||void 0===arguments[2]?{}:arguments[2];return _incrementalDom.patch(tag,function(data){Shaco.createElement(component,null,data)},state)}Object.defineProperty(exports,"__esModule",{value:!0}),require("document-register-element");var _incrementalDom=require("incremental-dom"),_create=require("./create"),_create2=_interopRequireDefault(_create),DefaultComponentObject={state:{}},Shaco={ComponentFactory:ComponentFactory,createElement:createElement,renderDOM:renderDOM,patch:_incrementalDom.patch};exports["default"]=Shaco},{"./create":5,"document-register-element":2,"incremental-dom":3}],8:[function(require,module,exports){"use strict";function extractStyle(template,tagName){tagName=tagName.toLowerCase();var newTemplate=template.replace(/\:\:content/gm,tagName).replace(/\:host\((.*)\)/gm,tagName+".$1").replace(/\:host/gm,tagName);return extractTagContent(newTemplate,"style")}function extractTagContent(template,tag){var dummy=document.createElement("div");return dummy.innerHTML=template,dummy.querySelector(tag)}function writeStyle(){var template=arguments.length<=0||void 0===arguments[0]?"":arguments[0],tagName=arguments.length<=1||void 0===arguments[1]?"":arguments[1],styleElement=extractStyle(template,tagName);return document.head.appendChild(styleElement),styleElement}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]={writeStyle:writeStyle}},{}]},{},[7])(7)});

dist/shaco.js

@@ -95,2 +95,5 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Shaco = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 },{}],2:[function(require,module,exports){
+/*! (C) WebReflection Mit Style License */
+(function(e,t,n,r){"use strict";function rt(e,t){for(var n=0,r=e.length;n<r;n++)vt(e[n],t)}function it(e){for(var t=0,n=e.length,r;t<n;t++)r=e[t],nt(r,b[ot(r)])}function st(e){return function(t){j(t)&&(vt(t,e),rt(t.querySelectorAll(w),e))}}function ot(e){var t=e.getAttribute("is"),n=e.nodeName.toUpperCase(),r=S.call(y,t?v+t.toUpperCase():d+n);return t&&-1<r&&!ut(n,t)?-1:r}function ut(e,t){return-1<w.indexOf(e+'[is="'+t+'"]')}function at(e){var t=e.currentTarget,n=e.attrChange,r=e.attrName,i=e.target;Q&&(!i||i===t)&&t.attributeChangedCallback&&r!=="style"&&e.prevValue!==e.newValue&&t.attributeChangedCallback(r,n===e[a]?null:e.prevValue,n===e[l]?null:e.newValue)}function ft(e){var t=st(e);return function(e){X.push(t,e.target)}}function lt(e){K&&(K=!1,e.currentTarget.removeEventListener(h,lt)),rt((e.target||t).querySelectorAll(w),e.detail===o?o:s),B&&pt()}function ct(e,t){var n=this;q.call(n,e,t),G.call(n,{target:n})}function ht(e,t){D(e,t),et?et.observe(e,z):(J&&(e.setAttribute=ct,e[i]=Z(e),e.addEventListener(p,G)),e.addEventListener(c,at)),e.createdCallback&&Q&&(e.created=!0,e.createdCallback(),e.created=!1)}function pt(){for(var e,t=0,n=F.length;t<n;t++)e=F[t],E.contains(e)||(n--,F.splice(t--,1),vt(e,o))}function dt(e){throw new Error("A "+e+" type is already registered")}function vt(e,t){var n,r=ot(e);-1<r&&(tt(e,b[r]),r=0,t===s&&!e[s]?(e[o]=!1,e[s]=!0,r=1,B&&S.call(F,e)<0&&F.push(e)):t===o&&!e[o]&&(e[s]=!1,e[o]=!0,r=1),r&&(n=e[t+"Callback"])&&n.call(e))}if(r in t)return;var i="__"+r+(Math.random()*1e5>>0),s="attached",o="detached",u="extends",a="ADDITION",f="MODIFICATION",l="REMOVAL",c="DOMAttrModified",h="DOMContentLoaded",p="DOMSubtreeModified",d="<",v="=",m=/^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,g=["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"],y=[],b=[],w="",E=t.documentElement,S=y.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},x=n.prototype,T=x.hasOwnProperty,N=x.isPrototypeOf,C=n.defineProperty,k=n.getOwnPropertyDescriptor,L=n.getOwnPropertyNames,A=n.getPrototypeOf,O=n.setPrototypeOf,M=!!n.__proto__,_=n.create||function mt(e){return e?(mt.prototype=e,new mt):this},D=O||(M?function(e,t){return e.__proto__=t,e}:L&&k?function(){function e(e,t){for(var n,r=L(t),i=0,s=r.length;i<s;i++)n=r[i],T.call(e,n)||C(e,n,k(t,n))}return function(t,n){do e(t,n);while((n=A(n))&&!N.call(n,t));return t}}():function(e,t){for(var n in t)e[n]=t[n];return e}),P=e.MutationObserver||e.WebKitMutationObserver,H=(e.HTMLElement||e.Element||e.Node).prototype,B=!N.call(H,E),j=B?function(e){return e.nodeType===1}:function(e){return N.call(H,e)},F=B&&[],I=H.cloneNode,q=H.setAttribute,R=H.removeAttribute,U=t.createElement,z=P&&{attributes:!0,characterData:!0,attributeOldValue:!0},W=P||function(e){J=!1,E.removeEventListener(c,W)},X,V=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,10)},$=!1,J=!0,K=!0,Q=!0,G,Y,Z,et,tt,nt;O||M?(tt=function(e,t){N.call(t,e)||ht(e,t)},nt=ht):(tt=function(e,t){e[i]||(e[i]=n(!0),ht(e,t))},nt=tt),B?(J=!1,function(){var e=k(H,"addEventListener"),t=e.value,n=function(e){var t=new CustomEvent(c,{bubbles:!0});t.attrName=e,t.prevValue=this.getAttribute(e),t.newValue=null,t[l]=t.attrChange=2,R.call(this,e),this.dispatchEvent(t)},r=function(e,t){var n=this.hasAttribute(e),r=n&&this.getAttribute(e),i=new CustomEvent(c,{bubbles:!0});q.call(this,e,t),i.attrName=e,i.prevValue=n?r:null,i.newValue=t,n?i[f]=i.attrChange=1:i[a]=i.attrChange=0,this.dispatchEvent(i)},s=function(e){var t=e.currentTarget,n=t[i],r=e.propertyName,s;n.hasOwnProperty(r)&&(n=n[r],s=new CustomEvent(c,{bubbles:!0}),s.attrName=n.name,s.prevValue=n.value||null,s.newValue=n.value=t[r]||null,s.prevValue==null?s[a]=s.attrChange=0:s[f]=s.attrChange=1,t.dispatchEvent(s))};e.value=function(e,o,u){e===c&&this.attributeChangedCallback&&this.setAttribute!==r&&(this[i]={className:{name:"class",value:this.className}},this.setAttribute=r,this.removeAttribute=n,t.call(this,"propertychange",s)),t.call(this,e,o,u)},C(H,"addEventListener",e)}()):P||(E.addEventListener(c,W),E.setAttribute(i,1),E.removeAttribute(i),J&&(G=function(e){var t=this,n,r,s;if(t===e.target){n=t[i],t[i]=r=Z(t);for(s in r){if(!(s in n))return Y(0,t,s,n[s],r[s],a);if(r[s]!==n[s])return Y(1,t,s,n[s],r[s],f)}for(s in n)if(!(s in r))return Y(2,t,s,n[s],r[s],l)}},Y=function(e,t,n,r,i,s){var o={attrChange:e,currentTarget:t,attrName:n,prevValue:r,newValue:i};o[s]=e,at(o)},Z=function(e){for(var t,n,r={},i=e.attributes,s=0,o=i.length;s<o;s++)t=i[s],n=t.name,n!=="setAttribute"&&(r[n]=t.value);return r})),t[r]=function(n,r){c=n.toUpperCase(),$||($=!0,P?(et=function(e,t){function n(e,t){for(var n=0,r=e.length;n<r;t(e[n++]));}return new P(function(r){for(var i,s,o,u=0,a=r.length;u<a;u++)i=r[u],i.type==="childList"?(n(i.addedNodes,e),n(i.removedNodes,t)):(s=i.target,Q&&s.attributeChangedCallback&&i.attributeName!=="style"&&(o=s.getAttribute(i.attributeName),o!==i.oldValue&&s.attributeChangedCallback(i.attributeName,i.oldValue,o)))})}(st(s),st(o)),et.observe(t,{childList:!0,subtree:!0})):(X=[],V(function E(){while(X.length)X.shift().call(null,X.shift());V(E)}),t.addEventListener("DOMNodeInserted",ft(s)),t.addEventListener("DOMNodeRemoved",ft(o))),t.addEventListener(h,lt),t.addEventListener("readystatechange",lt),t.createElement=function(e,n){var r=U.apply(t,arguments),i=""+e,s=S.call(y,(n?v:d)+(n||i).toUpperCase()),o=-1<s;return n&&(r.setAttribute("is",n=n.toLowerCase()),o&&(o=ut(i.toUpperCase(),n))),Q=!t.createElement.innerHTMLHelper,o&&nt(r,b[s]),r},H.cloneNode=function(e){var t=I.call(this,!!e),n=ot(t);return-1<n&&nt(t,b[n]),e&&it(t.querySelectorAll(w)),t}),-2<S.call(y,v+c)+S.call(y,d+c)&&dt(n);if(!m.test(c)||-1<S.call(g,c))throw new Error("The type "+n+" is invalid");var i=function(){return f?t.createElement(l,c):t.createElement(l)},a=r||x,f=T.call(a,u),l=f?r[u].toUpperCase():c,c,p;return f&&-1<S.call(y,d+l)&&dt(l),p=y.push((f?v:d)+c)-1,w=w.concat(w.length?",":"",f?l+'[is="'+n.toLowerCase()+'"]':l),i.prototype=b[p]=T.call(a,"prototype")?a.prototype:_(H),rt(t.querySelectorAll(w),s),i}})(window,document,Object,"registerElement");
+},{}],3:[function(require,module,exports){
 (function (process){
@@ -1273,3 +1276,3 @@
 }).call(this,require('_process'))
-},{"_process":1}],3:[function(require,module,exports){
+},{"_process":1}],4:[function(require,module,exports){
 'use strict';
@@ -1280,2 +1283,11 @@
 });
+
+var _shadowdomShim = require('./shadowdom-shim');
+
+var _shadowdomShim2 = _interopRequireDefault(_shadowdomShim);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
 var DefaultCallbacks = {
@@ -1290,14 +1302,25 @@ detachedCallback: function detachedCallback() {
   onMount: function onMount() {},
-  onUnMount: function onUnMount() {}
+  onUnMount: function onUnMount() {},
+  createdCallback: function createdCallback() {
+    if (typeof this.createShadowRoot === 'function') {
+      this.shadow = this.createShadowRoot();
+      this.shadow.innerHTML = this.template;
+    } else {
+      _shadowdomShim2.default.writeStyle(this.template, this.nodeName);
+    }
+  }
 };
 
 function createDefaultCallbacks(callbacks) {
-  return Object.assign(DefaultCallbacks, {
-    createdCallback: function createdCallback() {
-      this.shadow = this.createShadowRoot();
-      this.shadow.innerHTML = this.template;
-    }
-  }, callbacks);
+  return Object.assign({}, createObjDescriptor(DefaultCallbacks), createObjDescriptor(callbacks));
 }
 
+function createObjDescriptor(obj) {
+  var objDescriptor = {};
+  Object.keys(obj).forEach(function (prop) {
+    objDescriptor[prop] = { value: obj[prop] };
+  });
+  return objDescriptor;
+}
+
 function SetListeners() {
@@ -1308,11 +1331,15 @@ var events = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
     attachedCallback: function attachedCallback() {
-      console.log('Element attach', this);
-      this.onMount();
-      events.forEach(function (event) {
-        this.addEventListener(event.type, function (e) {
-          if (e.target && e.target.matches(event.selector)) {
-            event.callback.bind(this)(e);
-          }
+      try {
+        console.log('Element attach', this);
+        this.onMount();
+        events.forEach(function (event) {
+          this.addEventListener(event.type, function (e) {
+            if (e.target && e.target.matches(event.selector)) {
+              event.callback.bind(this)(e);
+            }
+          }.bind(this));
         }.bind(this));
-      }.bind(this));
+      } catch (e) {
+        console.log(e);
+      }
     }
@@ -1323,4 +1350,8 @@ };
 function Builder(tagName, options) {
-  var TagPrototype = Object.create(HTMLElement.prototype);
-  Object.assign(TagPrototype, createDefaultCallbacks(options), SetListeners(options.events));
+  var optionsDescriptor = Object.assign({}, createDefaultCallbacks(options), createObjDescriptor(SetListeners(options.events)));
+  optionsDescriptor.state = Object.assign({}, optionsDescriptor.state, {
+    enumerable: true,
+    writable: true
+  });
+  var TagPrototype = Object.create(HTMLElement.prototype, optionsDescriptor);
   try {
@@ -1339,3 +1370,3 @@ var tagNameElement = document.registerElement(tagName, {
 
-},{}],4:[function(require,module,exports){
+},{"./shadowdom-shim":8}],5:[function(require,module,exports){
 'use strict';
@@ -1428,3 +1459,3 @@
 
-},{"./builder":3,"./exceptions":5,"incremental-dom":2}],5:[function(require,module,exports){
+},{"./builder":4,"./exceptions":6,"incremental-dom":3}],6:[function(require,module,exports){
 'use strict';
@@ -1456,3 +1487,3 @@
 
-},{}],6:[function(require,module,exports){
+},{}],7:[function(require,module,exports){
 'use strict';
@@ -1464,2 +1495,4 @@
 
+require('document-register-element');
+
 var _incrementalDom = require('incremental-dom');
@@ -1526,3 +1559,3 @@
 
-  (0, _incrementalDom.patch)(tag, function (data) {
+  return (0, _incrementalDom.patch)(tag, function (data) {
     Shaco.createElement(component, null, data);
@@ -1541,3 +1574,44 @@ }, state);
 
-},{"./create":4,"incremental-dom":2}]},{},[6])(6)
+},{"./create":5,"document-register-element":2,"incremental-dom":3}],8:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+function extractStyle(template, tagName) {
+  tagName = tagName.toLowerCase();
+  var newTemplate = template.replace(/\:\:content/mg, tagName).replace(/\:host\((.*)\)/mg, tagName + '.$1').replace(/\:host/mg, tagName);
+
+  return extractTagContent(newTemplate, 'style');
+}
+
+function extractTagContent(template, tag) {
+  var dummy = document.createElement('div');
+  dummy.innerHTML = template;
+  return dummy.querySelector(tag);
+}
+
+function removeStyle(template) {
+  return template.replace(styleRegex, '');
+}
+
+function extractContent(template) {
+  return extractTagContent(template, 'content');
+}
+
+function writeStyle() {
+  var template = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
+  var tagName = arguments.length <= 1 || arguments[1] === undefined ? '' : arguments[1];
+
+  var styleElement = extractStyle(template, tagName);
+  document.head.appendChild(styleElement);
+  return styleElement;
+}
+
+exports.default = {
+  writeStyle: writeStyle
+};
+
+},{}]},{},[7])(7)
 });

package.json

 {
   "name": "shadow-component",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "This is a test implementation of components with shadow dom and full template rendering of changes of state",
@@ -8,3 +8,3 @@ "main": "index.js",
     "build": "babel babel -d source",
-    "watch": "babel -w source -d source",
+    "watch": "babel -w babel -d source",
     "build-browser": "browserify source/index.js --standalone Shaco | uglifyjs -c > ./dist/shacho.min.js",
@@ -57,4 +57,5 @@ "watch-browser": "watchify source/index.js -o ./dist/shaco.js --standalone Shaco -v",
   "dependencies": {
+    "document-register-element": "^0.5.4",
     "incremental-dom": "^0.3.0"
   }
 }

source/builder.js

@@ -6,2 +6,9 @@ 'use strict';
 });
+
+var _shadowdomShim = require('./shadowdom-shim');
+
+var _shadowdomShim2 = _interopRequireDefault(_shadowdomShim);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var DefaultCallbacks = {
@@ -16,14 +23,25 @@ detachedCallback: function detachedCallback() {
   onMount: function onMount() {},
-  onUnMount: function onUnMount() {}
+  onUnMount: function onUnMount() {},
+  createdCallback: function createdCallback() {
+    if (typeof this.createShadowRoot === 'function') {
+      this.shadow = this.createShadowRoot();
+      this.shadow.innerHTML = this.template;
+    } else {
+      _shadowdomShim2.default.writeStyle(this.template, this.nodeName);
+    }
+  }
 };
 
 function createDefaultCallbacks(callbacks) {
-  return Object.assign(DefaultCallbacks, {
-    createdCallback: function createdCallback() {
-      this.shadow = this.createShadowRoot();
-      this.shadow.innerHTML = this.template;
-    }
-  }, callbacks);
+  return Object.assign({}, createObjDescriptor(DefaultCallbacks), createObjDescriptor(callbacks));
 }
 
+function createObjDescriptor(obj) {
+  var objDescriptor = {};
+  Object.keys(obj).forEach(function (prop) {
+    objDescriptor[prop] = { value: obj[prop] };
+  });
+  return objDescriptor;
+}
+
 function SetListeners() {
@@ -34,11 +52,15 @@ var events = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
     attachedCallback: function attachedCallback() {
-      console.log('Element attach', this);
-      this.onMount();
-      events.forEach(function (event) {
-        this.addEventListener(event.type, function (e) {
-          if (e.target && e.target.matches(event.selector)) {
-            event.callback.bind(this)(e);
-          }
+      try {
+        console.log('Element attach', this);
+        this.onMount();
+        events.forEach(function (event) {
+          this.addEventListener(event.type, function (e) {
+            if (e.target && e.target.matches(event.selector)) {
+              event.callback.bind(this)(e);
+            }
+          }.bind(this));
         }.bind(this));
-      }.bind(this));
+      } catch (e) {
+        console.log(e);
+      }
     }
@@ -49,4 +71,8 @@ };
 function Builder(tagName, options) {
-  var TagPrototype = Object.create(HTMLElement.prototype);
-  Object.assign(TagPrototype, createDefaultCallbacks(options), SetListeners(options.events));
+  var optionsDescriptor = Object.assign({}, createDefaultCallbacks(options), createObjDescriptor(SetListeners(options.events)));
+  optionsDescriptor.state = Object.assign({}, optionsDescriptor.state, {
+    enumerable: true,
+    writable: true
+  });
+  var TagPrototype = Object.create(HTMLElement.prototype, optionsDescriptor);
   try {
@@ -53,0 +79,0 @@ var tagNameElement = document.registerElement(tagName, {

source/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+require('document-register-element');
+
 var _incrementalDom = require('incremental-dom');
@@ -67,3 +69,3 @@
 
-  (0, _incrementalDom.patch)(tag, function (data) {
+  return (0, _incrementalDom.patch)(tag, function (data) {
     Shaco.createElement(component, null, data);
@@ -70,0 +72,0 @@ }, state);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95599

increased by25.7%

Number of package files

16

increased by14.29%

Lines of code

1892

increased by10.64%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addeddocument-register-element@^0.5.4

• + Addeddocument-register-element@0.5.4(transitive)