@xtia/jel 0.3.0 → 0.3.2

package/README.md

@@ -89,7 +89,7 @@ Element classes can be specified as string, `{ [className]: boolean }` and arbit
 function renderFancyButton(
     caption: DOMContent,
     onClick: () => void,
-    classes: ElementClassDefinition = []
+    classes: ElementClassDescriptor = []
 ) {
     return $.button({
         content: caption,
@@ -118,8 +118,8 @@ Jel wraps its elements in an interface for common operations plus an `append()`
 For other operations the element is accessible via `ent.element`:
 
 ```ts
-const button = $.button();
-const rect = button.element.getBoundingClientRect();
+const div = $.div();
+div.element.requestFullscreen();
 ```
 
 ## Shorthand

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,16 +33,36 @@ 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;
+    focus(): void;
+    blur(): void;
 } & (T extends HTMLInputElement ? {
     value: string;
+    select(): void;
+} : T extends HTMLCanvasElement ? {
+    width: number;
+    height: number;
+    getContext(contextId: "2d", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D | null;
+    getContext(contextId: "bitmaprenderer", options?: ImageBitmapRenderingContextSettings): ImageBitmapRenderingContext | null;
+    getContext(contextId: "webgl", options?: WebGLContextAttributes): WebGLRenderingContext | null;
+    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) {
@@ -129,7 +128,13 @@ var attribsProxy = {
     set: function (element, key, value) {
         element.setAttribute(key, value);
         return true;
-    }
+    },
+    has: function (element, key) {
+        return element.hasAttribute(key);
+    },
+    ownKeys: function (element) {
+        return element.getAttributeNames();
+    },
 };
 var recursiveAppend = function (parent, c) {
     if (c === null)
@@ -185,7 +190,24 @@ 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();
+            },
+            _a.focus = function () {
+                element.focus();
+            },
+            _a.blur = function () {
+                element.blur();
+            },
+            _a.select = function () {
+                element.select();
+            },
+            _a.getContext = function (mode, options) {
+                return element.getContext(mode, options);
             },
             Object.defineProperty(_a, "content", {
                 get: function () {
@@ -223,7 +245,27 @@ function getWrappedElement(element) {
                 enumerable: false,
                 configurable: true
             }),
-            _a.style = new Proxy(element.style, elementProxy),
+            Object.defineProperty(_a, "width", {
+                get: function () {
+                    return element.width;
+                },
+                set: function (v) {
+                    element.width = v;
+                },
+                enumerable: false,
+                configurable: true
+            }),
+            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.0",
+  "version": "0.3.2",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"