vivth 1.4.10 → 1.5.0

package/src/web/WC_extendsA.mjs

@@ -0,0 +1,330 @@
+// @ts-check
+
+// import { Signal } from '../class/Signal.mjs';
+import { WalkThrough } from '../class/WalkThrough.mjs';
+import { ForInSync } from '../function/ForInSync.mjs';
+import { ForOfSync } from '../function/ForOfSync.mjs';
+import { IsTypeOf } from '../function/IsTypeOf.mjs';
+import { WC_createElement_bind } from './bindings/WC_createElement_bind.mjs';
+import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
+
+/**
+ * @import {ArrayToKeys} from '../typehints/ArrayToKeys.mjs'
+ * @import {WC_TagName_type} from './common/WC_TagName_type.mjs'
+ */
+/**
+ * @typedef {typeof import('../function/IsTypeOf.mjs').TypeMap} TypeMap
+ */
+/**
+ * @description
+ * - Generates a base class for Web Component definitions.
+ * - Note: This generator does not support `connectedMoveCallback`.
+ * For the needs of opting in to [connectedMoveCallback](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) functionality, use [WC_extendsB](#wc_extendsb) instead.
+ * - This class relies heavily on complex type inference which can cause issues, during declaration file generation. To avoid "circular type" errors or build failures, set the following in your `tsconfig.json`:
+ * ```json
+ * {
+ * 	"compilerOptions": {
+ * 		"declaration": false
+ * 	}
+ * }
+ * ```
+ * - By disabling `declaration`, you prevent the TypeScript compiler from attempting to resolve and export the complex recursive type definitions generated by this factory;
+ * @template {new (...args: any[]) => HTMLElement} BASE_CONSTRUCTOR
+ * @template {{
+ * 	class?:string;
+ * 	style?:string;
+ *  observedAttributes?: readonly string[];
+ *  namedSlots?: readonly string[];
+ * 	props?: Record<string, keyof TypeMap|(new (...args:any[])=>any)>;
+ * }} STANDARD
+ * @template {(BASE_CONSTRUCTOR) & {
+ * 	tagName: string;
+ * 	extendIs: string;
+ * 	observedAttributes?: STANDARD["observedAttributes"];
+ * 	namedSlots?: STANDARD["namedSlots"];
+ * 	props?: STANDARD["props"];
+ * }} CREATEARGS
+ * @template { (new (...args: any[]) => InstanceType<BASE_CONSTRUCTOR> & {
+ * 		setObservedAttributes(attributes:Partial<
+ * 			Record<ArrayToKeys<STANDARD["observedAttributes"]extends readonly string[]
+ * 				? STANDARD["observedAttributes"]
+ * 				:never>,
+ * 			string>
+ * 		>):void;
+ * 		props: NonNullable<NonNullable<Parameters<ReturnType<typeof WC_createElement_bind<CREATEARGS>>>[0]>["props"]>;
+ *    adoptedCallback():void;
+ *    connectedCallback():void;
+ *    disonnectedCallback():void;
+ * 		attributeChangedCallback(name:ArrayToKeys<STANDARD["observedAttributes"]extends readonly string[]?STANDARD["observedAttributes"]:never>, oldValue:string|null, newValue:string|null): void;
+ * 		ON:<OBJ extends Record<any, any> & {
+ * 				onConnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["connected"];
+ * 				onDisconnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["disconnected"];
+ * 				onAdopted?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["adopted"];
+ * 				onAttributeChanged?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["attributeChanged"];
+ * 			}>
+ * 		(obj:OBJ, callbacks?:
+ * 			{
+ * 				connected?:(obj:OBJ)=>void;
+ * 				disconnected?:(obj:OBJ)=>void;
+ * 				adopted?:(obj:OBJ)=>void;
+ * 				attributeChanged?:(
+ * 					obj:OBJ,
+ * 					name:STANDARD["observedAttributes"]extends readonly string[]
+ * 						? ArrayToKeys<STANDARD["observedAttributes"]>
+ * 						: never,
+ * 					oldValue:string|null,
+ * 					newValue:string|null
+ * 				)=>void;
+ * 			})=>OBJ;
+ *  }) & {
+ * 		tagName:string;
+ * 		extendIs:string;
+ *  	namedSlots: STANDARD["namedSlots"];
+ *  	observedAttributes: STANDARD["observedAttributes"];
+ * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
+ * 		props?: STANDARD["props"];
+ * 		define:<TAG extends string, CLASSREF extends CREATEARGS>
+ * 			(
+ * 				tagName:WC_TagName_type<TAG>,
+ * 				classRef:CLASSREF,
+ * 				elementDefinitionOptions?:ElementDefinitionOptions,
+ * 			)=>ReturnType<typeof WC_createElement_bind<CLASSREF>>;
+ * 	}
+ * } RET
+ * @param {BASE_CONSTRUCTOR} Base
+ * @param {STANDARD} [staticMember]
+ * @returns {RET}
+ * @example
+ * export MyWebComponent extends WC_extendsA(HTMLElement, {...options}){
+ * 	static create = this.define('my-webcomponent');
+ * }
+ */
+export function WC_extendsA(Base, staticMember = /** @type {any} */ ({})) {
+	const { class: class_ = '', style = '', observedAttributes = [], namedSlots = [] } = staticMember;
+	class MyClass extends Base {
+		static observedAttributes = observedAttributes;
+
+		/**
+		 * @description
+		 * - props objects from define -> createElement;
+		 * @type {STANDARD["props"]}
+		 */
+		props = {};
+
+		/** @type {Set<()=>void>} */
+		#setOfConnected = new Set();
+		/** @type {Set<()=>void>} */
+		#setOfDisconnected = new Set();
+		/** @type {Set<()=>void>} */
+		#setOfAdopted = new Set();
+		/** @type {Set<(name:string, oldValue:string|null, newValue:string|null)=>void>} */
+		#setOfAttributeChanged = new Set();
+
+		/**
+		 * @description
+		 * - wrapper helper to handle returned to be assigned property on `WebComponent` lifecycle callbacks;
+		 * @template {Record<any, any>} OBJ
+		 * @param {OBJ & {
+		 * 	onConnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["connected"];
+		 * 	onDisconnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["disconnected"];
+		 * 	onAdopted?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["adopted"];
+		 * 	onAttributeChanged?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["attributeChanged"];
+		 * }} obj
+		 * @param {Object} [callbacks]
+		 * @param {(obj:OBJ)=>void} [callbacks.connected]
+		 * @param {(obj:OBJ)=>void} [callbacks.disconnected]
+		 * @param {(obj:OBJ)=>void} [callbacks.adopted]
+		 * @param {(
+		 * 	obj:OBJ,
+		 * 	name:STANDARD["observedAttributes"]extends readonly string[]
+		 * 		? ArrayToKeys<STANDARD["observedAttributes"]>
+		 * 		: never,
+		 * 	oldValue:string|null,
+		 * 	newValue:string|null
+		 * )=>void} [callbacks.attributeChanged]
+		 * @returns {OBJ}
+		 * @example
+		 * // inside WebComponent context
+		 * #mySignal = this.ON(createSignalFromExternalLib(0),{
+		 * 	disconnected:(s)=>{
+		 * 		s.cleanup(); // <-or any equivalent;
+		 * 	},
+		 * });
+		 * //
+		 */
+		ON(obj, callbacks = {}) {
+			const { connected, disconnected, adopted, attributeChanged } = callbacks;
+			if (connected) {
+				this.#setOfConnected.add(() => {
+					connected(obj);
+				});
+			}
+			if ('onConnected' in obj && IsTypeOf(obj.onConnected, 'function')) {
+				this.#setOfConnected.add(obj.onConnected);
+			}
+			if (disconnected) {
+				this.#setOfDisconnected.add(() => {
+					disconnected(obj);
+				});
+			}
+			if ('onDisconnected' in obj && IsTypeOf(obj.onDisconnected, 'function')) {
+				this.#setOfDisconnected.add(obj.onDisconnected);
+			}
+			if (adopted) {
+				this.#setOfAdopted.add(() => {
+					adopted(obj);
+				});
+			}
+			if ('onAdopted' in obj && IsTypeOf(obj.onAdopted, 'function')) {
+				this.#setOfAdopted.add(obj.onAdopted);
+			}
+			if (attributeChanged) {
+				this.#setOfAttributeChanged.add((name, oldValue, newValue) => {
+					attributeChanged(
+						obj,
+						// @ts-expect-error
+						name,
+						oldValue,
+						newValue,
+					);
+				});
+			}
+			if ('onAttributeChanged' in obj && IsTypeOf(obj.onAttributeChanged, 'function')) {
+				this.#setOfAttributeChanged.add(obj.onAttributeChanged);
+			}
+			return obj;
+		}
+		/**
+		 * @protected
+		 */
+		connectedCallback() {
+			// @ts-expect-error
+			if (super.connectedCallback) {
+				// @ts-expect-error
+				super.connectedCallback();
+			}
+			if (class_) {
+				this.setAttribute('class', class_);
+			}
+			if (style) {
+				this.setAttribute('style', style);
+			}
+			WalkThrough.set(this.#setOfConnected, (cb) => cb());
+			ForOfSync(observedAttributes, (key) => {
+				this.attributeChangedCallback(key, null, this.getAttribute(key));
+			});
+		}
+
+		/**
+		 * @protected
+		 */
+		disconnectedCallback() {
+			// @ts-expect-error
+			if (super.disconnectedCallback) {
+				// @ts-expect-error
+				super.disconnectedCallback();
+			}
+			WalkThrough.set(this.#setOfDisconnected, (cb) => cb());
+		}
+
+		/**
+		 * @protected
+		 */
+		adoptedCallback() {
+			// If super has a connectedCallback, it's good practice to call it
+			// @ts-expect-error
+			if (super.adoptedCallback) {
+				// @ts-expect-error
+				super.adoptedCallback();
+			}
+			WalkThrough.set(this.#setOfAdopted, (cb) => cb());
+		}
+
+		/**
+		 * @protected
+		 * @param {string} name
+		 * @param {string | null} oldValue
+		 * @param {string | null} newValue
+		 */
+		attributeChangedCallback(name, oldValue, newValue) {
+			// @ts-expect-error
+			if (super.attributeChangedCallback) {
+				// @ts-expect-error
+				super.attributeChangedCallback(name, oldValue, newValue);
+			}
+			WalkThrough.set(this.#setOfAttributeChanged, (cb) => cb(name, oldValue, newValue));
+		}
+		/**
+		 * @description
+		 * @type {InstanceType<RET>["setObservedAttributes"]}
+		 */
+		setObservedAttributes = (attributes) => {
+			ForInSync(attributes, (key, value) => {
+				this.setAttribute(key.toString(), value ?? '');
+			});
+		};
+		/**
+		 * @protected
+		 * @type {string}
+		 */
+		static tagName;
+		/**
+		 * @protected
+		 * @type {keyof HTMLElementTagNameMap}
+		 */
+		static extendIsValue;
+		/**
+		 * @protected
+		 * @type {readonly string[]|undefined}
+		 */
+		static namedSlots = namedSlots;
+		/**
+		 * @description
+		 * @protected
+		 */
+		static createNamedSlot = WC_createNamedSlot;
+		/**
+		 * @description
+		 * - to be called before calling `ClassRef.new`;
+		 * @type {<TAG extends string, CLASSREF extends CREATEARGS>
+		 * 			(
+		 * 				tagName:WC_TagName_type<TAG>,
+		 * 				classRef:CLASSREF,
+		 * 				elementDefinitionOptions?:ElementDefinitionOptions,
+		 * 			)=>ReturnType<typeof WC_createElement_bind<CLASSREF>>
+		 * 	}
+		 * }
+		 */
+		static define(...args) {
+			const [tagName, classref, elementDefinitionOptions] = args;
+			if (elementDefinitionOptions && elementDefinitionOptions.extends) {
+				this.tagName = elementDefinitionOptions.extends;
+				// @ts-expect-error
+				this.extendIsValue = tagName;
+			} else {
+				this.tagName = tagName;
+			}
+			customElements.define(tagName, classref, elementDefinitionOptions);
+			return WC_createElement_bind(classref);
+		}
+	}
+	return /** @type {RET} */ (/** @type {unknown} */ (MyClass));
+}
+
+// class e extends WC_extendsA(HTMLElement, {
+// 	namedSlots: /** @type {const} */ (['a', 'b']),
+// 	props: {
+// 		a: 'string',
+// 		/**  @type {typeof Signal<string[]>}  */
+// 		k: Signal,
+// 	},
+// }) {
+// 	static create = this.define('a-a', this);
+// 	constructor() {
+// 		super();
+// 		this.props.k.length;
+// 	}
+// }
+// e.create({
+// 	props: { a: '0', k: new Signal(['']) },
+// });

package/src/web/WC_extendsB.mjs

@@ -0,0 +1,332 @@
+// @ts-check
+
+import { WalkThrough } from '../class/WalkThrough.mjs';
+import { ForInSync } from '../function/ForInSync.mjs';
+import { ForOfSync } from '../function/ForOfSync.mjs';
+import { IsTypeOf } from '../function/IsTypeOf.mjs';
+import { WC_createElement_bind } from './bindings/WC_createElement_bind.mjs';
+import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
+
+/**
+ * @import {ArrayToKeys} from '../typehints/ArrayToKeys.mjs'
+ * @import {WC_TagName_type} from './common/WC_TagName_type.mjs'
+ */
+/**
+ * @typedef {typeof import('../function/IsTypeOf.mjs').TypeMap} TypeMap
+ */
+/**
+ * @description
+ * - Generates a base class for Web Component definitions.
+ * - Note: This generator does not support `connectedMoveCallback`.
+ * For the needs of opting in to [connectedMoveCallback](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) functionality, use [WC_extendsB](#wc_extendsb) instead.
+ * - This class relies heavily on complex type inference which can cause issues, during declaration file generation. To avoid "circular type" errors or build failures, set the following in your `tsconfig.json`:
+ * ```json
+ * {
+ * 	"compilerOptions": {
+ * 		"declaration": false
+ * 	}
+ * }
+ * ```
+ * - By disabling `declaration`, you prevent the TypeScript compiler from attempting to resolve and export the complex recursive type definitions generated by this factory;
+ * @template {new (...args: any[]) => HTMLElement} BASE_CONSTRUCTOR
+ * @template {{
+ * 	class?:string;
+ * 	style?:string;
+ *  observedAttributes?: readonly string[];
+ *  namedSlots?: readonly string[];
+ * 	props?: Record<string, keyof TypeMap|(new (...args:any[])=>any)>;
+ * }} STANDARD
+ * @template {(BASE_CONSTRUCTOR) & {
+ * 	tagName: string;
+ * 	extendIs: string;
+ * 	observedAttributes?: STANDARD["observedAttributes"];
+ * 	namedSlots?: STANDARD["namedSlots"];
+ * 	props?: STANDARD["props"];
+ * }} CREATEARGS
+ * @template { (new (...args: any[]) => InstanceType<BASE_CONSTRUCTOR> & {
+ * 		setObservedAttributes(attributes:Partial<
+ * 			Record<ArrayToKeys<STANDARD["observedAttributes"]extends readonly string[]
+ * 				? STANDARD["observedAttributes"]
+ * 				:never>,
+ * 			string>
+ * 		>):void;
+ * 		props: NonNullable<NonNullable<Parameters<ReturnType<typeof WC_createElement_bind<CREATEARGS>>>[0]>["props"]>;
+ *    adoptedCallback():void;
+ *    connectedCallback():void;
+ *    disonnectedCallback():void;
+ * 		attributeChangedCallback(name:ArrayToKeys<STANDARD["observedAttributes"]extends readonly string[]?STANDARD["observedAttributes"]:never>, oldValue:string|null, newValue:string|null): void;
+ * 		ON:<OBJ extends Record<any, any> & {
+ * 				onConnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["connected"];
+ * 				onConnectedMove?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["connectedMove"];
+ * 				onDisconnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["disconnected"];
+ * 				onAdopted?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["adopted"];
+ * 				onAttributeChanged?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["attributeChanged"];
+ * 			}>
+ * 		(obj:OBJ, callbacks?:
+ * 			{
+ * 				connected?:(obj:OBJ)=>void;
+ * 				connectedMove?:(obj:OBJ)=>void;
+ * 				disconnected?:(obj:OBJ)=>void;
+ * 				adopted?:(obj:OBJ)=>void;
+ * 				attributeChanged?:(
+ * 					obj:OBJ,
+ * 					name:STANDARD["observedAttributes"]extends readonly string[]
+ * 						? ArrayToKeys<STANDARD["observedAttributes"]>
+ * 						: never,
+ * 					oldValue:string|null,
+ * 					newValue:string|null
+ * 				)=>void;
+ * 			})=>OBJ;
+ *  }) & {
+ * 		tagName:string;
+ * 		extendIs:string;
+ *  	namedSlots: STANDARD["namedSlots"];
+ *  	observedAttributes: STANDARD["observedAttributes"];
+ * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
+ * 		props?: STANDARD["props"];
+ * 		define:<TAG extends string, CLASSREF extends RET>
+ * 			(
+ * 				tagName:WC_TagName_type<TAG>,
+ * 				classRef:CLASSREF,
+ * 				elementDefinitionOptions?:ElementDefinitionOptions,
+ * 			)=>ReturnType<typeof WC_createElement_bind<CLASSREF>>;
+ * 	}
+ * } RET
+ * @param {BASE_CONSTRUCTOR} Base
+ * @param {STANDARD} [staticMember]
+ * @returns {RET}
+ */
+export function WC_extendsB(Base, staticMember = /** @type {any} */ ({})) {
+	const { class: class_ = '', style = '', observedAttributes = [], namedSlots = [] } = staticMember;
+	class MyClass extends Base {
+		static observedAttributes = observedAttributes;
+
+		/**
+		 * @description
+		 * - props objects from define -> createElement;
+		 * @type {STANDARD["props"]}
+		 */
+		props = {};
+
+		/** @type {Set<()=>void>} */
+		#setOfConnected = new Set();
+		/** @type {Set<()=>void>} */
+		#setOfConnectedMove = new Set();
+		/** @type {Set<()=>void>} */
+		#setOfDisconnected = new Set();
+		/** @type {Set<()=>void>} */
+		#setOfAdopted = new Set();
+		/** @type {Set<(name:string, oldValue:string|null, newValue:string|null)=>void>} */
+		#setOfAttributeChanged = new Set();
+
+		/**
+		 * @description
+		 * - wrapper helper to handle returned to be assigned property on `WebComponent` lifecycle callbacks;
+		 * @template {Record<any, any>} OBJ
+		 * @param {OBJ & {
+		 * 	onConnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["connected"];
+		 * 	onConnectedMove?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["connectedMove"];
+		 * 	onDisconnected?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["disconnected"];
+		 * 	onAdopted?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["adopted"];
+		 * 	onAttributeChanged?: NonNullable<Parameters<InstanceType<RET>["ON"]>[1]>["attributeChanged"];
+		 * }} obj
+		 * @param {Object} [callbacks]
+		 * @param {(obj:OBJ)=>void} [callbacks.connected]
+		 * @param {(obj:OBJ)=>void} [callbacks.connectedMove]
+		 * @param {(obj:OBJ)=>void} [callbacks.disconnected]
+		 * @param {(obj:OBJ)=>void} [callbacks.adopted]
+		 * @param {(
+		 * 	obj:OBJ,
+		 * 	name:STANDARD["observedAttributes"]extends readonly string[]
+		 * 		? ArrayToKeys<STANDARD["observedAttributes"]>
+		 * 		: never,
+		 * 	oldValue:string|null,
+		 * 	newValue:string|null
+		 * )=>void} [callbacks.attributeChanged]
+		 * @returns {OBJ}
+		 * @example
+		 * // inside WebComponent context
+		 * #mySignal = this.ON(createSignalFromExternalLib(0),{
+		 * 	disconnected:(s)=>{
+		 * 		s.cleanup(); // <-or any equivalent;
+		 * 	},
+		 * });
+		 * //
+		 */
+		ON(obj, callbacks = {}) {
+			const { connected, connectedMove, disconnected, adopted, attributeChanged } = callbacks;
+			if (connected) {
+				this.#setOfConnected.add(() => {
+					connected(obj);
+				});
+			}
+			if ('onConnected' in obj && IsTypeOf(obj.onConnected, 'function')) {
+				this.#setOfConnected.add(obj.onConnected);
+			}
+			if (connectedMove) {
+				this.#setOfConnectedMove.add(() => {
+					connectedMove(obj);
+				});
+			}
+			if ('onConnectedMove' in obj && IsTypeOf(obj.onConnectedMove, 'function')) {
+				this.#setOfConnectedMove.add(obj.onConnectedMove);
+			}
+			if (disconnected) {
+				this.#setOfDisconnected.add(() => {
+					disconnected(obj);
+				});
+			}
+			if ('onDisconnected' in obj && IsTypeOf(obj.onDisconnected, 'function')) {
+				this.#setOfDisconnected.add(obj.onDisconnected);
+			}
+			if (adopted) {
+				this.#setOfAdopted.add(() => {
+					adopted(obj);
+				});
+			}
+			if ('onAdopted' in obj && IsTypeOf(obj.onAdopted, 'function')) {
+				this.#setOfAdopted.add(obj.onAdopted);
+			}
+			if (attributeChanged) {
+				this.#setOfAttributeChanged.add((name, oldValue, newValue) => {
+					attributeChanged(
+						obj,
+						// @ts-expect-error
+						name,
+						oldValue,
+						newValue,
+					);
+				});
+			}
+			if ('onAttributeChanged' in obj && IsTypeOf(obj.onAttributeChanged, 'function')) {
+				this.#setOfAttributeChanged.add(obj.onAttributeChanged);
+			}
+			return obj;
+		}
+		/**
+		 * @protected
+		 */
+		connectedCallback() {
+			// @ts-expect-error
+			if (super.connectedCallback) {
+				// @ts-expect-error
+				super.connectedCallback();
+			}
+			if (class_) {
+				this.setAttribute('class', class_);
+			}
+			if (style) {
+				this.setAttribute('style', style);
+			}
+			WalkThrough.set(this.#setOfConnected, (cb) => cb());
+			ForOfSync(observedAttributes, (key) => {
+				this.attributeChangedCallback(key, null, this.getAttribute(key));
+			});
+		}
+		/**
+		 * @protected
+		 */
+		connectedMoveCallback() {
+			// @ts-expect-error
+			if (super.connectedMoveCallback) {
+				// @ts-expect-error
+				super.connectedMoveCallback();
+			}
+			WalkThrough.set(this.#setOfConnectedMove, (cb) => cb());
+		}
+
+		/**
+		 * @protected
+		 */
+		disconnectedCallback() {
+			// @ts-expect-error
+			if (super.disconnectedCallback) {
+				// @ts-expect-error
+				super.disconnectedCallback();
+			}
+			WalkThrough.set(this.#setOfDisconnected, (cb) => cb());
+		}
+
+		/**
+		 * @protected
+		 */
+		adoptedCallback() {
+			// If super has a connectedCallback, it's good practice to call it
+			// @ts-expect-error
+			if (super.adoptedCallback) {
+				// @ts-expect-error
+				super.adoptedCallback();
+			}
+			WalkThrough.set(this.#setOfAdopted, (cb) => cb());
+		}
+
+		/**
+		 * @protected
+		 * @param {string} name
+		 * @param {string | null} oldValue
+		 * @param {string | null} newValue
+		 */
+		attributeChangedCallback(name, oldValue, newValue) {
+			// @ts-expect-error
+			if (super.attributeChangedCallback) {
+				// @ts-expect-error
+				super.attributeChangedCallback(name, oldValue, newValue);
+			}
+			WalkThrough.set(this.#setOfAttributeChanged, (cb) => cb(name, oldValue, newValue));
+		}
+		/**
+		 * @description
+		 * @type {InstanceType<RET>["setObservedAttributes"]}
+		 */
+		setObservedAttributes = (attributes) => {
+			ForInSync(attributes, (key, value) => {
+				this.setAttribute(key.toString(), value ?? '');
+			});
+		};
+		/**
+		 * @protected
+		 * @type {string}
+		 */
+		static tagName;
+		/**
+		 * @protected
+		 * @type {keyof HTMLElementTagNameMap}
+		 */
+		static extendIsValue;
+		/**
+		 * @protected
+		 * @type {readonly string[]|undefined}
+		 */
+		static namedSlots = namedSlots;
+		/**
+		 * @description
+		 * @protected
+		 */
+		static createNamedSlot = WC_createNamedSlot;
+		/**
+		 * @description
+		 * - to be called before calling `ClassRef.new`;
+		 * @type {<TAG extends string, CLASSREF extends CREATEARGS>
+		 * 			(
+		 * 				tagName:WC_TagName_type<TAG>,
+		 * 				classRef:CLASSREF,
+		 * 				elementDefinitionOptions?:ElementDefinitionOptions,
+		 * 			)=>ReturnType<typeof WC_createElement_bind<CLASSREF>>
+		 * 	}
+		 * }
+		 */
+		static define(...args) {
+			const [tagName, classref, elementDefinitionOptions] = args;
+			if (elementDefinitionOptions && elementDefinitionOptions.extends) {
+				this.tagName = elementDefinitionOptions.extends;
+				// @ts-expect-error
+				this.extendIsValue = tagName;
+			} else {
+				this.tagName = tagName;
+			}
+			customElements.define(tagName, classref, elementDefinitionOptions);
+			return WC_createElement_bind(classref);
+		}
+	}
+	return /** @type {RET} */ (/** @type {unknown} */ (MyClass));
+}