peryl 1.5.2 → 1.5.4

package/src/hsml-app.ts

@@ -5,31 +5,60 @@ 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 =
+    | "happ-init"
+    | "happ-mount"
+    | "happ-umount"
+    | "happ-update"
+    | "happ-action"
+    | "happ-attribute";
+
+export enum HAppActions {
+    init = "happ-init",
+    mount = "happ-mount",
+    umount = "happ-umount",
+    update = "happ-update",
+    action = "happ-action",
+    attribute = "happ-attribute"
+}
 
-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 ||
@@ -45,164 +74,254 @@ const unschedule = window.cancelAnimationFrame ||
     // (window as any).msCancelAnimationFrame ||
     function (handle: number) { window.clearTimeout(handle); };
 
-const msgAction = "HApp action:";
-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);
-}
-
-// HAppI
+const msgAction = "action:";
+const msgDispatch = "dispatch:";
+const msgRender = "render:";
+const msgUpdate = "update:";
 
-export type Class<T = object> = new (...args: any[]) => T;
+const HAPP = "happ";
 
-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: HState<State>;
+    view: HView<State, HActionType>;
+    dispatcher: HDispatcher<State, HActionType>;
+    element?: Element | string | null;
+    debug?: boolean;
+    name?: string;
+    attributes?: string[];
 }
 
-export function happi<STATE>(hAppI: Class<HAppI<STATE>>, e: Element | string | null = document.body) {
-    const hapi = new hAppI();
-    return new HApp<STATE>(hapi.state, hapi.view, hapi.dispatcher, e);
+/**
+ * HApp definition
+ *
+ * @param hAppI HApp definition
+ * @returns HApp instance
+ */
+export function happ<State, HActionType extends string>(hAppI: {
+    state: HState<State>;
+    view: HView<State, HActionType>;
+    dispatcher: HDispatcher<State, HActionType>;
+    element: Element | string | null;
+    debug?: boolean;
+    name?: string;
+    // attributes?: string[];
+}) {
+    return new HApp<State, HActionType>(
+        hAppI.state,
+        hAppI.view,
+        hAppI.dispatcher,
+        hAppI.element,
+        hAppI.debug,
+        hAppI.name
+        // hAppI!.attributes
+    );
 }
 
-// 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 {
+// export type Class<T = object> = new (...args: any[]) => T;
+
+// export function happi<State, HActionType extends string>(
+//     hAppI: Class<HAppI<State, HActionType>>,
+//     element?: Element | string | null,
+//     debug? boolean,
+//     name?: string,
+//     attributes: string[]
+// ) {
+//     const hapi = new hAppI();
+//     return new HApp<State, HActionType>(
+//         hapi.state,
+//         hapi.view,
+//         hapi.dispatcher,
+//         element,
+//         debug
+//     );
+// }
 
-        static get observedAttributes() {
-            return elementAttrs;
-        }
+// HAppEl
 
-        private _happel: HApp<STATE>;
+/**
+ * HApp custom HTML element definition.
+ *
+ * @param hAppI HApp definition
+ */
+export function happel<State, HActionType extends string>(hAppI: {
+    state: HState<State>;
+    view: HView<State, HActionType>;
+    dispatcher: HDispatcher<State, HActionType>;
+    /** Element suffix name, element name patern is `happ-${name}` */
+    name: string;
+    /** Element attribute list */
+    attributes: string[];
+    debug?: boolean;
+}): void {
+    customElements.define(
+        `${HAPP}-${hAppI.name}`,
+        class HAppElement extends HTMLElement {
+            static get observedAttributes() {
+                return hAppI.attributes;
+            }
 
-        constructor() {
-            super();
-            this._happel = new HApp<STATE>(state, view, dispatcher);
-            (this._happel as any).customElement = this;
-        }
+            private _happel: HApp<State, HActionType>;
+
+            constructor() {
+                super();
+                this._happel = new HApp<State, HActionType>(
+                    hAppI.state,
+                    hAppI.view,
+                    hAppI.dispatcher,
+                    undefined,
+                    hAppI.debug,
+                    hAppI.name,
+                    hAppI.attributes
+                );
+                (this._happel as any).customElement = this;
+            }
 
-        connectedCallback() {
-            // this._happel.mount(this);
-            this.attachShadow({ mode: "open" });
-            this._happel.mount(this.shadowRoot as any);
-        }
+            connectedCallback() {
+                // this._happel.mount(this);
+                this.attachShadow({ mode: "open" });
+                this._happel.mount(this.shadowRoot as any);
+            }
 
-        disconnectedCallback() {
-            this._happel.umount();
-        }
+            disconnectedCallback() {
+                this._happel.umount();
+            }
 
-        adoptedCallback() {
-            this._happel.update();
-        }
+            adoptedCallback() {
+                this._happel.update();
+            }
 
-        attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null) {
-            this._happel.dispatch(HAppAction._element, { attrName, oldVal, newVal });
+            attributeChangedCallback(
+                attrName: string,
+                oldVal: string | null,
+                newVal: string | null
+            ) {
+                this._happel.dispatch(HAppActions.attribute, {
+                    attrName,
+                    oldVal,
+                    newVal,
+                });
+            }
         }
-
-    });
+    );
 }
 
-// HAppC
+/**
+ * HSML App
+ */
+export class HApp<State, HActionType extends string> implements HHandlerCtx<HActionType> {
 
-export type HController<State> = (this: HApp<State>,
-                                  data?: HAction["data"],
-                                  event?: HAction["event"]) => void;
-
-export type HControllers<State, TypeofActionEnum> = { [actionType in keyof TypeofActionEnum]?: HController<State>; };
-
-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);
-        }
-    };
-}
-
-const HAPP = "happ";
+    readonly state: State;
+    readonly view: HView<State, HActionType>;
+    readonly dispatcher: HDispatcher<State, HActionType>;
 
-export class HApp<STATE> implements HHandlerCtx {
+    debug: boolean;
 
-    static debug = false;
+    readonly name: string;
+    readonly attributes: string[];
 
-    readonly state: STATE;
-    readonly view: HView<STATE>;
-    readonly dispatcher: HDispatcher<STATE>;
+    readonly element?: HTMLElement;
+    readonly refs: { [key: string]: HTMLElement } = {};
 
     readonly customElement?: HTMLElement; // happ custom html element
 
-    readonly dom?: HTMLElement;
-    readonly refs: { [key: string]: HTMLElement } = {};
-
     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,
+        debug?: boolean ,
+        name?: string,
+        attributes?: string[]
+    ) {
+        this.debug = debug ?? false;
+        this.name = name ?? HAPP;
+        this.attributes = attributes ?? [];
         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.dispatcher = dispatcher ?? (async (a) => log(this.name, msgAction, a.type, a.data));
+        this._dispatchAction(HAppActions.init, this).then(() => element && 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);
-        }
+    dispatch: HDispatch<HActionType> =  async (
+        type: HActionType | HAppActionType,
+        data?: any,
+        scope?: HDispatchScope
+    ): Promise<void> => {
+        return this._dispatchAction(type, data, undefined, scope);
     }
 
-    onDispatch = (dispatcher: HDispatcher<STATE>): this => {
-        this._onDispatch = dispatcher;
-        return this;
-    }
-
-    dispatch: HDispatch =  async (type: string, data?: any, event?: Event): Promise<void> => {
-        if (HApp.debug) {
-            log(msgAction, { type, data, event });
+    // 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 (this.debug) {
+            log(this.name, 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);
+            log(this.name, 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(this.name, msgDispatch, e);
+        }
+    }
+
+    private _dispatchElement: HDispatch<HActionType> =  async (
+        type: HActionType | HAppActionType,
+        data?: any
+    ): Promise<void> => {
+        this.customElement && elementDispatchCustomEvent(this.customElement, HAppActions.action, { type, data });
+        !this.customElement && this.element && elementDispatchCustomEvent(this.element, HAppActions.action, { type, data });
+        // this.customElement && elementDispatchCustomEvent(this.customElement, type, data);
+        // !this.customElement && this.element && elementDispatchCustomEvent(this.element, 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(HAppActions.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(HAppActions.action, this._windowEventListener);
         } else {
             warn("windowEventListener olready setted");
         }
@@ -210,34 +329,34 @@ export class HApp<STATE> implements HHandlerCtx {
 
     windowDispatchOff() {
         if (this._windowEventListener) {
-            window.removeEventListener(HAPP, this._windowEventListener);
+            window.removeEventListener(HAppActions.action, this._windowEventListener);
         }
     }
 
-    render = (): HElements => {
-        if (HApp.debug) {
+    render = (): HElements<HActionType> => {
+        if (this.debug) {
             const t0 = performance.now();
             let hsmls;
             try {
                 hsmls = this.view(this.state);
             } catch (e) {
-                error(msgRender, e);
+                error(this.name, msgRender, e);
             }
             const t1 = performance.now();
-            log(msgRender, `${t1 - t0} ms`, hsmls);
+            log(this.name, msgRender, `${t1 - t0} ms`, hsmls);
             return hsmls ?? [];
         } else {
             let hsmls;
             try {
                 hsmls = this.view(this.state);
             } catch (e) {
-                error(msgRender, e);
+                error(this.name, msgRender, e);
             }
             return hsmls ?? [];
         }
     }
 
-    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,53 +367,66 @@ export class HApp<STATE> implements HHandlerCtx {
                 data = formData(event);
             }
         }
-        this.dispatch(action, data, event);
+        this._dispatchAction(actionType, data, event);
+    }
+
+    private _updateDom<HActionType extends string>(
+        el: Element,
+        hsml: HElements<HActionType>,
+        ctx: HHandlerCtx<HActionType>
+    ): void {
+        if (this.debug) {
+            const t0 = performance.now();
+            hsmls2idomPatch(el, hsml, ctx);
+            const t1 = performance.now();
+            log(this.name, msgUpdate, `${t1 - t0} ms`, el);
+        } else {
+            hsmls2idomPatch(el, hsml, ctx);
+        }
     }
 
-    mount = (e: Element | string | null = document.body): this => {
-        const el = (typeof e === "string")
-            ? document.getElementById(e) ?? document.body
-            : e ?? document.body;
-        if ((el as any)[HAPP]) {
-            const a = (el as any)[HAPP] as HApp<STATE>;
+    mount = (e: Element | string | null): this => {
+        const el = (typeof e === "string") ? document.getElementById(e) : e;
+        if (el && (el as any)[HAPP]) {
+            const a = (el as any)[HAPP] as HApp<State, HActionType>;
             a.umount();
         }
-        if (!this.dom) {
-            (this as any).dom = el;
+        if (el && !this.element) {
+            (this as any).element = el;
             (el as any)[HAPP] = this;
             const hsmls = (this as any).render();
-            updateDom(el, hsmls, this);
-            this.dispatch(HAppAction._mount, this.dom);
+            this._updateDom<HActionType>(el, hsmls, this);
+            this._dispatchAction(HAppActions.mount, this.element);
         }
         return this;
     }
 
     umount = (): this => {
-        if (this.dom) {
-            this.dispatch(HAppAction._umount, this.dom);
-            if (this.dom.hasAttribute(HAPP)) {
-                this.dom.removeAttribute(HAPP);
+        if (this.element) {
+            this._dispatchAction(HAppActions.umount, this.element);
+            if (this.element.hasAttribute(HAPP)) {
+                this.element.removeAttribute(HAPP);
             }
-            const aNodes = this.dom.querySelectorAll(`[${HAPP}]`);
+            const aNodes = this.element.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()*/) {
-                this.dom.removeChild(this.dom.firstChild);
+            while (this.element.firstChild /*.hasChildNodes()*/) {
+                this.element.removeChild(this.element.firstChild);
             }
-            delete (this.dom as any).happ;
-            (this as any).dom = undefined;
+            delete (this.element as any).happ;
+            (this as any).element = undefined;
         }
         return this;
     }
 
     update = (): this => {
-        if (this.dom && !this._updateSched) {
+        if (this.element && !this._updateSched) {
             this._updateSched = schedule(() => {
-                if (this.dom) {
+                if (this.element) {
                     const hsmls = this.render();
-                    updateDom(this.dom, hsmls, this);
+                    this._updateDom<HActionType>(this.element, hsmls, this);
                 }
                 this._updateSched = undefined;
             });
@@ -302,47 +434,40 @@ export class HApp<STATE> implements HHandlerCtx {
         return this;
     }
 
-    toHsml = (): HElement => {
-        if (this.dom) {
+    toHsml = (): HElement<HActionType> => {
+        if (this.element) {
             if (this._updateSched) {
                 unschedule(this._updateSched);
                 this._updateSched = undefined;
             } else {
-                return ["div", { _skip: true }];
+                return ["div", { skip: true }];
             }
         }
         const hsmls = this.render();
         hsmls.push(
             (e: Element) => {
-                if (!this.dom) {
-                    (this as any).dom = e;
+                if (!this.element) {
+                    (this as any).element = e;
                     (e as any).happ = this;
-                    this.dispatch(HAppAction._mount, this.dom);
+                    this._dispatchAction(HAppActions.mount, this.element);
                 }
             });
         return ["div", hsmls];
     }
 
     toHtml = (): string => {
-        return this.dom ? this.dom.outerHTML : "";
+        return this.element ? this.element.outerHTML : "";
     }
 
 }
 
-function updateDom(el: Element, hsml: HElements, ctx: HHandlerCtx): void {
-    if (HApp.debug) {
-        const t0 = performance.now();
-        hsmls2idomPatch(el, hsml, ctx);
-        const t1 = performance.now();
-        log(msgUpdate, `${t1 - t0} ms`, el);
-    } else {
-        hsmls2idomPatch(el, hsml, ctx);
-    }
-}
-
-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 +616,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;
-//     };
-// }