j-templates 7.0.4 → 7.0.6
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/DOM/elements.d.ts +10 -10
- package/Node/vNode.d.ts +2 -2
- package/Node/vNode.js +41 -22
- package/Node/vNode.types.d.ts +5 -1
- package/package.json +1 -1
package/DOM/elements.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export declare const div: <T>(config: {
|
|
|
5
5
|
}>;
|
|
6
6
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
7
7
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
8
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
8
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
9
9
|
export declare const a: <T>(config: {
|
|
10
10
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
|
|
11
11
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -13,7 +13,7 @@ export declare const a: <T>(config: {
|
|
|
13
13
|
}>;
|
|
14
14
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
15
15
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
16
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
16
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
17
17
|
export declare const button: <T>(config: {
|
|
18
18
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLButtonElement>>;
|
|
19
19
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -21,7 +21,7 @@ export declare const button: <T>(config: {
|
|
|
21
21
|
}>;
|
|
22
22
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
23
23
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
24
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
24
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
25
25
|
export declare const h1: <T>(config: {
|
|
26
26
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
|
|
27
27
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -29,7 +29,7 @@ export declare const h1: <T>(config: {
|
|
|
29
29
|
}>;
|
|
30
30
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
31
31
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
32
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
32
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
33
33
|
export declare const input: <T>(config: {
|
|
34
34
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLInputElement>>;
|
|
35
35
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -37,7 +37,7 @@ export declare const input: <T>(config: {
|
|
|
37
37
|
}>;
|
|
38
38
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
39
39
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
40
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
40
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
41
41
|
export declare const span: <T>(config: {
|
|
42
42
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
|
|
43
43
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -45,7 +45,7 @@ export declare const span: <T>(config: {
|
|
|
45
45
|
}>;
|
|
46
46
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
47
47
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
48
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
48
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
49
49
|
export declare const table: <T>(config: {
|
|
50
50
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
|
|
51
51
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -53,7 +53,7 @@ export declare const table: <T>(config: {
|
|
|
53
53
|
}>;
|
|
54
54
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
55
55
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
56
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
56
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
57
57
|
export declare const tbody: <T>(config: {
|
|
58
58
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
|
|
59
59
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -61,7 +61,7 @@ export declare const tbody: <T>(config: {
|
|
|
61
61
|
}>;
|
|
62
62
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
63
63
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
64
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
64
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
65
65
|
export declare const tr: <T>(config: {
|
|
66
66
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
|
|
67
67
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -69,7 +69,7 @@ export declare const tr: <T>(config: {
|
|
|
69
69
|
}>;
|
|
70
70
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
71
71
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
72
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
72
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
|
73
73
|
export declare const td: <T>(config: {
|
|
74
74
|
props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
|
|
75
75
|
attrs?: import("../Node/vNode.types").FunctionOr<{
|
|
@@ -77,4 +77,4 @@ export declare const td: <T>(config: {
|
|
|
77
77
|
}>;
|
|
78
78
|
on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
|
|
79
79
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
80
|
-
}, children?: import("../Node/vNode.types").vNode[] |
|
|
80
|
+
}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
|
package/Node/vNode.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RecursivePartial } from "../Utils/utils.types";
|
|
2
|
-
import { vNode as vNodeType, vNodeDefinition, FunctionOr, vNodeEvents } from "./vNode.types";
|
|
2
|
+
import { vNode as vNodeType, vNodeDefinition, FunctionOr, vNodeEvents, vNodeChildrenFunction } from "./vNode.types";
|
|
3
3
|
type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
|
|
4
4
|
props?: FunctionOr<RecursivePartial<P>>;
|
|
5
5
|
attrs?: FunctionOr<{
|
|
@@ -14,7 +14,7 @@ export declare namespace vNode {
|
|
|
14
14
|
function InitAll(vnodes: vNodeType[]): void;
|
|
15
15
|
function Destroy(vnode: vNodeType): void;
|
|
16
16
|
function DestroyAll(vnodes: vNodeType[]): void;
|
|
17
|
-
function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] |
|
|
17
|
+
function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] | vNodeChildrenFunction<T>) => vNodeType;
|
|
18
18
|
function Attach(node: any, vnode: vNodeType): vNodeType;
|
|
19
19
|
}
|
|
20
20
|
export {};
|
package/Node/vNode.js
CHANGED
|
@@ -16,7 +16,7 @@ var vNode;
|
|
|
16
16
|
children: null,
|
|
17
17
|
destroyed: false,
|
|
18
18
|
component: null,
|
|
19
|
-
scopes: []
|
|
19
|
+
scopes: [],
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
vNode.Create = Create;
|
|
@@ -47,10 +47,14 @@ var vNode;
|
|
|
47
47
|
vNode.DestroyAll = DestroyAll;
|
|
48
48
|
function ToFunction(type, namespace) {
|
|
49
49
|
return function (config, children) {
|
|
50
|
-
const childrenConfig = children
|
|
50
|
+
const childrenConfig = children
|
|
51
|
+
? Array.isArray(children)
|
|
52
|
+
? { childrenArray: children }
|
|
53
|
+
: { children }
|
|
54
|
+
: undefined;
|
|
51
55
|
const definition = Object.assign({
|
|
52
56
|
type,
|
|
53
|
-
namespace: namespace ?? null
|
|
57
|
+
namespace: namespace ?? null,
|
|
54
58
|
}, config, childrenConfig);
|
|
55
59
|
return Create(definition);
|
|
56
60
|
};
|
|
@@ -64,12 +68,12 @@ var vNode;
|
|
|
64
68
|
vNode.Attach = Attach;
|
|
65
69
|
})(vNode || (exports.vNode = vNode = {}));
|
|
66
70
|
function InitNode(vnode) {
|
|
67
|
-
const { type, namespace, props, attrs, on, data, componentConstructor, children, childrenArray } = vnode.definition;
|
|
68
|
-
const node = vnode.node = nodeConfig_1.NodeConfig.createNode(type, namespace);
|
|
71
|
+
const { type, namespace, props, attrs, on, data, componentConstructor, children, childrenArray, } = vnode.definition;
|
|
72
|
+
const node = (vnode.node = nodeConfig_1.NodeConfig.createNode(type, namespace));
|
|
69
73
|
vnode.definition = null;
|
|
70
74
|
if (props) {
|
|
71
75
|
const assignProperties = nodeConfig_1.NodeConfig.createPropertyAssignment(node);
|
|
72
|
-
if (typeof props ===
|
|
76
|
+
if (typeof props === "function") {
|
|
73
77
|
const scope = Store_1.ObservableScope.Create(props);
|
|
74
78
|
vnode.scopes.push(scope);
|
|
75
79
|
Store_1.ObservableScope.Watch(scope, ScheduledAssignment(assignProperties));
|
|
@@ -81,7 +85,7 @@ function InitNode(vnode) {
|
|
|
81
85
|
}
|
|
82
86
|
if (on) {
|
|
83
87
|
const assignEvents = nodeConfig_1.NodeConfig.createEventAssignment(node);
|
|
84
|
-
if (typeof on ===
|
|
88
|
+
if (typeof on === "function") {
|
|
85
89
|
const scope = Store_1.ObservableScope.Create(on);
|
|
86
90
|
vnode.scopes.push(scope);
|
|
87
91
|
Store_1.ObservableScope.Watch(scope, ScheduledAssignment(assignEvents));
|
|
@@ -93,7 +97,7 @@ function InitNode(vnode) {
|
|
|
93
97
|
}
|
|
94
98
|
if (attrs) {
|
|
95
99
|
const assignAttributes = nodeConfig_1.NodeConfig.createAttributeAssignment(node);
|
|
96
|
-
if (typeof attrs ===
|
|
100
|
+
if (typeof attrs === "function") {
|
|
97
101
|
const scope = Store_1.ObservableScope.Create(attrs);
|
|
98
102
|
vnode.scopes.push(scope);
|
|
99
103
|
Store_1.ObservableScope.Watch(scope, ScheduledAssignment(assignAttributes));
|
|
@@ -113,6 +117,8 @@ function InitNode(vnode) {
|
|
|
113
117
|
});
|
|
114
118
|
vnode.scopes.push(componentScope);
|
|
115
119
|
Store_1.ObservableScope.Watch(componentScope, CreateScheduledCallback(function () {
|
|
120
|
+
if (vnode.destroyed)
|
|
121
|
+
return;
|
|
116
122
|
const nodes = Store_1.ObservableScope.Peek(componentScope);
|
|
117
123
|
vNode.DestroyAll(vnode.children);
|
|
118
124
|
vnode.children = nodes;
|
|
@@ -136,13 +142,13 @@ function InitNode(vnode) {
|
|
|
136
142
|
function StaticChildren(vnode, children) {
|
|
137
143
|
const childrenScope = Store_1.ObservableScope.Create(WrapStaticChildren(vnode.injector, children));
|
|
138
144
|
const child = Store_1.ObservableScope.Peek(childrenScope);
|
|
139
|
-
if (typeof child ===
|
|
145
|
+
if (typeof child === "string") {
|
|
140
146
|
const node = vNode.Create({
|
|
141
|
-
type:
|
|
147
|
+
type: "text",
|
|
142
148
|
namespace: null,
|
|
143
149
|
props() {
|
|
144
150
|
return { nodeValue: Store_1.ObservableScope.Value(childrenScope) };
|
|
145
|
-
}
|
|
151
|
+
},
|
|
146
152
|
});
|
|
147
153
|
node.scopes.push(childrenScope);
|
|
148
154
|
vnode.children = [node];
|
|
@@ -151,6 +157,8 @@ function StaticChildren(vnode, children) {
|
|
|
151
157
|
vnode.scopes.push(childrenScope);
|
|
152
158
|
Store_1.ObservableScope.Touch(childrenScope);
|
|
153
159
|
Store_1.ObservableScope.Watch(childrenScope, CreateScheduledCallback(function () {
|
|
160
|
+
if (vnode.destroyed)
|
|
161
|
+
return;
|
|
154
162
|
vNode.DestroyAll(vnode.children);
|
|
155
163
|
const nodes = Store_1.ObservableScope.Peek(childrenScope);
|
|
156
164
|
vnode.children = Array.isArray(nodes) ? nodes : [nodes];
|
|
@@ -180,6 +188,8 @@ function DynamicChildren(vnode, children, data) {
|
|
|
180
188
|
DestroyNodeList(nodeList);
|
|
181
189
|
});
|
|
182
190
|
Store_1.ObservableScope.Watch(childrenScope, CreateScheduledCallback(function () {
|
|
191
|
+
if (vnode.destroyed)
|
|
192
|
+
return;
|
|
183
193
|
vnode.children = Store_1.ObservableScope.Peek(childrenScope);
|
|
184
194
|
UpdateChildren(vnode);
|
|
185
195
|
}));
|
|
@@ -188,15 +198,18 @@ function DynamicChildren(vnode, children, data) {
|
|
|
188
198
|
function WrapDynamicChildren(dataScope, nodeList, injector, children) {
|
|
189
199
|
return function () {
|
|
190
200
|
const nextData = Store_1.ObservableScope.Value(dataScope);
|
|
191
|
-
const nodeMap = list_1.List.ToNodeMap(nodeList, function (data) {
|
|
201
|
+
const nodeMap = list_1.List.ToNodeMap(nodeList, function (data) {
|
|
202
|
+
return data.data;
|
|
203
|
+
});
|
|
192
204
|
const nextNodeList = list_1.List.Create();
|
|
193
205
|
const nextNodeArray = [];
|
|
194
206
|
for (let x = 0; x < nextData.length; x++) {
|
|
195
207
|
const data = nextData[x];
|
|
196
208
|
const existingNodeArray = nodeMap.get(data);
|
|
197
209
|
let existingNode = null;
|
|
198
|
-
;
|
|
199
|
-
|
|
210
|
+
for (let x = 0; existingNodeArray &&
|
|
211
|
+
x < existingNodeArray.length &&
|
|
212
|
+
existingNode === null; x++) {
|
|
200
213
|
existingNode = existingNodeArray[x];
|
|
201
214
|
existingNodeArray[x] = null;
|
|
202
215
|
}
|
|
@@ -215,13 +228,13 @@ function WrapDynamicChildren(dataScope, nodeList, injector, children) {
|
|
|
215
228
|
const childNodes = injector_1.Injector.Scope(injector, children, data);
|
|
216
229
|
const nodes = Array.isArray(childNodes) ? childNodes : [childNodes];
|
|
217
230
|
for (let x = 0; x < nodes.length; x++) {
|
|
218
|
-
if (typeof nodes[x] ===
|
|
231
|
+
if (typeof nodes[x] === "string")
|
|
219
232
|
nodes[x] = vNode.Create({
|
|
220
|
-
type:
|
|
233
|
+
type: "text",
|
|
221
234
|
namespace: null,
|
|
222
235
|
props: {
|
|
223
|
-
nodeValue: nodes[x]
|
|
224
|
-
}
|
|
236
|
+
nodeValue: nodes[x],
|
|
237
|
+
},
|
|
225
238
|
});
|
|
226
239
|
}
|
|
227
240
|
return nodes;
|
|
@@ -229,7 +242,7 @@ function WrapDynamicChildren(dataScope, nodeList, injector, children) {
|
|
|
229
242
|
list_1.List.Add(nextNodeList, {
|
|
230
243
|
data,
|
|
231
244
|
nodes: Store_1.ObservableScope.Value(childrenScope),
|
|
232
|
-
scope: childrenScope
|
|
245
|
+
scope: childrenScope,
|
|
233
246
|
});
|
|
234
247
|
}
|
|
235
248
|
nextNodeArray.push(...nextNodeList.tail.data.nodes);
|
|
@@ -260,12 +273,12 @@ function UpdateChildren(vnode, init = false) {
|
|
|
260
273
|
if (vnode.destroyed || children !== vnode.children)
|
|
261
274
|
return;
|
|
262
275
|
if (init || !async)
|
|
263
|
-
nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, vnode.children.map(vnode => vnode.node));
|
|
276
|
+
nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, vnode.children.map((vnode) => vnode.node));
|
|
264
277
|
else
|
|
265
278
|
nodeConfig_1.NodeConfig.scheduleUpdate(function () {
|
|
266
279
|
if (vnode.destroyed || children !== vnode.children)
|
|
267
280
|
return;
|
|
268
|
-
nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, vnode.children.map(vnode => vnode.node));
|
|
281
|
+
nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, vnode.children.map((vnode) => vnode.node));
|
|
269
282
|
});
|
|
270
283
|
});
|
|
271
284
|
});
|
|
@@ -287,6 +300,8 @@ function ScheduledAssignment(assign) {
|
|
|
287
300
|
return;
|
|
288
301
|
scheduled = true;
|
|
289
302
|
nodeConfig_1.NodeConfig.scheduleUpdate(function () {
|
|
303
|
+
if (scope.destroyed)
|
|
304
|
+
return;
|
|
290
305
|
scheduled = false;
|
|
291
306
|
const value = Store_1.ObservableScope.Peek(scope);
|
|
292
307
|
assign(value);
|
|
@@ -298,6 +313,10 @@ function CreateScheduledCallback(callback) {
|
|
|
298
313
|
return function () {
|
|
299
314
|
if (scheduled)
|
|
300
315
|
return;
|
|
301
|
-
|
|
316
|
+
scheduled = true;
|
|
317
|
+
nodeConfig_1.NodeConfig.scheduleUpdate(function () {
|
|
318
|
+
scheduled = false;
|
|
319
|
+
callback();
|
|
320
|
+
});
|
|
302
321
|
};
|
|
303
322
|
}
|
package/Node/vNode.types.d.ts
CHANGED
|
@@ -12,6 +12,10 @@ export type vNodeEvents<E extends {
|
|
|
12
12
|
(events: E[P]): void;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
+
export type vNodeChildrenFunction<T> = {
|
|
16
|
+
(data: T): vNode | vNode[];
|
|
17
|
+
(data: T): string;
|
|
18
|
+
};
|
|
15
19
|
export type vNode = {
|
|
16
20
|
definition: vNodeDefinition<any, any, any>;
|
|
17
21
|
injector: Injector;
|
|
@@ -30,7 +34,7 @@ export type vNodeDefinition<P = HTMLElement, E = HTMLElementEventMap, T = never>
|
|
|
30
34
|
}>;
|
|
31
35
|
on?: FunctionOr<vNodeEvents<E>>;
|
|
32
36
|
data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
|
|
33
|
-
children?:
|
|
37
|
+
children?: vNodeChildrenFunction<T>;
|
|
34
38
|
childrenArray?: vNode[];
|
|
35
39
|
componentConstructor?: {
|
|
36
40
|
new (vnode: vNode): Component<any, any, any>;
|