dothtml 5.2.12 → 6.0.0-beta.10
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/build_module/constants.d.ts +1 -0
- package/build_module/constants.js +2 -0
- package/build_module/constants.js.map +1 -0
- package/build_module/css/css.d.ts +0 -0
- package/build_module/css/css.js +1 -0
- package/build_module/css/css.js.map +1 -0
- package/build_module/decoration/component.d.ts +14 -0
- package/build_module/decoration/component.js +43 -0
- package/build_module/decoration/component.js.map +1 -0
- package/build_module/decoration/style.d.ts +0 -0
- package/build_module/decoration/style.js +1 -0
- package/build_module/decoration/style.js.map +1 -0
- package/build_module/decoration/use-styles.d.ts +14 -0
- package/build_module/decoration/use-styles.js +19 -0
- package/build_module/decoration/use-styles.js.map +1 -0
- package/build_module/dot.d.ts +3 -0
- package/build_module/dot.js +534 -0
- package/build_module/dot.js.map +1 -0
- package/build_module/helpers/render-css.d.ts +2 -0
- package/build_module/helpers/render-css.js +19 -0
- package/build_module/helpers/render-css.js.map +1 -0
- package/build_module/helpers.d.ts +2 -0
- package/build_module/helpers.js +49 -0
- package/build_module/helpers.js.map +1 -0
- package/build_module/index.d.ts +7 -0
- package/build_module/index.js +5 -0
- package/build_module/index.js.map +1 -0
- package/build_module/reactive.d.ts +37 -0
- package/build_module/reactive.js +120 -0
- package/build_module/reactive.js.map +1 -0
- package/build_module/v-dom-node.d.ts +0 -0
- package/build_module/v-dom-node.js +1 -0
- package/build_module/v-dom-node.js.map +1 -0
- package/build_module/vdom-nodes/collection-vdom.d.ts +24 -0
- package/build_module/vdom-nodes/collection-vdom.js +154 -0
- package/build_module/vdom-nodes/collection-vdom.js.map +1 -0
- package/build_module/vdom-nodes/component-vdom.d.ts +14 -0
- package/build_module/vdom-nodes/component-vdom.js +61 -0
- package/build_module/vdom-nodes/component-vdom.js.map +1 -0
- package/build_module/vdom-nodes/conditional-vdom.d.ts +14 -0
- package/build_module/vdom-nodes/conditional-vdom.js +97 -0
- package/build_module/vdom-nodes/conditional-vdom.js.map +1 -0
- package/build_module/vdom-nodes/container-vdom.d.ts +23 -0
- package/build_module/vdom-nodes/container-vdom.js +85 -0
- package/build_module/vdom-nodes/container-vdom.js.map +1 -0
- package/build_module/vdom-nodes/element-vdom.d.ts +18 -0
- package/build_module/vdom-nodes/element-vdom.js +88 -0
- package/build_module/vdom-nodes/element-vdom.js.map +1 -0
- package/build_module/vdom-nodes/html-vdom.d.ts +13 -0
- package/build_module/vdom-nodes/html-vdom.js +53 -0
- package/build_module/vdom-nodes/html-vdom.js.map +1 -0
- package/build_module/vdom-nodes/text-vdom.d.ts +11 -0
- package/build_module/vdom-nodes/text-vdom.js +37 -0
- package/build_module/vdom-nodes/text-vdom.js.map +1 -0
- package/build_module/vdom-nodes/vdom.d.ts +7 -0
- package/build_module/vdom-nodes/vdom.js +28 -0
- package/build_module/vdom-nodes/vdom.js.map +1 -0
- package/package.json +26 -19
- package/lib/arg-callback-obj.d.ts +0 -29
- package/lib/arg-callback-obj.js +0 -64
- package/lib/arg-callback-obj.js.map +0 -1
- package/lib/built-in-components/nav-link.d.ts +0 -8
- package/lib/built-in-components/nav-link.js +0 -24
- package/lib/built-in-components/nav-link.js.map +0 -1
- package/lib/built-in-components/router.d.ts +0 -57
- package/lib/built-in-components/router.js +0 -282
- package/lib/built-in-components/router.js.map +0 -1
- package/lib/component.d.ts +0 -93
- package/lib/component.js +0 -354
- package/lib/component.js.map +0 -1
- package/lib/dot-util.d.ts +0 -26
- package/lib/dot-util.js +0 -62
- package/lib/dot-util.js.map +0 -1
- package/lib/dot.d.ts +0 -5
- package/lib/dot.js +0 -1129
- package/lib/dot.js.map +0 -1
- package/lib/dothtml.d.ts +0 -29
- package/lib/dothtml.js +0 -15
- package/lib/dothtml.js.map +0 -1
- package/lib/err.d.ts +0 -2
- package/lib/err.js +0 -26
- package/lib/err.js.map +0 -1
- package/lib/event-bus.d.ts +0 -10
- package/lib/event-bus.js +0 -37
- package/lib/event-bus.js.map +0 -1
- package/lib/i-dot.d.ts +0 -689
- package/lib/i-dot.js +0 -3
- package/lib/i-dot.js.map +0 -1
- package/lib/node-polyfill.d.ts +0 -2
- package/lib/node-polyfill.js +0 -14
- package/lib/node-polyfill.js.map +0 -1
- package/lib/observable-array.d.ts +0 -49
- package/lib/observable-array.js +0 -274
- package/lib/observable-array.js.map +0 -1
- package/lib/pages/home-page.d.ts +0 -9
- package/lib/pages/home-page.js +0 -24
- package/lib/pages/home-page.js.map +0 -1
- package/lib/styling/css-types.ts/css-angle.d.ts +0 -7
- package/lib/styling/css-types.ts/css-angle.js +0 -22
- package/lib/styling/css-types.ts/css-angle.js.map +0 -1
- package/lib/styling/css-types.ts/css-color.d.ts +0 -9
- package/lib/styling/css-types.ts/css-color.js +0 -824
- package/lib/styling/css-types.ts/css-color.js.map +0 -1
- package/lib/styling/css-types.ts/css-complex.d.ts +0 -7
- package/lib/styling/css-types.ts/css-complex.js +0 -23
- package/lib/styling/css-types.ts/css-complex.js.map +0 -1
- package/lib/styling/css-types.ts/css-data-type.d.ts +0 -5
- package/lib/styling/css-types.ts/css-data-type.js +0 -9
- package/lib/styling/css-types.ts/css-data-type.js.map +0 -1
- package/lib/styling/css-types.ts/css-filter.d.ts +0 -22
- package/lib/styling/css-types.ts/css-filter.js +0 -121
- package/lib/styling/css-types.ts/css-filter.js.map +0 -1
- package/lib/styling/css-types.ts/css-length.d.ts +0 -7
- package/lib/styling/css-types.ts/css-length.js +0 -24
- package/lib/styling/css-types.ts/css-length.js.map +0 -1
- package/lib/styling/css-types.ts/css-number.d.ts +0 -6
- package/lib/styling/css-types.ts/css-number.js +0 -17
- package/lib/styling/css-types.ts/css-number.js.map +0 -1
- package/lib/styling/css-types.ts/css-percentage.d.ts +0 -5
- package/lib/styling/css-types.ts/css-percentage.js +0 -13
- package/lib/styling/css-types.ts/css-percentage.js.map +0 -1
- package/lib/styling/css-types.ts/css-transform.d.ts +0 -38
- package/lib/styling/css-types.ts/css-transform.js +0 -183
- package/lib/styling/css-types.ts/css-transform.js.map +0 -1
- package/lib/styling/css-types.ts/css-unknown.d.ts +0 -6
- package/lib/styling/css-types.ts/css-unknown.js +0 -17
- package/lib/styling/css-types.ts/css-unknown.js.map +0 -1
- package/lib/styling/css-types.ts/css-url.d.ts +0 -6
- package/lib/styling/css-types.ts/css-url.js +0 -45
- package/lib/styling/css-types.ts/css-url.js.map +0 -1
- package/lib/styling/i-dotcss.d.ts +0 -1085
- package/lib/styling/i-dotcss.js +0 -3
- package/lib/styling/i-dotcss.js.map +0 -1
- package/lib/styling/style-builder.d.ts +0 -24
- package/lib/styling/style-builder.js +0 -815
- package/lib/styling/style-builder.js.map +0 -1
- package/lib/styling/unit-function-tables.d.ts +0 -10
- package/lib/styling/unit-function-tables.js +0 -27
- package/lib/styling/unit-function-tables.js.map +0 -1
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import Reactive from "../reactive";
|
|
2
|
+
import { Vdom } from "./vdom";
|
|
3
|
+
export class ConditionalVdom extends Vdom {
|
|
4
|
+
constructor() {
|
|
5
|
+
super(...arguments);
|
|
6
|
+
this.conditions = [];
|
|
7
|
+
this.sealed = false;
|
|
8
|
+
this.renderedIndex = -1;
|
|
9
|
+
}
|
|
10
|
+
addCondition(condition, vNode, seal = false) {
|
|
11
|
+
if (this.sealed) {
|
|
12
|
+
throw new Error("Cannot add additional conditions to a sealed block.");
|
|
13
|
+
}
|
|
14
|
+
this.sealed = seal;
|
|
15
|
+
let C = {
|
|
16
|
+
condition,
|
|
17
|
+
vNode,
|
|
18
|
+
startAnchor: null,
|
|
19
|
+
endAnchor: null,
|
|
20
|
+
observerId: 0
|
|
21
|
+
};
|
|
22
|
+
this.conditions.push(C);
|
|
23
|
+
if (this.conditions[0].startAnchor) {
|
|
24
|
+
this.addAnchor(C, this.conditions[0].startAnchor.parentElement);
|
|
25
|
+
if (condition instanceof Reactive) {
|
|
26
|
+
C.observerId = condition.subscribeCond(this);
|
|
27
|
+
}
|
|
28
|
+
this.updateConditions();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
addAnchor(C, node) {
|
|
32
|
+
C.startAnchor = node.ownerDocument.createTextNode("");
|
|
33
|
+
C.endAnchor = node.ownerDocument.createTextNode("");
|
|
34
|
+
node.appendChild(C.startAnchor);
|
|
35
|
+
node.appendChild(C.endAnchor);
|
|
36
|
+
}
|
|
37
|
+
_render(node) {
|
|
38
|
+
for (let c = 0; c < this.conditions.length; c++) {
|
|
39
|
+
let C = this.conditions[c];
|
|
40
|
+
if (C.startAnchor) {
|
|
41
|
+
throw new Error("Item is already rendered.");
|
|
42
|
+
}
|
|
43
|
+
this.addAnchor(C, node);
|
|
44
|
+
if (C.condition instanceof Reactive) {
|
|
45
|
+
C.observerId = C.condition.subscribeCond(this);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
if (this.conditions.length)
|
|
49
|
+
this.updateConditions();
|
|
50
|
+
}
|
|
51
|
+
_unrender() {
|
|
52
|
+
if (this.conditions[0].startAnchor) {
|
|
53
|
+
for (let i = 0; i < this.conditions.length; i++) {
|
|
54
|
+
let C = this.conditions[i];
|
|
55
|
+
let start = C.startAnchor;
|
|
56
|
+
let end = C.endAnchor;
|
|
57
|
+
C.vNode._unrender();
|
|
58
|
+
start.parentElement.removeChild(start);
|
|
59
|
+
end.parentElement.removeChild(end);
|
|
60
|
+
C.startAnchor = null;
|
|
61
|
+
C.endAnchor = null;
|
|
62
|
+
if (C.condition instanceof Reactive) {
|
|
63
|
+
C.condition.detachBinding(C.observerId);
|
|
64
|
+
C.observerId = 0;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
this.renderedIndex = -1;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
updateConditions() {
|
|
71
|
+
let node = this.conditions[0].startAnchor.parentElement;
|
|
72
|
+
let newIndex = -1;
|
|
73
|
+
for (let c = 0; c < this.conditions.length; c++) {
|
|
74
|
+
let C = this.conditions[c];
|
|
75
|
+
if (C.condition instanceof Reactive ? C.condition.getValue() : C.condition) {
|
|
76
|
+
newIndex = c;
|
|
77
|
+
break;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
if (newIndex != this.renderedIndex) {
|
|
81
|
+
{
|
|
82
|
+
if (this.renderedIndex != -1) {
|
|
83
|
+
let C = this.conditions[this.renderedIndex];
|
|
84
|
+
C.vNode._unrender();
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
{
|
|
88
|
+
this.renderedIndex = newIndex;
|
|
89
|
+
if (newIndex != -1) {
|
|
90
|
+
let C = this.conditions[newIndex];
|
|
91
|
+
C.vNode._renderBefore(C.endAnchor);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
//# sourceMappingURL=conditional-vdom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"conditional-vdom.js","sourceRoot":"","sources":["../../src/vdom-nodes/conditional-vdom.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { IComponent } from "dothtml-interfaces";
|
|
2
|
+
import Reactive from "../reactive";
|
|
3
|
+
import { ConditionalVdom } from "./conditional-vdom";
|
|
4
|
+
import ElementVdom from "./element-vdom";
|
|
5
|
+
import { Vdom } from "./vdom";
|
|
6
|
+
import { ObservableCollection } from "./vdom-types";
|
|
7
|
+
type ParentVdom = ContainerVdom | ConditionalVdom | ElementVdom;
|
|
8
|
+
export declare class ContainerVdom extends Vdom {
|
|
9
|
+
_children: Array<Vdom>;
|
|
10
|
+
_parent: ParentVdom;
|
|
11
|
+
constructor();
|
|
12
|
+
_addChild(content: Vdom): this;
|
|
13
|
+
_render(node: HTMLElement): void;
|
|
14
|
+
_unrender(): void;
|
|
15
|
+
html(c: string | Reactive): this;
|
|
16
|
+
text(c: string | Reactive): this;
|
|
17
|
+
mount(c: IComponent): this;
|
|
18
|
+
when(condition: Reactive | boolean, then: ContainerVdom | string | boolean | number): this;
|
|
19
|
+
otherwiseWhen(condition: Reactive | boolean, then: ContainerVdom | string | boolean | number, seal?: boolean): this;
|
|
20
|
+
otherwise(then: ContainerVdom | string | boolean | number): this;
|
|
21
|
+
each(collection: ObservableCollection, callback: () => Vdom): this;
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import CollectionVdom from "./collection-vdom";
|
|
2
|
+
import { ConditionalVdom } from "./conditional-vdom";
|
|
3
|
+
import ElementVdom from "./element-vdom";
|
|
4
|
+
import { HtmlVdom } from "./html-vdom";
|
|
5
|
+
import { TextVdom } from "./text-vdom";
|
|
6
|
+
import { Vdom } from "./vdom";
|
|
7
|
+
import { ComponentVdom } from "./component-vdom";
|
|
8
|
+
export class ContainerVdom extends Vdom {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
this._children = [];
|
|
12
|
+
this._parent = null;
|
|
13
|
+
}
|
|
14
|
+
_addChild(content) {
|
|
15
|
+
this._children.push(content);
|
|
16
|
+
if (this._parent && this._parent instanceof ElementVdom && this._parent.element)
|
|
17
|
+
content._render(this._parent.element);
|
|
18
|
+
return this;
|
|
19
|
+
}
|
|
20
|
+
_render(node) {
|
|
21
|
+
for (let c = 0; c < this._children.length; c++) {
|
|
22
|
+
this._children[c]._render(node);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
_unrender() {
|
|
26
|
+
for (let c = 0; c < this._children.length; c++) {
|
|
27
|
+
this._children[c]._unrender();
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
html(c) {
|
|
31
|
+
let hn = new HtmlVdom(c);
|
|
32
|
+
return this._addChild(hn);
|
|
33
|
+
}
|
|
34
|
+
text(c) {
|
|
35
|
+
let tn = new TextVdom(c);
|
|
36
|
+
return this._addChild(tn);
|
|
37
|
+
}
|
|
38
|
+
mount(c) {
|
|
39
|
+
let cn = new ComponentVdom(c);
|
|
40
|
+
return this._addChild(cn);
|
|
41
|
+
}
|
|
42
|
+
when(condition, then) {
|
|
43
|
+
let condNode = new ConditionalVdom();
|
|
44
|
+
let thenContainer;
|
|
45
|
+
if (then instanceof ContainerVdom) {
|
|
46
|
+
thenContainer = then;
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
thenContainer = new ContainerVdom();
|
|
50
|
+
let textVdom = new TextVdom(then);
|
|
51
|
+
thenContainer._addChild(textVdom);
|
|
52
|
+
then = thenContainer;
|
|
53
|
+
}
|
|
54
|
+
condNode.addCondition(condition, then);
|
|
55
|
+
this._addChild(condNode);
|
|
56
|
+
return this;
|
|
57
|
+
}
|
|
58
|
+
otherwiseWhen(condition, then, seal = false) {
|
|
59
|
+
let condNode = this._children[this._children.length - 1];
|
|
60
|
+
if (condNode instanceof ConditionalVdom) {
|
|
61
|
+
let thenContainer;
|
|
62
|
+
if (then instanceof ContainerVdom) {
|
|
63
|
+
thenContainer = then;
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
thenContainer = new ContainerVdom();
|
|
67
|
+
let textVdom = new TextVdom(then);
|
|
68
|
+
thenContainer._addChild(textVdom);
|
|
69
|
+
then = thenContainer;
|
|
70
|
+
}
|
|
71
|
+
condNode.addCondition(condition, then, seal);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
throw new Error("Can't branch off of a non-conditional node.");
|
|
75
|
+
}
|
|
76
|
+
return this;
|
|
77
|
+
}
|
|
78
|
+
otherwise(then) { return this.otherwiseWhen(true, then, true); }
|
|
79
|
+
each(collection, callback) {
|
|
80
|
+
let collectionVdom = new CollectionVdom(collection, callback);
|
|
81
|
+
this._addChild(collectionVdom);
|
|
82
|
+
return this;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
//# sourceMappingURL=container-vdom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container-vdom.js","sourceRoot":"","sources":["../../src/vdom-nodes/container-vdom.ts"],"names":[],"mappings":"AAEA,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD,MAAM,OAAO,aAAc,SAAQ,IAAI;IAItC;QACC,KAAK,EAAE,CAAC;QAJT,cAAS,GAAgB,EAAE,CAAC;QAC5B,YAAO,GAAe,IAAI,CAAC;IAI3B,CAAC;IAED,SAAS,CAAC,OAAa;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,YAAY,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACtH,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CAAC,IAAiB;QACxB,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAC;YAC7C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;SAChC;IACF,CAAC;IAED,SAAS;QACR,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAC;YAC7C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;SAC9B;IACF,CAAC;IAED,IAAI,CAAC,CAAkB;QACtB,IAAI,EAAE,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;QACzB,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC;IAED,IAAI,CAAC,CAAkB;QACtB,IAAI,EAAE,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;QACzB,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,CAAa;QAClB,IAAI,EAAE,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC;IAGD,IAAI,CAAC,SAA0B,EAAE,IAAyC;QACzE,IAAI,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;QACrC,IAAI,aAA4B,CAAC;QACjC,IAAG,IAAI,YAAY,aAAa,EAAC;YAChC,aAAa,GAAG,IAAI,CAAC;SACrB;aACG;YACH,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC;YACpC,IAAI,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;YAClC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAClC,IAAI,GAAG,aAAa,CAAC;SACrB;QACD,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAEzB,OAAO,IAAI,CAAC;IACb,CAAC;IACD,aAAa,CAAC,SAA0B,EAAE,IAAyC,EAAE,IAAI,GAAG,KAAK;QAChG,IAAI,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzD,IAAG,QAAQ,YAAY,eAAe,EAAC;YACtC,IAAI,aAA4B,CAAC;YACjC,IAAG,IAAI,YAAY,aAAa,EAAC;gBAChC,aAAa,GAAG,IAAI,CAAC;aACrB;iBACG;gBACH,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC;gBACpC,IAAI,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAClC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBAClC,IAAI,GAAG,aAAa,CAAC;aACrB;YACD,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAI7C;aACG;YACH,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;SAC/D;QAED,OAAO,IAAI,CAAC;IACb,CAAC;IACD,SAAS,CAAC,IAAyC,IAAG,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA,CAAC,CAAC;IAEnG,IAAI,CAAC,UAAgC,EAAE,QAAkB;QACxD,IAAI,cAAc,GAAG,IAAI,cAAc,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ContainerVdom } from "./container-vdom";
|
|
2
|
+
import { Vdom } from "./vdom";
|
|
3
|
+
export default class ElementVdom extends Vdom {
|
|
4
|
+
children: ContainerVdom;
|
|
5
|
+
element: HTMLElement;
|
|
6
|
+
tag: string;
|
|
7
|
+
private attributes;
|
|
8
|
+
private events;
|
|
9
|
+
private attributeObserverIds;
|
|
10
|
+
constructor(tag: string);
|
|
11
|
+
_render(node: HTMLElement): void;
|
|
12
|
+
_unrender(): void;
|
|
13
|
+
toString(): string;
|
|
14
|
+
setAttr(attr: any, value: any): void;
|
|
15
|
+
private renderAttr;
|
|
16
|
+
addEventListener(event: string, callback: (e: Event) => void): void;
|
|
17
|
+
private renderEvent;
|
|
18
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { DOT_VDOM_PROP_NAME } from "../constants";
|
|
2
|
+
import Reactive from "../reactive";
|
|
3
|
+
import { ContainerVdom } from "./container-vdom";
|
|
4
|
+
import { Vdom } from "./vdom";
|
|
5
|
+
export default class ElementVdom extends Vdom {
|
|
6
|
+
constructor(tag) {
|
|
7
|
+
super();
|
|
8
|
+
this.children = null;
|
|
9
|
+
this.tag = null;
|
|
10
|
+
this.attributes = {};
|
|
11
|
+
this.events = [];
|
|
12
|
+
this.attributeObserverIds = [];
|
|
13
|
+
this.tag = tag;
|
|
14
|
+
this.children = new ContainerVdom();
|
|
15
|
+
this.children._parent = this;
|
|
16
|
+
}
|
|
17
|
+
_render(node) {
|
|
18
|
+
this.element = node.ownerDocument.createElement(this.tag);
|
|
19
|
+
this.element[DOT_VDOM_PROP_NAME] = this;
|
|
20
|
+
for (let a in this.attributes) {
|
|
21
|
+
this.renderAttr(a, this.attributes[a], this.element);
|
|
22
|
+
}
|
|
23
|
+
node.appendChild(this.element);
|
|
24
|
+
for (let i = 0; i < this.events.length; i++) {
|
|
25
|
+
let e = this.events[i];
|
|
26
|
+
this.renderEvent(e.name, e.callback);
|
|
27
|
+
}
|
|
28
|
+
if (this.children) {
|
|
29
|
+
this.children._render(this.element);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
_unrender() {
|
|
33
|
+
this.children._unrender();
|
|
34
|
+
this.element.parentNode?.removeChild(this.element);
|
|
35
|
+
this.element = null;
|
|
36
|
+
for (let i = 0; i < this.attributeObserverIds.length; i++) {
|
|
37
|
+
let item = this.attributeObserverIds[i];
|
|
38
|
+
item.observable.detachBinding(item.id);
|
|
39
|
+
}
|
|
40
|
+
this.attributeObserverIds.length = 0;
|
|
41
|
+
}
|
|
42
|
+
toString() {
|
|
43
|
+
if (this.element) {
|
|
44
|
+
return this.element.outerHTML;
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
return super.toString();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
setAttr(attr, value) {
|
|
51
|
+
this.attributes[attr] = value;
|
|
52
|
+
if (this.element) {
|
|
53
|
+
this.renderAttr(attr, value, this.element);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
renderAttr(attr, value, node) {
|
|
57
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
58
|
+
node.setAttribute(attr, `${value}`);
|
|
59
|
+
}
|
|
60
|
+
else if (typeof value === "boolean" || value == null || value == undefined) {
|
|
61
|
+
if (value)
|
|
62
|
+
node.setAttribute(attr, `${value}`);
|
|
63
|
+
else
|
|
64
|
+
node.removeAttribute(attr);
|
|
65
|
+
}
|
|
66
|
+
else if (value instanceof Reactive) {
|
|
67
|
+
this.renderAttr(attr, value.getValue(), node);
|
|
68
|
+
let id = value.subscribeAttr(this, attr);
|
|
69
|
+
this.attributeObserverIds.push({ id: id, observable: value });
|
|
70
|
+
if (attr == "value" || attr == "checked") {
|
|
71
|
+
this.element.addEventListener("input", (e) => {
|
|
72
|
+
value.setValue(this.element[attr]);
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
addEventListener(event, callback) {
|
|
80
|
+
this.events.push({ name: event, callback: callback });
|
|
81
|
+
if (this.element)
|
|
82
|
+
this.renderEvent(event, callback);
|
|
83
|
+
}
|
|
84
|
+
renderEvent(e, callback) {
|
|
85
|
+
this.element.addEventListener(e.toLowerCase(), callback);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
//# sourceMappingURL=element-vdom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-vdom.js","sourceRoot":"","sources":["../../src/vdom-nodes/element-vdom.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import Reactive from "../reactive";
|
|
2
|
+
import { Vdom } from "./vdom";
|
|
3
|
+
export declare class HtmlVdom extends Vdom {
|
|
4
|
+
beforeNode: Node;
|
|
5
|
+
afterNode: Node;
|
|
6
|
+
html: string | Reactive;
|
|
7
|
+
observerId: number;
|
|
8
|
+
constructor(html: string | Reactive);
|
|
9
|
+
updateHtml(html: any): void;
|
|
10
|
+
_render(target: HTMLElement): void;
|
|
11
|
+
_unrender(): void;
|
|
12
|
+
toString(): any;
|
|
13
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { removeNodesBetween } from "../helpers";
|
|
2
|
+
import Reactive from "../reactive";
|
|
3
|
+
import { Vdom } from "./vdom";
|
|
4
|
+
export class HtmlVdom extends Vdom {
|
|
5
|
+
constructor(html) {
|
|
6
|
+
super();
|
|
7
|
+
this.observerId = 0;
|
|
8
|
+
this.html = html;
|
|
9
|
+
}
|
|
10
|
+
updateHtml(html) {
|
|
11
|
+
if (this.beforeNode) {
|
|
12
|
+
removeNodesBetween(this.beforeNode, this.afterNode);
|
|
13
|
+
let temp = this.beforeNode.ownerDocument.createElement("div");
|
|
14
|
+
temp.innerHTML = html;
|
|
15
|
+
while (temp.firstChild) {
|
|
16
|
+
this.afterNode.parentElement.insertBefore(temp.firstChild, this.afterNode);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
_render(target) {
|
|
21
|
+
let html = "";
|
|
22
|
+
if (this.html instanceof Reactive) {
|
|
23
|
+
html = this.html.getValue();
|
|
24
|
+
this.observerId = this.html.subscribeHtml(this);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
html = this.html;
|
|
28
|
+
}
|
|
29
|
+
this.beforeNode = target.ownerDocument.createTextNode("");
|
|
30
|
+
this.afterNode = target.ownerDocument.createTextNode("");
|
|
31
|
+
target.appendChild(this.beforeNode);
|
|
32
|
+
target.appendChild(this.afterNode);
|
|
33
|
+
this.updateHtml(html ?? "");
|
|
34
|
+
}
|
|
35
|
+
_unrender() {
|
|
36
|
+
if (this.beforeNode) {
|
|
37
|
+
let parent = this.beforeNode.parentElement;
|
|
38
|
+
removeNodesBetween(this.beforeNode, this.afterNode);
|
|
39
|
+
parent.removeChild(this.beforeNode);
|
|
40
|
+
parent.removeChild(this.afterNode);
|
|
41
|
+
this.beforeNode = null;
|
|
42
|
+
this.afterNode = null;
|
|
43
|
+
}
|
|
44
|
+
if (this.observerId && this.html instanceof Reactive) {
|
|
45
|
+
this.html.detachBinding(this.observerId);
|
|
46
|
+
this.observerId = 0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
toString() {
|
|
50
|
+
return this.html instanceof Reactive ? this.html.getValue() : this.html;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=html-vdom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"html-vdom.js","sourceRoot":"","sources":["../../src/vdom-nodes/html-vdom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,OAAO,QAAS,SAAQ,IAAI;IAQjC,YAAY,IAAqB;QAChC,KAAK,EAAE,CAAC;QAHT,eAAU,GAAW,CAAC,CAAC;QAItB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAClB,CAAC;IAED,UAAU,CAAC,IAAI;QACd,IAAG,IAAI,CAAC,UAAU,EAAC;YAClB,kBAAkB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAGpD,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC9D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAC,UAAU,EAAE;gBACvB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;aAC3E;SACD;IACF,CAAC;IAED,OAAO,CAAC,MAAmB;QAC1B,IAAI,IAAI,GAAG,EAAE,CAAC;QACd,IAAG,IAAI,CAAC,IAAI,YAAY,QAAQ,EAAC;YAChC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;SAChD;aACG;YACH,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SACjB;QAED,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;QACzD,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IAC7B,CAAC;IAED,SAAS;QACR,IAAG,IAAI,CAAC,UAAU,EAAC;YAClB,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;YAG3C,kBAAkB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAEpD,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACpC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACnC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACtB;QAED,IAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,YAAY,QAAQ,EAAC;YACnD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACzC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;SACpB;IACF,CAAC;IAED,QAAQ;QACP,OAAO,IAAI,CAAC,IAAI,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACzE,CAAC;CACD"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Reactive from "../reactive";
|
|
2
|
+
import { Vdom } from "./vdom";
|
|
3
|
+
export declare class TextVdom extends Vdom {
|
|
4
|
+
text: string | boolean | number | Reactive;
|
|
5
|
+
textNode: Node;
|
|
6
|
+
observerId: number;
|
|
7
|
+
constructor(text: string | boolean | number | Reactive);
|
|
8
|
+
_render(node: HTMLElement): void;
|
|
9
|
+
_unrender(): void;
|
|
10
|
+
toString(): string;
|
|
11
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import Reactive from "../reactive";
|
|
2
|
+
import { Vdom } from "./vdom";
|
|
3
|
+
export class TextVdom extends Vdom {
|
|
4
|
+
constructor(text) {
|
|
5
|
+
super();
|
|
6
|
+
this.textNode = null;
|
|
7
|
+
this.observerId = 0;
|
|
8
|
+
this.text = text;
|
|
9
|
+
}
|
|
10
|
+
_render(node) {
|
|
11
|
+
if (this.text instanceof Reactive) {
|
|
12
|
+
this.textNode = node.ownerDocument.createTextNode(this.text.getValue() ?? "");
|
|
13
|
+
this.observerId = this.text.subscribeText(this);
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
this.textNode = node.ownerDocument.createTextNode(`${this.text ?? ""}`);
|
|
17
|
+
}
|
|
18
|
+
node.appendChild(this.textNode);
|
|
19
|
+
}
|
|
20
|
+
_unrender() {
|
|
21
|
+
if (this.textNode) {
|
|
22
|
+
this.textNode.parentElement.removeChild(this.textNode);
|
|
23
|
+
this.textNode = null;
|
|
24
|
+
}
|
|
25
|
+
if (this.observerId && this.text instanceof Reactive) {
|
|
26
|
+
this.text.detachBinding(this.observerId);
|
|
27
|
+
this.observerId = 0;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
toString() {
|
|
31
|
+
let temp = document.createTextNode((this.text instanceof Reactive ? this.text.getValue() : this.text) ?? "");
|
|
32
|
+
let div = document.createElement("div");
|
|
33
|
+
div.appendChild(temp);
|
|
34
|
+
return div.innerHTML;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=text-vdom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-vdom.js","sourceRoot":"","sources":["../../src/vdom-nodes/text-vdom.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAI9B,MAAM,OAAO,QAAS,SAAQ,IAAI;IAMjC,YAAY,IAAoC;QAC/C,KAAK,EAAE,CAAC;QAJT,aAAQ,GAAS,IAAI,CAAC;QACtB,eAAU,GAAG,CAAC,CAAC;QAId,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAClB,CAAC;IAED,OAAO,CAAC,IAAiB;QACxB,IAAG,IAAI,CAAC,IAAI,YAAY,QAAQ,EAAC;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;SAChD;aACG;YACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAC,CAAC;SACxE;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,SAAS;QACR,IAAG,IAAI,CAAC,QAAQ,EAAC;YAEhB,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACrB;QAED,IAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,YAAY,QAAQ,EAAC;YACnD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACzC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;SACpB;IACF,CAAC;IAED,QAAQ;QACP,IAAI,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,IAAI,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7G,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACxC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACtB,OAAO,GAAG,CAAC,SAAS,CAAC;IACtB,CAAC;CACD"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export class Vdom {
|
|
2
|
+
toString() {
|
|
3
|
+
let el = document.createElement("div");
|
|
4
|
+
this._render(el);
|
|
5
|
+
return el.innerHTML;
|
|
6
|
+
}
|
|
7
|
+
_renderBefore(reference) {
|
|
8
|
+
let dummy = reference.ownerDocument.createElement("div");
|
|
9
|
+
this._render(dummy);
|
|
10
|
+
while (dummy.childNodes.length > 0) {
|
|
11
|
+
let cn = dummy.childNodes[0];
|
|
12
|
+
cn.parentElement.removeChild(cn);
|
|
13
|
+
reference.parentElement.insertBefore(cn, reference);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
_renderAfter(reference) {
|
|
17
|
+
if (reference.nextSibling) {
|
|
18
|
+
this._renderBefore(reference.nextSibling);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
let temp = reference.ownerDocument.createTextNode("");
|
|
22
|
+
reference.parentElement.appendChild(temp);
|
|
23
|
+
this._renderBefore(temp);
|
|
24
|
+
temp.parentElement.removeChild(temp);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=vdom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vdom.js","sourceRoot":"","sources":["../../src/vdom-nodes/vdom.ts"],"names":[],"mappings":"AAAA,MAAM,OAAgB,IAAI;IAMzB,QAAQ;QACP,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACjB,OAAO,EAAE,CAAC,SAAS,CAAC;IACrB,CAAC;IAED,aAAa,CAAC,SAAe;QAC5B,IAAI,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACpB,OAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAC;YACjC,IAAI,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YAC7B,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACjC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;SACpD;IACF,CAAC;IACD,YAAY,CAAC,SAAe;QAC3B,IAAG,SAAS,CAAC,WAAW,EAAC;YACxB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;SAC1C;aACG;YACH,IAAI,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;YACtD,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SACrC;IACF,CAAC;CACD"}
|
package/package.json
CHANGED
|
@@ -1,28 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dothtml",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0-beta.10",
|
|
4
4
|
"description": "DOThtml is a client-side web building framework written in TypeScript.",
|
|
5
|
-
"main": "./
|
|
6
|
-
"exports": "./
|
|
7
|
-
"types": "./
|
|
5
|
+
"main": "./build_module/index.js",
|
|
6
|
+
"exports": "./build_module/index.js",
|
|
7
|
+
"types": "./build_module/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
|
-
"
|
|
9
|
+
"build_module/**/*"
|
|
10
10
|
],
|
|
11
11
|
"scripts": {
|
|
12
12
|
"test": "npm run build & jest",
|
|
13
|
-
"build": "tsc --declaration"
|
|
14
|
-
|
|
15
|
-
"devDependencies": {
|
|
16
|
-
"@babel/preset-env": "^7.14.5",
|
|
17
|
-
"@testing-library/jest-dom": "^5.13.0",
|
|
18
|
-
"@types/node": "^18.14.2",
|
|
19
|
-
"copyfiles": "^2.4.1",
|
|
20
|
-
"esm": "^3.2.25",
|
|
21
|
-
"jest": "^29.5.0",
|
|
22
|
-
"jest-environment-jsdom": "^29.5.0",
|
|
23
|
-
"ts-jest": "^29.0.5",
|
|
24
|
-
"ts-node": "^10.9.1",
|
|
25
|
-
"typescript": "^5.0.2"
|
|
13
|
+
"build": "tsc --declaration",
|
|
14
|
+
"buildumd": "webpack"
|
|
26
15
|
},
|
|
27
16
|
"repository": {
|
|
28
17
|
"type": "git",
|
|
@@ -46,5 +35,23 @@
|
|
|
46
35
|
"bugs": {
|
|
47
36
|
"url": "https://github.com/JSideris/DOThtml/issues"
|
|
48
37
|
},
|
|
49
|
-
"homepage": "https://
|
|
38
|
+
"homepage": "https://dothtml.org/",
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@babel/preset-env": "^7.14.5",
|
|
41
|
+
"@testing-library/jest-dom": "^5.13.0",
|
|
42
|
+
"@types/jest": "^29.5.11",
|
|
43
|
+
"@types/node": "^18.14.2",
|
|
44
|
+
"copyfiles": "^2.4.1",
|
|
45
|
+
"esm": "^3.2.25",
|
|
46
|
+
"jest": "^29.5.0",
|
|
47
|
+
"jest-environment-jsdom": "^29.5.0",
|
|
48
|
+
"ts-jest": "^29.0.5",
|
|
49
|
+
"ts-node": "^10.9.1",
|
|
50
|
+
"typescript": "^5.0.2",
|
|
51
|
+
"webpack": "^5.89.0",
|
|
52
|
+
"webpack-cli": "^5.1.4"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"dothtml-interfaces": "^0.1.34"
|
|
56
|
+
}
|
|
50
57
|
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { IDotDocument } from "./i-dot";
|
|
2
|
-
export declare abstract class ArgCallback {
|
|
3
|
-
el: Element;
|
|
4
|
-
f: (content?: any, index?: number) => string;
|
|
5
|
-
constructor(element: Element, value: (content?: any, index?: number) => string);
|
|
6
|
-
abstract updateContent(dot: IDotDocument, propVal?: any): any;
|
|
7
|
-
}
|
|
8
|
-
export declare class AttrArgCallback extends ArgCallback {
|
|
9
|
-
attr: string;
|
|
10
|
-
constructor(element: Element, attributeName: string, value: (content?: any) => string);
|
|
11
|
-
updateContent(dot: any): void;
|
|
12
|
-
}
|
|
13
|
-
export declare class ContentArgCallback extends ArgCallback {
|
|
14
|
-
constructor(element: Element, content: () => string);
|
|
15
|
-
updateContent(dot: any, propVal: string): void;
|
|
16
|
-
}
|
|
17
|
-
export declare class ArrayArgCallback extends ArgCallback {
|
|
18
|
-
dotTarget: IDotDocument;
|
|
19
|
-
constructor(dotTarget: any, content: any);
|
|
20
|
-
updateContent(): void;
|
|
21
|
-
}
|
|
22
|
-
export declare class ConditionalArgCallback extends ArgCallback {
|
|
23
|
-
startNode: Node;
|
|
24
|
-
endNode: Node;
|
|
25
|
-
condition: () => boolean | boolean;
|
|
26
|
-
lastValue: boolean;
|
|
27
|
-
constructor(startNode: any, endNode: any, content: any, condition: any);
|
|
28
|
-
updateContent(dot: any): void;
|
|
29
|
-
}
|