dothtml 5.0.4 → 5.1.1

package/src/styling/unit-function-tables.ts

@@ -0,0 +1,24 @@
+export const AllLengthUnits = [
+	{unit:"Em"},
+	{unit:"Ex"},
+	{unit:"Ch"},
+	{unit:"Rem"},
+	{unit:"Vw"},
+	{unit:"Vh"},
+	{unit:"Vmin"},
+	{unit:"Vmax"},
+	{unit:"%", jsName:"P"},
+	{unit:"Cm"},
+	{unit:"Mm"},
+	{unit:"In"},
+	{unit:"Px"},
+	{unit:"Pt"},
+	{unit:"Pc"}
+];
+
+export const AllAngleUnits = [
+	{unit:"Deg"},
+	{unit:"Grad"},
+	{unit:"Rad"},
+	{unit:"Turn"}
+];

package/unittests/basic-functionality.test.ts

@@ -85,4 +85,4 @@ addTest("Script, return dot.", function(){ return dot.script(function(){return 2
 addTest("Script, return function.", function(){ return dot.script(function(){return function(){return 2};}).div(1); }, "<div>1</div>");
 
 // CSS 
-addTest("CSS module included.", function(){ return dot.h(dot.css?.color ? "yes" : "no"); }, "yes");
+addTest("CSS module included.", function(){ return dot.h(dot["css"] ? "yes" : "no"); }, "yes");

package/unittests/calc.test.ts

@@ -0,0 +1,2 @@
+
+// TODO: calc.

package/unittests/{components-data.test.ts → components/components-data.test.ts}

@@ -1,6 +1,6 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-import Component from "../src/component";
+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.
 

package/unittests/{components.test.ts → components/components.test.ts}

@@ -1,6 +1,6 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-import Component from "../src/component";
+import addTest from "../core";
+import dot, { DotComponent } from "../../src/dothtml";
+import Component from "../../src/component";
 
 class comp_legacy extends dot.Component{
 	
@@ -211,11 +211,12 @@ addTest("Styles should not apply to nested elements.", function(){
 			return dot.div(this.params[0]);
 		}
 		style(css){
+			// console.log("CSS???", !!css);
 			css("div").backgroundColor("#FF0000");
 		}
 	};
 
-	class CompInner extends dot.Component{
+	class CompInner extends DotComponent{
 		builder(){
 			return dot.div("FOOBAR");
 		}

package/unittests/input-bindings.test.ts

@@ -17,7 +17,7 @@ class CompBindingInputChangeOption extends Component{
         //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()
+        dot(this.$el.parentNode as ParentNode).empty()
         .div("Var: " + this.props.myValue)
         .div("Input: " + v);
     }
@@ -58,7 +58,7 @@ class CompBindingWrite extends Component{
     }
     ready(){
         var v = dot(this.$el).as(dot.input).getVal();
-        dot(this.$el.parentNode).empty()
+        dot(this.$el.parentNode as ParentNode).empty()
         .div("Var: " + this.props.v2)
         .div("Input: " + v);
     }
@@ -73,7 +73,7 @@ class CompBindingVarChange extends Component{
     ready(){
         this.props.v1 = this.props.v2;
         var v = dot(this.$el).as(dot.input).getVal();
-        dot(this.$el.parentNode).empty()
+        dot(this.$el.parentNode as ParentNode).empty()
         .div("Var: " + this.props.v1)
         .div("Input: " + v);
     }
@@ -92,7 +92,7 @@ class CompBindingInputChange extends Component{
         var v = dot(this.$el).as(dot.input).getVal();
         this.$el.dispatchEvent(new Event("change"));
         //this.v1 = v;
-        dot(this.$el.parentNode).empty()
+        dot(this.$el.parentNode as ParentNode).empty()
         .div("Var: " + this.props.v1)
         .div("Input: " + v);
     }
@@ -113,7 +113,7 @@ class CompBindingWriteOption extends Component{
     }
     ready(){
         var v = dot(this.$el).as(dot.select).getVal();
-        dot(this.$el.parentNode).empty()
+        dot(this.$el.parentNode as ParentNode).empty()
         .div("Var: " + this.props.myValue).div("Input: " + v)
     }
 }
@@ -129,7 +129,7 @@ class CompBindingVarChangeOption extends Component{
     ready(){
         this.props.myValue = true;
         var v = dot(this.$el).as(dot.select).getVal();
-        dot(this.$el.parentNode).empty()
+        dot(this.$el.parentNode as ParentNode).empty()
         .div("Var: " + this.props.myValue)
         .div("Input: " + v)
     }

package/unittests/non-function-props-rerender.test.ts

@@ -0,0 +1,85 @@
+
+/**
+ * 2022-07-28
+ * The goal of these tests is to verify that the builder and style functions are called once when properties are updated.
+ * The previous behavior was that specific elements within components would only be re-rendered if a property was used inside of a function.
+ * This resulted in some annoying syntax, such as `dot.div(()=>{return this.props.x})`. And then restyling wouldn't happen at all unless expliticly executed.
+*/
+
+import dot, { DotComponent, IDotCss, IDotElement } from "../src/dothtml";
+import addTest from "./core";
+
+class TestComponentA extends DotComponent{
+	props={
+		myValue: "not-set",
+		rebuild: "no",
+		restyle: "no",
+	}
+
+	builds: number = 0;
+	styled: number = 0;
+
+	builder(): IDotElement {
+		this.builds++;
+
+		this.props.rebuild;
+
+		return dot.div(
+			dot.div(this.props.myValue).div(this.props.myValue).div(()=>{ return this.props.myValue })
+		);
+	}
+	
+	style(css: IDotCss){
+		this.styled++;
+
+		this.props.restyle;
+		this.props.myValue;
+	}
+}
+
+// addTest("Basic build and style.", function(){ 
+// 	let component = new TestComponentA();
+// 	dot(document.body).h(component);
+
+// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
+// }, "<div><div>not-set</div><div>not-set</div><div>not-set</div></div> 1 1");
+
+// addTest("Update rebuild prop.", function(){ 
+// 	let component = new TestComponentA();
+// 	dot(document.body).h(component);
+
+// 	component.props.rebuild = "yes 1";
+// 	component.props.rebuild = "yes 2";
+
+// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
+// }, "<div><div>not-set</div><div>not-set</div><div>not-set</div></div> 3 1");
+
+// addTest("Update restyle prop.", function(){ 
+// 	let component = new TestComponentA();
+// 	dot(document.body).h(component);
+
+// 	component.props.restyle = "yes 1";
+// 	component.props.restyle = "yes 2";
+
+// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
+// }, "<div><div>not-set</div><div>not-set</div><div>not-set</div></div> 1 3");
+
+addTest("Update value.", function(){ 
+	let component = new TestComponentA();
+	dot(document.body).h(component);
+
+	component.props.myValue = "set";
+
+	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
+}, "<div><div>set</div><div>set</div><div>set</div></div> 2 2");
+
+// addTest("Update value and other props.", function(){ 
+// 	let component = new TestComponentA();
+// 	dot(document.body).h(component);
+
+// 	component.props.rebuild = "yes";
+// 	component.props.restyle = "yes";
+// 	component.props.myValue = "set";
+
+// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
+// }, "<div><div>set</div><div>set</div><div>set</div></div> 3 3");

package/unittests/styling/animations.test.ts

@@ -0,0 +1,14 @@
+
+import addTest from "../core";
+import dot from "../../src/dothtml";
+
+// For testing the passing of data into and out of components via properties and events, respectively.
+
+addTest("Dotcss returns stringable value.", function(){
+	return dot.div(dot.css.color(0x102030).border("1px solid black").toString());
+}, "<div>color:\"rgb(16, 32, 48);\"border:\" 1px solid black \";</div>");
+
+addTest("Styling an element.", function(){
+	return dot.div().style(dot.css.color(0x102030).border("1px solid black").toString());
+}, "<div style=\"color:'rgb(16, 32, 48);'border:' 1px solid black ';\"></div>");
+

package/unittests/styling/inline-styling.test.ts

@@ -0,0 +1,18 @@
+import addTest from "../core";
+import dot from "../../src/dothtml";
+
+addTest("Dotcss returns stringable value.", function(){
+	return dot.div(dot.css.color(0x102030).border("1px solid black").toString());
+}, `<div>color:"rgb(16, 32, 48);"border:" 1px solid black ";</div>`);
+
+addTest("Styling an element.", function(){
+	return dot.div().style(dot.css.color(0x102030).border("1px solid black"));
+}, `<div style="color:'rgb(16, 32, 48);'border:' 1px solid black ';"></div>`);
+
+addTest("Restyling an element.", function(){
+	let div = dot.div().style(dot.css.position("absolute").position("fixed"));
+	// dot.css(div.getLast()).position("absolute");
+	// dot.css(div.getLast()).position("fixed");
+	return div;
+}, `<div style="position: 'fixed';"></div>`);
+

package/unittests/styling/pseudo-selectors.test.ts

@@ -0,0 +1,29 @@
+
+import addTest from "../core";
+import dot from "../../src/dothtml";
+
+// Possible syntaxes:
+// 1. Multiple style functions.
+// 	- dot(target).style(dot.css...)
+// 	- dot(target).styleHover(dot.css...)
+// 	P: Simple syntax.
+// 	C: How would this work in a component's style builder? Multiple style builders seems messed up.
+// 2. Pseudo functions.
+// 	- dot(target).style(dot.css...pseudoHover(css=>css...).pseudoVisited(css=>css...)...)
+//  P: Works for component style functions.
+//  C: Builder syntax is somewhat heavy.
+// 3. DOThtml style.
+// 	- dot(target).style(dot.css...pseudoHover...pseudoVisted...pseudoNone...)
+//  P: No weird function syntax.
+//  P: Consistent with dothtml.
+//  C: Inconsistent with dotcss.
+//  C: Just weird.
+// 4. Pseudo functions v2.
+// 	- dot(target).style(dot.css...pseudo("hover", css=>css...).pseudo("visited", css=>css...)...)
+// 	P/C: same as 2.
+
+// I think 2 is the winner.
+
+// addTest("Dotcss returns stringable value.", function(){
+// 	return dot.a("Hover over me!").style(dot.css.pseudoHover(c=>c.color("green")));
+// }, `<a style="color:"rgb(0, 255, 0);">Hover over me!</a>`); // TODO: need a way to inject the hover event.

package/unittests/styling/transformations.test.ts

@@ -0,0 +1,234 @@
+
+import addTest from "../core";
+import dot from "../../src/dothtml";
+
+// Test coverage should include:
+// 	perspective: (v: LengthOrDefault)=>ITransformationContext;
+
+addTest("Matrix.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.matrix(1,2,3,4,5,6))
+	);
+}, `<div style="transform:'matrix(1,2,3,4,5,6)';"></div>`);
+addTest("Matrix 3d.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16))
+	);
+}, `<div style="transform:'matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16)';"></div>`);
+
+addTest("Translate (x only).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translate(10))
+	);
+}, `<div style="transform:'translate(10px)';"></div>`);
+addTest("Translate.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translate(10, 20))
+	);
+}, `<div style="transform:'translate(10px,20px)';"></div>`);
+addTest("Translate (custom units).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translate("10cm", "20cm"))
+	);
+}, `<div style="transform:'translate(10cm,20cm)';"></div>`);
+addTest("Translate (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translateCm(10, 20))
+	);
+}, `<div style="transform:'translate(10cm,20cm)';"></div>`);
+addTest("Translate X.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translateX("10cm"))
+	);
+}, `<div style="transform:'translateX(10cm)';"></div>`);
+addTest("Translate X (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translateXCm(10))
+	);
+}, `<div style="transform:'translateX(10cm)';"></div>`);
+addTest("Translate Y.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translateY("10cm"))
+	);
+}, `<div style="transform:'translateY(10cm)';"></div>`);
+addTest("Translate Y (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translateYCm(10))
+	);
+}, `<div style="transform:'translateY(10cm)';"></div>`);
+addTest("Translate Z.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translateZ("10cm"))
+	);
+}, `<div style="transform:'translateZ(10cm)';"></div>`);
+addTest("Translate Z (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translateZCm(10))
+	);
+}, `<div style="transform:'translateZ(10cm)';"></div>`);
+addTest("Translate 3D.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translate3d(10, 20, 30))
+	);
+}, `<div style="transform:'translate3d(10px,20px,30px)';"></div>`);
+addTest("Translate 3D (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translate3dCm(10, 20, 30))
+	);
+}, `<div style="transform:'translate3d(10cm,20cm,30cm)';"></div>`);
+
+addTest("Scale (x only).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.scale(10))
+	);
+}, `<div style="transform:'scale(10,1)';"></div>`);
+addTest("Scale.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.scale(10, 20))
+	);
+}, `<div style="transform:'scale(10,20)';"></div>`);
+addTest("Scale custom units.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.scale(10, 20))
+	);
+}, `<div style="transform:'scale(10,20)';"></div>`);
+addTest("Scale X.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.scaleX(10))
+	);
+}, `<div style="transform:'scaleX(10)';"></div>`);
+addTest("Scale Y.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.scaleY(10))
+	);
+}, `<div style="transform:'scaleY(10)';"></div>`);
+addTest("Scale Z.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.scaleZ(10))
+	);
+}, `<div style="transform:'scaleZ(10)';"></div>`);
+addTest("Scale 3D.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.scale3d(10, 20, 30))
+	);
+}, `<div style="transform:'scale3d(10,20,30)';"></div>`);
+
+addTest("Rotate.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotate(10))
+	);
+}, `<div style="transform:'rotate(10deg)';"></div>`);
+addTest("Rotate custom units.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotate("10rad"))
+	);
+}, `<div style="transform:'rotate(10rad)';"></div>`);
+addTest("Rotate (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotateGrad(10))
+	);
+}, `<div style="transform:'rotate(10grad)';"></div>`);
+addTest("Rotate X.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotateX(10))
+	);
+}, `<div style="transform:'rotateX(10deg)';"></div>`);
+addTest("Rotate X (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotateXTurn(10))
+	);
+}, `<div style="transform:'rotateX(10turn)';"></div>`);
+addTest("Rotate Y.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotateY(10))
+	);
+}, `<div style="transform:'rotateY(10deg)';"></div>`);
+addTest("Rotate Y (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotateYRad(10))
+	);
+}, `<div style="transform:'rotateY(10rad)';"></div>`);
+addTest("Rotate Z.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotateZ(10))
+	);
+}, `<div style="transform:'rotateZ(10deg)';"></div>`);
+addTest("Rotate Z (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotateZGrad(10))
+	);
+}, `<div style="transform:'rotateZ(10grad)';"></div>`);
+addTest("Rotate 3D.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotate3d(10, 20, 30, 40))
+	);
+}, `<div style="transform:'rotate3d(10,20,30,40deg)';"></div>`);
+addTest("Rotate 3D (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.rotate3dRad(10, 20, 30, 40))
+	);
+}, `<div style="transform:'rotate3d(10,20,30,40rad)';"></div>`);
+
+addTest("Skew (x only).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skew(1))
+	);
+}, `<div style="transform:'skew(1deg)';"></div>`);
+addTest("Skew.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skew(1, 2))
+	);
+}, `<div style="transform:'skew(1deg,2deg)';"></div>`);
+addTest("Skew (custom units).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skew("1grad", "2deg"))
+	);
+}, `<div style="transform:'skew(1grad,2deg)';"></div>`);
+addTest("Skew (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skewGrad(1, 2))
+	);
+}, `<div style="transform:'skew(1grad,2grad)';"></div>`);
+addTest("Skew X.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skewX(5))
+	);
+}, `<div style="transform:'skewX(5deg)';"></div>`);
+addTest("Skew X (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skewXRad(5))
+	);
+}, `<div style="transform:'skewX(5rad)';"></div>`);
+addTest("Skew Y.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skewY(5))
+	);
+}, `<div style="transform:'skewY(5deg)';"></div>`);
+addTest("Skew Y (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.skewYTurn(0.5))
+	);
+}, `<div style="transform:'skewY(0.5turn)';"></div>`);
+
+addTest("Perspective.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.perspective(100))
+	);
+}, `<div style="transform:'perspective(100px)';"></div>`);
+addTest("Perspective (units).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.perspective("100cm"))
+	);
+}, `<div style="transform:'perspective(100cm)';"></div>`);
+addTest("Perspective (unit function).", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.perspectiveCm(100))
+	);
+}, `<div style="transform:'perspective(100cm)';"></div>`);
+
+addTest("Combined transformation.", function(){
+	return dot.div().style(
+		dot.css.transform(t=>t.translate("10cm", "20cm").scale(2,4).rotate("0.5turn"))
+	);
+}, `<div style="transform:'translate(10cm,20cm) scale(2,4) rotate(0.5turn)';"></div>`);
+

package/lib/style-builder.d.ts

@@ -1,3 +0,0 @@
-import IDotCss from "./i-dotcss";
-declare const dotcss: IDotCss;
-export default dotcss;

package/src/dot-component-legacy.ts

@@ -1,79 +0,0 @@
-// import { ClassPrefix, eachK, isF, str } from "./dot-util";
-// import ERR from "./err";
-// import ObservableArray from "./observable-array";
-// import { AttrArgCallback } from "./arg-callback-obj";
-
-// /** How it works:
-//  * 
-//  * DotComponent represents the prototype for all components.
-//  * You create a component with dot.component().
-//  * This creates a new class (CC), which acts as the prototype to that component.
-//  * The prototype of CC is set to a new DotComponent.
-//  * Instantiating the component creates a new CC.
-//  * This CC is the `this` for each method of the component.
-//  * 
-//  * 
-//  * */ 
-
-// /** How computed props work.
-//  * 
-//  * If a computed property has a dependency on a regular property, 
-//  * assigning the computed property to an element will cause the regular property's getter to trigger, establishing the dependency.
-//  * */
-
-// function DotComponent(){
-// 	this.$el = null;
-// 	this.$refs = {};
-// 	this.__handlers = {};
-// }
-
-// DotComponent.prototype.__addHandler = function(eventName, event){
-// 	var h = this.__handlers[eventName];
-// 	if(!h) h = this.__handlers[eventName] = [];
-// 	h.push(event);
-// }
-
-// var dot, _p, _D;
-
-
-
-
-
-
-
-// /**
- 
-//  */
-// export function addComponent(prms: ComponentParams){
-	
-// 	// Setting this potentially allows automatic code completion to get the method signature from builder. 
-// 	// var comp = prms.builder;
-
-// 	let n = prms.name;
-
-// 	n && (componentNames[n] = 1);
-// 	var CC = function(){
-// 		DotComponent.call(this);
-// 		this.rawProps = {};
-// 		this.__propDependencies = {};
-// 		this.__prms = prms;
-// 	}
-// 	CC.prototype = Object.create(DotComponent.prototype);
-// 	CC.prototype.constructor = CC;
-
-
-
-	
-
-// 	prms.registered && prms.registered.apply(CC.prototype);
-
-// 	return comp;
-// };
-
-// // export function removeComponent(name){
-// // 	if(componentNames[name]){
-// // 		delete componentNames[name];
-// // 		delete dot[name];
-// // 		delete _p[name];
-// // 	}
-// // }