@estjs/template 0.0.10-beta.21 → 0.0.10-beta.22
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/LICENSE +20 -20
- package/package.json +3 -3
- package/types/component.d.ts +18 -18
- package/types/index.d.ts +3 -3
- package/types/jsx.d.ts +2182 -2182
- package/types/node.d.ts +16 -16
- package/dist/template.cjs.js +0 -29
- package/dist/template.cjs.js.map +0 -1
- package/dist/template.d.cts +0 -2308
- package/dist/template.d.ts +0 -2308
- package/dist/template.dev.cjs.js +0 -720
- package/dist/template.dev.esm.js +0 -705
- package/dist/template.esm.js +0 -14
- package/dist/template.esm.js.map +0 -1
package/dist/template.dev.cjs.js
DELETED
|
@@ -1,720 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var shared = require('@estjs/shared');
|
|
4
|
-
var signal = require('@estjs/signal');
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* @estjs/template v0.0.10-beta.20
|
|
8
|
-
* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
|
|
9
|
-
* @license MIT
|
|
10
|
-
**/
|
|
11
|
-
|
|
12
|
-
var _ComponentNode = class _ComponentNode {
|
|
13
|
-
constructor(template2, props) {
|
|
14
|
-
this.template = template2;
|
|
15
|
-
this.props = props;
|
|
16
|
-
this.proxyProps = {};
|
|
17
|
-
this.context = {};
|
|
18
|
-
this.emitter = /* @__PURE__ */ new Set();
|
|
19
|
-
this.mounted = false;
|
|
20
|
-
this.rootNode = null;
|
|
21
|
-
this.hooks = {
|
|
22
|
-
mounted: /* @__PURE__ */ new Set(),
|
|
23
|
-
destroy: /* @__PURE__ */ new Set()
|
|
24
|
-
};
|
|
25
|
-
this.trackMap = /* @__PURE__ */ new Map();
|
|
26
|
-
this.proxyProps = signal.signalObject(
|
|
27
|
-
props,
|
|
28
|
-
(key) => shared.startsWith(key, "on") || shared.startsWith(key, "update")
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
addEventListener() {
|
|
32
|
-
}
|
|
33
|
-
removeEventListener() {
|
|
34
|
-
}
|
|
35
|
-
get firstChild() {
|
|
36
|
-
var _a, _b;
|
|
37
|
-
return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
|
|
38
|
-
}
|
|
39
|
-
get isConnected() {
|
|
40
|
-
var _a, _b;
|
|
41
|
-
return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
|
|
42
|
-
}
|
|
43
|
-
addHook(hook, cb) {
|
|
44
|
-
var _a;
|
|
45
|
-
(_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
|
|
46
|
-
}
|
|
47
|
-
getContext(context) {
|
|
48
|
-
return _ComponentNode.context[context];
|
|
49
|
-
}
|
|
50
|
-
setContext(context, value) {
|
|
51
|
-
_ComponentNode.context[context] = value;
|
|
52
|
-
}
|
|
53
|
-
inheritNode(node) {
|
|
54
|
-
this.context = node.context;
|
|
55
|
-
this.hooks = node.hooks;
|
|
56
|
-
Object.assign(this.proxyProps, node.proxyProps);
|
|
57
|
-
this.rootNode = node.rootNode;
|
|
58
|
-
this.trackMap = node.trackMap;
|
|
59
|
-
const props = this.props;
|
|
60
|
-
this.props = node.props;
|
|
61
|
-
this.patchProps(props);
|
|
62
|
-
}
|
|
63
|
-
mount(parent, before) {
|
|
64
|
-
var _a, _b, _c, _d;
|
|
65
|
-
if (!shared.isFunction(this.template)) {
|
|
66
|
-
throw new Error("Template must be a function");
|
|
67
|
-
}
|
|
68
|
-
if (this.isConnected) {
|
|
69
|
-
return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
|
|
70
|
-
}
|
|
71
|
-
_ComponentNode.ref = this;
|
|
72
|
-
this.rootNode = this.template(signal.useReactive(this.proxyProps, ["children"]));
|
|
73
|
-
_ComponentNode.ref = null;
|
|
74
|
-
this.mounted = true;
|
|
75
|
-
const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
|
|
76
|
-
this.hooks.mounted.forEach((handler) => handler());
|
|
77
|
-
this.patchProps(this.props);
|
|
78
|
-
return mountedNode;
|
|
79
|
-
}
|
|
80
|
-
unmount() {
|
|
81
|
-
var _a;
|
|
82
|
-
this.hooks.destroy.forEach((handler) => handler());
|
|
83
|
-
Object.values(this.hooks).forEach((set) => set.clear());
|
|
84
|
-
(_a = this.rootNode) == null ? void 0 : _a.unmount();
|
|
85
|
-
this.rootNode = null;
|
|
86
|
-
this.proxyProps = {};
|
|
87
|
-
this.mounted = false;
|
|
88
|
-
this.emitter.forEach((emitter) => emitter());
|
|
89
|
-
}
|
|
90
|
-
getNodeTrack(trackKey, suppressCleanupCall) {
|
|
91
|
-
let track = this.trackMap.get(trackKey);
|
|
92
|
-
if (!track) {
|
|
93
|
-
track = { cleanup: () => {
|
|
94
|
-
} };
|
|
95
|
-
this.trackMap.set(trackKey, track);
|
|
96
|
-
}
|
|
97
|
-
if (!suppressCleanupCall) {
|
|
98
|
-
track.cleanup();
|
|
99
|
-
}
|
|
100
|
-
return track;
|
|
101
|
-
}
|
|
102
|
-
patchProps(props) {
|
|
103
|
-
var _a, _b, _c, _d, _e;
|
|
104
|
-
for (const [key, prop] of Object.entries(props)) {
|
|
105
|
-
if (shared.startsWith(key, "on") && ((_a = this.rootNode) == null ? void 0 : _a.nodes)) {
|
|
106
|
-
const event = key.slice(2).toLowerCase();
|
|
107
|
-
const listener = prop;
|
|
108
|
-
const cleanup = addEventListener(this.rootNode.nodes[0], event, listener);
|
|
109
|
-
this.emitter.add(cleanup);
|
|
110
|
-
} else if (key === "ref") {
|
|
111
|
-
if (signal.isSignal(prop)) {
|
|
112
|
-
props[key].value = (_b = this.rootNode) == null ? void 0 : _b.nodes[0];
|
|
113
|
-
} else if (shared.isFunction(prop)) {
|
|
114
|
-
props[key]((_c = this.rootNode) == null ? void 0 : _c.nodes[0]);
|
|
115
|
-
}
|
|
116
|
-
} else if (shared.startsWith(key, "update")) {
|
|
117
|
-
props[key] = signal.isSignal(prop) ? prop.value : prop;
|
|
118
|
-
} else if (key !== "children") {
|
|
119
|
-
const newValue = (_e = (_d = this.proxyProps)[key]) != null ? _e : _d[key] = signal.useSignal(prop);
|
|
120
|
-
const track = this.getNodeTrack(key);
|
|
121
|
-
track.cleanup = signal.useEffect(() => {
|
|
122
|
-
newValue.value = shared.isFunction(prop) ? prop() : prop;
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
this.props = props;
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
_ComponentNode.ref = null;
|
|
130
|
-
_ComponentNode.context = {};
|
|
131
|
-
var ComponentNode = _ComponentNode;
|
|
132
|
-
|
|
133
|
-
// src/template.ts
|
|
134
|
-
function h(_template, props) {
|
|
135
|
-
if (shared.isString(_template)) {
|
|
136
|
-
if (isHtmlTagName(_template)) {
|
|
137
|
-
_template = convertToHtmlTag(_template);
|
|
138
|
-
props = {
|
|
139
|
-
1: props
|
|
140
|
-
};
|
|
141
|
-
}
|
|
142
|
-
if (_template === "") {
|
|
143
|
-
props = {
|
|
144
|
-
0: props
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
_template = template(_template);
|
|
148
|
-
}
|
|
149
|
-
return shared.isFunction(_template) ? new ComponentNode(_template, props) : new TemplateNode(_template, props);
|
|
150
|
-
}
|
|
151
|
-
function isJsxElement(node) {
|
|
152
|
-
return node instanceof ComponentNode || node instanceof TemplateNode;
|
|
153
|
-
}
|
|
154
|
-
function template(html) {
|
|
155
|
-
html = closeHtmlTags(html);
|
|
156
|
-
const template2 = document.createElement("template");
|
|
157
|
-
template2.innerHTML = html;
|
|
158
|
-
return template2;
|
|
159
|
-
}
|
|
160
|
-
function Fragment(props) {
|
|
161
|
-
return props.children;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
// src/utils.ts
|
|
165
|
-
var selfClosingTags = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
|
|
166
|
-
var htmlTags = "a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bdi,bdo,bgsound,big,blink,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,content,data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,image,img,input,ins,kbd,keygen,label,legend,li,link,listing,main,map,mark,marquee,menu,menuitem,meta,meter,nav,nobr,noframes,noscript,object,ol,optgroup,option,output,p,param,picture,plaintext,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,section,select,shadow,small,source,spacer,span,strike,strong,style,sub,summary,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr,xmp";
|
|
167
|
-
function coerceNode(data) {
|
|
168
|
-
if (isJsxElement(data) || data instanceof Node) {
|
|
169
|
-
return data;
|
|
170
|
-
}
|
|
171
|
-
const text = shared.isFalsy(data) ? "" : String(data);
|
|
172
|
-
return document.createTextNode(text);
|
|
173
|
-
}
|
|
174
|
-
function insertChild(parent, child, before = null) {
|
|
175
|
-
const beforeNode = isJsxElement(before) ? before.firstChild : before;
|
|
176
|
-
if (isJsxElement(child)) {
|
|
177
|
-
child.mount(parent, beforeNode);
|
|
178
|
-
} else if (beforeNode) {
|
|
179
|
-
beforeNode.before(child);
|
|
180
|
-
} else {
|
|
181
|
-
parent.append(child);
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
function removeChild(child) {
|
|
185
|
-
if (isJsxElement(child)) {
|
|
186
|
-
child.unmount();
|
|
187
|
-
} else {
|
|
188
|
-
const parent = child.parentNode;
|
|
189
|
-
if (parent) {
|
|
190
|
-
child.remove();
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
function replaceChild(parent, node, child) {
|
|
195
|
-
insertChild(parent, node, child);
|
|
196
|
-
removeChild(child);
|
|
197
|
-
}
|
|
198
|
-
function setAttribute(element, attr, value) {
|
|
199
|
-
if (attr === "class") {
|
|
200
|
-
if (typeof value === "string") {
|
|
201
|
-
element.className = value;
|
|
202
|
-
} else if (Array.isArray(value)) {
|
|
203
|
-
element.className = value.join(" ");
|
|
204
|
-
} else if (value && typeof value === "object") {
|
|
205
|
-
element.className = Object.entries(value).reduce((acc, [key, value2]) => acc + (value2 ? ` ${key}` : ""), "").trim();
|
|
206
|
-
}
|
|
207
|
-
return;
|
|
208
|
-
}
|
|
209
|
-
if (attr === "style") {
|
|
210
|
-
if (typeof value === "string") {
|
|
211
|
-
element.style.cssText = value;
|
|
212
|
-
} else if (value && typeof value === "object") {
|
|
213
|
-
const obj = value;
|
|
214
|
-
Object.keys(obj).forEach((key) => {
|
|
215
|
-
element.style.setProperty(shared.kebabCase(key), String(obj[key]));
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
|
-
return;
|
|
219
|
-
}
|
|
220
|
-
if (shared.isFalsy(value)) {
|
|
221
|
-
element.removeAttribute(attr);
|
|
222
|
-
} else if (value === true) {
|
|
223
|
-
element.setAttribute(attr, "");
|
|
224
|
-
} else {
|
|
225
|
-
if (element instanceof HTMLInputElement) {
|
|
226
|
-
element.value = String(value);
|
|
227
|
-
} else {
|
|
228
|
-
element.setAttribute(attr, String(value));
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
function binNode(node, setter) {
|
|
233
|
-
if (node instanceof HTMLInputElement) {
|
|
234
|
-
switch (node.type) {
|
|
235
|
-
case "checkbox":
|
|
236
|
-
return addEventListener(node, "change", () => {
|
|
237
|
-
setter(Boolean(node.checked));
|
|
238
|
-
});
|
|
239
|
-
case "date":
|
|
240
|
-
return addEventListener(node, "change", () => {
|
|
241
|
-
setter(node.value ? node.value : "");
|
|
242
|
-
});
|
|
243
|
-
case "file":
|
|
244
|
-
return addEventListener(node, "change", () => {
|
|
245
|
-
if (node.files) {
|
|
246
|
-
setter(node.files);
|
|
247
|
-
}
|
|
248
|
-
});
|
|
249
|
-
case "number":
|
|
250
|
-
return addEventListener(node, "input", () => {
|
|
251
|
-
const value = Number.parseFloat(node.value);
|
|
252
|
-
setter(Number.isNaN(value) ? "" : String(value));
|
|
253
|
-
});
|
|
254
|
-
case "radio":
|
|
255
|
-
return addEventListener(node, "change", () => {
|
|
256
|
-
setter(node.checked ? node.value : "");
|
|
257
|
-
});
|
|
258
|
-
case "text":
|
|
259
|
-
return addEventListener(node, "input", () => {
|
|
260
|
-
setter(node.value);
|
|
261
|
-
});
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
if (node instanceof HTMLSelectElement) {
|
|
265
|
-
return addEventListener(node, "change", () => {
|
|
266
|
-
setter(node.value);
|
|
267
|
-
});
|
|
268
|
-
}
|
|
269
|
-
if (node instanceof HTMLTextAreaElement) {
|
|
270
|
-
return addEventListener(node, "input", () => {
|
|
271
|
-
setter(node.value);
|
|
272
|
-
});
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
var p = Promise.resolve();
|
|
276
|
-
function nextTick(fn) {
|
|
277
|
-
return fn ? p.then(fn) : p;
|
|
278
|
-
}
|
|
279
|
-
function addEventListener(node, eventName, handler) {
|
|
280
|
-
node.addEventListener(eventName, handler);
|
|
281
|
-
return () => node.removeEventListener(eventName, handler);
|
|
282
|
-
}
|
|
283
|
-
function closeHtmlTags(input) {
|
|
284
|
-
const selfClosingTagList = selfClosingTags.split(",");
|
|
285
|
-
const tagStack = [];
|
|
286
|
-
const output = [];
|
|
287
|
-
const tagPattern = /<\/?([\da-z-]+)([^>]*)>/gi;
|
|
288
|
-
let lastIndex = 0;
|
|
289
|
-
while (true) {
|
|
290
|
-
const match = tagPattern.exec(input);
|
|
291
|
-
if (!match) break;
|
|
292
|
-
const [fullMatch, tagName] = match;
|
|
293
|
-
const isEndTag = fullMatch[1] === "/";
|
|
294
|
-
output.push(input.slice(lastIndex, match.index));
|
|
295
|
-
lastIndex = match.index + fullMatch.length;
|
|
296
|
-
if (isEndTag) {
|
|
297
|
-
while (tagStack.length > 0 && tagStack[tagStack.length - 1] !== tagName) {
|
|
298
|
-
const unclosedTag = tagStack.pop();
|
|
299
|
-
if (unclosedTag) {
|
|
300
|
-
output.push(`</${unclosedTag}>`);
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
if (tagStack.length > 0) {
|
|
304
|
-
tagStack.pop();
|
|
305
|
-
}
|
|
306
|
-
} else if (!selfClosingTagList.includes(tagName)) {
|
|
307
|
-
tagStack.push(tagName);
|
|
308
|
-
}
|
|
309
|
-
output.push(fullMatch);
|
|
310
|
-
}
|
|
311
|
-
output.push(input.slice(lastIndex));
|
|
312
|
-
while (tagStack.length > 0) {
|
|
313
|
-
const unclosedTag = tagStack.pop();
|
|
314
|
-
if (unclosedTag) {
|
|
315
|
-
output.push(`</${unclosedTag}>`);
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
return output.join("");
|
|
319
|
-
}
|
|
320
|
-
function isHtmlTagName(tagName) {
|
|
321
|
-
const htmlTagsList = htmlTags.split(",");
|
|
322
|
-
return htmlTagsList.includes(tagName);
|
|
323
|
-
}
|
|
324
|
-
function convertToHtmlTag(tagName) {
|
|
325
|
-
const selfClosingTagList = selfClosingTags.split(",");
|
|
326
|
-
if (selfClosingTagList.includes(tagName)) {
|
|
327
|
-
return `<${tagName}/>`;
|
|
328
|
-
} else {
|
|
329
|
-
return `<${tagName}></${tagName}>`;
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
// src/patch.ts
|
|
334
|
-
function patchChildren(parent, childrenMap, nextChildren, before) {
|
|
335
|
-
const result = /* @__PURE__ */ new Map();
|
|
336
|
-
const children = Array.from(childrenMap.values());
|
|
337
|
-
const childrenLength = children.length;
|
|
338
|
-
if (childrenMap.size > 0 && nextChildren.length === 0) {
|
|
339
|
-
if (parent.childNodes.length === childrenLength + (before ? 1 : 0)) {
|
|
340
|
-
parent.innerHTML = "";
|
|
341
|
-
if (before) {
|
|
342
|
-
insertChild(parent, before);
|
|
343
|
-
}
|
|
344
|
-
} else {
|
|
345
|
-
const range = document.createRange();
|
|
346
|
-
const child = children[0];
|
|
347
|
-
const start = isJsxElement(child) ? child.firstChild : child;
|
|
348
|
-
range.setStartBefore(start);
|
|
349
|
-
if (before) {
|
|
350
|
-
range.setEndBefore(before);
|
|
351
|
-
} else {
|
|
352
|
-
range.setEndAfter(parent);
|
|
353
|
-
}
|
|
354
|
-
range.deleteContents();
|
|
355
|
-
}
|
|
356
|
-
children.forEach((node) => {
|
|
357
|
-
if (isJsxElement(node)) {
|
|
358
|
-
node.unmount();
|
|
359
|
-
}
|
|
360
|
-
});
|
|
361
|
-
return result;
|
|
362
|
-
}
|
|
363
|
-
const replaces = [];
|
|
364
|
-
const nextChildrenMap = mapKeys(nextChildren);
|
|
365
|
-
let childIndex = 0;
|
|
366
|
-
for (let [i, child] of nextChildren.entries()) {
|
|
367
|
-
let currChild = children[childIndex];
|
|
368
|
-
let currKey = getKey(currChild, i);
|
|
369
|
-
while (currChild && !nextChildrenMap.has(currKey)) {
|
|
370
|
-
removeChild(currChild);
|
|
371
|
-
childrenMap.delete(currKey);
|
|
372
|
-
currChild = children[++childIndex];
|
|
373
|
-
currKey = getKey(currChild, i);
|
|
374
|
-
}
|
|
375
|
-
const key = getKey(child, i);
|
|
376
|
-
const origChild = childrenMap.get(key);
|
|
377
|
-
if (origChild) {
|
|
378
|
-
child = patch(parent, origChild, child);
|
|
379
|
-
}
|
|
380
|
-
if (currChild) {
|
|
381
|
-
if (currChild === origChild) {
|
|
382
|
-
childIndex++;
|
|
383
|
-
} else {
|
|
384
|
-
const placeholder = document.createComment("");
|
|
385
|
-
insertChild(parent, placeholder, currChild);
|
|
386
|
-
replaces.push([placeholder, child]);
|
|
387
|
-
}
|
|
388
|
-
} else {
|
|
389
|
-
insertChild(parent, child, before);
|
|
390
|
-
}
|
|
391
|
-
result.set(key, child);
|
|
392
|
-
}
|
|
393
|
-
replaces.forEach(([placeholder, child]) => replaceChild(parent, child, placeholder));
|
|
394
|
-
childrenMap.forEach((child, key) => {
|
|
395
|
-
if (child.isConnected && !result.has(key)) {
|
|
396
|
-
removeChild(child);
|
|
397
|
-
}
|
|
398
|
-
});
|
|
399
|
-
return result;
|
|
400
|
-
}
|
|
401
|
-
function patch(parent, node, next) {
|
|
402
|
-
if (node === next) {
|
|
403
|
-
return node;
|
|
404
|
-
}
|
|
405
|
-
if (isJsxElement(node) && isJsxElement(next) && node.template === next.template) {
|
|
406
|
-
next.inheritNode(node);
|
|
407
|
-
return next;
|
|
408
|
-
}
|
|
409
|
-
if (node instanceof Text && next instanceof Text) {
|
|
410
|
-
if (node.textContent !== next.textContent) {
|
|
411
|
-
node.textContent = next.textContent;
|
|
412
|
-
}
|
|
413
|
-
return node;
|
|
414
|
-
}
|
|
415
|
-
replaceChild(parent, next, node);
|
|
416
|
-
return next;
|
|
417
|
-
}
|
|
418
|
-
function mapKeys(children) {
|
|
419
|
-
const result = /* @__PURE__ */ new Map();
|
|
420
|
-
for (const [i, child] of children.entries()) {
|
|
421
|
-
const key = getKey(child, i);
|
|
422
|
-
result.set(key, child);
|
|
423
|
-
}
|
|
424
|
-
return result;
|
|
425
|
-
}
|
|
426
|
-
function getKey(node, index) {
|
|
427
|
-
const id = node instanceof Element ? node.id : void 0;
|
|
428
|
-
const result = id === "" ? void 0 : id;
|
|
429
|
-
return result != null ? result : `_$${index}$`;
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
// src/template-node.ts
|
|
433
|
-
var TemplateNode = class _TemplateNode {
|
|
434
|
-
constructor(template2, props) {
|
|
435
|
-
this.template = template2;
|
|
436
|
-
this.props = props;
|
|
437
|
-
this.treeMap = /* @__PURE__ */ new Map();
|
|
438
|
-
this.mounted = false;
|
|
439
|
-
this.nodes = [];
|
|
440
|
-
this.provides = {};
|
|
441
|
-
this.trackMap = /* @__PURE__ */ new Map();
|
|
442
|
-
this.parent = null;
|
|
443
|
-
}
|
|
444
|
-
get firstChild() {
|
|
445
|
-
var _a;
|
|
446
|
-
return (_a = this.nodes[0]) != null ? _a : null;
|
|
447
|
-
}
|
|
448
|
-
get isConnected() {
|
|
449
|
-
return this.mounted;
|
|
450
|
-
}
|
|
451
|
-
addEventListener() {
|
|
452
|
-
}
|
|
453
|
-
removeEventListener() {
|
|
454
|
-
}
|
|
455
|
-
unmount() {
|
|
456
|
-
this.trackMap.forEach((track) => {
|
|
457
|
-
var _a, _b;
|
|
458
|
-
(_a = track.cleanup) == null ? void 0 : _a.call(track);
|
|
459
|
-
(_b = track.lastNodes) == null ? void 0 : _b.forEach((node) => {
|
|
460
|
-
if (track.isRoot) {
|
|
461
|
-
removeChild(node);
|
|
462
|
-
} else if (node instanceof _TemplateNode) {
|
|
463
|
-
node.unmount();
|
|
464
|
-
}
|
|
465
|
-
});
|
|
466
|
-
});
|
|
467
|
-
this.trackMap.clear();
|
|
468
|
-
this.treeMap.clear();
|
|
469
|
-
this.nodes.forEach((node) => removeChild(node));
|
|
470
|
-
this.nodes = [];
|
|
471
|
-
this.mounted = false;
|
|
472
|
-
}
|
|
473
|
-
mount(parent, before) {
|
|
474
|
-
var _a;
|
|
475
|
-
this.parent = parent;
|
|
476
|
-
if (this.isConnected) {
|
|
477
|
-
this.nodes.forEach((node) => insertChild(parent, node, before));
|
|
478
|
-
return this.nodes;
|
|
479
|
-
}
|
|
480
|
-
const cloneNode = this.template.content.cloneNode(true);
|
|
481
|
-
const firstChild = cloneNode.firstChild;
|
|
482
|
-
if ((_a = firstChild == null ? void 0 : firstChild.hasAttribute) == null ? void 0 : _a.call(firstChild, "_svg_")) {
|
|
483
|
-
firstChild.remove();
|
|
484
|
-
firstChild == null ? void 0 : firstChild.childNodes.forEach((node) => {
|
|
485
|
-
cloneNode.append(node);
|
|
486
|
-
});
|
|
487
|
-
}
|
|
488
|
-
this.nodes = Array.from(cloneNode.childNodes);
|
|
489
|
-
this.mapNodeTree(parent, cloneNode);
|
|
490
|
-
insertChild(parent, cloneNode, before);
|
|
491
|
-
this.patchNodes(this.props);
|
|
492
|
-
this.mounted = true;
|
|
493
|
-
return this.nodes;
|
|
494
|
-
}
|
|
495
|
-
mapNodeTree(parent, tree) {
|
|
496
|
-
let index = 1;
|
|
497
|
-
this.treeMap.set(0, parent);
|
|
498
|
-
const walk = (node) => {
|
|
499
|
-
if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
|
|
500
|
-
this.treeMap.set(index++, node);
|
|
501
|
-
}
|
|
502
|
-
let child = node.firstChild;
|
|
503
|
-
while (child) {
|
|
504
|
-
walk(child);
|
|
505
|
-
child = child.nextSibling;
|
|
506
|
-
}
|
|
507
|
-
};
|
|
508
|
-
walk(tree);
|
|
509
|
-
}
|
|
510
|
-
patchNodes(props) {
|
|
511
|
-
for (const key in props) {
|
|
512
|
-
const index = Number(key);
|
|
513
|
-
const node = this.treeMap.get(index);
|
|
514
|
-
if (node) {
|
|
515
|
-
const value = this.props[key];
|
|
516
|
-
this.patchNode(key, node, value, index === 0);
|
|
517
|
-
}
|
|
518
|
-
}
|
|
519
|
-
this.props = props;
|
|
520
|
-
}
|
|
521
|
-
getNodeTrack(trackKey, trackLastNodes, isRoot) {
|
|
522
|
-
var _a;
|
|
523
|
-
let track = this.trackMap.get(trackKey);
|
|
524
|
-
if (!track) {
|
|
525
|
-
track = { cleanup: () => {
|
|
526
|
-
} };
|
|
527
|
-
if (trackLastNodes) {
|
|
528
|
-
track.lastNodes = /* @__PURE__ */ new Map();
|
|
529
|
-
}
|
|
530
|
-
if (isRoot) {
|
|
531
|
-
track.isRoot = true;
|
|
532
|
-
}
|
|
533
|
-
this.trackMap.set(trackKey, track);
|
|
534
|
-
}
|
|
535
|
-
(_a = track.cleanup) == null ? void 0 : _a.call(track);
|
|
536
|
-
return track;
|
|
537
|
-
}
|
|
538
|
-
inheritNode(node) {
|
|
539
|
-
this.mounted = node.mounted;
|
|
540
|
-
this.nodes = node.nodes;
|
|
541
|
-
this.trackMap = node.trackMap;
|
|
542
|
-
this.treeMap = node.treeMap;
|
|
543
|
-
const props = this.props;
|
|
544
|
-
this.props = node.props;
|
|
545
|
-
this.patchNodes(props);
|
|
546
|
-
}
|
|
547
|
-
patchNode(key, node, props, isRoot) {
|
|
548
|
-
for (const attr in props) {
|
|
549
|
-
if (attr === "children" && props.children) {
|
|
550
|
-
if (!shared.isArray(props.children)) {
|
|
551
|
-
const trackKey = `${key}:${attr}:${0}`;
|
|
552
|
-
const track = this.getNodeTrack(trackKey, true, isRoot);
|
|
553
|
-
patchChild(track, node, props.children, null);
|
|
554
|
-
} else {
|
|
555
|
-
props.children.filter(Boolean).forEach((item, index) => {
|
|
556
|
-
var _a;
|
|
557
|
-
const [child, path] = shared.isArray(item) ? item : [item, null];
|
|
558
|
-
const before = shared.isNil(path) ? null : (_a = this.treeMap.get(path)) != null ? _a : null;
|
|
559
|
-
const trackKey = `${key}:${attr}:${index}`;
|
|
560
|
-
const track = this.getNodeTrack(trackKey, true, isRoot);
|
|
561
|
-
patchChild(track, node, child, before);
|
|
562
|
-
});
|
|
563
|
-
}
|
|
564
|
-
} else if (attr === "ref") {
|
|
565
|
-
if (signal.isSignal(props[attr])) {
|
|
566
|
-
props[attr].value = node;
|
|
567
|
-
} else if (shared.isFunction(props[attr])) {
|
|
568
|
-
props[attr](node);
|
|
569
|
-
}
|
|
570
|
-
} else if (shared.startsWith(attr, "on")) {
|
|
571
|
-
const eventName = attr.slice(2).toLocaleLowerCase();
|
|
572
|
-
const track = this.getNodeTrack(`${key}:${attr}`);
|
|
573
|
-
const listener = props[attr];
|
|
574
|
-
track.cleanup = addEventListener(node, eventName, listener);
|
|
575
|
-
} else if (!shared.startsWith(attr, "update")) {
|
|
576
|
-
const track = this.getNodeTrack(`${key}:${attr}`);
|
|
577
|
-
const val = props[attr];
|
|
578
|
-
const triggerValue = signal.isSignal(val) ? val : signal.useSignal(val);
|
|
579
|
-
patchAttribute(track, node, attr, triggerValue.value);
|
|
580
|
-
const cleanup = signal.useEffect(() => {
|
|
581
|
-
triggerValue.value = signal.isSignal(val) ? val.value : val;
|
|
582
|
-
patchAttribute(track, node, attr, triggerValue.value);
|
|
583
|
-
});
|
|
584
|
-
let cleanupBind;
|
|
585
|
-
const updateKey = `update${shared.capitalizeFirstLetter(attr)}`;
|
|
586
|
-
if (props[updateKey]) {
|
|
587
|
-
cleanupBind = binNode(node, (value) => {
|
|
588
|
-
props[updateKey](value);
|
|
589
|
-
});
|
|
590
|
-
}
|
|
591
|
-
track.cleanup = () => {
|
|
592
|
-
cleanup && cleanup();
|
|
593
|
-
cleanupBind && cleanupBind();
|
|
594
|
-
};
|
|
595
|
-
}
|
|
596
|
-
}
|
|
597
|
-
}
|
|
598
|
-
};
|
|
599
|
-
function patchAttribute(track, node, attr, data) {
|
|
600
|
-
const element = node;
|
|
601
|
-
if (!element.setAttribute) {
|
|
602
|
-
return;
|
|
603
|
-
}
|
|
604
|
-
if (shared.isFunction(data)) {
|
|
605
|
-
track.cleanup = signal.useEffect(() => {
|
|
606
|
-
setAttribute(element, attr, data());
|
|
607
|
-
});
|
|
608
|
-
} else {
|
|
609
|
-
setAttribute(element, attr, data);
|
|
610
|
-
}
|
|
611
|
-
}
|
|
612
|
-
function patchChild(track, parent, child, before) {
|
|
613
|
-
if (shared.isFunction(child)) {
|
|
614
|
-
track.cleanup = signal.useEffect(() => {
|
|
615
|
-
const nextNodes = shared.coerceArray(child()).map(coerceNode);
|
|
616
|
-
track.lastNodes = patchChildren(parent, track.lastNodes, nextNodes, before);
|
|
617
|
-
});
|
|
618
|
-
} else {
|
|
619
|
-
shared.coerceArray(child).forEach((node, i) => {
|
|
620
|
-
const newNode = coerceNode(node);
|
|
621
|
-
track.lastNodes.set(String(i), newNode);
|
|
622
|
-
insertChild(parent, newNode, before);
|
|
623
|
-
});
|
|
624
|
-
}
|
|
625
|
-
}
|
|
626
|
-
|
|
627
|
-
// src/hooks.ts
|
|
628
|
-
function onMount(cb) {
|
|
629
|
-
var _a;
|
|
630
|
-
throwIfOutsideComponent("onMounted");
|
|
631
|
-
(_a = ComponentNode.ref) == null ? void 0 : _a.addHook("mounted", cb);
|
|
632
|
-
}
|
|
633
|
-
function onDestroy(cb) {
|
|
634
|
-
var _a;
|
|
635
|
-
throwIfOutsideComponent("onDestroy");
|
|
636
|
-
(_a = ComponentNode.ref) == null ? void 0 : _a.addHook("destroy", cb);
|
|
637
|
-
}
|
|
638
|
-
function throwIfOutsideComponent(hook) {
|
|
639
|
-
if (!ComponentNode.ref) {
|
|
640
|
-
console.error(
|
|
641
|
-
`"${hook}" can only be called within the component function body
|
|
642
|
-
and cannot be used in asynchronous or deferred calls.`
|
|
643
|
-
);
|
|
644
|
-
}
|
|
645
|
-
}
|
|
646
|
-
function useProvide(key, value) {
|
|
647
|
-
var _a;
|
|
648
|
-
throwIfOutsideComponent("useProvide");
|
|
649
|
-
(_a = ComponentNode.ref) == null ? void 0 : _a.setContext(key, value);
|
|
650
|
-
}
|
|
651
|
-
function useInject(key, defaultValue) {
|
|
652
|
-
var _a;
|
|
653
|
-
throwIfOutsideComponent("useInject");
|
|
654
|
-
return ((_a = ComponentNode.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
|
|
655
|
-
}
|
|
656
|
-
function convertJsonToAttributes(json) {
|
|
657
|
-
return Object.entries(json).map(([key, value]) => `${key}=${JSON.stringify(escape(String(value)))}`).join(" ");
|
|
658
|
-
}
|
|
659
|
-
function renderTemplate(template2, props) {
|
|
660
|
-
if (shared.isFunction(template2)) {
|
|
661
|
-
return template2(props);
|
|
662
|
-
}
|
|
663
|
-
const templateCollection = Array.isArray(template2) ? template2.reduce((acc, tmpl, index) => {
|
|
664
|
-
acc[index + 1] = { template: tmpl };
|
|
665
|
-
return acc;
|
|
666
|
-
}, {}) : template2;
|
|
667
|
-
const childNodesMap = {};
|
|
668
|
-
const processedTemplates = {};
|
|
669
|
-
if (shared.isObject(templateCollection)) {
|
|
670
|
-
for (const [key, tmpl] of Object.entries(templateCollection)) {
|
|
671
|
-
const prop = props[key];
|
|
672
|
-
if (prop) {
|
|
673
|
-
for (const propKey in prop) {
|
|
674
|
-
if (shared.startsWith(propKey, "on") && shared.isFunction(prop[propKey])) {
|
|
675
|
-
delete prop[propKey];
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
if (prop.children) {
|
|
679
|
-
for (const [child, idx] of prop.children) {
|
|
680
|
-
if (!childNodesMap[idx]) childNodesMap[idx] = [];
|
|
681
|
-
childNodesMap[idx].push(child);
|
|
682
|
-
}
|
|
683
|
-
delete prop.children;
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
processedTemplates[key] = { template: tmpl.template, props: prop };
|
|
687
|
-
}
|
|
688
|
-
}
|
|
689
|
-
return Object.entries(processedTemplates).map(([key, { template: tmpl, props: prop }]) => {
|
|
690
|
-
let renderedString = tmpl;
|
|
691
|
-
if (prop) {
|
|
692
|
-
renderedString += ` ${convertJsonToAttributes(prop)}`;
|
|
693
|
-
}
|
|
694
|
-
if (childNodesMap[key]) {
|
|
695
|
-
renderedString += childNodesMap[key].map((child) => renderTemplate(child, prop)).join("");
|
|
696
|
-
}
|
|
697
|
-
return renderedString;
|
|
698
|
-
}).join("");
|
|
699
|
-
}
|
|
700
|
-
function renderToString(component, props) {
|
|
701
|
-
return renderTemplate(component, props);
|
|
702
|
-
}
|
|
703
|
-
function renderSSG(component, root, props = {}) {
|
|
704
|
-
root.innerHTML = renderTemplate(component, props);
|
|
705
|
-
}
|
|
706
|
-
|
|
707
|
-
exports.ComponentNode = ComponentNode;
|
|
708
|
-
exports.Fragment = Fragment;
|
|
709
|
-
exports.TemplateNode = TemplateNode;
|
|
710
|
-
exports.h = h;
|
|
711
|
-
exports.isJsxElement = isJsxElement;
|
|
712
|
-
exports.nextTick = nextTick;
|
|
713
|
-
exports.onDestroy = onDestroy;
|
|
714
|
-
exports.onMount = onMount;
|
|
715
|
-
exports.renderSSG = renderSSG;
|
|
716
|
-
exports.renderTemplate = renderTemplate;
|
|
717
|
-
exports.renderToString = renderToString;
|
|
718
|
-
exports.template = template;
|
|
719
|
-
exports.useInject = useInject;
|
|
720
|
-
exports.useProvide = useProvide;
|