From e79bda9c55de6be8a57073252b3cccc87da72b6d Mon Sep 17 00:00:00 2001 From: Ioannis Charalampidis Date: Wed, 15 Feb 2017 13:31:41 +0100 Subject: [PATCH 1/8] Only updating properties that have changed --- dotdom.min.js | 2 +- dotdom.min.js.gz | Bin 510 -> 516 bytes src/dotdom.js | 3 ++- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/dotdom.min.js b/dotdom.min.js index 5354790..1f7da52 100644 --- a/dotdom.min.js +++ b/dotdom.min.js @@ -1,2 +1,2 @@ -((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]&&k.unshift(j)&&{C:k}||(j.C=k)&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v,w,x,y=n.P[v])=>'style'==v?c.assign(u[v],y):'C'!=v&&(u[v]=y))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); +((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]&&k.unshift(j)&&{C:k}||(j.C=k)&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v,w,x,y=n.P[v])=>'style'==v?c.assign(u[v],y):'C'!=v&&u[v]!==n.P[v]&&(u[v]=n.P[v]))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); diff --git a/dotdom.min.js.gz b/dotdom.min.js.gz index 2edc9e72379df691419d50c8153cddfaec2dd2d0..5c1004ff47e864919d0745333848424c94e39db6 100644 GIT binary patch literal 516 zcmV+f0{i_RiwFShvZPo715Hv*Z=)~}z4uo%7qG?1YOYih4iVCxy3uxThywvb_%Z|x z2_pRW9TVE_1@WH8Z{9o)V-cJoh6E&}kimuHVgA%zt}@Yfjc)YR${-1G4=J)73Y-@Z zLX=d;W;$^9;JZ1T+=75*m10o+B~LXgxMj^pw_F|%R)`~(go}kkB>rHwNUAOOtB|H{*wC=i3c6xP}4UmRh8D_{6KMH#+xW4&(1&AH+D0vF8j zpyciK)HU~sBAYX*T}Ht{MP4q9(E`P}eBGa4 z_#>Wf;`A=7bSlodN@%GIQ@n6?BiP&^Y2v{=1^hl2GS=`p)#s*S9A=v3<>eplD~W&y G0{{T4-uX@d literal 510 zcmVdf~kJW_C|$P zW*Iv4vZn{;>xs49VIUQw_RX;~wtDTla8V$V=xu;rLdjKaP$YQyc7-cAS zrIh{(`E)wWV!M$R& zD#Wcq Date: Wed, 15 Feb 2017 21:01:49 +0100 Subject: [PATCH 2/8] Clean-ups to achieve 512 bytes --- dotdom.min.js | 2 +- dotdom.min.js.gz | Bin 516 -> 512 bytes src/dotdom.js | 10 ++-------- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/dotdom.min.js b/dotdom.min.js index 1f7da52..b4e6e67 100644 --- a/dotdom.min.js +++ b/dotdom.min.js @@ -1,2 +1,2 @@ -((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]&&k.unshift(j)&&{C:k}||(j.C=k)&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v,w,x,y=n.P[v])=>'style'==v?c.assign(u[v],y):'C'!=v&&u[v]!==n.P[v]&&(u[v]=n.P[v]))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); +((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]&&k.unshift(j)&&{C:k}||(j.C=k)&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v)=>'style'==v?c.assign(u[v],n.P[v]):'C'!=v&&u[v]!==n.P[v]&&(u[v]=n.P[v]))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); diff --git a/dotdom.min.js.gz b/dotdom.min.js.gz index 5c1004ff47e864919d0745333848424c94e39db6..cb0f2285c1f2857dd12fd5043e5587b5fbb6cd71 100644 GIT binary patch literal 512 zcmV+b0{{IViwFRnv!qx815Hv*kDD+Mz3;EsT)-A1Yjb5a;SeG9w2ivGAr1r#0gNGF z$VP1R= zKHA5K#00(neP>WbjpxNM+73iH4t+$LDCIaz+i<4E35Mt`h6xX;NQR*-GJ6u~EktHS}5LBX46idxc0ssJ! CLi_&! literal 516 zcmV+f0{i_RiwFShvZPo715Hv*Z=)~}z4uo%7qG?1YOYih4iVCxy3uxThywvb_%Z|x z2_pRW9TVE_1@WH8Z{9o)V-cJoh6E&}kimuHVgA%zt}@Yfjc)YR${-1G4=J)73Y-@Z zLX=d;W;$^9;JZ1T+=75*m10o+B~LXgxMj^pw_F|%R)`~(go}kkB>rHwNUAOOtB|H{*wC=i3c6xP}4UmRh8D_{6KMH#+xW4&(1&AH+D0vF8j zpyciK)HU~sBAYX*T}Ht{MP4q9(E`P}eBGa4 z_#>Wf;`A=7bSlodN@%GIQ@n6?BiP&^Y2v{=1^hl2GS=`p)#s*S9A=v3<>eplD~W&y G0{{T4-uX@d diff --git a/src/dotdom.js b/src/dotdom.js index 4543128..07a34de 100644 --- a/src/dotdom.js +++ b/src/dotdom.js @@ -140,20 +140,14 @@ ? _new_dom.data = vnode // - String nodes update only the text : Object.keys(vnode.P).map( // - Element nodes have properties ( - key, // 1. The property name - - _unused2, // 2. Index is unused - _unused3, // 3. Array is unused - - _value=vnode.P[key] // a. We cache the property value - + key // 1. The property name ) => key == 'style' ? // The 'style' property is an object and must be // applied recursively. Object.assign( _new_dom[key], // '[key]' is shorter than '.style' - _value + vnode.P[key] ) : (key != 'C' && // 'C' is the children, so we skip it From 503496726d9e396a984ea22862df41a75aff5d6b Mon Sep 17 00:00:00 2001 From: Ioannis Charalampidis Date: Wed, 15 Feb 2017 22:53:45 +0100 Subject: [PATCH 3/8] Add support for children arrays in H arguments --- dotdom.min.js | 2 +- dotdom.min.js.gz | Bin 512 -> 512 bytes src/__tests__/dotdom-test.js | 31 +++++++++++++++++++++++++++++++ src/dotdom.js | 6 ++++-- 4 files changed, 36 insertions(+), 3 deletions(-) diff --git a/dotdom.min.js b/dotdom.min.js index b4e6e67..ede0407 100644 --- a/dotdom.min.js +++ b/dotdom.min.js @@ -1,2 +1,2 @@ -((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]&&k.unshift(j)&&{C:k}||(j.C=k)&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v)=>'style'==v?c.assign(u[v],n.P[v]):'C'!=v&&u[v]!==n.P[v]&&(u[v]=n.P[v]))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); +((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]?{C:[].concat(j,...k)}:(j.C=[].concat(...k))&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v)=>'style'==v?c.assign(u[v],n.P[v]):'C'!=v&&u[v]!==n.P[v]&&(u[v]=n.P[v]))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); diff --git a/dotdom.min.js.gz b/dotdom.min.js.gz index cb0f2285c1f2857dd12fd5043e5587b5fbb6cd71..e2d2b41a52d5dd4a858953b16eedfe0bffe296b2 100644 GIT binary patch literal 512 zcmV+b0{{IViwFST&7@cY15HxFZlf>|z4t4c3)o_0HCI;?4iVCxy3uxThywwKK)@zo zNF&O>@0hS{FW~n)^XAQX7)#*@8RVeg1O=Qq?xuI!mAVjZXRNXJR>gUOTR0&rp~7hf zA;g8^*hCj{3z010AS(jlw3l%rGNZH9vg#2yOIC?Je)9{2KQZ#8BmNG6A?v9LUFwnvkFM%)oz(9v8z9yfaF?rM?N}yi| z?BZ>LNKDwtuRDu%+yp@agR4N4=g~)GX1R= zKHA5K#00(neP>WbjpxNM+73iH4t+$LDCIaz+i<4E35Mt`h6xX;NQR*-GJ6u~EktHS}5LBX46idxc0ssJ! CLi_&! diff --git a/src/__tests__/dotdom-test.js b/src/__tests__/dotdom-test.js index cc84684..a10ad42 100644 --- a/src/__tests__/dotdom-test.js +++ b/src/__tests__/dotdom-test.js @@ -29,6 +29,19 @@ describe('.dom', function () { }); }); + it('should create vnode with props and children as array', function () { + const cdom1 = dd.H('div'); + const cdom2 = dd.H('div'); + const cdom3 = dd.H('div'); + const vdom = dd.H('div', {foo: 'bar'}, cdom1, [cdom2, cdom3]); + + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + foo: 'bar', + C: [ cdom1, cdom2, cdom3 ] + }); + }); + it('should create vnode with props and mixed children', function () { const cdom = dd.H('div'); const vdom = dd.H('div', {foo: 'bar'}, 'foo', cdom); @@ -59,6 +72,24 @@ describe('.dom', function () { }); }); + it('should create vnode with children', function () { + const vdom = dd.H('div', 'foo', 'bar', 'baz'); + + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ 'foo', 'bar', 'baz' ] + }); + }); + + it('should create vnode with children in arrays', function () { + const vdom = dd.H('div', 'foo', ['bar', 'baz']); + + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ 'foo', 'bar', 'baz' ] + }); + }); + it('should create vnode with only mixed children', function () { const cdom = dd.H('div'); const vdom = dd.H('div', cdom, 'foo'); diff --git a/src/dotdom.js b/src/dotdom.js index 07a34de..fa80254 100644 --- a/src/dotdom.js +++ b/src/dotdom.js @@ -41,8 +41,10 @@ // first argument P: props[vnodeFlag] // If the props argument is a renderable VNode, - && children.unshift(props) && {C: children} // ... prepend it to the children - || (props.C = children) && props // ... otherwise append 'C' to the property + ? {C: [].concat(props, ...children)} // ... prepend it to the children + : (props.C = [].concat(...children)) && props // ... otherwise append 'C' to the property + // the .concat ensures that arrays of children + // will be flattened into a single array. }) /** From fb5e9bddc9545b939f75c96abe027b9eae2789de Mon Sep 17 00:00:00 2001 From: Ioannis Charalampidis Date: Thu, 16 Feb 2017 00:00:59 +0100 Subject: [PATCH 4/8] Ensuring H.apply and H.call are used correctly --- dotdom.min.js | 2 +- dotdom.min.js.gz | Bin 512 -> 511 bytes src/dotdom.js | 8 +++----- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/dotdom.min.js b/dotdom.min.js index ede0407..d607263 100644 --- a/dotdom.min.js +++ b/dotdom.min.js @@ -1,2 +1,2 @@ -((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]?{C:[].concat(j,...k)}:(j.C=[].concat(...k))&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v)=>'style'==v?c.assign(u[v],n.P[v]):'C'!=v&&u[v]!==n.P[v]&&(u[v]=n.P[v]))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); +((a,b,c,d,e,f,g,h)=>{String.prototype[d]=1,f=(i,j={},...k)=>({[d]:1,E:i,P:j[d]?{C:[].concat(j,...k)}:(j.C=[].concat(...k))&&j}),a.R=g=(i,j,k='',l=j.childNodes,m=0)=>{for((i.map?i:[i]).map((n,o,p,q=k+'.'+o,r=e[q]||[{},n.E],s=e[q]=r[1]==n.E?r:[{},n.E],t=l[m++],u)=>{n.E&&n.E.call&&(n=n.E(n.P,s[0],v=>c.assign(s[0],v)&&g(i,j,k))),u=n.trim?b.createTextNode(n):b.createElement(n.E),(u=t?t.E!=n.E&&t.data!=n?j.replaceChild(u,t)&&u:t:j.appendChild(u)).E=n.E,n.trim?u.data=n:c.keys(n.P).map((v)=>'style'==v?c.assign(u[v],n.P[v]):u[v]!==n.P[v]&&(u[v]=n.P[v]))&&g(n.P.C,u,q)});l[m];)j.removeChild(l[m])},h=i=>new Proxy(i,{get:(j,k,l)=>h((...m)=>((l=j(...m)).P.className=[l.P.className]+' '+k,l))}),a.H=new Proxy(f,{get:(i,j)=>i[j]||h(f.bind(a,j))})})(window,document,Object,Symbol(),{}); diff --git a/dotdom.min.js.gz b/dotdom.min.js.gz index e2d2b41a52d5dd4a858953b16eedfe0bffe296b2..ed9fc5d176747df100d1f9b8abd2649b91a25354 100644 GIT binary patch literal 511 zcmVL}KDze%(1VX%j^mj6MTVK|mjoD`SFyS^u0_v4A4J}3<@8_u;d}|qa`~T2jBd1bq?&MGBf8j$4f_r_Y3GJ)y{blIYJS2j3LnGB2lHiLe&M(HaTTXIkYJV8 zH2f1gibG`!TI||~%$&UwY~P`1^U)6gejjR`J9xV_ht@C-6IJx^@DD)kx-Sa@008&i B^uYiC literal 512 zcmV+b0{{IViwFST&7@cY15HxFZlf>|z4t4c3)o_0HCI;?4iVCxy3uxThywwKK)@zo zNF&O>@0hS{FW~n)^XAQX7)#*@8RVeg1O=Qq?xuI!mAVjZXRNXJR>gUOTR0&rp~7hf zA;g8^*hCj{3z010AS(jlw3l%rGNZH9vg#2yOIC?Je)9{2KQZ#8BmNG6A?v9LUFwnvkFM%)oz(9v8z9yfaF?rM?N}yi| z?BZ>LNKDwtuRDu%+yp@agR4N4=g~)GX - wrapClassProxy( + get: (targetFn, tagName) => + targetFn[tagName] || wrapClassProxy( createElement.bind(global, tagName) ) } From bc1ab2b4d5ba3a9e189feebfaa3e52164e487506 Mon Sep 17 00:00:00 2001 From: Ioannis Charalampidis Date: Thu, 16 Feb 2017 10:47:50 +0100 Subject: [PATCH 5/8] Adding tests for H.call, H.apply and H. --- dotdom.min.js.gz | Bin 511 -> 511 bytes src/__tests__/dotdom-test.js | 171 +++++++++++++++++++++-------------- 2 files changed, 105 insertions(+), 66 deletions(-) diff --git a/dotdom.min.js.gz b/dotdom.min.js.gz index ed9fc5d176747df100d1f9b8abd2649b91a25354..4b7a4bd7cc23974ebcfd0bbc114781f6fc062d40 100644 GIT binary patch delta 15 Wcmey*{GXXkzMF%=rgS6QPeuSMRs|mb delta 15 Wcmey*{GXXkzMF%=p=2Z5PeuSMX$2wx diff --git a/src/__tests__/dotdom-test.js b/src/__tests__/dotdom-test.js index a10ad42..c508942 100644 --- a/src/__tests__/dotdom-test.js +++ b/src/__tests__/dotdom-test.js @@ -4,100 +4,139 @@ const dd = window; describe('.dom', function () { describe('#H', function () { - it('should create vnode without arguments', function () { - const vdom = dd.H('div'); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({C: []}); - }); + describe('Factory', function () { - it('should create vnode with props', function () { - const vdom = dd.H('div', {foo: 'bar'}); + it('should create vnode without arguments', function () { + const vdom = dd.H('div'); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({foo: 'bar', C: []}); - }); + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({C: []}); + }); - it('should create vnode with props and children', function () { - const cdom = dd.H('div'); - const vdom = dd.H('div', {foo: 'bar'}, cdom); + it('should create vnode with props', function () { + const vdom = dd.H('div', {foo: 'bar'}); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - foo: 'bar', - C: [ cdom ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({foo: 'bar', C: []}); }); - }); - it('should create vnode with props and children as array', function () { - const cdom1 = dd.H('div'); - const cdom2 = dd.H('div'); - const cdom3 = dd.H('div'); - const vdom = dd.H('div', {foo: 'bar'}, cdom1, [cdom2, cdom3]); + it('should create vnode with props and children', function () { + const cdom = dd.H('div'); + const vdom = dd.H('div', {foo: 'bar'}, cdom); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - foo: 'bar', - C: [ cdom1, cdom2, cdom3 ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + foo: 'bar', + C: [ cdom ] + }); }); - }); - it('should create vnode with props and mixed children', function () { - const cdom = dd.H('div'); - const vdom = dd.H('div', {foo: 'bar'}, 'foo', cdom); + it('should create vnode with props and children as array', function () { + const cdom1 = dd.H('div'); + const cdom2 = dd.H('div'); + const cdom3 = dd.H('div'); + const vdom = dd.H('div', {foo: 'bar'}, cdom1, [cdom2, cdom3]); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - foo: 'bar', - C: [ 'foo', cdom ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + foo: 'bar', + C: [ cdom1, cdom2, cdom3 ] + }); }); - }); - it('should create vnode with props and string children', function () { - const vdom = dd.H('div', {foo: 'bar'}, 'foo'); + it('should create vnode with props and mixed children', function () { + const cdom = dd.H('div'); + const vdom = dd.H('div', {foo: 'bar'}, 'foo', cdom); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - foo: 'bar', - C: [ 'foo' ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + foo: 'bar', + C: [ 'foo', cdom ] + }); }); - }); - it('should create vnode with only child', function () { - const vdom = dd.H('div', 'foo'); + it('should create vnode with props and string children', function () { + const vdom = dd.H('div', {foo: 'bar'}, 'foo'); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - C: [ 'foo' ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + foo: 'bar', + C: [ 'foo' ] + }); }); - }); - it('should create vnode with children', function () { - const vdom = dd.H('div', 'foo', 'bar', 'baz'); + it('should create vnode with only child', function () { + const vdom = dd.H('div', 'foo'); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - C: [ 'foo', 'bar', 'baz' ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ 'foo' ] + }); + }); + + it('should create vnode with children', function () { + const vdom = dd.H('div', 'foo', 'bar', 'baz'); + + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ 'foo', 'bar', 'baz' ] + }); + }); + + it('should create vnode with children in arrays', function () { + const vdom = dd.H('div', 'foo', ['bar', 'baz']); + + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ 'foo', 'bar', 'baz' ] + }); }); - }); - it('should create vnode with children in arrays', function () { - const vdom = dd.H('div', 'foo', ['bar', 'baz']); + it('should create vnode with only mixed children', function () { + const cdom = dd.H('div'); + const vdom = dd.H('div', cdom, 'foo'); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - C: [ 'foo', 'bar', 'baz' ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ cdom, 'foo' ] + }); }); + }); - it('should create vnode with only mixed children', function () { - const cdom = dd.H('div'); - const vdom = dd.H('div', cdom, 'foo'); + describe('Proxy', function () { + + it('H.apply should be proxied', function () { + const cdom = dd.H('div'); + const vdom = dd.H.apply({}, ['div', cdom, 'foo']); - expect(vdom.E).toEqual('div'); - expect(vdom.P).toEqual({ - C: [ cdom, 'foo' ] + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ cdom, 'foo' ] + }); }); + + it('H.call should be proxied', function () { + const cdom = dd.H('div'); + const vdom = dd.H.call({}, 'div', cdom, 'foo'); + + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ cdom, 'foo' ] + }); + }); + + it('H.tag should be a shorthand', function () { + const cdom = dd.H('div'); + const vdom = dd.H.div(cdom, 'foo'); + + expect(vdom.E).toEqual('div'); + expect(vdom.P).toEqual({ + C: [ cdom, 'foo' ] + }); + }); + }); }); From a0c3b066b77302530c4e325a964c66fcc3f27b4b Mon Sep 17 00:00:00 2001 From: Ioannis Charalampidis Date: Sat, 18 Feb 2017 01:38:29 +0100 Subject: [PATCH 6/8] Properly shimming module when loading from npm --- dotdom.min.js.gz | Bin 511 -> 511 bytes package.json | 4 ++-- src/__tests__/dotdom-test.js | 11 +++++------ src/dotdom.js | 12 ++++++++++++ 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/dotdom.min.js.gz b/dotdom.min.js.gz index 4b7a4bd7cc23974ebcfd0bbc114781f6fc062d40..07345e118ca1f4662f6d9fe26ff3b4dfd2fcf57f 100644 GIT binary patch delta 16 Ycmey*{GXX!zMF&L`_$zd*?%ws05|alq5uE@ delta 16 Xcmey*{GXX!zMF%=rgZ5>_8*J@G71I7 diff --git a/package.json b/package.json index 30b3e60..f803619 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "dot-dom", "version": "0.2.1", "description": "A tiny (less than 512 byte) template engine that uses virtual DOM and some of react principles", - "main": "dotdom.min.js", + "main": "src/dotdom.js", "scripts": { "test": "./node_modules/.bin/jest", - "build": "./node_modules/.bin/babili src/dotdom.js | tee dotdom.min.js | gzip -9 > dotdom.min.js.gz" + "build": "cat src/dotdom.js | perl -0pe 's/BEGIN NPM-GLUE.*END NPM-GLUE//s' | ./node_modules/.bin/babili | tee dotdom.min.js | gzip -9 > dotdom.min.js.gz" }, "repository": { "type": "git", diff --git a/src/__tests__/dotdom-test.js b/src/__tests__/dotdom-test.js index c508942..244a37d 100644 --- a/src/__tests__/dotdom-test.js +++ b/src/__tests__/dotdom-test.js @@ -1,5 +1,4 @@ -require('../dotdom'); -const dd = window; +const dd = require('../dotdom'); describe('.dom', function () { @@ -362,8 +361,8 @@ describe('.dom', function () { } const HostComponent = function() { return dd.H('div', - H(Component), - H(Component) + dd.H(Component), + dd.H(Component) ) } const vdom = dd.H(HostComponent); @@ -449,8 +448,8 @@ describe('.dom', function () { }, `${clicks} clicks`) } const vdom = dd.H('div', - H(Component), - H(Component) + dd.H(Component), + dd.H(Component) ); dd.R(vdom, dom) diff --git a/src/dotdom.js b/src/dotdom.js index 01d2891..f965885 100644 --- a/src/dotdom.js +++ b/src/dotdom.js @@ -15,6 +15,18 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +/* BEGIN NPM-GLUE */ + +// This code block will be striped when building the stand-alone version. +// When using `npm` this exports the correct functions in order to be easily +// imported in the correct scope, without leaking to the global scope. + +const window = {}; +module.exports = window; + +/* END NPM-GLUE */ + ((global, document, Object, vnodeFlag, globalState, createElement, render, wrapClassProxy) => { /** From af411696af3450b7ae794956e1166430e55d21ce Mon Sep 17 00:00:00 2001 From: Ioannis Charalampidis Date: Sat, 18 Feb 2017 09:51:14 +0100 Subject: [PATCH 7/8] Updating README.md --- README.md | 37 ++++++++++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 4d25f6e..89b1ac7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # .dom [![Build Status](https://travis-ci.org/wavesoft/dot-dom.svg?branch=master)](https://travis-ci.org/wavesoft/dot-dom) [![Try it in codepen.io](https://img.shields.io/badge/Try%20it-codepen.io-blue.svg)](https://codepen.io/anon/pen/YNdNwv?editors=0010) -> A tiny (510 byte) virtual DOM template engine for embedded projects +> A tiny (511 byte) virtual DOM template engine for embedded projects | IE / Edge IE / Edge | Firefox Firefox | Chrome Chrome | Safari Safari | Opera Opera | iOS Safari iOS Safari | Chrome for Android Chrome for Android | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | @@ -12,7 +12,7 @@ Why? Because with such library you can create powerful GUIs in tight space envir ### Features -* _Tiny by design_ : The library should never exceed the 512 bytes in size. The goal is not to have yet another template engine, but to have as many features as possible in 512 bytes. If a new feature is needed, an other must be sacraficed or the scope must be reduced. +* _Tiny by design_ : The library should never exceed the 512 bytes in size. The goal is not to have yet another template engine, but to have as many features as possible in 512 bytes. If a new feature is needed, an other must be sacraficed or the scope must be reduced. * _Built for the future_ : The library is heavily exploiting the ES6 specifications, meaning that it's **not** supported by older borwsers. Currently it's supported by the 70% of the browsers in the market, but expect this to be 90% within the next year. @@ -25,16 +25,16 @@ Why? Because with such library you can create powerful GUIs in tight space envir ## Installation -For minimum footprint, include `dotdom.min.js.gz` (510b) to your project. +For minimum footprint, include `dotdom.min.js.gz` (511b) to your project. ```html