@xtia/jel 0.4.0 → 0.4.2

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,6 +1,8 @@
 export type ElementClassDescriptor = string | Record<string, boolean> | ElementClassDescriptor[];
 export type DOMContent = number | null | string | Element | JelEntity<object> | Text | DOMContent[];
 export type DomEntity<T extends HTMLElement> = JelEntity<ElementAPI<T>>;
+export type AppendableDomEntity = DomEntity<AppendableElement>;
+type AppendableElement = HTMLElementTagNameMap[Exclude<keyof HTMLElementTagNameMap, ContentlessTag>];
 type PartConstructor<Spec, API extends object | void, EventDataMap> = (spec: Spec & EventSpec<EventDataMap>) => JelEntity<EventHost<API, EventDataMap>>;
 type EventSpec<EventDataMap> = EventDataMap extends object ? {
     on?: {
@@ -18,19 +20,28 @@ type StylesDescriptor = {
     ] extends [string, string] ? K : never]+?: CSSValue;
 };
 type StyleAccessor = StylesDescriptor & ((styles: StylesDescriptor) => void) & ((property: keyof StylesDescriptor, value: CSSValue) => void);
-interface ElementDescriptor {
+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?: {
         [E in keyof HTMLElementEventMap]+?: (event: HTMLElementEventMap[E]) => void;
     };
     style?: StylesDescriptor;
     cssVariables?: Record<string, CSSValue>;
-}
+} & (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;
@@ -45,18 +56,24 @@ type ElementAPI<T extends HTMLElement> = EventHost<{
     getRect(): DOMRect;
     focus(): void;
     blur(): void;
-} & (T extends HTMLInputElement ? {
+} & (T extends AppendableElement ? {
+    content: DOMContent;
+} : {}) & (T extends HTMLInputElement ? {
     value: string;
     select(): void;
 } : T extends HTMLCanvasElement ? {
     width: number;
     height: number;
     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) => 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]>;
+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 JelEntityData = {
     dom: DOMContent;
@@ -74,6 +91,6 @@ type EventHost<API extends object | void, EventDataMap> = (API extends object ?
 export declare const $: DomHelper;
 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 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

@@ -26,8 +26,11 @@ const styleProxy = {
 };
 function createElement(tag, descriptor = {}) {
     if (isContent(descriptor))
-        descriptor = { content: descriptor };
-    const ent = getWrappedElement(document.createElement(tag));
+        return createElement(tag, {
+            content: descriptor,
+        });
+    const domElement = document.createElement(tag);
+    const ent = getWrappedElement(domElement);
     const applyClasses = (classes) => {
         if (Array.isArray(classes)) {
             return classes.forEach(c => applyClasses(c));
@@ -42,16 +45,21 @@ function createElement(tag, descriptor = {}) {
         });
     };
     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(([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);
     }
@@ -205,6 +213,18 @@ function getWrappedElement(element) {
             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;
             },
@@ -252,6 +272,7 @@ function createEntity(content, api) {
 ;
 function definePart(defaultOptions, init) {
     return ((spec) => {
+        var _a;
         const fullSpec = Object.assign(Object.assign({}, defaultOptions), spec);
         const eventHandlers = {};
         const addEventListener = (eventId, fn) => {
@@ -265,27 +286,21 @@ function definePart(defaultOptions, init) {
             });
         let entity;
         const content = [];
-        const append = (c) => {
+        const append = (...c) => {
             if (entity)
                 throw new Error("Component root content can only be added during initialisation");
-            content.push(c);
+            content.push(...c);
         };
         const trigger = (eventId, data) => {
             var _a;
             (_a = eventHandlers[eventId]) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn.call(entity, data));
         };
-        const api = init(fullSpec, append, trigger);
-        Object.defineProperties(api, {
-            [entityDataSymbol]: {
-                value: {
-                    dom: content
-                }
-            },
+        const api = (_a = init(fullSpec, append, trigger)) !== null && _a !== void 0 ? _a : {};
+        entity = createEntity(content, Object.create(api, {
             on: {
-                get: () => addEventListener
+                value: addEventListener,
             }
-        });
-        entity = api;
+        }));
         return entity;
     });
 }

package/package.json

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