@xtia/jel 0.3.1 → 0.3.2

package/index.d.ts

@@ -11,6 +11,7 @@ type JelEntity<API, EventDataMap> = API & {
     on<E extends keyof EventDataMap>(eventId: E, handler: (this: JelEntity<API, EventDataMap>, data: EventDataMap[E]) => void): void;
     readonly [componentDataSymbol]: JelComponentData;
 };
+type CSSValue = string | number;
 type StylesDescriptor = Partial<{
     [key in keyof CSSStyleDeclaration]: CSSValue;
 }>;
@@ -24,15 +25,7 @@ interface ElementDescriptor {
     style?: StylesDescriptor;
     cssVariables?: Record<string, CSSValue>;
 }
-type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}#${string}`, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}.${string}`, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: T, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends HTMLElement>(element: T) => DomEntity<T>) & {
-    [T in keyof HTMLElementTagNameMap]: (descriptor: ElementDescriptor) => DomEntity<HTMLElementTagNameMap[T]>;
-} & {
-    [T in keyof HTMLElementTagNameMap]: (content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>;
-});
-type JelComponentData = {
-    dom: DOMContent;
-};
-type CSSValue = string | number;
+type StyleAccessor = StylesDescriptor & ((styles: StylesDescriptor) => void) & ((property: string, value: CSSValue) => void);
 type ElementAPI<T extends HTMLElement> = {
     readonly element: T;
     content: DOMContent;
@@ -40,11 +33,11 @@ type ElementAPI<T extends HTMLElement> = {
     attribs: {
         [key: string]: string | null;
     };
-    style: StylesDescriptor & ((styles: StylesDescriptor) => void);
+    style: StyleAccessor;
     innerHTML: string;
     setCSSVariable(table: Record<string, CSSValue>): void;
     setCSSVariable(variableName: string, value: CSSValue): void;
-    qsa(selector: string): DomEntity<any>[];
+    qsa(selector: string): (Element | DomEntity<any>)[];
     append(...content: DOMContent[]): void;
     remove(): void;
     getRect(): DOMRect;
@@ -62,6 +55,14 @@ type ElementAPI<T extends HTMLElement> = {
     getContext(contextId: "webgl2", options?: WebGLContextAttributes): WebGL2RenderingContext | null;
     getContext(contextId: string, options?: any): RenderingContext | null;
 } : {});
+type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}#${string}`, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}.${string}`, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: T, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends HTMLElement>(element: T) => DomEntity<T>) & {
+    [T in keyof HTMLElementTagNameMap]: (descriptor: ElementDescriptor) => DomEntity<HTMLElementTagNameMap[T]>;
+} & {
+    [T in keyof HTMLElementTagNameMap]: (content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>;
+});
+type JelComponentData = {
+    dom: DOMContent;
+};
 type OptionalKeys<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
 }[keyof T];

package/index.js

@@ -13,20 +13,25 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$ = void 0;
 exports.definePart = definePart;
-var elementProxy = {
+var styleProxy = {
     get: function (style, prop) {
-        return style[prop];
+        return style()[prop];
     },
     set: function (style, prop, value) {
-        style[prop] = value;
+        style()[prop] = value;
         return true;
     },
-    apply: function (style, _, _a) {
-        var styles = _a[0];
-        Object.entries(styles).forEach(function (_a) {
-            var prop = _a[0], val = _a[1];
-            return style[prop] = val;
-        });
+    apply: function (getStyle, _, _a) {
+        var stylesOrProp = _a[0], value = _a[1];
+        var style = getStyle();
+        if (typeof stylesOrProp == "object") {
+            Object.entries(stylesOrProp).forEach(function (_a) {
+                var prop = _a[0], val = _a[1];
+                return style[prop] = val;
+            });
+            return;
+        }
+        style.setProperty(stylesOrProp, value);
     },
 };
 function createElement(tag, descriptor) {
@@ -61,16 +66,10 @@ function createElement(tag, descriptor) {
     if (descriptor.content !== undefined)
         recursiveAppend(ent.element, descriptor.content);
     if (descriptor.style) {
-        Object.entries(descriptor.style).forEach(function (_a) {
-            var prop = _a[0], val = _a[1];
-            ent.element.style[prop] = val;
-        });
+        ent.style(descriptor.style);
     }
     if (descriptor.cssVariables) {
-        Object.entries(descriptor.cssVariables).forEach(function (_a) {
-            var prop = _a[0], val = _a[1];
-            ent.element.style.setProperty("--" + prop, val);
-        });
+        ent.setCSSVariable(descriptor.cssVariables);
     }
     if (descriptor.on) {
         Object.entries(descriptor.on).forEach(function (_a) {
@@ -191,7 +190,9 @@ function getWrappedElement(element) {
             },
             _a.classes = element.classList,
             _a.qsa = function (selector) {
-                return [].slice.call(element.querySelectorAll(selector)).map(function (el) { return getWrappedElement(el); });
+                var results = [];
+                element.querySelectorAll(selector).forEach(function (el) { return results.push(el instanceof HTMLElement ? getWrappedElement(el) : el); });
+                return results;
             },
             _a.getRect = function () {
                 return element.getBoundingClientRect();
@@ -254,7 +255,17 @@ function getWrappedElement(element) {
                 enumerable: false,
                 configurable: true
             }),
-            _a.style = new Proxy(element.style, elementProxy),
+            Object.defineProperty(_a, "height", {
+                get: function () {
+                    return element.width;
+                },
+                set: function (v) {
+                    element.height = v;
+                },
+                enumerable: false,
+                configurable: true
+            }),
+            _a.style = new Proxy(function () { return element.style; }, styleProxy),
             _a);
         elementWrapCache.set(element, domEntity_1);
     }

package/package.json

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