@xtia/jel 0.4.2 → 0.4.4

package/index.d.ts

@@ -1,8 +1,6 @@
 export type ElementClassDescriptor = string | Record<string, boolean> | ElementClassDescriptor[];
 export type DOMContent = number | null | string | Element | JelEntity<object> | Text | DOMContent[];
 export type DomEntity<T extends HTMLElement> = JelEntity<ElementAPI<T>>;
-export type AppendableDomEntity = DomEntity<AppendableElement>;
-type AppendableElement = HTMLElementTagNameMap[Exclude<keyof HTMLElementTagNameMap, ContentlessTag>];
 type PartConstructor<Spec, API extends object | void, EventDataMap> = (spec: Spec & EventSpec<EventDataMap>) => JelEntity<EventHost<API, EventDataMap>>;
 type EventSpec<EventDataMap> = EventDataMap extends object ? {
     on?: {
@@ -20,9 +18,11 @@ type StylesDescriptor = {
     ] extends [string, string] ? K : never]+?: CSSValue;
 };
 type StyleAccessor = StylesDescriptor & ((styles: StylesDescriptor) => void) & ((property: keyof StylesDescriptor, value: CSSValue) => void);
-type ContentlessTag = "area" | "base" | "basefont" | "br" | "col" | "frame" | "hr" | "img" | "input" | "isindex" | "link" | "meta" | "param" | "textarea";
+type ContentlessTag = "area" | "br" | "hr" | "iframe" | "input" | "textarea" | "img" | "canvas" | "link" | "meta";
 type TagWithHref = "a" | "link";
-type TagWithSrc = "img" | "script" | "iframe";
+type TagWithSrc = "img" | "script" | "iframe" | "video" | "audio";
+type TagWithValue = "input" | "textarea";
+type ContentlessElement = HTMLElementTagNameMap[ContentlessTag];
 type ElementDescriptor<Tag extends string> = {
     classes?: ElementClassDescriptor;
     attribs?: Record<string, string | number | boolean>;
@@ -31,13 +31,13 @@ type ElementDescriptor<Tag extends string> = {
     };
     style?: StylesDescriptor;
     cssVariables?: Record<string, CSSValue>;
-} & (Tag extends "input" | "textarea" ? {
+} & (Tag extends TagWithValue ? {
     value?: string | number;
-} : Tag extends ContentlessTag ? {} : {
+} : {}) & (Tag extends ContentlessTag ? {} : {
     content?: DOMContent;
 }) & (Tag extends TagWithSrc ? {
     src?: string;
-} : Tag extends TagWithHref ? {
+} : {}) & (Tag extends TagWithHref ? {
     href?: string;
 } : {});
 type ElementAPI<T extends HTMLElement> = EventHost<{
@@ -47,28 +47,33 @@ type ElementAPI<T extends HTMLElement> = EventHost<{
         [key: string]: string | null;
     };
     style: StyleAccessor;
-    innerHTML: string;
     setCSSVariable(table: Record<string, CSSValue>): void;
     setCSSVariable(variableName: string, value: CSSValue): void;
     qsa(selector: string): (Element | DomEntity<HTMLElement>)[];
-    append(...content: DOMContent[]): void;
     remove(): void;
     getRect(): DOMRect;
     focus(): void;
     blur(): void;
-} & (T extends AppendableElement ? {
+} & (T extends ContentlessElement ? {} : {
+    append(...content: DOMContent[]): void;
+    innerHTML: string;
     content: DOMContent;
-} : {}) & (T extends HTMLInputElement ? {
+}) & (T extends HTMLElementTagNameMap[TagWithValue] ? {
     value: string;
     select(): void;
-} : T extends HTMLCanvasElement ? {
+} : {}) & (T extends HTMLCanvasElement ? {
     width: number;
     height: number;
     getContext: HTMLCanvasElement["getContext"];
-} : T extends HTMLElementTagNameMap[TagWithSrc] ? {
+} : {}) & (T extends HTMLElementTagNameMap[TagWithSrc] ? {
     src: string;
-} : T extends HTMLElementTagNameMap[TagWithHref] ? {
+} : {}) & (T extends HTMLElementTagNameMap[TagWithHref] ? {
     href: string;
+} : {}) & (T extends HTMLMediaElement ? {
+    play(): void;
+    pause(): void;
+    currentTime: number;
+    readonly paused: boolean;
 } : {}), HTMLElementEventMap>;
 type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}#${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}.${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: T, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends HTMLElement>(element: T) => DomEntity<T>) & {
     [T in keyof HTMLElementTagNameMap]: (descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>;

package/index.js

@@ -158,9 +158,7 @@ function getWrappedElement(element) {
             append(...content) {
                 recursiveAppend(element, content);
             },
-            remove() {
-                element.remove();
-            },
+            remove: () => element.remove(),
             setCSSVariable(variableNameOrTable, value) {
                 if (typeof variableNameOrTable == "object") {
                     Object.entries(variableNameOrTable).forEach(([k, v]) => setCSSVariable(k, v));
@@ -168,24 +166,17 @@ function getWrappedElement(element) {
                 }
                 setCSSVariable(variableNameOrTable, value);
             },
-            classes: element.classList,
             qsa(selector) {
                 const results = [];
                 element.querySelectorAll(selector).forEach((el) => results.push(el instanceof HTMLElement ? getWrappedElement(el) : el));
                 return results;
             },
-            getRect() {
-                return element.getBoundingClientRect();
-            },
-            focus() {
-                element.focus();
-            },
-            blur() {
-                element.blur();
-            },
-            select() {
-                element.select();
-            },
+            getRect: () => element.getBoundingClientRect(),
+            focus: () => element.focus(),
+            blur: () => element.blur(),
+            select: () => element.select(),
+            play: () => element.play(),
+            pause: () => element.pause(),
             getContext(mode, options) {
                 return element.getContext(mode, options);
             },
@@ -232,12 +223,22 @@ function getWrappedElement(element) {
                 element.width = v;
             },
             get height() {
-                return element.width;
+                return element.height;
             },
             set height(v) {
                 element.height = v;
             },
+            get currentTime() {
+                return element.currentTime;
+            },
+            set currentTime(v) {
+                element.currentTime = v;
+            },
+            get paused() {
+                return element.paused;
+            },
             style: new Proxy(() => element.style, styleProxy),
+            classes: element.classList,
         };
         elementWrapCache.set(element, domEntity);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtia/jel",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"