@xtia/jel 0.4.1 → 0.4.3

package/index.d.ts

@@ -1,6 +1,8 @@
 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 ContainerDomEntity = DomEntity<ContainerElement>;
+type ContainerElement = 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,7 +22,7 @@ type StylesDescriptor = {
 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 TagWithHref = "a" | "link";
-type TagWithSrc = "img" | "script" | "iframe";
+type TagWithSrc = "img" | "script" | "iframe" | "video" | "audio";
 type ElementDescriptor<Tag extends string> = {
     classes?: ElementClassDescriptor;
     attribs?: Record<string, string | number | boolean>;
@@ -34,9 +36,9 @@ type ElementDescriptor<Tag extends string> = {
 } : Tag extends ContentlessTag ? {} : {
     content?: DOMContent;
 }) & (Tag extends TagWithSrc ? {
-    src: string;
+    src?: string;
 } : Tag extends TagWithHref ? {
-    href: string;
+    href?: string;
 } : {});
 type ElementAPI<T extends HTMLElement> = EventHost<{
     readonly element: T;
@@ -49,14 +51,14 @@ type ElementAPI<T extends HTMLElement> = EventHost<{
     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 ContentlessTag ? {} : {
+} & (T extends ContainerElement ? {
+    append(...content: DOMContent[]): void;
     content: DOMContent;
-}) & (T extends HTMLInputElement ? {
+} : {}) & (T extends HTMLInputElement ? {
     value: string;
     select(): void;
 } : T extends HTMLCanvasElement ? {
@@ -67,6 +69,11 @@ type ElementAPI<T extends HTMLElement> = EventHost<{
     src: string;
 } : 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.1",
+  "version": "0.4.3",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"