dothtml 5.2.2 → 5.2.4

package/unittests/class-binding.test.ts

@@ -1,227 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-import Component from "../src/component";
-
-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(){
-    class C extends Component{
-        constructor(v){
-            super();
-            this.props.prop = v;
-        }
-        props = {
-            prop: false
-        };
-        builder(){
-            return dot.div().class({
-                "foo": ()=>this.props.prop,
-                "bar": ()=>!this.props.prop,
-            })
-        }
-        ready(){
-            this.props.prop = !this.props.prop;
-        }
-    }
-
-    return dot.h(new C(false)).h(new C(true));
-
-}, "<div class=\"foo\"></div><div class=\"bar\"></div>");
-
-addTest("Class binding to a component property with a style.", function(){
-    class C extends Component{
-        constructor(v){
-            super();
-            this.props.prop = v;
-        }
-        props = {
-            prop: false
-        };
-        builder(){
-            return dot.div().class({
-                "foo": ()=>this.props.prop,
-                "bar": ()=>!this.props.prop,
-            })
-        }
-        ready(){
-            this.props.prop = !this.props.prop;
-        }
-        style(css){
-            css("div").backgroundColor("white");
-            css(".foo").color("red");
-            css(".bar").color("blue");
-        }
-    }
-
-    return dot.h(new C(false)).h(new C(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>");
-
-addTest("Remove styles applied by a class.", function(){
-    class C extends Component{
-        constructor(v){
-            super();
-            this.props.prop = v;
-        }
-        props = {
-            prop: false
-        };
-        builder(){
-            return dot.div().class({
-                "foo": ()=>this.props.prop,
-            })
-        }
-        ready(){
-            this.props.prop = !this.props.prop;
-        }
-        style(css){
-            css(".foo").color("red");
-        }
-    }
-
-    return dot.h(new C(true));
-
-}, "<div class=\"\"></div>");
-addTest("Remove styles applied by a nested class.", function(){
-    class C extends Component{
-        constructor(v){
-            super();
-            this.props.prop = v;
-        }
-        props = {
-            prop: false
-        };
-        builder(){
-            return dot.div(
-                dot.div().class({
-                    "foo": ()=>this.props.prop,
-                })
-            )
-        }
-        ready(){
-            this.props.prop = !this.props.prop;
-        }
-        style(css){
-            css(".foo").color("red");
-        }
-    }
-
-    return dot.h(new C(true));
-
-}, "<div><div class=\"\"></div></div>");
-
-addTest("Remove only dynamic styles applied by a class.", function(){
-    class C extends Component{
-        constructor(v){
-            super();
-            this.props.prop = v;
-        }
-        props = {
-            prop: false
-        };
-        builder(){
-            return dot.div().class({
-                "foo": ()=>this.props.prop,
-            }).style(dot.css.backgroundColor("blue"))
-        }
-        ready(){
-            this.props.prop = !this.props.prop;
-        }
-        style(css){
-            css(".foo").color("red");
-        }
-    }
-
-    return dot.h(new C(true));
-
-}, "<div class=\"\" data-dot-static-styles=\"background-color:rgb(0, 0, 255);\" style=\"background-color:rgb(0, 0, 255);\"></div>");
-
-addTest("Remove only dynamic styles applied by a nested class.", function(){
-    class C extends Component{
-        constructor(v){
-            super();
-            this.props.prop = v;
-        }
-        props = {
-            prop: false
-        };
-        builder(){
-            return dot.div(
-                dot.div().class({
-                    "foo": ()=>this.props.prop,
-                }).style(dot.css.backgroundColor("blue"))
-            )
-        }
-        ready(){
-            this.props.prop = !this.props.prop;
-        }
-        style(css){
-            css(".foo").color("red");
-        }
-    }
-
-    return dot.h(new C(true));
-
-}, "<div><div class=\"\" data-dot-static-styles=\"background-color:rgb(0, 0, 255);\" style=\"background-color:rgb(0, 0, 255);\"></div></div>");
-
-addTest("Dynamic styles contribute to static styles.", function(){
-    class C extends Component{
-        constructor(v){
-            super();
-            this.props.prop = v;
-        }
-        props = {
-            prop: false
-        };
-        builder(){
-            return dot.div().class({
-                "foo": ()=>this.props.prop,
-            }).style(dot.css.backgroundColor("blue"))
-        }
-        ready(){
-            this.props.prop = !this.props.prop;
-        }
-        style(css){
-            css(".foo").color("red");
-        }
-    }
-
-    return dot.h(new C(false));
-
-}, "<div class=\"foo\" data-dot-static-styles=\"background-color:rgb(0, 0, 255);\" style=\"background-color: rgb(0, 0, 255); color: rgb(255, 0, 0);\"></div>");
-
-addTest("Class based on computed field.", function(){
-    class C extends Component{
-        constructor(){
-            super();
-        }
-        props = {
-            prop: []
-        };
-        builder(){
-            return dot.div().class({
-                "foo": ()=>this.isFoo,
-            })
-        }
-        get isFoo(){
-            let value = this.props.prop.length > 0;
-            return value;
-        }
-
-        ready(){
-            this.props.prop.push(1);
-        }
-        style(css){
-            css(".foo").color("red");
-        }
-    }
-
-    return dot.h(new C());
-
-}, "<div class=\"foo\" style=\"color: rgb(255, 0, 0);\"></div>");

package/unittests/components/component-decorator.-.ts

@@ -1,14 +0,0 @@
-// import addTest from "./core";
-// import dot from "../src/dothtml";
-// import Component from "../src/component";
-// import { IDotElement, IDotGenericElement } from "i-dot";
-
-// TBD...
-
-// @component
-// class TestComponent implements Component{
-// 	builder(...args: any[]): IDotElement<IDotGenericElement> {
-// 		throw new Error("Method not implemented.");
-// 	}
-
-// }

package/unittests/components/components-data.test.ts

@@ -1,153 +0,0 @@
-import addTest from "../core";
-import dot from "../../src/dothtml";
-import Component from "../../src/component";
-
-// For testing the passing of data into and out of components via properties and events, respectively.
-
-addTest("Prop default value.", function(){
-	class MyComp extends Component{
-		props = {
-			myProp: 1
-		}
-
-		builder(){
-			var ret = dot.span(()=>this.props.myProp);
-			return ret;
-		}
-	};
-    
-	var myComp = new MyComp();
-	return dot.h(myComp);
-}, "<span>1</span>");
-
-addTest("Pass value into component.", function(){
-	class MyComp extends Component{
-		props = {
-			myProp: 0
-		}
-
-		constructor(){
-			super();
-			this.props.myProp = 1;
-		}
-
-		builder(){
-			var ret = dot.span(()=>this.props.myProp);
-			return ret;
-		}
-	};
-    
-	var myComp = new MyComp();
-    myComp.props.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(){
-	class MyComp extends Component{
-		props = {
-			myProp: 0
-		}
-		
-		// events:["go"],
-		events = {
-			go: (number)=>undefined
-		}
-
-		constructor(){
-			super();
-			this.props.myProp = 1;
-		}
-
-		builder(){
-			var ret = dot.span(()=>this.props.myProp);
-			return ret;
-		}
-
-        ready(){
-            this.events.go(5);
-        }
-	}
-    
-    var myComp = new MyComp();
-    myComp.props.myProp = 2;
-    myComp.on("go", x=>{
-		myComp.props.myProp=x
-	});
-	// Experimented with this syntax. 
-	// myComp.on(myComp.events.go, ()=>{})
-	return dot.h(myComp);
-}, "<span>5</span>");
-
-addTest("Raise 2 events from component.", function(){
-	class MyComp extends Component{
-		constructor(){
-			super();
-			this.props.myProp = 1;
-		}
-		builder(){
-			var ret = dot.span(()=>this.props.myProp);
-			return ret;
-		}
-
-        props = {
-			myProp: 0
-		}
-
-        events = {
-			go2: (number) => undefined
-		}
-
-        ready(){
-            this.events.go2("3");
-            this.events.go2("4");
-        }
-	}
-    
-    var myComp = new MyComp();
-    myComp.props.myProp = 2;
-    myComp.on("go2", x=>myComp.props.myProp+=x);
-	return dot.h(myComp);
-}, "<span>234</span>");
-
-addTest("Call a method from outside a component.", function(){
-	class MyComp extends Component{
-		constructor(){
-			super();
-			this.props.myProp = 1;
-		}
-		builder(){
-			var ret = dot.span(()=>this.props.myProp);
-			return ret;
-		}
-        props={
-			myProp: 0
-		};
-        
-		go(v){
-			this.props.myProp = v;
-		}
-
-		
-	}
-    
-    var myComp = new MyComp();
-    myComp.props.myProp = 2;
-    myComp.go(5);
-	return dot.h(myComp);
-}, "<span>5</span>");

package/unittests/components/components.test.ts

@@ -1,258 +0,0 @@
-import addTest from "../core";
-import dot, { DotComponent } from "../../src/dothtml";
-import Component from "../../src/component";
-
-class comp_legacy extends dot.Component{
-	
-	builder(){
-		return dot.div(dot.div(1));
-	}
-}
-class comp_std extends dot.Component{
-	builder(){
-		return dot.div(dot.div(1));
-	}
-}
-class comp_ready extends dot.Component{
-	builder(){
-		return dot.div(dot.div(1));
-	}
-
-	ready(){
-		this.$el.innerHTML = "OKAY";
-	}
-}
-
-class comp_el_one_el extends dot.Component{
-	builder(){
-		return dot.div("abc");
-	}
-} 
-
-class comp_el_two_el extends dot.Component{
-	builder(){
-		return dot.div("abc").div("abc");
-	}
-} 
-
-abstract class ParameterizedComponent extends dot.Component{
-	params: Array<any>;
-	constructor(...params: Array<any>){
-		super();
-		this.params = params;
-	}
-}
-
-// class comp_el_deferred_el extends dot.Component{
-// 	builder(){
-// 		return dot.div("abc").wait(function(){}, 1000);
-// 	}
-// } 
-
-// Testing methods:
-// TODO: passing callMethod in like this will soon be deprecated.
-class comp_methods_basic extends dot.Component{
-	callMethod: boolean;
-	constructor(callMethod: boolean){
-		super();
-		this.callMethod = callMethod;
-	}
-
-	builder(){ 
-		return dot.div("123");
-	}
-
-	ready(){
-		if(this.callMethod) this.setVal("abc");
-	}
-	setVal(val){ 
-		dot(this.$el).empty().t(val); 
-	}
-};
-
-// Scoped classes
-dot.resetScopeClass();
-class comp_scoped_class extends dot.Component{
-	builder(){ 
-		return dot.div(dot.div().class("test2")).class("test1") 
-	}
-};
-class comp_scoped_class_2 extends dot.Component{
-	builder(){ return dot.div(dot.div().class("test2")).class("test1") }
-};
-
-
-// Nameless components (exports):
-//addTest("Nameless component.", function(){ var comp = dot.component({builder: function(c){return dot.p(c)} }); return dot.div(comp(":)")) }, "<div><p>:)</p></div>");
-// This behavior was deprecated.
-//addTest("Nameless component as a dot function.", function(){ var comp = dot.component({builder: function(c){return dot.p(c)} }); return comp(":)") }, "<p>:)</p>" );
-
-// Named components (extend dot):
-addTest("Std params component.", function(){return dot.h(new comp_std())}, "<div><div>1</div></div>");
-// addTest("Std params component, nested.", function(){return dot.div(2).comp_std().div(3)}, "<div>2</div><div><div>1</div></div><div>3</div>");
-// addTest("Std prams component beside markup.", function(){return dot.h(2).comp_std().h(3)}, "2<div><div>1</div></div>3");
-addTest("Legacy params component.", function(){return dot.h(new comp_legacy())}, "<div><div>1</div></div>");
-addTest("Component w/ ready method.", function(){return dot.h(new comp_ready())}, "<div>OKAY</div>");
-// addTest("Text component.", function(){return dot.h("a").comp_text().h("b")}, "a1b");
-//addTest("Text component w/ ready method.", function(){return dot.h("a").comp_textreplace().h("b")}, "a2b");
-
-// $el
-// addTest("Undefined $el.", function(){try{return new comp_el_undefined_el()}catch(e){return dot.span(e)}}, "<span>Component 'comp_el_undefined_el' must return exactly one child node.</span>");
-// addTest("Zero $el.", function(){try{return new comp_el_zero_el()}catch(e){return dot.span(e)}}, "<span>Component 'comp_el_zero_el' must return exactly one child node.</span>");
-addTest("One $el.", function(){return dot.h( new comp_el_one_el())}, "<div>abc</div>");
-addTest("Two $el.", function(){try{return dot.h( new comp_el_two_el())}catch(e){return dot.span(e)}}, "<span>Component 'comp_el_two_el' must return exactly one child node.</span>");
-// addTest("Deferred $el.", function(){try{return new comp_el_deferred_el()}catch(e){return dot.span(e)}}, "<span>Component 'comp_el_deferred_el' must return exactly one child node.</span>");
-// addTest("One $el.", function(){return new comp_el_text_zero_el()}, "abc");
-// addTest("One $el.", function(){return new comp_el_text_one_el()}, "<div>abc</div>");
-// addTest("Undefined $el.", function(){try{return new comp_el_text_two_el()}catch(e){return dot.span(e)}}, "<span>Component 'comp_el_text_two_el' must return exactly one child node.</span>");
-
-// methods
-addTest("Instantiate comp w/ method.", function(){return dot.h(new comp_methods_basic(false))}, "<div>123</div>");
-addTest("Method gets called in ready function.", function(){return dot.h(new comp_methods_basic(true))}, "<div>abc</div>"); // TODO: this functionality will soon be removed in favor of params.
-
-
-// TODO: setup this test and get it working.
-// addTest("Computed property w/ updated dependency.", function(){
-// 	let comp = dot.component({
-// 		builder: function(firstName,lastName){this.firstName = firstName; this.lastName = lastName; return dot.p(this.fullName.toUpperCase())}, 
-// 		computed: {
-// 			fullName: function(){
-// 				console.log("GETTING COMPUTED PROP!");
-// 				return this.firstName + " " + this.lastName;
-// 			}
-// 		}
-// 	});
-// 	return dot.h(comp("J","S"));
-// },"<p>J S</p>");
-
-
-// Events // TODO: get these working.
-// addTest(
-// 	"Named events work.", 
-// 	function(){
-// 		let comp = dot.component({
-// 			builder: function(a,b){this.a = a; this.b = b; return dot.p(a+b)}, 
-// 			events: ["sumReady"],
-// 			methods: {trigger: function(){this.sumReady(this.a+this.b);}}, 
-// 		});
-// 		let sumResult = 0;
-// 		let c = comp(1,2).sumReady(function(v){ console.log("CALLING EVENT!!");sumResult = v});
-// 		c.trigger();
-// 		return dot.p(sumResult);
-// 	},
-// 	"<p>3</p>"
-// );
-
-// Scoped classes
-// TODO: the tests work in browser, but seem to happen out of order in jest...
-// addTest("Component class scope.", function(){return dot.comp_scoped_class()}, "<div class=\"dot-10000-test1\"><div class=\"dot-10000-test2\"></div></div>");
-// addTest("Component class scope reuse.", function(){return dot.comp_scoped_class()}, "<div class=\"dot-10000-test1\"><div class=\"dot-10000-test2\"></div></div>");
-// addTest("Component class scope alt.", function(){return dot.comp_scoped_class_2()}, "<div class=\"dot-10001-test1\"><div class=\"dot-10001-test2\"></div></div>");
-
-// Styles
-addTest("Set style directly", function(){var ret = dot.p(":)").style("width:100px;"); return ret;}, "<p style=\"width:100px;\">:)</p>");
-addTest("Set style via dotcss", function(){var ret = dot.p(":)").style(dot.css.width(100)); return ret;}, "<p style=\"width:100px;\">:)</p>");
-
-addTest("Styled component.", function(){ 
-	class comp extends ParameterizedComponent{
-		builder(){
-			return dot.p(this.params[0]);
-		}
-		style(css){
-			css("p").width(100);
-		}
-	}
-	return dot.h(new comp(":)")) }, "<p style=\"width: 100px;\">:)</p>" 
-);
-
-addTest("Advanced styled component.", function(){ 
-	class comp extends ParameterizedComponent{
-		builder(){
-			return dot.p(this.params[0])
-		}
-		style(css){
-			css("p").width(100);
-		} 
-	}
-	return dot.h(new comp(":)")).h(new comp(":)")) 
-}, "<p style=\"width: 100px;\">:)</p><p style=\"width: 100px;\">:)</p>" );
-
-addTest("Component with multiple styles.", function(){ 
-	class comp extends ParameterizedComponent{
-		builder(){ 
-			return dot.p(this.params[0])
-		} 
-		style(css){
-			css("p").width(this.params[1]);
-		} 
-	} 
-	return dot.h(new comp(":)", 200)).h(new comp(":)", 300)) 
-}, "<p style=\"width: 200px;\">:)</p><p style=\"width: 300px;\">:)</p>" );
-
-addTest("Component with class styles.", function(){ 
-	class comp extends ParameterizedComponent{
-		builder(){ 
-			return dot.div(
-				dot.div(this.params[0])
-				.div("w").class("w")
-				.div("ok").class("h")
-			).class("w");
-		}
-		style(css){
-			css(".w").width(this.params[1]);css(".h").width(this.params[2]);
-		}
-	} 
-	return dot.h(new comp(":)", 200, 400)).h(new comp(":)", 300, 500)).div().class("h");
-}, "<div class=\"w\" style=\"width: 200px;\"><div>:)</div><div class=\"w\" style=\"width: 200px;\">w</div><div class=\"h\" style=\"width: 400px;\">ok</div></div><div class=\"w\" style=\"width: 300px;\"><div>:)</div><div class=\"w\" style=\"width: 300px;\">w</div><div class=\"h\" style=\"width: 500px;\">ok</div></div><div class=h></div>" );
-
-addTest("Styles should not apply to nested elements.", function(){
-	class CompOuter extends ParameterizedComponent{
-		builder(){
-			return dot.div(this.params[0]);
-		}
-		style(css){
-			// console.log("CSS???", !!css);
-			css("div").backgroundColor("#FF0000");
-		}
-	};
-
-	class CompInner extends DotComponent{
-		builder(){
-			return dot.div("FOOBAR");
-		}
-	};
-
-	return dot.h(new CompOuter(new CompInner()))
-}, "<div style=\"background-color: rgb(255, 0, 0);\"><div>FOOBAR</div></div>");
-
-addTest("Styles should not apply to nested elements 2.", function(){
-	class CompOuter extends ParameterizedComponent{
-		builder(){
-			return dot.div(this.params[0]);
-		}
-		style(css){
-			css("div").backgroundColor("#FF0000");
-		}
-	}
-
-	class CompInner extends dot.Component{
-		builder(){return dot.div(dot.div("FOOBAR"));}
-	}
-
-	return dot.h(new CompOuter(new CompInner()))
-}, "<div style=\"background-color: rgb(255, 0, 0);\"><div><div>FOOBAR</div></div></div>");
-
-// Event Bus
-
-addTest("Event bus basic usage.", function(){
-	class comp1 extends dot.Component{
-		builder(){
-			var t = this; 
-			dot.bus.on("change", function(v){t.$el.innerHTML = v}); 
-			return dot.p();
-		}  
-	}
-	
-	var ret = dot.h(new comp1()); dot.bus.emit("change", "hello"); 
-	return ret;  
-}, "<p>hello</p>");

package/unittests/computed.test.ts

@@ -1,35 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-import Component from "../src/component";
-
-class Comp extends Component{
-	props={
-		firstName: "",
-		lastName: ""
-	}
-	constructor(firstName, lastName){
-		super();
-		this.props.firstName = firstName; 
-		this.props.lastName = lastName; 
-
-	}
-	builder(){
-		return dot.p(()=>this.fullName.toUpperCase())
-	}
-	get fullName(){
-		return (this.props.firstName||"notset") + " " + (this.props.lastName||"notset");
-	}
-}
-addTest("Computed property.", function(){
-
-	return dot.h( new Comp("J","S")).h(new Comp("1","2"));
-},"<p>J S</p><p>1 2</p>");
-
-addTest("Computed property w/ prop dependency.", function(){
-
-	var instance = new Comp("x", "y");
-	var ret = dot.h(instance);
-	instance.props.firstName = "j";
-    instance.props.lastName = "s";
-    return ret;
-},"<p>J S</p>");