@xtia/jel 0.1.3 → 0.2.1

package/index.d.ts

@@ -11,6 +11,9 @@ 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 Styles = Partial<{
+    [key in keyof CSSStyleDeclaration]: string | number;
+}> & Record<`--${string}`, string | number>;
 interface ElementDescriptor {
     classes?: ElementClassSpec;
     content?: DOMContent;
@@ -18,9 +21,7 @@ interface ElementDescriptor {
     on?: Partial<{
         [E in keyof HTMLElementEventMap]: (event: HTMLElementEventMap[E]) => void;
     }>;
-    style?: Partial<{
-        [key in keyof CSSStyleDeclaration]: string | number;
-    }> & Record<string, string | number>;
+    style?: Styles;
 }
 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]>;
@@ -30,8 +31,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;
@@ -45,5 +44,14 @@ 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;
+type Reserve<T> = Record<string, any> & Partial<Record<keyof T, never>>;
+export declare function definePart<Spec extends Reserve<CommonOptions<any>>, API extends Reserve<JelEntity<void, any>> | 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,27 +41,26 @@ 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); });
-        if (content)
-            ent.append(content);
-    };
+    }
     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);
-    });
+        recursiveAppend(ent.element, descriptor.content);
+    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 +72,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 +105,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);
@@ -161,26 +114,24 @@ var attribsProxy = {
         return true;
     }
 };
+var recursiveAppend = function (parent, c) {
+    if (c === null)
+        return;
+    if (Array.isArray(c)) {
+        c.forEach(function (item) { return recursiveAppend(parent, item); });
+        return;
+    }
+    if (isJelEntity(c)) {
+        recursiveAppend(parent, c[componentDataSymbol].dom);
+        return;
+    }
+    if (typeof c == "number")
+        c = c.toString();
+    parent.append(c);
+};
 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)) {
-                c.forEach(function (item) { return recursiveAppend_1(item); });
-                return;
-            }
-            if (isJelEntity(c)) {
-                recursiveAppend_1(c[componentDataSymbol].dom);
-                return;
-            }
-            if (typeof c == "number")
-                c = c.toString();
-            element.append(c);
-        };
         var domEntity_1 = (_a = {},
             _a[componentDataSymbol] = {
                 dom: element,
@@ -200,7 +151,7 @@ function getWrappedElement(element) {
                 for (var _i = 0; _i < arguments.length; _i++) {
                     content[_i] = arguments[_i];
                 }
-                recursiveAppend_1(content);
+                recursiveAppend(element, content);
             },
             _a.remove = function () {
                 element.remove();
@@ -219,7 +170,7 @@ function getWrappedElement(element) {
                 },
                 set: function (v) {
                     element.innerHTML = "";
-                    recursiveAppend_1(v);
+                    recursiveAppend(element, v);
                 },
                 enumerable: false,
                 configurable: true
@@ -244,3 +195,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.3",
+  "version": "0.2.1",
   "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"