🔤 ce wip

dist/esm-with-signals.d.ts

@@ -1,69 +1,4 @@
-export type Signal<V, A>= (set?: V)=> V & A;
-type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
-//type SymbolSignal= Symbol;
-type SymbolOnclear= symbol;
-type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
-type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
-interface signal{
-	_: Symbol
-	/**
-	 * Simple example:
-	 * ```js
-	 * const hello= S("Hello Signal");
-	 * ```
-	 * …simple todo signal:
-	 * ```js
-	 * const todos= S([], {
-	 * 	add(v){ this.value.push(S(v)); },
-	 * 	remove(i){ this.value.splice(i, 1); },
-	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
-	 * });
-	 * ```
-	 * …computed signal:
-	 * ```js
-	 * const name= S("Jan");
-	 * const surname= S("Andrle");
-	 * const fullname= S(()=> name()+" "+surname());
-	 * ```
-	 * @param value Initial signal value. Or function computing value from other signals.
-	 * @param actions Use to define actions on the signal. Such as add item to the array.
-	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
-	 *		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,
-		...params: A[N] extends (...args: infer P)=> any ? P : never
-	): void;
-	clear(...signals: Signal<any, any>[]): void;
-	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
-	symbols: {
-		//signal: SymbolSignal;
-		onclear: SymbolOnclear;
-	}
-	/**
-	 * Reactive element, which is rendered based on the given signal.
-	 * ```js
-	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
-	 * S.el(listS, list=> list.map(li=> el("li", li)));
-	 * ```
-	 * */
-	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
-
-    observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
-}
-export const signal: signal;
-export const S: signal;
-declare global {
-	type ddeSignal<T, A= {}>= Signal<T, A>;
-	type ddeAction<V>= Action<V>
-	type ddeActions<V>= Actions<V>
-}
+declare global{ /* ddeSignal */ }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
@@ -80,20 +15,20 @@ type AttrsModified= {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
+	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
 	/**
 	 * 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|Signal<-1|0|1|boolean, any>>,
+	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
 	/**
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
-	className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
+	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
-	ariaset: Record<string,string|Signal<string, any>>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
+	ariaset: Record<string,string|ddeSignal<string>>,
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
 type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
 /**
  * Just element attributtes
@@ -103,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<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
+type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & 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 | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
+type textContent= string | ddeSignal<string>;
 export function el<
-	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
+	TAG extends keyof ExtendedHTMLElementTagNameMap,
 	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
 >(
 	tag_name: TAG,
@@ -121,6 +56,11 @@ 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
@@ -148,7 +88,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] | Signal<EL[key], any> | string | number | boolean }>,
+	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
 	...addons: ddeElementAddon<EL>[]
 )=> ddeMathMLElement
 export function elNS(
@@ -189,7 +129,7 @@ interface On{
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
 		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
+			listener: (this: El, event: CustomEvent<El>) => 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 */
@@ -224,7 +164,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<any>[])=> HTMLElement,
+	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
 	
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
@@ -237,15 +177,15 @@ export const scope: {
 
 export function customElementRender<
 	EL extends HTMLElement,
-	P extends any = Record<string, any>
+	P extends any = Record<string, string | ddeSignal<string>>
 >(
 	custom_element: EL,
 	target: ShadowRoot | EL,
-	render: (props: P)=> SupportedElement,
-	props?: P | ((...args: any[])=> P)
+	render: (props: P)=> SupportedElement | DocumentFragment,
+	props?: P | ((el: EL)=> P)
 ): EL
-export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
-export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): 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 observedAttributes(custom_element: HTMLElement): Record<string, string>
 
 /* TypeScript MEH */
@@ -526,3 +466,69 @@ interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTi
 interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
 interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
 interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
+export type Signal<V, A>= (set?: V)=> V & A;
+type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
+//type SymbolSignal= Symbol;
+type SymbolOnclear= symbol;
+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
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name()+" "+surname());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	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,
+		...params: A[N] extends (...args: infer P)=> any ? P : never
+	): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	}
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
+
+    observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+export const signal: signal;
+export const S: signal;
+declare global {
+	type ddeSignal<T, A= {}>= Signal<T, A>;
+	type ddeAction<V>= Action<V>
+	type ddeActions<V>= Actions<V>
+}

dist/esm.d.ts

@@ -1,69 +1,4 @@
-export type Signal<V, A>= (set?: V)=> V & A;
-type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
-//type SymbolSignal= Symbol;
-type SymbolOnclear= symbol;
-type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
-type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
-interface signal{
-	_: Symbol
-	/**
-	 * Simple example:
-	 * ```js
-	 * const hello= S("Hello Signal");
-	 * ```
-	 * …simple todo signal:
-	 * ```js
-	 * const todos= S([], {
-	 * 	add(v){ this.value.push(S(v)); },
-	 * 	remove(i){ this.value.splice(i, 1); },
-	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
-	 * });
-	 * ```
-	 * …computed signal:
-	 * ```js
-	 * const name= S("Jan");
-	 * const surname= S("Andrle");
-	 * const fullname= S(()=> name()+" "+surname());
-	 * ```
-	 * @param value Initial signal value. Or function computing value from other signals.
-	 * @param actions Use to define actions on the signal. Such as add item to the array.
-	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
-	 *		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,
-		...params: A[N] extends (...args: infer P)=> any ? P : never
-	): void;
-	clear(...signals: Signal<any, any>[]): void;
-	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
-	symbols: {
-		//signal: SymbolSignal;
-		onclear: SymbolOnclear;
-	}
-	/**
-	 * Reactive element, which is rendered based on the given signal.
-	 * ```js
-	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
-	 * S.el(listS, list=> list.map(li=> el("li", li)));
-	 * ```
-	 * */
-	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
-
-    observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
-}
-export const signal: signal;
-export const S: signal;
-declare global {
-	type ddeSignal<T, A= {}>= Signal<T, A>;
-	type ddeAction<V>= Action<V>
-	type ddeActions<V>= Actions<V>
-}
+declare global{ /* ddeSignal */ }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
@@ -80,20 +15,20 @@ type AttrsModified= {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
+	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
 	/**
 	 * 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|Signal<-1|0|1|boolean, any>>,
+	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
 	/**
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
-	className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
+	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
-	ariaset: Record<string,string|Signal<string, any>>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
+	ariaset: Record<string,string|ddeSignal<string>>,
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
 type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
 /**
  * Just element attributtes
@@ -103,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<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
+type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & 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 | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
+type textContent= string | ddeSignal<string>;
 export function el<
-	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
+	TAG extends keyof ExtendedHTMLElementTagNameMap,
 	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
 >(
 	tag_name: TAG,
@@ -121,6 +56,11 @@ 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
@@ -148,7 +88,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] | Signal<EL[key], any> | string | number | boolean }>,
+	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
 	...addons: ddeElementAddon<EL>[]
 )=> ddeMathMLElement
 export function elNS(
@@ -189,7 +129,7 @@ interface On{
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
 		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
+			listener: (this: El, event: CustomEvent<El>) => 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 */
@@ -224,7 +164,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<any>[])=> HTMLElement,
+	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
 	
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
@@ -237,15 +177,15 @@ export const scope: {
 
 export function customElementRender<
 	EL extends HTMLElement,
-	P extends any = Record<string, any>
+	P extends any = Record<string, string | ddeSignal<string>>
 >(
 	custom_element: EL,
 	target: ShadowRoot | EL,
-	render: (props: P)=> SupportedElement,
-	props?: P | ((...args: any[])=> P)
+	render: (props: P)=> SupportedElement | DocumentFragment,
+	props?: P | ((el: EL)=> P)
 ): EL
-export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
-export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): 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 observedAttributes(custom_element: HTMLElement): Record<string, string>
 
 /* TypeScript MEH */

docs/p06-customElement.html

@@ -87,4 +87,46 @@ customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
 document.body.append(
 	el(HTMLCustomElement.tagName, { attr: "Attribute" })
 );
-</code></div><script>Flems(document.getElementById("code-example-1-vivfgyxx9kw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import {\\n\\tcustomElementRender,\\n\\tcustomElementWithDDE,\\n} from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tstatic observedAttributes= [ \\\"attr\\\" ];\\n\\tconnectedCallback(){\\n\\t\\tcustomElementRender(\\n\\t\\t\\tthis,\\n\\t\\t\\tthis.attachShadow({ mode: \\\"open\\\" }),\\n\\t\\t\\tddeComponent\\n\\t\\t);\\n\\t}\\n\\tset attr(value){ this.setAttribute(\\\"attr\\\", value); }\\n\\tget attr(){ return this.getAttribute(\\\"attr\\\"); }\\n}\\n\\nimport { el, on, scope } from \\\"./esm-with-signals.js\\\";\\nfunction ddeComponent({ attr }){\\n\\tscope.host(\\n\\t\\ton.connected(e=> console.log(e.target.outerHTML)),\\n\\t);\\n\\treturn el().append(\\n\\t\\tel(\\\"p\\\", `Hello from Custom Element with attribute '${attr}'`)\\n\\t);\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\ndocument.body.append(\\n\\tel(HTMLCustomElement.tagName, { attr: \\\"Attribute\\\" })\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);Line truncated
+</code></div><script>Flems(document.getElementById("code-example-1-vivfgyxx9kw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import {\\n\\tcustomElementRender,\\n\\tcustomElementWithDDE,\\n} from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tstatic observedAttributes= [ \\\"attr\\\" ];\\n\\tconnectedCallback(){\\n\\t\\tcustomElementRender(\\n\\t\\t\\tthis,\\n\\t\\t\\tthis.attachShadow({ mode: \\\"open\\\" }),\\n\\t\\t\\tddeComponent\\n\\t\\t);\\n\\t}\\n\\tset attr(value){ this.setAttribute(\\\"attr\\\", value); }\\n\\tget attr(){ return this.getAttribute(\\\"attr\\\"); }\\n}\\n\\nimport { el, on, scope } from \\\"./esm-with-signals.js\\\";\\nfunction ddeComponent({ attr }){\\n\\tscope.host(\\n\\t\\ton.connected(e=> console.log(e.target.outerHTML)),\\n\\t);\\n\\treturn el().append(\\n\\t\\tel(\\\"p\\\", `Hello from Custom Element with attribute '${attr}'`)\\n\\t);\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\ndocument.body.append(\\n\\tel(HTMLCustomElement.tagName, { attr: \\\"Attribute\\\" })\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);Line truncated
+	customElementRender,
+	customElementWithDDE,
+	observedAttributes,
+	el, on, scope 
+} from "./esm-with-signals.js";
+import { S } from "./esm-with-signals.js";
+export class HTMLCustomElement extends HTMLElement{
+	static tagName= "custom-element";
+	static observedAttributes= [ "attr" ];
+	connectedCallback(){
+		console.log(observedAttributes(this));
+		customElementRender(
+			this,
+			this.attachShadow({ mode: "open" }),
+			ddeComponent,
+			S.observedAttributes
+		);
+	}
+	set attr(value){ this.setAttribute("attr", value); }
+	get attr(){ return this.getAttribute("attr"); }
+}
+
+/** @param {{ attr: ddeSignal&lt;string, {}&gt; }} props */
+function ddeComponent({ attr }){
+	scope.host(
+		on.connected(e=&gt; console.log(e.target.outerHTML)),
+	);
+	return el().append(
+		el("p", S(()=&gt; `Hello from Custom Element with attribute '${attr()}'`))
+	);
+}
+customElementWithDDE(HTMLCustomElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+
+document.body.append(
+	el(HTMLCustomElement.tagName, { attr: "Attribute" })
+);
+setTimeout(
+	()=&gt; document.querySelector(HTMLCustomElement.tagName).setAttribute("attr", "New Value"),
+	3*750
+);
+</code></div><script>Flems(document.getElementById("code-example-1-u3dl2tjmoj4"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import {\\n\\tcustomElementRender,\\n\\tcustomElementWithDDE,\\n\\tobservedAttributes,\\n\\tel, on, scope \\n} from \\\"./esm-with-signals.js\\\";\\nimport { S } from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tstatic observedAttributes= [ \\\"attr\\\" ];\\n\\tconnectedCallback(){\\n\\t\\tconsole.log(observedAttributes(this));\\n\\t\\tcustomElementRender(\\n\\t\\t\\tthis,\\n\\t\\t\\tthis.attachShadow({ mode: \\\"open\\\" }),\\n\\t\\t\\tddeComponent,\\n\\t\\t\\tS.observedAttributes\\n\\t\\t);\\n\\t}\\n\\tset attr(value){ this.setAttribute(\\\"attr\\\", value); }\\n\\tget attr(){ return this.getAttribute(\\\"attr\\\"); }\\n}\\n\\n/** @param {{ attr: ddeSignal<string, {}> }} props */\\nfunction ddeComponent({ attr }){\\n\\tscope.host(\\n\\t\\ton.connected(e=> console.log(e.target.outerHTML)),\\n\\t);\\n\\treturn el().append(\\n\\t\\tel(\\\"p\\\", S(()=> `Hello from Custom Element with attribute '${attr()}'`))\\n\\t);\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\ndocument.body.append(\\n\\tel(HTMLCustomElement.tagName, { attr: \\\"Attribute\\\" })\\n);\\nsetTimeout(\\n\\t()=> document.querySelector(HTMLCustomElement.tagName).setAttribute(\\\"attr\\\", \\\"New Value\\\"),\\n\\t3*750\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\Line truncated

docs_src/components/examples/customElement/observedAttributes.js

@@ -0,0 +1,42 @@
+import {
+	customElementRender,
+	customElementWithDDE,
+	observedAttributes,
+	el, on, scope 
+} from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+export class HTMLCustomElement extends HTMLElement{
+	static tagName= "custom-element";
+	static observedAttributes= [ "attr" ];
+	connectedCallback(){
+		console.log(observedAttributes(this));
+		customElementRender(
+			this,
+			this.attachShadow({ mode: "open" }),
+			ddeComponent,
+			S.observedAttributes
+		);
+	}
+	set attr(value){ this.setAttribute("attr", value); }
+	get attr(){ return this.getAttribute("attr"); }
+}
+
+/** @param {{ attr: ddeSignal<string, {}> }} props */
+function ddeComponent({ attr }){
+	scope.host(
+		on.connected(e=> console.log(e.target.outerHTML)),
+	);
+	return el().append(
+		el("p", S(()=> `Hello from Custom Element with attribute '${attr()}'`))
+	);
+}
+customElementWithDDE(HTMLCustomElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+
+document.body.append(
+	el(HTMLCustomElement.tagName, { attr: "Attribute" })
+);
+setTimeout(
+	()=> document.querySelector(HTMLCustomElement.tagName).setAttribute("attr", "New Value"),
+	3*750
+);

docs_src/p06-customElement.html.js

@@ -81,6 +81,7 @@ export function page({ pkg, info }){
 			and ${el("code", "observedAttributes")} (converts attributes to render function arguments —
 			${el("em", "default")}) or ${el("code", "S.observedAttributes")} (converts attributes to signals).
 		`),
+		el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }),
 
 
 		el(mnemonic)

index.d.ts

@@ -177,12 +177,12 @@ export const scope: {
 
 export function customElementRender<
 	EL extends HTMLElement,
-	P extends any = Record<string, any>
+	P extends any = Record<string, string | ddeSignal<string>>
 >(
 	custom_element: EL,
 	target: ShadowRoot | EL,
 	render: (props: P)=> SupportedElement | DocumentFragment,
-	props?: P | ((...args: any[])=> P)
+	props?: P | ((el: EL)=> P)
 ): EL
 export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
 export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL

signals.d.ts

@@ -55,7 +55,7 @@ interface signal{
 	 * */
 	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
 
-    observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
+    observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
 }
 export const signal: signal;
 export const S: signal;