@xtia/jel 0.2.0 → 0.2.2

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]>;
@@ -51,5 +52,6 @@ type Optionals<T> = {
 };
 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>;
+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

@@ -42,14 +42,8 @@ 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);
+    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];
@@ -120,24 +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 === 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,
@@ -157,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();
@@ -176,7 +170,7 @@ function getWrappedElement(element) {
                 },
                 set: function (v) {
                     element.innerHTML = "";
-                    recursiveAppend_1(v);
+                    recursiveAppend(element, v);
                 },
                 enumerable: false,
                 configurable: true

package/package.json

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