peryl 1.5.1 → 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,9 +142,10 @@ HApp example code:
             }
         };
 
-        // HApp.debug = true;
+        HApp.debug = true; // Print console flux lifecycle details
 
-        new HApp(state, view, dispatcher, document.getElementById("app"));
+        // Run HApp application on html element with id "app"
+        new HApp(state, view, dispatcher, "app");
 
     </script>
 </body>

package/demo/form_demo.ts

@@ -31,7 +31,7 @@ const fileValidator = (entry: form.Entry, locale?: string): string => {
 
 const showChange = (entry: form.Entry) => {
     const el = select("#change");
-    el && (el.innerHTML = entry.getValue() || "");
+    el && (el.innerHTML = entry.getValue() ?? "");
 };
 
 new form.Form("form")

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

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>PeRyL HSML App Form</title>
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+
+<body>
+    <script type="module" src="hsml-app-form-validation_demo.ts"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,301 @@
+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";
+
+export interface Data {
+    name: string;
+    born: Date;
+    children: number;
+    married: boolean;
+    gender: string;
+    sport: string;
+}
+
+export interface State {
+    title: string;
+    data: Data;
+    genders: {
+        label: string;
+        value: string;
+    }[];
+    sports: string[];
+    validatorData?: FormValidatorData<Data>;
+}
+
+export const state: HState<State> = function () {
+    return {
+        title: "Form Validation",
+        data: {
+            name: "Ema",
+            born: new Date(),
+            children: 0,
+            married: false,
+            gender: "female",
+            sport: "gymnastics"
+        },
+        genders: [
+            { label: "Male", value: "male" },
+            { label: "Female", value: "female" }
+        ],
+        sports: ["football", "gymnastics"]
+    }
+};
+
+export enum Actions {
+    change = "form-validation-change",
+    submit = "form-validation-submit"
+}
+
+export const view: HView<State, Actions> = function (state) {
+    return [
+        ["div.w3-content", [
+            ["h1", state.title],
+            ["form.w3-container",
+                {
+                    on: [
+                        ["change", Actions.change],
+                        ["submit", Actions.submit]
+                    ]
+                },
+                [
+                    ["p", [
+                        ["label", ["Name",
+                            ["input.w3-input", {
+                                type: "text",
+                                name: "name",
+                                value: state.validatorData!.str.name,
+                                on: ["input", Actions.change]
+                            }]
+                        ]]
+                    ]],
+                    ["p.w3-text-red", [state.validatorData!.err.name]],
+                    ["p", [
+                        ["label", ["Born",
+                            ["input.w3-input", {
+                                type: "datetime-local",
+                                name: "born",
+                                // placeholder: new DateValidator().format(new Date()).str,
+                                value: datetimeLocal(state.validatorData!.obj.born)
+                            }]
+                        ]]
+                    ]],
+                    ["p.w3-text-red", [state.validatorData!.err.born]],
+                    ["p", [
+                        ["label", ["Children",
+                            ["input.w3-input", {
+                                type: "number",
+                                name: "children",
+                                value: state.validatorData!.str.children
+                            }]
+                        ]]
+                    ]],
+                    ["p.w3-text-red", [state.validatorData!.err.children]],
+                    ["p", [
+                        ["label", [
+                            ["input.w3-check", {
+                                type: "checkbox",
+                                name: "married",
+                                checked: state.validatorData!.obj.married
+                            }],
+                            " Married"
+                        ]]
+                    ]],
+                    ["p.w3-text-red", [state.validatorData!.err.married]],
+                    ["p",
+                        hjoin(
+                            state.genders.map<HElement<Actions>>(gender => (
+                                ["label", [
+                                    ["input.w3-radio", {
+                                        type: "radio",
+                                        name: "gender",
+                                        value: gender.value,
+                                        checked: state.validatorData!.obj.gender === gender.value
+                                    }],
+                                    " ", gender.label
+                                ]]
+                            )),
+                            ["br"]
+                        )
+                    ],
+                    ["p.w3-text-red", [state.validatorData!.err.gender]],
+                    ["p", [
+                        ["select.w3-select", { name: "sport" },
+                            [
+                                ["option",
+                                    { value: "", disabled: true, selected: true },
+                                    "Sport"
+                                ],
+                                ...state.sports.map<HElement<Actions>>(sport => (
+                                    ["option",
+                                        {
+                                            value: sport,
+                                            selected: sport === state.validatorData!.obj.sport
+                                        },
+                                        sport
+                                    ])
+                                )
+                            ]
+                        ]
+                    ]],
+                    ["p.w3-text-red", state.validatorData!.err.sport],
+                    ["button.w3-btn.w3-blue", "Submit"]
+                ]
+            ]
+        ]]
+    ];
+};
+
+let formValidator: FormValidator<Data>;
+
+export const dispatcher: HDispatcher<State, Actions> = async function (action, state) {
+    console.log("action", action);
+
+    switch (action.type) {
+
+        case HAppActions.init:
+            formValidator = validator(state);
+            state.validatorData = formValidator.data();
+            break;
+
+        case Actions.change:
+            formValidator.validate({
+                ...state.validatorData!.str,
+                ...action.data
+            });
+            state.validatorData = formValidator.data();
+            console.log("obj:", JSON.stringify(state.validatorData, null, 4));
+            break;
+
+        case Actions.submit:
+            action.event!.preventDefault();
+            // console.log(action.data);
+            formValidator.validate(action.data);
+            state.validatorData = formValidator.data();
+            // console.log(state.validatorData);
+            state.validatorData = formValidator.data();
+            if (formValidator.valid) {
+                console.log(formValidator);
+                state.data = formValidator.obj!;
+                const formData = JSON.stringify(state.data, null, 4);
+                console.dir(formData);
+                alert(`Form submit: \n${formData}`);
+            }
+            break;
+    }
+};
+
+export function validator(formState: State): FormValidator<Data> {
+    return new FormValidator<Data>()
+        .addValidator("name", new StringValidator(
+            {
+                required: true,
+                min: 3,
+                max: 5
+            },
+            {
+                required: "Required {{min}} - {{max}} {{regexp}}",
+                invalid_format: "Invalid format {{regexp}}",
+                not_in_range: "Not in range {{min}} - {{max}}"
+            }))
+        .addValidator("born", new DateValidator(
+            {
+                required: true,
+                // min: new Date(),
+                max: new Date(),
+                dateOnly: false,
+                iso: true
+            },
+            {
+                required: "Required {{min}} - {{max}}",
+                invalid_format: "Invalid format {{date}}",
+                not_in_range: "Not in range {{min}} - {{max}}"
+            }))
+        .addValidator("children", new NumberValidator(
+            {
+                required: true,
+                min: 0,
+                max: 10
+            },
+            {
+                required: "Required {{min}} - {{max}}",
+                invalid_format: "Invalid format, use format {{num}}",
+                not_in_range: "Not in range {{min}} - {{max}}"
+            }))
+        .addValidator("gender", new SelectValidator(
+            {
+                required: true,
+                options: formState.genders.map(g => g.value)
+            },
+            {
+                required: "Required {{options}}",
+                invalid_option: "Invalod option {{option}} {{options}}"
+            }))
+        .addValidator("married", new BooleanValidator(
+            {
+                required: true
+            },
+            {
+                required: "Required",
+                invalid_value: "Invalid value {{value}}"
+            }))
+        .addValidator("sport", new SelectValidator(
+            {
+                required: true,
+                options: formState.sports
+            },
+            {
+                required: "Required {{options}}",
+                invalid_option: "Invalod option {{option}} {{options}}"
+            }))
+        .format(formState.data);
+}
+
+function datetimeLocal(date: Date) {
+    if (!date) {
+        return "";
+    }
+    const tzo = - date.getTimezoneOffset();
+    if (tzo === 0) {
+        return date.toISOString();
+    } else {
+        // let dif = tzo >= 0 ? "+" : "-";
+        const pad = function (num: number, digits = 2) {
+            return String(num).padStart(digits, "0");
+        };
+        return (
+            date.getFullYear() +
+            "-" +
+            pad(date.getMonth() + 1) +
+            "-" +
+            pad(date.getDate()) +
+            "T" +
+            pad(date.getHours()) +
+            ":" +
+            pad(date.getMinutes())
+            // pad(tzo >= 0 ? date.getHours() + (tzo / 60) : date.getHours() - (tzo / 60)) +
+            // ":" +
+            // pad(tzo >= 0 ? date.getMinutes() + (tzo % 60) : date.getMinutes() - (tzo % 60))
+        );
+        // return (
+        //     date.getFullYear() +
+        //     "-" +
+        //     pad(date.getMonth() + 1) +
+        //     "-" +
+        //     pad(date.getDate()) +
+        //     "T" +
+        //     pad(date.getHours()) +
+        //     ":" +
+        //     pad(date.getMinutes()) +
+        //     ":" +
+        //     pad(date.getSeconds()) +
+        //     dif +
+        //     pad(tzo / 60) +
+        //     ":" +
+        //     pad(tzo % 60) +
+        //     "." +
+        //     pad(date.getMilliseconds(), 3)
+        // );
+    }
+}
+
+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]
                         ]
                     },
                     [
@@ -97,14 +101,14 @@ const formView: HView<FormState> = function (state): HElements {
                                 ["input#ch.w3-check", {
                                     type: "checkbox",
                                     name: "married",
-                                    checked: state.data.married || false
+                                    checked: state.data.married ?? false
                                 }],
                                 " Married"
                             ]]
                         ]],
                         ["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-appc_demo.html → hsml-app-test_demo.html}

@@ -10,7 +10,7 @@
     <h1>PeRyL hsml app demo</h1>
     <div id="app"></div>
     <!-- <script src="../incremental-dom/dist/umd/incremental-dom.js"></script> -->
-    <script type="module" src="hsml-appc_demo.ts"></script>
+    <script type="module" src="hsml-app-test_demo.ts"></script>
 </body>
 
 </html>