@zeus-js/runtime-dom 0.0.2
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/dist/runtime-dom.cjs.js +880 -0
- package/dist/runtime-dom.cjs.prod.js +872 -0
- package/dist/runtime-dom.d.ts +225 -0
- package/dist/runtime-dom.esm-browser.js +2243 -0
- package/dist/runtime-dom.esm-browser.prod.js +1 -0
- package/dist/runtime-dom.esm-bundler.js +891 -0
- package/dist/runtime-dom.global.js +2291 -0
- package/dist/runtime-dom.global.prod.js +1 -0
- package/index.js +7 -0
- package/package.json +56 -0
|
@@ -0,0 +1,880 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* runtime-dom v0.0.2
|
|
3
|
+
* (c) 2026 baicie
|
|
4
|
+
* Released under the MIT License.
|
|
5
|
+
**/
|
|
6
|
+
Object.defineProperties(exports, {
|
|
7
|
+
__esModule: { value: true },
|
|
8
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
9
|
+
});
|
|
10
|
+
let _zeus_js_signal = require("@zeus-js/signal");
|
|
11
|
+
//#region packages/runtime-dom/src/template.ts
|
|
12
|
+
function template(html, _isImportNode = false, _isSVG = false, _isMathML = false) {
|
|
13
|
+
const t = document.createElement("template");
|
|
14
|
+
t.innerHTML = html;
|
|
15
|
+
return function clone() {
|
|
16
|
+
return t.content.cloneNode(true);
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region packages/runtime-dom/src/hostContext.ts
|
|
21
|
+
let currentHostContext;
|
|
22
|
+
function getCurrentHostContext() {
|
|
23
|
+
return currentHostContext;
|
|
24
|
+
}
|
|
25
|
+
function withHostContext(context, fn) {
|
|
26
|
+
const previous = currentHostContext;
|
|
27
|
+
currentHostContext = context;
|
|
28
|
+
try {
|
|
29
|
+
return fn();
|
|
30
|
+
} finally {
|
|
31
|
+
currentHostContext = previous;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
function captureCurrentHostContext() {
|
|
35
|
+
return currentHostContext;
|
|
36
|
+
}
|
|
37
|
+
function withCapturedHostContext(fn) {
|
|
38
|
+
const context = captureCurrentHostContext();
|
|
39
|
+
return ((...args) => {
|
|
40
|
+
return withHostContext(context, () => fn(...args));
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
//#endregion
|
|
44
|
+
//#region packages/runtime-dom/src/range.ts
|
|
45
|
+
var DynamicRange = class {
|
|
46
|
+
constructor(parent, marker) {
|
|
47
|
+
this.parent = parent;
|
|
48
|
+
this.marker = marker;
|
|
49
|
+
this.nodes = [];
|
|
50
|
+
}
|
|
51
|
+
replace(value) {
|
|
52
|
+
this.clear();
|
|
53
|
+
this.nodes = insertTracked(this.parent, value, this.marker);
|
|
54
|
+
}
|
|
55
|
+
clear() {
|
|
56
|
+
for (const node of this.nodes) {
|
|
57
|
+
var _node$parentNode;
|
|
58
|
+
(_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 || _node$parentNode.removeChild(node);
|
|
59
|
+
}
|
|
60
|
+
this.nodes = [];
|
|
61
|
+
}
|
|
62
|
+
current() {
|
|
63
|
+
return this.nodes;
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
function insertTracked(parent, value, marker) {
|
|
67
|
+
if (value === void 0 || value == null || value === false || value === true) return [];
|
|
68
|
+
if (Array.isArray(value)) {
|
|
69
|
+
const nodes = [];
|
|
70
|
+
for (const item of value) nodes.push(...insertTracked(parent, item, marker));
|
|
71
|
+
return nodes;
|
|
72
|
+
}
|
|
73
|
+
const node = value instanceof Node ? value : document.createTextNode(String(value));
|
|
74
|
+
parent.insertBefore(node, marker);
|
|
75
|
+
return [node];
|
|
76
|
+
}
|
|
77
|
+
function removeNodes$1(nodes) {
|
|
78
|
+
for (const node of nodes) {
|
|
79
|
+
var _node$parentNode2;
|
|
80
|
+
(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
function moveRangeBefore(nodes, parent, marker) {
|
|
84
|
+
for (const node of nodes) parent.insertBefore(node, marker);
|
|
85
|
+
}
|
|
86
|
+
//#endregion
|
|
87
|
+
//#region packages/runtime-dom/src/insert.ts
|
|
88
|
+
function insert(parent, value, marker = null) {
|
|
89
|
+
if (value === void 0) {
|
|
90
|
+
console.warn("[Zeus runtime] insert received `undefined`, which is ignored. Use `null` or a fallback value explicitly if you want to suppress this warning.");
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
insertTracked(parent, value, marker);
|
|
94
|
+
}
|
|
95
|
+
function mountDynamic(parent, marker, value) {
|
|
96
|
+
const range = new DynamicRange(parent, marker);
|
|
97
|
+
const hostContext = captureCurrentHostContext();
|
|
98
|
+
const owner = getCurrentOwner();
|
|
99
|
+
const runner = (0, _zeus_js_signal.effect)(() => {
|
|
100
|
+
const next = runWithOwner(owner, () => withHostContext(hostContext, value));
|
|
101
|
+
range.replace(next);
|
|
102
|
+
});
|
|
103
|
+
(0, _zeus_js_signal.onScopeDispose)(() => {
|
|
104
|
+
(0, _zeus_js_signal.stop)(runner);
|
|
105
|
+
range.clear();
|
|
106
|
+
}, true);
|
|
107
|
+
}
|
|
108
|
+
//#endregion
|
|
109
|
+
//#region packages/runtime-dom/src/context.ts
|
|
110
|
+
let currentOwner;
|
|
111
|
+
function getCurrentOwner() {
|
|
112
|
+
return currentOwner;
|
|
113
|
+
}
|
|
114
|
+
function createOwner(parent = currentOwner) {
|
|
115
|
+
return {
|
|
116
|
+
parent,
|
|
117
|
+
provides: /* @__PURE__ */ new Map()
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
function runWithOwner(owner, fn) {
|
|
121
|
+
const previous = currentOwner;
|
|
122
|
+
currentOwner = owner;
|
|
123
|
+
try {
|
|
124
|
+
return fn();
|
|
125
|
+
} finally {
|
|
126
|
+
currentOwner = previous;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
function createContext(defaultValue) {
|
|
130
|
+
const hasDefaultValue = arguments.length > 0;
|
|
131
|
+
const context = {
|
|
132
|
+
id: Symbol("ZeusContext"),
|
|
133
|
+
defaultValue,
|
|
134
|
+
hasDefaultValue,
|
|
135
|
+
Provider(props) {
|
|
136
|
+
const owner = createOwner(currentOwner);
|
|
137
|
+
owner.provides.set(context.id, props.value);
|
|
138
|
+
return runWithOwner(owner, () => {
|
|
139
|
+
const children = resolveValue$3(props.children);
|
|
140
|
+
if (props.bridge) return createDOMContextBoundary(context, props.value, children);
|
|
141
|
+
return children;
|
|
142
|
+
});
|
|
143
|
+
},
|
|
144
|
+
Bridge(props) {
|
|
145
|
+
return createDOMContextBoundary(context, props.value, resolveValue$3(props.children));
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
return context;
|
|
149
|
+
}
|
|
150
|
+
function provide(context, value) {
|
|
151
|
+
const owner = currentOwner;
|
|
152
|
+
if (!owner) {
|
|
153
|
+
console.warn("[Zeus context] provide() was called without an active component owner.");
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
owner.provides.set(context.id, value);
|
|
157
|
+
}
|
|
158
|
+
function inject(context, fallback) {
|
|
159
|
+
let owner = currentOwner;
|
|
160
|
+
while (owner) {
|
|
161
|
+
if (owner.provides.has(context.id)) return owner.provides.get(context.id);
|
|
162
|
+
owner = owner.parent;
|
|
163
|
+
}
|
|
164
|
+
if (arguments.length >= 2) return fallback;
|
|
165
|
+
if (context.hasDefaultValue) return context.defaultValue;
|
|
166
|
+
throw new Error(`[Zeus context] No provider found for context.`);
|
|
167
|
+
}
|
|
168
|
+
function useContext(context, fallback) {
|
|
169
|
+
if (arguments.length >= 2) return inject(context, fallback);
|
|
170
|
+
return inject(context);
|
|
171
|
+
}
|
|
172
|
+
const ZEUS_CONTEXT_REQUEST = "zeus:context-request";
|
|
173
|
+
/**
|
|
174
|
+
* Creates a transparent DOM element that acts as a context boundary.
|
|
175
|
+
* Native custom elements inside it can use `requestDOMContext` to receive
|
|
176
|
+
* context values via the DOM event protocol.
|
|
177
|
+
*/
|
|
178
|
+
function createDOMContextBoundary(context, value, children) {
|
|
179
|
+
const boundary = document.createElement("zeus-context");
|
|
180
|
+
boundary.style.cssText = "display:contents;position:unset;width:0;height:0;overflow:hidden";
|
|
181
|
+
provideDOMContext(boundary, context, value);
|
|
182
|
+
insert(boundary, children);
|
|
183
|
+
return boundary;
|
|
184
|
+
}
|
|
185
|
+
/**
|
|
186
|
+
* Registers a context value on a DOM target so that any descendant custom
|
|
187
|
+
* element can pick it up via `requestDOMContext`.
|
|
188
|
+
*/
|
|
189
|
+
function provideDOMContext(target, context, value) {
|
|
190
|
+
const handler = (event) => {
|
|
191
|
+
const request = event;
|
|
192
|
+
if (request.type !== "zeus:context-request") return;
|
|
193
|
+
if (request.detail.id !== context.id) return;
|
|
194
|
+
request.stopPropagation();
|
|
195
|
+
request.detail.resolve(value);
|
|
196
|
+
};
|
|
197
|
+
target.addEventListener(ZEUS_CONTEXT_REQUEST, handler);
|
|
198
|
+
(0, _zeus_js_signal.onScopeDispose)(() => {
|
|
199
|
+
target.removeEventListener(ZEUS_CONTEXT_REQUEST, handler);
|
|
200
|
+
}, true);
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* Internal precise DOM context resolver.
|
|
204
|
+
*
|
|
205
|
+
* Unlike requestDOMContext(), this can distinguish:
|
|
206
|
+
* - found: false, value: undefined
|
|
207
|
+
* - found: true, value: undefined
|
|
208
|
+
*/
|
|
209
|
+
function resolveDOMContext(host, context) {
|
|
210
|
+
let found = false;
|
|
211
|
+
let value;
|
|
212
|
+
const event = new CustomEvent(ZEUS_CONTEXT_REQUEST, {
|
|
213
|
+
bubbles: true,
|
|
214
|
+
composed: true,
|
|
215
|
+
cancelable: true,
|
|
216
|
+
detail: {
|
|
217
|
+
id: context.id,
|
|
218
|
+
resolved: false,
|
|
219
|
+
value: void 0,
|
|
220
|
+
resolve(nextValue) {
|
|
221
|
+
found = true;
|
|
222
|
+
value = nextValue;
|
|
223
|
+
this.resolved = true;
|
|
224
|
+
this.value = nextValue;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
host.dispatchEvent(event);
|
|
229
|
+
return {
|
|
230
|
+
found,
|
|
231
|
+
value
|
|
232
|
+
};
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* Public compatibility API.
|
|
236
|
+
*
|
|
237
|
+
* Returns the resolved value if found, otherwise undefined.
|
|
238
|
+
* If you need to distinguish "not found" from "found undefined",
|
|
239
|
+
* use resolveDOMContext().
|
|
240
|
+
*/
|
|
241
|
+
function requestDOMContext(host, context) {
|
|
242
|
+
return resolveDOMContext(host, context).value;
|
|
243
|
+
}
|
|
244
|
+
function resolveValue$3(value) {
|
|
245
|
+
return typeof value === "function" ? value() : value !== null && value !== void 0 ? value : null;
|
|
246
|
+
}
|
|
247
|
+
//#endregion
|
|
248
|
+
//#region packages/runtime-dom/src/devtools.ts
|
|
249
|
+
function emitDevtoolsEvent(event) {
|
|
250
|
+
var _window$__ZEUS_DEVTOO;
|
|
251
|
+
if (typeof window === "undefined") return;
|
|
252
|
+
(_window$__ZEUS_DEVTOO = window.__ZEUS_DEVTOOLS_HOOK__) === null || _window$__ZEUS_DEVTOO === void 0 || _window$__ZEUS_DEVTOO.emit(event);
|
|
253
|
+
}
|
|
254
|
+
//#endregion
|
|
255
|
+
//#region packages/runtime-dom/src/render.ts
|
|
256
|
+
function render(value, container, options = {}) {
|
|
257
|
+
var _options$owner;
|
|
258
|
+
const renderScope = (0, _zeus_js_signal.scope)();
|
|
259
|
+
const owner = (_options$owner = options.owner) !== null && _options$owner !== void 0 ? _options$owner : createOwner();
|
|
260
|
+
renderScope.run(() => {
|
|
261
|
+
container.textContent = "";
|
|
262
|
+
runWithOwner(owner, () => {
|
|
263
|
+
insert(container, resolveValue$2(value));
|
|
264
|
+
});
|
|
265
|
+
});
|
|
266
|
+
emitDevtoolsEvent({
|
|
267
|
+
type: "render",
|
|
268
|
+
target: container
|
|
269
|
+
});
|
|
270
|
+
let disposed = false;
|
|
271
|
+
return () => {
|
|
272
|
+
if (disposed) return;
|
|
273
|
+
disposed = true;
|
|
274
|
+
renderScope.stop();
|
|
275
|
+
container.textContent = "";
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
function resolveValue$2(value) {
|
|
279
|
+
return typeof value === "function" ? value() : value !== null && value !== void 0 ? value : null;
|
|
280
|
+
}
|
|
281
|
+
//#endregion
|
|
282
|
+
//#region packages/runtime-dom/src/dom.ts
|
|
283
|
+
function marker(parent, index) {
|
|
284
|
+
let seen = 0;
|
|
285
|
+
for (const node of parent.childNodes) {
|
|
286
|
+
if (node.nodeType !== Node.COMMENT_NODE) continue;
|
|
287
|
+
const comment = node;
|
|
288
|
+
if (comment.data !== "" && comment.data !== "!") continue;
|
|
289
|
+
if (seen === index) return comment;
|
|
290
|
+
seen++;
|
|
291
|
+
}
|
|
292
|
+
throw new Error(`[Zeus runtime] marker ${index} not found`);
|
|
293
|
+
}
|
|
294
|
+
function child(parent, index) {
|
|
295
|
+
const node = parent.childNodes.item(index);
|
|
296
|
+
if (!node) throw new Error(`[Zeus runtime] child ${index} not found`);
|
|
297
|
+
return node;
|
|
298
|
+
}
|
|
299
|
+
function removeNodes(nodes) {
|
|
300
|
+
for (const node of nodes) {
|
|
301
|
+
var _node$parentNode;
|
|
302
|
+
(_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 || _node$parentNode.removeChild(node);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
//#endregion
|
|
306
|
+
//#region packages/runtime-dom/src/bindings.ts
|
|
307
|
+
function bindText(node, value) {
|
|
308
|
+
(0, _zeus_js_signal.effect)(() => {
|
|
309
|
+
node.data = stringifyText(value());
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
function bindTextContent(el, value) {
|
|
313
|
+
(0, _zeus_js_signal.effect)(() => {
|
|
314
|
+
el.textContent = stringifyText(value());
|
|
315
|
+
});
|
|
316
|
+
}
|
|
317
|
+
function stringifyText(value) {
|
|
318
|
+
if (Array.isArray(value)) return value.map(stringifyText).join("");
|
|
319
|
+
if (value == null || value === false || value === true) return "";
|
|
320
|
+
if (typeof Node !== "undefined" && value instanceof Node) {
|
|
321
|
+
var _value$textContent;
|
|
322
|
+
return (_value$textContent = value.textContent) !== null && _value$textContent !== void 0 ? _value$textContent : "";
|
|
323
|
+
}
|
|
324
|
+
return String(value);
|
|
325
|
+
}
|
|
326
|
+
function setAttr(el, name, value) {
|
|
327
|
+
if (value == null || value === false) {
|
|
328
|
+
el.removeAttribute(normalizeAttrName(name));
|
|
329
|
+
return;
|
|
330
|
+
}
|
|
331
|
+
const attrName = normalizeAttrName(name);
|
|
332
|
+
if (value === true) {
|
|
333
|
+
el.setAttribute(attrName, "");
|
|
334
|
+
return;
|
|
335
|
+
}
|
|
336
|
+
el.setAttribute(attrName, String(value));
|
|
337
|
+
}
|
|
338
|
+
function normalizeAttrName(name) {
|
|
339
|
+
return name === "className" ? "class" : name;
|
|
340
|
+
}
|
|
341
|
+
function bindAttr(el, name, value) {
|
|
342
|
+
(0, _zeus_js_signal.effect)(() => {
|
|
343
|
+
setAttr(el, name, value());
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
function bindProp(el, name, value) {
|
|
347
|
+
(0, _zeus_js_signal.effect)(() => {
|
|
348
|
+
el[name] = value();
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
function bindClass(el, value) {
|
|
352
|
+
(0, _zeus_js_signal.effect)(() => {
|
|
353
|
+
const next = normalizeClass(value());
|
|
354
|
+
if (next) el.setAttribute("class", next);
|
|
355
|
+
else el.removeAttribute("class");
|
|
356
|
+
});
|
|
357
|
+
}
|
|
358
|
+
function normalizeClass(value) {
|
|
359
|
+
if (!value) return "";
|
|
360
|
+
if (typeof value === "string") return value;
|
|
361
|
+
if (Array.isArray(value)) return value.map(normalizeClass).filter(Boolean).join(" ");
|
|
362
|
+
if (typeof value === "object") return Object.keys(value).filter((key) => value[key]).join(" ");
|
|
363
|
+
return "";
|
|
364
|
+
}
|
|
365
|
+
function bindStyle(el, value) {
|
|
366
|
+
let prev;
|
|
367
|
+
(0, _zeus_js_signal.effect)(() => {
|
|
368
|
+
const next = value();
|
|
369
|
+
if (next == null) {
|
|
370
|
+
el.removeAttribute("style");
|
|
371
|
+
prev = void 0;
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
if (typeof next === "string") {
|
|
375
|
+
el.setAttribute("style", next);
|
|
376
|
+
prev = void 0;
|
|
377
|
+
return;
|
|
378
|
+
}
|
|
379
|
+
patchStyle(el, prev, next);
|
|
380
|
+
prev = next;
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
function patchStyle(el, prev, next) {
|
|
384
|
+
const style = el.style;
|
|
385
|
+
if (prev) {
|
|
386
|
+
for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$1(key), "");
|
|
387
|
+
}
|
|
388
|
+
for (const key in next) {
|
|
389
|
+
const value = next[key];
|
|
390
|
+
const name = toKebabCase$1(key);
|
|
391
|
+
if (value == null) style.setProperty(name, "");
|
|
392
|
+
else style.setProperty(name, normalizeStyleValue(key, value));
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
function normalizeStyleValue(key, value) {
|
|
396
|
+
if (typeof value === "number" && value !== 0 && !isUnitlessNumber(key)) return `${value}px`;
|
|
397
|
+
return String(value);
|
|
398
|
+
}
|
|
399
|
+
const unitlessNumbers = new Set([
|
|
400
|
+
"opacity",
|
|
401
|
+
"zIndex",
|
|
402
|
+
"fontWeight",
|
|
403
|
+
"lineHeight",
|
|
404
|
+
"flex",
|
|
405
|
+
"flexGrow",
|
|
406
|
+
"flexShrink",
|
|
407
|
+
"order"
|
|
408
|
+
]);
|
|
409
|
+
function isUnitlessNumber(key) {
|
|
410
|
+
return unitlessNumbers.has(key);
|
|
411
|
+
}
|
|
412
|
+
function toKebabCase$1(value) {
|
|
413
|
+
return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
414
|
+
}
|
|
415
|
+
//#endregion
|
|
416
|
+
//#region packages/runtime-dom/src/events.ts
|
|
417
|
+
const delegatedEvents = /* @__PURE__ */ new Set();
|
|
418
|
+
const delegatedListeners = [];
|
|
419
|
+
const nonBubblingEventMap = {
|
|
420
|
+
focus: "focusin",
|
|
421
|
+
blur: "focusout"
|
|
422
|
+
};
|
|
423
|
+
function bindEvent(el, name, handler) {
|
|
424
|
+
const target = el;
|
|
425
|
+
const events = target.__zeusEvents || (target.__zeusEvents = {});
|
|
426
|
+
events[name] = handler;
|
|
427
|
+
(0, _zeus_js_signal.onScopeDispose)(() => {
|
|
428
|
+
var _target$__zeusEvents;
|
|
429
|
+
if (((_target$__zeusEvents = target.__zeusEvents) === null || _target$__zeusEvents === void 0 ? void 0 : _target$__zeusEvents[name]) === handler) delete target.__zeusEvents[name];
|
|
430
|
+
}, true);
|
|
431
|
+
}
|
|
432
|
+
function delegateEvents(events) {
|
|
433
|
+
for (const event of events) {
|
|
434
|
+
const delegatedName = normalizeDelegatedEventName(event);
|
|
435
|
+
if (delegatedEvents.has(delegatedName)) continue;
|
|
436
|
+
delegatedEvents.add(delegatedName);
|
|
437
|
+
const handler = dispatchDelegatedEvent;
|
|
438
|
+
delegatedListeners.push(delegatedName);
|
|
439
|
+
document.addEventListener(delegatedName, handler);
|
|
440
|
+
emitDevtoolsEvent({
|
|
441
|
+
type: "delegate-event",
|
|
442
|
+
event: delegatedName
|
|
443
|
+
});
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
function normalizeDelegatedEventName(name) {
|
|
447
|
+
var _nonBubblingEventMap$;
|
|
448
|
+
return (_nonBubblingEventMap$ = nonBubblingEventMap[name]) !== null && _nonBubblingEventMap$ !== void 0 ? _nonBubblingEventMap$ : name;
|
|
449
|
+
}
|
|
450
|
+
function normalizeOriginalEventName(name) {
|
|
451
|
+
if (name === "focusin") return "focus";
|
|
452
|
+
if (name === "focusout") return "blur";
|
|
453
|
+
return name;
|
|
454
|
+
}
|
|
455
|
+
function dispatchDelegatedEvent(event) {
|
|
456
|
+
const eventName = normalizeOriginalEventName(event.type);
|
|
457
|
+
let node = event.target;
|
|
458
|
+
while (node && node !== document) {
|
|
459
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
460
|
+
var _el$__zeusEvents;
|
|
461
|
+
const el = node;
|
|
462
|
+
const handler = (_el$__zeusEvents = el.__zeusEvents) === null || _el$__zeusEvents === void 0 ? void 0 : _el$__zeusEvents[eventName];
|
|
463
|
+
if (handler) {
|
|
464
|
+
callDelegatedHandler(el, handler, event);
|
|
465
|
+
if (event.cancelBubble) return;
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
node = node.parentNode;
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
function callDelegatedHandler(el, handler, event) {
|
|
472
|
+
const previousCurrentTarget = Object.prototype.hasOwnProperty.call(event, "currentTarget") ? Object.getOwnPropertyDescriptor(event, "currentTarget") : void 0;
|
|
473
|
+
try {
|
|
474
|
+
Object.defineProperty(event, "currentTarget", {
|
|
475
|
+
configurable: true,
|
|
476
|
+
get() {
|
|
477
|
+
return el;
|
|
478
|
+
}
|
|
479
|
+
});
|
|
480
|
+
} catch {}
|
|
481
|
+
try {
|
|
482
|
+
handler.call(el, event);
|
|
483
|
+
} finally {
|
|
484
|
+
try {
|
|
485
|
+
if (previousCurrentTarget) Object.defineProperty(event, "currentTarget", previousCurrentTarget);
|
|
486
|
+
else delete event.currentTarget;
|
|
487
|
+
} catch {}
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
//#endregion
|
|
491
|
+
//#region packages/runtime-dom/src/refs.ts
|
|
492
|
+
function setRef(target, value) {
|
|
493
|
+
if (target == null) return;
|
|
494
|
+
if (typeof target === "function") {
|
|
495
|
+
target(value);
|
|
496
|
+
return;
|
|
497
|
+
}
|
|
498
|
+
if ("value" in target) {
|
|
499
|
+
target.value = value;
|
|
500
|
+
return;
|
|
501
|
+
}
|
|
502
|
+
if ("current" in target) {
|
|
503
|
+
target.current = value;
|
|
504
|
+
return;
|
|
505
|
+
}
|
|
506
|
+
console.warn("[Zeus runtime] Invalid ref target:", target);
|
|
507
|
+
}
|
|
508
|
+
function bindRef(el, target) {
|
|
509
|
+
setRef(target, el);
|
|
510
|
+
if ((0, _zeus_js_signal.getCurrentScope)()) (0, _zeus_js_signal.onScopeDispose)(() => {
|
|
511
|
+
setRef(target, null);
|
|
512
|
+
}, true);
|
|
513
|
+
}
|
|
514
|
+
//#endregion
|
|
515
|
+
//#region packages/runtime-dom/src/component.ts
|
|
516
|
+
function createComponent(component, props) {
|
|
517
|
+
return runWithOwner(createOwner(), () => component(props));
|
|
518
|
+
}
|
|
519
|
+
//#endregion
|
|
520
|
+
//#region packages/runtime-dom/src/list.ts
|
|
521
|
+
function mountFor$1(parent, marker, each, key, render) {
|
|
522
|
+
if (!key) {
|
|
523
|
+
mountIndexFor(parent, marker, each, render);
|
|
524
|
+
return;
|
|
525
|
+
}
|
|
526
|
+
mountKeyedFor(parent, marker, each, key, render);
|
|
527
|
+
}
|
|
528
|
+
function mountIndexFor(parent, marker, each, render) {
|
|
529
|
+
let current = [];
|
|
530
|
+
const owner = getCurrentOwner();
|
|
531
|
+
const runner = (0, _zeus_js_signal.effect)(() => {
|
|
532
|
+
var _each;
|
|
533
|
+
removeNodes$1(current);
|
|
534
|
+
current = [];
|
|
535
|
+
const list = (_each = each()) !== null && _each !== void 0 ? _each : [];
|
|
536
|
+
for (let i = 0; i < list.length; i++) current.push(...insertTracked(parent, runWithOwner(owner, () => render(list[i], i)), marker));
|
|
537
|
+
});
|
|
538
|
+
(0, _zeus_js_signal.onScopeDispose)(() => {
|
|
539
|
+
(0, _zeus_js_signal.stop)(runner);
|
|
540
|
+
removeNodes$1(current);
|
|
541
|
+
current = [];
|
|
542
|
+
}, true);
|
|
543
|
+
}
|
|
544
|
+
function mountKeyedFor(parent, marker, each, key, render) {
|
|
545
|
+
let records = [];
|
|
546
|
+
const owner = getCurrentOwner();
|
|
547
|
+
const runner = (0, _zeus_js_signal.effect)(() => {
|
|
548
|
+
var _each2;
|
|
549
|
+
const nextItems = (_each2 = each()) !== null && _each2 !== void 0 ? _each2 : [];
|
|
550
|
+
const oldMap = /* @__PURE__ */ new Map();
|
|
551
|
+
for (const record of records) oldMap.set(record.key, record);
|
|
552
|
+
const nextRecords = [];
|
|
553
|
+
for (let i = 0; i < nextItems.length; i++) {
|
|
554
|
+
const item = nextItems[i];
|
|
555
|
+
const itemKey = key(item, i);
|
|
556
|
+
const oldRecord = oldMap.get(itemKey);
|
|
557
|
+
if (oldRecord) {
|
|
558
|
+
oldMap.delete(itemKey);
|
|
559
|
+
oldRecord.item = item;
|
|
560
|
+
oldRecord.index = i;
|
|
561
|
+
nextRecords.push(oldRecord);
|
|
562
|
+
} else nextRecords.push({
|
|
563
|
+
key: itemKey,
|
|
564
|
+
item,
|
|
565
|
+
index: i,
|
|
566
|
+
nodes: insertTracked(parent, runWithOwner(owner, () => render(item, i)), marker)
|
|
567
|
+
});
|
|
568
|
+
}
|
|
569
|
+
for (const record of oldMap.values()) removeNodes$1(record.nodes);
|
|
570
|
+
for (let i = nextRecords.length - 1; i >= 0; i--) {
|
|
571
|
+
var _nextRecords$nodes$;
|
|
572
|
+
const record = nextRecords[i];
|
|
573
|
+
const anchor = i === nextRecords.length - 1 ? marker : (_nextRecords$nodes$ = nextRecords[i + 1].nodes[0]) !== null && _nextRecords$nodes$ !== void 0 ? _nextRecords$nodes$ : marker;
|
|
574
|
+
moveRangeBefore(record.nodes, parent, anchor);
|
|
575
|
+
}
|
|
576
|
+
emitDevtoolsEvent({
|
|
577
|
+
type: "mount-for",
|
|
578
|
+
length: records.length
|
|
579
|
+
});
|
|
580
|
+
records = nextRecords;
|
|
581
|
+
});
|
|
582
|
+
(0, _zeus_js_signal.onScopeDispose)(() => {
|
|
583
|
+
(0, _zeus_js_signal.stop)(runner);
|
|
584
|
+
for (const record of records) removeNodes$1(record.nodes);
|
|
585
|
+
records = [];
|
|
586
|
+
}, true);
|
|
587
|
+
}
|
|
588
|
+
//#endregion
|
|
589
|
+
//#region packages/runtime-dom/src/controlFlow.ts
|
|
590
|
+
function Show(props) {
|
|
591
|
+
return resolveValue(props.when ? props.children : props.fallback);
|
|
592
|
+
}
|
|
593
|
+
function resolveValue(value) {
|
|
594
|
+
if (typeof value === "function") return value();
|
|
595
|
+
return value !== null && value !== void 0 ? value : null;
|
|
596
|
+
}
|
|
597
|
+
function mountShow(parent, marker, when, children, fallback) {
|
|
598
|
+
mountDynamic(parent, marker, () => when() ? children() : fallback ? fallback() : null);
|
|
599
|
+
}
|
|
600
|
+
function For(props) {
|
|
601
|
+
var _props$each$map, _props$each;
|
|
602
|
+
return (_props$each$map = (_props$each = props.each) === null || _props$each === void 0 ? void 0 : _props$each.map((item, index) => props.children(item, index))) !== null && _props$each$map !== void 0 ? _props$each$map : null;
|
|
603
|
+
}
|
|
604
|
+
function mountFor(parent, marker, each, key, render) {
|
|
605
|
+
mountFor$1(parent, marker, each, key, render);
|
|
606
|
+
}
|
|
607
|
+
//#endregion
|
|
608
|
+
//#region packages/runtime-dom/src/defineElement.ts
|
|
609
|
+
function defineElement(tagName, options, setup) {
|
|
610
|
+
var _options$props;
|
|
611
|
+
const propDefs = normalizePropDefinitions((_options$props = options.props) !== null && _options$props !== void 0 ? _options$props : {});
|
|
612
|
+
const observedAttributes = propDefs.filter((def) => def.attr !== false).map((def) => def.attr);
|
|
613
|
+
class ZeusElement extends HTMLElement {
|
|
614
|
+
static get observedAttributes() {
|
|
615
|
+
return observedAttributes;
|
|
616
|
+
}
|
|
617
|
+
constructor() {
|
|
618
|
+
super();
|
|
619
|
+
this.props = (0, _zeus_js_signal.state)({});
|
|
620
|
+
this.lightChildren = [];
|
|
621
|
+
this.capturedLightChildren = false;
|
|
622
|
+
this.reflecting = false;
|
|
623
|
+
applyPropDefaults(this.props, propDefs);
|
|
624
|
+
definePropAccessors(this, this.props, propDefs);
|
|
625
|
+
}
|
|
626
|
+
connectedCallback() {
|
|
627
|
+
var _options$shadow, _options$consumes;
|
|
628
|
+
if (this.dispose) return;
|
|
629
|
+
const shadow = (_options$shadow = options.shadow) !== null && _options$shadow !== void 0 ? _options$shadow : false;
|
|
630
|
+
const mode = shadow ? "shadow" : "light";
|
|
631
|
+
if (mode === "light" && !this.capturedLightChildren) {
|
|
632
|
+
this.lightChildren = Array.from(this.childNodes);
|
|
633
|
+
this.capturedLightChildren = true;
|
|
634
|
+
}
|
|
635
|
+
this.syncAttributesToProps(propDefs);
|
|
636
|
+
const owner = createOwner();
|
|
637
|
+
for (const context of (_options$consumes = options.consumes) !== null && _options$consumes !== void 0 ? _options$consumes : []) {
|
|
638
|
+
const resolved = resolveDOMContext(this, context);
|
|
639
|
+
if (resolved.found) owner.provides.set(context.id, resolved.value);
|
|
640
|
+
else if (context.hasDefaultValue) owner.provides.set(context.id, context.defaultValue);
|
|
641
|
+
}
|
|
642
|
+
const target = this.resolveRenderTarget(shadow);
|
|
643
|
+
const hostContext = {
|
|
644
|
+
host: this,
|
|
645
|
+
mode,
|
|
646
|
+
lightChildren: this.lightChildren
|
|
647
|
+
};
|
|
648
|
+
const setupContext = {
|
|
649
|
+
host: this,
|
|
650
|
+
emit: (name, detail, eventOptions) => {
|
|
651
|
+
return this.dispatchEvent(new CustomEvent(name, {
|
|
652
|
+
bubbles: true,
|
|
653
|
+
composed: true,
|
|
654
|
+
cancelable: true,
|
|
655
|
+
...eventOptions,
|
|
656
|
+
detail
|
|
657
|
+
}));
|
|
658
|
+
}
|
|
659
|
+
};
|
|
660
|
+
this.dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => setup(this.props, setupContext))), target, { owner });
|
|
661
|
+
mountStyles(target, options.styles);
|
|
662
|
+
(0, _zeus_js_signal.onScopeDispose)(() => {
|
|
663
|
+
var _this$dispose;
|
|
664
|
+
(_this$dispose = this.dispose) === null || _this$dispose === void 0 || _this$dispose.call(this);
|
|
665
|
+
this.dispose = void 0;
|
|
666
|
+
}, true);
|
|
667
|
+
}
|
|
668
|
+
disconnectedCallback() {
|
|
669
|
+
var _this$dispose2;
|
|
670
|
+
(_this$dispose2 = this.dispose) === null || _this$dispose2 === void 0 || _this$dispose2.call(this);
|
|
671
|
+
this.dispose = void 0;
|
|
672
|
+
}
|
|
673
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
674
|
+
if (oldValue === newValue || this.reflecting) return;
|
|
675
|
+
const def = propDefs.find((item) => item.attr === name);
|
|
676
|
+
if (!def) return;
|
|
677
|
+
this.props[def.key] = castAttributeValue(newValue, def);
|
|
678
|
+
}
|
|
679
|
+
resolveRenderTarget(shadow) {
|
|
680
|
+
if (this.target) return this.target;
|
|
681
|
+
if (!shadow) {
|
|
682
|
+
this.target = this;
|
|
683
|
+
return this.target;
|
|
684
|
+
}
|
|
685
|
+
this.target = this.attachShadow(typeof shadow === "object" ? shadow : { mode: "open" });
|
|
686
|
+
return this.target;
|
|
687
|
+
}
|
|
688
|
+
syncAttributesToProps(defs) {
|
|
689
|
+
for (const def of defs) {
|
|
690
|
+
if (def.attr === false) continue;
|
|
691
|
+
const value = this.getAttribute(def.attr);
|
|
692
|
+
if (value !== null || def.type === Boolean) this.props[def.key] = castAttributeValue(value, def);
|
|
693
|
+
}
|
|
694
|
+
}
|
|
695
|
+
_writePropFromProperty(key, value) {
|
|
696
|
+
const def = propDefs.find((item) => item.key === key);
|
|
697
|
+
this.props[key] = value;
|
|
698
|
+
if ((def === null || def === void 0 ? void 0 : def.reflect) && def.attr !== false) {
|
|
699
|
+
this.reflecting = true;
|
|
700
|
+
try {
|
|
701
|
+
reflectPropToAttribute(this, def, value);
|
|
702
|
+
} finally {
|
|
703
|
+
this.reflecting = false;
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
if (!customElements.get(tagName)) customElements.define(tagName, ZeusElement);
|
|
709
|
+
return ZeusElement;
|
|
710
|
+
}
|
|
711
|
+
function normalizePropDefinitions(props) {
|
|
712
|
+
return Object.keys(props).map((key) => {
|
|
713
|
+
const input = props[key];
|
|
714
|
+
if (typeof input === "function") return {
|
|
715
|
+
key,
|
|
716
|
+
attr: toKebabCase(key),
|
|
717
|
+
type: input,
|
|
718
|
+
reflect: false
|
|
719
|
+
};
|
|
720
|
+
return {
|
|
721
|
+
key,
|
|
722
|
+
attr: (input === null || input === void 0 ? void 0 : input.attr) === void 0 ? toKebabCase(key) : input.attr,
|
|
723
|
+
type: input === null || input === void 0 ? void 0 : input.type,
|
|
724
|
+
reflect: Boolean(input === null || input === void 0 ? void 0 : input.reflect),
|
|
725
|
+
default: input === null || input === void 0 ? void 0 : input.default
|
|
726
|
+
};
|
|
727
|
+
});
|
|
728
|
+
}
|
|
729
|
+
function applyPropDefaults(props, defs) {
|
|
730
|
+
for (const def of defs) {
|
|
731
|
+
if (!("default" in def)) continue;
|
|
732
|
+
const value = typeof def.default === "function" ? def.default() : def.default;
|
|
733
|
+
props[def.key] = value;
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
function definePropAccessors(element, props, defs) {
|
|
737
|
+
for (const def of defs) {
|
|
738
|
+
if (def.key in element) continue;
|
|
739
|
+
Object.defineProperty(element, def.key, {
|
|
740
|
+
configurable: true,
|
|
741
|
+
enumerable: true,
|
|
742
|
+
get() {
|
|
743
|
+
return props[def.key];
|
|
744
|
+
},
|
|
745
|
+
set(value) {
|
|
746
|
+
element._writePropFromProperty(def.key, value);
|
|
747
|
+
}
|
|
748
|
+
});
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
function castAttributeValue(value, def) {
|
|
752
|
+
if (def.type === Boolean) return value !== null;
|
|
753
|
+
if (value === null) return;
|
|
754
|
+
if (def.type === Number) return Number(value);
|
|
755
|
+
if (def.type === Object || def.type === Array) try {
|
|
756
|
+
return JSON.parse(value);
|
|
757
|
+
} catch {
|
|
758
|
+
console.warn(`[Zeus custom-element] Failed to parse JSON attribute "${def.attr}".`);
|
|
759
|
+
return def.type === Array ? [] : {};
|
|
760
|
+
}
|
|
761
|
+
return value;
|
|
762
|
+
}
|
|
763
|
+
function reflectPropToAttribute(element, def, value) {
|
|
764
|
+
if (def.attr === false) return;
|
|
765
|
+
if (def.type === Boolean) {
|
|
766
|
+
if (value) element.setAttribute(def.attr, "");
|
|
767
|
+
else element.removeAttribute(def.attr);
|
|
768
|
+
return;
|
|
769
|
+
}
|
|
770
|
+
if (value == null) {
|
|
771
|
+
element.removeAttribute(def.attr);
|
|
772
|
+
return;
|
|
773
|
+
}
|
|
774
|
+
if (def.type === Object || def.type === Array) {
|
|
775
|
+
element.setAttribute(def.attr, JSON.stringify(value));
|
|
776
|
+
return;
|
|
777
|
+
}
|
|
778
|
+
element.setAttribute(def.attr, String(value));
|
|
779
|
+
}
|
|
780
|
+
function mountStyles(target, styles) {
|
|
781
|
+
if (!styles) return;
|
|
782
|
+
const list = Array.isArray(styles) ? styles : [styles];
|
|
783
|
+
for (const css of list) {
|
|
784
|
+
const style = document.createElement("style");
|
|
785
|
+
style.textContent = css;
|
|
786
|
+
target.appendChild(style);
|
|
787
|
+
}
|
|
788
|
+
}
|
|
789
|
+
function toKebabCase(value) {
|
|
790
|
+
return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
791
|
+
}
|
|
792
|
+
//#endregion
|
|
793
|
+
//#region packages/runtime-dom/src/slot.ts
|
|
794
|
+
function createSlot(name, fallback) {
|
|
795
|
+
const context = getCurrentHostContext();
|
|
796
|
+
if (!context) return createNativeSlot(name, fallback);
|
|
797
|
+
if (context.mode === "shadow") return createNativeSlot(name, fallback);
|
|
798
|
+
const assigned = findLightSlotNodes(context.lightChildren, name);
|
|
799
|
+
if (assigned.length > 0) return Array.from(assigned);
|
|
800
|
+
return fallback ? fallback() : null;
|
|
801
|
+
}
|
|
802
|
+
function createNativeSlot(name, fallback) {
|
|
803
|
+
const slot = document.createElement("slot");
|
|
804
|
+
if (name) slot.setAttribute("name", name);
|
|
805
|
+
const fallbackValue = fallback === null || fallback === void 0 ? void 0 : fallback();
|
|
806
|
+
if (fallbackValue != null) insert(slot, fallbackValue);
|
|
807
|
+
return slot;
|
|
808
|
+
}
|
|
809
|
+
function findLightSlotNodes(nodes, name) {
|
|
810
|
+
if (name) return nodes.filter((node) => {
|
|
811
|
+
if (node.nodeType !== Node.ELEMENT_NODE) return false;
|
|
812
|
+
return node.getAttribute("slot") === name;
|
|
813
|
+
});
|
|
814
|
+
return nodes.filter((node) => {
|
|
815
|
+
if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute("slot");
|
|
816
|
+
return isMeaningfulTextNode(node);
|
|
817
|
+
});
|
|
818
|
+
}
|
|
819
|
+
function isMeaningfulTextNode(node) {
|
|
820
|
+
var _node$textContent;
|
|
821
|
+
if (node.nodeType !== Node.TEXT_NODE) return false;
|
|
822
|
+
return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
|
|
823
|
+
}
|
|
824
|
+
//#endregion
|
|
825
|
+
//#region packages/runtime-dom/src/webComponents.ts
|
|
826
|
+
function Host(props) {
|
|
827
|
+
return resolveValue$1(props.children);
|
|
828
|
+
}
|
|
829
|
+
function Slot(props) {
|
|
830
|
+
return createSlot(props.name, () => resolveValue$1(props.children));
|
|
831
|
+
}
|
|
832
|
+
function resolveValue$1(value) {
|
|
833
|
+
return typeof value === "function" ? value() : value;
|
|
834
|
+
}
|
|
835
|
+
//#endregion
|
|
836
|
+
exports.For = For;
|
|
837
|
+
exports.Host = Host;
|
|
838
|
+
exports.Show = Show;
|
|
839
|
+
exports.Slot = Slot;
|
|
840
|
+
exports.ZEUS_CONTEXT_REQUEST = ZEUS_CONTEXT_REQUEST;
|
|
841
|
+
exports.bindAttr = bindAttr;
|
|
842
|
+
exports.bindClass = bindClass;
|
|
843
|
+
exports.bindEvent = bindEvent;
|
|
844
|
+
exports.bindProp = bindProp;
|
|
845
|
+
exports.bindRef = bindRef;
|
|
846
|
+
exports.bindStyle = bindStyle;
|
|
847
|
+
exports.bindText = bindText;
|
|
848
|
+
exports.bindTextContent = bindTextContent;
|
|
849
|
+
exports.captureCurrentHostContext = captureCurrentHostContext;
|
|
850
|
+
exports.child = child;
|
|
851
|
+
exports.createComponent = createComponent;
|
|
852
|
+
exports.createContext = createContext;
|
|
853
|
+
exports.createDOMContextBoundary = createDOMContextBoundary;
|
|
854
|
+
exports.createOwner = createOwner;
|
|
855
|
+
exports.createSlot = createSlot;
|
|
856
|
+
exports.defineElement = defineElement;
|
|
857
|
+
exports.delegateEvents = delegateEvents;
|
|
858
|
+
exports.getCurrentHostContext = getCurrentHostContext;
|
|
859
|
+
exports.getCurrentOwner = getCurrentOwner;
|
|
860
|
+
exports.inject = inject;
|
|
861
|
+
exports.insert = insert;
|
|
862
|
+
exports.marker = marker;
|
|
863
|
+
exports.mountDynamic = mountDynamic;
|
|
864
|
+
exports.mountFor = mountFor;
|
|
865
|
+
exports.mountShow = mountShow;
|
|
866
|
+
exports.normalizeClass = normalizeClass;
|
|
867
|
+
exports.provide = provide;
|
|
868
|
+
exports.provideDOMContext = provideDOMContext;
|
|
869
|
+
exports.removeNodes = removeNodes;
|
|
870
|
+
exports.render = render;
|
|
871
|
+
exports.requestDOMContext = requestDOMContext;
|
|
872
|
+
exports.resolveDOMContext = resolveDOMContext;
|
|
873
|
+
exports.resolveValue = resolveValue;
|
|
874
|
+
exports.runWithOwner = runWithOwner;
|
|
875
|
+
exports.setAttr = setAttr;
|
|
876
|
+
exports.setRef = setRef;
|
|
877
|
+
exports.template = template;
|
|
878
|
+
exports.useContext = useContext;
|
|
879
|
+
exports.withCapturedHostContext = withCapturedHostContext;
|
|
880
|
+
exports.withHostContext = withHostContext;
|