From 4f788459b9c352294b296cee68302d6795fab5b8 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Mon, 3 Jun 2024 16:23:05 +0200 Subject: [PATCH 1/2] :bug: Signal&ddeSignal type - in elements use ddSignal for better compatibility with ponetially another implementation - fixed incorrect detection of `S(()=> any)` and `S(non-function, any)` --- index.d.ts | 18 +++++++++--------- signals.d.ts | 8 ++++---- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/index.d.ts b/index.d.ts index 42c559d..c0d68cd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,4 +1,4 @@ -import { Signal } from "./signals"; +declare global{ /* ddeSignal */ } 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 | Signal | Partial<{ [K in keyof CSSStyleDeclaration]: Signal }> + style: string | Partial | ddeSignal | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> /** * 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>, + classList: Record>, /** * By default simiral to `className`, but also supports `string[]` * */ - className: string | (string|boolean|undefined|Signal)[]; + className: string | (string|boolean|undefined|ddeSignal)[]; /** * Sets `aria-*` simiraly to `dataset` * */ - ariaset: Record>, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal> & Record<`.${string}`, any> + ariaset: Record>, +} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> & Record<`.${string}`, any> type _fromElsInterfaces= Omit; /** * Just element attributtes @@ -38,13 +38,13 @@ type _fromElsInterfaces= Omit= Partial<_fromElsInterfaces & { [K in keyof _fromElsInterfaces]: Signal<_fromElsInterfaces[K], any> } & AttrsModified> & Record; +type ElementAttributes= Partial<{ [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> } & AttrsModified> & Record; export function classListDeclarative(element: El, classList: AttrsModified["classList"]): El export function assign(element: El, ...attrs_array: ElementAttributes[]): El export function assignAttribute>(element: El, attr: ATT, value: ElementAttributes[ATT]): ElementAttributes[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; -type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal` leads to `attrs?: any` +type textContent= string | ddeSignal; export function el< TAG extends keyof ExtendedHTMLElementTagNameMap & string, EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement) @@ -83,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] | Signal | string | number | boolean }>, + attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean }>, ...addons: ddeElementAddon[] )=> ddeMathMLElement export function elNS( diff --git a/signals.d.ts b/signals.d.ts index 753ec07..517f83b 100644 --- a/signals.d.ts +++ b/signals.d.ts @@ -6,6 +6,10 @@ type Actions= Record>; type OnListenerOptions= Pick & { first_time?: boolean }; interface signal{ _: Symbol + /** + * Computations signal. This creates a signal which is computed from other signals. + * */ + any>(computation: V): Signal, {}> /** * Simple example: * ```js @@ -31,10 +35,6 @@ interface signal{ * by `S.clear`. * */ >(value: V, actions?: A): Signal; - /** - * Computations signal. This creates a signal which is computed from other signals. - * */ - (computation: ()=> V): Signal action>, A extends (S extends Signal ? A : never), N extends keyof A>( signal: S, name: N, From a0a104ac0b9b1e45822dcb8e72e4483f4d606f88 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Wed, 5 Jun 2024 16:21:13 +0200 Subject: [PATCH 2/2] :bug: mainly `el` types fix --- index.d.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/index.d.ts b/index.d.ts index c0d68cd..af12b5e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -46,7 +46,7 @@ export function assignAttribute; export function el< - TAG extends keyof ExtendedHTMLElementTagNameMap & string, + TAG extends keyof ExtendedHTMLElementTagNameMap, EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement) >( tag_name: TAG, @@ -56,6 +56,11 @@ export function el< export function el( tag_name?: "<>", ): ddeDocumentFragment +export function el( + tag_name: string, + attrs?: ElementAttributes, + ...addons: ddeElementAddon[] +): ddeHTMLElement export function el< C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment @@ -124,7 +129,7 @@ interface On{ EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) >( - listener: (this: El, event: CustomEvent) => any, + listener: (this: El, event: CustomEvent) => 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 */ @@ -159,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[])=> HTMLElement, + host: (...addons: ddeElementAddon[])=> HTMLElement, state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ @@ -176,11 +181,11 @@ export function customElementRender< >( custom_element: EL, target: ShadowRoot | EL, - render: (props: P)=> SupportedElement, + render: (props: P)=> SupportedElement | DocumentFragment, props?: P | ((...args: any[])=> P) ): EL -export function customElementWithDDE(custom_element: EL): EL -export function lifecyclesToEvents(custom_element: EL): EL +export function customElementWithDDE HTMLElement)>(custom_element: EL): EL +export function lifecyclesToEvents HTMLElement)>(custom_element: EL): EL export function observedAttributes(custom_element: HTMLElement): Record /* TypeScript MEH */