@xtia/jel 0.1.2 → 0.2.0

package/index.d.ts

@@ -22,8 +22,7 @@ interface ElementDescriptor {
         [key in keyof CSSStyleDeclaration]: string | number;
     }> & Record<string, string | number>;
 }
-type HelperSelectorString<T extends string> = T | `${T}${"#" | "."}${any}`;
-type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: HelperSelectorString<T>, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & ((selector: string, content?: DOMContent) => DomEntity<any>) & (<T extends HTMLElement>(element: T) => DomEntity<T>) & {
+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]>;
@@ -31,8 +30,6 @@ type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descripto
 type JelComponentData = {
     dom: DOMContent;
 };
-export declare const $: DomHelper;
-declare const componentDataSymbol: unique symbol;
 type ElementAPI<T extends HTMLElement> = {
     readonly element: T;
     content: DOMContent;
@@ -46,5 +43,13 @@ type ElementAPI<T extends HTMLElement> = {
     append(...content: DOMContent[]): void;
     remove(): void;
 };
-export declare function definePart<Spec, API extends object | void, EventDataMap extends Record<string, any> = {}>(defaultOptions: Spec, init: (spec: Spec, append: (content: DOMContent) => void, trigger: <K extends keyof EventDataMap>(eventId: K, eventData: EventDataMap[K]) => void) => API): JelConstructor<Spec, API, EventDataMap>;
+type OptionalKeys<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
+}[keyof T];
+type Optionals<T> = {
+    [K in OptionalKeys<T>]-?: Exclude<T[K], undefined>;
+};
+export declare const $: DomHelper;
+declare const componentDataSymbol: unique symbol;
+export declare function definePart<Spec, API extends object | void = void, EventDataMap extends Record<string, any> = {}>(defaultOptions: Optionals<Spec>, init: (spec: Required<Spec>, append: (content: DOMContent) => void, trigger: <K extends keyof EventDataMap>(eventId: K, eventData: EventDataMap[K]) => void) => API): JelConstructor<Spec, API, EventDataMap>;
 export {};

package/index.js

@@ -19,8 +19,9 @@ function createElement(tag, descriptor) {
         descriptor = { content: descriptor };
     var ent = getWrappedElement(document.createElement(tag));
     var applyClasses = function (classes) {
-        if (Array.isArray(classes))
+        if (Array.isArray(classes)) {
             return classes.forEach(function (c) { return applyClasses(c); });
+        }
         if (typeof classes == "string") {
             classes.trim().split(/\s+/).forEach(function (c) { return ent.classes.add(c); });
             return;
@@ -32,7 +33,7 @@ function createElement(tag, descriptor) {
         });
     };
     applyClasses(descriptor.classes || []);
-    if (descriptor.attribs)
+    if (descriptor.attribs) {
         Object.entries(descriptor.attribs).forEach(function (_a) {
             var k = _a[0], v = _a[1];
             if (v === false) {
@@ -40,6 +41,7 @@ function createElement(tag, descriptor) {
             }
             ent.element.setAttribute(k, v === true ? k : v);
         });
+    }
     var addContent = function (content) {
         if (Array.isArray(content))
             return content.forEach(function (c) { return addContent(c); });
@@ -48,19 +50,23 @@ function createElement(tag, descriptor) {
     };
     if (descriptor.content)
         addContent(descriptor.content);
-    descriptor.style && Object.entries(descriptor.style).forEach(function (_a) {
-        var prop = _a[0], val = _a[1];
-        if (/\-/.test(prop)) {
-            ent.element.style.setProperty(prop, val.toString());
-        }
-        else {
-            ent.element.style[prop] = val;
-        }
-    });
-    descriptor.on && Object.entries(descriptor.on).forEach(function (_a) {
-        var eventName = _a[0], handler = _a[1];
-        return ent.on(eventName, handler);
-    });
+    if (descriptor.style) {
+        Object.entries(descriptor.style).forEach(function (_a) {
+            var prop = _a[0], val = _a[1];
+            if (/\-/.test(prop)) {
+                ent.element.style.setProperty(prop, val.toString());
+            }
+            else {
+                ent.element.style[prop] = val;
+            }
+        });
+    }
+    if (descriptor.on) {
+        Object.entries(descriptor.on).forEach(function (_a) {
+            var eventName = _a[0], handler = _a[1];
+            return ent.on(eventName, handler);
+        });
+    }
     return ent;
 }
 ;
@@ -72,7 +78,7 @@ var isContent = function (value) {
         || !value;
 };
 exports.$ = new Proxy(createElement, {
-    apply: function (create, _0, _a) {
+    apply: function (create, _, _a) {
         var _b;
         var selectorOrTagName = _a[0], contentOrDescriptor = _a[1];
         if (selectorOrTagName instanceof HTMLElement)
@@ -105,53 +111,6 @@ exports.$ = new Proxy(createElement, {
 });
 var componentDataSymbol = Symbol("jelComponentData");
 var elementWrapCache = new WeakMap();
-function definePart(defaultOptions, init) {
-    return (function (partialSpec) {
-        var _a, _b;
-        if (partialSpec === void 0) { partialSpec = {}; }
-        var spec = __assign(__assign({}, defaultOptions), partialSpec);
-        var eventHandlers = {};
-        var addEventListener = function (eventId, fn) {
-            if (!eventHandlers[eventId])
-                eventHandlers[eventId] = [];
-            eventHandlers[eventId].push(fn);
-        };
-        if (spec.on)
-            Object.entries(spec.on).forEach(function (_a) {
-                var eventId = _a[0], handler = _a[1];
-                addEventListener(eventId, handler);
-            });
-        var entity;
-        var content = [];
-        var append = function (c) {
-            if (entity)
-                throw new Error("Component root content can only be added during initialisation");
-            content.push(c);
-        };
-        var trigger = function (eventId, data) {
-            var _a;
-            (_a = eventHandlers[eventId]) === null || _a === void 0 ? void 0 : _a.forEach(function (fn) { return fn.call(entity, data); });
-        };
-        var api = init(spec, append, trigger);
-        entity = api ? Object.create(api, (_a = {},
-            _a[componentDataSymbol] = {
-                value: {
-                    dom: content
-                }
-            },
-            _a.on = {
-                value: addEventListener,
-            },
-            _a)) : (_b = {},
-            _b[componentDataSymbol] = {
-                dom: content,
-            },
-            _b.on = addEventListener,
-            _b);
-        return entity;
-    });
-}
-;
 var attribsProxy = {
     get: function (element, key) {
         return element.getAttribute(key);
@@ -165,8 +124,6 @@ function getWrappedElement(element) {
     var _a;
     if (!elementWrapCache.has(element)) {
         var recursiveAppend_1 = function (c) {
-            if (c === undefined)
-                debugger;
             if (c === null)
                 return;
             if (Array.isArray(c)) {
@@ -244,3 +201,49 @@ function getWrappedElement(element) {
 function isJelEntity(content) {
     return typeof content == "object" && !!content && componentDataSymbol in content;
 }
+function definePart(defaultOptions, init) {
+    return (function (spec) {
+        var _a, _b;
+        var fullSpec = __assign(__assign({}, defaultOptions), spec);
+        var eventHandlers = {};
+        var addEventListener = function (eventId, fn) {
+            if (!eventHandlers[eventId])
+                eventHandlers[eventId] = [];
+            eventHandlers[eventId].push(fn);
+        };
+        if (fullSpec.on)
+            Object.entries(fullSpec.on).forEach(function (_a) {
+                var eventId = _a[0], handler = _a[1];
+                addEventListener(eventId, handler);
+            });
+        var entity;
+        var content = [];
+        var append = function (c) {
+            if (entity)
+                throw new Error("Component root content can only be added during initialisation");
+            content.push(c);
+        };
+        var trigger = function (eventId, data) {
+            var _a;
+            (_a = eventHandlers[eventId]) === null || _a === void 0 ? void 0 : _a.forEach(function (fn) { return fn.call(entity, data); });
+        };
+        var api = init(fullSpec, append, trigger);
+        entity = api ? Object.create(api, (_a = {},
+            _a[componentDataSymbol] = {
+                value: {
+                    dom: content
+                }
+            },
+            _a.on = {
+                value: addEventListener,
+            },
+            _a)) : (_b = {},
+            _b[componentDataSymbol] = {
+                dom: content,
+            },
+            _b.on = addEventListener,
+            _b);
+        return entity;
+    });
+}
+;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@xtia/jel",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"
   },
-  "description": "Lightweight DOM wrapper",
+  "description": "Lightweight DOM manipulation and componentisation",
   "main": "index.js",
   "keywords": [
     "dom"