peryl 1.5.2 → 1.5.3

package/README.md

@@ -1,10 +1,12 @@
 # PeRyL
 
-TypeScript/JavaScript library and tools for rapid server and client side web applications development.
+TypeScript/JavaScript library and tools for rapid server and client side web
+applications development.
 
 ## HApp - PeRyL HSML App
 
-`HApp` - HSML App, TypeScript/JavaScript Web UI framework for rapid SPA web applications development.
+`HApp` - HSML App, TypeScript/JavaScript Web UI framework for rapid SPA web
+applications development based on Flux single directional data flow architecture.
 
 Read [Tutorial](HApp.md) to learn how to write HApp.
 
@@ -35,13 +37,15 @@ HApp example code:
     <script src="https://unpkg.com/peryl/dist/browser-umd/hsml-app.js"></script>
     <script>
 
-        const Action = {
+        // Flux single directional data flow architecture actions
+        const Actions = {
             title: "title",
             dec: "dec",
             inc: "inc",
             clear: "clear"
         }
 
+        // Flux single directional data flow architecture state/store init
         function state() {
             return {
                 title: "Counter",
@@ -49,24 +53,29 @@ HApp example code:
             };
         }
 
+        // Flux single directional data flow architecture view
         function view(state) {
+            // HSML (Hyper Script Markup Language) HTML reprezentation
             return [
                 ["h2",
+                    // conditional class
                     { classes: [["w3-text-light-grey", !state.title]] },
                     state.title || "No title"
                 ],
                 ["p", [
                     ["label", "Title:"],
+                    // Input element static classes declaration
                     ["input.w3-input.w3-border", {
                         type: "text",
                         name: "title",
                         value: new String(state.title),
-                        on: ["input", Action.title]
+                        // On click action definition
+                        on: ["input", Actions.title]
                     }]
                 ]],
                 ["p", [
                     ["button.w3-button.w3-blue",
-                        { on: ["click", Action.clear] },
+                        { on: ["click", Actions.clear] },
                         "Clear title"
                     ]
                 ]],
@@ -85,42 +94,46 @@ HApp example code:
                         ]
                     ]],
                     ["button.w3-button.w3-blue",
-                        { on: ["click", Action.dec, 1] },
+                        // On click action definition with attached data
+                        { on: ["click", Actions.dec, 1] },
                         [["i.fa.fa-chevron-left"]]
                     ],
                     " ",
                     ["button.w3-button.w3-blue",
-                        { on: ["click", Action.inc, 2] },
+                        { on: ["click", Actions.inc, 2] },
                         [["i.fa.fa-chevron-right"]]
                     ]
                 ]]
             ]
         };
 
+        // Flux single directional data flow architecture dispatcher
         async function dispatcher(action, state, dispatch) {
             console.log("action:", action);
 
             switch (action.type) {
-                case HAppAction._init:
-                case HAppAction._mount:
-                case HAppAction._umount:
+                // HSML App (HApp) lifecycle actions
+                case HAppActions.init:
+                case HAppActions.mount:
+                case HAppActions.umount:
                     break;
 
-                case Action.title:
+                case Actions.title:
+                    // Action data resolved automatically form input
                     state.title = action.data.title;
                     break;
 
-                case Action.inc:
+                case Actions.inc:
                     state.count = state.count + action.data;
                     // async action call
-                    setTimeout(() => dispatch(Action.dec, 1), 1e3);
+                    setTimeout(() => dispatch(Actions.dec, 1), 1e3);
                     break;
 
-                case Action.dec:
+                case Actions.dec:
                     state.count = state.count - action.data;
                     break;
 
-                case Action.clear:
+                case Actions.clear:
                     state.title = "";
                     break;
 
@@ -129,8 +142,9 @@ HApp example code:
             }
         };
 
-        // HApp.debug = true;
+        HApp.debug = true; // Print console flux lifecycle details
 
+        // Run HApp application on html element with id "app"
         new HApp(state, view, dispatcher, "app");
 
     </script>

package/demo/hsml-app-form-validation_demo.ts

@@ -1,9 +1,8 @@
-import { HElement, HElements, hjoin } from "../src/hsml";
-import { HAppAction, HDispatcher, HState, HView } from "../src/hsml-app";
+import { HElement, hjoin } from "../src/hsml";
+import { HAppActions, HDispatcher, HState, HView, happ } from "../src/hsml-app";
 import { BooleanValidator, DateValidator, FormValidator, FormValidatorData, NumberValidator, SelectValidator, StringValidator } from "../src/validators";
-import { happ } from "../src/hsml-app";
 
-export interface FormValidationData {
+export interface Data {
     name: string;
     born: Date;
     children: number;
@@ -12,18 +11,18 @@ export interface FormValidationData {
     sport: string;
 }
 
-export interface FormValidationState {
+export interface State {
     title: string;
-    data: FormValidationData;
+    data: Data;
     genders: {
         label: string;
         value: string;
     }[];
     sports: string[];
-    validatorData?: FormValidatorData<FormValidationData>;
+    validatorData?: FormValidatorData<Data>;
 }
 
-export const formValidationState: HState<FormValidationState> = function () {
+export const state: HState<State> = function () {
     return {
         title: "Form Validation",
         data: {
@@ -42,20 +41,20 @@ export const formValidationState: HState<FormValidationState> = function () {
     }
 };
 
-export enum FormValidationAction {
+export enum Actions {
     change = "form-validation-change",
     submit = "form-validation-submit"
 }
 
-export const formValidationView: HView<FormValidationState> = function (state): HElements {
+export const view: HView<State, Actions> = function (state) {
     return [
         ["div.w3-content", [
             ["h1", state.title],
             ["form.w3-container",
                 {
                     on: [
-                        ["change", FormValidationAction.change],
-                        ["submit", FormValidationAction.submit]
+                        ["change", Actions.change],
+                        ["submit", Actions.submit]
                     ]
                 },
                 [
@@ -65,7 +64,7 @@ export const formValidationView: HView<FormValidationState> = function (state):
                                 type: "text",
                                 name: "name",
                                 value: state.validatorData!.str.name,
-                                on: ["input", FormValidationAction.change]
+                                on: ["input", Actions.change]
                             }]
                         ]]
                     ]],
@@ -104,7 +103,7 @@ export const formValidationView: HView<FormValidationState> = function (state):
                     ["p.w3-text-red", [state.validatorData!.err.married]],
                     ["p",
                         hjoin(
-                            state.genders.map<HElement>(gender => (
+                            state.genders.map<HElement<Actions>>(gender => (
                                 ["label", [
                                     ["input.w3-radio", {
                                         type: "radio",
@@ -126,7 +125,7 @@ export const formValidationView: HView<FormValidationState> = function (state):
                                     { value: "", disabled: true, selected: true },
                                     "Sport"
                                 ],
-                                ...state.sports.map<HElement>(sport => (
+                                ...state.sports.map<HElement<Actions>>(sport => (
                                     ["option",
                                         {
                                             value: sport,
@@ -146,19 +145,19 @@ export const formValidationView: HView<FormValidationState> = function (state):
     ];
 };
 
-let formValidator: FormValidator<FormValidationData>;
+let formValidator: FormValidator<Data>;
 
-export const formValidationDispatcher: HDispatcher<FormValidationState> = async function (action, state) {
+export const dispatcher: HDispatcher<State, Actions> = async function (action, state) {
     console.log("action", action);
 
     switch (action.type) {
 
-        case HAppAction._init:
+        case HAppActions.init:
             formValidator = validator(state);
             state.validatorData = formValidator.data();
             break;
 
-        case FormValidationAction.change:
+        case Actions.change:
             formValidator.validate({
                 ...state.validatorData!.str,
                 ...action.data
@@ -167,7 +166,7 @@ export const formValidationDispatcher: HDispatcher<FormValidationState> = async
             console.log("obj:", JSON.stringify(state.validatorData, null, 4));
             break;
 
-        case FormValidationAction.submit:
+        case Actions.submit:
             action.event!.preventDefault();
             // console.log(action.data);
             formValidator.validate(action.data);
@@ -185,8 +184,8 @@ export const formValidationDispatcher: HDispatcher<FormValidationState> = async
     }
 };
 
-export function validator(formState: FormValidationState): FormValidator<FormValidationData> {
-    return new FormValidator<FormValidationData>()
+export function validator(formState: State): FormValidator<Data> {
+    return new FormValidator<Data>()
         .addValidator("name", new StringValidator(
             {
                 required: true,
@@ -299,4 +298,4 @@ function datetimeLocal(date: Date) {
     }
 }
 
-happ<FormValidationState>(formValidationState, formValidationView, formValidationDispatcher);
+happ<State, Actions>(state, view, dispatcher);

package/demo/hsml-app-form_demo.ts

@@ -1,5 +1,5 @@
-import { HElement, HElements, hjoin } from "../src/hsml";
-import { happ, HAppAction, HDispatcher, HState, HView } from "../src/hsml-app";
+import { HElement, hjoin } from "../src/hsml";
+import { HAppActions, HDispatcher, HState, HView, happ } from "../src/hsml-app";
 
 interface FormData {
     name: string;
@@ -10,7 +10,7 @@ interface FormData {
     sport: string;
 }
 
-interface FormState {
+interface State {
     title: string;
     data: FormData;
     genders: {
@@ -20,7 +20,7 @@ interface FormState {
     sports: string[];
 }
 
-const formState: HState<FormState> = function () {
+const state: HState<State> = function () {
     return {
         title: "HSML App Form",
         data: {
@@ -40,12 +40,16 @@ const formState: HState<FormState> = function () {
     };
 };
 
-enum FormAction {
+// type FormActions =
+//     "form-change" |
+//     "form-submit";
+
+enum Actions {
     change = "form-change",
     submit = "form-submit"
 }
 
-const formView: HView<FormState> = function (state): HElements {
+const view: HView<State, Actions> = function (state) {
     return [
         ["div.w3-content.w3-light-gray", [
             ["div.w3-container", [
@@ -53,8 +57,8 @@ const formView: HView<FormState> = function (state): HElements {
                 ["form.w3-panel",
                     {
                         on: [
-                            ["change", FormAction.change],
-                            ["submit", FormAction.submit]
+                            ["change", Actions.change],
+                            ["submit", Actions.submit]
                         ]
                     },
                     [
@@ -104,7 +108,7 @@ const formView: HView<FormState> = function (state): HElements {
                         ]],
                         ["p",
                             hjoin(
-                                state.genders.map<HElement>(gender => (
+                                state.genders.map<HElement<Actions>>(gender => (
                                     ["label", [
                                         ["input.w3-radio", {
                                             type: "radio",
@@ -129,7 +133,7 @@ const formView: HView<FormState> = function (state): HElements {
                                         },
                                         "Sport"
                                     ],
-                                    ...state.sports.map<HElement>(sport => (
+                                    ...state.sports.map<HElement<Actions>>(sport => (
                                         ["option",
                                             {
                                                 value: sport,
@@ -149,21 +153,21 @@ const formView: HView<FormState> = function (state): HElements {
     ];
 };
 
-const formDispatcher: HDispatcher<FormState> = async function (action, state) {
+const dispatcher: HDispatcher<State, Actions> = async function (action, state) {
     switch (action.type) {
 
-        case HAppAction._init:
-        case HAppAction._mount:
-        case HAppAction._umount:
-        case HAppAction._element:
+        case HAppActions.init:
+        case HAppActions.mount:
+        case HAppActions.umount:
+        case HAppActions.elementAttr:
             break;
 
-        case FormAction.change:
-            console.log("FormAction.change", JSON.stringify(action.data, null, 4));
+        case Actions.change:
+            console.log("FormActions.change", JSON.stringify(action.data, null, 4));
             break;
 
-        case FormAction.submit:
-            console.log("FormAction.submit", JSON.stringify(action.data, null, 4));
+        case Actions.submit:
+            console.log("FormActions.submit", JSON.stringify(action.data, null, 4));
             const formData = JSON.stringify(action.data, null, 4);
             alert(`Form submit: \n${formData}`);
             state.data = { ...state.data, ...action.data };
@@ -177,4 +181,4 @@ function datetimeLocal(date: Date) {
     return date.toISOString().slice(0, 16);
 }
 
-happ<FormState>(formState, formView, formDispatcher);
+happ<State, Actions>(state, view, dispatcher);

package/demo/hsml-app-test_demo.ts

@@ -1,45 +1,45 @@
-import { HElement, HElements } from "../src/hsml";
-import { HApp, happ, HAppAction, HDispatcher, HState, HView, HView1 } from "../src/hsml-app";
+import { HElement } from "../src/hsml";
+import { HApp, HAppActions, HDispatcher, HState, HView, HView1, happ } from "../src/hsml-app";
 
 interface CounterState {
     count: number;
 }
 
-enum CounterAction {
+enum CounterActions {
     dec = "counter-dec",
     inc = "counter-inc"
 }
 
-const counterView: HView1<CounterState> = (state: CounterState): HElement => {
+const counterView: HView1<CounterState, CounterActions> = (state) => {
     return ["div~reference", [
         ["h2", ["Counter"]],
         ["p", [
             ["em", ["Count"]], ": ", state.count,
             " ",
-            ["button", { on: ["click", CounterAction.dec, 1] }, ["-"]],
-            ["button", { on: ["click", CounterAction.inc, 2] }, ["+"]]
+            ["button", { on: ["click", CounterActions.dec, 1] }, ["-"]],
+            ["button", { on: ["click", CounterActions.inc, 2] }, ["+"]]
         ]]
     ]];
 };
 
-const counterDispatcher: HDispatcher<CounterState> = async function (this: HApp<CounterState>, action, state, dispatch) {
+const counterDispatcher: HDispatcher<CounterState, CounterActions> = async function (this: HApp<CounterState, CounterActions>, action, state, dispatch) {
     console.log("action counter:", action);
     // console.log("state counter:", state);
     // console.log("happ counter:", this);
 
     switch (action.type) {
-        case HAppAction._mount:
+        case HAppActions.mount:
             this.windowDispatchOn();
             break;
-        case HAppAction._umount:
+        case HAppActions.umount:
             this.windowDispatchOff();
             break;
 
-        case CounterAction.inc:
+        case CounterActions.inc:
             state.count = state.count + action.data as number;
-            setTimeout(() => dispatch(CounterAction.dec, 1), 1e3); // async call
+            setTimeout(() => dispatch(CounterActions.dec, 1), 1e3); // async call
             break;
-        case CounterAction.dec:
+        case CounterActions.dec:
             state.count = state.count - action.data as number;
             break;
     }
@@ -51,7 +51,7 @@ interface State {
     x?: boolean | Boolean;
 }
 
-enum Action {
+enum Actions {
     title = "title",
     clear = "clear",
     formSubmit = "formSubmit",
@@ -69,7 +69,7 @@ const state: HState<State> = function () {
     };
 };
 
-const view: HView<State> = function (state: State): HElements {
+const view: HView<State, Actions | CounterActions> = function (state) {
     return [
         ["h2", [state.title]],
         ["p", [
@@ -79,13 +79,13 @@ const view: HView<State> = function (state: State): HElements {
                     type: "text",
                     // name: "title",
                     value: new String(state.title),
-                    on: ["input", Action.title]
+                    on: ["input", Actions.title]
                 }
             ], " ",
             ["button.w3-button.w3-blue",
                 {
                     type: "button",
-                    on: ["click", Action.clear]
+                    on: ["click", Actions.clear]
                 },
                 ["Clear title"]
             ]
@@ -95,8 +95,8 @@ const view: HView<State> = function (state: State): HElements {
         ["form",
             {
                 on: [
-                    ["submit", Action.formSubmit],
-                    ["change", Action.formChange]
+                    ["submit", Actions.formSubmit],
+                    ["change", Actions.formChange]
                 ]
             },
             [
@@ -137,13 +137,13 @@ const view: HView<State> = function (state: State): HElements {
                 "s ",
                 ["select", { name: "s" },
                     ["s1", "s2", "s3"]
-                        .map<HElement>(l => ["option", { value: l }, [l]])
+                        .map<HElement<Actions>>(l => ["option", { value: l }, [l]])
                 ],
                 ["br"],
                 "sm ",
                 ["select", { name: "sm", multiple: true },
                     ["sm1", "sm2", "sm3"]
-                        .map<HElement>(l => ["option", { value: l }, [l]])
+                        .map<HElement<Actions>>(l => ["option", { value: l }, [l]])
                 ],
                 ["br"],
                 ["textarea", { name: "ta" },
@@ -157,10 +157,10 @@ const view: HView<State> = function (state: State): HElements {
         ],
         ["h2", ["Action event"]],
         ["p", [
-            ["button", { on: ["click", Action.xXx] }, ["xXx"]]
+            ["button", { on: ["click", Actions.xXx] }, ["xXx"]]
         ]],
         ["h2", ["Props update"]],
-        ["input", { type: "checkbox", name: "x", on: ["change", Action.x] }],
+        ["input", { type: "checkbox", name: "x", on: ["change", Actions.x] }],
         ["input", { type: "checkbox", checked: state.x }],
         ["input", { type: "radio", name: "y", checked: state.x }],
         ["input", { type: "radio", name: "y", checked: !state.x }],
@@ -168,7 +168,7 @@ const view: HView<State> = function (state: State): HElements {
     ];
 };
 
-const dispatcher: HDispatcher<State> = async function (this: HApp<State>, action, state, dispatch) {
+const dispatcher: HDispatcher<State, Actions | CounterActions> = async function (this: HApp<State, Actions>, action, state, dispatch) {
     console.log("action:", action);
     // console.log("state:", state);
     // console.log("happ:", this);
@@ -176,30 +176,29 @@ const dispatcher: HDispatcher<State> = async function (this: HApp<State>, action
     counterDispatcher.call(this, action, state.counter, dispatch);
 
     switch (action.type) {
-        case HAppAction._init:
-        case HAppAction._mount:
-        case HAppAction._umount:
+        case HAppActions.init:
+        case HAppActions.mount:
+        case HAppActions.umount:
             break;
-        case Action.title:
+        case Actions.title:
             state.title = action.data;
             break;
-        case Action.clear:
+        case Actions.clear:
             state.title = "";
             break;
-        case Action.formSubmit:
+        case Actions.formSubmit:
             console.log("FormSubmit:", JSON.stringify(action.data));
             const fe = action.event!.target as HTMLFormElement;
             const fd = new FormData(fe);
             console.log("FormData:", JSON.stringify([...fd.entries()]));
             break;
-        case Action.formChange:
+        case Actions.formChange:
             console.log("FormChange:", JSON.stringify(action.data));
             break;
-        case Action.xXx:
-            // this.windowDispatch("global-type", "global-data");
-            this.windowDispatch(CounterAction.dec, 1);
+        case Actions.xXx:
+            dispatch(CounterActions.dec, 1, "window");
             break;
-        case Action.x:
+        case Actions.x:
             console.log("data.x", typeof action.data.x, action.data.x);
             // state.x = new Boolean(action.data.x === "true");
             // state.x = action.data.x === "true";
@@ -214,8 +213,8 @@ const dispatcher: HDispatcher<State> = async function (this: HApp<State>, action
 // HApp.debug = true;
 HApp.debug = window.location.hostname === "localhost";
 
-const app = happ<State>(state, view, dispatcher)
-    .onDispatch(async (action, state, dispatch) => console.log("onDspatch:", action, state))
+const app = happ<State, Actions | CounterActions>(state, view, dispatcher)
+    // .onDispatch(async (action, state, dispatch) => console.log("onDspatch:", action, state))
     .mount(document.getElementById("app"));
 
 (self as any).app = app;

package/demo/hsml-app-tictactoe_demo.ts

@@ -5,14 +5,15 @@ const NBSP = "\u00A0";
 const CIRC = "\u25EF";
 const CROS = "\u2A2F";
 
-interface TicTacToeState {
+interface State {
     board: string[][];
     turn: number;
 }
 
-const enum TicTacToeActions {
+const enum Actions {
     mark = "mark",
-    reset = "reset"
+    reset = "reset",
+    noop = "noop"
 }
 
 const boardInit = () => [
@@ -21,14 +22,14 @@ const boardInit = () => [
     [NBSP, NBSP, NBSP]
 ];
 
-function state(): TicTacToeState {
+function state(): State {
     return {
         board: boardInit(),
         turn: 0
     };
 }
 
-function view(state: TicTacToeState): HElements {
+function view(state: State): HElements<Actions> {
     return [
         ["div.w3-content", [
             ["h1", ["Tic-Tac-Toe Demo"]],
@@ -36,8 +37,8 @@ function view(state: TicTacToeState): HElements {
                 ["p.w3-xlarge", [
                     "Player: ", state.turn ? CROS : CIRC,
                 ]],
-                ["div", state.board.map<HElement>((row, y) =>
-                    ["div", row.map<HElement>((col, x) =>
+                ["div", state.board.map<HElement<Actions>>((row, y) =>
+                    ["div", row.map<HElement<Actions>>((col, x) =>
                         ["button.w3-button.w3-white.w3-border.w3-border-gray",
                             {
                                 styles: {
@@ -48,38 +49,38 @@ function view(state: TicTacToeState): HElements {
                                     height: "2em"
                                 },
                                 on: (col === NBSP)
-                                    ? ["click", TicTacToeActions.mark, { x, y, turn: state.turn }]
-                                    : ["click", "noop"]
+                                    ? ["click", Actions.mark, { x, y, turn: state.turn }]
+                                    : ["click", Actions.noop]
                             },
                             col
                         ])
                     ])
                 ],
                 ["p", [
-                    ["button.w3-button.w3-blue", { on: ["click", TicTacToeActions.reset] }, "Reset"]
+                    ["button.w3-button.w3-blue", { on: ["click", Actions.reset] }, "Reset"]
                 ]]
             ]]
         ]]
     ];
 }
 
-async function dispatcher(action: HAction, state: TicTacToeState, dispatch: HDispatch): Promise<void> {
+
+async function dispatcher(action: HAction<Actions>, state: State, dispatch: HDispatch<Actions>): Promise<void> {
     console.log("action", action);
 
     switch (action.type) {
 
-        case TicTacToeActions.reset:
+        case Actions.reset:
             state.board = boardInit();
             break;
 
-        case TicTacToeActions.mark:
+        case Actions.mark:
             state.board[action.data.y][action.data.x] = action.data.turn ? CROS : CIRC;
             state.turn = action.data.turn ? 0 : 1;
             break;
     }
 }
 
-const app =  happ<TicTacToeState>(state, view, dispatcher);
+const app =  happ<State, Actions>(state, view, dispatcher);
 
 (self as any).app = app;
-