@xtia/jel 0.1.0 → 0.1.2

package/README.md

@@ -1,21 +1,19 @@
 # Jel
-## Or, How I Learned To Stop Worrying And Love The DOM
-### TypeScript Edition
+### Or, How I Learned To Stop Worrying And Love The DOM
 
 Jel is a thin layer over the DOM to simplify element structure creation, manipulation and componentisation with 'vanilla' TS.
 
-See [demo/index.ts](demo/index.ts) for example operation. Compare with [resulting page](https://aleta.codes/jel-ts-demo/).
+See [demo/index.ts](https://github.com/tiadrop/jel-ts/blob/main/demo/index.ts) for example operation. Compare with [resulting page](https://aleta.codes/jel-ts-demo/).
 
 ## `$` basic use:
 
-```bash
-$ npm i @xtia/jel
-```
-
 `$.[tagname](details)` produces an element of `<tagname>`. `details` can be content of various types or a descriptor object.
 
 ```ts
-import { $ } from "jel-ts";
+import { $ } from "@xtia/jel";
+
+// wrap body
+const body = $(document.body);
 
 body.append($.form([
     $.h2("Sign in"),

package/index.d.ts

@@ -1,19 +1,18 @@
 export type ElementClassSpec = string | Record<string, boolean> | ElementClassSpec[];
 export type DOMContent = number | null | string | Element | JelEntity<object, any> | Text | DOMContent[];
 export type DomEntity<T extends HTMLElement> = JelEntity<ElementAPI<T>, HTMLElementEventMap>;
-type Classes = string | Record<string, boolean> | Classes[];
-type PartFn<Spec, API extends {}, EventDataMap> = (spec?: Partial<Spec & CommonOptions<EventDataMap>>) => JelEntity<API, EventDataMap>;
+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;
     }>;
 };
-type JelEntity<API extends {}, EventDataMap> = API & {
+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;
 };
 interface ElementDescriptor {
-    classes?: Classes;
+    classes?: ElementClassSpec;
     content?: DOMContent;
     attribs?: Record<string, string | number | boolean>;
     on?: Partial<{
@@ -23,7 +22,8 @@ interface ElementDescriptor {
         [key in keyof CSSStyleDeclaration]: string | number;
     }> & Record<string, string | number>;
 }
-type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor) => HTMLElementTagNameMap[T]) & ((selector: string, content?: DOMContent) => DomEntity<any>) & (<T extends HTMLElement>(element: T) => DomEntity<T>) & {
+type HelperSelectorString<T extends string> = T | `${T}${"#" | "."}${any}`;
+type DomHelper = ((<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor) => DomEntity<HTMLElementTagNameMap[T]>) & (<T extends keyof HTMLElementTagNameMap>(selector: HelperSelectorString<T>, content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & ((selector: string, content?: DOMContent) => DomEntity<any>) & (<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]>;
@@ -34,7 +34,7 @@ type JelComponentData = {
 export declare const $: DomHelper;
 declare const componentDataSymbol: unique symbol;
 type ElementAPI<T extends HTMLElement> = {
-    element: T;
+    readonly element: T;
     content: DOMContent;
     classes: DOMTokenList;
     attribs: {
@@ -46,5 +46,5 @@ type ElementAPI<T extends HTMLElement> = {
     append(...content: DOMContent[]): void;
     remove(): void;
 };
-export declare function definePart<Spec, API extends object, 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 | void): PartFn<Spec, API, EventDataMap>;
+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>;
 export {};

package/index.js

@@ -139,10 +139,14 @@ function definePart(defaultOptions, init) {
                     dom: content
                 }
             },
+            _a.on = {
+                value: addEventListener,
+            },
             _a)) : (_b = {},
             _b[componentDataSymbol] = {
-                dom: content
+                dom: content,
             },
+            _b.on = addEventListener,
             _b);
         return entity;
     });

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@xtia/jel",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "repository": {
+    "url": "https://github.com/tiadrop/jel-ts",
+    "type": "github"
+  },
   "description": "Lightweight DOM wrapper",
   "main": "index.js",
   "keywords": [