@zeus-js/runtime-dom 0.0.2 → 0.1.0-beta.1
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 +191 -43
- package/dist/runtime-dom.cjs.prod.js +185 -43
- package/dist/runtime-dom.d.ts +54 -39
- package/dist/runtime-dom.esm-browser.js +202 -55
- package/dist/runtime-dom.esm-browser.prod.js +1 -1
- package/dist/runtime-dom.esm-bundler.js +191 -44
- package/dist/runtime-dom.global.js +202 -54
- package/dist/runtime-dom.global.prod.js +1 -1
- package/package.json +4 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* runtime-dom v0.0.
|
|
2
|
+
* runtime-dom v0.1.0-beta.1
|
|
3
3
|
* (c) 2026 baicie
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
**/
|
|
@@ -8,7 +8,7 @@ Object.defineProperties(exports, {
|
|
|
8
8
|
[Symbol.toStringTag]: { value: "Module" }
|
|
9
9
|
});
|
|
10
10
|
let _zeus_js_signal = require("@zeus-js/signal");
|
|
11
|
-
//#region packages/runtime-dom/src/template.ts
|
|
11
|
+
//#region packages/core/runtime-dom/src/template.ts
|
|
12
12
|
function template(html, _isImportNode = false, _isSVG = false, _isMathML = false) {
|
|
13
13
|
const t = document.createElement("template");
|
|
14
14
|
t.innerHTML = html;
|
|
@@ -17,7 +17,7 @@ function template(html, _isImportNode = false, _isSVG = false, _isMathML = false
|
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
19
|
//#endregion
|
|
20
|
-
//#region packages/runtime-dom/src/hostContext.ts
|
|
20
|
+
//#region packages/core/runtime-dom/src/hostContext.ts
|
|
21
21
|
let currentHostContext;
|
|
22
22
|
function getCurrentHostContext() {
|
|
23
23
|
return currentHostContext;
|
|
@@ -41,7 +41,7 @@ function withCapturedHostContext(fn) {
|
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
//#endregion
|
|
44
|
-
//#region packages/runtime-dom/src/range.ts
|
|
44
|
+
//#region packages/core/runtime-dom/src/range.ts
|
|
45
45
|
var DynamicRange = class {
|
|
46
46
|
constructor(parent, marker) {
|
|
47
47
|
this.parent = parent;
|
|
@@ -63,7 +63,7 @@ var DynamicRange = class {
|
|
|
63
63
|
return this.nodes;
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
|
-
function insertTracked(parent, value, marker) {
|
|
66
|
+
function insertTracked(parent, value, marker = null) {
|
|
67
67
|
if (value === void 0 || value == null || value === false || value === true) return [];
|
|
68
68
|
if (Array.isArray(value)) {
|
|
69
69
|
const nodes = [];
|
|
@@ -80,11 +80,11 @@ function removeNodes$1(nodes) {
|
|
|
80
80
|
(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
function moveRangeBefore(nodes, parent, marker) {
|
|
83
|
+
function moveRangeBefore(nodes, parent, marker = null) {
|
|
84
84
|
for (const node of nodes) parent.insertBefore(node, marker);
|
|
85
85
|
}
|
|
86
86
|
//#endregion
|
|
87
|
-
//#region packages/runtime-dom/src/insert.ts
|
|
87
|
+
//#region packages/core/runtime-dom/src/insert.ts
|
|
88
88
|
function insert(parent, value, marker = null) {
|
|
89
89
|
if (value === void 0) return;
|
|
90
90
|
insertTracked(parent, value, marker);
|
|
@@ -103,7 +103,7 @@ function mountDynamic(parent, marker, value) {
|
|
|
103
103
|
}, true);
|
|
104
104
|
}
|
|
105
105
|
//#endregion
|
|
106
|
-
//#region packages/runtime-dom/src/context.ts
|
|
106
|
+
//#region packages/core/runtime-dom/src/context.ts
|
|
107
107
|
let currentOwner;
|
|
108
108
|
function getCurrentOwner() {
|
|
109
109
|
return currentOwner;
|
|
@@ -239,14 +239,14 @@ function resolveValue$3(value) {
|
|
|
239
239
|
return typeof value === "function" ? value() : value !== null && value !== void 0 ? value : null;
|
|
240
240
|
}
|
|
241
241
|
//#endregion
|
|
242
|
-
//#region packages/runtime-dom/src/devtools.ts
|
|
242
|
+
//#region packages/core/runtime-dom/src/devtools.ts
|
|
243
243
|
function emitDevtoolsEvent(event) {
|
|
244
244
|
var _window$__ZEUS_DEVTOO;
|
|
245
245
|
if (typeof window === "undefined") return;
|
|
246
246
|
(_window$__ZEUS_DEVTOO = window.__ZEUS_DEVTOOLS_HOOK__) === null || _window$__ZEUS_DEVTOO === void 0 || _window$__ZEUS_DEVTOO.emit(event);
|
|
247
247
|
}
|
|
248
248
|
//#endregion
|
|
249
|
-
//#region packages/runtime-dom/src/render.ts
|
|
249
|
+
//#region packages/core/runtime-dom/src/render.ts
|
|
250
250
|
function render(value, container, options = {}) {
|
|
251
251
|
var _options$owner;
|
|
252
252
|
const renderScope = (0, _zeus_js_signal.scope)();
|
|
@@ -273,7 +273,7 @@ function resolveValue$2(value) {
|
|
|
273
273
|
return typeof value === "function" ? value() : value !== null && value !== void 0 ? value : null;
|
|
274
274
|
}
|
|
275
275
|
//#endregion
|
|
276
|
-
//#region packages/runtime-dom/src/dom.ts
|
|
276
|
+
//#region packages/core/runtime-dom/src/dom.ts
|
|
277
277
|
function marker(parent, index) {
|
|
278
278
|
let seen = 0;
|
|
279
279
|
for (const node of parent.childNodes) {
|
|
@@ -297,7 +297,7 @@ function removeNodes(nodes) {
|
|
|
297
297
|
}
|
|
298
298
|
}
|
|
299
299
|
//#endregion
|
|
300
|
-
//#region packages/runtime-dom/src/bindings.ts
|
|
300
|
+
//#region packages/core/runtime-dom/src/bindings.ts
|
|
301
301
|
function bindText(node, value) {
|
|
302
302
|
(0, _zeus_js_signal.effect)(() => {
|
|
303
303
|
node.data = stringifyText(value());
|
|
@@ -318,17 +318,43 @@ function stringifyText(value) {
|
|
|
318
318
|
return String(value);
|
|
319
319
|
}
|
|
320
320
|
function setAttr(el, name, value) {
|
|
321
|
+
const attrName = normalizeAttrName(name);
|
|
322
|
+
const propName = getBooleanDomPropertyName(name);
|
|
323
|
+
if (propName && el instanceof HTMLElement) {
|
|
324
|
+
el[propName] = Boolean(value);
|
|
325
|
+
if (value == null || value === false) el.removeAttribute(attrName);
|
|
326
|
+
else if (value === true) el.setAttribute(attrName, "");
|
|
327
|
+
else el.setAttribute(attrName, String(value));
|
|
328
|
+
return;
|
|
329
|
+
}
|
|
321
330
|
if (value == null || value === false) {
|
|
322
|
-
el.removeAttribute(
|
|
331
|
+
el.removeAttribute(attrName);
|
|
323
332
|
return;
|
|
324
333
|
}
|
|
325
|
-
const attrName = normalizeAttrName(name);
|
|
326
334
|
if (value === true) {
|
|
327
335
|
el.setAttribute(attrName, "");
|
|
328
336
|
return;
|
|
329
337
|
}
|
|
330
338
|
el.setAttribute(attrName, String(value));
|
|
331
339
|
}
|
|
340
|
+
function getBooleanDomPropertyName(name) {
|
|
341
|
+
return BOOLEAN_DOM_PROPERTY_NAME[name];
|
|
342
|
+
}
|
|
343
|
+
const BOOLEAN_DOM_PROPERTY_NAME = {
|
|
344
|
+
hidden: "hidden",
|
|
345
|
+
disabled: "disabled",
|
|
346
|
+
readonly: "readOnly",
|
|
347
|
+
readOnly: "readOnly",
|
|
348
|
+
multiple: "multiple",
|
|
349
|
+
selected: "selected",
|
|
350
|
+
checked: "checked",
|
|
351
|
+
open: "open",
|
|
352
|
+
autofocus: "autofocus",
|
|
353
|
+
autoFocus: "autofocus",
|
|
354
|
+
indeterminate: "indeterminate",
|
|
355
|
+
noValidate: "noValidate",
|
|
356
|
+
novalidate: "noValidate"
|
|
357
|
+
};
|
|
332
358
|
function normalizeAttrName(name) {
|
|
333
359
|
return name === "className" ? "class" : name;
|
|
334
360
|
}
|
|
@@ -407,7 +433,7 @@ function toKebabCase$1(value) {
|
|
|
407
433
|
return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
408
434
|
}
|
|
409
435
|
//#endregion
|
|
410
|
-
//#region packages/runtime-dom/src/events.ts
|
|
436
|
+
//#region packages/core/runtime-dom/src/events.ts
|
|
411
437
|
const delegatedEvents = /* @__PURE__ */ new Set();
|
|
412
438
|
const delegatedListeners = [];
|
|
413
439
|
const nonBubblingEventMap = {
|
|
@@ -482,7 +508,7 @@ function callDelegatedHandler(el, handler, event) {
|
|
|
482
508
|
}
|
|
483
509
|
}
|
|
484
510
|
//#endregion
|
|
485
|
-
//#region packages/runtime-dom/src/refs.ts
|
|
511
|
+
//#region packages/core/runtime-dom/src/refs.ts
|
|
486
512
|
function setRef(target, value) {
|
|
487
513
|
if (target == null) return;
|
|
488
514
|
if (typeof target === "function") {
|
|
@@ -505,12 +531,12 @@ function bindRef(el, target) {
|
|
|
505
531
|
}, true);
|
|
506
532
|
}
|
|
507
533
|
//#endregion
|
|
508
|
-
//#region packages/runtime-dom/src/component.ts
|
|
534
|
+
//#region packages/core/runtime-dom/src/component.ts
|
|
509
535
|
function createComponent(component, props) {
|
|
510
536
|
return runWithOwner(createOwner(), () => component(props));
|
|
511
537
|
}
|
|
512
538
|
//#endregion
|
|
513
|
-
//#region packages/runtime-dom/src/list.ts
|
|
539
|
+
//#region packages/core/runtime-dom/src/list.ts
|
|
514
540
|
function mountFor$1(parent, marker, each, key, render) {
|
|
515
541
|
if (!key) {
|
|
516
542
|
mountIndexFor(parent, marker, each, render);
|
|
@@ -568,7 +594,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
|
|
|
568
594
|
}
|
|
569
595
|
emitDevtoolsEvent({
|
|
570
596
|
type: "mount-for",
|
|
571
|
-
length:
|
|
597
|
+
length: nextRecords.length
|
|
572
598
|
});
|
|
573
599
|
records = nextRecords;
|
|
574
600
|
});
|
|
@@ -579,7 +605,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
|
|
|
579
605
|
}, true);
|
|
580
606
|
}
|
|
581
607
|
//#endregion
|
|
582
|
-
//#region packages/runtime-dom/src/controlFlow.ts
|
|
608
|
+
//#region packages/core/runtime-dom/src/controlFlow.ts
|
|
583
609
|
function Show(props) {
|
|
584
610
|
return resolveValue(props.when ? props.children : props.fallback);
|
|
585
611
|
}
|
|
@@ -598,7 +624,40 @@ function mountFor(parent, marker, each, key, render) {
|
|
|
598
624
|
mountFor$1(parent, marker, each, key, render);
|
|
599
625
|
}
|
|
600
626
|
//#endregion
|
|
601
|
-
//#region packages/runtime-dom/src/defineElement.ts
|
|
627
|
+
//#region packages/core/runtime-dom/src/defineElement.ts
|
|
628
|
+
function createPropStore(defs) {
|
|
629
|
+
const slots = /* @__PURE__ */ new Map();
|
|
630
|
+
const props = {};
|
|
631
|
+
for (const def of defs) {
|
|
632
|
+
const slot = (0, _zeus_js_signal.state)();
|
|
633
|
+
slots.set(def.key, slot);
|
|
634
|
+
Object.defineProperty(props, def.key, {
|
|
635
|
+
configurable: false,
|
|
636
|
+
enumerable: true,
|
|
637
|
+
get() {
|
|
638
|
+
return slot.value;
|
|
639
|
+
},
|
|
640
|
+
set(value) {
|
|
641
|
+
slot.value = value;
|
|
642
|
+
}
|
|
643
|
+
});
|
|
644
|
+
}
|
|
645
|
+
return {
|
|
646
|
+
props,
|
|
647
|
+
get(key) {
|
|
648
|
+
var _slots$get;
|
|
649
|
+
return (_slots$get = slots.get(key)) === null || _slots$get === void 0 ? void 0 : _slots$get.value;
|
|
650
|
+
},
|
|
651
|
+
set(key, value) {
|
|
652
|
+
const slot = slots.get(key);
|
|
653
|
+
if (!slot) return;
|
|
654
|
+
slot.value = value;
|
|
655
|
+
},
|
|
656
|
+
has(key) {
|
|
657
|
+
return slots.has(key);
|
|
658
|
+
}
|
|
659
|
+
};
|
|
660
|
+
}
|
|
602
661
|
function defineElement(tagName, options, setup) {
|
|
603
662
|
var _options$props;
|
|
604
663
|
const propDefs = normalizePropDefinitions((_options$props = options.props) !== null && _options$props !== void 0 ? _options$props : {});
|
|
@@ -609,12 +668,13 @@ function defineElement(tagName, options, setup) {
|
|
|
609
668
|
}
|
|
610
669
|
constructor() {
|
|
611
670
|
super();
|
|
612
|
-
this.props = (0, _zeus_js_signal.state)({});
|
|
613
671
|
this.lightChildren = [];
|
|
614
672
|
this.capturedLightChildren = false;
|
|
615
673
|
this.reflecting = false;
|
|
616
|
-
|
|
617
|
-
|
|
674
|
+
this.propStore = createPropStore(propDefs);
|
|
675
|
+
this.props = this.propStore.props;
|
|
676
|
+
applyPropDefaults(this.propStore, propDefs);
|
|
677
|
+
definePropAccessors(this, this.propStore, propDefs);
|
|
618
678
|
}
|
|
619
679
|
connectedCallback() {
|
|
620
680
|
var _options$shadow, _options$consumes;
|
|
@@ -652,22 +712,17 @@ function defineElement(tagName, options, setup) {
|
|
|
652
712
|
};
|
|
653
713
|
this.dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => setup(this.props, setupContext))), target, { owner });
|
|
654
714
|
mountStyles(target, options.styles);
|
|
655
|
-
(0, _zeus_js_signal.onScopeDispose)(() => {
|
|
656
|
-
var _this$dispose;
|
|
657
|
-
(_this$dispose = this.dispose) === null || _this$dispose === void 0 || _this$dispose.call(this);
|
|
658
|
-
this.dispose = void 0;
|
|
659
|
-
}, true);
|
|
660
715
|
}
|
|
661
716
|
disconnectedCallback() {
|
|
662
|
-
var _this$
|
|
663
|
-
(_this$
|
|
717
|
+
var _this$dispose;
|
|
718
|
+
(_this$dispose = this.dispose) === null || _this$dispose === void 0 || _this$dispose.call(this);
|
|
664
719
|
this.dispose = void 0;
|
|
665
720
|
}
|
|
666
721
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
667
722
|
if (oldValue === newValue || this.reflecting) return;
|
|
668
723
|
const def = propDefs.find((item) => item.attr === name);
|
|
669
724
|
if (!def) return;
|
|
670
|
-
this.
|
|
725
|
+
this.propStore.set(def.key, castAttributeValue(newValue, def));
|
|
671
726
|
}
|
|
672
727
|
resolveRenderTarget(shadow) {
|
|
673
728
|
if (this.target) return this.target;
|
|
@@ -682,12 +737,12 @@ function defineElement(tagName, options, setup) {
|
|
|
682
737
|
for (const def of defs) {
|
|
683
738
|
if (def.attr === false) continue;
|
|
684
739
|
const value = this.getAttribute(def.attr);
|
|
685
|
-
if (value !== null || def.type === Boolean) this.
|
|
740
|
+
if (value !== null || def.type === Boolean) this.propStore.set(def.key, castAttributeValue(value, def));
|
|
686
741
|
}
|
|
687
742
|
}
|
|
688
743
|
_writePropFromProperty(key, value) {
|
|
689
744
|
const def = propDefs.find((item) => item.key === key);
|
|
690
|
-
this.
|
|
745
|
+
this.propStore.set(key, value);
|
|
691
746
|
if ((def === null || def === void 0 ? void 0 : def.reflect) && def.attr !== false) {
|
|
692
747
|
this.reflecting = true;
|
|
693
748
|
try {
|
|
@@ -719,26 +774,32 @@ function normalizePropDefinitions(props) {
|
|
|
719
774
|
};
|
|
720
775
|
});
|
|
721
776
|
}
|
|
722
|
-
function applyPropDefaults(
|
|
777
|
+
function applyPropDefaults(store, defs) {
|
|
723
778
|
for (const def of defs) {
|
|
724
779
|
if (!("default" in def)) continue;
|
|
725
780
|
const value = typeof def.default === "function" ? def.default() : def.default;
|
|
726
|
-
|
|
781
|
+
store.set(def.key, value);
|
|
727
782
|
}
|
|
728
783
|
}
|
|
729
|
-
function definePropAccessors(element,
|
|
784
|
+
function definePropAccessors(element, store, defs) {
|
|
730
785
|
for (const def of defs) {
|
|
731
|
-
|
|
732
|
-
Object.
|
|
786
|
+
const key = def.key;
|
|
787
|
+
const hadOwnValue = Object.prototype.hasOwnProperty.call(element, key);
|
|
788
|
+
const ownValue = hadOwnValue ? element[key] : void 0;
|
|
789
|
+
if (hadOwnValue) delete element[key];
|
|
790
|
+
const existing = Object.getOwnPropertyDescriptor(element, key);
|
|
791
|
+
if (existing && existing.configurable === false) continue;
|
|
792
|
+
Object.defineProperty(element, key, {
|
|
733
793
|
configurable: true,
|
|
734
794
|
enumerable: true,
|
|
735
795
|
get() {
|
|
736
|
-
return
|
|
796
|
+
return store.get(key);
|
|
737
797
|
},
|
|
738
798
|
set(value) {
|
|
739
|
-
element._writePropFromProperty(
|
|
799
|
+
element._writePropFromProperty(key, value);
|
|
740
800
|
}
|
|
741
801
|
});
|
|
802
|
+
if (hadOwnValue) element._writePropFromProperty(key, ownValue);
|
|
742
803
|
}
|
|
743
804
|
}
|
|
744
805
|
function castAttributeValue(value, def) {
|
|
@@ -782,7 +843,7 @@ function toKebabCase(value) {
|
|
|
782
843
|
return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
783
844
|
}
|
|
784
845
|
//#endregion
|
|
785
|
-
//#region packages/runtime-dom/src/slot.ts
|
|
846
|
+
//#region packages/core/runtime-dom/src/slot.ts
|
|
786
847
|
function createSlot(name, fallback) {
|
|
787
848
|
const context = getCurrentHostContext();
|
|
788
849
|
if (!context) return createNativeSlot(name, fallback);
|
|
@@ -814,16 +875,96 @@ function isMeaningfulTextNode(node) {
|
|
|
814
875
|
return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
|
|
815
876
|
}
|
|
816
877
|
//#endregion
|
|
817
|
-
//#region packages/runtime-dom/src/webComponents.ts
|
|
878
|
+
//#region packages/core/runtime-dom/src/webComponents.ts
|
|
879
|
+
const HOST_RESERVED_KEYS = new Set([
|
|
880
|
+
"children",
|
|
881
|
+
"ref",
|
|
882
|
+
"class",
|
|
883
|
+
"className",
|
|
884
|
+
"style",
|
|
885
|
+
"_elements"
|
|
886
|
+
]);
|
|
818
887
|
function Host(props) {
|
|
888
|
+
const context = getCurrentHostContext();
|
|
889
|
+
if (context) bindHostProps(context.host, props);
|
|
819
890
|
return resolveValue$1(props.children);
|
|
820
891
|
}
|
|
821
892
|
function Slot(props) {
|
|
822
893
|
return createSlot(props.name, () => resolveValue$1(props.children));
|
|
823
894
|
}
|
|
895
|
+
function bindHostProps(host, props) {
|
|
896
|
+
bindHostRef(host, props);
|
|
897
|
+
bindHostClass(host, props);
|
|
898
|
+
bindHostStyle(host, props);
|
|
899
|
+
bindHostAttributes(host, props);
|
|
900
|
+
if ("_elements" in props) bindHostElementBindings(host, props);
|
|
901
|
+
}
|
|
902
|
+
function bindHostRef(host, props) {
|
|
903
|
+
if (!("ref" in props)) return;
|
|
904
|
+
bindRef(host, props.ref);
|
|
905
|
+
}
|
|
906
|
+
function bindHostClass(host, props) {
|
|
907
|
+
if (!("class" in props) && !("className" in props)) return;
|
|
908
|
+
const value = props.className !== void 0 ? props.className : props.class;
|
|
909
|
+
bindClass(host, () => {
|
|
910
|
+
return resolveHostValue(value);
|
|
911
|
+
});
|
|
912
|
+
}
|
|
913
|
+
function bindHostStyle(host, props) {
|
|
914
|
+
if (!("style" in props)) return;
|
|
915
|
+
bindStyle(host, () => {
|
|
916
|
+
return resolveHostValue(props.style);
|
|
917
|
+
});
|
|
918
|
+
}
|
|
919
|
+
function bindHostAttributes(host, props) {
|
|
920
|
+
for (const key of Object.keys(props)) {
|
|
921
|
+
if (HOST_RESERVED_KEYS.has(key)) continue;
|
|
922
|
+
if (isEventLikeProp(key)) continue;
|
|
923
|
+
const value = props[key];
|
|
924
|
+
bindAttr(host, normalizeHostAttrName(key), () => {
|
|
925
|
+
return resolveHostValue(value);
|
|
926
|
+
});
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
function bindHostElementBindings(host, props) {
|
|
930
|
+
const elements = props._elements;
|
|
931
|
+
for (const _key of Object.keys(elements)) {
|
|
932
|
+
const getEl = elements[_key];
|
|
933
|
+
const el = getEl();
|
|
934
|
+
if (!el) continue;
|
|
935
|
+
for (const attrKey of Object.keys(props)) {
|
|
936
|
+
if (HOST_RESERVED_KEYS.has(attrKey)) continue;
|
|
937
|
+
if (isEventLikeProp(attrKey)) continue;
|
|
938
|
+
const value = props[attrKey];
|
|
939
|
+
bindAttr(el, normalizeHostAttrName(attrKey), () => {
|
|
940
|
+
return resolveHostValue(value);
|
|
941
|
+
});
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
}
|
|
945
|
+
function resolveHostValue(value) {
|
|
946
|
+
if (typeof value === "function") return value();
|
|
947
|
+
return value;
|
|
948
|
+
}
|
|
824
949
|
function resolveValue$1(value) {
|
|
825
950
|
return typeof value === "function" ? value() : value;
|
|
826
951
|
}
|
|
952
|
+
function isEventLikeProp(key) {
|
|
953
|
+
/**
|
|
954
|
+
* Host Phase 1 does not bind event listeners.
|
|
955
|
+
* Keep event handling inside component template + emit().
|
|
956
|
+
*/
|
|
957
|
+
return /^on[A-Z]/.test(key) || key.startsWith("on:");
|
|
958
|
+
}
|
|
959
|
+
function normalizeHostAttrName(name) {
|
|
960
|
+
switch (name) {
|
|
961
|
+
case "className": return "class";
|
|
962
|
+
case "htmlFor": return "for";
|
|
963
|
+
case "tabIndex": return "tabindex";
|
|
964
|
+
case "readOnly": return "readonly";
|
|
965
|
+
default: return name;
|
|
966
|
+
}
|
|
967
|
+
}
|
|
827
968
|
//#endregion
|
|
828
969
|
exports.For = For;
|
|
829
970
|
exports.Host = Host;
|
|
@@ -851,6 +992,7 @@ exports.getCurrentHostContext = getCurrentHostContext;
|
|
|
851
992
|
exports.getCurrentOwner = getCurrentOwner;
|
|
852
993
|
exports.inject = inject;
|
|
853
994
|
exports.insert = insert;
|
|
995
|
+
exports.insertTracked = insertTracked;
|
|
854
996
|
exports.marker = marker;
|
|
855
997
|
exports.mountDynamic = mountDynamic;
|
|
856
998
|
exports.mountFor = mountFor;
|
package/dist/runtime-dom.d.ts
CHANGED
|
@@ -12,10 +12,8 @@ export type RefTarget<T> = ((value: T | null) => void) | {
|
|
|
12
12
|
current: T | null;
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
-
import type { TemplateFactory } from './types';
|
|
16
15
|
export declare function template<T extends Node = Node>(html: string, _isImportNode?: boolean, _isSVG?: boolean, _isMathML?: boolean): TemplateFactory<T>;
|
|
17
16
|
|
|
18
|
-
import type { JSXValue } from './types';
|
|
19
17
|
export type ContextId = symbol;
|
|
20
18
|
export interface Context<T = unknown> {
|
|
21
19
|
readonly id: ContextId;
|
|
@@ -100,38 +98,20 @@ export declare function resolveDOMContext<T>(host: HTMLElement, context: Context
|
|
|
100
98
|
*/
|
|
101
99
|
export declare function requestDOMContext<T>(host: HTMLElement, context: Context<T>): T | undefined;
|
|
102
100
|
|
|
103
|
-
import { createOwner } from './context';
|
|
104
|
-
import type { JSXValue } from './types';
|
|
105
101
|
export interface RenderOptions {
|
|
106
102
|
owner?: ReturnType<typeof createOwner>;
|
|
107
103
|
}
|
|
108
104
|
export declare function render(value: JSXValue | (() => JSXValue), container: Element | DocumentFragment, options?: RenderOptions): () => void;
|
|
109
105
|
|
|
110
|
-
|
|
111
|
-
declare class DynamicRange {
|
|
112
|
-
private readonly parent;
|
|
113
|
-
private readonly marker;
|
|
114
|
-
private nodes;
|
|
115
|
-
constructor(parent: Node, marker: Node | null);
|
|
116
|
-
replace(value: JSXValue): void;
|
|
117
|
-
clear(): void;
|
|
118
|
-
current(): readonly Node[];
|
|
119
|
-
}
|
|
120
|
-
declare function insertTracked(parent: Node, value: JSXValue, marker: Node | null): Node[];
|
|
121
|
-
export declare function removeNodes(nodes: readonly Node[]): void;
|
|
122
|
-
declare function moveRangeBefore(nodes: readonly Node[], parent: Node, marker: Node | null): void;
|
|
123
|
-
declare function firstNode(nodes: readonly Node[]): Node | null;
|
|
124
|
-
declare function lastNode(nodes: readonly Node[]): Node | null;
|
|
106
|
+
export declare function insertTracked(parent: Node, value: JSXValue, marker?: Node | null): Node[];
|
|
125
107
|
|
|
126
|
-
|
|
127
|
-
import type { JSXValue } from './types';export declare function insert(parent: Node, value: JSXValue, marker?: Node | null): void;
|
|
108
|
+
export declare function insert(parent: Node, value: JSXValue, marker?: Node | null): void;
|
|
128
109
|
export declare function mountDynamic(parent: Node, marker: Node, value: () => JSXValue): void;
|
|
129
110
|
|
|
130
111
|
export declare function marker(parent: ParentNode, index: number): Comment;
|
|
131
112
|
export declare function child(parent: ParentNode, index: number): ChildNode;
|
|
132
|
-
declare function removeNodes
|
|
113
|
+
export declare function removeNodes(nodes: readonly Node[]): void;
|
|
133
114
|
|
|
134
|
-
import type { AttrValue, ClassValue, JSXValue, StyleValue } from './types';
|
|
135
115
|
export declare function bindText(node: Text, value: () => JSXValue): void;
|
|
136
116
|
export declare function bindTextContent(el: Node, value: () => JSXValue): void;
|
|
137
117
|
export declare function setAttr(el: Element, name: string, value: AttrValue): void;
|
|
@@ -143,16 +123,12 @@ export declare function bindStyle(el: HTMLElement | SVGElement, value: () => Sty
|
|
|
143
123
|
|
|
144
124
|
export declare function bindEvent(el: Element, name: string, handler: EventListener): void;
|
|
145
125
|
export declare function delegateEvents(events: readonly string[]): void;
|
|
146
|
-
declare function resetDelegatedEvents(): void;
|
|
147
126
|
|
|
148
|
-
import type { RefTarget } from './types';
|
|
149
127
|
export declare function setRef<T>(target: RefTarget<T> | null | undefined, value: T | null): void;
|
|
150
128
|
export declare function bindRef<T extends Element>(el: T, target: RefTarget<T> | null | undefined): void;
|
|
151
129
|
|
|
152
|
-
import type { JSXValue } from './types';
|
|
153
130
|
export declare function createComponent<P extends Record<string, unknown>, R extends JSXValue>(component: (props: P) => R, props: P): R;
|
|
154
131
|
|
|
155
|
-
import type { JSXValue } from './types';
|
|
156
132
|
export type ShowProps = {
|
|
157
133
|
when: unknown;
|
|
158
134
|
fallback?: JSXValue | (() => JSXValue);
|
|
@@ -169,8 +145,6 @@ export type ForProps<T, K = unknown> = {
|
|
|
169
145
|
export declare function For<T, K = unknown>(props: ForProps<T, K>): JSXValue;
|
|
170
146
|
export declare function mountFor<T, K = unknown>(parent: Node, marker: Node, each: () => readonly T[] | null | undefined, key: ((item: T, index: number) => K) | undefined, render: (item: T, index: number) => JSXValue): void;
|
|
171
147
|
|
|
172
|
-
import type { Context } from './context';
|
|
173
|
-
import type { JSXValue } from './types';
|
|
174
148
|
export type ElementPropConstructor = StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor | ArrayConstructor;
|
|
175
149
|
export type PropDefinition<T = unknown> = ElementPropConstructor | {
|
|
176
150
|
type?: ElementPropConstructor;
|
|
@@ -178,25 +152,70 @@ export type PropDefinition<T = unknown> = ElementPropConstructor | {
|
|
|
178
152
|
reflect?: boolean;
|
|
179
153
|
default?: T | (() => T);
|
|
180
154
|
};
|
|
181
|
-
export type PropOptions<P extends
|
|
155
|
+
export type PropOptions<P extends object> = Partial<{
|
|
182
156
|
[K in keyof P]: PropDefinition<P[K]>;
|
|
183
157
|
}>;
|
|
184
|
-
export interface
|
|
158
|
+
export interface DefineElementMeta {
|
|
159
|
+
description?: string;
|
|
160
|
+
props?: Record<string, {
|
|
161
|
+
description?: string;
|
|
162
|
+
category?: string;
|
|
163
|
+
docs?: string;
|
|
164
|
+
}>;
|
|
165
|
+
events?: Record<string, {
|
|
166
|
+
description?: string;
|
|
167
|
+
detail?: Record<string, string>;
|
|
168
|
+
}>;
|
|
169
|
+
slots?: Record<string, {
|
|
170
|
+
description?: string;
|
|
171
|
+
}>;
|
|
172
|
+
cssVars?: string[];
|
|
173
|
+
cssParts?: string[];
|
|
174
|
+
[key: string]: unknown;
|
|
175
|
+
}
|
|
176
|
+
export interface DefineElementOptions<P extends object> {
|
|
185
177
|
shadow?: boolean | ShadowRootInit;
|
|
186
178
|
props?: PropOptions<P>;
|
|
187
179
|
styles?: string | string[];
|
|
188
180
|
consumes?: Context<any>[];
|
|
181
|
+
/**
|
|
182
|
+
* Metadata only.
|
|
183
|
+
* Runtime does not consume this field.
|
|
184
|
+
*/
|
|
185
|
+
meta?: DefineElementMeta;
|
|
189
186
|
}
|
|
190
187
|
export interface DefineElementContext<E extends HTMLElement = HTMLElement> {
|
|
191
188
|
host: E;
|
|
192
189
|
emit: (name: string, detail?: unknown, options?: CustomEventInit) => boolean;
|
|
193
190
|
}
|
|
194
|
-
export type DefineElementSetup<P extends
|
|
195
|
-
export declare function defineElement<P extends
|
|
191
|
+
export type DefineElementSetup<P extends object, E extends HTMLElement = HTMLElement> = (props: Readonly<P>, context: DefineElementContext<E>) => JSXValue;
|
|
192
|
+
export declare function defineElement<P extends object = object, E extends HTMLElement = HTMLElement>(tagName: string, options: DefineElementOptions<P>, setup: DefineElementSetup<P, E>): CustomElementConstructor;
|
|
196
193
|
|
|
197
|
-
|
|
198
|
-
export interface HostProps {
|
|
194
|
+
type HostValue<T> = T | (() => T);
|
|
195
|
+
export interface HostProps extends Record<string, unknown> {
|
|
199
196
|
children?: JSXValue | (() => JSXValue);
|
|
197
|
+
/**
|
|
198
|
+
* Ref to current custom element host.
|
|
199
|
+
*/
|
|
200
|
+
ref?: RefTarget<HTMLElement>;
|
|
201
|
+
/**
|
|
202
|
+
* class and className both map to host class attribute.
|
|
203
|
+
*/
|
|
204
|
+
class?: HostValue<ClassValue>;
|
|
205
|
+
className?: HostValue<ClassValue>;
|
|
206
|
+
/**
|
|
207
|
+
* Inline style for host element.
|
|
208
|
+
*/
|
|
209
|
+
style?: HostValue<StyleValue>;
|
|
210
|
+
/**
|
|
211
|
+
* Common host attributes.
|
|
212
|
+
*/
|
|
213
|
+
id?: HostValue<AttrValue>;
|
|
214
|
+
role?: HostValue<AttrValue>;
|
|
215
|
+
part?: HostValue<AttrValue>;
|
|
216
|
+
title?: HostValue<AttrValue>;
|
|
217
|
+
slot?: HostValue<AttrValue>;
|
|
218
|
+
tabIndex?: HostValue<number | null | undefined | false>;
|
|
200
219
|
}
|
|
201
220
|
export interface SlotProps {
|
|
202
221
|
name?: string;
|
|
@@ -205,7 +224,6 @@ export interface SlotProps {
|
|
|
205
224
|
export declare function Host(props: HostProps): JSXValue;
|
|
206
225
|
export declare function Slot(props: SlotProps): JSXValue;
|
|
207
226
|
|
|
208
|
-
import type { JSXValue } from './types';
|
|
209
227
|
export declare function createSlot(name?: string, fallback?: () => JSXValue): JSXValue;
|
|
210
228
|
|
|
211
229
|
export type HostRenderMode = 'light' | 'shadow';
|
|
@@ -219,7 +237,4 @@ export declare function withHostContext<T>(context: HostRenderContext | undefine
|
|
|
219
237
|
export declare function captureCurrentHostContext(): HostRenderContext | undefined;
|
|
220
238
|
export declare function withCapturedHostContext<T extends (...args: never[]) => unknown>(fn: T): T;
|
|
221
239
|
|
|
222
|
-
import './types';
|
|
223
|
-
|
|
224
|
-
|
|
225
240
|
|