@xtia/jel 0.3.0 → 0.3.1

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

@@ -47,8 +47,20 @@ type ElementAPI<T extends HTMLElement> = {
     qsa(selector: string): 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 OptionalKeys<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? K : never;

package/index.js

@@ -129,7 +129,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)
@@ -187,6 +193,21 @@ function getWrappedElement(element) {
             _a.qsa = function (selector) {
                 return [].slice.call(element.querySelectorAll(selector)).map(function (el) { return getWrappedElement(el); });
             },
+            _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 () {
                     return [].slice.call(element.children).map(function (child) {
@@ -223,6 +244,16 @@ function getWrappedElement(element) {
                 enumerable: false,
                 configurable: true
             }),
+            Object.defineProperty(_a, "width", {
+                get: function () {
+                    return element.width;
+                },
+                set: function (v) {
+                    element.width = v;
+                },
+                enumerable: false,
+                configurable: true
+            }),
             _a.style = new Proxy(element.style, elementProxy),
             _a);
         elementWrapCache.set(element, domEntity_1);

package/package.json

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