docs_src/components/examples/customElement/customElementWithDDE.js

@@ -11,13 +11,7 @@ customElementWithDDE(HTMLCustomElement);
 customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
 
 const instance= el(HTMLCustomElement.tagName);
-on.connected( // preffered
-	e=> console.log("Element connected to the DOM (v1):", e)
-)(instance);
-instance.addEventListener(
-	"dde:connected",
-	e=> console.log("Element connected to the DOM (v2):", e)
-);
+on.connected(e=> console.log("Element connected to the DOM:", e))(instance);
 document.body.append(
 	instance,
 );

docs_src/components/examples/customElement/dde.js

@@ -23,7 +23,7 @@ function ddeComponent({ attr }){
 	);
 	return el().append(
 		el("p", `Hello from Custom Element with attribute '${attr}'`)
-	);
+	)
 }
 customElementWithDDE(HTMLCustomElement);
 customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);

docs_src/components/mnemonic/customElement-init.js

@@ -4,7 +4,7 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
 export function mnemonic(){
 	return mnemonicUl().append(
 		el("li").append(
-			el("code", "customElementRender(<custom-element>, <connect-target>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>",
+			el("code", "customElementRender(<custom-element>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>",
 		),
 		el("li").append(
 			el("code", "customElementWithDDE(<custom-element>)"), " — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decorator",

docs_src/p06-customElement.html.js

@@ -68,19 +68,7 @@ export function page({ pkg, info }){
 		el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }),
 
 		el("h3", t`Custom Elements with DDE`),
-		el("p").append(...T`
-			The ${el("code", "customElementWithDDE")} function is only (small) part of the inregration of the library.
-			More important for coexistence is render component function as a body of the Custom Element. For that, you
-			can use ${el("code", "customElementRender")} with arguments instance reference, target for connection,
-			render function and optional properties (will be passed to the render function) see later…
-		`),
 		el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }),
-		el("p").append(...T`
-			…as you can see, you can use components created based on the documentation previously introduced. To unlock
-			full potential, use with combination ${el("code", "customElementWithDDE")} (allows to use livecycle events)
-			and ${el("code", "observedAttributes")} (converts attributes to render function arguments —
-			${el("em", "default")}) or ${el("code", "S.observedAttributes")} (converts attributes to signals).
-		`),
 
 
 		el(mnemonic)

index.d.ts

@@ -1,4 +1,4 @@
-declare global{ /* ddeSignal */ }
+import { Signal } from "./signals";
 
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
@@ -15,20 +15,20 @@ type AttrsModified= {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+	style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
 	/**
 	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
 	 */
-	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
+	classList: Record<string,-1|0|1|boolean|Signal<-1|0|1|boolean, any>>,
 	/**
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
-	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
+	className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
-	ariaset: Record<string,string|ddeSignal<string>>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
+	ariaset: Record<string,string|Signal<string, any>>,
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
 type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
 /**
  * Just element attributtes
@@ -38,15 +38,15 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
+type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
 export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
-type textContent= string | ddeSignal<string>;
+type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
 export function el<
-	TAG extends keyof ExtendedHTMLElementTagNameMap,
+	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
 	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
 >(
 	tag_name: TAG,
@@ -56,11 +56,6 @@ export function el<
 export function el(
 	tag_name?: "<>",
 ): ddeDocumentFragment
-export function el(
-	tag_name: string,
-	attrs?: ElementAttributes<HTMLElement>,
-	...addons: ddeElementAddon<HTMLElement>[]
-): ddeHTMLElement
 
 export function el<
 	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
@@ -88,7 +83,7 @@ export function elNS(
 	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
 >(
 	tag_name: TAG,
-	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
+	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Signal<EL[key], any> | string | number | boolean }>,
 	...addons: ddeElementAddon<EL>[]
 )=> ddeMathMLElement
 export function elNS(
@@ -129,7 +124,7 @@ interface On{
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
 		>(
-			listener: (this: El, event: CustomEvent<El>) => any,
+			listener: (this: El, event: CustomEvent<void>) => any,
 			options?: AddEventListenerOptions
 		) : EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
@@ -164,7 +159,7 @@ export const scope: {
 	 * It can be also used to register Addon(s) (functions to be called when component is initized)
 	 * — `scope.host(on.connected(console.log))`.
 	 * */
-	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
+	host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
 	
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
@@ -181,11 +176,11 @@ export function customElementRender<
 >(
 	custom_element: EL,
 	target: ShadowRoot | EL,
-	render: (props: P)=> SupportedElement | DocumentFragment,
+	render: (props: P)=> SupportedElement,
 	props?: P | ((...args: any[])=> P)
 ): EL
-export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
-export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
+export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
+export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
 export function observedAttributes(custom_element: HTMLElement): Record<string, string>
 
 /* TypeScript MEH */

signals.d.ts

@@ -6,10 +6,6 @@ type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
 type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
 interface signal{
 	_: Symbol
-	/**
-	 * Computations signal. This creates a signal which is computed from other signals.
-	 * */
-	<V extends ()=> any>(computation: V): Signal<ReturnType<V>, {}>
 	/**
 	 * Simple example:
 	 * ```js
@@ -35,6 +31,10 @@ interface signal{
 	 *		by `S.clear`.
 	 * */
 	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V>(computation: ()=> V): Signal<V, {}>
 	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
 		signal: S,
 		name: N,