@xtia/jel 0.3.1 → 0.4.0

package/index.d.ts

@@ -1,50 +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 StylesDescriptor = Partial<{
-    [key in keyof CSSStyleDeclaration]: CSSValue;
-}>;
+type StyleAccessor = StylesDescriptor & ((styles: StylesDescriptor) => void) & ((property: keyof StylesDescriptor, value: CSSValue) => void);
 interface ElementDescriptor {
     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 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]>;
-});
-type JelComponentData = {
-    dom: DOMContent;
-};
-type CSSValue = string | number;
-type ElementAPI<T extends HTMLElement> = {
+type ElementAPI<T extends HTMLElement> = EventHost<{
     readonly element: T;
     content: DOMContent;
     classes: DOMTokenList;
     attribs: {
         [key: string]: string | null;
     };
-    style: StylesDescriptor & ((styles: StylesDescriptor) => void);
+    style: StyleAccessor;
     innerHTML: string;
     setCSSVariable(table: Record<string, CSSValue>): void;
     setCSSVariable(variableName: string, value: CSSValue): void;
-    qsa(selector: string): DomEntity<any>[];
+    qsa(selector: string): (Element | DomEntity<HTMLElement>)[];
     append(...content: DOMContent[]): void;
     remove(): void;
     getRect(): DOMRect;
@@ -56,20 +51,29 @@ type ElementAPI<T extends HTMLElement> = {
 } : 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;
-} : {});
+    getContext: HTMLCanvasElement["getContext"];
+} : {}), HTMLElementEventMap>;
+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]>;
+});
+type JelEntityData = {
+    dom: DOMContent;
+};
 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>;
 };
+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, api?: undefined): JelEntity<undefined>;
+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,57 +1,49 @@
 "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 elementProxy = {
-    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 (style, _, _a) {
-        var styles = _a[0];
-        Object.entries(styles).forEach(function (_a) {
-            var prop = _a[0], val = _a[1];
-            return style[prop] = val;
-        });
+    apply(getStyle, _, [stylesOrProp, value]) {
+        const style = getStyle();
+        if (typeof stylesOrProp == "object") {
+            Object.entries(stylesOrProp).forEach(([prop, val]) => style[prop] = val);
+            return;
+        }
+        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) {
+    const ent = getWrappedElement(document.createElement(tag));
+    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 || []);
     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;
             }
@@ -61,50 +53,33 @@ function createElement(tag, descriptor) {
     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];
-            ent.element.style[prop] = val;
-        });
+        ent.style(descriptor.style);
     }
     if (descriptor.cssVariables) {
-        Object.entries(descriptor.cssVariables).forEach(function (_a) {
-            var prop = _a[0], val = _a[1];
-            ent.element.style.setProperty("--" + prop, val);
-        });
+        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;
             }
@@ -114,38 +89,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")
@@ -153,158 +128,164 @@ 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) {
-                return [].slice.call(element.querySelectorAll(selector)).map(function (el) { return getWrappedElement(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
-            }),
-            _a.style = new Proxy(element.style, elementProxy),
-            _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 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) => {
+        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);
         };
-        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] = {
+        const api = init(fullSpec, append, trigger);
+        Object.defineProperties(api, {
+            [entityDataSymbol]: {
                 value: {
                     dom: content
                 }
             },
-            _a.on = {
-                value: addEventListener,
-            },
-            _a)) : (_b = {},
-            _b[componentDataSymbol] = {
-                dom: content,
-            },
-            _b.on = addEventListener,
-            _b);
+            on: {
+                get: () => addEventListener
+            }
+        });
+        entity = api;
         return entity;
     });
 }

package/package.json

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