vivth 1.5.2 → 1.5.4

package/README.md

@@ -198,6 +198,7 @@ npm i vivth
 - [neutral.E](#e)
 - [neutral.NewStyleSheetAsync](#newstylesheetasync)
 - [neutral.NewStyleSheetSync](#newstylesheetsync)
+- [neutral.WC_DefineCustomElement](#wc_definecustomelement)
 - [neutral.WC_TagName_type](#wc_tagname_type)
 - [neutral.EnsureValidTag](#ensurevalidtag)
 - [neutral.IsInViewPortSignal](#isinviewportsignal)
@@ -3923,9 +3924,9 @@ f.forInSignals((key, signal) => {
 
 #### reference: `WalkThrough`
 
-- collection of static `methods` to walktrhough things, instead of regular looping;
-- usefull to iterator that might be modified during iteration;
-- mostlikely to be less performant, but with better result clarity;
+- collection of static `methods` to walkthrough things, instead of regular looping;
+- useful for iterators that might be modified during iteration;
+- most likely to be less performant, but with better result clarity;
 
 #### reference: `WalkThrough.set`
 
@@ -3935,7 +3936,7 @@ f.forInSignals((key, signal) => {
 /**
  * @template VAL
  * @param {Set<VAL>} setInstance
- * @param {(value:VAL)=>void} callback
+ * @param {(value: VAL) => void} callback
  * @returns {void}
  */
 ```
@@ -3957,7 +3958,7 @@ WalkThrough.set(setOfSomething, (value) => {
 /**
  * @template KEY, VAL
  * @param {Map<KEY, VAL>} mapInstance
- * @param {(res:[key: KEY, value: VAL]) => void} callback
+ * @param {(entry: [key: KEY, value: VAL]) => void} callback
  * @returns {void}
  */
 ```
@@ -3979,7 +3980,7 @@ WalkThrough.map(mapOfSomething, ([key, value]) => {
 /**
  * @template VAL
  * @param {VAL[]} arrayInstance
- * @param {(res:[value: VAL, index: number]) => void} callback
+ * @param {(entry: [index: number, value: VAL]) => void} callback
  * @returns {void}
  */
 ```
@@ -3988,7 +3989,7 @@ WalkThrough.map(mapOfSomething, ([key, value]) => {
 
 ```js
 import { WalkThrough } from "vivth/neutral";
-WalkThrough.array(arrayOfSomething, ([value, index]) => {
+WalkThrough.array(arrayOfSomething, ([index, value]) => {
   // code
 });
 ```
@@ -6722,15 +6723,13 @@ const esWatcherInstance = this.registerObjectWithAutoCleanup(
 #### reference: `WC_createElement_bind`
 
 - typesafe factory generator for creating element of `WC_extendsA`/`WC_extendsB` class;
-- this function is returned by static method `.define`;
-  > - bind it with static property;
 - uses `lit-html` under the hood;
 
 ```js
 /**
  * @template {(new (...args: any[]) => HTMLElement) & {
  *  tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  *  observedAttributes?: readonly string[];
  *  namedSlots?: readonly string[];
  * 	props?: Record<string, keyof TypeMap|(new (...args:any[])=>any)>;
@@ -6758,9 +6757,7 @@ const esWatcherInstance = this.registerObjectWithAutoCleanup(
 - <i>example</i>:
 
 ```js
- // webcomponent context via `WC_extends`
- static createElement = this.define(...args);
- //
+
 ```
 
 \*) <sub>[go to list of exported API and typehelpers](#list-of-exported-api-and-typehelpers)</sub>
@@ -7103,6 +7100,43 @@ text.nodeValue = "hello world";
 
 ---
 
+<h2 id="wc_definecustomelement">neutral.WC_DefineCustomElement</h2>
+
+#### reference: `WC_DefineCustomElement`
+
+- helper funtion for wecomponent instantiator;
+- it uses WC_createElement_bind, which uses `lit-html`;
+- alternatively, if you want to create a baseline component that are not to be , you can just
+
+```js
+/**
+ * @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;
+ * 	extendIsValue: string;
+ * 	observedAttributes?: STANDARD["observedAttributes"];
+ * 	namedSlots?: STANDARD["namedSlots"];
+ * 	props?: STANDARD["props"];
+ * }} CREATEARGS
+ * @template {string} TAG
+ * @param {WC_TagName_type<TAG>} tagName
+ * @param {CREATEARGS} classRef
+ * @param {ElementDefinitionOptions} elementDefinitionOptions
+ * @returns {ReturnType<typeof WC_createElement_bind<CREATEARGS>>}
+ */
+```
+
+\*) <sub>[go to list of exported API and typehelpers](#list-of-exported-api-and-typehelpers)</sub>
+
+---
+
 <h2 id="wc_tagname_type">neutral.WC_TagName_type</h2>
 
 - jsdoc types:
@@ -7379,7 +7413,7 @@ text.nodeValue = "hello world";
  * }} STANDARD
  * @template {(BASE_CONSTRUCTOR) & {
  * 	tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  * 	observedAttributes?: STANDARD["observedAttributes"];
  * 	namedSlots?: STANDARD["namedSlots"];
  * 	props?: STANDARD["props"];
@@ -7418,7 +7452,7 @@ text.nodeValue = "hello world";
  * 			})=>OBJ;
  *  }) & {
  * 		tagName:string;
- * 		extendIs:string;
+ * 		extendIsValue:string;
  *  	namedSlots: STANDARD["namedSlots"];
  *  	observedAttributes: STANDARD["observedAttributes"];
  * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
@@ -7441,7 +7475,9 @@ text.nodeValue = "hello world";
 
 ```js
  export MyWebComponent extends WC_extendsA(HTMLElement, {...options}){
- 	static create = this.define('my-webcomponent');
+ 	static create = WC_DefineCustomElement('my-webcomponent', this);
+ 	// you can skip the defining with WC_DefineCustomElement if the class are meant to be extended abstract;
+ 	// or if you want to opt out from using `lit-html` template;
  }
 ```
 
@@ -7564,7 +7600,7 @@ text.nodeValue = "hello world";
  * }} STANDARD
  * @template {(BASE_CONSTRUCTOR) & {
  * 	tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  * 	observedAttributes?: STANDARD["observedAttributes"];
  * 	namedSlots?: STANDARD["namedSlots"];
  * 	props?: STANDARD["props"];
@@ -7605,7 +7641,7 @@ text.nodeValue = "hello world";
  * 			})=>OBJ;
  *  }) & {
  * 		tagName:string;
- * 		extendIs:string;
+ * 		extendIsValue:string;
  *  	namedSlots: STANDARD["namedSlots"];
  *  	observedAttributes: STANDARD["observedAttributes"];
  * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
@@ -7624,6 +7660,16 @@ text.nodeValue = "hello world";
  */
 ```
 
+- <i>example</i>:
+
+```js
+ export MyWebComponent extends WC_extendsA(HTMLElement, {...options}){
+ 	static create = WC_DefineCustomElement('my-webcomponent', this);
+ 	// you can skip the defining if the class are meant to be extended abstract;
+ 	// or if you want to opt out from using `lit-html` template;
+ }
+```
+
 #### reference: `WC_extendsB_instance.props`
 
 - props objects from define -> createElement;

package/generated/types/generated/vivth/exports/all.d.mts

@@ -105,6 +105,7 @@ export { CSS } from "../../../src/web/common/CSS.mjs";
 export { E } from "../../../src/web/common/E.mjs";
 export { NewStyleSheetAsync } from "../../../src/web/common/NewStyleSheetAsync.mjs";
 export { NewStyleSheetSync } from "../../../src/web/common/NewStyleSheetSync.mjs";
+export { WC_DefineCustomElement } from "../../../src/web/common/WC_DefineCustomElement.mjs";
 export { IsInViewPortSignal } from "../../../src/web/signals/IsInViewPortSignal.mjs";
 export { ObserverSignal } from "../../../src/web/signals/ObserverSignal.mjs";
 export { WC_litRef } from "../../../src/web/signals/WC_litRef.mjs";

package/generated/types/generated/vivth/exports/neutral.d.mts

@@ -67,6 +67,7 @@ export { CSS } from "../../../src/web/common/CSS.mjs";
 export { E } from "../../../src/web/common/E.mjs";
 export { NewStyleSheetAsync } from "../../../src/web/common/NewStyleSheetAsync.mjs";
 export { NewStyleSheetSync } from "../../../src/web/common/NewStyleSheetSync.mjs";
+export { WC_DefineCustomElement } from "../../../src/web/common/WC_DefineCustomElement.mjs";
 export { IsInViewPortSignal } from "../../../src/web/signals/IsInViewPortSignal.mjs";
 export { ObserverSignal } from "../../../src/web/signals/ObserverSignal.mjs";
 export { WC_litRef } from "../../../src/web/signals/WC_litRef.mjs";

package/generated/types/src/class/WalkThrough.d.mts

@@ -1,28 +1,29 @@
 /**
  * @description
- * - collection of static `methods` to walktrhough things, instead of regular looping;
- * - usefull to iterator that might be modified during iteration;
- * - mostlikely to be less performant, but with better result clarity;
+ * - collection of static `methods` to walkthrough things, instead of regular looping;
+ * - useful for iterators that might be modified during iteration;
+ * - most likely to be less performant, but with better result clarity;
  */
 export class WalkThrough {
     /**
-     * @param {Iterator<any, any, any>} iterator
-     * @param {(...any:any[])=>void} callback
+     * @template T
+     * @param {Iterator<T, any, any>} iterator
+     * @param {(value: T) => void} callback
      * @returns {void}
      */
-    static #handler: (iterator: Iterator<any, any, any>, callback: (...any: any[]) => void) => void;
+    static #handler<T>(iterator: Iterator<T, any, any>, callback: (value: T) => void): void;
     /**
      * @description
      * - method helper to WalkThrough `Set`;
      * @template VAL
      * @param {Set<VAL>} setInstance
-     * @param {(value:VAL)=>void} callback
+     * @param {(value: VAL) => void} callback
      * @returns {void}
      * @example
      * import { WalkThrough } from 'vivth/neutral';
      *
      * WalkThrough.set(setOfSomething, (value) => {
-     * 	// code
+     * // code
      * })
      */
     static set<VAL>(setInstance: Set<VAL>, callback: (value: VAL) => void): void;
@@ -31,29 +32,29 @@ export class WalkThrough {
      * - method helper to WalkThrough `Map`;
      * @template KEY, VAL
      * @param {Map<KEY, VAL>} mapInstance
-     * @param {(res:[key: KEY, value: VAL]) => void} callback
+     * @param {(entry: [key: KEY, value: VAL]) => void} callback
      * @returns {void}
      * @example
      * import { WalkThrough } from 'vivth/neutral';
      *
      * WalkThrough.map(mapOfSomething, ([key, value]) => {
-     * 	// code
+     * // code
      * })
      */
-    static map<KEY, VAL>(mapInstance: Map<KEY, VAL>, callback: (res: [key: KEY, value: VAL]) => void): void;
+    static map<KEY, VAL>(mapInstance: Map<KEY, VAL>, callback: (entry: [key: KEY, value: VAL]) => void): void;
     /**
      * @description
      * - method helper to WalkThrough `Array`;
      * @template VAL
      * @param {VAL[]} arrayInstance
-     * @param {(res:[value: VAL, index: number]) => void} callback
+     * @param {(entry: [index: number, value: VAL]) => void} callback
      * @returns {void}
      * @example
      * import { WalkThrough } from 'vivth/neutral';
      *
-     * WalkThrough.array(arrayOfSomething, ([value, index]) => {
-     * 	// code
+     * WalkThrough.array(arrayOfSomething, ([index, value]) => {
+     * // code
      * })
      */
-    static array<VAL>(arrayInstance: VAL[], callback: (res: [value: VAL, index: number]) => void): void;
+    static array<VAL>(arrayInstance: VAL[], callback: (entry: [index: number, value: VAL]) => void): void;
 }

package/generated/types/src/web/WC_extendsA.d.mts

@@ -29,7 +29,7 @@
  * }} STANDARD
  * @template {(BASE_CONSTRUCTOR) & {
  * 	tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  * 	observedAttributes?: STANDARD["observedAttributes"];
  * 	namedSlots?: STANDARD["namedSlots"];
  * 	props?: STANDARD["props"];
@@ -68,7 +68,7 @@
  * 			})=>OBJ;
  *  }) & {
  * 		tagName:string;
- * 		extendIs:string;
+ * 		extendIsValue:string;
  *  	namedSlots: STANDARD["namedSlots"];
  *  	observedAttributes: STANDARD["observedAttributes"];
  * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
@@ -86,7 +86,9 @@
  * @returns {RET}
  * @example
  * export MyWebComponent extends WC_extendsA(HTMLElement, {...options}){
- * 	static create = this.define('my-webcomponent');
+ * 	static create = WC_DefineCustomElement('my-webcomponent', this);
+ * 	// you can skip the defining with WC_DefineCustomElement if the class are meant to be extended abstract;
+ * 	// or if you want to opt out from using `lit-html` template;
  * }
  */
 export function WC_extendsA<BASE_CONSTRUCTOR extends new (...args: any[]) => HTMLElement, STANDARD extends {
@@ -97,7 +99,7 @@ export function WC_extendsA<BASE_CONSTRUCTOR extends new (...args: any[]) => HTM
     props?: Record<string, keyof TypeMap | (new (...args: any[]) => any)>;
 }, CREATEARGS extends (BASE_CONSTRUCTOR) & {
     tagName: string;
-    extendIs: string;
+    extendIsValue: string;
     observedAttributes?: STANDARD["observedAttributes"];
     namedSlots?: STANDARD["namedSlots"];
     props?: STANDARD["props"];
@@ -121,7 +123,7 @@ export function WC_extendsA<BASE_CONSTRUCTOR extends new (...args: any[]) => HTM
     }) => OBJ;
 }) & {
     tagName: string;
-    extendIs: string;
+    extendIsValue: string;
     namedSlots: STANDARD["namedSlots"];
     observedAttributes: STANDARD["observedAttributes"];
     createNamedSlot: typeof WC_createNamedSlot<STANDARD>;

package/generated/types/src/web/WC_extendsB.d.mts

@@ -29,7 +29,7 @@
  * }} STANDARD
  * @template {(BASE_CONSTRUCTOR) & {
  * 	tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  * 	observedAttributes?: STANDARD["observedAttributes"];
  * 	namedSlots?: STANDARD["namedSlots"];
  * 	props?: STANDARD["props"];
@@ -70,7 +70,7 @@
  * 			})=>OBJ;
  *  }) & {
  * 		tagName:string;
- * 		extendIs:string;
+ * 		extendIsValue:string;
  *  	namedSlots: STANDARD["namedSlots"];
  *  	observedAttributes: STANDARD["observedAttributes"];
  * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
@@ -86,6 +86,12 @@
  * @param {BASE_CONSTRUCTOR} Base
  * @param {STANDARD} [staticMember]
  * @returns {RET}
+ * @example
+ * export MyWebComponent extends WC_extendsA(HTMLElement, {...options}){
+ * 	static create = WC_DefineCustomElement('my-webcomponent', this);
+ * 	// you can skip the defining if the class are meant to be extended abstract;
+ * 	// or if you want to opt out from using `lit-html` template;
+ * }
  */
 export function WC_extendsB<BASE_CONSTRUCTOR extends new (...args: any[]) => HTMLElement, STANDARD extends {
     class?: string;
@@ -95,7 +101,7 @@ export function WC_extendsB<BASE_CONSTRUCTOR extends new (...args: any[]) => HTM
     props?: Record<string, keyof TypeMap | (new (...args: any[]) => any)>;
 }, CREATEARGS extends (BASE_CONSTRUCTOR) & {
     tagName: string;
-    extendIs: string;
+    extendIsValue: string;
     observedAttributes?: STANDARD["observedAttributes"];
     namedSlots?: STANDARD["namedSlots"];
     props?: STANDARD["props"];
@@ -121,7 +127,7 @@ export function WC_extendsB<BASE_CONSTRUCTOR extends new (...args: any[]) => HTM
     }) => OBJ;
 }) & {
     tagName: string;
-    extendIs: string;
+    extendIsValue: string;
     namedSlots: STANDARD["namedSlots"];
     observedAttributes: STANDARD["observedAttributes"];
     createNamedSlot: typeof WC_createNamedSlot<STANDARD>;

package/generated/types/src/web/bindings/WC_createElement_bind.d.mts

@@ -1,12 +1,10 @@
 /**
  * @description
  * - typesafe factory generator for creating element of `WC_extendsA`/`WC_extendsB` class;
- * - this function is returned by static method `.define`;
- * >- bind it with static property;
  * - uses `lit-html` under the hood;
  * @template {(new (...args: any[]) => HTMLElement) & {
  *  tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  *  observedAttributes?: readonly string[];
  *  namedSlots?: readonly string[];
  * 	props?: Record<string, keyof TypeMap|(new (...args:any[])=>any)>;
@@ -29,17 +27,14 @@
  * 	},
  * )=>InstanceType<BASE_CONSTRUCTOR>}
  * @example
- * // webcomponent context via `WC_extends`
- * static createElement = this.define(...args);
- * //
  */
 export function WC_createElement_bind<BASE_CONSTRUCTOR extends (new (...args: any[]) => HTMLElement) & {
     tagName: string;
-    extendIs: string;
+    extendIsValue: string;
     observedAttributes?: readonly string[];
     namedSlots?: readonly string[];
     props?: Record<string, keyof TypeMap | (new (...args: any[]) => any)>;
-}>({ tagName, extendIs, namedSlots }: BASE_CONSTRUCTOR): (param?: {
+}>({ tagName, extendIsValue, namedSlots }: BASE_CONSTRUCTOR): (param?: {
     attrs?: BASE_CONSTRUCTOR["observedAttributes"] extends readonly string[] ? Partial<Record<ArrayToKeys<BASE_CONSTRUCTOR["observedAttributes"]>, string>> : undefined;
     props?: { [K in keyof NonNullable<BASE_CONSTRUCTOR["props"]>]: NonNullable<BASE_CONSTRUCTOR["props"]>[K] extends keyof TypeMap ? TypeMap[NonNullable<BASE_CONSTRUCTOR["props"]>[K]] : InstanceType<NonNullable<BASE_CONSTRUCTOR["props"]>[K]>; };
     children?: (slotName: Record<ArrayToKeys<BASE_CONSTRUCTOR["namedSlots"]>, string>) => TemplateResult;

package/generated/types/src/web/common/WC_DefineCustomElement.d.mts

@@ -0,0 +1,48 @@
+/**
+ * @import {WC_TagName_type} from '../common/WC_TagName_type.mjs'
+ */
+/**
+ * @typedef {typeof import('../../function/IsTypeOf.mjs').TypeMap} TypeMap
+ */
+/**
+ * @description
+ * - helper funtion for wecomponent instantiator;
+ * - it uses WC_createElement_bind, which uses `lit-html`;
+ * - alternatively, if you want to create a baseline component that are not to be , you can just
+ * @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;
+ * 	extendIsValue: string;
+ * 	observedAttributes?: STANDARD["observedAttributes"];
+ * 	namedSlots?: STANDARD["namedSlots"];
+ * 	props?: STANDARD["props"];
+ * }} CREATEARGS
+ * @template {string} TAG
+ * @param {WC_TagName_type<TAG>} tagName
+ * @param {CREATEARGS} classRef
+ * @param {ElementDefinitionOptions} elementDefinitionOptions
+ * @returns {ReturnType<typeof WC_createElement_bind<CREATEARGS>>}
+ */
+export function WC_DefineCustomElement<BASE_CONSTRUCTOR extends new (...args: any[]) => HTMLElement, STANDARD extends {
+    class?: string;
+    style?: string;
+    observedAttributes?: readonly string[];
+    namedSlots?: readonly string[];
+    props?: Record<string, keyof TypeMap | (new (...args: any[]) => any)>;
+}, CREATEARGS extends (BASE_CONSTRUCTOR) & {
+    tagName: string;
+    extendIsValue: string;
+    observedAttributes?: STANDARD["observedAttributes"];
+    namedSlots?: STANDARD["namedSlots"];
+    props?: STANDARD["props"];
+}, TAG extends string>(tagName: WC_TagName_type<TAG>, classRef: CREATEARGS, elementDefinitionOptions: ElementDefinitionOptions): ReturnType<typeof WC_createElement_bind<CREATEARGS>>;
+export type TypeMap = typeof import("../../function/IsTypeOf.mjs").TypeMap;
+import type { WC_TagName_type } from '../common/WC_TagName_type.mjs';
+import { WC_createElement_bind } from '../bindings/WC_createElement_bind.mjs';

package/generated/vivth/exports/all.mjs

@@ -215,6 +215,7 @@ export { CSS } from '../../../src/web/common/CSS.mjs';
 export { E } from '../../../src/web/common/E.mjs';
 export { NewStyleSheetAsync } from '../../../src/web/common/NewStyleSheetAsync.mjs';
 export { NewStyleSheetSync } from '../../../src/web/common/NewStyleSheetSync.mjs';
+export { WC_DefineCustomElement } from '../../../src/web/common/WC_DefineCustomElement.mjs';
 /**
  * @template {string} TAG
  * @typedef {import('../../../src/web/common/WC_TagName_type.mjs').WC_TagName_type<TAG>} WC_TagName_type

package/generated/vivth/exports/neutral.mjs

@@ -177,6 +177,7 @@ export { CSS } from '../../../src/web/common/CSS.mjs';
 export { E } from '../../../src/web/common/E.mjs';
 export { NewStyleSheetAsync } from '../../../src/web/common/NewStyleSheetAsync.mjs';
 export { NewStyleSheetSync } from '../../../src/web/common/NewStyleSheetSync.mjs';
+export { WC_DefineCustomElement } from '../../../src/web/common/WC_DefineCustomElement.mjs';
 /**
  * @template {string} TAG
  * @typedef {import('../../../src/web/common/WC_TagName_type.mjs').WC_TagName_type<TAG>} WC_TagName_type

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vivth",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "library primitives",
   "devDependencies": {
     "@types/bun": "^1.3.3",

package/src/class/WalkThrough.mjs

@@ -2,72 +2,77 @@
 
 /**
  * @description
- * - collection of static `methods` to walktrhough things, instead of regular looping;
- * - usefull to iterator that might be modified during iteration;
- * - mostlikely to be less performant, but with better result clarity;
+ * - collection of static `methods` to walkthrough things, instead of regular looping;
+ * - useful for iterators that might be modified during iteration;
+ * - most likely to be less performant, but with better result clarity;
  */
 export class WalkThrough {
 	/**
-	 * @param {Iterator<any, any, any>} iterator
-	 * @param {(...any:any[])=>void} callback
+	 * @template T
+	 * @param {Iterator<T, any, any>} iterator
+	 * @param {(value: T) => void} callback
 	 * @returns {void}
 	 */
-	static #handler = (iterator, callback) => {
+	static #handler(iterator, callback) {
 		let result = iterator.next();
 		while (!result.done) {
 			callback(result.value);
 			result = iterator.next();
 		}
-	};
+	}
+
 	/**
 	 * @description
 	 * - method helper to WalkThrough `Set`;
 	 * @template VAL
 	 * @param {Set<VAL>} setInstance
-	 * @param {(value:VAL)=>void} callback
+	 * @param {(value: VAL) => void} callback
 	 * @returns {void}
 	 * @example
 	 * import { WalkThrough } from 'vivth/neutral';
 	 *
 	 * WalkThrough.set(setOfSomething, (value) => {
-	 * 	// code
+	 * // code
 	 * })
 	 */
 	static set(setInstance, callback) {
 		WalkThrough.#handler(setInstance.values(), callback);
 	}
+
 	/**
 	 * @description
 	 * - method helper to WalkThrough `Map`;
 	 * @template KEY, VAL
 	 * @param {Map<KEY, VAL>} mapInstance
-	 * @param {(res:[key: KEY, value: VAL]) => void} callback
+	 * @param {(entry: [key: KEY, value: VAL]) => void} callback
 	 * @returns {void}
 	 * @example
 	 * import { WalkThrough } from 'vivth/neutral';
 	 *
 	 * WalkThrough.map(mapOfSomething, ([key, value]) => {
-	 * 	// code
+	 * // code
 	 * })
 	 */
 	static map(mapInstance, callback) {
 		WalkThrough.#handler(mapInstance.entries(), callback);
 	}
+
 	/**
 	 * @description
 	 * - method helper to WalkThrough `Array`;
 	 * @template VAL
 	 * @param {VAL[]} arrayInstance
-	 * @param {(res:[value: VAL, index: number]) => void} callback
+	 * @param {(entry: [index: number, value: VAL]) => void} callback
 	 * @returns {void}
 	 * @example
 	 * import { WalkThrough } from 'vivth/neutral';
 	 *
-	 * WalkThrough.array(arrayOfSomething, ([value, index]) => {
-	 * 	// code
+	 * WalkThrough.array(arrayOfSomething, ([index, value]) => {
+	 * // code
 	 * })
 	 */
 	static array(arrayInstance, callback) {
-		WalkThrough.#handler(arrayInstance.values(), callback);
+		// Changed .values() to .entries() to match your [index, value] requirement
+		WalkThrough.#handler(arrayInstance.entries(), callback);
 	}
 }

package/src/web/WC_extendsA.mjs

@@ -39,7 +39,7 @@ import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
  * }} STANDARD
  * @template {(BASE_CONSTRUCTOR) & {
  * 	tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  * 	observedAttributes?: STANDARD["observedAttributes"];
  * 	namedSlots?: STANDARD["namedSlots"];
  * 	props?: STANDARD["props"];
@@ -78,7 +78,7 @@ import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
  * 			})=>OBJ;
  *  }) & {
  * 		tagName:string;
- * 		extendIs:string;
+ * 		extendIsValue:string;
  *  	namedSlots: STANDARD["namedSlots"];
  *  	observedAttributes: STANDARD["observedAttributes"];
  * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
@@ -96,7 +96,9 @@ import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
  * @returns {RET}
  * @example
  * export MyWebComponent extends WC_extendsA(HTMLElement, {...options}){
- * 	static create = this.define('my-webcomponent');
+ * 	static create = WC_DefineCustomElement('my-webcomponent', this);
+ * 	// you can skip the defining with WC_DefineCustomElement if the class are meant to be extended abstract;
+ * 	// or if you want to opt out from using `lit-html` template;
  * }
  */
 export function WC_extendsA(Base, staticMember = /** @type {any} */ ({})) {

package/src/web/WC_extendsB.mjs

@@ -38,7 +38,7 @@ import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
  * }} STANDARD
  * @template {(BASE_CONSTRUCTOR) & {
  * 	tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  * 	observedAttributes?: STANDARD["observedAttributes"];
  * 	namedSlots?: STANDARD["namedSlots"];
  * 	props?: STANDARD["props"];
@@ -79,7 +79,7 @@ import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
  * 			})=>OBJ;
  *  }) & {
  * 		tagName:string;
- * 		extendIs:string;
+ * 		extendIsValue:string;
  *  	namedSlots: STANDARD["namedSlots"];
  *  	observedAttributes: STANDARD["observedAttributes"];
  * 		createNamedSlot: typeof WC_createNamedSlot<STANDARD>;
@@ -95,6 +95,12 @@ import { WC_createNamedSlot } from './bindings/WC_createNamedSlot.mjs';
  * @param {BASE_CONSTRUCTOR} Base
  * @param {STANDARD} [staticMember]
  * @returns {RET}
+ * @example
+ * export MyWebComponent extends WC_extendsA(HTMLElement, {...options}){
+ * 	static create = WC_DefineCustomElement('my-webcomponent', this);
+ * 	// you can skip the defining if the class are meant to be extended abstract;
+ * 	// or if you want to opt out from using `lit-html` template;
+ * }
  */
 export function WC_extendsB(Base, staticMember = /** @type {any} */ ({})) {
 	const { class: class_ = '', style = '', observedAttributes = [], namedSlots = [] } = staticMember;

package/src/web/bindings/WC_createElement_bind.mjs

@@ -30,12 +30,10 @@ const getChildrenData = (namedSlots, childrenDataArgsPlaceholder) => {
 /**
  * @description
  * - typesafe factory generator for creating element of `WC_extendsA`/`WC_extendsB` class;
- * - this function is returned by static method `.define`;
- * >- bind it with static property;
  * - uses `lit-html` under the hood;
  * @template {(new (...args: any[]) => HTMLElement) & {
  *  tagName: string;
- * 	extendIs: string;
+ * 	extendIsValue: string;
  *  observedAttributes?: readonly string[];
  *  namedSlots?: readonly string[];
  * 	props?: Record<string, keyof TypeMap|(new (...args:any[])=>any)>;
@@ -58,11 +56,8 @@ const getChildrenData = (namedSlots, childrenDataArgsPlaceholder) => {
  * 	},
  * )=>InstanceType<BASE_CONSTRUCTOR>}
  * @example
- * // webcomponent context via `WC_extends`
- * static createElement = this.define(...args);
- * //
  */
-export function WC_createElement_bind({ tagName, extendIs, namedSlots = [] }) {
+export function WC_createElement_bind({ tagName, extendIsValue, namedSlots = [] }) {
 	/**
 	 * @type {Record<string, string>|undefined}
 	 */
@@ -72,13 +67,13 @@ export function WC_createElement_bind({ tagName, extendIs, namedSlots = [] }) {
 		 * @type {InstanceType<BASE_CONSTRUCTOR>}
 		 */
 		let element;
-		if (!extendIs) {
+		if (!extendIsValue) {
 			// @ts-expect-error
 			element = document.createElement(tagName);
 		} else {
 			// @ts-expect-error
 			element = document.createElement(tagName, {
-				is: extendIs,
+				is: extendIsValue,
 			});
 		}
 		if (attrs) {

package/src/web/common/WC_DefineCustomElement.mjs

@@ -0,0 +1,46 @@
+// @ts-check
+
+import { WC_createElement_bind } from '../bindings/WC_createElement_bind.mjs';
+
+/**
+ * @import {WC_TagName_type} from '../common/WC_TagName_type.mjs'
+ */
+/**
+ * @typedef {typeof import('../../function/IsTypeOf.mjs').TypeMap} TypeMap
+ */
+/**
+ * @description
+ * - helper funtion for wecomponent instantiator;
+ * - it uses WC_createElement_bind, which uses `lit-html`;
+ * - alternatively, if you want to create a baseline component that are not to be , you can just
+ * @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;
+ * 	extendIsValue: string;
+ * 	observedAttributes?: STANDARD["observedAttributes"];
+ * 	namedSlots?: STANDARD["namedSlots"];
+ * 	props?: STANDARD["props"];
+ * }} CREATEARGS
+ * @template {string} TAG
+ * @param {WC_TagName_type<TAG>} tagName
+ * @param {CREATEARGS} classRef
+ * @param {ElementDefinitionOptions} elementDefinitionOptions
+ * @returns {ReturnType<typeof WC_createElement_bind<CREATEARGS>>}
+ */
+export function WC_DefineCustomElement(tagName, classRef, elementDefinitionOptions) {
+	if (elementDefinitionOptions && elementDefinitionOptions.extends) {
+		classRef.tagName = elementDefinitionOptions.extends;
+		classRef.extendIsValue = tagName;
+	} else {
+		classRef.tagName = tagName;
+	}
+	customElements.define(tagName, classRef, elementDefinitionOptions);
+	return WC_createElement_bind(classRef);
+}