peryl 1.5.2 → 1.5.3

package/src/hsml-app.ts

@@ -5,31 +5,58 @@ const log = console.log;
 const error = console.error;
 const warn = console.warn;
 
-export type HState<STATE> = () => STATE;
-export type HView<STATE> = (state: STATE) => HElements;
-export type HView1<STATE> = (state: STATE) => HElement;
+export type HState<State> = () => State;
+
+export type HView<State, HActionType extends string> = (
+    state: State
+) => HElements<HActionType>;
+
+export type HView1<State, HActionType extends string> = (
+    state: State
+) => HElement<HActionType>;
+
+export type HAppActionType =
+    | "init"
+    | "mount"
+    | "umount"
+    | "action"
+    | "elementAttr";
+
+export enum HAppActions {
+    init = "init",
+    mount = "mount",
+    umount = "umount",
+    action = "action",
+    elementAttr = "elementAttr"
+}
 
-export interface HAction {
-    type: string;
+export interface HAction<HActionType extends string> {
+    type: HActionType | HAppActionType | HAppActions;
     data?: any;
     event?: Event;
 }
 
-export type HDispatch = (type: HAction["type"],
-                         data?: HAction["data"],
-                         event?: HAction["event"]) => Promise<void>;
+export type HDispatchScope =
+    | "element"
+    | "window";
 
-export type HUpdate = () => void;
+export enum HDispatchScopes {
+    element = "element",
+    window = "window"
+}
 
-export type HDispatcher<STATE> = (action: HAction, state: STATE, dispatch: HDispatch) => Promise<void>;
-// export type HDispatcher<STATE> = (this: HApp<STATE>, action: HAction, state: STATE, dispatch: HDispatch) => Promise<void>;
+export type HDispatch<HActionType extends string> = (
+    type: HAction<HActionType>["type"],
+    data?: HAction<HActionType>["data"],
+    scope?: HDispatchScope | HDispatchScopes
+) => Promise<void>;
 
-export enum HAppAction {
-    _init = "_init",
-    _mount = "_mount",
-    _umount = "_umount",
-    _element = "_element"
-}
+export type HDispatcher<State, HActionType extends string> = (
+    // this: HApp<State, HActionType>,
+    action: HAction<HActionType>,
+    state: State,
+    dispatch: HDispatch<HActionType>
+) => Promise<void>;
 
 const schedule = window.requestAnimationFrame ||
     // window.webkitRequestAnimationFrame ||
@@ -50,99 +77,108 @@ const msgDispatch = "HApp dispatch:";
 const msgRender = "HApp render:";
 const msgUpdate = "HApp update:";
 
-export function happ<STATE>(state: HState<STATE>,
-                            view: HView<STATE>,
-                            dispatcher: HDispatcher<STATE>,
-                            element: Element | string | null = document.body) {
-    return new HApp<STATE>(state, view, dispatcher, element);
+export function happ<State, HActionType extends string>(
+    state: HState<State>,
+    view: HView<State, HActionType>,
+    dispatcher: HDispatcher<State, HActionType>,
+    element: Element | string | null = document.body
+) {
+    return new HApp<State, HActionType>(state, view, dispatcher, element);
 }
 
 // HAppI
 
 export type Class<T = object> = new (...args: any[]) => T;
 
-export interface HAppI<STATE> {
-    state(): STATE;
-    view(state: STATE): HElements;
-    dispatcher(action: HAction, state: STATE, dispatch: HDispatch): Promise<void>;
-    // dispatcher(this: HApp<STATE>, action: HAction, state: STATE, dispatch: HDispatch): Promise<void>;
+export interface HAppI<State, HActionType extends string> {
+    state(): State;
+    view(state: State): HElements<HActionType>;
+    dispatcher(
+        // this: HApp<State, HActionType>,
+        action: HAction<HActionType>,
+        state: State,
+        dispatch: HDispatch<HActionType>
+    ): Promise<void>;
 }
 
-export function happi<STATE>(hAppI: Class<HAppI<STATE>>, e: Element | string | null = document.body) {
+export function happi<State, HActionType extends string>(
+    hAppI: Class<HAppI<State, HActionType>>,
+    element: Element | string | null = document.body
+) {
     const hapi = new hAppI();
-    return new HApp<STATE>(hapi.state, hapi.view, hapi.dispatcher, e);
+    return new HApp<State, HActionType>(
+        hapi.state,
+        hapi.view,
+        hapi.dispatcher,
+        element
+    );
 }
 
 // HAppEl
 
-export function happel<STATE>(elementName: string,
-                              elementAttrs: string[],
-                              state: HState<STATE>,
-                              view: HView<STATE>,
-                              dispatcher: HDispatcher<STATE>): void {
-    customElements.define(elementName, class HAppElement extends HTMLElement {
-
-        static get observedAttributes() {
-            return elementAttrs;
-        }
-
-        private _happel: HApp<STATE>;
-
-        constructor() {
-            super();
-            this._happel = new HApp<STATE>(state, view, dispatcher);
-            (this._happel as any).customElement = this;
-        }
-
-        connectedCallback() {
-            // this._happel.mount(this);
-            this.attachShadow({ mode: "open" });
-            this._happel.mount(this.shadowRoot as any);
-        }
-
-        disconnectedCallback() {
-            this._happel.umount();
-        }
-
-        adoptedCallback() {
-            this._happel.update();
-        }
+export function happel<State, HActionType extends string>(
+    elementName: string,
+    elementAttrs: string[],
+    state: HState<State>,
+    view: HView<State, HActionType>,
+    dispatcher: HDispatcher<State, HActionType>
+): void {
+    customElements.define(
+        elementName,
+        class HAppElement extends HTMLElement {
+            static get observedAttributes() {
+                return elementAttrs;
+            }
 
-        attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null) {
-            this._happel.dispatch(HAppAction._element, { attrName, oldVal, newVal });
-        }
+            private _happel: HApp<State, HActionType>;
 
-    });
-}
+            constructor() {
+                super();
+                this._happel = new HApp<State, HActionType>(
+                    state,
+                    view,
+                    dispatcher
+                );
+                (this._happel as any).customElement = this;
+            }
 
-// HAppC
+            connectedCallback() {
+                // this._happel.mount(this);
+                this.attachShadow({ mode: "open" });
+                this._happel.mount(this.shadowRoot as any);
+            }
 
-export type HController<State> = (this: HApp<State>,
-                                  data?: HAction["data"],
-                                  event?: HAction["event"]) => void;
+            disconnectedCallback() {
+                this._happel.umount();
+            }
 
-export type HControllers<State, TypeofActionEnum> = { [actionType in keyof TypeofActionEnum]?: HController<State>; };
+            adoptedCallback() {
+                this._happel.update();
+            }
 
-export function controllersDdispatcher<State, TyopeofActionEnum>(controllers: HControllers<State, TyopeofActionEnum>): HDispatcher<State> {
-    return async function (this: HApp<State>, action) {
-        const controller = controllers[action.type as keyof TyopeofActionEnum];
-        if (controller) {
-            controller.apply<HApp<State>, [any?, Event?], void>(this, [action.data, action.event]);
-        } else {
-            warn("no controller for action", action);
+            attributeChangedCallback(
+                attrName: string,
+                oldVal: string | null,
+                newVal: string | null
+            ) {
+                this._happel.dispatch("elementAttr", {
+                    attrName,
+                    oldVal,
+                    newVal,
+                });
+            }
         }
-    };
+    );
 }
 
 const HAPP = "happ";
 
-export class HApp<STATE> implements HHandlerCtx {
-
+export class HApp<State, HActionType extends string> implements HHandlerCtx<HActionType> {
     static debug = false;
 
-    readonly state: STATE;
-    readonly view: HView<STATE>;
-    readonly dispatcher: HDispatcher<STATE>;
+    readonly state: State;
+    readonly view: HView<State, HActionType>;
+    readonly dispatcher: HDispatcher<State, HActionType>;
 
     readonly customElement?: HTMLElement; // happ custom html element
 
@@ -151,58 +187,96 @@ export class HApp<STATE> implements HHandlerCtx {
 
     private _updateSched?: number;
 
-    private _onDispatch?: HDispatcher<STATE>;
+    // private _onDispatch?: HDispatcher<State>;
 
     private _windowEventListener?: (event: Event) => void;
 
-    constructor(state: HState<STATE>, view: HView<STATE>, dispatcher?: HDispatcher<STATE>, e: Element | string | null = document.body) {
+    constructor(
+        state: HState<State>,
+        view: HView<State, HActionType>,
+        dispatcher?: HDispatcher<State, HActionType>,
+        element: Element | string | null = document.body
+    ) {
         this.state = state();
         this.view = view;
         this.dispatcher = dispatcher ?? (async (a) => log(msgAction, a.type, a.data));
-        this.dispatch(HAppAction._init, this).then(() => this.mount(e));
+        this._dispatchAction("init", this).then(() => this.mount(element));
     }
 
-    private async _dispatch(type: string, data: any, event: Event | undefined) {
-        try {
-            await this.dispatcher({ type, data, event }, this.state, this.dispatch);
-            this._onDispatch?.({ type, data, event }, this.state, this.dispatch);
-            this.dom && elementDispatchCustomEvent(this.dom, HAPP, { type, data, event });
-            this.customElement && elementDispatchCustomEvent(this.customElement, type, data);
-            !this.customElement && this.dom && elementDispatchCustomEvent(this.dom, type, data);
-            this.update();
-        } catch (e) {
-            error(msgDispatch, e);
-        }
-    }
-
-    onDispatch = (dispatcher: HDispatcher<STATE>): this => {
-        this._onDispatch = dispatcher;
-        return this;
+    dispatch: HDispatch<HActionType> =  async (
+        type: HActionType | HAppActionType,
+        data?: any,
+        scope?: HDispatchScope
+    ): Promise<void> => {
+        return this._dispatchAction(type, data, undefined, scope);
     }
 
-    dispatch: HDispatch =  async (type: string, data?: any, event?: Event): Promise<void> => {
+    // onDispatch = (dispatcher: HDispatcher<State>): this => {
+    //     this._onDispatch = dispatcher;
+    //     return this;
+    // }
+
+    private async _dispatchAction(
+        type: HActionType | HAppActionType,
+        data?: any,
+        event?: Event,
+        scope?: HDispatchScope
+    ): Promise<void> {
         if (HApp.debug) {
             log(msgAction, { type, data, event });
             const t0 = performance.now();
-            await this._dispatch(type, data, event);
+            await this._dispatch(type, data, event, scope);
             const t1 = performance.now();
             log(msgDispatch, `${t1 - t0} ms`, this.state);
         } else {
-            await this._dispatch(type, data, event);
+            await this._dispatch(type, data, event, scope);
         }
     }
 
-    windowDispatch: HDispatch =  async (type: string, data?: any, event?: Event): Promise<void> => {
-        window.dispatchEvent(new CustomEvent(HAPP, { detail: { type, data } }));
+    private async _dispatch(
+        type: HActionType | HAppActionType,
+        data: any,
+        event?: Event,
+        scope?: HDispatchScope
+    ) {
+        try {
+            await this.dispatcher(
+                { type: type as HActionType, data, event },
+                this.state,
+                this.dispatch
+            );
+            this.update();
+            scope === "element" && this._dispatchElement(type, data);
+            scope === "window" && this._dispatchWindow(type, data);
+        } catch (e) {
+            error(msgDispatch, e);
+        }
+    }
+
+    private _dispatchElement: HDispatch<HActionType> =  async (
+        type: HActionType | HAppActionType,
+        data?: any
+    ): Promise<void> => {
+        this.customElement && elementDispatchCustomEvent(this.customElement, "action", { type, data });
+        !this.customElement && this.dom && elementDispatchCustomEvent(this.dom, "action", { type, data });
+        // this.customElement && elementDispatchCustomEvent(this.customElement, type, data);
+        // !this.customElement && this.dom && elementDispatchCustomEvent(this.dom, type, data);
+        // this._onDispatch?.({ type, data, event }, this.state, this.dispatch);
+    }
+
+    private _dispatchWindow: HDispatch<HActionType> =  async (
+        type: HActionType | HAppActionType,
+        data?: any): Promise<void> => {
+        window.dispatchEvent(new CustomEvent("action", { detail: { type, data } }));
     }
 
     windowDispatchOn() {
         if (!this._windowEventListener) {
             this._windowEventListener = (event: Event) => {
-                const action = (event as CustomEvent).detail as HAction;
-                this.dispatch(action.type, action.data, event);
+                const action = (event as CustomEvent).detail as HAction<HActionType>;
+                this._dispatchAction(action.type, action.data);
             };
-            window.addEventListener(HAPP, this._windowEventListener);
+            window.addEventListener("action", this._windowEventListener);
         } else {
             warn("windowEventListener olready setted");
         }
@@ -210,11 +284,11 @@ export class HApp<STATE> implements HHandlerCtx {
 
     windowDispatchOff() {
         if (this._windowEventListener) {
-            window.removeEventListener(HAPP, this._windowEventListener);
+            window.removeEventListener("action", this._windowEventListener);
         }
     }
 
-    render = (): HElements => {
+    render = (): HElements<HActionType> => {
         if (HApp.debug) {
             const t0 = performance.now();
             let hsmls;
@@ -237,7 +311,7 @@ export class HApp<STATE> implements HHandlerCtx {
         }
     }
 
-    actionCb = (action: string, data: HAttrOnData, event: Event): void => {
+    actionCb = (actionType: HActionType, data: HAttrOnData, event: Event): void => {
         data = (data?.constructor === Function)
             ? (data as HAttrOnDataFnc)(event)
             : data;
@@ -248,7 +322,7 @@ export class HApp<STATE> implements HHandlerCtx {
                 data = formData(event);
             }
         }
-        this.dispatch(action, data, event);
+        this._dispatchAction(actionType, data, event);
     }
 
     mount = (e: Element | string | null = document.body): this => {
@@ -256,28 +330,28 @@ export class HApp<STATE> implements HHandlerCtx {
             ? document.getElementById(e) ?? document.body
             : e ?? document.body;
         if ((el as any)[HAPP]) {
-            const a = (el as any)[HAPP] as HApp<STATE>;
+            const a = (el as any)[HAPP] as HApp<State, HActionType>;
             a.umount();
         }
         if (!this.dom) {
             (this as any).dom = el;
             (el as any)[HAPP] = this;
             const hsmls = (this as any).render();
-            updateDom(el, hsmls, this);
-            this.dispatch(HAppAction._mount, this.dom);
+            updateDom<HActionType>(el, hsmls, this);
+            this._dispatchAction("mount", this.dom);
         }
         return this;
     }
 
     umount = (): this => {
         if (this.dom) {
-            this.dispatch(HAppAction._umount, this.dom);
+            this._dispatchAction("umount", this.dom);
             if (this.dom.hasAttribute(HAPP)) {
                 this.dom.removeAttribute(HAPP);
             }
             const aNodes = this.dom.querySelectorAll(`[${HAPP}]`);
             for (let i = 0; i < aNodes.length; i++) {
-                const a = (aNodes[i] as any).happ as HApp<STATE>;
+                const a = (aNodes[i] as any).happ as HApp<State, HActionType>;
                 a?.umount();
             }
             while (this.dom.firstChild /*.hasChildNodes()*/) {
@@ -294,7 +368,7 @@ export class HApp<STATE> implements HHandlerCtx {
             this._updateSched = schedule(() => {
                 if (this.dom) {
                     const hsmls = this.render();
-                    updateDom(this.dom, hsmls, this);
+                    updateDom<HActionType>(this.dom, hsmls, this);
                 }
                 this._updateSched = undefined;
             });
@@ -302,13 +376,13 @@ export class HApp<STATE> implements HHandlerCtx {
         return this;
     }
 
-    toHsml = (): HElement => {
+    toHsml = (): HElement<HActionType> => {
         if (this.dom) {
             if (this._updateSched) {
                 unschedule(this._updateSched);
                 this._updateSched = undefined;
             } else {
-                return ["div", { _skip: true }];
+                return ["div", { skip: true }];
             }
         }
         const hsmls = this.render();
@@ -317,7 +391,7 @@ export class HApp<STATE> implements HHandlerCtx {
                 if (!this.dom) {
                     (this as any).dom = e;
                     (e as any).happ = this;
-                    this.dispatch(HAppAction._mount, this.dom);
+                    this._dispatchAction("mount", this.dom);
                 }
             });
         return ["div", hsmls];
@@ -329,7 +403,11 @@ export class HApp<STATE> implements HHandlerCtx {
 
 }
 
-function updateDom(el: Element, hsml: HElements, ctx: HHandlerCtx): void {
+function updateDom<HActionType extends string>(
+    el: Element,
+    hsml: HElements<HActionType>,
+    ctx: HHandlerCtx<HActionType>
+): void {
     if (HApp.debug) {
         const t0 = performance.now();
         hsmls2idomPatch(el, hsml, ctx);
@@ -340,9 +418,13 @@ function updateDom(el: Element, hsml: HElements, ctx: HHandlerCtx): void {
     }
 }
 
-function elementDispatchCustomEvent(el: HTMLElement, type: string, data: any) {
+function elementDispatchCustomEvent<HActionType extends string>(
+    el: HTMLElement,
+    type: HActionType,
+    data: any
+) {
     el?.dispatchEvent(new CustomEvent(type, { detail: data }));
-    (el as any)[`on${type.toLowerCase()}`]?.(new CustomEvent(type, { detail: data }));
+    (el as any)[`on${type}`]?.(new CustomEvent(type, { detail: data }));
 }
 
 function formData(e: Event): { [k: string]: string | number | boolean | null | Array<string | null> } | string | number | boolean | null | Array<string | null> {
@@ -491,20 +573,3 @@ function formInputData(el: Element): { [k: string]: string | number | boolean |
     }
     return data;
 }
-
-// export const formInputData = <STATE>(dispatcher: Actions<STATE>): Actions<STATE> =>
-//     (app: App<STATE>, action: string | number, data?: any, event?: Event): void => {
-//         if (data === undefined && event) {
-//             data = inputEventData(event);
-//         }
-//         dispatcher(app, action, data, event);
-//     };
-
-// // Decorator
-// export function FormInputData() {
-//     return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
-//         const method = descriptor.value;
-//         descriptor.value = formInputData(method);
-//         return descriptor;
-//     };
-// }

package/src/hsml-convert.ts

@@ -114,14 +114,14 @@ interface Handler {
     close(tag: string): void;
 }
 
-class HsmlHandler implements Handler {
+class HsmlHandler<HActionType extends string> implements Handler {
 
-    private _root = [[]] as HElements[];
+    private _root = [[]] as HElements<HActionType>[];
     private _nodePath = [] as any; // path that consist of previous hsml nodes
     private _pointer = this._root;
     private _dataRegex = /data-(.+)/;
 
-    root(): HElement {
+    root(): HElement<HActionType> {
         return this._root[0][0];
     }
 
@@ -175,7 +175,7 @@ class HsmlHandler implements Handler {
         const children: any[] = [];
         hsmlNode.push(children);
 
-        this._pointer[this._pointer.length - 1].push(hsmlNode as HElement);
+        this._pointer[this._pointer.length - 1].push(hsmlNode as HElement<HActionType>);
         this._nodePath.push(hsmlNode);
         this._pointer = hsmlNode;
         // console.log(">>>", hsmlPath.map(x => x[0]));
@@ -222,13 +222,13 @@ function domTraverse(node: Node, handler: Handler ): void {
     }
 }
 
-export function dom2hsml(node: Node): HElement {
-    const h = new HsmlHandler();
+export function dom2hsml<HActionType extends string>(node: Node): HElement<HActionType> {
+    const h = new HsmlHandler<HActionType>();
     node && domTraverse(node, h);
     return h.root();
 }
 
-export function html2hsml(html: string): HElement {
+export function html2hsml<HActionType extends string>(html: string): HElement<HActionType> {
     const node = new DOMParser()
         .parseFromString(html, "text/html")
         .getElementsByTagName("body")[0]
@@ -236,7 +236,7 @@ export function html2hsml(html: string): HElement {
     return node && dom2hsml(node);
 }
 
-export function hsml2str(hsml: HElement, condense = true): HElement {
+export function hsml2str<HActionType extends string>(hsml: HElement<HActionType>, condense = true): HElement<HActionType> {
     let str = JSON.stringify(hsml, undefined, 4);
     if (condense) {
         str = str.replace(/(\[)\s+(\"[a-zA-Z0-9_\#\.-]+\")\s+(\],?)$/mg, "$1$2$3");