auto-wc 0.1.0

package/README.md

@@ -0,0 +1,208 @@
+# auto-wc
+
+![Tests](https://img.shields.io/badge/tests-passing-brightgreen)
+![Size](https://img.shields.io/badge/minified-1.23KB-blue)
+![AI](https://img.shields.io/badge/AI-Generated-orange)
+
+Type-safe Web Components with automatic event wiring.
+
+## Installation
+
+### Node.js (npm, pnpm, bun)
+
+```bash
+# npm
+npm install auto-wc
+
+# pnpm
+pnpm add auto-wc
+
+# bun
+bun add auto-wc
+```
+
+### CDN Usage
+
+You can import `auto-wc` directly from jsDelivr or unpkg without a build step.
+
+#### Standard (ES Modules)
+
+```html
+<script type="module">
+  import { defineAutoWebComponent } from 'https://cdn.jsdelivr.net/npm/auto-wc/+esm';
+</script>
+```
+
+#### Minified (Recommended for Production)
+
+```html
+<!-- unpkg -->
+<script type="module">
+  import { defineAutoWebComponent } from 'https://unpkg.com/auto-wc/dist/index.min.js';
+</script>
+
+<!-- jsDelivr -->
+<script type="module">
+  import { defineAutoWebComponent } from 'https://cdn.jsdelivr.net/npm/auto-wc/dist/index.min.js';
+</script>
+```
+
+Example usage:
+
+```html
+<script type="module">
+  import { defineAutoWebComponent } from 'https://unpkg.com/auto-wc/dist/index.min.js';
+
+  defineAutoWebComponent('my-button', 'button', (Base) => class extends Base {
+    onClick() {
+      console.log('Clicked!');
+    }
+  });
+</script>
+```
+
+#### Development (Unminified)
+
+```html
+<!-- jsDelivr -->
+<script type="module">
+  import { defineAutoWebComponent } from 'https://cdn.jsdelivr.net/npm/auto-wc/+esm';
+</script>
+
+<!-- unpkg -->
+<script type="module">
+  import { defineAutoWebComponent } from 'https://unpkg.com/auto-wc/dist/index.js';
+</script>
+```
+
+Example usage:
+
+```html
+<script type="module">
+  import { defineAutoWebComponent } from 'https://cdn.jsdelivr.net/npm/auto-wc/+esm';
+
+  defineAutoWebComponent('my-button', 'button', (Base) => class extends Base {
+    onClick() {
+      console.log('Clicked!');
+    }
+  });
+</script>
+```
+
+## Usage
+
+### TypeScript / ES Modules
+
+```typescript
+import { defineAutoWebComponent } from "auto-wc";
+
+defineAutoWebComponent(
+  "my-button",
+  "button",
+  (Base) =>
+    class extends Base {
+      // ...
+    }
+);
+```
+
+### CommonJS (require)
+
+If you are using a legacy environment:
+
+```javascript
+const { defineAutoWebComponent } = require("auto-wc");
+
+defineAutoWebComponent("my-button", "button", (Base) => class extends Base {
+  // ...
+});
+```
+
+### Full Example
+
+```typescript
+import { defineAutoWebComponent } from "auto-wc";
+
+defineAutoWebComponent(
+  "my-button",
+  "button",
+  (Base) =>
+    class extends Base {
+      // Automatically wired to 'click' event
+      onClick(e: MouseEvent) {
+        console.log("Button clicked!");
+      }
+
+      // Automatically wired to 'dblclick' event
+      onDblClick(e: MouseEvent) {
+        console.log("Double clicked!");
+      }
+
+      // Standard lifecycle methods work as expected
+      connectedCallback() {
+        super.connectedCallback();
+        console.log("Connected");
+      }
+    },
+  { observedAttributes: ["disabled"] },
+);
+```
+
+### HTML Usage (is="" directive)
+
+Since this library creates **customized built-in elements**, you must use the `is` attribute on the extended standard HTML element:
+
+```html
+<!-- Correct -->
+<button is="my-button">Click Me</button>
+
+<!-- Incorrect (won't work for built-in extends) -->
+<my-button>I will never work!</my-button>
+```
+
+### Using Import Maps
+
+You can use Import Maps to manage your dependencies cleanly in the browser:
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "auto-wc": "https://unpkg.com/auto-wc/dist/index.min.js"
+    }
+  }
+</script>
+
+<script type="module">
+  import { defineAutoWebComponent } from "auto-wc";
+
+  defineAutoWebComponent("my-button", "button", (Base) => class extends Base {
+    // ...
+  });
+</script>
+```
+
+## Features
+
+- ✅ **Type-safe**: Full TypeScript support for DOM events.
+- ✅ **Automatic Wiring**: Methods starting with `on` (e.g., `onClick`) are automatically bound to events.
+- ✅ **Automatic Registration**: `customElements.define` is called automatically.
+- ✅ **Strict**: Event handler properties are read-only to prevent runtime reassignment.
+- ✅ **Cleanup**: Event listeners are automatically removed on disconnect.
+- ✅ **Zero Dependencies**: Lightweight and fast.
+
+## API
+
+### `defineAutoWebComponent(tagName, extendsTag, factory, options)`
+
+- `tagName`: The custom element tag name (e.g., `'my-button'`).
+- `extendsTag`: The HTML tag to extend (e.g., `'button'`, `'div'`).
+- `factory`: A function that receives the `Base` class and returns your implementation.
+- `options`: Optional configuration object.
+  - `observedAttributes`: Array of attribute names to observe.
+
+This function automatically calls `customElements.define` with the provided `tagName` and the generated class.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  defineAutoWebComponent: () => defineAutoWebComponent
+});
+module.exports = __toCommonJS(index_exports);
+function isEventInterceptorMethod(method) {
+  return /^on[A-Z]/.test(method);
+}
+function getEventName(methodName) {
+  return methodName.substring(2).toLowerCase();
+}
+function withAutoEvents(Base) {
+  class AutoElement extends Base {
+    _cleanupFns = [];
+    connectedCallback() {
+      if (super.connectedCallback) super.connectedCallback();
+      this._wireAndLockEvents();
+    }
+    disconnectedCallback() {
+      if (super.disconnectedCallback) super.disconnectedCallback();
+      this._unwireEvents();
+    }
+    _wireAndLockEvents() {
+      const hostMethods = /* @__PURE__ */ new Set();
+      let curr = this;
+      while (curr && curr !== Object.prototype) {
+        Object.getOwnPropertyNames(curr).forEach((prop) => {
+          if (isEventInterceptorMethod(prop)) hostMethods.add(prop);
+        });
+        curr = Object.getPrototypeOf(curr);
+      }
+      for (const method of hostMethods) {
+        const eventName = getEventName(method);
+        const originalHostFn = this[method];
+        if (typeof originalHostFn !== "function") continue;
+        const handler = originalHostFn.bind(this);
+        this.addEventListener(eventName, handler);
+        this._cleanupFns.push(() => {
+          this.removeEventListener(eventName, handler);
+        });
+        Object.defineProperty(this, method, {
+          value: originalHostFn,
+          writable: false,
+          configurable: true
+        });
+      }
+    }
+    _unwireEvents() {
+      for (const cleanup of this._cleanupFns) {
+        cleanup();
+      }
+      this._cleanupFns = [];
+    }
+  }
+  return AutoElement;
+}
+function defineAutoWebComponent(tagName, extendsTag, factory, options = {}) {
+  const BaseClass = document.createElement(extendsTag).constructor;
+  const ImplementationClass = factory(withAutoEvents(BaseClass));
+  if (customElements.get(tagName)) {
+    console.warn(`Custom element ${tagName} is already registered`);
+    return;
+  }
+  if (options.observedAttributes) {
+    ImplementationClass.observedAttributes = options.observedAttributes;
+  }
+  customElements.define(tagName, ImplementationClass, {
+    extends: extendsTag
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineAutoWebComponent
+});
+/**
+ * @license MIT
+ * Auto Web Component - Type-safe Web Components with automatic event wiring.
+ */
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @license MIT\n * Auto Web Component - Type-safe Web Components with automatic event wiring.\n */\n\n// --- 1. Standard DOM Type Helpers ---\n\n/**\n * Represents any valid HTML tag name (e.g., 'div', 'button', 'input').\n */\nexport type TagName = keyof HTMLElementTagNameMap;\n\n/**\n * Maps a tag name to its specific HTMLElement class.\n * e.g., TagClass<'button'> resolves to HTMLButtonElement.\n */\nexport type TagClass<T extends TagName> = HTMLElementTagNameMap[T];\n\nexport type Constructor<T = {}> = new (...args: any[]) => T;\n\nexport interface AutoWebComponentOptions<\n  ObservedAttributes extends string[] = string[],\n> {\n  observedAttributes?: ObservedAttributes;\n}\n\n// --- 2. Event System Configuration ---\n\n/**\n * Interface defining all supported event interceptors.\n * Implement these methods in your class to automatically handle events.\n *\n * Naming Convention: on{EventName} -> eventname\n * Example: onClick -> click, onMouseDown -> mousedown, onDblClick -> dblclick\n */\nexport interface EventInterceptors {\n  // Mouse\n  onClick?(e: MouseEvent): void;\n  onDblClick?(e: MouseEvent): void; // Maps to 'dblclick'\n  onMouseDown?(e: MouseEvent): void;\n  onMouseUp?(e: MouseEvent): void;\n  onMouseEnter?(e: MouseEvent): void;\n  onMouseLeave?(e: MouseEvent): void;\n  onMouseMove?(e: MouseEvent): void;\n  onMouseOver?(e: MouseEvent): void;\n  onMouseOut?(e: MouseEvent): void;\n  onContextMenu?(e: MouseEvent): void;\n\n  // Keyboard\n  onKeyDown?(e: KeyboardEvent): void;\n  onKeyUp?(e: KeyboardEvent): void;\n  onKeyPress?(e: KeyboardEvent): void;\n\n  // Form / Input\n  onInput?(e: Event): void;\n  onChange?(e: Event): void;\n  onSubmit?(e: SubmitEvent): void;\n  onFocus?(e: FocusEvent): void;\n  onBlur?(e: FocusEvent): void;\n  onReset?(e: Event): void;\n  onInvalid?(e: Event): void;\n  onSelect?(e: Event): void;\n\n  // Drag & Drop\n  onDrag?(e: DragEvent): void;\n  onDragEnd?(e: DragEvent): void;\n  onDragEnter?(e: DragEvent): void;\n  onDragLeave?(e: DragEvent): void;\n  onDragOver?(e: DragEvent): void;\n  onDragStart?(e: DragEvent): void;\n  onDrop?(e: DragEvent): void;\n\n  // Clipboard\n  onCopy?(e: ClipboardEvent): void;\n  onCut?(e: ClipboardEvent): void;\n  onPaste?(e: ClipboardEvent): void;\n\n  // UI / Window\n  onScroll?(e: Event): void;\n  onResize?(e: UIEvent): void;\n  onWheel?(e: WheelEvent): void;\n\n  // Media\n  onLoad?(e: Event): void;\n  onError?(e: ErrorEvent): void;\n  onPlay?(e: Event): void;\n  onPause?(e: Event): void;\n  onEnded?(e: Event): void;\n\n  // Details/Dialog\n  onToggle?(e: Event): void;\n}\n\n// --- 3. Internal Logic ---\n\nfunction isEventInterceptorMethod(method: string): boolean {\n  return /^on[A-Z]/.test(method);\n}\n\nfunction getEventName(methodName: string): string {\n  // Simple rule: strip 'on' and lowercase the rest\n  // onClick -> click\n  // onDblClick -> dblclick\n  // onMouseDown -> mousedown\n  return methodName.substring(2).toLowerCase();\n}\n\n/**\n * Mixin that adds auto event wiring to a base class.\n */\nfunction withAutoEvents<T extends Constructor<HTMLElement>>(Base: T) {\n  // @ts-expect-error - Dynamic class extension\n  class AutoElement extends Base implements EventInterceptors {\n    private _cleanupFns: Array<() => void> = [];\n\n    connectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.connectedCallback) super.connectedCallback();\n      this._wireAndLockEvents();\n    }\n\n    disconnectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.disconnectedCallback) super.disconnectedCallback();\n      this._unwireEvents();\n    }\n\n    private _wireAndLockEvents() {\n      // Scan the prototype chain for methods starting with 'on'\n      const hostMethods = new Set<string>();\n      let curr = this;\n\n      // Walk up prototype chain to find methods\n      while (curr && curr !== Object.prototype) {\n        Object.getOwnPropertyNames(curr).forEach((prop) => {\n          if (isEventInterceptorMethod(prop)) hostMethods.add(prop);\n        });\n        curr = Object.getPrototypeOf(curr);\n      }\n\n      for (const method of hostMethods) {\n        const eventName = getEventName(method);\n        const originalHostFn = this[method as keyof typeof this];\n\n        if (typeof originalHostFn !== \"function\") continue;\n\n        // 1. Wire the event\n        const handler = originalHostFn.bind(this) as EventListener;\n        this.addEventListener(eventName, handler);\n        this._cleanupFns.push(() => {\n          this.removeEventListener(eventName, handler);\n        });\n\n        // 2. Lock the property to prevent runtime reassignment\n        Object.defineProperty(this, method, {\n          value: originalHostFn,\n          writable: false,\n          configurable: true,\n        });\n      }\n    }\n\n    private _unwireEvents() {\n      for (const cleanup of this._cleanupFns) {\n        cleanup();\n      }\n      this._cleanupFns = [];\n    }\n  }\n\n  return AutoElement as unknown as T & Constructor<EventInterceptors>;\n}\n\n// --- 4. Public API ---\n\n/**\n * Defines a type-safe Web Component with auto event handling.\n *\n * @param tagName - The custom element tag name (e.g., 'my-button')\n * @param extendsTag - The HTML tag to extend (e.g., 'button', 'div')\n * @param factory - A function that receives the Base class and returns your implementation\n * @param options - Optional configuration (observedAttributes, etc.)\n */\nexport function defineAutoWebComponent<\n  T extends TagName,\n  ObservedAttributes extends string[] = string[],\n>(\n  tagName: string,\n  extendsTag: T,\n  factory: (\n    base: Constructor<TagClass<T> & EventInterceptors>,\n  ) => Constructor<TagClass<T>> & { observedAttributes?: ObservedAttributes },\n  options: AutoWebComponentOptions<ObservedAttributes> = {},\n): void {\n  const BaseClass = document.createElement(extendsTag)\n    .constructor as Constructor<TagClass<T>>;\n  const ImplementationClass = factory(withAutoEvents(BaseClass));\n\n  if (customElements.get(tagName)) {\n    console.warn(`Custom element ${tagName} is already registered`);\n    return;\n  }\n\n  if (options.observedAttributes) {\n    ImplementationClass.observedAttributes = options.observedAttributes;\n  }\n\n  customElements.define(tagName, ImplementationClass, {\n    extends: extendsTag,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FA,SAAS,yBAAyB,QAAyB;AACzD,SAAO,WAAW,KAAK,MAAM;AAC/B;AAEA,SAAS,aAAa,YAA4B;AAKhD,SAAO,WAAW,UAAU,CAAC,EAAE,YAAY;AAC7C;AAKA,SAAS,eAAmD,MAAS;AAAA,EAEnE,MAAM,oBAAoB,KAAkC;AAAA,IAClD,cAAiC,CAAC;AAAA,IAE1C,oBAAoB;AAElB,UAAI,MAAM,kBAAmB,OAAM,kBAAkB;AACrD,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IAEA,uBAAuB;AAErB,UAAI,MAAM,qBAAsB,OAAM,qBAAqB;AAC3D,WAAK,cAAc;AAAA,IACrB;AAAA,IAEQ,qBAAqB;AAE3B,YAAM,cAAc,oBAAI,IAAY;AACpC,UAAI,OAAO;AAGX,aAAO,QAAQ,SAAS,OAAO,WAAW;AACxC,eAAO,oBAAoB,IAAI,EAAE,QAAQ,CAAC,SAAS;AACjD,cAAI,yBAAyB,IAAI,EAAG,aAAY,IAAI,IAAI;AAAA,QAC1D,CAAC;AACD,eAAO,OAAO,eAAe,IAAI;AAAA,MACnC;AAEA,iBAAW,UAAU,aAAa;AAChC,cAAM,YAAY,aAAa,MAAM;AACrC,cAAM,iBAAiB,KAAK,MAA2B;AAEvD,YAAI,OAAO,mBAAmB,WAAY;AAG1C,cAAM,UAAU,eAAe,KAAK,IAAI;AACxC,aAAK,iBAAiB,WAAW,OAAO;AACxC,aAAK,YAAY,KAAK,MAAM;AAC1B,eAAK,oBAAoB,WAAW,OAAO;AAAA,QAC7C,CAAC;AAGD,eAAO,eAAe,MAAM,QAAQ;AAAA,UAClC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,cAAc;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IAEQ,gBAAgB;AACtB,iBAAW,WAAW,KAAK,aAAa;AACtC,gBAAQ;AAAA,MACV;AACA,WAAK,cAAc,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,SAAO;AACT;AAYO,SAAS,uBAId,SACA,YACA,SAGA,UAAuD,CAAC,GAClD;AACN,QAAM,YAAY,SAAS,cAAc,UAAU,EAChD;AACH,QAAM,sBAAsB,QAAQ,eAAe,SAAS,CAAC;AAE7D,MAAI,eAAe,IAAI,OAAO,GAAG;AAC/B,YAAQ,KAAK,kBAAkB,OAAO,wBAAwB;AAC9D;AAAA,EACF;AAEA,MAAI,QAAQ,oBAAoB;AAC9B,wBAAoB,qBAAqB,QAAQ;AAAA,EACnD;AAEA,iBAAe,OAAO,SAAS,qBAAqB;AAAA,IAClD,SAAS;AAAA,EACX,CAAC;AACH;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,79 @@
+/**
+ * @license MIT
+ * Auto Web Component - Type-safe Web Components with automatic event wiring.
+ */
+/**
+ * Represents any valid HTML tag name (e.g., 'div', 'button', 'input').
+ */
+type TagName = keyof HTMLElementTagNameMap;
+/**
+ * Maps a tag name to its specific HTMLElement class.
+ * e.g., TagClass<'button'> resolves to HTMLButtonElement.
+ */
+type TagClass<T extends TagName> = HTMLElementTagNameMap[T];
+type Constructor<T = {}> = new (...args: any[]) => T;
+interface AutoWebComponentOptions<ObservedAttributes extends string[] = string[]> {
+    observedAttributes?: ObservedAttributes;
+}
+/**
+ * Interface defining all supported event interceptors.
+ * Implement these methods in your class to automatically handle events.
+ *
+ * Naming Convention: on{EventName} -> eventname
+ * Example: onClick -> click, onMouseDown -> mousedown, onDblClick -> dblclick
+ */
+interface EventInterceptors {
+    onClick?(e: MouseEvent): void;
+    onDblClick?(e: MouseEvent): void;
+    onMouseDown?(e: MouseEvent): void;
+    onMouseUp?(e: MouseEvent): void;
+    onMouseEnter?(e: MouseEvent): void;
+    onMouseLeave?(e: MouseEvent): void;
+    onMouseMove?(e: MouseEvent): void;
+    onMouseOver?(e: MouseEvent): void;
+    onMouseOut?(e: MouseEvent): void;
+    onContextMenu?(e: MouseEvent): void;
+    onKeyDown?(e: KeyboardEvent): void;
+    onKeyUp?(e: KeyboardEvent): void;
+    onKeyPress?(e: KeyboardEvent): void;
+    onInput?(e: Event): void;
+    onChange?(e: Event): void;
+    onSubmit?(e: SubmitEvent): void;
+    onFocus?(e: FocusEvent): void;
+    onBlur?(e: FocusEvent): void;
+    onReset?(e: Event): void;
+    onInvalid?(e: Event): void;
+    onSelect?(e: Event): void;
+    onDrag?(e: DragEvent): void;
+    onDragEnd?(e: DragEvent): void;
+    onDragEnter?(e: DragEvent): void;
+    onDragLeave?(e: DragEvent): void;
+    onDragOver?(e: DragEvent): void;
+    onDragStart?(e: DragEvent): void;
+    onDrop?(e: DragEvent): void;
+    onCopy?(e: ClipboardEvent): void;
+    onCut?(e: ClipboardEvent): void;
+    onPaste?(e: ClipboardEvent): void;
+    onScroll?(e: Event): void;
+    onResize?(e: UIEvent): void;
+    onWheel?(e: WheelEvent): void;
+    onLoad?(e: Event): void;
+    onError?(e: ErrorEvent): void;
+    onPlay?(e: Event): void;
+    onPause?(e: Event): void;
+    onEnded?(e: Event): void;
+    onToggle?(e: Event): void;
+}
+/**
+ * Defines a type-safe Web Component with auto event handling.
+ *
+ * @param tagName - The custom element tag name (e.g., 'my-button')
+ * @param extendsTag - The HTML tag to extend (e.g., 'button', 'div')
+ * @param factory - A function that receives the Base class and returns your implementation
+ * @param options - Optional configuration (observedAttributes, etc.)
+ */
+declare function defineAutoWebComponent<T extends TagName, ObservedAttributes extends string[] = string[]>(tagName: string, extendsTag: T, factory: (base: Constructor<TagClass<T> & EventInterceptors>) => Constructor<TagClass<T>> & {
+    observedAttributes?: ObservedAttributes;
+}, options?: AutoWebComponentOptions<ObservedAttributes>): void;
+
+export { type AutoWebComponentOptions, type Constructor, type EventInterceptors, type TagClass, type TagName, defineAutoWebComponent };

package/dist/index.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license MIT
+ * Auto Web Component - Type-safe Web Components with automatic event wiring.
+ */
+/**
+ * Represents any valid HTML tag name (e.g., 'div', 'button', 'input').
+ */
+type TagName = keyof HTMLElementTagNameMap;
+/**
+ * Maps a tag name to its specific HTMLElement class.
+ * e.g., TagClass<'button'> resolves to HTMLButtonElement.
+ */
+type TagClass<T extends TagName> = HTMLElementTagNameMap[T];
+type Constructor<T = {}> = new (...args: any[]) => T;
+interface AutoWebComponentOptions<ObservedAttributes extends string[] = string[]> {
+    observedAttributes?: ObservedAttributes;
+}
+/**
+ * Interface defining all supported event interceptors.
+ * Implement these methods in your class to automatically handle events.
+ *
+ * Naming Convention: on{EventName} -> eventname
+ * Example: onClick -> click, onMouseDown -> mousedown, onDblClick -> dblclick
+ */
+interface EventInterceptors {
+    onClick?(e: MouseEvent): void;
+    onDblClick?(e: MouseEvent): void;
+    onMouseDown?(e: MouseEvent): void;
+    onMouseUp?(e: MouseEvent): void;
+    onMouseEnter?(e: MouseEvent): void;
+    onMouseLeave?(e: MouseEvent): void;
+    onMouseMove?(e: MouseEvent): void;
+    onMouseOver?(e: MouseEvent): void;
+    onMouseOut?(e: MouseEvent): void;
+    onContextMenu?(e: MouseEvent): void;
+    onKeyDown?(e: KeyboardEvent): void;
+    onKeyUp?(e: KeyboardEvent): void;
+    onKeyPress?(e: KeyboardEvent): void;
+    onInput?(e: Event): void;
+    onChange?(e: Event): void;
+    onSubmit?(e: SubmitEvent): void;
+    onFocus?(e: FocusEvent): void;
+    onBlur?(e: FocusEvent): void;
+    onReset?(e: Event): void;
+    onInvalid?(e: Event): void;
+    onSelect?(e: Event): void;
+    onDrag?(e: DragEvent): void;
+    onDragEnd?(e: DragEvent): void;
+    onDragEnter?(e: DragEvent): void;
+    onDragLeave?(e: DragEvent): void;
+    onDragOver?(e: DragEvent): void;
+    onDragStart?(e: DragEvent): void;
+    onDrop?(e: DragEvent): void;
+    onCopy?(e: ClipboardEvent): void;
+    onCut?(e: ClipboardEvent): void;
+    onPaste?(e: ClipboardEvent): void;
+    onScroll?(e: Event): void;
+    onResize?(e: UIEvent): void;
+    onWheel?(e: WheelEvent): void;
+    onLoad?(e: Event): void;
+    onError?(e: ErrorEvent): void;
+    onPlay?(e: Event): void;
+    onPause?(e: Event): void;
+    onEnded?(e: Event): void;
+    onToggle?(e: Event): void;
+}
+/**
+ * Defines a type-safe Web Component with auto event handling.
+ *
+ * @param tagName - The custom element tag name (e.g., 'my-button')
+ * @param extendsTag - The HTML tag to extend (e.g., 'button', 'div')
+ * @param factory - A function that receives the Base class and returns your implementation
+ * @param options - Optional configuration (observedAttributes, etc.)
+ */
+declare function defineAutoWebComponent<T extends TagName, ObservedAttributes extends string[] = string[]>(tagName: string, extendsTag: T, factory: (base: Constructor<TagClass<T> & EventInterceptors>) => Constructor<TagClass<T>> & {
+    observedAttributes?: ObservedAttributes;
+}, options?: AutoWebComponentOptions<ObservedAttributes>): void;
+
+export { type AutoWebComponentOptions, type Constructor, type EventInterceptors, type TagClass, type TagName, defineAutoWebComponent };

package/dist/index.js

@@ -0,0 +1,74 @@
+// src/index.ts
+function isEventInterceptorMethod(method) {
+  return /^on[A-Z]/.test(method);
+}
+function getEventName(methodName) {
+  return methodName.substring(2).toLowerCase();
+}
+function withAutoEvents(Base) {
+  class AutoElement extends Base {
+    _cleanupFns = [];
+    connectedCallback() {
+      if (super.connectedCallback) super.connectedCallback();
+      this._wireAndLockEvents();
+    }
+    disconnectedCallback() {
+      if (super.disconnectedCallback) super.disconnectedCallback();
+      this._unwireEvents();
+    }
+    _wireAndLockEvents() {
+      const hostMethods = /* @__PURE__ */ new Set();
+      let curr = this;
+      while (curr && curr !== Object.prototype) {
+        Object.getOwnPropertyNames(curr).forEach((prop) => {
+          if (isEventInterceptorMethod(prop)) hostMethods.add(prop);
+        });
+        curr = Object.getPrototypeOf(curr);
+      }
+      for (const method of hostMethods) {
+        const eventName = getEventName(method);
+        const originalHostFn = this[method];
+        if (typeof originalHostFn !== "function") continue;
+        const handler = originalHostFn.bind(this);
+        this.addEventListener(eventName, handler);
+        this._cleanupFns.push(() => {
+          this.removeEventListener(eventName, handler);
+        });
+        Object.defineProperty(this, method, {
+          value: originalHostFn,
+          writable: false,
+          configurable: true
+        });
+      }
+    }
+    _unwireEvents() {
+      for (const cleanup of this._cleanupFns) {
+        cleanup();
+      }
+      this._cleanupFns = [];
+    }
+  }
+  return AutoElement;
+}
+function defineAutoWebComponent(tagName, extendsTag, factory, options = {}) {
+  const BaseClass = document.createElement(extendsTag).constructor;
+  const ImplementationClass = factory(withAutoEvents(BaseClass));
+  if (customElements.get(tagName)) {
+    console.warn(`Custom element ${tagName} is already registered`);
+    return;
+  }
+  if (options.observedAttributes) {
+    ImplementationClass.observedAttributes = options.observedAttributes;
+  }
+  customElements.define(tagName, ImplementationClass, {
+    extends: extendsTag
+  });
+}
+export {
+  defineAutoWebComponent
+};
+/**
+ * @license MIT
+ * Auto Web Component - Type-safe Web Components with automatic event wiring.
+ */
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @license MIT\n * Auto Web Component - Type-safe Web Components with automatic event wiring.\n */\n\n// --- 1. Standard DOM Type Helpers ---\n\n/**\n * Represents any valid HTML tag name (e.g., 'div', 'button', 'input').\n */\nexport type TagName = keyof HTMLElementTagNameMap;\n\n/**\n * Maps a tag name to its specific HTMLElement class.\n * e.g., TagClass<'button'> resolves to HTMLButtonElement.\n */\nexport type TagClass<T extends TagName> = HTMLElementTagNameMap[T];\n\nexport type Constructor<T = {}> = new (...args: any[]) => T;\n\nexport interface AutoWebComponentOptions<\n  ObservedAttributes extends string[] = string[],\n> {\n  observedAttributes?: ObservedAttributes;\n}\n\n// --- 2. Event System Configuration ---\n\n/**\n * Interface defining all supported event interceptors.\n * Implement these methods in your class to automatically handle events.\n *\n * Naming Convention: on{EventName} -> eventname\n * Example: onClick -> click, onMouseDown -> mousedown, onDblClick -> dblclick\n */\nexport interface EventInterceptors {\n  // Mouse\n  onClick?(e: MouseEvent): void;\n  onDblClick?(e: MouseEvent): void; // Maps to 'dblclick'\n  onMouseDown?(e: MouseEvent): void;\n  onMouseUp?(e: MouseEvent): void;\n  onMouseEnter?(e: MouseEvent): void;\n  onMouseLeave?(e: MouseEvent): void;\n  onMouseMove?(e: MouseEvent): void;\n  onMouseOver?(e: MouseEvent): void;\n  onMouseOut?(e: MouseEvent): void;\n  onContextMenu?(e: MouseEvent): void;\n\n  // Keyboard\n  onKeyDown?(e: KeyboardEvent): void;\n  onKeyUp?(e: KeyboardEvent): void;\n  onKeyPress?(e: KeyboardEvent): void;\n\n  // Form / Input\n  onInput?(e: Event): void;\n  onChange?(e: Event): void;\n  onSubmit?(e: SubmitEvent): void;\n  onFocus?(e: FocusEvent): void;\n  onBlur?(e: FocusEvent): void;\n  onReset?(e: Event): void;\n  onInvalid?(e: Event): void;\n  onSelect?(e: Event): void;\n\n  // Drag & Drop\n  onDrag?(e: DragEvent): void;\n  onDragEnd?(e: DragEvent): void;\n  onDragEnter?(e: DragEvent): void;\n  onDragLeave?(e: DragEvent): void;\n  onDragOver?(e: DragEvent): void;\n  onDragStart?(e: DragEvent): void;\n  onDrop?(e: DragEvent): void;\n\n  // Clipboard\n  onCopy?(e: ClipboardEvent): void;\n  onCut?(e: ClipboardEvent): void;\n  onPaste?(e: ClipboardEvent): void;\n\n  // UI / Window\n  onScroll?(e: Event): void;\n  onResize?(e: UIEvent): void;\n  onWheel?(e: WheelEvent): void;\n\n  // Media\n  onLoad?(e: Event): void;\n  onError?(e: ErrorEvent): void;\n  onPlay?(e: Event): void;\n  onPause?(e: Event): void;\n  onEnded?(e: Event): void;\n\n  // Details/Dialog\n  onToggle?(e: Event): void;\n}\n\n// --- 3. Internal Logic ---\n\nfunction isEventInterceptorMethod(method: string): boolean {\n  return /^on[A-Z]/.test(method);\n}\n\nfunction getEventName(methodName: string): string {\n  // Simple rule: strip 'on' and lowercase the rest\n  // onClick -> click\n  // onDblClick -> dblclick\n  // onMouseDown -> mousedown\n  return methodName.substring(2).toLowerCase();\n}\n\n/**\n * Mixin that adds auto event wiring to a base class.\n */\nfunction withAutoEvents<T extends Constructor<HTMLElement>>(Base: T) {\n  // @ts-expect-error - Dynamic class extension\n  class AutoElement extends Base implements EventInterceptors {\n    private _cleanupFns: Array<() => void> = [];\n\n    connectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.connectedCallback) super.connectedCallback();\n      this._wireAndLockEvents();\n    }\n\n    disconnectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.disconnectedCallback) super.disconnectedCallback();\n      this._unwireEvents();\n    }\n\n    private _wireAndLockEvents() {\n      // Scan the prototype chain for methods starting with 'on'\n      const hostMethods = new Set<string>();\n      let curr = this;\n\n      // Walk up prototype chain to find methods\n      while (curr && curr !== Object.prototype) {\n        Object.getOwnPropertyNames(curr).forEach((prop) => {\n          if (isEventInterceptorMethod(prop)) hostMethods.add(prop);\n        });\n        curr = Object.getPrototypeOf(curr);\n      }\n\n      for (const method of hostMethods) {\n        const eventName = getEventName(method);\n        const originalHostFn = this[method as keyof typeof this];\n\n        if (typeof originalHostFn !== \"function\") continue;\n\n        // 1. Wire the event\n        const handler = originalHostFn.bind(this) as EventListener;\n        this.addEventListener(eventName, handler);\n        this._cleanupFns.push(() => {\n          this.removeEventListener(eventName, handler);\n        });\n\n        // 2. Lock the property to prevent runtime reassignment\n        Object.defineProperty(this, method, {\n          value: originalHostFn,\n          writable: false,\n          configurable: true,\n        });\n      }\n    }\n\n    private _unwireEvents() {\n      for (const cleanup of this._cleanupFns) {\n        cleanup();\n      }\n      this._cleanupFns = [];\n    }\n  }\n\n  return AutoElement as unknown as T & Constructor<EventInterceptors>;\n}\n\n// --- 4. Public API ---\n\n/**\n * Defines a type-safe Web Component with auto event handling.\n *\n * @param tagName - The custom element tag name (e.g., 'my-button')\n * @param extendsTag - The HTML tag to extend (e.g., 'button', 'div')\n * @param factory - A function that receives the Base class and returns your implementation\n * @param options - Optional configuration (observedAttributes, etc.)\n */\nexport function defineAutoWebComponent<\n  T extends TagName,\n  ObservedAttributes extends string[] = string[],\n>(\n  tagName: string,\n  extendsTag: T,\n  factory: (\n    base: Constructor<TagClass<T> & EventInterceptors>,\n  ) => Constructor<TagClass<T>> & { observedAttributes?: ObservedAttributes },\n  options: AutoWebComponentOptions<ObservedAttributes> = {},\n): void {\n  const BaseClass = document.createElement(extendsTag)\n    .constructor as Constructor<TagClass<T>>;\n  const ImplementationClass = factory(withAutoEvents(BaseClass));\n\n  if (customElements.get(tagName)) {\n    console.warn(`Custom element ${tagName} is already registered`);\n    return;\n  }\n\n  if (options.observedAttributes) {\n    ImplementationClass.observedAttributes = options.observedAttributes;\n  }\n\n  customElements.define(tagName, ImplementationClass, {\n    extends: extendsTag,\n  });\n}\n"],"mappings":";AA+FA,SAAS,yBAAyB,QAAyB;AACzD,SAAO,WAAW,KAAK,MAAM;AAC/B;AAEA,SAAS,aAAa,YAA4B;AAKhD,SAAO,WAAW,UAAU,CAAC,EAAE,YAAY;AAC7C;AAKA,SAAS,eAAmD,MAAS;AAAA,EAEnE,MAAM,oBAAoB,KAAkC;AAAA,IAClD,cAAiC,CAAC;AAAA,IAE1C,oBAAoB;AAElB,UAAI,MAAM,kBAAmB,OAAM,kBAAkB;AACrD,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IAEA,uBAAuB;AAErB,UAAI,MAAM,qBAAsB,OAAM,qBAAqB;AAC3D,WAAK,cAAc;AAAA,IACrB;AAAA,IAEQ,qBAAqB;AAE3B,YAAM,cAAc,oBAAI,IAAY;AACpC,UAAI,OAAO;AAGX,aAAO,QAAQ,SAAS,OAAO,WAAW;AACxC,eAAO,oBAAoB,IAAI,EAAE,QAAQ,CAAC,SAAS;AACjD,cAAI,yBAAyB,IAAI,EAAG,aAAY,IAAI,IAAI;AAAA,QAC1D,CAAC;AACD,eAAO,OAAO,eAAe,IAAI;AAAA,MACnC;AAEA,iBAAW,UAAU,aAAa;AAChC,cAAM,YAAY,aAAa,MAAM;AACrC,cAAM,iBAAiB,KAAK,MAA2B;AAEvD,YAAI,OAAO,mBAAmB,WAAY;AAG1C,cAAM,UAAU,eAAe,KAAK,IAAI;AACxC,aAAK,iBAAiB,WAAW,OAAO;AACxC,aAAK,YAAY,KAAK,MAAM;AAC1B,eAAK,oBAAoB,WAAW,OAAO;AAAA,QAC7C,CAAC;AAGD,eAAO,eAAe,MAAM,QAAQ;AAAA,UAClC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,cAAc;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IAEQ,gBAAgB;AACtB,iBAAW,WAAW,KAAK,aAAa;AACtC,gBAAQ;AAAA,MACV;AACA,WAAK,cAAc,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,SAAO;AACT;AAYO,SAAS,uBAId,SACA,YACA,SAGA,UAAuD,CAAC,GAClD;AACN,QAAM,YAAY,SAAS,cAAc,UAAU,EAChD;AACH,QAAM,sBAAsB,QAAQ,eAAe,SAAS,CAAC;AAE7D,MAAI,eAAe,IAAI,OAAO,GAAG;AAC/B,YAAQ,KAAK,kBAAkB,OAAO,wBAAwB;AAC9D;AAAA,EACF;AAEA,MAAI,QAAQ,oBAAoB;AAC9B,wBAAoB,qBAAqB,QAAQ;AAAA,EACnD;AAEA,iBAAe,OAAO,SAAS,qBAAqB;AAAA,IAClD,SAAS;AAAA,EACX,CAAC;AACH;","names":[]}

package/dist/index.min.cjs

@@ -0,0 +1,6 @@
+"use strict";var v=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var l=(e,t)=>{for(var r in t)v(e,r,{get:t[r],enumerable:!0})},b=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of c(t))!E.call(e,n)&&n!==r&&v(e,n,{get:()=>t[n],enumerable:!(o=u(t,n))||o.enumerable});return e};var p=e=>b(v({},"__esModule",{value:!0}),e);var M={};l(M,{defineAutoWebComponent:()=>f});module.exports=p(M);function g(e){return/^on[A-Z]/.test(e)}function C(e){return e.substring(2).toLowerCase()}function m(e){class t extends e{_cleanupFns=[];connectedCallback(){super.connectedCallback&&super.connectedCallback(),this._wireAndLockEvents()}disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),this._unwireEvents()}_wireAndLockEvents(){let o=new Set,n=this;for(;n&&n!==Object.prototype;)Object.getOwnPropertyNames(n).forEach(s=>{g(s)&&o.add(s)}),n=Object.getPrototypeOf(n);for(let s of o){let a=C(s),i=this[s];if(typeof i!="function")continue;let d=i.bind(this);this.addEventListener(a,d),this._cleanupFns.push(()=>{this.removeEventListener(a,d)}),Object.defineProperty(this,s,{value:i,writable:!1,configurable:!0})}}_unwireEvents(){for(let o of this._cleanupFns)o();this._cleanupFns=[]}}return t}function f(e,t,r,o={}){let n=document.createElement(t).constructor,s=r(m(n));if(customElements.get(e)){console.warn(`Custom element ${e} is already registered`);return}o.observedAttributes&&(s.observedAttributes=o.observedAttributes),customElements.define(e,s,{extends:t})}0&&(module.exports={defineAutoWebComponent});
+/**
+ * @license MIT
+ * Auto Web Component - Type-safe Web Components with automatic event wiring.
+ */
+//# sourceMappingURL=index.min.cjs.map

package/dist/index.min.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @license MIT\n * Auto Web Component - Type-safe Web Components with automatic event wiring.\n */\n\n// --- 1. Standard DOM Type Helpers ---\n\n/**\n * Represents any valid HTML tag name (e.g., 'div', 'button', 'input').\n */\nexport type TagName = keyof HTMLElementTagNameMap;\n\n/**\n * Maps a tag name to its specific HTMLElement class.\n * e.g., TagClass<'button'> resolves to HTMLButtonElement.\n */\nexport type TagClass<T extends TagName> = HTMLElementTagNameMap[T];\n\nexport type Constructor<T = {}> = new (...args: any[]) => T;\n\nexport interface AutoWebComponentOptions<\n  ObservedAttributes extends string[] = string[],\n> {\n  observedAttributes?: ObservedAttributes;\n}\n\n// --- 2. Event System Configuration ---\n\n/**\n * Interface defining all supported event interceptors.\n * Implement these methods in your class to automatically handle events.\n *\n * Naming Convention: on{EventName} -> eventname\n * Example: onClick -> click, onMouseDown -> mousedown, onDblClick -> dblclick\n */\nexport interface EventInterceptors {\n  // Mouse\n  onClick?(e: MouseEvent): void;\n  onDblClick?(e: MouseEvent): void; // Maps to 'dblclick'\n  onMouseDown?(e: MouseEvent): void;\n  onMouseUp?(e: MouseEvent): void;\n  onMouseEnter?(e: MouseEvent): void;\n  onMouseLeave?(e: MouseEvent): void;\n  onMouseMove?(e: MouseEvent): void;\n  onMouseOver?(e: MouseEvent): void;\n  onMouseOut?(e: MouseEvent): void;\n  onContextMenu?(e: MouseEvent): void;\n\n  // Keyboard\n  onKeyDown?(e: KeyboardEvent): void;\n  onKeyUp?(e: KeyboardEvent): void;\n  onKeyPress?(e: KeyboardEvent): void;\n\n  // Form / Input\n  onInput?(e: Event): void;\n  onChange?(e: Event): void;\n  onSubmit?(e: SubmitEvent): void;\n  onFocus?(e: FocusEvent): void;\n  onBlur?(e: FocusEvent): void;\n  onReset?(e: Event): void;\n  onInvalid?(e: Event): void;\n  onSelect?(e: Event): void;\n\n  // Drag & Drop\n  onDrag?(e: DragEvent): void;\n  onDragEnd?(e: DragEvent): void;\n  onDragEnter?(e: DragEvent): void;\n  onDragLeave?(e: DragEvent): void;\n  onDragOver?(e: DragEvent): void;\n  onDragStart?(e: DragEvent): void;\n  onDrop?(e: DragEvent): void;\n\n  // Clipboard\n  onCopy?(e: ClipboardEvent): void;\n  onCut?(e: ClipboardEvent): void;\n  onPaste?(e: ClipboardEvent): void;\n\n  // UI / Window\n  onScroll?(e: Event): void;\n  onResize?(e: UIEvent): void;\n  onWheel?(e: WheelEvent): void;\n\n  // Media\n  onLoad?(e: Event): void;\n  onError?(e: ErrorEvent): void;\n  onPlay?(e: Event): void;\n  onPause?(e: Event): void;\n  onEnded?(e: Event): void;\n\n  // Details/Dialog\n  onToggle?(e: Event): void;\n}\n\n// --- 3. Internal Logic ---\n\nfunction isEventInterceptorMethod(method: string): boolean {\n  return /^on[A-Z]/.test(method);\n}\n\nfunction getEventName(methodName: string): string {\n  // Simple rule: strip 'on' and lowercase the rest\n  // onClick -> click\n  // onDblClick -> dblclick\n  // onMouseDown -> mousedown\n  return methodName.substring(2).toLowerCase();\n}\n\n/**\n * Mixin that adds auto event wiring to a base class.\n */\nfunction withAutoEvents<T extends Constructor<HTMLElement>>(Base: T) {\n  // @ts-expect-error - Dynamic class extension\n  class AutoElement extends Base implements EventInterceptors {\n    private _cleanupFns: Array<() => void> = [];\n\n    connectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.connectedCallback) super.connectedCallback();\n      this._wireAndLockEvents();\n    }\n\n    disconnectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.disconnectedCallback) super.disconnectedCallback();\n      this._unwireEvents();\n    }\n\n    private _wireAndLockEvents() {\n      // Scan the prototype chain for methods starting with 'on'\n      const hostMethods = new Set<string>();\n      let curr = this;\n\n      // Walk up prototype chain to find methods\n      while (curr && curr !== Object.prototype) {\n        Object.getOwnPropertyNames(curr).forEach((prop) => {\n          if (isEventInterceptorMethod(prop)) hostMethods.add(prop);\n        });\n        curr = Object.getPrototypeOf(curr);\n      }\n\n      for (const method of hostMethods) {\n        const eventName = getEventName(method);\n        const originalHostFn = this[method as keyof typeof this];\n\n        if (typeof originalHostFn !== \"function\") continue;\n\n        // 1. Wire the event\n        const handler = originalHostFn.bind(this) as EventListener;\n        this.addEventListener(eventName, handler);\n        this._cleanupFns.push(() => {\n          this.removeEventListener(eventName, handler);\n        });\n\n        // 2. Lock the property to prevent runtime reassignment\n        Object.defineProperty(this, method, {\n          value: originalHostFn,\n          writable: false,\n          configurable: true,\n        });\n      }\n    }\n\n    private _unwireEvents() {\n      for (const cleanup of this._cleanupFns) {\n        cleanup();\n      }\n      this._cleanupFns = [];\n    }\n  }\n\n  return AutoElement as unknown as T & Constructor<EventInterceptors>;\n}\n\n// --- 4. Public API ---\n\n/**\n * Defines a type-safe Web Component with auto event handling.\n *\n * @param tagName - The custom element tag name (e.g., 'my-button')\n * @param extendsTag - The HTML tag to extend (e.g., 'button', 'div')\n * @param factory - A function that receives the Base class and returns your implementation\n * @param options - Optional configuration (observedAttributes, etc.)\n */\nexport function defineAutoWebComponent<\n  T extends TagName,\n  ObservedAttributes extends string[] = string[],\n>(\n  tagName: string,\n  extendsTag: T,\n  factory: (\n    base: Constructor<TagClass<T> & EventInterceptors>,\n  ) => Constructor<TagClass<T>> & { observedAttributes?: ObservedAttributes },\n  options: AutoWebComponentOptions<ObservedAttributes> = {},\n): void {\n  const BaseClass = document.createElement(extendsTag)\n    .constructor as Constructor<TagClass<T>>;\n  const ImplementationClass = factory(withAutoEvents(BaseClass));\n\n  if (customElements.get(tagName)) {\n    console.warn(`Custom element ${tagName} is already registered`);\n    return;\n  }\n\n  if (options.observedAttributes) {\n    ImplementationClass.observedAttributes = options.observedAttributes;\n  }\n\n  customElements.define(tagName, ImplementationClass, {\n    extends: extendsTag,\n  });\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4BAAAE,IAAA,eAAAC,EAAAH,GA+FA,SAASI,EAAyBC,EAAyB,CACzD,MAAO,WAAW,KAAKA,CAAM,CAC/B,CAEA,SAASC,EAAaC,EAA4B,CAKhD,OAAOA,EAAW,UAAU,CAAC,EAAE,YAAY,CAC7C,CAKA,SAASC,EAAmDC,EAAS,CAEnE,MAAMC,UAAoBD,CAAkC,CAClD,YAAiC,CAAC,EAE1C,mBAAoB,CAEd,MAAM,mBAAmB,MAAM,kBAAkB,EACrD,KAAK,mBAAmB,CAC1B,CAEA,sBAAuB,CAEjB,MAAM,sBAAsB,MAAM,qBAAqB,EAC3D,KAAK,cAAc,CACrB,CAEQ,oBAAqB,CAE3B,IAAME,EAAc,IAAI,IACpBC,EAAO,KAGX,KAAOA,GAAQA,IAAS,OAAO,WAC7B,OAAO,oBAAoBA,CAAI,EAAE,QAASC,GAAS,CAC7CT,EAAyBS,CAAI,GAAGF,EAAY,IAAIE,CAAI,CAC1D,CAAC,EACDD,EAAO,OAAO,eAAeA,CAAI,EAGnC,QAAWP,KAAUM,EAAa,CAChC,IAAMG,EAAYR,EAAaD,CAAM,EAC/BU,EAAiB,KAAKV,CAA2B,EAEvD,GAAI,OAAOU,GAAmB,WAAY,SAG1C,IAAMC,EAAUD,EAAe,KAAK,IAAI,EACxC,KAAK,iBAAiBD,EAAWE,CAAO,EACxC,KAAK,YAAY,KAAK,IAAM,CAC1B,KAAK,oBAAoBF,EAAWE,CAAO,CAC7C,CAAC,EAGD,OAAO,eAAe,KAAMX,EAAQ,CAClC,MAAOU,EACP,SAAU,GACV,aAAc,EAChB,CAAC,CACH,CACF,CAEQ,eAAgB,CACtB,QAAWE,KAAW,KAAK,YACzBA,EAAQ,EAEV,KAAK,YAAc,CAAC,CACtB,CACF,CAEA,OAAOP,CACT,CAYO,SAASR,EAIdgB,EACAC,EACAC,EAGAC,EAAuD,CAAC,EAClD,CACN,IAAMC,EAAY,SAAS,cAAcH,CAAU,EAChD,YACGI,EAAsBH,EAAQZ,EAAec,CAAS,CAAC,EAE7D,GAAI,eAAe,IAAIJ,CAAO,EAAG,CAC/B,QAAQ,KAAK,kBAAkBA,CAAO,wBAAwB,EAC9D,MACF,CAEIG,EAAQ,qBACVE,EAAoB,mBAAqBF,EAAQ,oBAGnD,eAAe,OAAOH,EAASK,EAAqB,CAClD,QAASJ,CACX,CAAC,CACH","names":["index_exports","__export","defineAutoWebComponent","__toCommonJS","isEventInterceptorMethod","method","getEventName","methodName","withAutoEvents","Base","AutoElement","hostMethods","curr","prop","eventName","originalHostFn","handler","cleanup","tagName","extendsTag","factory","options","BaseClass","ImplementationClass"]}

package/dist/index.min.js

@@ -0,0 +1,6 @@
+function d(e){return/^on[A-Z]/.test(e)}function u(e){return e.substring(2).toLowerCase()}function c(e){class s extends e{_cleanupFns=[];connectedCallback(){super.connectedCallback&&super.connectedCallback(),this._wireAndLockEvents()}disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),this._unwireEvents()}_wireAndLockEvents(){let n=new Set,o=this;for(;o&&o!==Object.prototype;)Object.getOwnPropertyNames(o).forEach(t=>{d(t)&&n.add(t)}),o=Object.getPrototypeOf(o);for(let t of n){let v=u(t),r=this[t];if(typeof r!="function")continue;let a=r.bind(this);this.addEventListener(v,a),this._cleanupFns.push(()=>{this.removeEventListener(v,a)}),Object.defineProperty(this,t,{value:r,writable:!1,configurable:!0})}}_unwireEvents(){for(let n of this._cleanupFns)n();this._cleanupFns=[]}}return s}function E(e,s,i,n={}){let o=document.createElement(s).constructor,t=i(c(o));if(customElements.get(e)){console.warn(`Custom element ${e} is already registered`);return}n.observedAttributes&&(t.observedAttributes=n.observedAttributes),customElements.define(e,t,{extends:s})}export{E as defineAutoWebComponent};
+/**
+ * @license MIT
+ * Auto Web Component - Type-safe Web Components with automatic event wiring.
+ */
+//# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @license MIT\n * Auto Web Component - Type-safe Web Components with automatic event wiring.\n */\n\n// --- 1. Standard DOM Type Helpers ---\n\n/**\n * Represents any valid HTML tag name (e.g., 'div', 'button', 'input').\n */\nexport type TagName = keyof HTMLElementTagNameMap;\n\n/**\n * Maps a tag name to its specific HTMLElement class.\n * e.g., TagClass<'button'> resolves to HTMLButtonElement.\n */\nexport type TagClass<T extends TagName> = HTMLElementTagNameMap[T];\n\nexport type Constructor<T = {}> = new (...args: any[]) => T;\n\nexport interface AutoWebComponentOptions<\n  ObservedAttributes extends string[] = string[],\n> {\n  observedAttributes?: ObservedAttributes;\n}\n\n// --- 2. Event System Configuration ---\n\n/**\n * Interface defining all supported event interceptors.\n * Implement these methods in your class to automatically handle events.\n *\n * Naming Convention: on{EventName} -> eventname\n * Example: onClick -> click, onMouseDown -> mousedown, onDblClick -> dblclick\n */\nexport interface EventInterceptors {\n  // Mouse\n  onClick?(e: MouseEvent): void;\n  onDblClick?(e: MouseEvent): void; // Maps to 'dblclick'\n  onMouseDown?(e: MouseEvent): void;\n  onMouseUp?(e: MouseEvent): void;\n  onMouseEnter?(e: MouseEvent): void;\n  onMouseLeave?(e: MouseEvent): void;\n  onMouseMove?(e: MouseEvent): void;\n  onMouseOver?(e: MouseEvent): void;\n  onMouseOut?(e: MouseEvent): void;\n  onContextMenu?(e: MouseEvent): void;\n\n  // Keyboard\n  onKeyDown?(e: KeyboardEvent): void;\n  onKeyUp?(e: KeyboardEvent): void;\n  onKeyPress?(e: KeyboardEvent): void;\n\n  // Form / Input\n  onInput?(e: Event): void;\n  onChange?(e: Event): void;\n  onSubmit?(e: SubmitEvent): void;\n  onFocus?(e: FocusEvent): void;\n  onBlur?(e: FocusEvent): void;\n  onReset?(e: Event): void;\n  onInvalid?(e: Event): void;\n  onSelect?(e: Event): void;\n\n  // Drag & Drop\n  onDrag?(e: DragEvent): void;\n  onDragEnd?(e: DragEvent): void;\n  onDragEnter?(e: DragEvent): void;\n  onDragLeave?(e: DragEvent): void;\n  onDragOver?(e: DragEvent): void;\n  onDragStart?(e: DragEvent): void;\n  onDrop?(e: DragEvent): void;\n\n  // Clipboard\n  onCopy?(e: ClipboardEvent): void;\n  onCut?(e: ClipboardEvent): void;\n  onPaste?(e: ClipboardEvent): void;\n\n  // UI / Window\n  onScroll?(e: Event): void;\n  onResize?(e: UIEvent): void;\n  onWheel?(e: WheelEvent): void;\n\n  // Media\n  onLoad?(e: Event): void;\n  onError?(e: ErrorEvent): void;\n  onPlay?(e: Event): void;\n  onPause?(e: Event): void;\n  onEnded?(e: Event): void;\n\n  // Details/Dialog\n  onToggle?(e: Event): void;\n}\n\n// --- 3. Internal Logic ---\n\nfunction isEventInterceptorMethod(method: string): boolean {\n  return /^on[A-Z]/.test(method);\n}\n\nfunction getEventName(methodName: string): string {\n  // Simple rule: strip 'on' and lowercase the rest\n  // onClick -> click\n  // onDblClick -> dblclick\n  // onMouseDown -> mousedown\n  return methodName.substring(2).toLowerCase();\n}\n\n/**\n * Mixin that adds auto event wiring to a base class.\n */\nfunction withAutoEvents<T extends Constructor<HTMLElement>>(Base: T) {\n  // @ts-expect-error - Dynamic class extension\n  class AutoElement extends Base implements EventInterceptors {\n    private _cleanupFns: Array<() => void> = [];\n\n    connectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.connectedCallback) super.connectedCallback();\n      this._wireAndLockEvents();\n    }\n\n    disconnectedCallback() {\n      // @ts-expect-error - super access in mixin\n      if (super.disconnectedCallback) super.disconnectedCallback();\n      this._unwireEvents();\n    }\n\n    private _wireAndLockEvents() {\n      // Scan the prototype chain for methods starting with 'on'\n      const hostMethods = new Set<string>();\n      let curr = this;\n\n      // Walk up prototype chain to find methods\n      while (curr && curr !== Object.prototype) {\n        Object.getOwnPropertyNames(curr).forEach((prop) => {\n          if (isEventInterceptorMethod(prop)) hostMethods.add(prop);\n        });\n        curr = Object.getPrototypeOf(curr);\n      }\n\n      for (const method of hostMethods) {\n        const eventName = getEventName(method);\n        const originalHostFn = this[method as keyof typeof this];\n\n        if (typeof originalHostFn !== \"function\") continue;\n\n        // 1. Wire the event\n        const handler = originalHostFn.bind(this) as EventListener;\n        this.addEventListener(eventName, handler);\n        this._cleanupFns.push(() => {\n          this.removeEventListener(eventName, handler);\n        });\n\n        // 2. Lock the property to prevent runtime reassignment\n        Object.defineProperty(this, method, {\n          value: originalHostFn,\n          writable: false,\n          configurable: true,\n        });\n      }\n    }\n\n    private _unwireEvents() {\n      for (const cleanup of this._cleanupFns) {\n        cleanup();\n      }\n      this._cleanupFns = [];\n    }\n  }\n\n  return AutoElement as unknown as T & Constructor<EventInterceptors>;\n}\n\n// --- 4. Public API ---\n\n/**\n * Defines a type-safe Web Component with auto event handling.\n *\n * @param tagName - The custom element tag name (e.g., 'my-button')\n * @param extendsTag - The HTML tag to extend (e.g., 'button', 'div')\n * @param factory - A function that receives the Base class and returns your implementation\n * @param options - Optional configuration (observedAttributes, etc.)\n */\nexport function defineAutoWebComponent<\n  T extends TagName,\n  ObservedAttributes extends string[] = string[],\n>(\n  tagName: string,\n  extendsTag: T,\n  factory: (\n    base: Constructor<TagClass<T> & EventInterceptors>,\n  ) => Constructor<TagClass<T>> & { observedAttributes?: ObservedAttributes },\n  options: AutoWebComponentOptions<ObservedAttributes> = {},\n): void {\n  const BaseClass = document.createElement(extendsTag)\n    .constructor as Constructor<TagClass<T>>;\n  const ImplementationClass = factory(withAutoEvents(BaseClass));\n\n  if (customElements.get(tagName)) {\n    console.warn(`Custom element ${tagName} is already registered`);\n    return;\n  }\n\n  if (options.observedAttributes) {\n    ImplementationClass.observedAttributes = options.observedAttributes;\n  }\n\n  customElements.define(tagName, ImplementationClass, {\n    extends: extendsTag,\n  });\n}\n"],"mappings":"AA+FA,SAASA,EAAyBC,EAAyB,CACzD,MAAO,WAAW,KAAKA,CAAM,CAC/B,CAEA,SAASC,EAAaC,EAA4B,CAKhD,OAAOA,EAAW,UAAU,CAAC,EAAE,YAAY,CAC7C,CAKA,SAASC,EAAmDC,EAAS,CAEnE,MAAMC,UAAoBD,CAAkC,CAClD,YAAiC,CAAC,EAE1C,mBAAoB,CAEd,MAAM,mBAAmB,MAAM,kBAAkB,EACrD,KAAK,mBAAmB,CAC1B,CAEA,sBAAuB,CAEjB,MAAM,sBAAsB,MAAM,qBAAqB,EAC3D,KAAK,cAAc,CACrB,CAEQ,oBAAqB,CAE3B,IAAME,EAAc,IAAI,IACpBC,EAAO,KAGX,KAAOA,GAAQA,IAAS,OAAO,WAC7B,OAAO,oBAAoBA,CAAI,EAAE,QAASC,GAAS,CAC7CT,EAAyBS,CAAI,GAAGF,EAAY,IAAIE,CAAI,CAC1D,CAAC,EACDD,EAAO,OAAO,eAAeA,CAAI,EAGnC,QAAWP,KAAUM,EAAa,CAChC,IAAMG,EAAYR,EAAaD,CAAM,EAC/BU,EAAiB,KAAKV,CAA2B,EAEvD,GAAI,OAAOU,GAAmB,WAAY,SAG1C,IAAMC,EAAUD,EAAe,KAAK,IAAI,EACxC,KAAK,iBAAiBD,EAAWE,CAAO,EACxC,KAAK,YAAY,KAAK,IAAM,CAC1B,KAAK,oBAAoBF,EAAWE,CAAO,CAC7C,CAAC,EAGD,OAAO,eAAe,KAAMX,EAAQ,CAClC,MAAOU,EACP,SAAU,GACV,aAAc,EAChB,CAAC,CACH,CACF,CAEQ,eAAgB,CACtB,QAAWE,KAAW,KAAK,YACzBA,EAAQ,EAEV,KAAK,YAAc,CAAC,CACtB,CACF,CAEA,OAAOP,CACT,CAYO,SAASQ,EAIdC,EACAC,EACAC,EAGAC,EAAuD,CAAC,EAClD,CACN,IAAMC,EAAY,SAAS,cAAcH,CAAU,EAChD,YACGI,EAAsBH,EAAQb,EAAee,CAAS,CAAC,EAE7D,GAAI,eAAe,IAAIJ,CAAO,EAAG,CAC/B,QAAQ,KAAK,kBAAkBA,CAAO,wBAAwB,EAC9D,MACF,CAEIG,EAAQ,qBACVE,EAAoB,mBAAqBF,EAAQ,oBAGnD,eAAe,OAAOH,EAASK,EAAqB,CAClD,QAASJ,CACX,CAAC,CACH","names":["isEventInterceptorMethod","method","getEventName","methodName","withAutoEvents","Base","AutoElement","hostMethods","curr","prop","eventName","originalHostFn","handler","cleanup","defineAutoWebComponent","tagName","extendsTag","factory","options","BaseClass","ImplementationClass"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "auto-wc",
+  "version": "0.1.0",
+  "description": "Type-safe Web Components with automatic event wiring",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "web-components",
+    "typescript",
+    "strict-events",
+    "custom-elements"
+  ],
+  "author": "Sagi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/auto-wc.git"
+  },
+  "devDependencies": {
+    "jsdom": "^28.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "peerDependencies": {
+    "typescript": ">=5.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,211 @@
+/**
+ * @license MIT
+ * Auto Web Component - Type-safe Web Components with automatic event wiring.
+ */
+
+// --- 1. Standard DOM Type Helpers ---
+
+/**
+ * Represents any valid HTML tag name (e.g., 'div', 'button', 'input').
+ */
+export type TagName = keyof HTMLElementTagNameMap;
+
+/**
+ * Maps a tag name to its specific HTMLElement class.
+ * e.g., TagClass<'button'> resolves to HTMLButtonElement.
+ */
+export type TagClass<T extends TagName> = HTMLElementTagNameMap[T];
+
+export type Constructor<T = {}> = new (...args: any[]) => T;
+
+export interface AutoWebComponentOptions<
+  ObservedAttributes extends string[] = string[],
+> {
+  observedAttributes?: ObservedAttributes;
+}
+
+// --- 2. Event System Configuration ---
+
+/**
+ * Interface defining all supported event interceptors.
+ * Implement these methods in your class to automatically handle events.
+ *
+ * Naming Convention: on{EventName} -> eventname
+ * Example: onClick -> click, onMouseDown -> mousedown, onDblClick -> dblclick
+ */
+export interface EventInterceptors {
+  // Mouse
+  onClick?(e: MouseEvent): void;
+  onDblClick?(e: MouseEvent): void; // Maps to 'dblclick'
+  onMouseDown?(e: MouseEvent): void;
+  onMouseUp?(e: MouseEvent): void;
+  onMouseEnter?(e: MouseEvent): void;
+  onMouseLeave?(e: MouseEvent): void;
+  onMouseMove?(e: MouseEvent): void;
+  onMouseOver?(e: MouseEvent): void;
+  onMouseOut?(e: MouseEvent): void;
+  onContextMenu?(e: MouseEvent): void;
+
+  // Keyboard
+  onKeyDown?(e: KeyboardEvent): void;
+  onKeyUp?(e: KeyboardEvent): void;
+  onKeyPress?(e: KeyboardEvent): void;
+
+  // Form / Input
+  onInput?(e: Event): void;
+  onChange?(e: Event): void;
+  onSubmit?(e: SubmitEvent): void;
+  onFocus?(e: FocusEvent): void;
+  onBlur?(e: FocusEvent): void;
+  onReset?(e: Event): void;
+  onInvalid?(e: Event): void;
+  onSelect?(e: Event): void;
+
+  // Drag & Drop
+  onDrag?(e: DragEvent): void;
+  onDragEnd?(e: DragEvent): void;
+  onDragEnter?(e: DragEvent): void;
+  onDragLeave?(e: DragEvent): void;
+  onDragOver?(e: DragEvent): void;
+  onDragStart?(e: DragEvent): void;
+  onDrop?(e: DragEvent): void;
+
+  // Clipboard
+  onCopy?(e: ClipboardEvent): void;
+  onCut?(e: ClipboardEvent): void;
+  onPaste?(e: ClipboardEvent): void;
+
+  // UI / Window
+  onScroll?(e: Event): void;
+  onResize?(e: UIEvent): void;
+  onWheel?(e: WheelEvent): void;
+
+  // Media
+  onLoad?(e: Event): void;
+  onError?(e: ErrorEvent): void;
+  onPlay?(e: Event): void;
+  onPause?(e: Event): void;
+  onEnded?(e: Event): void;
+
+  // Details/Dialog
+  onToggle?(e: Event): void;
+}
+
+// --- 3. Internal Logic ---
+
+function isEventInterceptorMethod(method: string): boolean {
+  return /^on[A-Z]/.test(method);
+}
+
+function getEventName(methodName: string): string {
+  // Simple rule: strip 'on' and lowercase the rest
+  // onClick -> click
+  // onDblClick -> dblclick
+  // onMouseDown -> mousedown
+  return methodName.substring(2).toLowerCase();
+}
+
+/**
+ * Mixin that adds auto event wiring to a base class.
+ */
+function withAutoEvents<T extends Constructor<HTMLElement>>(Base: T) {
+  // @ts-expect-error - Dynamic class extension
+  class AutoElement extends Base implements EventInterceptors {
+    private _cleanupFns: Array<() => void> = [];
+
+    connectedCallback() {
+      // @ts-expect-error - super access in mixin
+      if (super.connectedCallback) super.connectedCallback();
+      this._wireAndLockEvents();
+    }
+
+    disconnectedCallback() {
+      // @ts-expect-error - super access in mixin
+      if (super.disconnectedCallback) super.disconnectedCallback();
+      this._unwireEvents();
+    }
+
+    private _wireAndLockEvents() {
+      // Scan the prototype chain for methods starting with 'on'
+      const hostMethods = new Set<string>();
+      let curr = this;
+
+      // Walk up prototype chain to find methods
+      while (curr && curr !== Object.prototype) {
+        Object.getOwnPropertyNames(curr).forEach((prop) => {
+          if (isEventInterceptorMethod(prop)) hostMethods.add(prop);
+        });
+        curr = Object.getPrototypeOf(curr);
+      }
+
+      for (const method of hostMethods) {
+        const eventName = getEventName(method);
+        const originalHostFn = this[method as keyof typeof this];
+
+        if (typeof originalHostFn !== "function") continue;
+
+        // 1. Wire the event
+        const handler = originalHostFn.bind(this) as EventListener;
+        this.addEventListener(eventName, handler);
+        this._cleanupFns.push(() => {
+          this.removeEventListener(eventName, handler);
+        });
+
+        // 2. Lock the property to prevent runtime reassignment
+        Object.defineProperty(this, method, {
+          value: originalHostFn,
+          writable: false,
+          configurable: true,
+        });
+      }
+    }
+
+    private _unwireEvents() {
+      for (const cleanup of this._cleanupFns) {
+        cleanup();
+      }
+      this._cleanupFns = [];
+    }
+  }
+
+  return AutoElement as unknown as T & Constructor<EventInterceptors>;
+}
+
+// --- 4. Public API ---
+
+/**
+ * Defines a type-safe Web Component with auto event handling.
+ *
+ * @param tagName - The custom element tag name (e.g., 'my-button')
+ * @param extendsTag - The HTML tag to extend (e.g., 'button', 'div')
+ * @param factory - A function that receives the Base class and returns your implementation
+ * @param options - Optional configuration (observedAttributes, etc.)
+ */
+export function defineAutoWebComponent<
+  T extends TagName,
+  ObservedAttributes extends string[] = string[],
+>(
+  tagName: string,
+  extendsTag: T,
+  factory: (
+    base: Constructor<TagClass<T> & EventInterceptors>,
+  ) => Constructor<TagClass<T>> & { observedAttributes?: ObservedAttributes },
+  options: AutoWebComponentOptions<ObservedAttributes> = {},
+): void {
+  const BaseClass = document.createElement(extendsTag)
+    .constructor as Constructor<TagClass<T>>;
+  const ImplementationClass = factory(withAutoEvents(BaseClass));
+
+  if (customElements.get(tagName)) {
+    console.warn(`Custom element ${tagName} is already registered`);
+    return;
+  }
+
+  if (options.observedAttributes) {
+    ImplementationClass.observedAttributes = options.observedAttributes;
+  }
+
+  customElements.define(tagName, ImplementationClass, {
+    extends: extendsTag,
+  });
+}