Comparing version 0.5.4 to 0.6.0
@@ -1,1 +0,2 @@ | ||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var r;r="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,r.h=e()}}(function(){return function e(r,n,i){function o(f,u){if(!n[f]){if(!r[f]){var d="function"==typeof require&&require;if(!u&&d)return d(f,!0);if(t)return t(f,!0);var a=new Error("Cannot find module '"+f+"'");throw a.code="MODULE_NOT_FOUND",a}var v=n[f]={exports:{}};r[f][0].call(v.exports,function(e){var n=r[f][1][e];return o(n?n:e)},v,v.exports,e,r,n,i)}return n[f].exports}for(var t="function"==typeof require&&require,f=0;f<i.length;f++)o(i[f]);return o}({1:[function(e,r,n){function i(e,r,n){if(e.ns="http://www.w3.org/2000/svg","foreignObject"!==n&&void 0!==r)for(var o=0;o<r.length;++o)i(r[o].data,r[o].children,r[o].sel)}var o=e("./vnode"),t=e("./is");r.exports=function(e,r,n){var f,u,d,a={};if(void 0!==n?(a=r,t.array(n)?f=n:t.primitive(n)&&(u=n)):void 0!==r&&(t.array(r)?f=r:t.primitive(r)?u=r:a=r),t.array(f))for(d=0;d<f.length;++d)t.primitive(f[d])&&(f[d]=o(void 0,void 0,void 0,f[d]));return"s"===e[0]&&"v"===e[1]&&"g"===e[2]&&i(a,f,e),o(e,a,f,u,void 0)}},{"./is":2,"./vnode":3}],2:[function(e,r,n){r.exports={array:Array.isArray,primitive:function(e){return"string"==typeof e||"number"==typeof e}}},{}],3:[function(e,r,n){r.exports=function(e,r,n,i,o){var t=void 0===r?void 0:r.key;return{sel:e,data:r,children:n,text:i,elm:o,key:t}}},{}]},{},[1])(1)});null//# sourceMappingURL=h.min.js.mapnull | ||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var r;r="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,r.h=e()}}(function(){return function e(r,n,i){function o(f,u){if(!n[f]){if(!r[f]){var d="function"==typeof require&&require;if(!u&&d)return d(f,!0);if(t)return t(f,!0);var a=new Error("Cannot find module '"+f+"'");throw a.code="MODULE_NOT_FOUND",a}var v=n[f]={exports:{}};r[f][0].call(v.exports,function(e){var n=r[f][1][e];return o(n?n:e)},v,v.exports,e,r,n,i)}return n[f].exports}for(var t="function"==typeof require&&require,f=0;f<i.length;f++)o(i[f]);return o}({1:[function(e,r,n){function i(e,r,n){if(e.ns="http://www.w3.org/2000/svg","foreignObject"!==n&&void 0!==r)for(var o=0;o<r.length;++o)i(r[o].data,r[o].children,r[o].sel)}var o=e("./vnode"),t=e("./is");r.exports=function(e,r,n){var f,u,d,a={};if(void 0!==n?(a=r,t.array(n)?f=n:t.primitive(n)&&(u=n)):void 0!==r&&(t.array(r)?f=r:t.primitive(r)?u=r:a=r),t.array(f))for(d=0;d<f.length;++d)t.primitive(f[d])&&(f[d]=o(void 0,void 0,void 0,f[d]));return"s"===e[0]&&"v"===e[1]&&"g"===e[2]&&i(a,f,e),o(e,a,f,u,void 0)}},{"./is":2,"./vnode":3}],2:[function(e,r,n){r.exports={array:Array.isArray,primitive:function(e){return"string"==typeof e||"number"==typeof e}}},{}],3:[function(e,r,n){r.exports=function(e,r,n,i,o){var t=void 0===r?void 0:r.key;return{sel:e,data:r,children:n,text:i,elm:o,key:t}}},{}]},{},[1])(1)}); | ||
//# sourceMappingURL=h.min.js.map |
@@ -1,1 +0,2 @@ | ||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.snabbdom=e()}}(function(){return function e(t,n,r){function o(l,f){if(!n[l]){if(!t[l]){var a="function"==typeof require&&require;if(!f&&a)return a(l,!0);if(i)return i(l,!0);var u=new Error("Cannot find module '"+l+"'");throw u.code="MODULE_NOT_FOUND",u}var d=n[l]={exports:{}};t[l][0].call(d.exports,function(e){var n=t[l][1][e];return o(n?n:e)},d,d.exports,e,t,n,r)}return n[l].exports}for(var i="function"==typeof require&&require,l=0;l<r.length;l++)o(r[l]);return o}({1:[function(e,t,n){function r(e){return document.createElement(e)}function o(e,t){return document.createElementNS(e,t)}function i(e){return document.createTextNode(e)}function l(e,t,n){e.insertBefore(t,n)}function f(e,t){e.removeChild(t)}function a(e,t){e.appendChild(t)}function u(e){return e.parentElement}function d(e){return e.nextSibling}function c(e){return e.tagName}function s(e,t){e.textContent=t}t.exports={createElement:r,createElementNS:o,createTextNode:i,appendChild:a,removeChild:f,insertBefore:l,parentNode:u,nextSibling:d,tagName:c,setTextContent:s}},{}],2:[function(e,t,n){t.exports={array:Array.isArray,primitive:function(e){return"string"==typeof e||"number"==typeof e}}},{}],3:[function(e,t,n){"use strict";function r(e){return void 0===e}function o(e){return void 0!==e}function i(e,t){return e.key===t.key&&e.sel===t.sel}function l(e,t,n){var r,i,l={};for(r=t;r<=n;++r)i=e[r].key,o(i)&&(l[i]=r);return l}function f(e,t){function n(e){var n=e.id?"#"+e.id:"",r=e.className?"."+e.className.split(" ").join("."):"";return a(t.tagName(e).toLowerCase()+n+r,{},[],void 0,e)}function f(e,n){return function(){if(0===--n){var r=t.parentNode(e);t.removeChild(r,e)}}}function m(e,n){var r,i=e.data;o(i)&&o(r=i.hook)&&o(r=r.init)&&(r(e),i=e.data);var l,f=e.children,a=e.sel;if(o(a)){var d=a.indexOf("#"),s=a.indexOf(".",d),p=d>0?d:a.length,h=s>0?s:a.length,v=d!==-1||s!==-1?a.slice(0,Math.min(p,h)):a;if(l=e.elm=o(i)&&o(r=i.ns)?t.createElementNS(r,v):t.createElement(v),p<h&&(l.id=a.slice(p+1,h)),s>0&&(l.className=a.slice(h+1).replace(/\./g," ")),u.array(f))for(r=0;r<f.length;++r)t.appendChild(l,m(f[r],n));else u.primitive(e.text)&&t.appendChild(l,t.createTextNode(e.text));for(r=0;r<C.create.length;++r)C.create[r](c,e);r=e.data.hook,o(r)&&(r.create&&r.create(c,e),r.insert&&n.push(e))}else l=e.elm=t.createTextNode(e.text);return e.elm}function p(e,n,r,o,i,l){for(;o<=i;++o)t.insertBefore(e,m(r[o],l),n)}function h(e){var t,n,r=e.data;if(o(r)){for(o(t=r.hook)&&o(t=t.destroy)&&t(e),t=0;t<C.destroy.length;++t)C.destroy[t](e);if(o(t=e.children))for(n=0;n<e.children.length;++n)h(e.children[n])}}function v(e,n,r,i){for(;r<=i;++r){var l,a,u,d=n[r];if(o(d))if(o(d.sel)){for(h(d),a=C.remove.length+1,u=f(d.elm,a),l=0;l<C.remove.length;++l)C.remove[l](d,u);o(l=d.data)&&o(l=l.hook)&&o(l=l.remove)?l(d,u):u()}else t.removeChild(e,d.elm)}}function x(e,n,o,f){for(var a,u,d,c,s=0,h=0,x=n.length-1,y=n[0],N=n[x],C=o.length-1,k=o[0],b=o[C];s<=x&&h<=C;)r(y)?y=n[++s]:r(N)?N=n[--x]:i(y,k)?(g(y,k,f),y=n[++s],k=o[++h]):i(N,b)?(g(N,b,f),N=n[--x],b=o[--C]):i(y,b)?(g(y,b,f),t.insertBefore(e,y.elm,t.nextSibling(N.elm)),y=n[++s],b=o[--C]):i(N,k)?(g(N,k,f),t.insertBefore(e,N.elm,y.elm),N=n[--x],k=o[++h]):(r(a)&&(a=l(n,s,x)),u=a[k.key],r(u)?(t.insertBefore(e,m(k,f),y.elm),k=o[++h]):(d=n[u],g(d,k,f),n[u]=void 0,t.insertBefore(e,d.elm,y.elm),k=o[++h]));s>x?(c=r(o[C+1])?null:o[C+1].elm,p(e,c,o,h,C,f)):h>C&&v(e,n,s,x)}function g(e,n,l){var f,a;o(f=n.data)&&o(a=f.hook)&&o(f=a.prepatch)&&f(e,n);var u=n.elm=e.elm,d=e.children,c=n.children;if(e!==n){if(!i(e,n)){var s=t.parentNode(e.elm);return u=m(n,l),t.insertBefore(s,u,e.elm),void v(s,[e],0,0)}if(o(n.data)){for(f=0;f<C.update.length;++f)C.update[f](e,n);f=n.data.hook,o(f)&&o(f=f.update)&&f(e,n)}r(n.text)?o(d)&&o(c)?d!==c&&x(u,d,c,l):o(c)?(o(e.text)&&t.setTextContent(u,""),p(u,null,c,0,c.length-1,l)):o(d)?v(u,d,0,d.length-1):o(e.text)&&t.setTextContent(u,""):e.text!==n.text&&t.setTextContent(u,n.text),o(a)&&o(f=a.postpatch)&&f(e,n)}}var y,N,C={};for(r(t)&&(t=d),y=0;y<s.length;++y)for(C[s[y]]=[],N=0;N<e.length;++N)void 0!==e[N][s[y]]&&C[s[y]].push(e[N][s[y]]);return function(e,o){var l,f,a,u=[];for(l=0;l<C.pre.length;++l)C.pre[l]();for(r(e.sel)&&(e=n(e)),i(e,o)?g(e,o,u):(f=e.elm,a=t.parentNode(f),m(o,u),null!==a&&(t.insertBefore(a,o.elm,t.nextSibling(f)),v(a,[e],0,0))),l=0;l<u.length;++l)u[l].data.hook.insert(u[l]);for(l=0;l<C.post.length;++l)C.post[l]();return o}}var a=e("./vnode"),u=e("./is"),d=e("./htmldomapi"),c=a("",{},[],void 0,void 0),s=["create","update","remove","destroy","pre","post"];t.exports={init:f}},{"./htmldomapi":1,"./is":2,"./vnode":4}],4:[function(e,t,n){t.exports=function(e,t,n,r,o){var i=void 0===t?void 0:t.key;return{sel:e,data:t,children:n,text:r,elm:o,key:i}}},{}]},{},[3])(3)});null//# sourceMappingURL=snabbdom.min.js.mapnull | ||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.snabbdom=e()}}(function(){return function e(t,n,r){function o(l,f){if(!n[l]){if(!t[l]){var a="function"==typeof require&&require;if(!f&&a)return a(l,!0);if(i)return i(l,!0);var u=new Error("Cannot find module '"+l+"'");throw u.code="MODULE_NOT_FOUND",u}var d=n[l]={exports:{}};t[l][0].call(d.exports,function(e){var n=t[l][1][e];return o(n?n:e)},d,d.exports,e,t,n,r)}return n[l].exports}for(var i="function"==typeof require&&require,l=0;l<r.length;l++)o(r[l]);return o}({1:[function(e,t,n){function r(e){return document.createElement(e)}function o(e,t){return document.createElementNS(e,t)}function i(e){return document.createTextNode(e)}function l(e,t,n){e.insertBefore(t,n)}function f(e,t){e.removeChild(t)}function a(e,t){e.appendChild(t)}function u(e){return e.parentElement}function d(e){return e.nextSibling}function c(e){return e.tagName}function s(e,t){e.textContent=t}t.exports={createElement:r,createElementNS:o,createTextNode:i,appendChild:a,removeChild:f,insertBefore:l,parentNode:u,nextSibling:d,tagName:c,setTextContent:s}},{}],2:[function(e,t,n){t.exports={array:Array.isArray,primitive:function(e){return"string"==typeof e||"number"==typeof e}}},{}],3:[function(e,t,n){"use strict";function r(e){return void 0===e}function o(e){return void 0!==e}function i(e,t){return e.key===t.key&&e.sel===t.sel}function l(e,t,n){var r,i,l={};for(r=t;r<=n;++r)i=e[r].key,o(i)&&(l[i]=r);return l}function f(e,t){function n(e){var n=e.id?"#"+e.id:"",r=e.className?"."+e.className.split(" ").join("."):"";return a(t.tagName(e).toLowerCase()+n+r,{},[],void 0,e)}function f(e,n){return function(){if(0===--n){var r=t.parentNode(e);t.removeChild(r,e)}}}function m(e,n){var r,i=e.data;o(i)&&o(r=i.hook)&&o(r=r.init)&&(r(e),i=e.data);var l,f=e.children,a=e.sel;if(o(a)){var d=a.indexOf("#"),s=a.indexOf(".",d),p=d>0?d:a.length,h=s>0?s:a.length,v=d!==-1||s!==-1?a.slice(0,Math.min(p,h)):a;if(l=e.elm=o(i)&&o(r=i.ns)?t.createElementNS(r,v):t.createElement(v),p<h&&(l.id=a.slice(p+1,h)),s>0&&(l.className=a.slice(h+1).replace(/\./g," ")),u.array(f))for(r=0;r<f.length;++r)t.appendChild(l,m(f[r],n));else u.primitive(e.text)&&t.appendChild(l,t.createTextNode(e.text));for(r=0;r<C.create.length;++r)C.create[r](c,e);r=e.data.hook,o(r)&&(r.create&&r.create(c,e),r.insert&&n.push(e))}else l=e.elm=t.createTextNode(e.text);return e.elm}function p(e,n,r,o,i,l){for(;o<=i;++o)t.insertBefore(e,m(r[o],l),n)}function h(e){var t,n,r=e.data;if(o(r)){for(o(t=r.hook)&&o(t=t.destroy)&&t(e),t=0;t<C.destroy.length;++t)C.destroy[t](e);if(o(t=e.children))for(n=0;n<e.children.length;++n)h(e.children[n])}}function v(e,n,r,i){for(;r<=i;++r){var l,a,u,d=n[r];if(o(d))if(o(d.sel)){for(h(d),a=C.remove.length+1,u=f(d.elm,a),l=0;l<C.remove.length;++l)C.remove[l](d,u);o(l=d.data)&&o(l=l.hook)&&o(l=l.remove)?l(d,u):u()}else t.removeChild(e,d.elm)}}function x(e,n,o,f){for(var a,u,d,c,s=0,h=0,x=n.length-1,y=n[0],N=n[x],C=o.length-1,k=o[0],b=o[C];s<=x&&h<=C;)r(y)?y=n[++s]:r(N)?N=n[--x]:i(y,k)?(g(y,k,f),y=n[++s],k=o[++h]):i(N,b)?(g(N,b,f),N=n[--x],b=o[--C]):i(y,b)?(g(y,b,f),t.insertBefore(e,y.elm,t.nextSibling(N.elm)),y=n[++s],b=o[--C]):i(N,k)?(g(N,k,f),t.insertBefore(e,N.elm,y.elm),N=n[--x],k=o[++h]):(r(a)&&(a=l(n,s,x)),u=a[k.key],r(u)?(t.insertBefore(e,m(k,f),y.elm),k=o[++h]):(d=n[u],g(d,k,f),n[u]=void 0,t.insertBefore(e,d.elm,y.elm),k=o[++h]));s>x?(c=r(o[C+1])?null:o[C+1].elm,p(e,c,o,h,C,f)):h>C&&v(e,n,s,x)}function g(e,n,l){var f,a;o(f=n.data)&&o(a=f.hook)&&o(f=a.prepatch)&&f(e,n);var u=n.elm=e.elm,d=e.children,c=n.children;if(e!==n){if(!i(e,n)){var s=t.parentNode(e.elm);return u=m(n,l),t.insertBefore(s,u,e.elm),void v(s,[e],0,0)}if(o(n.data)){for(f=0;f<C.update.length;++f)C.update[f](e,n);f=n.data.hook,o(f)&&o(f=f.update)&&f(e,n)}r(n.text)?o(d)&&o(c)?d!==c&&x(u,d,c,l):o(c)?(o(e.text)&&t.setTextContent(u,""),p(u,null,c,0,c.length-1,l)):o(d)?v(u,d,0,d.length-1):o(e.text)&&t.setTextContent(u,""):e.text!==n.text&&t.setTextContent(u,n.text),o(a)&&o(f=a.postpatch)&&f(e,n)}}var y,N,C={};for(r(t)&&(t=d),y=0;y<s.length;++y)for(C[s[y]]=[],N=0;N<e.length;++N)void 0!==e[N][s[y]]&&C[s[y]].push(e[N][s[y]]);return function(e,o){var l,f,a,u=[];for(l=0;l<C.pre.length;++l)C.pre[l]();for(r(e.sel)&&(e=n(e)),i(e,o)?g(e,o,u):(f=e.elm,a=t.parentNode(f),m(o,u),null!==a&&(t.insertBefore(a,o.elm,t.nextSibling(f)),v(a,[e],0,0))),l=0;l<u.length;++l)u[l].data.hook.insert(u[l]);for(l=0;l<C.post.length;++l)C.post[l]();return o}}var a=e("./vnode"),u=e("./is"),d=e("./htmldomapi"),c=a("",{},[],void 0,void 0),s=["create","update","remove","destroy","pre","post"];t.exports={init:f}},{"./htmldomapi":1,"./is":2,"./vnode":4}],4:[function(e,t,n){t.exports=function(e,t,n,r,o){var i=void 0===t?void 0:t.key;return{sel:e,data:t,children:n,text:r,elm:o,key:i}}},{}]},{},[3])(3)}); | ||
//# sourceMappingURL=snabbdom.min.js.map |
var snabbdom = require('../../snabbdom.js'); | ||
var patch = snabbdom.init([ | ||
require('../../modules/attributes'), | ||
require('../../modules/style'), | ||
require('../../modules/eventlisteners') | ||
require('../../modules/attributes').default, | ||
require('../../modules/style').default, | ||
require('../../modules/eventlisteners').default | ||
]); | ||
var h = require('../../h.js'); | ||
var h = require('../../h.js').default; | ||
@@ -12,64 +12,64 @@ var vnode; | ||
var data = { | ||
degRotation: 0 | ||
degRotation: 0 | ||
}; | ||
function gRotation() { | ||
//console.log("gRotation: %s", data.degRotation); | ||
return "rotate(" + data.degRotation + "deg)"; | ||
//console.log("gRotation: %s", data.degRotation); | ||
return "rotate(" + data.degRotation + "deg)"; | ||
} | ||
function triangleClick(id) { | ||
console.log("triangleClick: %s", id); | ||
render(); | ||
console.log("triangleClick: %s", id); | ||
render(); | ||
} | ||
function handleRotate(degs) { | ||
data.degRotation += degs; | ||
console.log("handleRotate: %s, %s", degs, data.degRotation); | ||
render(); | ||
data.degRotation += degs; | ||
console.log("handleRotate: %s, %s", degs, data.degRotation); | ||
render(); | ||
} | ||
function handleReset(degs) { | ||
data.degRotation = degs; | ||
console.log("handleReset: %s", degs); | ||
render(); | ||
data.degRotation = degs; | ||
console.log("handleReset: %s", degs); | ||
render(); | ||
} | ||
function render() { | ||
vnode = patch(vnode, view(data)); | ||
vnode = patch(vnode, view(data)); | ||
} | ||
const hTriangle = (id, degRotation) => | ||
h("polygon#" + id, { | ||
attrs: { | ||
points: "-50,-88 0,-175 50,-88", | ||
transform: "rotate(" + degRotation + ")", | ||
"stroke-width": 3 | ||
}, | ||
on: {click: [triangleClick, id]} | ||
}); | ||
h("polygon#" + id, { | ||
attrs: { | ||
points: "-50,-88 0,-175 50,-88", | ||
transform: "rotate(" + degRotation + ")", | ||
"stroke-width": 3 | ||
}, | ||
on: {click: [triangleClick, id]} | ||
}); | ||
const view = (data) => | ||
h("div.view", [ | ||
h("h1", "Snabbdom SVG Carousel"), | ||
h("svg", {attrs: {width: 380, height: 380, viewBox: [-190, -190, 380, 380]}}, [ | ||
h("g#carousel", | ||
{style: {"-webkit-transform": gRotation(), transform: gRotation()}}, [ | ||
hTriangle("yellow", 0), | ||
hTriangle("green", 60), | ||
hTriangle("magenta", 120), | ||
hTriangle("red", 180), | ||
hTriangle("cyan", 240), | ||
hTriangle("blue", 300) | ||
]) | ||
]), | ||
h("button", {on: {click: [handleRotate, 60]}}, "Rotate Clockwise"), | ||
h("button", {on: {click: [handleRotate, -60]}}, "Rotate Anticlockwise"), | ||
h("button", {on: {click: [handleReset, 0]}}, "Reset") | ||
]); | ||
h("div.view", [ | ||
h("h1", "Snabbdom SVG Carousel"), | ||
h("svg", {attrs: {width: 380, height: 380, viewBox: [-190, -190, 380, 380]}}, [ | ||
h("g#carousel", | ||
{style: {"-webkit-transform": gRotation(), transform: gRotation()}}, [ | ||
hTriangle("yellow", 0), | ||
hTriangle("green", 60), | ||
hTriangle("magenta", 120), | ||
hTriangle("red", 180), | ||
hTriangle("cyan", 240), | ||
hTriangle("blue", 300) | ||
]) | ||
]), | ||
h("button", {on: {click: [handleRotate, 60]}}, "Rotate Clockwise"), | ||
h("button", {on: {click: [handleRotate, -60]}}, "Rotate Anticlockwise"), | ||
h("button", {on: {click: [handleReset, 0]}}, "Reset") | ||
]); | ||
window.addEventListener("DOMContentLoaded", () => { | ||
var container = document.getElementById("container"); | ||
vnode = patch(container, view(data)); | ||
render(); | ||
var container = document.getElementById("container"); | ||
vnode = patch(container, view(data)); | ||
render(); | ||
}); |
/* jshint esnext: true */ | ||
var snabbdom = require('../../snabbdom.js'); | ||
var patch = snabbdom.init([ | ||
require('../../modules/class'), | ||
require('../../modules/hero'), | ||
require('../../modules/style'), | ||
require('../../modules/eventlisteners'), | ||
require('../../modules/class').default, | ||
require('../../modules/hero').default, | ||
require('../../modules/style').default, | ||
require('../../modules/eventlisteners').default, | ||
]); | ||
var h = require('../../h.js'); | ||
var h = require('../../h.js').default; | ||
@@ -11,0 +11,0 @@ var vnode; |
var snabbdom = require('../../snabbdom.js'); | ||
var patch = snabbdom.init([ | ||
require('../../modules/class'), | ||
require('../../modules/props'), | ||
require('../../modules/style'), | ||
require('../../modules/eventlisteners'), | ||
require('../../modules/class').default, | ||
require('../../modules/props').default, | ||
require('../../modules/style').default, | ||
require('../../modules/eventlisteners').default, | ||
]); | ||
var h = require('../../h.js'); | ||
var h = require('../../h.js').default; | ||
@@ -10,0 +10,0 @@ var vnode; |
var snabbdom = require('../../snabbdom.js'); | ||
var patch = snabbdom.init([ | ||
require('../../modules/attributes'), | ||
require('../../modules/attributes').default, | ||
]); | ||
var h = require('../../h.js'); | ||
var h = require('../../h.js').default; | ||
@@ -7,0 +7,0 @@ var vnode; |
@@ -9,9 +9,13 @@ var gulp = require('gulp') | ||
function standalone(name, entry) { | ||
return browserify(entry, { debug: true, standalone: name }) | ||
function standalone(name, entry, exportName) { | ||
return browserify(entry, { debug: true, standalone: exportName || name }) | ||
.bundle() | ||
.pipe(fs.createWriteStream('./dist/'+ name +'.js')) | ||
.pipe(fs.createWriteStream('./dist/'+ name.replace(/_/g, '-') +'.js')) | ||
} | ||
gulp.task('bundle:snabbdom', function() { | ||
return standalone('snabbdom_patch', './snabbdom.bundle.js', 'snabbdom') | ||
}) | ||
gulp.task('bundle:snabbdom:init', function() { | ||
return standalone('snabbdom', './snabbdom.js') | ||
@@ -46,2 +50,3 @@ }) | ||
'bundle:snabbdom', | ||
'bundle:snabbdom:init', | ||
'bundle:snabbdom:h', | ||
@@ -56,3 +61,3 @@ 'bundle:module:attributes', | ||
gulp.task('compress', ['bundle'], function() { | ||
return gulp.src('dist/*.js') | ||
return gulp.src(['dist/*.js', '!dist/*.min.js']) | ||
.pipe(sourcemaps.init()) | ||
@@ -66,3 +71,3 @@ .pipe(uglify()) | ||
gulp.task('clean', function() { | ||
return gulp.src('dist/*.js', {read: false}) | ||
return gulp.src('dist/*.*', {read: false}) | ||
.pipe(clean()) | ||
@@ -69,0 +74,0 @@ }) |
{ | ||
"name": "snabbdom", | ||
"version": "0.5.4", | ||
"version": "0.6.0", | ||
"description": "A virtual DOM library with focus on simplicity, modularity, powerful features and performance.", | ||
"main": "snabbdom.js", | ||
"typings": "type-definitions/snabbdom.d.ts", | ||
"typings": "snabbdom.d.ts", | ||
"directories": { | ||
@@ -23,6 +23,10 @@ "example": "examples", | ||
"testem": "^1.0.2", | ||
"typescript": "^2.0.6", | ||
"xyz": "0.5.x" | ||
}, | ||
"scripts": { | ||
"pretest": "npm run compile", | ||
"test": "testem", | ||
"compile": "tsc", | ||
"prepublish": "npm run compile", | ||
"release-major": "xyz --repo git@github.com:paldepind/snabbdom.git --increment major", | ||
@@ -29,0 +33,0 @@ "release-minor": "xyz --repo git@github.com:paldepind/snabbdom.git --increment minor", |
@@ -68,8 +68,11 @@ # Snabbdom | ||
var patch = snabbdom.init([ // Init patch function with chosen modules | ||
require('snabbdom/modules/class'), // makes it easy to toggle classes | ||
require('snabbdom/modules/props'), // for setting properties on DOM elements | ||
require('snabbdom/modules/style'), // handles styling on elements with support for animations | ||
require('snabbdom/modules/eventlisteners'), // attaches event listeners | ||
require('snabbdom/modules/class').default, // makes it easy to toggle classes | ||
require('snabbdom/modules/props').default, // for setting properties on DOM elements | ||
require('snabbdom/modules/style').default, // handles styling on elements with support for animations | ||
require('snabbdom/modules/eventlisteners').default, // attaches event listeners | ||
]); | ||
var h = require('snabbdom/h'); // helper function for creating vnodes | ||
var h = require('snabbdom/h').default; // helper function for creating vnodes | ||
var container = document.getElementById('container'); | ||
var vnode = h('div#container.two.classes', {on: {click: someFn}}, [ | ||
@@ -80,5 +83,5 @@ h('span', {style: {fontWeight: 'bold'}}, 'This is bold'), | ||
]); | ||
var container = document.getElementById('container'); | ||
// Patch into empty DOM element – this modifies the DOM as a side effect | ||
patch(container, vnode); | ||
var newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [ | ||
@@ -113,4 +116,4 @@ h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'), | ||
var patch = snabbdom.init([ | ||
require('snabbdom/modules/class'), | ||
require('snabbdom/modules/style'), | ||
require('snabbdom/modules/class').default, | ||
require('snabbdom/modules/style').default, | ||
]); | ||
@@ -147,3 +150,3 @@ ``` | ||
```javascript | ||
var h = require('snabbdom/h'); | ||
var h = require('snabbdom/h').default; | ||
var vnode = h('div', {style: {color: '#000'}}, [ | ||
@@ -337,2 +340,13 @@ h('h1', 'Headline'), | ||
#### Custom properties (CSS variables) | ||
CSS custom properties (aka CSS variables) are supported, they must be prefixed | ||
with `--` | ||
```javascript | ||
h('div', { | ||
style: {'--warnColor': 'yellow'} | ||
}, 'Warning'); | ||
``` | ||
#### Delayed properties | ||
@@ -486,3 +500,3 @@ | ||
class: 'text_class' | ||
}}, | ||
}}, | ||
text | ||
@@ -523,3 +537,3 @@ ); | ||
function render(state) { | ||
return thunk('num', numberView, state.number); | ||
return thunk('num', numberView, [state.number]); | ||
} | ||
@@ -642,4 +656,10 @@ ``` | ||
uses Snabbdom | ||
* [Vue.js](http://vuejs.org/) use a fork of snabbdom. | ||
* [scheme-todomvc](https://github.com/amirouche/scheme-todomvc/) build | ||
redux-like architecture on top of snabbdom bindings. | ||
* [kaiju](https://github.com/AlexGalays/kaiju) - | ||
Stateful components and observables on top of snabbdom | ||
Be sure to share it if you're building an application in another way | ||
using Snabbdom. | ||
501
snabbdom.js
@@ -1,260 +0,281 @@ | ||
// jshint newcap: false | ||
/* global require, module, document, Node */ | ||
'use strict'; | ||
var VNode = require('./vnode'); | ||
var is = require('./is'); | ||
var domApi = require('./htmldomapi'); | ||
"use strict"; | ||
var vnode_1 = require("./vnode"); | ||
var is = require("./is"); | ||
var htmldomapi_1 = require("./htmldomapi"); | ||
function isUndef(s) { return s === undefined; } | ||
function isDef(s) { return s !== undefined; } | ||
var emptyNode = VNode('', {}, [], undefined, undefined); | ||
var emptyNode = vnode_1.default('', {}, [], undefined, undefined); | ||
function sameVnode(vnode1, vnode2) { | ||
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; | ||
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; | ||
} | ||
function isVnode(vnode) { | ||
return vnode.sel !== undefined; | ||
} | ||
function createKeyToOldIdx(children, beginIdx, endIdx) { | ||
var i, map = {}, key; | ||
for (i = beginIdx; i <= endIdx; ++i) { | ||
key = children[i].key; | ||
if (isDef(key)) map[key] = i; | ||
} | ||
return map; | ||
var i, map = {}, key; | ||
for (i = beginIdx; i <= endIdx; ++i) { | ||
key = children[i].key; | ||
if (key !== undefined) | ||
map[key] = i; | ||
} | ||
return map; | ||
} | ||
var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post']; | ||
function init(modules, api) { | ||
var i, j, cbs = {}; | ||
if (isUndef(api)) api = domApi; | ||
for (i = 0; i < hooks.length; ++i) { | ||
cbs[hooks[i]] = []; | ||
for (j = 0; j < modules.length; ++j) { | ||
if (modules[j][hooks[i]] !== undefined) cbs[hooks[i]].push(modules[j][hooks[i]]); | ||
var h_1 = require("./h"); | ||
exports.h = h_1.h; | ||
var thunk_1 = require("./thunk"); | ||
exports.thunk = thunk_1.thunk; | ||
function init(modules, domApi) { | ||
var i, j, cbs = {}; | ||
var api = domApi !== undefined ? domApi : htmldomapi_1.default; | ||
for (i = 0; i < hooks.length; ++i) { | ||
cbs[hooks[i]] = []; | ||
for (j = 0; j < modules.length; ++j) { | ||
if (modules[j][hooks[i]] !== undefined) | ||
cbs[hooks[i]].push(modules[j][hooks[i]]); | ||
} | ||
} | ||
} | ||
function emptyNodeAt(elm) { | ||
var id = elm.id ? '#' + elm.id : ''; | ||
var c = elm.className ? '.' + elm.className.split(' ').join('.') : ''; | ||
return VNode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm); | ||
} | ||
function createRmCb(childElm, listeners) { | ||
return function() { | ||
if (--listeners === 0) { | ||
var parent = api.parentNode(childElm); | ||
api.removeChild(parent, childElm); | ||
} | ||
}; | ||
} | ||
function createElm(vnode, insertedVnodeQueue) { | ||
var i, data = vnode.data; | ||
if (isDef(data)) { | ||
if (isDef(i = data.hook) && isDef(i = i.init)) { | ||
i(vnode); | ||
data = vnode.data; | ||
} | ||
function emptyNodeAt(elm) { | ||
var id = elm.id ? '#' + elm.id : ''; | ||
var c = elm.className ? '.' + elm.className.split(' ').join('.') : ''; | ||
return vnode_1.default(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm); | ||
} | ||
var elm, children = vnode.children, sel = vnode.sel; | ||
if (isDef(sel)) { | ||
// Parse selector | ||
var hashIdx = sel.indexOf('#'); | ||
var dotIdx = sel.indexOf('.', hashIdx); | ||
var hash = hashIdx > 0 ? hashIdx : sel.length; | ||
var dot = dotIdx > 0 ? dotIdx : sel.length; | ||
var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel; | ||
elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? api.createElementNS(i, tag) | ||
: api.createElement(tag); | ||
if (hash < dot) elm.id = sel.slice(hash + 1, dot); | ||
if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' '); | ||
if (is.array(children)) { | ||
for (i = 0; i < children.length; ++i) { | ||
api.appendChild(elm, createElm(children[i], insertedVnodeQueue)); | ||
function createRmCb(childElm, listeners) { | ||
return function rmCb() { | ||
if (--listeners === 0) { | ||
var parent_1 = api.parentNode(childElm); | ||
api.removeChild(parent_1, childElm); | ||
} | ||
}; | ||
} | ||
function createElm(vnode, insertedVnodeQueue) { | ||
var i, data = vnode.data; | ||
if (data !== undefined) { | ||
if (isDef(i = data.hook) && isDef(i = i.init)) { | ||
i(vnode); | ||
data = vnode.data; | ||
} | ||
} | ||
} else if (is.primitive(vnode.text)) { | ||
api.appendChild(elm, api.createTextNode(vnode.text)); | ||
} | ||
for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode); | ||
i = vnode.data.hook; // Reuse variable | ||
if (isDef(i)) { | ||
if (i.create) i.create(emptyNode, vnode); | ||
if (i.insert) insertedVnodeQueue.push(vnode); | ||
} | ||
} else { | ||
elm = vnode.elm = api.createTextNode(vnode.text); | ||
var children = vnode.children, sel = vnode.sel; | ||
if (sel !== undefined) { | ||
// Parse selector | ||
var hashIdx = sel.indexOf('#'); | ||
var dotIdx = sel.indexOf('.', hashIdx); | ||
var hash = hashIdx > 0 ? hashIdx : sel.length; | ||
var dot = dotIdx > 0 ? dotIdx : sel.length; | ||
var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel; | ||
var elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? api.createElementNS(i, tag) | ||
: api.createElement(tag); | ||
if (hash < dot) | ||
elm.id = sel.slice(hash + 1, dot); | ||
if (dotIdx > 0) | ||
elm.className = sel.slice(dot + 1).replace(/\./g, ' '); | ||
if (is.array(children)) { | ||
for (i = 0; i < children.length; ++i) { | ||
api.appendChild(elm, createElm(children[i], insertedVnodeQueue)); | ||
} | ||
} | ||
else if (is.primitive(vnode.text)) { | ||
api.appendChild(elm, api.createTextNode(vnode.text)); | ||
} | ||
for (i = 0; i < cbs.create.length; ++i) | ||
cbs.create[i](emptyNode, vnode); | ||
i = vnode.data.hook; // Reuse variable | ||
if (isDef(i)) { | ||
if (i.create) | ||
i.create(emptyNode, vnode); | ||
if (i.insert) | ||
insertedVnodeQueue.push(vnode); | ||
} | ||
} | ||
else { | ||
vnode.elm = api.createTextNode(vnode.text); | ||
} | ||
return vnode.elm; | ||
} | ||
return vnode.elm; | ||
} | ||
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) { | ||
for (; startIdx <= endIdx; ++startIdx) { | ||
api.insertBefore(parentElm, createElm(vnodes[startIdx], insertedVnodeQueue), before); | ||
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) { | ||
for (; startIdx <= endIdx; ++startIdx) { | ||
api.insertBefore(parentElm, createElm(vnodes[startIdx], insertedVnodeQueue), before); | ||
} | ||
} | ||
} | ||
function invokeDestroyHook(vnode) { | ||
var i, j, data = vnode.data; | ||
if (isDef(data)) { | ||
if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode); | ||
for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode); | ||
if (isDef(i = vnode.children)) { | ||
for (j = 0; j < vnode.children.length; ++j) { | ||
invokeDestroyHook(vnode.children[j]); | ||
function invokeDestroyHook(vnode) { | ||
var i, j, data = vnode.data; | ||
if (data !== undefined) { | ||
if (isDef(i = data.hook) && isDef(i = i.destroy)) | ||
i(vnode); | ||
for (i = 0; i < cbs.destroy.length; ++i) | ||
cbs.destroy[i](vnode); | ||
if (vnode.children !== undefined) { | ||
for (j = 0; j < vnode.children.length; ++j) { | ||
i = vnode.children[j]; | ||
if (typeof i !== "string") { | ||
invokeDestroyHook(i); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
function removeVnodes(parentElm, vnodes, startIdx, endIdx) { | ||
for (; startIdx <= endIdx; ++startIdx) { | ||
var i, listeners, rm, ch = vnodes[startIdx]; | ||
if (isDef(ch)) { | ||
if (isDef(ch.sel)) { | ||
invokeDestroyHook(ch); | ||
listeners = cbs.remove.length + 1; | ||
rm = createRmCb(ch.elm, listeners); | ||
for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm); | ||
if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) { | ||
i(ch, rm); | ||
} else { | ||
rm(); | ||
} | ||
} else { // Text node | ||
api.removeChild(parentElm, ch.elm); | ||
function removeVnodes(parentElm, vnodes, startIdx, endIdx) { | ||
for (; startIdx <= endIdx; ++startIdx) { | ||
var i_1 = void 0, listeners = void 0, rm = void 0, ch = vnodes[startIdx]; | ||
if (isDef(ch)) { | ||
if (isDef(ch.sel)) { | ||
invokeDestroyHook(ch); | ||
listeners = cbs.remove.length + 1; | ||
rm = createRmCb(ch.elm, listeners); | ||
for (i_1 = 0; i_1 < cbs.remove.length; ++i_1) | ||
cbs.remove[i_1](ch, rm); | ||
if (isDef(i_1 = ch.data) && isDef(i_1 = i_1.hook) && isDef(i_1 = i_1.remove)) { | ||
i_1(ch, rm); | ||
} | ||
else { | ||
rm(); | ||
} | ||
} | ||
else { | ||
api.removeChild(parentElm, ch.elm); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) { | ||
var oldStartIdx = 0, newStartIdx = 0; | ||
var oldEndIdx = oldCh.length - 1; | ||
var oldStartVnode = oldCh[0]; | ||
var oldEndVnode = oldCh[oldEndIdx]; | ||
var newEndIdx = newCh.length - 1; | ||
var newStartVnode = newCh[0]; | ||
var newEndVnode = newCh[newEndIdx]; | ||
var oldKeyToIdx, idxInOld, elmToMove, before; | ||
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { | ||
if (isUndef(oldStartVnode)) { | ||
oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left | ||
} else if (isUndef(oldEndVnode)) { | ||
oldEndVnode = oldCh[--oldEndIdx]; | ||
} else if (sameVnode(oldStartVnode, newStartVnode)) { | ||
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue); | ||
oldStartVnode = oldCh[++oldStartIdx]; | ||
newStartVnode = newCh[++newStartIdx]; | ||
} else if (sameVnode(oldEndVnode, newEndVnode)) { | ||
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue); | ||
oldEndVnode = oldCh[--oldEndIdx]; | ||
newEndVnode = newCh[--newEndIdx]; | ||
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right | ||
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue); | ||
api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm)); | ||
oldStartVnode = oldCh[++oldStartIdx]; | ||
newEndVnode = newCh[--newEndIdx]; | ||
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left | ||
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue); | ||
api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm); | ||
oldEndVnode = oldCh[--oldEndIdx]; | ||
newStartVnode = newCh[++newStartIdx]; | ||
} else { | ||
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx); | ||
idxInOld = oldKeyToIdx[newStartVnode.key]; | ||
if (isUndef(idxInOld)) { // New element | ||
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); | ||
newStartVnode = newCh[++newStartIdx]; | ||
} else { | ||
elmToMove = oldCh[idxInOld]; | ||
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue); | ||
oldCh[idxInOld] = undefined; | ||
api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm); | ||
newStartVnode = newCh[++newStartIdx]; | ||
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) { | ||
var oldStartIdx = 0, newStartIdx = 0; | ||
var oldEndIdx = oldCh.length - 1; | ||
var oldStartVnode = oldCh[0]; | ||
var oldEndVnode = oldCh[oldEndIdx]; | ||
var newEndIdx = newCh.length - 1; | ||
var newStartVnode = newCh[0]; | ||
var newEndVnode = newCh[newEndIdx]; | ||
var oldKeyToIdx; | ||
var idxInOld; | ||
var elmToMove; | ||
var before; | ||
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { | ||
if (isUndef(oldStartVnode)) { | ||
oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left | ||
} | ||
else if (isUndef(oldEndVnode)) { | ||
oldEndVnode = oldCh[--oldEndIdx]; | ||
} | ||
else if (sameVnode(oldStartVnode, newStartVnode)) { | ||
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue); | ||
oldStartVnode = oldCh[++oldStartIdx]; | ||
newStartVnode = newCh[++newStartIdx]; | ||
} | ||
else if (sameVnode(oldEndVnode, newEndVnode)) { | ||
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue); | ||
oldEndVnode = oldCh[--oldEndIdx]; | ||
newEndVnode = newCh[--newEndIdx]; | ||
} | ||
else if (sameVnode(oldStartVnode, newEndVnode)) { | ||
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue); | ||
api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm)); | ||
oldStartVnode = oldCh[++oldStartIdx]; | ||
newEndVnode = newCh[--newEndIdx]; | ||
} | ||
else if (sameVnode(oldEndVnode, newStartVnode)) { | ||
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue); | ||
api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm); | ||
oldEndVnode = oldCh[--oldEndIdx]; | ||
newStartVnode = newCh[++newStartIdx]; | ||
} | ||
else { | ||
if (oldKeyToIdx === undefined) { | ||
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx); | ||
} | ||
idxInOld = oldKeyToIdx[newStartVnode.key]; | ||
if (isUndef(idxInOld)) { | ||
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); | ||
newStartVnode = newCh[++newStartIdx]; | ||
} | ||
else { | ||
elmToMove = oldCh[idxInOld]; | ||
if (elmToMove.sel !== newStartVnode.sel) { | ||
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); | ||
} | ||
else { | ||
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue); | ||
oldCh[idxInOld] = undefined; | ||
api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm); | ||
} | ||
newStartVnode = newCh[++newStartIdx]; | ||
} | ||
} | ||
} | ||
} | ||
if (oldStartIdx > oldEndIdx) { | ||
before = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm; | ||
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue); | ||
} | ||
else if (newStartIdx > newEndIdx) { | ||
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx); | ||
} | ||
} | ||
if (oldStartIdx > oldEndIdx) { | ||
before = isUndef(newCh[newEndIdx+1]) ? null : newCh[newEndIdx+1].elm; | ||
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue); | ||
} else if (newStartIdx > newEndIdx) { | ||
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx); | ||
function patchVnode(oldVnode, vnode, insertedVnodeQueue) { | ||
var i, hook; | ||
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) { | ||
i(oldVnode, vnode); | ||
} | ||
var elm = vnode.elm = oldVnode.elm, oldCh = oldVnode.children, ch = vnode.children; | ||
if (oldVnode === vnode) | ||
return; | ||
if (isDef(vnode.data)) { | ||
for (i = 0; i < cbs.update.length; ++i) | ||
cbs.update[i](oldVnode, vnode); | ||
i = vnode.data.hook; | ||
if (isDef(i) && isDef(i = i.update)) | ||
i(oldVnode, vnode); | ||
} | ||
if (isUndef(vnode.text)) { | ||
if (isDef(oldCh) && isDef(ch)) { | ||
if (oldCh !== ch) | ||
updateChildren(elm, oldCh, ch, insertedVnodeQueue); | ||
} | ||
else if (isDef(ch)) { | ||
if (isDef(oldVnode.text)) | ||
api.setTextContent(elm, ''); | ||
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue); | ||
} | ||
else if (isDef(oldCh)) { | ||
removeVnodes(elm, oldCh, 0, oldCh.length - 1); | ||
} | ||
else if (isDef(oldVnode.text)) { | ||
api.setTextContent(elm, ''); | ||
} | ||
} | ||
else if (oldVnode.text !== vnode.text) { | ||
api.setTextContent(elm, vnode.text); | ||
} | ||
if (isDef(hook) && isDef(i = hook.postpatch)) { | ||
i(oldVnode, vnode); | ||
} | ||
} | ||
} | ||
function patchVnode(oldVnode, vnode, insertedVnodeQueue) { | ||
var i, hook; | ||
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) { | ||
i(oldVnode, vnode); | ||
} | ||
var elm = vnode.elm = oldVnode.elm, oldCh = oldVnode.children, ch = vnode.children; | ||
if (oldVnode === vnode) return; | ||
if (!sameVnode(oldVnode, vnode)) { | ||
var parentElm = api.parentNode(oldVnode.elm); | ||
elm = createElm(vnode, insertedVnodeQueue); | ||
api.insertBefore(parentElm, elm, oldVnode.elm); | ||
removeVnodes(parentElm, [oldVnode], 0, 0); | ||
return; | ||
} | ||
if (isDef(vnode.data)) { | ||
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode); | ||
i = vnode.data.hook; | ||
if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode); | ||
} | ||
if (isUndef(vnode.text)) { | ||
if (isDef(oldCh) && isDef(ch)) { | ||
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue); | ||
} else if (isDef(ch)) { | ||
if (isDef(oldVnode.text)) api.setTextContent(elm, ''); | ||
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue); | ||
} else if (isDef(oldCh)) { | ||
removeVnodes(elm, oldCh, 0, oldCh.length - 1); | ||
} else if (isDef(oldVnode.text)) { | ||
api.setTextContent(elm, ''); | ||
} | ||
} else if (oldVnode.text !== vnode.text) { | ||
api.setTextContent(elm, vnode.text); | ||
} | ||
if (isDef(hook) && isDef(i = hook.postpatch)) { | ||
i(oldVnode, vnode); | ||
} | ||
} | ||
return function(oldVnode, vnode) { | ||
var i, elm, parent; | ||
var insertedVnodeQueue = []; | ||
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i](); | ||
if (isUndef(oldVnode.sel)) { | ||
oldVnode = emptyNodeAt(oldVnode); | ||
} | ||
if (sameVnode(oldVnode, vnode)) { | ||
patchVnode(oldVnode, vnode, insertedVnodeQueue); | ||
} else { | ||
elm = oldVnode.elm; | ||
parent = api.parentNode(elm); | ||
createElm(vnode, insertedVnodeQueue); | ||
if (parent !== null) { | ||
api.insertBefore(parent, vnode.elm, api.nextSibling(elm)); | ||
removeVnodes(parent, [oldVnode], 0, 0); | ||
} | ||
} | ||
for (i = 0; i < insertedVnodeQueue.length; ++i) { | ||
insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]); | ||
} | ||
for (i = 0; i < cbs.post.length; ++i) cbs.post[i](); | ||
return vnode; | ||
}; | ||
return function patch(oldVnode, vnode) { | ||
var i, elm, parent; | ||
var insertedVnodeQueue = []; | ||
for (i = 0; i < cbs.pre.length; ++i) | ||
cbs.pre[i](); | ||
if (!isVnode(oldVnode)) { | ||
oldVnode = emptyNodeAt(oldVnode); | ||
} | ||
if (sameVnode(oldVnode, vnode)) { | ||
patchVnode(oldVnode, vnode, insertedVnodeQueue); | ||
} | ||
else { | ||
elm = oldVnode.elm; | ||
parent = api.parentNode(elm); | ||
createElm(vnode, insertedVnodeQueue); | ||
if (parent !== null) { | ||
api.insertBefore(parent, vnode.elm, api.nextSibling(elm)); | ||
removeVnodes(parent, [oldVnode], 0, 0); | ||
} | ||
} | ||
for (i = 0; i < insertedVnodeQueue.length; ++i) { | ||
insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]); | ||
} | ||
for (i = 0; i < cbs.post.length; ++i) | ||
cbs.post[i](); | ||
return vnode; | ||
}; | ||
} | ||
module.exports = {init: init}; | ||
exports.init = init; | ||
//# sourceMappingURL=snabbdom.js.map |
@@ -5,4 +5,4 @@ var assert = require('assert'); | ||
var patch = snabbdom.init([]); | ||
var attachTo = require('../helpers/attachto'); | ||
var h = require('../h'); | ||
var attachTo = require('../helpers/attachto').default; | ||
var h = require('../h').default; | ||
@@ -9,0 +9,0 @@ describe('attachTo', function() { |
@@ -5,5 +5,5 @@ var assert = require('assert'); | ||
var patch = snabbdom.init([ | ||
require('../modules/attributes'), | ||
require('../modules/attributes').default, | ||
]); | ||
var h = require('../h'); | ||
var h = require('../h').default; | ||
@@ -10,0 +10,0 @@ describe('attributes', function() { |
@@ -6,7 +6,7 @@ var assert = require('assert'); | ||
var patch = snabbdom.init([ | ||
require('../modules/class'), | ||
require('../modules/props'), | ||
require('../modules/eventlisteners'), | ||
require('../modules/class').default, | ||
require('../modules/props').default, | ||
require('../modules/eventlisteners').default, | ||
]); | ||
var h = require('../h'); | ||
var h = require('../h').default; | ||
@@ -46,2 +46,12 @@ function prop(name) { | ||
}); | ||
it('can create vnode with one child vnode', function() { | ||
var vnode = h('div', h('span#hello')); | ||
assert.equal(vnode.sel, 'div'); | ||
assert.equal(vnode.children[0].sel, 'span#hello'); | ||
}); | ||
it('can create vnode with props and one child vnode', function() { | ||
var vnode = h('div', {}, h('span#hello')); | ||
assert.equal(vnode.sel, 'div'); | ||
assert.equal(vnode.children[0].sel, 'span#hello'); | ||
}); | ||
it('can create vnode with text content', function() { | ||
@@ -84,2 +94,3 @@ var vnode = h('a', ['I am a string']); | ||
// verify that svg tag automatically gets svg namespace | ||
elm = patch(vnode0, h('svg', [ | ||
@@ -90,6 +101,13 @@ h('foreignObject', [ | ||
])).elm; | ||
assert.equal(elm.namespaceURI, SVGNamespace); | ||
assert.equal(elm.firstChild.namespaceURI, SVGNamespace); | ||
assert.equal(elm.firstChild.firstChild.namespaceURI, XHTMLNamespace); | ||
// verify that svg tag with extra selectors gets svg namespace | ||
elm = patch(vnode0, h('svg#some-id')).elm; | ||
assert.equal(elm.namespaceURI, SVGNamespace); | ||
// verify that non-svg tag beginning with 'svg' does NOT get namespace | ||
elm = patch(vnode0, h('svg-custom-el')).elm; | ||
assert.notEqual(elm.namespaceURI, SVGNamespace); | ||
}); | ||
@@ -257,2 +275,12 @@ it('is receives classes in selector', function() { | ||
}); | ||
it('update one child with same key but different sel', function() { | ||
var vnode1 = h('span', {key: 'span'}, [1, 2, 3].map(spanNum)); | ||
var vnode2 = h('span', {key: 'span'}, [spanNum(1), h('i', {key: 2}, '2'), spanNum(3)]); | ||
elm = patch(vnode0, vnode1).elm; | ||
assert.deepEqual(map(inner, elm.children), ['1', '2', '3']); | ||
elm = patch(vnode1, vnode2).elm; | ||
assert.deepEqual(map(inner, elm.children), ['1', '2', '3']); | ||
assert.equal(elm.children.length, 3); | ||
assert.equal(elm.children[1].tagName, 'I'); | ||
}); | ||
}); | ||
@@ -259,0 +287,0 @@ describe('removal of elements', function() { |
@@ -7,5 +7,5 @@ var assert = require('assert'); | ||
var patch = snabbdom.init([ | ||
require('../modules/dataset'), | ||
require('../modules/dataset').default, | ||
]); | ||
var h = require('../h'); | ||
var h = require('../h').default; | ||
@@ -12,0 +12,0 @@ describe('dataset', function() { |
@@ -5,5 +5,5 @@ var assert = require('assert'); | ||
var patch = snabbdom.init([ | ||
require('../modules/eventlisteners.js'), | ||
require('../modules/eventlisteners.js').default, | ||
]); | ||
var h = require('../h'); | ||
var h = require('../h').default; | ||
@@ -10,0 +10,0 @@ describe('event listeners', function() { |
@@ -8,1 +8,2 @@ require('./core'); | ||
require('./attributes'); | ||
require('./htmldomapi') |
@@ -7,5 +7,5 @@ var assert = require('assert'); | ||
var patch = snabbdom.init([ | ||
require('../modules/style'), | ||
require('../modules/style').default, | ||
]); | ||
var h = require('../h'); | ||
var h = require('../h').default; | ||
@@ -58,5 +58,38 @@ describe('style', function() { | ||
}); | ||
it('updates css variables', function() { | ||
var vnode1 = h('div', {style: {'--myVar': 1}}); | ||
var vnode2 = h('div', {style: {'--myVar': 2}}); | ||
var vnode3 = h('div', {style: {'--myVar': 3}}); | ||
elm = patch(vnode0, vnode1).elm; | ||
assert.equal(elm.style.getPropertyValue('--myVar'), 1); | ||
elm = patch(vnode1, vnode2).elm; | ||
assert.equal(elm.style.getPropertyValue('--myVar'), 2); | ||
elm = patch(vnode2, vnode3).elm; | ||
assert.equal(elm.style.getPropertyValue('--myVar'), 3); | ||
}); | ||
it('explicialy removes css variables', function() { | ||
var vnode1 = h('i', {style: {'--myVar': 1}}); | ||
var vnode2 = h('i', {style: {'--myVar': ''}}); | ||
var vnode3 = h('i', {style: {'--myVar': 2}}); | ||
elm = patch(vnode0, vnode1).elm; | ||
assert.equal(elm.style.getPropertyValue('--myVar'), 1); | ||
patch(vnode1, vnode2); | ||
assert.equal(elm.style.getPropertyValue('--myVar'), ''); | ||
patch(vnode2, vnode3); | ||
assert.equal(elm.style.getPropertyValue('--myVar'), 2); | ||
}); | ||
it('implicially removes css variables from element', function() { | ||
var vnode1 = h('div', [h('i', {style: {'--myVar': 1}})]); | ||
var vnode2 = h('div', [h('i')]); | ||
var vnode3 = h('div', [h('i', {style: {'--myVar': 2}})]); | ||
patch(vnode0, vnode1); | ||
assert.equal(elm.firstChild.style.getPropertyValue('--myVar'), 1); | ||
patch(vnode1, vnode2); | ||
assert.equal(elm.firstChild.style.getPropertyValue('--myVar'), ''); | ||
patch(vnode2, vnode3); | ||
assert.equal(elm.firstChild.style.getPropertyValue('--myVar'), 2); | ||
}); | ||
it('updates delayed styles in next frame', function() { | ||
var patch = snabbdom.init([ | ||
require('../modules/style'), | ||
require('../modules/style').default, | ||
]); | ||
@@ -63,0 +96,0 @@ var vnode1 = h('i', {style: {fontSize: '14px', delayed: {fontSize: '16px'}}}); |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
1003333
79
19755
658
12
1
9
45