@xtia/jel 0.3.2 → 0.4.1

package/README.md

@@ -27,9 +27,7 @@ body.append($.form([
     $.button("Sign in"),
     $.a({
         content: ["Having trouble? ", $.strong("Recover account")],
-        attribs: {
-            href: "/recover-account",
-        }
+        href: "/recover-account",
     })
 ]));
 
@@ -39,9 +37,7 @@ body.append([
         files.map(file => $.li(
             $.a({
                 content: file.name,
-                attribs: {
-                    href: `/files/${file.name}`,
-                }
+                href: `/files/${file.name}`,
             })
         ))
     )

package/index.d.ts

@@ -1,34 +1,45 @@
 export type ElementClassDescriptor = string | Record<string, boolean> | ElementClassDescriptor[];
-export type DOMContent = number | null | string | Element | JelEntity<object, any> | Text | DOMContent[];
-export type DomEntity<T extends HTMLElement> = JelEntity<ElementAPI<T>, HTMLElementEventMap>;
-type JelConstructor<Spec, API, EventDataMap> = (spec?: Partial<Spec & CommonOptions<EventDataMap>>) => JelEntity<API, EventDataMap>;
-type CommonOptions<EventDataMap> = {
-    on?: Partial<{
-        [EventID in keyof EventDataMap]: (data: EventDataMap[EventID]) => void;
-    }>;
+export type DOMContent = number | null | string | Element | JelEntity<object> | Text | DOMContent[];
+export type DomEntity<T extends HTMLElement> = JelEntity<ElementAPI<T>>;
+type PartConstructor<Spec, API extends object | void, EventDataMap> = (spec: Spec & EventSpec<EventDataMap>) => JelEntity<EventHost<API, EventDataMap>>;
+type EventSpec<EventDataMap> = EventDataMap extends object ? {
+    on?: {
+        [EventID in keyof EventDataMap]+?: (data: EventDataMap[EventID]) => void;
+    };
+} : {};
+type JelEntity<API extends object | void> = (API extends void ? {} : API) & {
+    readonly [entityDataSymbol]: JelEntityData;
 };
-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 | null;
+type StylesDescriptor = {
+    [K in keyof CSSStyleDeclaration as [
+        K,
+        CSSStyleDeclaration[K]
+    ] extends [string, string] ? K : never]+?: CSSValue;
 };
-type CSSValue = string | number;
-type StylesDescriptor = Partial<{
-    [key in keyof CSSStyleDeclaration]: CSSValue;
-}>;
-interface ElementDescriptor {
+type StyleAccessor = StylesDescriptor & ((styles: StylesDescriptor) => void) & ((property: keyof StylesDescriptor, value: CSSValue) => void);
+type ContentlessTag = "area" | "base" | "basefont" | "br" | "col" | "frame" | "hr" | "img" | "input" | "isindex" | "link" | "meta" | "param" | "textarea";
+type TagWithHref = "a" | "link";
+type TagWithSrc = "img" | "script" | "iframe";
+type ElementDescriptor<Tag extends string> = {
     classes?: ElementClassDescriptor;
-    content?: DOMContent;
     attribs?: Record<string, string | number | boolean>;
-    on?: Partial<{
-        [E in keyof HTMLElementEventMap]: (event: HTMLElementEventMap[E]) => void;
-    }>;
+    on?: {
+        [E in keyof HTMLElementEventMap]+?: (event: HTMLElementEventMap[E]) => void;
+    };
     style?: StylesDescriptor;
     cssVariables?: Record<string, CSSValue>;
-}
-type StyleAccessor = StylesDescriptor & ((styles: StylesDescriptor) => void) & ((property: string, value: CSSValue) => void);
-type ElementAPI<T extends HTMLElement> = {
+} & (Tag extends "input" | "textarea" ? {
+    value?: string | number;
+} : Tag extends ContentlessTag ? {} : {
+    content?: DOMContent;
+}) & (Tag extends TagWithSrc ? {
+    src: string;
+} : Tag extends TagWithHref ? {
+    href: string;
+} : {});
+type ElementAPI<T extends HTMLElement> = EventHost<{
     readonly element: T;
-    content: DOMContent;
     classes: DOMTokenList;
     attribs: {
         [key: string]: string | null;
@@ -37,30 +48,32 @@ type ElementAPI<T extends HTMLElement> = {
     innerHTML: string;
     setCSSVariable(table: Record<string, CSSValue>): void;
     setCSSVariable(variableName: string, value: CSSValue): void;
-    qsa(selector: string): (Element | DomEntity<any>)[];
+    qsa(selector: string): (Element | DomEntity<HTMLElement>)[];
     append(...content: DOMContent[]): void;
     remove(): void;
     getRect(): DOMRect;
     focus(): void;
     blur(): void;
-} & (T extends HTMLInputElement ? {
+} & (T extends ContentlessTag ? {} : {
+    content: DOMContent;
+}) & (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]>;
+    getContext: HTMLCanvasElement["getContext"];
+} : T extends HTMLElementTagNameMap[TagWithSrc] ? {
+    src: string;
+} : T extends HTMLElementTagNameMap[TagWithHref] ? {
+    href: string;
+} : {}), HTMLElementEventMap>;
+type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}#${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: `${T}.${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: T, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends HTMLElement>(element: T) => DomEntity<T>) & {
+    [T in keyof HTMLElementTagNameMap]: (descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>;
 } & {
-    [T in keyof HTMLElementTagNameMap]: (content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>;
+    [T in keyof HTMLElementTagNameMap]: T extends ContentlessTag ? () => DomEntity<HTMLElementTagNameMap[T]> : (content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>;
 });
-type JelComponentData = {
+type JelEntityData = {
     dom: DOMContent;
 };
 type OptionalKeys<T> = {
@@ -69,8 +82,13 @@ type OptionalKeys<T> = {
 type Optionals<T> = {
     [K in OptionalKeys<T>]-?: Exclude<T[K], undefined>;
 };
+type ForbidKey<K extends string | symbol> = Record<string | symbol, any> & Partial<Record<K, never>>;
+type EventHost<API extends object | void, EventDataMap> = (API extends object ? API : {}) & {
+    on<E extends keyof EventDataMap>(eventId: E, handler: (this: JelEntity<EventHost<API, EventDataMap>>, data: EventDataMap[E]) => void): void;
+};
 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>;
+declare const entityDataSymbol: unique symbol;
+export declare function createEntity<API extends object>(content: DOMContent, api: API extends DOMContent ? never : API): JelEntity<API>;
+export declare function createEntity(content: DOMContent): JelEntity<void>;
+export declare function definePart<Spec extends ForbidKey<"on">, API extends ForbidKey<"on"> | 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): PartConstructor<Spec, API, EventDataMap>;
 export {};

package/index.js

@@ -1,70 +1,65 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$ = void 0;
+exports.createEntity = createEntity;
 exports.definePart = definePart;
-var styleProxy = {
-    get: function (style, prop) {
-        return style()[prop];
+const styleProxy = {
+    get(getStyle, prop) {
+        return getStyle()[prop];
     },
-    set: function (style, prop, value) {
-        style()[prop] = value;
+    set(getStyle, prop, value) {
+        getStyle()[prop] = value;
         return true;
     },
-    apply: function (getStyle, _, _a) {
-        var stylesOrProp = _a[0], value = _a[1];
-        var style = getStyle();
+    apply(getStyle, _, [stylesOrProp, value]) {
+        const style = getStyle();
         if (typeof stylesOrProp == "object") {
-            Object.entries(stylesOrProp).forEach(function (_a) {
-                var prop = _a[0], val = _a[1];
-                return style[prop] = val;
-            });
+            Object.entries(stylesOrProp).forEach(([prop, val]) => style[prop] = val);
             return;
         }
-        style.setProperty(stylesOrProp, value);
+        style[stylesOrProp] = value;
     },
+    deleteProperty(getStyle, prop) {
+        getStyle()[prop] = null;
+        return true;
+    }
 };
-function createElement(tag, descriptor) {
-    if (descriptor === void 0) { descriptor = {}; }
+function createElement(tag, descriptor = {}) {
     if (isContent(descriptor))
-        descriptor = { content: descriptor };
-    var ent = getWrappedElement(document.createElement(tag));
-    var applyClasses = function (classes) {
+        return createElement(tag, {
+            content: descriptor,
+        });
+    const domElement = document.createElement(tag);
+    const ent = getWrappedElement(domElement);
+    const applyClasses = (classes) => {
         if (Array.isArray(classes)) {
-            return classes.forEach(function (c) { return applyClasses(c); });
+            return classes.forEach(c => applyClasses(c));
         }
         if (typeof classes == "string") {
-            classes.trim().split(/\s+/).forEach(function (c) { return ent.classes.add(c); });
+            classes.trim().split(/\s+/).forEach(c => ent.classes.add(c));
             return;
         }
-        Object.entries(classes).forEach(function (_a) {
-            var className = _a[0], state = _a[1];
+        Object.entries(classes).forEach(([className, state]) => {
             if (state)
                 applyClasses(className);
         });
     };
     applyClasses(descriptor.classes || []);
+    ["value", "src", "href"].forEach(prop => {
+        if (descriptor[prop] !== undefined)
+            domElement.setAttribute(prop, descriptor[prop]);
+    });
+    // attribs.value / attribs.src / attribs.href override descriptor.*
     if (descriptor.attribs) {
-        Object.entries(descriptor.attribs).forEach(function (_a) {
-            var k = _a[0], v = _a[1];
+        Object.entries(descriptor.attribs).forEach(([k, v]) => {
             if (v === false) {
                 return;
             }
-            ent.element.setAttribute(k, v === true ? k : v);
+            domElement.setAttribute(k, v === true ? k : v);
         });
     }
     if (descriptor.content !== undefined)
-        recursiveAppend(ent.element, descriptor.content);
+        recursiveAppend(domElement, descriptor.content);
     if (descriptor.style) {
         ent.style(descriptor.style);
     }
@@ -72,38 +67,27 @@ function createElement(tag, descriptor) {
         ent.setCSSVariable(descriptor.cssVariables);
     }
     if (descriptor.on) {
-        Object.entries(descriptor.on).forEach(function (_a) {
-            var eventName = _a[0], handler = _a[1];
-            return ent.on(eventName, handler);
-        });
+        Object.entries(descriptor.on).forEach(([eventName, handler]) => ent.on(eventName, handler));
     }
     return ent;
 }
 ;
-var isContent = function (value) {
-    return ["string", "number"].includes(typeof value)
-        || value instanceof Element
-        || value instanceof Text
-        || Array.isArray(value)
-        || !value;
-};
 exports.$ = new Proxy(createElement, {
-    apply: function (create, _, _a) {
-        var _b;
-        var selectorOrTagName = _a[0], contentOrDescriptor = _a[1];
+    apply(create, _, [selectorOrTagName, contentOrDescriptor]) {
+        var _a;
         if (selectorOrTagName instanceof HTMLElement)
             return getWrappedElement(selectorOrTagName);
-        var tagName = ((_b = selectorOrTagName.match(/^[^.#]*/)) === null || _b === void 0 ? void 0 : _b[0]) || "";
+        const tagName = ((_a = selectorOrTagName.match(/^[^.#]*/)) === null || _a === void 0 ? void 0 : _a[0]) || "";
         if (!tagName)
             throw new Error("Invalid tag");
-        var matches = selectorOrTagName.slice(tagName.length).match(/[.#][^.#]+/g);
-        var classes = {};
-        var descriptor = {
-            classes: classes,
+        const matches = selectorOrTagName.slice(tagName.length).match(/[.#][^.#]+/g);
+        const classes = {};
+        const descriptor = {
+            classes,
             content: contentOrDescriptor,
         };
-        matches === null || matches === void 0 ? void 0 : matches.forEach(function (m) {
-            var value = m.slice(1);
+        matches === null || matches === void 0 ? void 0 : matches.forEach((m) => {
+            const value = m.slice(1);
             if (m[0] == ".") {
                 classes[value] = true;
             }
@@ -113,38 +97,38 @@ exports.$ = new Proxy(createElement, {
         });
         return create(tagName, descriptor);
     },
-    get: function (create, tagName) {
-        return function (descriptorOrContent) {
+    get(create, tagName) {
+        return (descriptorOrContent) => {
             return create(tagName, descriptorOrContent);
         };
     }
 });
-var componentDataSymbol = Symbol("jelComponentData");
-var elementWrapCache = new WeakMap();
-var attribsProxy = {
-    get: function (element, key) {
+const entityDataSymbol = Symbol("jelComponentData");
+const elementWrapCache = new WeakMap();
+const attribsProxy = {
+    get: (element, key) => {
         return element.getAttribute(key);
     },
-    set: function (element, key, value) {
+    set: (element, key, value) => {
         element.setAttribute(key, value);
         return true;
     },
-    has: function (element, key) {
+    has: (element, key) => {
         return element.hasAttribute(key);
     },
-    ownKeys: function (element) {
+    ownKeys: (element) => {
         return element.getAttributeNames();
     },
 };
-var recursiveAppend = function (parent, c) {
+const recursiveAppend = (parent, c) => {
     if (c === null)
         return;
     if (Array.isArray(c)) {
-        c.forEach(function (item) { return recursiveAppend(parent, item); });
+        c.forEach(item => recursiveAppend(parent, item));
         return;
     }
     if (isJelEntity(c)) {
-        recursiveAppend(parent, c[componentDataSymbol].dom);
+        recursiveAppend(parent, c[entityDataSymbol].dom);
         return;
     }
     if (typeof c == "number")
@@ -152,170 +136,171 @@ var recursiveAppend = function (parent, c) {
     parent.append(c);
 };
 function getWrappedElement(element) {
-    var _a;
     if (!elementWrapCache.has(element)) {
-        var domEntity_1 = (_a = {},
-            _a[componentDataSymbol] = {
+        const setCSSVariable = (k, v) => {
+            if (v === null) {
+                element.style.removeProperty("--" + k);
+            }
+            else {
+                element.style.setProperty("--" + k, v);
+            }
+        };
+        const domEntity = {
+            [entityDataSymbol]: {
                 dom: element,
             },
-            Object.defineProperty(_a, "element", {
-                get: function () { return element; },
-                enumerable: false,
-                configurable: true
-            }),
-            _a.on = function (eventId, handler) {
-                element.addEventListener(eventId, function (eventData) {
-                    handler.call(domEntity_1, eventData);
+            get element() { return element; },
+            on(eventId, handler) {
+                element.addEventListener(eventId, eventData => {
+                    handler.call(domEntity, eventData);
                 });
             },
-            _a.append = function () {
-                var content = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    content[_i] = arguments[_i];
-                }
+            append(...content) {
                 recursiveAppend(element, content);
             },
-            _a.remove = function () {
+            remove() {
                 element.remove();
             },
-            _a.setCSSVariable = function (variableNameOrTable, value) {
+            setCSSVariable(variableNameOrTable, value) {
                 if (typeof variableNameOrTable == "object") {
-                    Object.entries(variableNameOrTable).forEach(function (_a) {
-                        var k = _a[0], v = _a[1];
-                        element.style.setProperty("--" + k, v);
-                    });
+                    Object.entries(variableNameOrTable).forEach(([k, v]) => setCSSVariable(k, v));
                     return;
                 }
-                element.style.setProperty("--" + variableNameOrTable, value);
+                setCSSVariable(variableNameOrTable, value);
             },
-            _a.classes = element.classList,
-            _a.qsa = function (selector) {
-                var results = [];
-                element.querySelectorAll(selector).forEach(function (el) { return results.push(el instanceof HTMLElement ? getWrappedElement(el) : el); });
+            classes: element.classList,
+            qsa(selector) {
+                const results = [];
+                element.querySelectorAll(selector).forEach((el) => results.push(el instanceof HTMLElement ? getWrappedElement(el) : el));
                 return results;
             },
-            _a.getRect = function () {
+            getRect() {
                 return element.getBoundingClientRect();
             },
-            _a.focus = function () {
+            focus() {
                 element.focus();
             },
-            _a.blur = function () {
+            blur() {
                 element.blur();
             },
-            _a.select = function () {
+            select() {
                 element.select();
             },
-            _a.getContext = function (mode, options) {
+            getContext(mode, options) {
                 return element.getContext(mode, options);
             },
-            Object.defineProperty(_a, "content", {
-                get: function () {
-                    return [].slice.call(element.children).map(function (child) {
-                        if (child instanceof HTMLElement)
-                            return getWrappedElement(child);
-                        return child;
-                    });
-                },
-                set: function (v) {
-                    element.innerHTML = "";
-                    recursiveAppend(element, v);
-                },
-                enumerable: false,
-                configurable: true
-            }),
-            _a.attribs = new Proxy(element, attribsProxy),
-            Object.defineProperty(_a, "innerHTML", {
-                get: function () {
-                    return element.innerHTML;
-                },
-                set: function (v) {
-                    element.innerHTML = v;
-                },
-                enumerable: false,
-                configurable: true
-            }),
-            Object.defineProperty(_a, "value", {
-                get: function () {
-                    return element.value;
-                },
-                set: function (v) {
-                    element.value = v;
-                },
-                enumerable: false,
-                configurable: true
-            }),
-            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);
+            get content() {
+                return [].slice.call(element.children).map((child) => {
+                    if (child instanceof HTMLElement)
+                        return getWrappedElement(child);
+                    return child;
+                });
+            },
+            set content(v) {
+                element.innerHTML = "";
+                recursiveAppend(element, v);
+            },
+            attribs: new Proxy(element, attribsProxy),
+            get innerHTML() {
+                return element.innerHTML;
+            },
+            set innerHTML(v) {
+                element.innerHTML = v;
+            },
+            get value() {
+                return element.value;
+            },
+            set value(v) {
+                element.value = v;
+            },
+            get href() {
+                return element.href;
+            },
+            set href(v) {
+                element.href = v;
+            },
+            get src() {
+                return element.src;
+            },
+            set src(v) {
+                element.src = v;
+            },
+            get width() {
+                return element.width;
+            },
+            set width(v) {
+                element.width = v;
+            },
+            get height() {
+                return element.width;
+            },
+            set height(v) {
+                element.height = v;
+            },
+            style: new Proxy(() => element.style, styleProxy),
+        };
+        elementWrapCache.set(element, domEntity);
     }
     return elementWrapCache.get(element);
 }
+const isContent = (value) => {
+    if (value === undefined)
+        return false;
+    return typeof value == "string"
+        || typeof value == "number"
+        || !value
+        || value instanceof Element
+        || value instanceof Text
+        || entityDataSymbol in value
+        || Array.isArray(value);
+};
 function isJelEntity(content) {
-    return typeof content == "object" && !!content && componentDataSymbol in content;
+    return typeof content == "object" && !!content && entityDataSymbol in content;
+}
+function createEntity(content, api) {
+    if (isContent(api)) {
+        throw new TypeError("API object is already valid content");
+    }
+    return Object.create(api !== null && api !== void 0 ? api : {}, {
+        [entityDataSymbol]: {
+            value: {
+                dom: content
+            }
+        },
+    });
 }
+;
 function definePart(defaultOptions, init) {
-    return (function (spec) {
-        var _a, _b;
-        var fullSpec = __assign(__assign({}, defaultOptions), spec);
-        var eventHandlers = {};
-        var addEventListener = function (eventId, fn) {
+    return ((spec) => {
+        var _a;
+        const fullSpec = Object.assign(Object.assign({}, defaultOptions), spec);
+        const eventHandlers = {};
+        const addEventListener = (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];
+            Object.entries(fullSpec.on).forEach(([eventId, handler]) => {
                 addEventListener(eventId, handler);
             });
-        var entity;
-        var content = [];
-        var append = function (c) {
+        let entity;
+        const content = [];
+        const append = (...c) => {
             if (entity)
                 throw new Error("Component root content can only be added during initialisation");
-            content.push(c);
+            content.push(...c);
         };
-        var trigger = function (eventId, data) {
+        const trigger = (eventId, data) => {
             var _a;
-            (_a = eventHandlers[eventId]) === null || _a === void 0 ? void 0 : _a.forEach(function (fn) { return fn.call(entity, data); });
+            (_a = eventHandlers[eventId]) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn.call(entity, data));
         };
-        var api = init(fullSpec, append, trigger);
-        entity = api ? Object.create(api, (_a = {},
-            _a[componentDataSymbol] = {
-                value: {
-                    dom: content
-                }
-            },
-            _a.on = {
+        const api = (_a = init(fullSpec, append, trigger)) !== null && _a !== void 0 ? _a : {};
+        entity = createEntity(content, Object.create(api, {
+            on: {
                 value: addEventListener,
-            },
-            _a)) : (_b = {},
-            _b[componentDataSymbol] = {
-                dom: content,
-            },
-            _b.on = addEventListener,
-            _b);
+            }
+        }));
         return entity;
     });
 }

package/package.json

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