refactor: Switch to es6 classes

Author: rschristian

src/index.d.ts

@@ -52,4 +52,6 @@ export default function register<P = {}, S = {}>(
 	tagName?: string,
 	propNames?: (keyof P)[],
 	options?: Options
-): HTMLElement;
+): typeof HTMLElement & {
+	new (): HTMLElement;
+};

src/index.js

@@ -8,43 +8,57 @@ import { h, cloneElement, render, hydrate } from 'preact';
  * @type {import('./index.d.ts').default}
  */
 export default function register(Component, tagName, propNames, options) {
-	function PreactElement() {
-		const inst = /** @type {PreactCustomElement} */ (
-			Reflect.construct(HTMLElement, [], PreactElement)
-		);
-		inst._vdomComponent = Component;
-
-		if (options && options.shadow) {
-			inst._root = inst.attachShadow({
-				mode: options.mode || 'open',
-				serializable: options.serializable ?? false,
-			});
-
-			if (options.adoptedStyleSheets) {
-				inst._root.adoptedStyleSheets = options.adoptedStyleSheets;
+	propNames ??= Component.observedAttributes || [];
+
+	class PreactElement extends HTMLElement {
+		static formAssociated = Component.formAssociated || false;
+		static observedAttributes = propNames;
+
+		constructor() {
+			super();
+
+			this._vdomComponent = Component;
+			if (options && options.shadow) {
+				this._root = this.attachShadow({
+					mode: options.mode || 'open',
+					serializable: options.serializable ?? false,
+				});
+
+				if (options.adoptedStyleSheets) {
+					this._root.adoptedStyleSheets = options.adoptedStyleSheets;
+				}
+			} else {
+				this._root = this;
 			}
-		} else {
-			inst._root = inst;
 		}
 
-		return inst;
-	}
-	PreactElement.prototype = Object.create(HTMLElement.prototype);
-	PreactElement.prototype.constructor = PreactElement;
-	PreactElement.prototype.connectedCallback = function () {
-		connectedCallback.call(this, options);
-	};
-	PreactElement.prototype.attributeChangedCallback = attributeChangedCallback;
-	PreactElement.prototype.disconnectedCallback = disconnectedCallback;
+		connectedCallback() {
+			connectedCallback.call(this, options);
+		}
 
-	/**
-	 * @type {string[]}
-	 */
-	propNames = propNames || Component.observedAttributes || [];
-	PreactElement.observedAttributes = propNames;
+		/**
+		 * Changed whenever an attribute of the HTML element changed
+		 *
+		 * @param {string} name The attribute name
+		 * @param {unknown} oldValue The old value or undefined
+		 * @param {unknown} newValue The new value
+		 */
+		attributeChangedCallback(name, oldValue, newValue) {
+			if (!this._vdom) return;
+			// Attributes use `null` as an empty value whereas `undefined` is more
+			// common in pure JS components, especially with default parameters.
+			// When calling `node.removeAttribute()` we'll receive `null` as the new
+			// value. See issue #50.
+			newValue = newValue == null ? undefined : newValue;
+			const props = {};
+			props[name] = newValue;
+			this._vdom = cloneElement(this._vdom, props);
+			render(this._vdom, this._root);
+		}
 
-	if (Component.formAssociated) {
-		PreactElement.formAssociated = true;
+		disconnectedCallback() {
+			render((this._vdom = null), this._root);
+		}
 	}
 
 	// Keep DOM properties and Preact props in sync
@@ -115,33 +129,6 @@ function connectedCallback(options) {
 	(this.hasAttribute('hydrate') ? hydrate : render)(this._vdom, this._root);
 }
 
-/**
- * Changed whenver an attribute of the HTML element changed
- * @this {PreactCustomElement}
- * @param {string} name The attribute name
- * @param {unknown} oldValue The old value or undefined
- * @param {unknown} newValue The new value
- */
-function attributeChangedCallback(name, oldValue, newValue) {
-	if (!this._vdom) return;
-	// Attributes use `null` as an empty value whereas `undefined` is more
-	// common in pure JS components, especially with default parameters.
-	// When calling `node.removeAttribute()` we'll receive `null` as the new
-	// value. See issue #50.
-	newValue = newValue == null ? undefined : newValue;
-	const props = {};
-	props[name] = newValue;
-	this._vdom = cloneElement(this._vdom, props);
-	render(this._vdom, this._root);
-}
-
-/**
- * @this {PreactCustomElement}
- */
-function disconnectedCallback() {
-	render((this._vdom = null), this._root);
-}
-
 /**
  * Pass an event listener to each `<slot>` that "forwards" the current
  * context value to the rendered child. The child will trigger a custom