peryl 1.5.26 → 1.5.28

package/demo/hsml-app-form_demo.ts

@@ -1,5 +1,5 @@
 import { HElement, hjoin } from "../src/hsml";
-import { HApp, HAppActions, HDispatcher, HFormData, HFormInputData, HState, HView, happ } from "../src/hsml-app";
+import { HApp, HAppActions, HDispatcher, HFormData, HFormInputData, HState, HView } from "../src/hsml-app";
 
 interface FormData {
     name: string;
@@ -9,11 +9,14 @@ interface FormData {
     married: boolean;
     gender: string;
     sport: string;
+    file: string;
 }
 
+type Nullable<T> = { [P in keyof T]: T[P] | null };
+
 interface State {
     title: string;
-    form: HFormData<FormData>;
+    form: HFormData<Nullable<FormData>>;
     genders: {
         label: string;
         value: string;
@@ -33,7 +36,8 @@ const state: HState<State> = function () {
                 children: 0,
                 married: false,
                 gender: "female",
-                sport: "gymnastics"
+                sport: "gymnastics",
+                file: ""
             },
             validation: {},
             // valid: false
@@ -52,7 +56,8 @@ const state: HState<State> = function () {
 enum Actions {
     change = "form-change",
     submit = "form-submit",
-    cancel = "form-cancel"
+    cancel = "form-cancel",
+    rmfile = "form-rmfile"
 }
 
 const view: HView<State, Actions> = function (state) {
@@ -202,13 +207,28 @@ const view: HView<State, Actions> = function (state) {
                         ]],
                         ["p", [
                             ["label", ["Data",
-                                ["input.w3-input", {
+                                ["input.w3-input~file", {
                                     type: "file",
                                     name: "file",
                                     accept: "application/json,.json",
-                                    multiple: false
+                                    multiple: false,
+                                    maxsize: 500,
+                                    convert: "text"
                                 }]
-                            ]]
+                            ]],
+                            ["div.w3-text-red", state.form.validation.file],
+                            " ",
+                            state.form.data.file
+                                ? ["a.w3-btn",
+                                    {
+                                        href: "javascript:void(0)",
+                                        accesskey: "c",
+                                        title: "alt-c",
+                                        on: ["click", Actions.rmfile]
+                                    },
+                                    "Remove"
+                                ]
+                                : null
                         ]],
                         ["button.w3-btn.w3-blue", "Submit"],
                         " ",
@@ -240,22 +260,25 @@ const view: HView<State, Actions> = function (state) {
     ];
 };
 
-const dispatcher: HDispatcher<State, Actions> = async function (action, state) {
+const dispatcher: HDispatcher<State, Actions> = async function (this, action, state) {
     switch (action.type) {
-
         case HAppActions.init:
         case HAppActions.mount:
         case HAppActions.umount:
-        case HAppActions.attribute:
+        case HAppActions.attribute: {
             break;
-
-        case Actions.change:
+        }
+        case Actions.rmfile: {
+            this.refs["file"].value = null;
+            break;
+        }
+        case Actions.change: {
             console.log("FormActions.change", action.data);
             const input = action.data as HFormInputData;
             state.form.data[input.name!] = input.value;
             state.form.validation[input.name!] = input.validation;
-            if (action.data.file) {
-                const file = action.data.file as File;
+            if (action.data.value instanceof File) {
+                const file = action.data.value as File;
                 // Read the file as text
                 console.log("FormActions.change file text:", await file.text());
                 // Abuse response to read json data
@@ -265,11 +288,11 @@ const dispatcher: HDispatcher<State, Actions> = async function (action, state) {
                 // Read the file as base64
                 console.log("FormActions.change file base64:", Buffer.from(await file.arrayBuffer()).toString("base64"));
                 // Read large data chunk by chunk
-                console.log("FormActions.change file stream:", file.stream());
+                console.log("FormActions.change file stream:", await new Response(file.stream()).text());
             }
             break;
-
-        case Actions.submit:
+        }
+        case Actions.submit: {
             const form = action.data as HFormData<FormData>;
             const formData = JSON.stringify(form, null, 4);
             console.log("FormActions.submit", formData);
@@ -278,7 +301,8 @@ const dispatcher: HDispatcher<State, Actions> = async function (action, state) {
                 // Process data
                 // alert(`Form submit: \n${formData}`);
             }
-        break;
+            break;
+        }
     }
 };
 

package/dist/browser-esmodule/hsml-app.js

@@ -1,3 +1,5 @@
+import {Buffer as $6oE1Z$Buffer} from "buffer";
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -8,10 +10,6 @@ $parcel$export($9adf8bc2f1ba310f$exports, "HDispatchScopes", function () { retur
 $parcel$export($9adf8bc2f1ba310f$exports, "happ", function () { return $9adf8bc2f1ba310f$export$eb8950696418f795; }, function (v) { return $9adf8bc2f1ba310f$export$eb8950696418f795 = v; });
 $parcel$export($9adf8bc2f1ba310f$exports, "HApp", function () { return $9adf8bc2f1ba310f$export$8cfef5dc37c46888; }, function (v) { return $9adf8bc2f1ba310f$export$8cfef5dc37c46888 = v; });
 $parcel$export($9adf8bc2f1ba310f$exports, "happel", function () { return $9adf8bc2f1ba310f$export$1cfc54b3834d3c50; }, function (v) { return $9adf8bc2f1ba310f$export$1cfc54b3834d3c50 = v; });
-var $32c8c7b45dace799$exports = {};
-
-$parcel$export($32c8c7b45dace799$exports, "hsml2idomPatch", function () { return $32c8c7b45dace799$export$c539705c0f97f623; });
-$parcel$export($32c8c7b45dace799$exports, "hsmls2idomPatch", function () { return $32c8c7b45dace799$export$ccb3a8beff05eea9; });
 var $a15669afd069c056$exports = {};
 
 $parcel$export($a15669afd069c056$exports, "NBSP", function () { return $a15669afd069c056$export$4442f9d5f627adc8; });
@@ -112,6 +110,11 @@ function $a15669afd069c056$export$7427c8b17ccb408c(hsmls, sep) {
 }
 
 
+var $32c8c7b45dace799$exports = {};
+
+$parcel$export($32c8c7b45dace799$exports, "hsml2idomPatch", function () { return $32c8c7b45dace799$export$c539705c0f97f623; });
+$parcel$export($32c8c7b45dace799$exports, "hsmls2idomPatch", function () { return $32c8c7b45dace799$export$ccb3a8beff05eea9; });
+
 const $490b05c9343fc137$export$3f32c2013f0dcc1e = true;
 
 
@@ -952,6 +955,8 @@ function $32c8c7b45dace799$export$ccb3a8beff05eea9(node, hsmlFr, ctx) {
 }
 
 
+
+var $9adf8bc2f1ba310f$require$Buffer = $6oE1Z$Buffer;
 var $9adf8bc2f1ba310f$var$__awaiter = undefined && undefined.__awaiter || function(thisArg, _arguments, P, generator) {
     function adopt(value) {
         return value instanceof P ? value : new P(function(resolve) {
@@ -1067,14 +1072,14 @@ class $9adf8bc2f1ba310f$export$8cfef5dc37c46888 {
                 return hsmls !== null && hsmls !== void 0 ? hsmls : [];
             }
         };
-        this.actionCb = (actionType, data, event)=>{
-            data = (data === null || data === void 0 ? void 0 : data.constructor) === Function ? data(event) : data;
-            if (data === undefined && event) {
-                if (event instanceof CustomEvent) data = event.detail;
-                else data = $9adf8bc2f1ba310f$var$formData(event);
-            }
-            this._dispatchAction(actionType, data, event);
-        };
+        this.actionCb = (actionType, data, event)=>$9adf8bc2f1ba310f$var$__awaiter(this, void 0, void 0, function*() {
+                data = (data === null || data === void 0 ? void 0 : data.constructor) === Function ? data(event) : data;
+                if (data === undefined && event) {
+                    if (event instanceof CustomEvent) data = event.detail;
+                    else data = yield $9adf8bc2f1ba310f$var$formData(event);
+                }
+                this._dispatchAction(actionType, data, event);
+            });
         this.mount = (e)=>{
             const el = typeof e === "string" ? document.getElementById(e) : e;
             if (el && el[$9adf8bc2f1ba310f$var$HAPP]) {
@@ -1237,25 +1242,37 @@ function $9adf8bc2f1ba310f$var$elementDispatchCustomEvent(el, type, data) {
     }));
 }
 function $9adf8bc2f1ba310f$var$formData(e) {
-    const el = e.target;
-    switch(el.nodeName){
-        case "FORM":
-            e.preventDefault();
-            const form = {
-                data: {},
-                validation: {},
-                valid: true
-            };
-            const els = el.elements;
-            for(let i = 0; i < els.length; i++){
-                const inputData = $9adf8bc2f1ba310f$var$formInputData(els[i]);
-                if (inputData && inputData.name) {
-                    const formData = form.data;
-                    const name = inputData.name;
-                    const value = inputData.value;
-                    if (formData[name] === undefined) formData[name] = value;
-                    else if (typeof formData[name] === "string" || formData[name] instanceof String) {
-                        if (value instanceof Array) formData[name] = [
+    return $9adf8bc2f1ba310f$var$__awaiter(this, void 0, void 0, function*() {
+        const el = e.target;
+        switch(el.nodeName){
+            case "FORM":
+                e.preventDefault();
+                const form = {
+                    data: {},
+                    validation: {},
+                    valid: true
+                };
+                const els = el.elements;
+                for(let i = 0; i < els.length; i++){
+                    const inputData = yield $9adf8bc2f1ba310f$var$formInputData(els[i]);
+                    if (inputData && inputData.name) {
+                        const formData = form.data;
+                        const name = inputData.name;
+                        const value = inputData.value;
+                        if (formData[name] === undefined) formData[name] = value;
+                        else if (typeof formData[name] === "string" || formData[name] instanceof String) {
+                            if (value instanceof Array) formData[name] = [
+                                formData[name],
+                                ...value
+                            ];
+                            else formData[name] = [
+                                formData[name],
+                                value
+                            ];
+                        } else if (formData[name] instanceof Array) {
+                            if (value instanceof Array) formData[name] = formData[name].concat(value);
+                            else formData[name].push(value);
+                        } else if (value instanceof Array) formData[name] = [
                             formData[name],
                             ...value
                         ];
@@ -1263,185 +1280,207 @@ function $9adf8bc2f1ba310f$var$formData(e) {
                             formData[name],
                             value
                         ];
-                    } else if (formData[name] instanceof Array) {
-                        if (value instanceof Array) formData[name] = formData[name].concat(value);
-                        else formData[name].push(value);
-                    } else if (value instanceof Array) formData[name] = [
-                        formData[name],
-                        ...value
-                    ];
-                    else formData[name] = [
-                        formData[name],
-                        value
-                    ];
-                    if (formData[name] instanceof Array) {
-                        formData[name] = formData[name].filter((d)=>d !== null);
-                        if (els[i].type === "radio") formData[name] = formData[name].length ? formData[name][0] : null;
+                        if (formData[name] instanceof Array) {
+                            formData[name] = formData[name].filter((d)=>d !== null);
+                            if (els[i].type === "radio") formData[name] = formData[name].length ? formData[name][0] : null;
+                        }
+                        if (inputData.validation) form.validation[name] = inputData.validation;
+                        if (!inputData.valid) form.valid = false;
                     }
-                    if (inputData.validation) form.validation[name] = inputData.validation;
-                    if (!inputData.valid) form.valid = false;
                 }
-            }
-            return form;
-        default:
-            return $9adf8bc2f1ba310f$var$formInputData(el);
-    }
+                return form;
+            default:
+                return yield $9adf8bc2f1ba310f$var$formInputData(el);
+        }
+    });
 }
 function $9adf8bc2f1ba310f$var$formInputData(el) {
-    const vel = el;
-    if (vel.willValidate) {
-        let valid = true;
-        for(const key in vel.validity){
-            if (key !== "customError" && key !== "valid") {
-                if (vel.validity[key]) {
-                    const msgs = vel["validation"];
-                    if (msgs) {
-                        const msg = msgs[key];
-                        if (msg) {
-                            vel.setCustomValidity(msg);
-                            valid = false;
-                            break;
-                        } else {
-                            vel.setCustomValidity("");
-                            break;
+    return $9adf8bc2f1ba310f$var$__awaiter(this, void 0, void 0, function*() {
+        const vel = el;
+        if (vel.willValidate) {
+            let valid = true;
+            for(const key in vel.validity){
+                if (key !== "customError" && key !== "valid") {
+                    if (vel.validity[key]) {
+                        const msgs = vel["validation"];
+                        if (msgs) {
+                            const msg = msgs[key];
+                            if (msg) {
+                                vel.setCustomValidity(msg);
+                                valid = false;
+                                break;
+                            } else {
+                                vel.setCustomValidity("");
+                                break;
+                            }
                         }
                     }
                 }
             }
+            if (valid) vel.setCustomValidity("");
         }
-        if (valid) vel.setCustomValidity("");
-    }
-    let data;
-    switch(el.nodeName){
-        case "INPUT":
-            const iel = el;
-            switch(iel.type){
-                case "text":
-                case "hidden":
-                case "password":
-                case "email":
-                case "search":
-                case "url":
-                case "tel":
-                case "color":
-                case "submit":
-                case "button":
-                    data = {
-                        name: iel.name,
-                        value: iel.value === "" ? null : iel.value,
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
-                    };
-                    break;
-                case "number":
-                case "range":
-                    data = {
-                        name: iel.name,
-                        value: isNaN(iel.valueAsNumber) ? null : iel.valueAsNumber,
-                        valueString: iel.value,
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
-                    };
-                    break;
-                case "datetime-local":
-                    data = {
-                        name: iel.name,
-                        value: iel.value === "" ? null : iel.value,
-                        valueNumber: isNaN(iel.valueAsNumber) ? null : iel.valueAsNumber,
-                        valueDate: isNaN(iel.valueAsNumber) ? null : new Date(iel.valueAsNumber),
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
-                    };
-                    break;
-                case "date":
-                case "month":
-                case "time":
-                case "week":
-                    data = {
-                        name: iel.name,
-                        value: iel.value === "" ? null : iel.value,
-                        valueNumber: isNaN(iel.valueAsNumber) ? null : iel.valueAsNumber,
-                        valueDate: iel.valueAsDate,
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
-                    };
-                    break;
-                case "radio":
-                    data = {
-                        name: iel.name,
-                        value: iel.checked ? iel.value : null,
-                        valueString: iel.value,
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
-                    };
-                    break;
-                case "checkbox":
-                    if (iel.value === "on") data = {
-                        name: iel.name,
-                        value: iel.checked,
-                        valueString: iel.value,
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
-                    };
-                    else data = {
-                        name: iel.name,
-                        value: iel.checked ? String(iel.value) : null,
-                        valueString: iel.value,
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
-                    };
-                    break;
-                case "file":
-                    const files = iel.files;
-                    const value = iel.multiple ? files[0] : files.length === 1 ? files[0] : null;
+        let data;
+        switch(el.nodeName){
+            case "INPUT":
+                const iel = el;
+                switch(iel.type){
+                    case "text":
+                    case "hidden":
+                    case "password":
+                    case "email":
+                    case "search":
+                    case "url":
+                    case "tel":
+                    case "color":
+                    case "submit":
+                    case "button":
+                        data = {
+                            name: iel.name,
+                            value: iel.value === "" ? null : iel.value,
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        break;
+                    case "number":
+                    case "range":
+                        data = {
+                            name: iel.name,
+                            value: isNaN(iel.valueAsNumber) ? null : iel.valueAsNumber,
+                            valueString: iel.value,
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        break;
+                    case "datetime-local":
+                        data = {
+                            name: iel.name,
+                            value: iel.value === "" ? null : iel.value,
+                            valueNumber: isNaN(iel.valueAsNumber) ? null : iel.valueAsNumber,
+                            valueDate: isNaN(iel.valueAsNumber) ? null : new Date(iel.valueAsNumber),
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        break;
+                    case "date":
+                    case "month":
+                    case "time":
+                    case "week":
+                        data = {
+                            name: iel.name,
+                            value: iel.value === "" ? null : iel.value,
+                            valueNumber: isNaN(iel.valueAsNumber) ? null : iel.valueAsNumber,
+                            valueDate: iel.valueAsDate,
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        break;
+                    case "radio":
+                        data = {
+                            name: iel.name,
+                            value: iel.checked ? iel.value : null,
+                            valueString: iel.value,
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        break;
+                    case "checkbox":
+                        if (iel.value === "on") data = {
+                            name: iel.name,
+                            value: iel.checked,
+                            valueString: iel.value,
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        else data = {
+                            name: iel.name,
+                            value: iel.checked ? String(iel.value) : null,
+                            valueString: iel.value,
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        break;
+                    case "file":
+                        const files = iel.files;
+                        let converted = [];
+                        switch(iel.getAttribute("convert")){
+                            case "text":
+                                for (const file of files)converted.push((yield file.text()));
+                                break;
+                            case "json":
+                                for (const file of files)converted.push((yield new Response(file).json()));
+                                break;
+                            case "base64":
+                                for (const file of files)converted.push($9adf8bc2f1ba310f$require$Buffer.from((yield file.arrayBuffer())).toString("base64"));
+                                break;
+                            default:
+                                converted = files;
+                                break;
+                        }
+                        const value = iel.multiple ? converted[0] : converted.length === 1 ? converted[0] : null;
+                        data = {
+                            name: iel.name,
+                            value: value,
+                            valueFiles: files,
+                            valueString: iel.value,
+                            validation: iel.validationMessage,
+                            valid: iel.validity.valid
+                        };
+                        const maxsize = Number(iel.getAttribute("maxsize"));
+                        if (maxsize) {
+                            for (const file of files)if (file.size > maxsize) {
+                                data.validation = `Max ${$9adf8bc2f1ba310f$var$unit(maxsize)}, file ${$9adf8bc2f1ba310f$var$unit(file.size)}`;
+                                data.valid = false;
+                            }
+                        }
+                        break;
+                }
+                break;
+            case "SELECT":
+                const sel = el;
+                if (sel.multiple) {
+                    const values = Array.from(sel.selectedOptions).map((o)=>o.value);
                     data = {
-                        name: iel.name,
-                        value: value,
-                        valueString: iel.value,
-                        validation: iel.validationMessage,
-                        valid: iel.validity.valid
+                        name: sel.name,
+                        value: values,
+                        valueString: sel.value,
+                        validation: sel.validationMessage,
+                        valid: sel.validity.valid
                     };
-                    break;
-            }
-            break;
-        case "SELECT":
-            const sel = el;
-            if (sel.multiple) {
-                const values = Array.from(sel.selectedOptions).map((o)=>o.value);
-                data = {
+                } else data = {
                     name: sel.name,
-                    value: values,
-                    valueString: sel.value,
+                    value: sel.value === "" ? null : sel.value,
                     validation: sel.validationMessage,
                     valid: sel.validity.valid
                 };
-            } else data = {
-                name: sel.name,
-                value: sel.value === "" ? null : sel.value,
-                validation: sel.validationMessage,
-                valid: sel.validity.valid
-            };
-            break;
-        case "TEXTAREA":
-            const tel = el;
-            data = {
-                name: tel.name,
-                value: tel.value === "" ? null : tel.value,
-                validation: tel.validationMessage,
-                valid: tel.validity.valid
-            };
-            break;
-        case "BUTTON":
-            const bel = el;
-            data = {
-                name: bel.name,
-                value: bel.value === "" ? null : bel.value,
-                validation: bel.validationMessage,
-                valid: bel.validity.valid
-            };
-            break;
-    }
-    return data;
+                break;
+            case "TEXTAREA":
+                const tel = el;
+                data = {
+                    name: tel.name,
+                    value: tel.value === "" ? null : tel.value,
+                    validation: tel.validationMessage,
+                    valid: tel.validity.valid
+                };
+                break;
+            case "BUTTON":
+                const bel = el;
+                data = {
+                    name: bel.name,
+                    value: bel.value === "" ? null : bel.value,
+                    validation: bel.validationMessage,
+                    valid: bel.validity.valid
+                };
+                break;
+        }
+        return data;
+    });
+}
+function $9adf8bc2f1ba310f$var$unit(num) {
+    const mb = 1e6;
+    const kb = 1e3;
+    if (num >= mb) return `${(num / mb).toFixed(3)}${0, $a15669afd069c056$export$76bbc0cf5037aeea}MB`;
+    else if (num >= kb) return `${(num / kb).toFixed(0)}${0, $a15669afd069c056$export$76bbc0cf5037aeea}kB`;
+    else return `${num.toFixed(0)}${0, $a15669afd069c056$export$76bbc0cf5037aeea}B`;
 }