@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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * runtime-dom v0.0.2
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(normalizeAttrName(name));
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: records.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
- applyPropDefaults(this.props, propDefs);
617
- definePropAccessors(this, this.props, propDefs);
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$dispose2;
663
- (_this$dispose2 = this.dispose) === null || _this$dispose2 === void 0 || _this$dispose2.call(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.props[def.key] = castAttributeValue(newValue, def);
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.props[def.key] = castAttributeValue(value, def);
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.props[key] = value;
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(props, defs) {
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
- props[def.key] = value;
781
+ store.set(def.key, value);
727
782
  }
728
783
  }
729
- function definePropAccessors(element, props, defs) {
784
+ function definePropAccessors(element, store, defs) {
730
785
  for (const def of defs) {
731
- if (def.key in element) continue;
732
- Object.defineProperty(element, def.key, {
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 props[def.key];
796
+ return store.get(key);
737
797
  },
738
798
  set(value) {
739
- element._writePropFromProperty(def.key, value);
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;
@@ -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
- import type { JSXValue } from './types';
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
- import { insertTracked } from './range';
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$1(nodes: readonly Node[]): void;
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 Record<string, unknown>> = Partial<{
155
+ export type PropOptions<P extends object> = Partial<{
182
156
  [K in keyof P]: PropDefinition<P[K]>;
183
157
  }>;
184
- export interface DefineElementOptions<P extends Record<string, unknown>> {
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 Record<string, unknown>, E extends HTMLElement = HTMLElement> = (props: Readonly<P>, context: DefineElementContext<E>) => JSXValue;
195
- export declare function defineElement<P extends Record<string, unknown> = Record<string, unknown>, E extends HTMLElement = HTMLElement>(tagName: string, options: DefineElementOptions<P>, setup: DefineElementSetup<P, E>): CustomElementConstructor;
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
- import type { JSXValue } from './types';
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