elements-kit 0.0.1 → 0.0.2

package/README.md

@@ -1,22 +1,258 @@
-# Web Elements
+# ElementsKit
 
-Web Elements is a lightweight reactive UI library that transforms native HTMLElements into reactive elements. Perfect for framework-agnostic applications and web component development.
+A lightweight reactive UI library built on JSX and native DOM APIs. No virtual DOM, no diffing — fine-grained reactivity that updates only what changes.
 
 ```tsx
-const externalSignal = signal("something")
-
-function Elements(property1, property2, children): ReactiveHTMLElement{
-    const value = signal(0)
-    return div()
-        .style.color("green")
-        .title("tooltip")(
-            header("This is my header"),
-            main("Second children")
-            b(value),
-            span(externalSignal),
-            ...children
-        )
+import { signal, computed } from "elements-kit/signals";
+
+class Counter {
+  #count = signal(0);
+
+  render() {
+    return (
+      <section>
+        <p>Count: <strong>{this.#count}</strong></p>
+        <button onClick={() => this.#count(this.#count() + 1)}>+1</button>
+      </section>
+    ) as Element;
+  }
 }
 
-document.body.appendChild(render(Elements))
+document.getElementById("app")!.appendChild(new Counter().render());
 ```
+
+## Principles
+
+- **Direct DOM Manipulation** — Works with native HTMLElements, no virtual DOM or diffing overhead
+- **Fine-Grained Reactivity** — Only the exact DOM nodes that depend on a changed signal update
+- **JSX Without a Framework** — Standard JSX syntax compiled to real DOM nodes, no plugin required
+- **Decorator-Driven** — `@reactive()` turns any class field into a signal transparently
+- **Web Component Ready** — First-class support for custom elements and `attributeChangedCallback`
+- **Type-Safe** — Full TypeScript support with comprehensive type inference
+
+---
+
+## Signals
+
+```ts
+import { signal, computed, effect, batch, untracked } from "elements-kit/signals";
+
+const count = signal(0);          // writable signal
+const doubled = computed(() => count() * 2); // derived, read-only
+
+effect(() => console.log(count())); // runs whenever count changes
+
+count(count() + 1);               // write by calling with a value
+console.log(count());             // read by calling with no arguments
+
+batch(() => {                     // defer updates until the batch ends
+  count(10);
+  count(20);
+});
+
+const raw = untracked(() => count()); // read without subscribing
+```
+
+Signals are the reactive primitive. Passing a signal directly as a JSX child or prop creates a live binding — no wrapper needed:
+
+```tsx
+const name = signal("world");
+
+// Both are equivalent live bindings:
+<p>{name}</p>
+<p>{() => name()}</p>
+```
+
+---
+
+## JSX
+
+Configure your `tsconfig.json` to use the built-in JSX runtime:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "elements-kit"
+  }
+}
+```
+
+### Props
+
+| Syntax | Effect |
+| --- | --- |
+| `value={signal}` | Live-bound — updates DOM when signal changes |
+| `value={42}` | Set once at render time |
+| `onClick={fn}` | Camel-case event listener (`onclick`) |
+| `on:click={fn}` | Explicit event namespace |
+| `style:color={signal}` | Reactive inline style property |
+| `class:active={signal}` | Reactive `classList.toggle` |
+| `prop:foo={val}` | Force property assignment (bypasses `setAttribute`) |
+
+```tsx
+const active = signal(false);
+const label = signal("Submit");
+
+<button
+  class:active={active}
+  style:opacity={computed(() => active() ? "1" : "0.5")}
+  onClick={() => (active(!active()))}
+>
+  {label}
+</button>
+```
+
+### Children
+
+Any of the following are valid children:
+
+- Primitive values (`string`, `number`, …)
+- `Node` / `Element`
+- A signal or `computed` — re-renders in place when it changes
+- A plain function `() => value` — re-evaluated reactively
+- Arrays of the above
+
+```tsx
+const show = signal(true);
+
+<div>
+  <strong>Static text</strong>
+  {count}                          // signal — live
+  {() => count() * 2}             // thunk — live
+  {() => show() && <span>Conditional</span>}
+</div>
+```
+
+---
+
+## `@reactive()` Decorator
+
+Makes any class field behave like a signal — reads subscribe, writes trigger updates.
+
+```ts
+import { computed, reactive } from "elements-kit/signals";
+
+class Todo {
+  text: string;
+  @reactive() done: boolean;
+}
+
+class TodoApp {
+  @reactive()
+  todos: Todo[] = [];
+
+  @reactive()
+  showDone = true;
+
+  // Bind to an existing computed
+  @reactive((self) => computed(() => self.todos.filter(t => !t.done)))
+  readonly pending: Todo[] = [];
+}
+```
+
+`@reactive()` without arguments auto-wraps the field's initial value in a `signal`. Pass a factory `(self) => signal | computed` to bind the field to an existing reactive value.
+
+---
+
+## `@attributes` Decorator
+
+Automatically wires `observedAttributes` and `attributeChangedCallback` for custom elements from a static `[ATTRIBUTES]` map.
+
+```ts
+import { attributes, ATTRIBUTES as attr } from "elements-kit/attributes";
+import { signal, reactive } from "elements-kit/signals";
+
+@attributes
+class Counter extends HTMLElement {
+  static [attr] = {
+    count(this: Counter, value: string | null) {
+      this.count = Number(value);  // calls the @reactive setter
+    },
+  };
+
+  #count = signal(0);
+
+  @reactive((s) => s.#count)
+  count: number = 0;
+
+  connectedCallback() {
+    const Host = this;
+    <Host>
+      <p>Count: <strong>{this.#count}</strong></p>
+      <button onClick={() => this.count++}>+1</button>
+    </Host>;
+  }
+}
+
+customElements.define("x-counter", Counter);
+```
+
+Use `<x-counter count={signal(9)} />` to pass a reactive attribute from JSX.
+
+---
+
+## `For` — Keyed List Rendering
+
+Efficiently reconciles a reactive array into the DOM. Each item is rendered once per unique key — no full re-renders on reorder, add, or remove.
+
+```tsx
+import { For } from "elements-kit";
+
+const todos = computed(() => state.todos.filter(t => !t.done));
+
+<ul>
+  <For each={todos} by={(todo) => todo.id}>
+    {(todo) => (
+      <li
+        style:text-decoration={computed(() => todo.done ? "line-through" : "none")}
+      >
+        <input
+          type="checkbox"
+          checked={computed(() => todo.done)}
+          on:change={() => (todo.done = !todo.done)}
+        />{" "}
+        {todo.text}
+      </li>
+    )}
+  </For>
+</ul>
+```
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `each` | `T[] \| (() => T[])` | Reactive array to render |
+| `by` | `(item: T, index: number) => string \| number` | Key function — defaults to index |
+| `children` | `(item: T, index: number) => Element` | Render function, called once per new key |
+
+---
+
+## Class Components
+
+Any class with a `render()` method returning an `Element` or `DocumentFragment` works as a component. JSX instantiates it automatically:
+
+```tsx
+class App {
+  render() {
+    return (
+      <div style="max-width: 480px; margin: 40px auto">
+        <h1>My App</h1>
+        <x-counter count={signal(0)} />
+        <TodoApp />
+      </div>
+    ) as Element;
+  }
+}
+
+document.getElementById("app")!.appendChild(new App().render());
+```
+
+---
+
+## TO-DO
+
+- [ ] Complete type safety
+- [ ] Async signal
+- [ ] URLPattern signal
+- [ ] Context
+- [ ] `Key` component (conditional key-gated subtrees)

package/dist/attributes.d.mts

@@ -0,0 +1,90 @@
+//#region src/attributes.d.ts
+interface AttrChangeHandler<T> {
+  (this: T, value: string | null, oldValue?: string | null): void;
+}
+declare const ATTRIBUTES: unique symbol;
+/**
+ * Dispatches an attribute change to the matching handler in the static `attributes` map,
+ * walking the prototype chain for inherited handlers.
+ * @example
+ * ```ts
+ * class MyElement extends HTMLElement {
+ *   static [ATTRIBUTES]: Attributes<MyElement> = {
+ *     count(value) {
+ *       this.#count = Number(value);
+ *     },
+ *   };
+ *   static observedAttributes: string[] = observedAttributes(MyElement);
+ *
+ *   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+ *     dispatchAttrChange.call(this, name, oldValue, newValue);
+ *   }
+ * }
+ * ```
+ */
+declare function dispatchAttrChange<T extends {
+  constructor: {
+    [ATTRIBUTES]: Record<string, AttrChangeHandler<T>>;
+  };
+}>(this: T, name: string, oldValue: string | null, newValue: string | null): void;
+type Attributes<T> = Record<string, AttrChangeHandler<T>>;
+/**
+ * Returns a deduplicated array of all observed attribute names for a custom element class and its ancestors.
+ *
+ * Call after defining static `[ATTRIBUTES]`, and assign to static `observedAttributes`.
+ *
+ * Example:
+ * ```ts
+ * class MyElement extends HTMLElement {
+ *   static [ATTRIBUTES]: Attributes<MyElement> = {
+ *     count(value) {
+ *       this.#count = Number(value);
+ *     },
+ *   };
+ *   static observedAttributes: string[] = observedAttributes(MyElement);
+ * }
+ *
+ * class ChildElement extends MyElement {
+ *   static [ATTRIBUTES]: Attributes<ChildElement> = {
+ *     bar(value) {
+ *       // ...
+ *     },
+ *   };
+ *   static observedAttributes: string[] = observedAttributes(ChildElement);
+ * }
+ * // ChildElement.observedAttributes will include both 'count' and 'bar', deduplicated.
+ * ```
+ *
+ * @param cls The custom element class constructor
+ * @returns Array of unique attribute names to observe
+ */
+declare function observedAttributes(cls: any): string[];
+/**
+ * A class decorator that automatically wires up `observedAttributes` and `attributeChangedCallback`
+ * from a static `[ATTRIBUTES]` map.
+ *
+ * The `this` type inside attribute handlers is automatically inferred from the decorated class.
+ *
+ * @example
+ * ```ts
+ * @attributes
+ * class MyElement extends HTMLElement {
+ *   static [ATTRIBUTES] = {
+ *     count(this: MyElement, value: string | null) {
+ *       this.count = Number(value);
+ *     },
+ *   };
+ * }
+ * ```
+ */
+type AttributeTarget<T extends abstract new (...args: any[]) => HTMLElement> = T & {
+  [ATTRIBUTES]: Record<string, AttrChangeHandler<InstanceType<T>>>;
+};
+type AttributeDecorated<T extends abstract new (...args: any[]) => HTMLElement> = T & (new (...args: any[]) => InstanceType<T> & {
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}) & {
+  observedAttributes: string[];
+};
+declare function attributes<T extends abstract new (...args: any[]) => HTMLElement>(target: AttributeTarget<T>, context: ClassDecoratorContext<T>): AttributeDecorated<T>;
+//#endregion
+export { ATTRIBUTES, AttrChangeHandler, AttributeDecorated, AttributeTarget, Attributes, attributes, dispatchAttrChange, observedAttributes };

package/dist/attributes.mjs

@@ -0,0 +1,82 @@
+//#region src/attributes.ts
+const ATTRIBUTES = Symbol("attributes");
+/**
+* Dispatches an attribute change to the matching handler in the static `attributes` map,
+* walking the prototype chain for inherited handlers.
+* @example
+* ```ts
+* class MyElement extends HTMLElement {
+*   static [ATTRIBUTES]: Attributes<MyElement> = {
+*     count(value) {
+*       this.#count = Number(value);
+*     },
+*   };
+*   static observedAttributes: string[] = observedAttributes(MyElement);
+*
+*   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+*     dispatchAttrChange.call(this, name, oldValue, newValue);
+*   }
+* }
+* ```
+*/
+function dispatchAttrChange(name, oldValue, newValue) {
+	let cls = this.constructor;
+	while (cls) {
+		if (cls[ATTRIBUTES] && name in cls[ATTRIBUTES]) {
+			cls[ATTRIBUTES][name].call(this, newValue, oldValue);
+			return;
+		}
+		cls = Object.getPrototypeOf(cls);
+	}
+}
+/**
+* Returns a deduplicated array of all observed attribute names for a custom element class and its ancestors.
+*
+* Call after defining static `[ATTRIBUTES]`, and assign to static `observedAttributes`.
+*
+* Example:
+* ```ts
+* class MyElement extends HTMLElement {
+*   static [ATTRIBUTES]: Attributes<MyElement> = {
+*     count(value) {
+*       this.#count = Number(value);
+*     },
+*   };
+*   static observedAttributes: string[] = observedAttributes(MyElement);
+* }
+*
+* class ChildElement extends MyElement {
+*   static [ATTRIBUTES]: Attributes<ChildElement> = {
+*     bar(value) {
+*       // ...
+*     },
+*   };
+*   static observedAttributes: string[] = observedAttributes(ChildElement);
+* }
+* // ChildElement.observedAttributes will include both 'count' and 'bar', deduplicated.
+* ```
+*
+* @param cls The custom element class constructor
+* @returns Array of unique attribute names to observe
+*/
+function observedAttributes(cls) {
+	const s = new Set(Object.keys(cls[ATTRIBUTES] || {}));
+	let _cls = Object.getPrototypeOf(cls);
+	while (_cls) {
+		if (_cls.observedAttributes) _cls.observedAttributes.forEach((attr) => s.add(attr));
+		_cls = Object.getPrototypeOf(_cls);
+	}
+	return Array.from(s);
+}
+function attributes(target, context) {
+	context.addInitializer(function() {
+		target.observedAttributes = observedAttributes(target);
+	});
+	target.prototype.attributeChangedCallback = function(name, oldValue, newValue) {
+		dispatchAttrChange.call(this, name, oldValue, newValue);
+	};
+	return target;
+}
+
+//#endregion
+export { ATTRIBUTES, attributes, dispatchAttrChange, observedAttributes };

package/dist/builder/dom.d.mts

@@ -0,0 +1,213 @@
+import "../polyfill-Bvo2e52W.mjs";
+import { ReactiveElementOf } from "./index.mjs";
+
+//#region src/builder/dom.d.ts
+interface Lifecycle {
+  connectedCallback?(): void;
+  disconnectedCallback?(): void;
+  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;
+  adoptedCallback?(): void;
+}
+declare const a: () => ReactiveElementOf<HTMLAnchorElement>;
+declare const abbr: () => ReactiveElementOf<HTMLElement>;
+declare const address: () => ReactiveElementOf<HTMLElement>;
+declare const area: () => ReactiveElementOf<HTMLAreaElement>;
+declare const article: () => ReactiveElementOf<HTMLElement>;
+declare const aside: () => ReactiveElementOf<HTMLElement>;
+declare const audio: () => ReactiveElementOf<HTMLAudioElement>;
+declare const b: () => ReactiveElementOf<HTMLElement>;
+declare const base: () => ReactiveElementOf<HTMLBaseElement>;
+declare const bdi: () => ReactiveElementOf<HTMLElement>;
+declare const bdo: () => ReactiveElementOf<HTMLElement>;
+declare const blockquote: () => ReactiveElementOf<HTMLQuoteElement>;
+declare const body: () => ReactiveElementOf<HTMLBodyElement>;
+declare const br: () => ReactiveElementOf<HTMLBRElement>;
+declare const button: () => ReactiveElementOf<HTMLButtonElement>;
+declare const canvas: () => ReactiveElementOf<HTMLCanvasElement>;
+declare const caption: () => ReactiveElementOf<HTMLTableCaptionElement>;
+declare const cite: () => ReactiveElementOf<HTMLElement>;
+declare const code: () => ReactiveElementOf<HTMLElement>;
+declare const col: () => ReactiveElementOf<HTMLTableColElement>;
+declare const colgroup: () => ReactiveElementOf<HTMLTableColElement>;
+declare const data: () => ReactiveElementOf<HTMLDataElement>;
+declare const datalist: () => ReactiveElementOf<HTMLDataListElement>;
+declare const dd: () => ReactiveElementOf<HTMLElement>;
+declare const del: () => ReactiveElementOf<HTMLModElement>;
+declare const details: () => ReactiveElementOf<HTMLDetailsElement>;
+declare const dfn: () => ReactiveElementOf<HTMLElement>;
+declare const dialog: () => ReactiveElementOf<HTMLDialogElement>;
+declare const div: () => ReactiveElementOf<HTMLDivElement>;
+declare const dl: () => ReactiveElementOf<HTMLDListElement>;
+declare const dt: () => ReactiveElementOf<HTMLElement>;
+declare const em: () => ReactiveElementOf<HTMLElement>;
+declare const embed: () => ReactiveElementOf<HTMLEmbedElement>;
+declare const fieldset: () => ReactiveElementOf<HTMLFieldSetElement>;
+declare const figcaption: () => ReactiveElementOf<HTMLElement>;
+declare const figure: () => ReactiveElementOf<HTMLElement>;
+declare const footer: () => ReactiveElementOf<HTMLElement>;
+declare const form: () => ReactiveElementOf<HTMLFormElement>;
+declare const h1: () => ReactiveElementOf<HTMLHeadingElement>;
+declare const h2: () => ReactiveElementOf<HTMLHeadingElement>;
+declare const h3: () => ReactiveElementOf<HTMLHeadingElement>;
+declare const h4: () => ReactiveElementOf<HTMLHeadingElement>;
+declare const h5: () => ReactiveElementOf<HTMLHeadingElement>;
+declare const h6: () => ReactiveElementOf<HTMLHeadingElement>;
+declare const head: () => ReactiveElementOf<HTMLHeadElement>;
+declare const header: () => ReactiveElementOf<HTMLElement>;
+declare const hgroup: () => ReactiveElementOf<HTMLElement>;
+declare const hr: () => ReactiveElementOf<HTMLHRElement>;
+declare const html: () => ReactiveElementOf<HTMLHtmlElement>;
+declare const i: () => ReactiveElementOf<HTMLElement>;
+declare const iframe: () => ReactiveElementOf<HTMLIFrameElement>;
+declare const img: () => ReactiveElementOf<HTMLImageElement>;
+declare const input: () => ReactiveElementOf<HTMLInputElement>;
+declare const ins: () => ReactiveElementOf<HTMLModElement>;
+declare const kbd: () => ReactiveElementOf<HTMLElement>;
+declare const label: () => ReactiveElementOf<HTMLLabelElement>;
+declare const legend: () => ReactiveElementOf<HTMLLegendElement>;
+declare const li: () => ReactiveElementOf<HTMLLIElement>;
+declare const link: () => ReactiveElementOf<HTMLLinkElement>;
+declare const main: () => ReactiveElementOf<HTMLElement>;
+declare const map: () => ReactiveElementOf<HTMLMapElement>;
+declare const mark: () => ReactiveElementOf<HTMLElement>;
+declare const menu: () => ReactiveElementOf<HTMLMenuElement>;
+declare const meta: () => ReactiveElementOf<HTMLMetaElement>;
+declare const meter: () => ReactiveElementOf<HTMLMeterElement>;
+declare const nav: () => ReactiveElementOf<HTMLElement>;
+declare const noscript: () => ReactiveElementOf<HTMLElement>;
+declare const object: () => ReactiveElementOf<HTMLObjectElement>;
+declare const ol: () => ReactiveElementOf<HTMLOListElement>;
+declare const optgroup: () => ReactiveElementOf<HTMLOptGroupElement>;
+declare const option: () => ReactiveElementOf<HTMLOptionElement>;
+declare const output: () => ReactiveElementOf<HTMLOutputElement>;
+declare const p: () => ReactiveElementOf<HTMLParagraphElement>;
+declare const picture: () => ReactiveElementOf<HTMLPictureElement>;
+declare const pre: () => ReactiveElementOf<HTMLPreElement>;
+declare const progress: () => ReactiveElementOf<HTMLProgressElement>;
+declare const q: () => ReactiveElementOf<HTMLQuoteElement>;
+declare const rp: () => ReactiveElementOf<HTMLElement>;
+declare const rt: () => ReactiveElementOf<HTMLElement>;
+declare const ruby: () => ReactiveElementOf<HTMLElement>;
+declare const s: () => ReactiveElementOf<HTMLElement>;
+declare const samp: () => ReactiveElementOf<HTMLElement>;
+declare const script: () => ReactiveElementOf<HTMLScriptElement>;
+declare const search: () => ReactiveElementOf<HTMLElement>;
+declare const section: () => ReactiveElementOf<HTMLElement>;
+declare const select: () => ReactiveElementOf<HTMLSelectElement>;
+declare const slot: () => ReactiveElementOf<HTMLSlotElement>;
+declare const small: () => ReactiveElementOf<HTMLElement>;
+declare const source: () => ReactiveElementOf<HTMLSourceElement>;
+declare const span: () => ReactiveElementOf<HTMLSpanElement>;
+declare const strong: () => ReactiveElementOf<HTMLElement>;
+declare const style: () => ReactiveElementOf<HTMLStyleElement>;
+declare const sub: () => ReactiveElementOf<HTMLElement>;
+declare const summary: () => ReactiveElementOf<HTMLElement>;
+declare const sup: () => ReactiveElementOf<HTMLElement>;
+declare const table: () => ReactiveElementOf<HTMLTableElement>;
+declare const tbody: () => ReactiveElementOf<HTMLTableSectionElement>;
+declare const td: () => ReactiveElementOf<HTMLTableCellElement>;
+declare const template: () => ReactiveElementOf<HTMLTemplateElement>;
+declare const textarea: () => ReactiveElementOf<HTMLTextAreaElement>;
+declare const tfoot: () => ReactiveElementOf<HTMLTableSectionElement>;
+declare const th: () => ReactiveElementOf<HTMLTableCellElement>;
+declare const thead: () => ReactiveElementOf<HTMLTableSectionElement>;
+declare const time: () => ReactiveElementOf<HTMLTimeElement>;
+declare const title: () => ReactiveElementOf<HTMLTitleElement>;
+declare const tr: () => ReactiveElementOf<HTMLTableRowElement>;
+declare const track: () => ReactiveElementOf<HTMLTrackElement>;
+declare const u: () => ReactiveElementOf<HTMLElement>;
+declare const ul: () => ReactiveElementOf<HTMLUListElement>;
+declare const mathVar: () => ReactiveElementOf<HTMLElement>;
+declare const video: () => ReactiveElementOf<HTMLVideoElement>;
+declare const wbr: () => ReactiveElementOf<HTMLElement>;
+declare const animate: () => ReactiveElementOf<SVGAnimateElement>;
+declare const animateMotion: () => ReactiveElementOf<SVGAnimateMotionElement>;
+declare const animateTransform: () => ReactiveElementOf<SVGAnimateTransformElement>;
+declare const circle: () => ReactiveElementOf<SVGCircleElement>;
+declare const clipPath: () => ReactiveElementOf<SVGClipPathElement>;
+declare const defs: () => ReactiveElementOf<SVGDefsElement>;
+declare const desc: () => ReactiveElementOf<SVGDescElement>;
+declare const ellipse: () => ReactiveElementOf<SVGEllipseElement>;
+declare const feBlend: () => ReactiveElementOf<SVGFEBlendElement>;
+declare const feColorMatrix: () => ReactiveElementOf<SVGFEColorMatrixElement>;
+declare const feComponentTransfer: () => ReactiveElementOf<SVGFEComponentTransferElement>;
+declare const feComposite: () => ReactiveElementOf<SVGFECompositeElement>;
+declare const feConvolveMatrix: () => ReactiveElementOf<SVGFEConvolveMatrixElement>;
+declare const feDiffuseLighting: () => ReactiveElementOf<SVGFEDiffuseLightingElement>;
+declare const feDisplacementMap: () => ReactiveElementOf<SVGFEDisplacementMapElement>;
+declare const feDistantLight: () => ReactiveElementOf<SVGFEDistantLightElement>;
+declare const feDropShadow: () => ReactiveElementOf<SVGFEDropShadowElement>;
+declare const feFlood: () => ReactiveElementOf<SVGFEFloodElement>;
+declare const feFuncA: () => ReactiveElementOf<SVGFEFuncAElement>;
+declare const feFuncB: () => ReactiveElementOf<SVGFEFuncBElement>;
+declare const feFuncG: () => ReactiveElementOf<SVGFEFuncGElement>;
+declare const feFuncR: () => ReactiveElementOf<SVGFEFuncRElement>;
+declare const feGaussianBlur: () => ReactiveElementOf<SVGFEGaussianBlurElement>;
+declare const feImage: () => ReactiveElementOf<SVGFEImageElement>;
+declare const feMerge: () => ReactiveElementOf<SVGFEMergeElement>;
+declare const feMergeNode: () => ReactiveElementOf<SVGFEMergeNodeElement>;
+declare const feMorphology: () => ReactiveElementOf<SVGFEMorphologyElement>;
+declare const feOffset: () => ReactiveElementOf<SVGFEOffsetElement>;
+declare const fePointLight: () => ReactiveElementOf<SVGFEPointLightElement>;
+declare const feSpecularLighting: () => ReactiveElementOf<SVGFESpecularLightingElement>;
+declare const feSpotLight: () => ReactiveElementOf<SVGFESpotLightElement>;
+declare const feTile: () => ReactiveElementOf<SVGFETileElement>;
+declare const feTurbulence: () => ReactiveElementOf<SVGFETurbulenceElement>;
+declare const filter: () => ReactiveElementOf<SVGFilterElement>;
+declare const foreignObject: () => ReactiveElementOf<SVGForeignObjectElement>;
+declare const g: () => ReactiveElementOf<SVGGElement>;
+declare const image: () => ReactiveElementOf<SVGImageElement>;
+declare const line: () => ReactiveElementOf<SVGLineElement>;
+declare const linearGradient: () => ReactiveElementOf<SVGLinearGradientElement>;
+declare const marker: () => ReactiveElementOf<SVGMarkerElement>;
+declare const mask: () => ReactiveElementOf<SVGMaskElement>;
+declare const metadata: () => ReactiveElementOf<SVGMetadataElement>;
+declare const mpath: () => ReactiveElementOf<SVGMPathElement>;
+declare const path: () => ReactiveElementOf<SVGPathElement>;
+declare const pattern: () => ReactiveElementOf<SVGPatternElement>;
+declare const polygon: () => ReactiveElementOf<SVGPolygonElement>;
+declare const polyline: () => ReactiveElementOf<SVGPolylineElement>;
+declare const radialGradient: () => ReactiveElementOf<SVGRadialGradientElement>;
+declare const rect: () => ReactiveElementOf<SVGRectElement>;
+declare const set: () => ReactiveElementOf<SVGSetElement>;
+declare const stop: () => ReactiveElementOf<SVGStopElement>;
+declare const svg: () => ReactiveElementOf<SVGSVGElement>;
+declare const svgSwitch: () => ReactiveElementOf<SVGSwitchElement>;
+declare const symbol: () => ReactiveElementOf<SVGSymbolElement>;
+declare const text: () => ReactiveElementOf<SVGTextElement>;
+declare const textPath: () => ReactiveElementOf<SVGTextPathElement>;
+declare const tspan: () => ReactiveElementOf<SVGTSpanElement>;
+declare const use: () => ReactiveElementOf<SVGUseElement>;
+declare const view: () => ReactiveElementOf<SVGViewElement>;
+declare const annotation: () => ReactiveElementOf<MathMLElement>;
+declare const annotationXml: () => ReactiveElementOf<MathMLElement>;
+declare const maction: () => ReactiveElementOf<MathMLElement>;
+declare const math: () => ReactiveElementOf<MathMLElement>;
+declare const merror: () => ReactiveElementOf<MathMLElement>;
+declare const mfrac: () => ReactiveElementOf<MathMLElement>;
+declare const mi: () => ReactiveElementOf<MathMLElement>;
+declare const mmultiscripts: () => ReactiveElementOf<MathMLElement>;
+declare const mn: () => ReactiveElementOf<MathMLElement>;
+declare const mo: () => ReactiveElementOf<MathMLElement>;
+declare const mover: () => ReactiveElementOf<MathMLElement>;
+declare const mpadded: () => ReactiveElementOf<MathMLElement>;
+declare const mphantom: () => ReactiveElementOf<MathMLElement>;
+declare const mprescripts: () => ReactiveElementOf<MathMLElement>;
+declare const mroot: () => ReactiveElementOf<MathMLElement>;
+declare const mrow: () => ReactiveElementOf<MathMLElement>;
+declare const ms: () => ReactiveElementOf<MathMLElement>;
+declare const mspace: () => ReactiveElementOf<MathMLElement>;
+declare const msqrt: () => ReactiveElementOf<MathMLElement>;
+declare const mstyle: () => ReactiveElementOf<MathMLElement>;
+declare const msub: () => ReactiveElementOf<MathMLElement>;
+declare const msubsup: () => ReactiveElementOf<MathMLElement>;
+declare const msup: () => ReactiveElementOf<MathMLElement>;
+declare const mtable: () => ReactiveElementOf<MathMLElement>;
+declare const mtd: () => ReactiveElementOf<MathMLElement>;
+declare const mtext: () => ReactiveElementOf<MathMLElement>;
+declare const mtr: () => ReactiveElementOf<MathMLElement>;
+declare const munder: () => ReactiveElementOf<MathMLElement>;
+declare const munderover: () => ReactiveElementOf<MathMLElement>;
+declare const semantics: () => ReactiveElementOf<MathMLElement>;
+//#endregion
+export { Lifecycle, a, abbr, address, animate, animateMotion, animateTransform, annotation, annotationXml, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, data, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, label, legend, li, line, linearGradient, link, maction, main, map, mark, marker, mask, math, mathVar, menu, merror, meta, metadata, meter, mfrac, mi, mmultiscripts, mn, mo, mover, mpadded, mpath, mphantom, mprescripts, mroot, mrow, ms, mspace, msqrt, mstyle, msub, msubsup, msup, mtable, mtd, mtext, mtr, munder, munderover, nav, noscript, object, ol, optgroup, option, output, p, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, search, section, select, semantics, set, slot, small, source, span, stop, strong, style, sub, summary, sup, svg, svgSwitch, symbol, table, tbody, td, template, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, video, view, wbr };