dothtml 4.8.6 → 5.0.0

package/src/util.js

@@ -1,13 +0,0 @@
-// Polyfill for Object.keys(...).forEach.
-
-export function eachK(obj, cb){
-    if(obj){
-        var lst = Object.keys(obj);
-        for(var i = 0; i < lst.length; i++) cb(lst[i], obj[lst[i]]);
-    }
-}
-
-export function isF(v){
-    return v && v.constructor && v.call && v.apply;
-}
-

package/unittests/advanced-bindings.test.js

@@ -1,386 +0,0 @@
-import addTest from "./core";
-import dot from "../src/index";
-
-addTest("Bind to number prop.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = 0;
-			var ret = dot.span(()=>this.myProp);
-			return ret;
-		},
-		ready(){
-			this.myProp++;
-		},
-		props:["myProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<span>1</span>");
-
-addTest("Bind to calculated prop.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = 0;
-			var ret = dot.div(()=>dot.p("I have " + this.myProp + "!"));
-			return ret;
-		},
-		ready(){
-			this.myProp+=10;
-		},
-		props:["myProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><p>I have 10!</p></div>");
-
-addTest("Bind to array.", function(){
-	const MyComp = dot.component({
-		builder(data){
-			this.myData = data;
-			return dot.ul(
-				dot.each(()=>this.myData, (v, i)=>{
-					return dot.li(v.value)
-				})
-			);
-		},
-		ready(){
-			this.myData.push({value: 5});
-			this.myData.push({value: 3});
-			this.myData.push({value: 1});
-		},
-		props:["myData"]
-	});
-	
-	var data = [];
-
-	return dot.h(MyComp(data));
-	
-}, "<ul><li>5</li><li>3</li><li>1</li></ul>"); // If stops working, add a delay.
-
-addTest("Bind to start of array.", function(){
-	const MyComp = dot.component({
-		builder(data){
-			this.myData = data;
-			return dot.ul(
-				dot.each(()=>this.myData, (v, i)=>{
-					return dot.li(v.value)
-				})
-			);
-		},
-		ready(){
-			this.myData.push({value: 5});
-			this.myData.push({value: 3});
-			this.myData.unshift({value: 1});
-		},
-		props:["myData"]
-	});
-	
-	var data = [];
-
-	return dot.h(MyComp(data));
-	
-}, "<ul><li>1</li><li>5</li><li>3</li></ul>");
-
-addTest("Bind to array out of order.", function(){
-	const MyComp = dot.component({
-		builder(data){
-			this.myData = data;
-			return dot.ul(
-				dot.each(()=>this.myData, (v, i)=>{
-					return dot.li(v.value)
-				})
-			);
-		},
-		ready(){
-			this.myData.push({value: 5});
-			this.myData.push({value: 3});
-			this.myData.splice(1, 0, {value: 1});
-		},
-		props:["myData"]
-	});
-	
-	var data = [];
-
-	return dot.h(MyComp(data));
-	
-}, "<ul><li>5</li><li>1</li><li>3</li></ul>");
-
-addTest("Bind 2 to array out of order.", function(){
-	const MyComp = dot.component({
-		builder(data){
-			this.myData = data;
-			return dot.ul(
-				dot.each(()=>this.myData, (v, i)=>{
-					return dot.li(v.value)
-				})
-			);
-		},
-		ready(){
-			this.myData.push({value: 5});
-			this.myData.push({value: 3});
-			this.myData.splice(1, 0, {value: "a"}, {value: "b"});
-		},
-		props:["myData"]
-	});
-	
-	var data = [];
-
-	return dot.h(MyComp(data));
-	
-}, "<ul><li>5</li><li>a</li><li>b</li><li>3</li></ul>");
-
-addTest("Remove from bound array.", function(){
-	const MyComp = dot.component({
-		builder(data){
-			this.myData = data;
-			return dot.ul(
-				dot.each(()=>this.myData, (v, i)=>{
-					return dot.li(v.value)
-				})
-			);
-		},
-		ready(){
-			this.myData.push({value: 5});
-			this.myData.push({value: "A"});
-			this.myData.push({value: "B"});
-			this.myData.push({value: 1});
-			// this.myData.splice(1,2);
-			this.myData.splice(1,2, {value: 3});
-		},
-		props:["myData"]
-	});
-	
-	var data = [];
-
-	return dot.h(MyComp(data));
-	
-}, "<ul><li>5</li><li>3</li><li>1</li></ul>");
-
-addTest("Set value in bound array.", function(){
-	const MyComp = dot.component({
-		builder(data){
-			this.myData = data;
-			return dot.ul(
-				dot.each(()=>this.myData, (v, i)=>{
-					return dot.li(v.value)
-				})
-			);
-		},
-		ready(){
-			this.myData.push({value: 5});
-			this.myData.push({value: 3});
-			this.myData.push({value: 1});
-
-			this.myData[1] = {value: "YES!"};
-		},
-		props:["myData"]
-	});
-	
-	var data = [];
-
-	return dot.h(MyComp(data));
-	
-}, "<ul><li>5</li><li>YES!</li><li>1</li></ul>"); // If stops working, add a delay.
-
-addTest("Conditional rendering.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myPropA = false;
-			this.myPropB = true;
-			var ret = dot.div(
-				dot.div("OUTER1")
-				.if(()=>this.myPropA, ()=>dot
-					.p("A"))
-				.if(()=>this.myPropB, ()=>dot
-					.p("B"))
-				.div("OUTER2")
-			);
-			return ret;
-		},
-		ready(){
-			this.myPropA = !this.myPropA;
-			this.myPropB = !this.myPropB;
-		},
-		props:["myPropA", "myPropB"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div>OUTER1</div><p>A</p><div>OUTER2</div></div>");
-
-addTest("Conditional rendering - out of order.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myPropA = false;
-			this.myPropB = false;
-			this.myPropC = false;
-			var ret = dot.div(dot.div().if(()=>this.myPropA, ()=>dot.p("A")).if(()=>this.myPropB, ()=>dot.p("B")).if(()=>this.myPropC, ()=>dot.p("C")).div());
-			return ret;
-		},
-		ready(){
-			this.myPropB = true;
-			this.myPropC = true;
-			this.myPropA = true;
-		},
-		props:["myPropA", "myPropB", "myPropC"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div></div><p>A</p><p>B</p><p>C</p><div></div></div>");
-
-
-addTest("Conditional rendering - if true->false else.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = false;
-			var ret = dot.div(
-				dot.div("OUTER1")
-				.if(()=>this.myProp, ()=>dot
-					.p("A"))
-				.else(()=>dot
-					.p("B"))
-				.div("OUTER2")
-			);
-			return ret;
-		},
-		ready(){
-			this.myProp = !this.myProp;
-		},
-		props:["myProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div>OUTER1</div><p>A</p><div>OUTER2</div></div>");
-
-
-addTest("Conditional rendering - if true->false elseif true.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = true;
-			this.myElseProp = true;
-			var ret = dot.div(
-				dot.div("OUTER1")
-				.if(()=>this.myProp, ()=>dot
-					.p("A"))
-				.elseif(()=>this.myElseProp, ()=>dot
-					.p("B"))
-				.else(()=>dot
-					.p("C"))
-				.div("OUTER2")
-			);
-			return ret;
-		},
-		ready(){
-			this.myProp = false;
-		},
-		props:["myProp", "myElseProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div>OUTER1</div><p>B</p><div>OUTER2</div></div>");
-
-addTest("Conditional rendering - if true->false elseif true->false.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = true;
-			this.myElseProp = true;
-			var ret = dot.div(
-				dot.div("OUTER1")
-				.if(()=>this.myProp, ()=>dot
-					.p("A"))
-				.elseif(()=>this.myElseProp, ()=>dot
-					.p("B"))
-				.else(()=>dot
-					.p("C"))
-				.div("OUTER2")
-			);
-			return ret;
-		},
-		ready(){
-			this.myProp = false;
-			this.myElseProp = false;
-		},
-		props:["myProp", "myElseProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div>OUTER1</div><p>C</p><div>OUTER2</div></div>");
-
-addTest("Conditional rendering - if true->false elseif false->true.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = true;
-			this.myElseProp = false;
-			var ret = dot.div(
-				dot.div("OUTER1")
-				.if(()=>this.myProp, ()=>dot
-					.p("A"))
-				.elseif(()=>this.myElseProp, ()=>dot
-					.p("B"))
-				.else(()=>dot
-					.p("C"))
-				.div("OUTER2")
-			);
-			return ret;
-		},
-		ready(){
-			this.myProp = false;
-			this.myElseProp = true;
-		},
-		props:["myProp", "myElseProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div>OUTER1</div><p>B</p><div>OUTER2</div></div>");
-
-addTest("Conditional rendering - if true else true.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = false;
-			this.myElseProp = true;
-			var ret = dot.div(
-				dot.div("OUTER1")
-				.if(()=>this.myProp, ()=>dot
-					.p("A"))
-				.elseif(()=>this.myElseProp, ()=>dot
-					.p("B"))
-				.else(()=>dot
-					.p("C"))
-				.div("OUTER2")
-			);
-			return ret;
-		},
-		ready(){
-			this.myProp = true;
-		},
-		props:["myProp", "myElseProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div>OUTER1</div><p>A</p><div>OUTER2</div></div>");
-
-addTest("Conditional rendering - if true else false->true.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = false;
-			this.myElseProp = false;
-			var ret = dot.div(
-				dot.div("OUTER1")
-				.if(()=>this.myProp, ()=>dot
-					.p("A"))
-				.elseif(()=>this.myElseProp, ()=>dot
-					.p("B"))
-				.else(()=>dot
-					.p("C"))
-				.div("OUTER2")
-			);
-			return ret;
-		},
-		ready(){
-			this.myProp = true;
-			
-		},
-		props:["myProp", "myElseProp"]
-	});
-	
-	return dot.h(MyComp());
-}, "<div><div>OUTER1</div><p>A</p><div>OUTER2</div></div>");

package/unittests/class-binding.test.js

@@ -1,53 +0,0 @@
-import addTest from "./core";
-import dot from "../src/index";
-
-addTest("Basic immutable class binding.", function(){
-    return dot.div().class({
-        "foo": true,
-        "bar": false,
-        "xyz": true
-    })
-}, "<div class=\"foo xyz\"></div>");
-
-addTest("Class binding to a component property.", function(){
-    var Component = dot.component({
-        builder(v){
-            this.prop = v;
-            return dot.div().class({
-                "foo": ()=>this.prop,
-                "bar": ()=>!this.prop,
-            })
-        },
-        props: ["prop"],
-        ready(){
-            this.prop = !this.prop;
-        }
-    });
-
-    return dot.h(Component(false)).h(Component(true));
-
-}, "<div class=\"foo\"></div><div class=\"bar\"></div>");
-
-addTest("Class binding to a component property with a style.", function(){
-    var Component = dot.component({
-        builder(v){
-            this.prop = v;
-            return dot.div().class({
-                "foo": ()=>this.prop,
-                "bar": ()=>!this.prop,
-            })
-        },
-        props: ["prop"],
-        ready(){
-            this.prop = !this.prop;
-        },
-        style(css){
-            css("div").backgroundColor("white");
-            css(".foo").color("red");
-            css(".bar").color("blue");
-        }
-    });
-
-    return dot.h(Component(false)).h(Component(true));
-
-}, "<div class=\"foo\" style=\"background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);\"></div><div class=\"bar\" style=\"background-color: rgb(255, 255, 255); color: rgb(0, 0, 255);\"></div>");

package/unittests/components-data.test.js

@@ -1,97 +0,0 @@
-import addTest from "./core";
-import dot from "../src/index";
-
-// For testing the passing of data into and out of components via properties and events, respectively.
-
-addTest("Pass value into component.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = 1;
-			var ret = dot.span(()=>this.myProp);
-			return ret;
-		},
-		props:["myProp"]
-	});
-    
-	var myComp = MyComp();
-    myComp.myProp = 2;
-	return dot.h(myComp);
-}, "<span>2</span>");
-
-// TODO
-// addTest("Binding value into component.", function(){
-// 	const MyComp = dot.component({
-// 		builder(){
-// 			this.myProp = 1;
-// 			var ret = dot.span(()=>this.myProp);
-// 			return ret;
-// 		},
-// 		props:["myProp"]
-// 	});
-    
-// 	var myComp = MyComp();
-//     myComp.myProp = 2;
-// 	return dot.h(myComp);
-// }, "<span>2</span>");
-
-addTest("Raise event from component.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = 1;
-			var ret = dot.span(()=>this.myProp);
-			return ret;
-		},
-        props:["myProp"],
-        events:["go"],
-        ready(){
-            this.go(5);
-        }
-	});
-    
-    var myComp = MyComp();
-    myComp.myProp = 2;
-    myComp.onGo(x=>myComp.myProp=x);
-	return dot.h(myComp);
-}, "<span>5</span>");
-
-addTest("Raise 2 events from component.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = "1";
-			var ret = dot.span(()=>this.myProp);
-			return ret;
-		},
-        props:["myProp"],
-        events:["go2"],
-        ready(){
-            this.go2("3");
-            this.go2("4");
-        }
-	});
-    
-    var myComp = MyComp();
-    myComp.myProp = 2;
-    myComp.onGo2(x=>myComp.myProp+=x);
-	return dot.h(myComp);
-}, "<span>234</span>");
-
-addTest("Call a method from outside a component.", function(){
-	const MyComp = dot.component({
-		builder(){
-			this.myProp = 1;
-			var ret = dot.span(()=>this.myProp);
-			return ret;
-		},
-        props:["myProp"],
-        methods:{
-            go(v){
-                this.myProp = v;
-            }
-        }
-	});
-    
-    var myComp = MyComp();
-    myComp.myProp = 2;
-    myComp.go(5);
-	return dot.h(myComp);
-}, "<span>5</span>");