dothtml 5.2.2 → 5.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/dothtml.js +1 -1
- package/package.json +2 -1
- package/.vscode/launch.json +0 -34
- package/.vscode/settings.json +0 -6
- package/azure-pipelines.yml +0 -14
- package/babel.config.js +0 -1
- package/jest.config.ts +0 -207
- package/out.md +0 -1340
- package/src/arg-callback-obj.ts +0 -76
- package/src/built-in-components/nav-link.ts +0 -21
- package/src/built-in-components/router.ts +0 -315
- package/src/component.ts +0 -415
- package/src/dot-util.ts +0 -69
- package/src/dot.ts +0 -1147
- package/src/dothtml.ts +0 -39
- package/src/err.ts +0 -22
- package/src/event-bus.ts +0 -39
- package/src/i-dot.ts +0 -787
- package/src/node-polyfill.ts +0 -11
- package/src/observable-array.ts +0 -289
- package/src/styling/css-types.ts/css-angle.ts +0 -18
- package/src/styling/css-types.ts/css-color.ts +0 -233
- package/src/styling/css-types.ts/css-complex.ts +0 -20
- package/src/styling/css-types.ts/css-data-type.ts +0 -9
- package/src/styling/css-types.ts/css-filter.ts +0 -134
- package/src/styling/css-types.ts/css-length.ts +0 -20
- package/src/styling/css-types.ts/css-number.ts +0 -12
- package/src/styling/css-types.ts/css-percentage.ts +0 -10
- package/src/styling/css-types.ts/css-transform.ts +0 -220
- package/src/styling/css-types.ts/css-unknown.ts +0 -13
- package/src/styling/css-types.ts/css-url.ts +0 -41
- package/src/styling/i-dotcss.ts +0 -1198
- package/src/styling/style-builder.ts +0 -967
- package/src/styling/unit-function-tables.ts +0 -24
- package/tsconfig.json +0 -99
- package/unittests/advanced-bindings.test.ts +0 -421
- package/unittests/array-evaluation.test.ts +0 -7
- package/unittests/basic-functionality.test.ts +0 -88
- package/unittests/calc.test.ts +0 -6
- package/unittests/class-binding.test.ts +0 -227
- package/unittests/components/component-decorator.-.ts +0 -14
- package/unittests/components/components-data.test.ts +0 -153
- package/unittests/components/components.test.ts +0 -258
- package/unittests/computed.test.ts +0 -35
- package/unittests/core.ts +0 -66
- package/unittests/element-and-attribute-coverage.test.ts +0 -472
- package/unittests/hooks.test.ts +0 -67
- package/unittests/immutable-if.test.ts +0 -19
- package/unittests/input-bindings.test.ts +0 -166
- package/unittests/integration.test.ts +0 -5
- package/unittests/iterations.test.ts +0 -18
- package/unittests/logic.test.ts +0 -18
- package/unittests/non-function-props-rerender.test.ts +0 -86
- package/unittests/refs.test.ts +0 -36
- package/unittests/routing.-.ts +0 -56
- package/unittests/scopes.test.ts +0 -22
- package/unittests/special-tags.test.ts +0 -39
- package/unittests/styles.test.ts +0 -9
- package/unittests/styling/animations.test.ts +0 -14
- package/unittests/styling/filters.test.ts +0 -23
- package/unittests/styling/inline-styling.test.ts +0 -18
- package/unittests/styling/pseudo-selectors.test.ts +0 -33
- package/unittests/styling/transformations.test.ts +0 -234
- package/unittests/styling/value-interpretation.test.ts +0 -3
- package/unittests/testpage.ts +0 -5
- package/unittests/wait.test.ts +0 -31
- package/webpack.config.js +0 -28
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import addTest from "../core";
|
|
3
|
-
import dot from "../../src/dothtml";
|
|
4
|
-
|
|
5
|
-
// Test coverage should include:
|
|
6
|
-
// perspective: (v: LengthOrDefault)=>ITransformationContext;
|
|
7
|
-
|
|
8
|
-
addTest("Matrix.", function(){
|
|
9
|
-
return dot.div().style(
|
|
10
|
-
dot.css.transform(t=>t.matrix(1,2,3,4,5,6))
|
|
11
|
-
);
|
|
12
|
-
}, `<div style="transform:'matrix(1,2,3,4,5,6)';"></div>`);
|
|
13
|
-
addTest("Matrix 3d.", function(){
|
|
14
|
-
return dot.div().style(
|
|
15
|
-
dot.css.transform(t=>t.matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16))
|
|
16
|
-
);
|
|
17
|
-
}, `<div style="transform:'matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16)';"></div>`);
|
|
18
|
-
|
|
19
|
-
addTest("Translate (x only).", function(){
|
|
20
|
-
return dot.div().style(
|
|
21
|
-
dot.css.transform(t=>t.translate(10))
|
|
22
|
-
);
|
|
23
|
-
}, `<div style="transform:'translate(10px)';"></div>`);
|
|
24
|
-
addTest("Translate.", function(){
|
|
25
|
-
return dot.div().style(
|
|
26
|
-
dot.css.transform(t=>t.translate(10, 20))
|
|
27
|
-
);
|
|
28
|
-
}, `<div style="transform:'translate(10px,20px)';"></div>`);
|
|
29
|
-
addTest("Translate (custom units).", function(){
|
|
30
|
-
return dot.div().style(
|
|
31
|
-
dot.css.transform(t=>t.translate("10cm", "20cm"))
|
|
32
|
-
);
|
|
33
|
-
}, `<div style="transform:'translate(10cm,20cm)';"></div>`);
|
|
34
|
-
addTest("Translate (unit function).", function(){
|
|
35
|
-
return dot.div().style(
|
|
36
|
-
dot.css.transform(t=>t.translateCm(10, 20))
|
|
37
|
-
);
|
|
38
|
-
}, `<div style="transform:'translate(10cm,20cm)';"></div>`);
|
|
39
|
-
addTest("Translate X.", function(){
|
|
40
|
-
return dot.div().style(
|
|
41
|
-
dot.css.transform(t=>t.translateX("10cm"))
|
|
42
|
-
);
|
|
43
|
-
}, `<div style="transform:'translateX(10cm)';"></div>`);
|
|
44
|
-
addTest("Translate X (unit function).", function(){
|
|
45
|
-
return dot.div().style(
|
|
46
|
-
dot.css.transform(t=>t.translateXCm(10))
|
|
47
|
-
);
|
|
48
|
-
}, `<div style="transform:'translateX(10cm)';"></div>`);
|
|
49
|
-
addTest("Translate Y.", function(){
|
|
50
|
-
return dot.div().style(
|
|
51
|
-
dot.css.transform(t=>t.translateY("10cm"))
|
|
52
|
-
);
|
|
53
|
-
}, `<div style="transform:'translateY(10cm)';"></div>`);
|
|
54
|
-
addTest("Translate Y (unit function).", function(){
|
|
55
|
-
return dot.div().style(
|
|
56
|
-
dot.css.transform(t=>t.translateYCm(10))
|
|
57
|
-
);
|
|
58
|
-
}, `<div style="transform:'translateY(10cm)';"></div>`);
|
|
59
|
-
addTest("Translate Z.", function(){
|
|
60
|
-
return dot.div().style(
|
|
61
|
-
dot.css.transform(t=>t.translateZ("10cm"))
|
|
62
|
-
);
|
|
63
|
-
}, `<div style="transform:'translateZ(10cm)';"></div>`);
|
|
64
|
-
addTest("Translate Z (unit function).", function(){
|
|
65
|
-
return dot.div().style(
|
|
66
|
-
dot.css.transform(t=>t.translateZCm(10))
|
|
67
|
-
);
|
|
68
|
-
}, `<div style="transform:'translateZ(10cm)';"></div>`);
|
|
69
|
-
addTest("Translate 3D.", function(){
|
|
70
|
-
return dot.div().style(
|
|
71
|
-
dot.css.transform(t=>t.translate3d(10, 20, 30))
|
|
72
|
-
);
|
|
73
|
-
}, `<div style="transform:'translate3d(10px,20px,30px)';"></div>`);
|
|
74
|
-
addTest("Translate 3D (unit function).", function(){
|
|
75
|
-
return dot.div().style(
|
|
76
|
-
dot.css.transform(t=>t.translate3dCm(10, 20, 30))
|
|
77
|
-
);
|
|
78
|
-
}, `<div style="transform:'translate3d(10cm,20cm,30cm)';"></div>`);
|
|
79
|
-
|
|
80
|
-
addTest("Scale (x only).", function(){
|
|
81
|
-
return dot.div().style(
|
|
82
|
-
dot.css.transform(t=>t.scale(10))
|
|
83
|
-
);
|
|
84
|
-
}, `<div style="transform:'scale(10,1)';"></div>`);
|
|
85
|
-
addTest("Scale.", function(){
|
|
86
|
-
return dot.div().style(
|
|
87
|
-
dot.css.transform(t=>t.scale(10, 20))
|
|
88
|
-
);
|
|
89
|
-
}, `<div style="transform:'scale(10,20)';"></div>`);
|
|
90
|
-
addTest("Scale custom units.", function(){
|
|
91
|
-
return dot.div().style(
|
|
92
|
-
dot.css.transform(t=>t.scale(10, 20))
|
|
93
|
-
);
|
|
94
|
-
}, `<div style="transform:'scale(10,20)';"></div>`);
|
|
95
|
-
addTest("Scale X.", function(){
|
|
96
|
-
return dot.div().style(
|
|
97
|
-
dot.css.transform(t=>t.scaleX(10))
|
|
98
|
-
);
|
|
99
|
-
}, `<div style="transform:'scaleX(10)';"></div>`);
|
|
100
|
-
addTest("Scale Y.", function(){
|
|
101
|
-
return dot.div().style(
|
|
102
|
-
dot.css.transform(t=>t.scaleY(10))
|
|
103
|
-
);
|
|
104
|
-
}, `<div style="transform:'scaleY(10)';"></div>`);
|
|
105
|
-
addTest("Scale Z.", function(){
|
|
106
|
-
return dot.div().style(
|
|
107
|
-
dot.css.transform(t=>t.scaleZ(10))
|
|
108
|
-
);
|
|
109
|
-
}, `<div style="transform:'scaleZ(10)';"></div>`);
|
|
110
|
-
addTest("Scale 3D.", function(){
|
|
111
|
-
return dot.div().style(
|
|
112
|
-
dot.css.transform(t=>t.scale3d(10, 20, 30))
|
|
113
|
-
);
|
|
114
|
-
}, `<div style="transform:'scale3d(10,20,30)';"></div>`);
|
|
115
|
-
|
|
116
|
-
addTest("Rotate.", function(){
|
|
117
|
-
return dot.div().style(
|
|
118
|
-
dot.css.transform(t=>t.rotate(10))
|
|
119
|
-
);
|
|
120
|
-
}, `<div style="transform:'rotate(10deg)';"></div>`);
|
|
121
|
-
addTest("Rotate custom units.", function(){
|
|
122
|
-
return dot.div().style(
|
|
123
|
-
dot.css.transform(t=>t.rotate("10rad"))
|
|
124
|
-
);
|
|
125
|
-
}, `<div style="transform:'rotate(10rad)';"></div>`);
|
|
126
|
-
addTest("Rotate (unit function).", function(){
|
|
127
|
-
return dot.div().style(
|
|
128
|
-
dot.css.transform(t=>t.rotateGrad(10))
|
|
129
|
-
);
|
|
130
|
-
}, `<div style="transform:'rotate(10grad)';"></div>`);
|
|
131
|
-
addTest("Rotate X.", function(){
|
|
132
|
-
return dot.div().style(
|
|
133
|
-
dot.css.transform(t=>t.rotateX(10))
|
|
134
|
-
);
|
|
135
|
-
}, `<div style="transform:'rotateX(10deg)';"></div>`);
|
|
136
|
-
addTest("Rotate X (unit function).", function(){
|
|
137
|
-
return dot.div().style(
|
|
138
|
-
dot.css.transform(t=>t.rotateXTurn(10))
|
|
139
|
-
);
|
|
140
|
-
}, `<div style="transform:'rotateX(10turn)';"></div>`);
|
|
141
|
-
addTest("Rotate Y.", function(){
|
|
142
|
-
return dot.div().style(
|
|
143
|
-
dot.css.transform(t=>t.rotateY(10))
|
|
144
|
-
);
|
|
145
|
-
}, `<div style="transform:'rotateY(10deg)';"></div>`);
|
|
146
|
-
addTest("Rotate Y (unit function).", function(){
|
|
147
|
-
return dot.div().style(
|
|
148
|
-
dot.css.transform(t=>t.rotateYRad(10))
|
|
149
|
-
);
|
|
150
|
-
}, `<div style="transform:'rotateY(10rad)';"></div>`);
|
|
151
|
-
addTest("Rotate Z.", function(){
|
|
152
|
-
return dot.div().style(
|
|
153
|
-
dot.css.transform(t=>t.rotateZ(10))
|
|
154
|
-
);
|
|
155
|
-
}, `<div style="transform:'rotateZ(10deg)';"></div>`);
|
|
156
|
-
addTest("Rotate Z (unit function).", function(){
|
|
157
|
-
return dot.div().style(
|
|
158
|
-
dot.css.transform(t=>t.rotateZGrad(10))
|
|
159
|
-
);
|
|
160
|
-
}, `<div style="transform:'rotateZ(10grad)';"></div>`);
|
|
161
|
-
addTest("Rotate 3D.", function(){
|
|
162
|
-
return dot.div().style(
|
|
163
|
-
dot.css.transform(t=>t.rotate3d(10, 20, 30, 40))
|
|
164
|
-
);
|
|
165
|
-
}, `<div style="transform:'rotate3d(10,20,30,40deg)';"></div>`);
|
|
166
|
-
addTest("Rotate 3D (unit function).", function(){
|
|
167
|
-
return dot.div().style(
|
|
168
|
-
dot.css.transform(t=>t.rotate3dRad(10, 20, 30, 40))
|
|
169
|
-
);
|
|
170
|
-
}, `<div style="transform:'rotate3d(10,20,30,40rad)';"></div>`);
|
|
171
|
-
|
|
172
|
-
addTest("Skew (x only).", function(){
|
|
173
|
-
return dot.div().style(
|
|
174
|
-
dot.css.transform(t=>t.skew(1))
|
|
175
|
-
);
|
|
176
|
-
}, `<div style="transform:'skew(1deg)';"></div>`);
|
|
177
|
-
addTest("Skew.", function(){
|
|
178
|
-
return dot.div().style(
|
|
179
|
-
dot.css.transform(t=>t.skew(1, 2))
|
|
180
|
-
);
|
|
181
|
-
}, `<div style="transform:'skew(1deg,2deg)';"></div>`);
|
|
182
|
-
addTest("Skew (custom units).", function(){
|
|
183
|
-
return dot.div().style(
|
|
184
|
-
dot.css.transform(t=>t.skew("1grad", "2deg"))
|
|
185
|
-
);
|
|
186
|
-
}, `<div style="transform:'skew(1grad,2deg)';"></div>`);
|
|
187
|
-
addTest("Skew (unit function).", function(){
|
|
188
|
-
return dot.div().style(
|
|
189
|
-
dot.css.transform(t=>t.skewGrad(1, 2))
|
|
190
|
-
);
|
|
191
|
-
}, `<div style="transform:'skew(1grad,2grad)';"></div>`);
|
|
192
|
-
addTest("Skew X.", function(){
|
|
193
|
-
return dot.div().style(
|
|
194
|
-
dot.css.transform(t=>t.skewX(5))
|
|
195
|
-
);
|
|
196
|
-
}, `<div style="transform:'skewX(5deg)';"></div>`);
|
|
197
|
-
addTest("Skew X (unit function).", function(){
|
|
198
|
-
return dot.div().style(
|
|
199
|
-
dot.css.transform(t=>t.skewXRad(5))
|
|
200
|
-
);
|
|
201
|
-
}, `<div style="transform:'skewX(5rad)';"></div>`);
|
|
202
|
-
addTest("Skew Y.", function(){
|
|
203
|
-
return dot.div().style(
|
|
204
|
-
dot.css.transform(t=>t.skewY(5))
|
|
205
|
-
);
|
|
206
|
-
}, `<div style="transform:'skewY(5deg)';"></div>`);
|
|
207
|
-
addTest("Skew Y (unit function).", function(){
|
|
208
|
-
return dot.div().style(
|
|
209
|
-
dot.css.transform(t=>t.skewYTurn(0.5))
|
|
210
|
-
);
|
|
211
|
-
}, `<div style="transform:'skewY(0.5turn)';"></div>`);
|
|
212
|
-
|
|
213
|
-
addTest("Perspective.", function(){
|
|
214
|
-
return dot.div().style(
|
|
215
|
-
dot.css.transform(t=>t.perspective(100))
|
|
216
|
-
);
|
|
217
|
-
}, `<div style="transform:'perspective(100px)';"></div>`);
|
|
218
|
-
addTest("Perspective (units).", function(){
|
|
219
|
-
return dot.div().style(
|
|
220
|
-
dot.css.transform(t=>t.perspective("100cm"))
|
|
221
|
-
);
|
|
222
|
-
}, `<div style="transform:'perspective(100cm)';"></div>`);
|
|
223
|
-
addTest("Perspective (unit function).", function(){
|
|
224
|
-
return dot.div().style(
|
|
225
|
-
dot.css.transform(t=>t.perspectiveCm(100))
|
|
226
|
-
);
|
|
227
|
-
}, `<div style="transform:'perspective(100cm)';"></div>`);
|
|
228
|
-
|
|
229
|
-
addTest("Combined transformation.", function(){
|
|
230
|
-
return dot.div().style(
|
|
231
|
-
dot.css.transform(t=>t.translate("10cm", "20cm").scale(2,4).rotate("0.5turn"))
|
|
232
|
-
);
|
|
233
|
-
}, `<div style="transform:'translate(10cm,20cm) scale(2,4) rotate(0.5turn)';"></div>`);
|
|
234
|
-
|
package/unittests/testpage.ts
DELETED
package/unittests/wait.test.ts
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import addTest from "./core";
|
|
2
|
-
import dot from "../src/dothtml";
|
|
3
|
-
|
|
4
|
-
addTest("Deferred.", function(){ return dot.div(dot.defer(function(v){v.h(1)}))}, "<div>1</div>");
|
|
5
|
-
// TODO: running
|
|
6
|
-
// addTest("Long deferred.", function(){ return dot.div(dot.defer(function(v){setTimeout(function(){v.h(1);},0)})); }, "<div>1</div>", 25);
|
|
7
|
-
|
|
8
|
-
addTest("Wait, timing early.", function(){ return dot.div(1).wait(50, dot.div(3)).div(2); }, "<div>1</div><dothtml-defer></dothtml-defer><div>2</div>", 25);
|
|
9
|
-
addTest("Wait, for nothing.", function(){ return dot.div(1).wait(1, function(){}).div(2); }, "<div>1</div><div>2</div>", 25);
|
|
10
|
-
addTest("Wait, for a string.", function(){ return dot.div(1).wait(1, "3").div(2); }, "<div>1</div>3<div>2</div>", 25);
|
|
11
|
-
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);
|
|
12
|
-
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);
|
|
13
|
-
|
|
14
|
-
// Not supported anymore. If required, do something custom in Component.ready.
|
|
15
|
-
// 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);
|
|
16
|
-
// 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);
|
|
17
|
-
// 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);
|
|
18
|
-
|
|
19
|
-
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);
|
|
20
|
-
addTest("Wait, append to nothing.", function(){ return dot.wait(1, dot.div(3)); }, "<div>3</div>", 25);
|
|
21
|
-
addTest("Wait, append to nothing, concat 2.", function(){ return dot.wait(1, dot.div(3)).h(2); }, "<div>3</div>2", 25);
|
|
22
|
-
addTest("Wait, append between text nodes.", function(){ return dot.h(1).wait(1, dot.div(3)).h(2); }, "1<div>3</div>2", 25);
|
|
23
|
-
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);
|
|
24
|
-
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);
|
|
25
|
-
addTest("Waitception, early.", function(){ return dot.wait(10, dot.div(dot.wait(50, dot.div(1)))); }, "<div><dothtml-defer></dothtml-defer></div>", 25);
|
|
26
|
-
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);
|
|
27
|
-
// 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);
|
|
28
|
-
// addTest("Waitception, late, times stack for functions 2/2.", function(){ return dot.wait(1, function(){return dot.div(dot.wait(1, dot.div(1)))}); }, "<div><div>1</div></div>", 25);
|
|
29
|
-
//addTest("Waitception, late, deep class.", function(){ return dot.div().wait(10, dot.wait(10, dot["class"](1)))}, "<div class=\"1\"></div>", 500); //This one fails. Not sure if I should support it though.
|
|
30
|
-
addTest("Waitception, late.", function(){ return dot.wait(10, dot.div(dot.wait(20, dot.div(1)))); }, "<div><div>1</div></div>", 25);
|
|
31
|
-
addTest("Waitception, late, short inner interval.", function(){ return dot.wait(20, dot.div(dot.wait(10, dot.div(1)))); }, "<div><div>1</div></div>", 50);
|
package/webpack.config.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
const path = require("path");
|
|
2
|
-
|
|
3
|
-
module.exports = {
|
|
4
|
-
entry: path.resolve(__dirname, "src/index.js"),
|
|
5
|
-
mode: "production",
|
|
6
|
-
target: "web",
|
|
7
|
-
entry: {
|
|
8
|
-
main: "./src/dothtml.ts"
|
|
9
|
-
},
|
|
10
|
-
output: {
|
|
11
|
-
filename: "dothtml.js",
|
|
12
|
-
library: {
|
|
13
|
-
//name: "dothtml",
|
|
14
|
-
type: "commonjs2"
|
|
15
|
-
},
|
|
16
|
-
path: path.resolve(__dirname, "lib"),
|
|
17
|
-
clean: true,
|
|
18
|
-
},
|
|
19
|
-
resolve: {
|
|
20
|
-
extensions: [".ts"]
|
|
21
|
-
},
|
|
22
|
-
module:{
|
|
23
|
-
rules: [{
|
|
24
|
-
test: /\.ts$/,
|
|
25
|
-
loader: "ts-loader"
|
|
26
|
-
}]
|
|
27
|
-
},
|
|
28
|
-
};
|