dothtml 4.8.6 → 5.0.0

package/unittests/input-bindings.test.ts

@@ -0,0 +1,166 @@
+import addTest from "./core";
+import dot from "../src/dothtml";
+import Component from "../src/component";
+
+// TODO: not sure if this is a valid test case.
+// The change event is dispatched on the option element, not the select.
+// Need to ensure this works with real elements and user interaction.
+class CompBindingInputChangeOption extends Component{
+    props:{myValue:boolean} = {myValue: false}
+    builder(){
+        return dot.select(
+            dot.option("a").value("a").selected()
+            .option("b").value("b").bindTo(this.props.myValue)
+            .option("c").value("c"))}
+    ready(){
+        dot(this.$el).as(dot.select).setVal("b");
+        //this.myValue.setFrom(this.$el.childNodes[1]);
+        var v = dot(this.$el).as(dot.select).getVal();
+        this.$el.children[1].dispatchEvent(new Event("change"));
+        dot(this.$el.parentNode).empty()
+        .div("Var: " + this.props.myValue)
+        .div("Input: " + v);
+    }
+}
+
+class CompBindingWriteInput extends Component{builder(){return dot.div(new CompBindingWrite(dot.input(), "a", "b"))}}
+class CompBindingVarChangeInput extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input(), "a", "b"))}}
+class CompBindingInputChangeInput extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input(), "a", "b"))}}
+class CompBindingWriteTextArea extends Component{builder(){return dot.div(new CompBindingWrite(dot.textArea("x"), "a", "b"))}}
+class CompBindingVarChangeTextArea extends Component{builder(){return dot.div(new CompBindingVarChange(dot.textArea("x"), "a", "b"))}}
+class CompBindingInputChangeTextArea extends Component{builder(){return dot.div(new CompBindingInputChange(dot.textArea("x"), "a", "b"))}}
+class CompBindingWriteCheckboxOn extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("checkbox"), false, true))}}
+class CompBindingVarChangeCheckboxOn extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("checkbox"), false, true))}}
+class CompBindingInputChangeCheckboxOn extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("checkbox"), false, true))}}
+class CompBindingWriteCheckboxOff extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("checkbox").checked(), true, false))}}
+class CompBindingVarChangeCheckboxOff extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("checkbox").checked(), true, false))}}
+class CompBindingInputChangeCheckboxOff extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("checkbox").checked(), true, false))}}
+class CompBindingWriteRadioOn extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("radio").name("radiotest1"), false, true))}}
+class CompBindingVarChangeRadioOn extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("radio").name("radiotest2"), false, true))}}
+class CompBindingInputChangeRadioOn extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("radio").name("radiotest3"), false, true))}}
+class CompBindingWriteRadioOff extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("radio").name("radiotest4"), true, false))}}
+class CompBindingVarChangeRadioOff extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("radio").name("radiotest5"), true, false))}}
+class CompBindingInputChangeRadioOff extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("radio").name("radiotest6"), true, false))}}
+class CompBindingWriteSelect extends Component{builder(){return dot.div(new CompBindingWrite(new CompSelect(), "a", "b"))}}
+class CompBindingVarChangeSelect extends Component{builder(){return dot.div(new CompBindingVarChange(new CompSelect(), "a", "b"))}}
+class CompBindingInputChangeSelect extends Component{builder(){return dot.div(new CompBindingInputChange(new CompSelect(), "a", "b"))}}
+
+class CompBindingWrite extends Component{
+    props:{v1:any, v2: any} = {v1: null, v2: null}
+    builder(input, v1, v2){
+        this.props.v1 = v1;
+        this.props.v2 = v2;
+        return dot.h(input).as(dot.input).bindTo(this.props.v2);
+        // if(input instanceof Component){
+        // }
+        // else
+        //     return dot.h(input).as(dot.input).bindTo(this.props.v2);
+    }
+    ready(){
+        var v = dot(this.$el).as(dot.input).getVal();
+        dot(this.$el.parentNode).empty()
+        .div("Var: " + this.props.v2)
+        .div("Input: " + v);
+    }
+}
+class CompBindingVarChange extends Component{
+    props:{v1:any, v2: any} = {v1: null, v2: null}
+    builder(input, v1, v2){
+        this.props.v1 = v1;
+        this.props.v2 = v2;
+        return dot.h(input).as(dot.input).bindTo(this.props.v1);
+    }
+    ready(){
+        this.props.v1 = this.props.v2;
+        var v = dot(this.$el).as(dot.input).getVal();
+        dot(this.$el.parentNode).empty()
+        .div("Var: " + this.props.v1)
+        .div("Input: " + v);
+    }
+}
+
+class CompBindingInputChange extends Component{
+    props:{v1:any, v2: any} = {v1: null, v2: null}
+    builder(input, v1, v2){
+        this.props.v1 = v1;
+        this.props.v2 = v2;
+        //this.myValue = dot.binding(v1);
+        return dot.h(input).as(dot.input).bindTo(this.props.v1);
+    }
+    ready(){
+        dot(this.$el).as(dot.input).setVal(this.props.v2);
+        var v = dot(this.$el).as(dot.input).getVal();
+        this.$el.dispatchEvent(new Event("change"));
+        //this.v1 = v;
+        dot(this.$el.parentNode).empty()
+        .div("Var: " + this.props.v1)
+        .div("Input: " + v);
+    }
+}
+
+
+// class CompBindingWriteoption extends Component{ builder(){return dot.CompBindingwrite(dot.input(),  false, true)}});
+// class CompBindingVarchangeOption extends Component{ builder(){return dot.CompBindingVarchange(dot.input(),  false, true)}});
+// class CompBindingInputChangeOption extends Component{ builder(){return dot.CompBindingInputChange(dot.input(),  false, true)}});
+class CompBindingWriteOption extends Component{
+    props:{myValue:boolean} = {myValue: false}
+    builder(){
+        this.props.myValue = true;
+        return dot.select(
+            dot.option("a").value("a").selected()
+            .option("b").value("b").bindTo(this.props.myValue)
+            .option("c").value("c"))
+    }
+    ready(){
+        var v = dot(this.$el).as(dot.select).getVal();
+        dot(this.$el.parentNode).empty()
+        .div("Var: " + this.props.myValue).div("Input: " + v)
+    }
+}
+class CompBindingVarChangeOption extends Component{
+    props:{myValue:boolean} = {myValue: false}
+    builder(){
+        this.props.myValue = false;
+        return dot.select(
+            dot.option("a").value("a").selected()
+            .option("b").value("b").bindTo(this.props.myValue)
+            .option("c").value("c"))
+    }
+    ready(){
+        this.props.myValue = true;
+        var v = dot(this.$el).as(dot.select).getVal();
+        dot(this.$el.parentNode).empty()
+        .div("Var: " + this.props.myValue)
+        .div("Input: " + v)
+    }
+}
+
+class CompSelect extends Component{ builder(){return dot.select(dot.option("a").value("a").option("b").value("b").option("c").value("c"));}}
+
+
+
+addTest("Var bound to input.", function(){return dot.h(new CompBindingWriteInput())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Var change updating input.", function(){return dot.h(new CompBindingVarChangeInput())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Input change updating var.", function(){return dot.h(new CompBindingInputChangeInput())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Var bound to textarea.", function(){return dot.h(new CompBindingWriteTextArea())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Var change updating textarea.", function(){return dot.h(new CompBindingVarChangeTextArea())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Textarea change updating var.", function(){return dot.h(new CompBindingInputChangeTextArea())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Var bound to checkbox on.", function(){return dot.h(new CompBindingWriteCheckboxOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
+addTest("Var change updating checkbox on.", function(){return dot.h(new CompBindingVarChangeCheckboxOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
+addTest("Checkbox change updating var on.", function(){return dot.h(new CompBindingInputChangeCheckboxOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
+addTest("Var bound to checkbox off.", function(){return dot.h(new CompBindingWriteCheckboxOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
+addTest("Var change updating checkbox off.", function(){return dot.h(new CompBindingVarChangeCheckboxOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
+addTest("Checkbox change updating var.", function(){return dot.h(new CompBindingInputChangeCheckboxOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
+addTest("Var bound to radio on.", function(){return dot.h(new CompBindingWriteRadioOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
+addTest("Var change updating radio on.", function(){return dot.h(new CompBindingVarChangeRadioOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
+addTest("Radio change updating var on.", function(){return dot.h(new CompBindingInputChangeRadioOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
+addTest("Var bound to radio off.", function(){return dot.h(new CompBindingWriteRadioOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
+addTest("Var change updating radio off.", function(){return dot.h(new CompBindingVarChangeRadioOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
+addTest("Radio change updating var off.", function(){return dot.h(new CompBindingInputChangeRadioOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
+addTest("Var bound to select.", function(){return dot.h(new CompBindingWriteSelect())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Var change updating select.", function(){return dot.h(new CompBindingVarChangeSelect())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Select change updating var.", function(){return dot.h(new CompBindingInputChangeSelect())}, "<div><div>Var: b</div><div>Input: b</div></div>");
+addTest("Var bound to option.", function(){return dot.h(new CompBindingWriteOption())}, "<div>Var: true</div><div>Input: b</div>");
+addTest("Var change updating option.", function(){return dot.h(new CompBindingVarChangeOption())}, "<div>Var: true</div><div>Input: b</div>");
+addTest("Option change updating var.", function(){return dot.h(new CompBindingInputChangeOption())}, "<div>Var: true</div><div>Input: b</div>");
+  // expected output: Object { foo: "bar", baz: 42 }

package/unittests/integration.test.ts

@@ -0,0 +1,5 @@
+import dot from "../lib/dothtml.js";
+
+test("Integration test.", ()=>{
+    dot.div();
+});

package/unittests/{iterations.test.js → iterations.test.ts}

@@ -1,12 +1,12 @@
 import addTest from "./core";
-import dot from "../src/index";
+import dot from "../src/dothtml";
 
 addTest("Iterate.", function(){ return dot.iterate(3, function(i){return dot.h(i)}); }, "012");
 addTest("Iterate w/ friends.", function(){ return dot.h("s").iterate(3, function(i){return dot.h(i)}).h("f"); }, "s012f");
-addTest("Iterate no return.", function(){ return dot.h("s").iterate(3, function(i){dot.h(i)}).h("f"); }, "sf");
-addTest("Iterate raw dot.", function(){ return dot.h("s").iterate(3, dot.h("-")).h("f"); }, "s---f");
-addTest("Iterate raw dot HTML.", function(){ return dot.h("s").iterate(3, dot.div()).h("f"); }, "s<div></div><div></div><div></div>f");
-addTest("Iterate text.", function(){ return dot.h("s").iterate(3, "-").h("f"); }, "s---f");
+addTest("Iterate no return.", function(){ return dot.h("s").iterate(3, function(i){dot.h(i); return dot.t("")}).h("f"); }, "sf");
+// addTest("Iterate raw dot.", function(){ return dot.h("s").iterate(3, dot.h("-")).h("f"); }, "s---f");
+// addTest("Iterate raw dot HTML.", function(){ return dot.h("s").iterate(3, dot.div()).h("f"); }, "s<div></div><div></div><div></div>f");
+// addTest("Iterate text.", function(){ return dot.h("s").iterate(3, "-").h("f"); }, "s---f");
 addTest("Nested iterate.", function(){
 	return dot.h("s")
 	.iterate(2, function(i){

package/unittests/logic.test.ts

@@ -0,0 +1,18 @@
+import addTest from "./core";
+import dot from "../src/dothtml";
+
+addTest("If true else.", function(){ return dot.when(true, ()=>"if").otherwise(()=>"else"); }, "if");
+addTest("If false else.", function(){ return dot.when(false, ()=>"if").otherwise(()=>"else"); }, "else");
+addTest("If false else else.", function(){ return dot.when(false, ()=>"if").otherwise(()=>"else1").otherwise(()=>"else2"); }, "else1else2");
+addTest("If true elseif true else.", function(){ return dot.when(true, ()=>"if").otherwiseWhen(true, ()=>"elseif").otherwise(()=>"else"); }, "if");
+addTest("If true elseif false else.", function(){ return dot.when(true, ()=>"if").otherwiseWhen(false, ()=>"elseif").otherwise(()=>"else"); }, "if");
+addTest("If false elseif true else.", function(){ return dot.when(false, ()=>"if").otherwiseWhen(true, ()=>"elseif").otherwise(()=>"else"); }, "elseif");
+addTest("If false elseif false else.", function(){ return dot.when(false, ()=>"if").otherwiseWhen(false, ()=>"elseif").otherwise(()=>"else"); }, "else");
+addTest("Nested ifs.", function(){
+return dot.when(true,
+		dot.when(false, ()=>"if if")
+		.otherwiseWhen(true, ()=>"if elseif")
+		.otherwise(()=>"if else")
+	).otherwiseWhen(true, ()=>"elseif")
+	.otherwise(()=>"else");
+}, "if elseif");

package/unittests/refs.test.ts

@@ -0,0 +1,36 @@
+import addTest from "./core";
+import dot, { IDotElement } from "../src/dothtml";
+
+class RefComponent1 extends dot.Component{
+	builder(): IDotElement {
+		return dot.div(
+			dot
+				.span().ref("a")
+				.span().ref("b")
+				.span().ref("c")
+		)
+	}
+	ready(){
+		dot(this.$refs.a).t("a");
+		dot(this.$refs.b).t("b");
+		dot(this.$refs.c).t("c");
+	}
+}
+class RefComponent2 extends dot.Component{
+	builder(content): IDotElement {
+		return dot.div(
+			dot.span().ref("a")
+			.h(content)
+		)
+	}
+	ready(){
+		dot(this.$refs.a).t("1");
+	}
+}
+
+addTest("Ref.", ()=>{
+	return dot.h(new RefComponent1())
+}, "<div><span>a</span><span>b</span><span>c</span></div>");
+addTest("Nested ref.", ()=>{
+	return dot.h(new RefComponent2(new RefComponent1()))
+}, "<div><span>1</span><div><span>a</span><span>b</span><span>c</span></div></div>");

package/unittests/routing.-.ts

@@ -0,0 +1,56 @@
+// import addTest from "./core";
+// import dot from "../src/dothtml";
+// import Component from "../src/component";
+
+// class defaultpage extends Component{builder(){return dot.h1("Default")}}
+// class page1 extends Component{builder(){return dot.h1("Page 1.")}}
+// class page2 extends Component{builder(){return dot.h1("Page 2.")}}
+// class page3 extends Component{builder(){return dot.h1("Page 3.").router()}}
+// class page4 extends Component{builder(){return dot.h1("Good.")}}
+// class page5 extends Component{builder(){return dot.h1("Bad.")}}
+// class page6_7 extends Component{builder(){return dot.h1("Page 6/7.")}}
+// class page6 extends Component{builder(){return dot.h1("Page 6.")}}
+// class page7 extends Component{builder(){return dot.h1("Page 7.")}}
+// class awesomepage extends Component{builder(){return dot.h1(params.params.title).p(params.params.body)}}
+// class notfound extends Component{builder(){return dot.h1("Not Found.")}}
+
+// var routes = [
+//     {title: "DOT Tests", path: "/", component: dot.defaultpage},
+//     {title: "Page 1", path: "1", component: dot.page1},
+//     {title: "Page 2", path: "2", component: dot.page2},
+//     {title: "Page 3", path: "3", component: dot.page3},
+//     {title: "Greedy Page 4", path: "greed", component: dot.page4},
+//     {title: "Greedy Page 5", path: "greed", component: dot.page5},
+//     {title: "Page 6/7", path: "6/7", component: dot.page6_7},
+//     {title: "Awesome", path: "awesome/{title}/{body}", component: dot.awesomepage},
+//     {title: "Ajax", path: "ajax", component: "testpage.js"},
+//     {title: "Not Found", path: "*", component: dot.notfound},
+// ];
+// // addTest("Navigate with no router.", function(){return dot.div("abc").navigate("1")}, "<div>abc</div>");
+// // addTest("Chainability of navigate.", function(){return dot.div("abc").navigate("1").div("def")}, "<div>abc</div><div>def</div>");
+// // addTest("Default content.", function(){return dot.router(routes, true)}, "<dothtml-router></dothtml-router>");
+// // addTest("Default content, undefined navigate.", function(){return dot.router(routes, true).navigate()}, "<dothtml-router><h1>Default</h1></dothtml-router>");
+// // addTest("Default content, / navigate.", function(){return dot.router(routes, true).navigate("/")}, "<dothtml-router><h1>Default</h1></dothtml-router>");
+// // addTest("Unknown route.", function(){return dot.router(routes, true).navigate("unknown")}, "<dothtml-router><h1>Not Found.</h1></dothtml-router>");
+// // addTest("Navigate to 1.", function(){return dot.router(routes, true).navigate("1")}, "<dothtml-router><h1>Page 1.</h1></dothtml-router>");
+// // addTest("Navigate to 1/.", function(){return dot.router(routes, true).navigate("1/")}, "<dothtml-router><h1>Page 1.</h1></dothtml-router>");
+// // addTest("Navigate to 1 then 2.", function(){return dot.router(routes, true).navigate("1").navigate("2")}, "<dothtml-router><h1>Page 2.</h1></dothtml-router>");
+// // addTest("Navigate to the same page.", function(){return dot.router(routes, true).navigate("1").navigate("1")}, "<dothtml-router><h1>Page 1.</h1></dothtml-router>");
+// // addTest("Navigate from 1 to undefined.", function(){return dot.router(routes, true).navigate("1").navigate()}, "<dothtml-router><h1>Default</h1></dothtml-router>");
+// // addTest("Navigate from 1 to /.", function(){return dot.router(routes, true).navigate("1").navigate("/")}, "<dothtml-router><h1>Default</h1></dothtml-router>");
+// // addTest("Navigate to 6/7.", function(){return dot.router(routes, true).navigate("6/7")}, "<dothtml-router><h1>Page 6/7.</h1></dothtml-router>");
+// // addTest("Navigate to 6/8.", function(){return dot.router(routes, true).navigate("6/8")}, "<dothtml-router><h1>Not Found.</h1></dothtml-router>");
+// // addTest("Params.", function(){return dot.router(routes, true).navigate("awesome/Hello/Hello_World")}, "<dothtml-router><h1>Hello</h1><p>Hello_World</p></dothtml-router>");
+// // addTest("Greedy route.", function(){return dot.router(routes, true).navigate("greed")}, "<dothtml-router><h1>Good.</h1></dothtml-router>");
+// // addTest("Load page file.", function(){return dot.router(routes, true).navigate("ajax")}, "<dothtml-router><h1>Loaded Page</h1><p>This page was loaded from a file!</p></dothtml-router>");
+// // NESTED ROUTING (NOT SUPPORTED YET)
+// // addTest("Route not found child.", function(){return dot.router(routes, true).navigate("3/notfound")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router>Route \"notfound\" not found.</dothtml-router></dothtml-router>");
+// // addTest("Router in router / default.", function(){return dot.router(routes, true).navigate("3")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Default</h1></dothtml-router></dothtml-router>");
+// // addTest("Router in router / page 3/1.", function(){return dot.router(routes, true).navigate("3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router>");
+// // addTest("Router in router / page 3/2 => 3/1.", function(){return dot.router(routes, true).navigate("3/2").navigate("3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router>");
+// // addTest("Router in router / page 3/2 => 2.", function(){return dot.router(routes, true).navigate("3/1").navigate("2")}, "<dothtml-router><h1>Page 2.</h1></dothtml-router>");
+// // addTest("Router in router / page 2 => 3/1.", function(){return dot.router(routes, true).navigate("2").navigate("3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router>");
+// // addTest("Router in router / page 3/3/1.", function(){return dot.router(routes, true).navigate("3/3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router></dothtml-router>");
+// // CURRENTLY UNDEFINED:
+// //addTest("Two routers.", function(){return dot.router(routes, true).router(routes, true).navigate("1")}, "<dothtml-router></dothtml-router><dothtml-router><h1>Page 1.</h1></dothtml-router>");
+// // - Add test case for ensuring routers are removed from the allRouters object after calling empty().

package/unittests/{scopes.test.js → scopes.test.ts}

@@ -1,5 +1,5 @@
 import addTest from "./core";
-import dot from "../src/index";
+import dot from "../src/dothtml";
 
 dot.resetScopeClass();
 
@@ -15,8 +15,8 @@ addTest("Nested element new document.", function(){ return dot.scopeClass("MYSCO
 // I really don't care about this behavior. We can leave it as undefined, or accept the current behavior.
 //addTest("Scoped h.", function(){ return dot.scopeClass("MYSCOPE2", dot.h(dot.div().class("test"))); }, "<div class=\"dot-MYSCOPE2-test\"></div>");
 addTest("Nested scope.", function(){ return dot.scopeClass("MYSCOPE3", dot.div(dot.div().class("test-inner-before").scopeClass("MYSCOPE4", dot.div().class("test-inner"))).class("test-outer")); }, "<div class=\"dot-MYSCOPE3-test-outer\"><div class=\"dot-MYSCOPE3-test-inner-before\"></div><div class=\"dot-MYSCOPE4-test-inner\"></div></div>");
-addTest("Autoscope 1.", function(){ return dot.scopeClass(dot.div().class("test")); }, "<div class=\"dot-10000-test\"></div>");
-addTest("Autoscope 2.", function(){ return dot.scopeClass(dot.div().class("test")); }, "<div class=\"dot-10001-test\"></div>");
-addTest("Autoscope 2 with nest.", function(){ return dot.scopeClass(dot.div(dot.div().class("test2")).class("test")); }, "<div class=\"dot-10002-test\"><div class=\"dot-10002-test2\"></div></div>");
+addTest("Autoscope 1.", function(){ return dot.scopeClass(null, dot.div().class("test")); }, "<div class=\"dot-10000-test\"></div>");
+addTest("Autoscope 2.", function(){ return dot.scopeClass(null, dot.div().class("test")); }, "<div class=\"dot-10001-test\"></div>");
+addTest("Autoscope 2 with nest.", function(){ return dot.scopeClass(null, dot.div(dot.div().class("test2")).class("test")); }, "<div class=\"dot-10002-test\"><div class=\"dot-10002-test2\"></div></div>");
 
-addTest("Reset scope.", function(){ dot.resetScopeClass(); return dot.scopeClass(dot.div().class("test")); }, "<div class=\"dot-10000-test\"></div>");
+addTest("Reset scope.", function(){ dot.resetScopeClass(); return dot.scopeClass(null, dot.div().class("test")); }, "<div class=\"dot-10000-test\"></div>");

package/unittests/special-tags.test.ts

@@ -0,0 +1,39 @@
+import addTest from "./core";
+import dot from "../src/dothtml";
+
+addTest("citeE.", function(){ return dot.cite(); }, "<cite></cite>");
+addTest("dataE.", function(){ return dot.data(); }, "<data></data>"); //Element not supported by most browsers.
+addTest("formE.", function(){ return dot.form(); }, "<form></form>");
+addTest("labelE.", function(){ return dot.label(); }, "<label></label>");
+addTest("spanE.", function(){ return dot.span(); }, "<span></span>");
+addTest("summaryE.", function(){ return dot.summary(); }, "<summary></summary>");
+
+addTest("citeA.", function(){ return dot.del().quoteCite(1); }, "<del cite=\"1\"></del>");
+addTest("dataA.", function(){ return dot.object().objectData(1); }, "<object data=\"1\"></object>");
+addTest("formA.", function(){ return dot.input().whichForm(1); }, "<input form=\"1\">");
+addTest("labelA.", function(){ return dot.track().trackLabel(1); }, ["<track label=\"1\">", "<track label=\"1\"></track>"]);
+addTest("spanA.", function(){ return dot.col().colSpan(1); }, "<col span=\"1\">");
+addTest("summaryA.", function(){ return dot.table().tableSummary(1); }, "<table summary=\"1\"></table>");
+addTest("optionLabelA.", function(){ return dot.option().optionLabel(1); }, "<option label=\"1\"></option>");
+addTest("acceptCharsetA.", function(){ return dot.form().acceptCharset("utf-8"); }, "<form accept-charset=\"utf-8\"></form>");
+
+// These aren't required anymore because all the overlapping names have been resolved.
+// addTest("Smart cite - attribute.", function(){ return dot.del().cite(1); }, "<del cite=\"1\"></del>");
+// addTest("Smart form - attribute.", function(){ return dot.input().form(1); }, "<input form=\"1\">");
+// addTest("Smart label - attribute.", function(){ return dot.track().label(1); }, ["<track label=\"1\">", "<track label=\"1\"></track>"]);
+// addTest("Smart span - attribute.", function(){ return dot.col().span(1); }, "<col span=\"1\">");
+// addTest("Smart summary - attribute.", function(){ return dot.table().summary(1); }, "<table summary=\"1\"></table>");
+// addTest("Smart cite - element.", function(){ return dot.div().cite(); }, "<div></div><cite></cite>");
+// addTest("Smart form - element.", function(){ return dot.div().form(); }, "<div></div><form></form>");
+// addTest("Smart label - element.", function(){ return dot.div().label(); }, "<div></div><label></label>");
+// addTest("Smart span - element.", function(){ return dot.div().span(); }, "<div></div><span></span>");
+// addTest("Smart summary - element.", function(){ return dot.div().summary(); }, "<div></div><summary></summary>");
+// addTest("Smart cite - append to blank.", function(){ return dot.citeE(); }, "<cite></cite>");
+// addTest("Smart form - append to blank.", function(){ return dot.formE(); }, "<form></form>");
+// addTest("Smart label - append to blank.", function(){ return dot.labelE(); }, "<label></label>");
+// addTest("Smart span - append to blank.", function(){ return dot.spanE(); }, "<span></span>");
+// addTest("Smart summary - append to blank.", function(){ return dot.summaryE(); }, "<summary></summary>");
+// addTest("Smart data - basic attribute.", function(){ return dot.object().data(1); }, "<object data=\"1\"></object>");
+
+addTest("Smart data - custom attribute.", function(){ return dot.div().customData("a", 1); }, "<div data-a=\"1\"></div>");
+addTest("Span after an image.", function(){ return dot.span("1").img().src("").span("2"); }, "<span>1</span><img src=\"\"><span>2</span>");

package/unittests/styles.test.ts

@@ -0,0 +1,9 @@
+import addTest from "./core";
+import dot from "../src/dothtml";
+
+addTest("Styles as a string.", function(){ return dot.t(dot.css.width(400).height(300)); }, "width:400px;height:300px;");
+addTest("String styles a div.", function(){ return dot.div().style(dot.css.width(400).height(300)); }, "<div style=\"width:400px;height:300px;\"></div>");
+
+// addTest("Builder styles a div.", function(){ return dot.div().style(css => {
+// 	css.width(400).height(300);
+// }); }, "<div style=\"width:400px;height:300px;\"></div>");

package/unittests/{testpage.js → testpage.ts}

@@ -1,3 +1,5 @@
+import dot from "../src/dot";
+
 (function(){
 	return dot.h1("Loaded Page").p("This page was loaded from a file!");
 });

package/unittests/{wait.test.js → wait.test.ts}

@@ -1,5 +1,5 @@
 import addTest from "./core";
-import dot from "../src/index";
+import dot from "../src/dothtml";
 
 addTest("Deferred.", function(){ return dot.div(dot.defer(function(v){v.h(1)}))}, "<div>1</div>");
 // TODO: running
@@ -10,15 +10,18 @@ addTest("Wait, for nothing.", function(){ return dot.div(1).wait(1, function(){}
 addTest("Wait, for a string.", function(){ return dot.div(1).wait(1, "3").div(2); }, "<div>1</div>3<div>2</div>", 25);
 addTest("Wait, for a div.", function(){ return dot.div(1).wait(1, dot.div(3)).div(2); }, "<div>1</div><div>3</div><div>2</div>", 25);
 addTest("Wait, inside a div.", function(){ return dot.div(1).div(dot.wait(1, dot.div(3))).div(2); }, "<div>1</div><div><div>3</div></div><div>2</div>", 25);
-addTest("Wait, for class.", function(){ return dot.div(1).wait(1, dot["class"](3)).div(2); }, "<div class=\"3\">1</div><div>2</div>", 25);
-addTest("Wait, for class 2.", function(){ return dot.div(dot.div(1).wait(1, dot["class"](3)).div(2)); }, "<div><div class=\"3\">1</div><div>2</div></div>", 25);
-addTest("Wait, for class, internal.", function(){ return dot.div(dot.wait(1, dot["class"](3))).div(2); }, "<div class=\"3\"></div><div>2</div>", 25);
+
+// Not supported anymore. If required, do something custom in Component.ready.
+// addTest("Wait, for class.", function(){ return dot.div(1).wait(1, dot["class"](3)).div(2); }, "<div class=\"3\">1</div><div>2</div>", 25);
+// addTest("Wait, for class 2.", function(){ return dot.div(dot.div(1).wait(1, dot["class"](3)).div(2)); }, "<div><div class=\"3\">1</div><div>2</div></div>", 25);
+// addTest("Wait, for class, internal.", function(){ return dot.div(dot.wait(1, dot["class"](3))).div(2); }, "<div class=\"3\"></div><div>2</div>", 25);
+
 addTest("Wait, for a function.", function(){ return dot.div(1).wait(1, function(){return dot.div(3)}).div(2); }, "<div>1</div><div>3</div><div>2</div>", 25);
 addTest("Wait, append to nothing.", function(){ return dot.wait(1, dot.div(3)); }, "<div>3</div>", 25);
 addTest("Wait, append to nothing, concat 2.", function(){ return dot.wait(1, dot.div(3)).h(2); }, "<div>3</div>2", 25);
 addTest("Wait, append between text nodes.", function(){ return dot.h(1).wait(1, dot.div(3)).h(2); }, "1<div>3</div>2", 25);
 addTest("Wait, out of order.", function(){ return dot.wait(15, dot.div(1)).wait(10, dot.div(2)).wait(5, dot.div(3)); }, "<div>1</div><div>2</div><div>3</div>", 25);
-addTest("Wait, iterate.", function(){ return dot.div(1).wait(1, dot.h("s").iterate(3, "-").h("f")).div(2); }, "<div>1</div>s---f<div>2</div>", 25);
+addTest("Wait, iterate.", function(){ return dot.div(1).wait(1, dot.h("s").iterate(3, ()=>"-").h("f")).div(2); }, "<div>1</div>s---f<div>2</div>", 25);
 addTest("Waitception, early.", function(){ return dot.wait(10, dot.div(dot.wait(50, dot.div(1)))); }, "<div><dothtml-defer></dothtml-defer></div>", 25);
 addTest("Waitception, late, times shouldn't stack.", function(){ return dot.wait(5, dot.div(dot.wait(5, dot.div(1)))); }, "<div><div>1</div></div>", 25);
 // addTest("Waitception, late, times stack for functions 1/2.", function(){ return dot.wait(50, function(){return dot.div(dot.wait(100, dot.div(1)))}); }, "<div><dothtml-defer></dothtml-defer></div>", 75);

package/webpack.config.js

@@ -4,8 +4,11 @@ module.exports = {
   entry: path.resolve(__dirname, "src/index.js"),
   mode: "production",
   target: "web",
+  entry: {
+    main: "./src/dothtml.ts"
+  },
   output: {
-    filename: "dothtml.min.js",
+    filename: "dothtml.js",
     library: {
         //name: "dothtml",
         type: "commonjs2"
@@ -13,4 +16,13 @@ module.exports = {
     path: path.resolve(__dirname, "lib"),
     clean: true,
   },
+  resolve: {
+    extensions: [".ts"]
+  },
+  module:{
+    rules: [{
+      test: /\.ts$/,
+      loader: "ts-loader"
+    }]
+  },
 };