peryl 1.5.21 → 1.5.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/hsml-appel_demo.html +1 -1
- package/demo/hsml-appel_demo.ts +14 -10
- package/dist/browser-esmodule/hsml-app.js +24 -25
- package/dist/browser-esmodule/hsml-app.js.map +1 -1
- package/dist/browser-esmodule/index.js +24 -25
- package/dist/browser-esmodule/index.js.map +1 -1
- package/dist/browser-umd/hsml-app.js +1 -1
- package/dist/browser-umd/hsml-app.js.map +1 -1
- package/dist/browser-umd/index.js +1 -1
- package/dist/browser-umd/index.js.map +1 -1
- package/dist/demo/hsml-app-bysquare_demo.html +1 -1
- package/dist/demo/hsml-app-form-validation_demo.html +1 -1
- package/dist/demo/hsml-app-form_demo.html +1 -1
- package/dist/demo/hsml-app-test_demo.html +1 -1
- package/dist/demo/hsml-app-tictactoe_demo.html +1 -1
- package/dist/demo/hsml-app_demo.html +1 -1
- package/dist/demo/hsml-appel_demo.39c5c95a.js +2 -0
- package/dist/demo/hsml-appel_demo.39c5c95a.js.map +1 -0
- package/dist/demo/hsml-appel_demo.fd0c6348.js +2 -0
- package/dist/demo/hsml-appel_demo.fd0c6348.js.map +1 -0
- package/dist/demo/hsml-appel_demo.html +1 -1
- package/dist/demo/hsml-appi_demo.26745db2.js +2 -0
- package/dist/demo/hsml-appi_demo.26745db2.js.map +1 -0
- package/dist/demo/hsml-appi_demo.eab18b83.js +2 -0
- package/dist/demo/hsml-appi_demo.eab18b83.js.map +1 -0
- package/dist/demo/hsml-appi_demo.html +1 -1
- package/dist/hsml-app.d.ts +8 -8
- package/dist/hsml-app.js +22 -17
- package/dist/hsml-app.js.map +1 -1
- package/package.json +1 -1
- package/src/hsml-app.ts +51 -29
- package/dist/browser-esmodule/google-analytics.js +0 -50
- package/dist/browser-esmodule/google-analytics.js.map +0 -1
- package/dist/browser-umd/google-analytics.js +0 -2
- package/dist/browser-umd/google-analytics.js.map +0 -1
- package/dist/demo/hsml-appel_demo.1da052b6.js +0 -2
- package/dist/demo/hsml-appel_demo.1da052b6.js.map +0 -1
- package/dist/demo/hsml-appel_demo.7fcc74a6.js +0 -2
- package/dist/demo/hsml-appel_demo.7fcc74a6.js.map +0 -1
- package/dist/demo/hsml-appi_demo.3d3d0e4e.js +0 -2
- package/dist/demo/hsml-appi_demo.3d3d0e4e.js.map +0 -1
- package/dist/demo/hsml-appi_demo.eac28520.js +0 -2
- package/dist/demo/hsml-appi_demo.eac28520.js.map +0 -1
- package/dist/google-analytics.d.ts +0 -21
- package/dist/google-analytics.js +0 -63
- package/dist/google-analytics.js.map +0 -1
- package/src/google-analytics.ts +0 -79
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>PeRyL HSML App</title></head><body> <div id="app"></div> <script type="module" src="hsml-app-bysquare_demo.202d7294.js"></script><script src="hsml-app-bysquare_demo.04f36352.js" nomodule defer></script> </body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><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> <div id="app"></div> <script type="module" src="hsml-app-form-validation_demo.86e995c6.js"></script><script src="hsml-app-form-validation_demo.0e160406.js" nomodule defer></script> </body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><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> <div id="app"></div> <script type="module" src="hsml-app-form_demo.a519fe16.js"></script><script src="hsml-app-form_demo.945f4cb8.js" nomodule defer></script> </body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><meta charset="utf-8"><title>PeRyL hsml app demo</title></head><body> <h1>PeRyL hsml app demo</h1> <div id="app"></div> <script type="module" src="hsml-app-test_demo.82e9b3aa.js"></script><script src="hsml-app-test_demo.84db225e.js" nomodule defer></script> </body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>hsml tictactoe demo</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> <div id="app"></div> <script type="module" src="hsml-app-tictactoe_demo.84aaf792.js"></script><script src="hsml-app-tictactoe_demo.868e02e5.js" nomodule defer></script> </body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>PeRyL HSML App</title></head><body> <div id="app"></div> <script type="module" src="hsml-app_demo.fff12c58.js"></script><script src="hsml-app_demo.806aff82.js" nomodule defer></script> </body></html>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},n={},e={},o=t.parcelRequirede31;null==o&&((o=function(t){if(t in n)return n[t].exports;if(t in e){var o=e[t];delete e[t];var c={id:t,exports:{}};return n[t]=c,o.call(c.exports,c,c.exports),c.exports}var u=new Error("Cannot find module '"+t+"'");throw u.code="MODULE_NOT_FOUND",u}).register=function(t,n){e[t]=n},t.parcelRequirede31=o);var c,u,a=o("lQ1yG"),i=function(t,n,e,o){return new(e||(e=Promise))((function(c,u){function a(t){try{r(o.next(t))}catch(t){u(t)}}function i(t){try{r(o.throw(t))}catch(t){u(t)}}function r(t){var n;t.done?c(t.value):(n=t.value,n instanceof e?n:new e((function(t){t(n)}))).then(a,i)}r((o=o.apply(t,n||[])).next())}))};(u=c||(c={})).dec="counter-dec",u.inc="counter-inc",u.count="counter-count";var r;(0,a.happel)({state:function(){return{count:77}},view:function(t){return[["h3",["Counter"]],["p",[["em",["Count"]],": ",t.count," ",["button",{on:["click",c.dec,1]},["-"]],["button",{on:["click",c.inc,2]},["+"]]]]]},dispatcher:function(t,n,e){return i(this,void 0,void 0,(function*(){switch(t.type){case a.HAppActions.init:case a.HAppActions.mount:case a.HAppActions.umount:break;case a.HAppActions.attribute:"count"===t.data.attrName&&(n.count=Number(t.data.newVal));break;case c.inc:n.count=n.count+t.data,setTimeout((()=>e(c.dec,1)),1e3),e(c.count,n.count,a.HDispatchScopes.element);break;case c.dec:n.count=n.count-t.data,e(c.count,n.count,a.HDispatchScopes.element)}}))},id:"happ-counter",debug:!0}),(r||(r={})).action="app-action";(0,a.happel)({state:function(){return{count:33}},view:function(t){return[["h2",["App count: ",t.count]],["happ-counter",{count:t.count,on:[a.HAppActions.action,r.action]}]]},dispatcher:function(t,n,e){return i(this,void 0,void 0,(function*(){switch(t.type){case a.HAppActions.attribute:"count"===t.data.attrName&&(n.count=Number(t.data.newVal));break;case r.action:const o=t.data;if(o.type===c.count)n.count=o.data,e(c.count,n.count,a.HDispatchScopes.element);else console.log(o)}}))},id:"happ-app",debug:!0});
|
|
2
|
+
//# sourceMappingURL=hsml-appel_demo.39c5c95a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"weAMKA,EAAAC,E,oTAAAA,EAAAD,MAAc,KACf,kBACAC,EAAA,kBACAA,EAAA,sBAiEJ,IAAKC,GAdL,EAAAC,EAAAC,QAAqC,CACjCC,MAjDuC,WACvC,MAAO,CACHC,MAAO,GAEf,EA8CIC,KA5CqD,SAAUF,GAC/D,MAAO,CACH,CAAC,KAAM,CAAC,YACR,CAAC,IAAK,CACF,CAAC,KAAM,CAAC,UAAW,KAAMA,EAAMC,MAC/B,IACA,CAAC,SAAU,CAAEE,GAAI,CAAC,QAASR,EAAeS,IAAK,IAAM,CAAC,MACtD,CAAC,SAAU,CAAED,GAAI,CAAC,QAASR,EAAeU,IAAK,IAAM,CAAC,QAGlE,EAmCIC,WAjCiE,SAAgBC,EAAQP,EAAOQ,G,yCAKhG,OAAQD,EAAOE,MACX,KAAKX,EAAAY,YAAYC,KACjB,KAAKb,EAAAY,YAAYE,MACjB,KAAKd,EAAAY,YAAYG,OACb,MAEJ,KAAKf,EAAAY,YAAYI,UACgB,UAAzBP,EAAOQ,KAAKC,WACZhB,EAAMC,MAAQgB,OAAOV,EAAOQ,KAAKG,SAErC,MAEJ,KAAKvB,EAAeU,IAChBL,EAAMC,MAAQD,EAAMC,MAAQM,EAAOQ,KACnCI,YAAW,IAAMX,EAASb,EAAeS,IAAK,IAAI,KAClDI,EAASb,EAAeM,MAAOD,EAAMC,MAAOH,EAAAsB,gBAAgBC,SAC5D,MAEJ,KAAK1B,EAAeS,IAChBJ,EAAMC,MAAQD,EAAMC,MAAQM,EAAOQ,KACnCP,EAASb,EAAeM,MAAOD,EAAMC,MAAOH,EAAAsB,gBAAgBC,SAGxE,GAAC,EAMGC,GAAI,eAEJC,OAAO,KAQN1B,MAAU,KACX,qBA6CJ,EAAAC,EAAAC,QAA8C,CAC1CC,MA3C+B,WAC/B,MAAO,CACHC,MAAO,GAEf,EAwCIC,KAtCyC,SAAUF,GACnD,MAAO,CACH,CAAC,KAAM,CAAC,cAAeA,EAAMC,QAC7B,CAAC,eAAgB,CACbA,MAAOD,EAAMC,MACbE,GAAI,CAACL,EAAAY,YAAYH,OAAQV,EAAWU,UAGhD,EA+BID,WA7BsE,SAAgBC,EAAQP,EAAOQ,G,yCAKrG,OAAQD,EAAOE,MACX,KAAKX,EAAAY,YAAYI,UACgB,UAAzBP,EAAOQ,KAAKC,WACZhB,EAAMC,MAAQgB,OAAOV,EAAOQ,KAAKG,SAErC,MACJ,KAAKrB,EAAWU,OACZ,MAAMiB,EAAIjB,EAAOQ,KACjB,GAAQS,EAAEf,OACDd,EAAeM,MAChBD,EAAMC,MAAQuB,EAAET,KAChBP,EAASb,EAAeM,MAAOD,EAAMC,MAAOH,EAAAsB,gBAAgBC,cAG5DI,QAAQC,IAAIF,GAKhC,GAAC,EAMGF,GAAI,WAEJC,OAAO","sources":["demo/hsml-appel_demo.ts"],"sourcesContent":["import { HAction, HAppActions, happel, HDispatcher, HDispatchScopes, HState, HView } from \"../src/hsml-app\";\n\ninterface CounterState {\n count: number;\n}\n\nenum CounterActions {\n dec = \"counter-dec\",\n inc = \"counter-inc\",\n count = \"counter-count\"\n}\n\nconst counterState: HState<CounterState> = function () {\n return {\n count: 77\n }\n};\n\nconst counterView: HView<CounterState, CounterActions> = function (state) {\n return [\n [\"h3\", [\"Counter\"]],\n [\"p\", [\n [\"em\", [\"Count\"]], \": \", state.count,\n \" \",\n [\"button\", { on: [\"click\", CounterActions.dec, 1] }, [\"-\"]],\n [\"button\", { on: [\"click\", CounterActions.inc, 2] }, [\"+\"]]\n ]]\n ];\n};\n\nconst counterDispatcher: HDispatcher<CounterState, CounterActions> = async function (action, state, dispatch) {\n // console.log(\"action counter:\", action);\n // console.log(\"state counter:\", state);\n // console.log(\"happ counter:\", this);\n\n switch (action.type) {\n case HAppActions.init:\n case HAppActions.mount:\n case HAppActions.umount:\n break;\n\n case HAppActions.attribute:\n if (action.data.attrName === \"count\") {\n state.count = Number(action.data.newVal);\n }\n break;\n\n case CounterActions.inc:\n state.count = state.count + action.data as number;\n setTimeout(() => dispatch(CounterActions.dec, 1), 1e3); // async call\n dispatch(CounterActions.count, state.count, HDispatchScopes.element);\n break;\n\n case CounterActions.dec:\n state.count = state.count - action.data as number;\n dispatch(CounterActions.count, state.count, HDispatchScopes.element);\n break;\n }\n};\n\nhappel<CounterState, CounterActions>({\n state: counterState,\n view: counterView,\n dispatcher: counterDispatcher,\n id: \"happ-counter\",\n // attributes: [\"count\"],\n debug: true\n});\n\n\ninterface AppState {\n count: number;\n}\n\nenum AppActions {\n action = \"app-action\"\n}\n\nconst appState: HState<AppState> = function () {\n return {\n count: 33\n }\n};\n\nconst appView: HView<AppState, AppActions> = function (state) {\n return [\n [\"h2\", [\"App count: \", state.count]],\n [\"happ-counter\", {\n count: state.count,\n on: [HAppActions.action, AppActions.action]\n }]\n ];\n};\n\nconst appDispatcher: HDispatcher<AppState, AppActions | CounterActions> = async function (action, state, dispatch) {\n // console.log(\"action:\", action);\n // console.log(\"state:\", state);\n // console.log(\"happ:\", this);\n\n switch (action.type) {\n case HAppActions.attribute:\n if (action.data.attrName === \"count\") {\n state.count = Number(action.data.newVal);\n }\n break;\n case AppActions.action:\n const a = action.data as HAction<AppActions | CounterActions>;\n switch (a.type) {\n case CounterActions.count:\n state.count = a.data as number;\n dispatch(CounterActions.count, state.count, HDispatchScopes.element);\n break;\n default:\n console.log(a);\n break;\n }\n break;\n }\n};\n\nhappel<AppState, AppActions | CounterActions>({\n state: appState,\n view: appView,\n dispatcher: appDispatcher,\n id: \"happ-app\",\n // attributes: [],\n debug: true\n});\n"],"names":["$aba843136a874dd7$var$CounterActions","CounterActions","$aba843136a874dd7$var$AppActions","$lQ1yG","happel","state","count","view","on","dec","inc","dispatcher","action","dispatch","type","HAppActions","init","mount","umount","attribute","data","attrName","Number","newVal","setTimeout","HDispatchScopes","element","id","debug","a","console","log"],"version":3,"file":"hsml-appel_demo.39c5c95a.js.map"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(){var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},n={},e={},o=t.parcelRequirede31;null==o&&((o=function(t){if(t in n)return n[t].exports;if(t in e){var o=e[t];delete e[t];var c={id:t,exports:{}};return n[t]=c,o.call(c.exports,c,c.exports),c.exports}var u=new Error("Cannot find module '"+t+"'");throw u.code="MODULE_NOT_FOUND",u}).register=function(t,n){e[t]=n},t.parcelRequirede31=o);var c,u,a=o("es1PA"),i=function(t,n,e,o){return new(e||(e=Promise))((function(c,u){function a(t){try{r(o.next(t))}catch(t){u(t)}}function i(t){try{r(o.throw(t))}catch(t){u(t)}}function r(t){var n;t.done?c(t.value):(n=t.value,n instanceof e?n:new e((function(t){t(n)}))).then(a,i)}r((o=o.apply(t,n||[])).next())}))};(u=c||(c={})).dec="counter-dec",u.inc="counter-inc",u.count="counter-count";var r;(0,a.happel)({state:function(){return{count:77}},view:function(t){return[["h3",["Counter"]],["p",[["em",["Count"]],": ",t.count," ",["button",{on:["click",c.dec,1]},["-"]],["button",{on:["click",c.inc,2]},["+"]]]]]},dispatcher:function(t,n,e){return i(this,void 0,void 0,(function*(){switch(t.type){case a.HAppActions.init:case a.HAppActions.mount:case a.HAppActions.umount:break;case a.HAppActions.attribute:"count"===t.data.attrName&&(n.count=Number(t.data.newVal));break;case c.inc:n.count=n.count+t.data,setTimeout((()=>e(c.dec,1)),1e3),e(c.count,n.count,a.HDispatchScopes.element);break;case c.dec:n.count=n.count-t.data,e(c.count,n.count,a.HDispatchScopes.element)}}))},id:"happ-counter",debug:!0}),(r||(r={})).action="app-action";(0,a.happel)({state:function(){return{count:33}},view:function(t){return[["h2",["App count: ",t.count]],["happ-counter",{count:t.count,on:[a.HAppActions.action,r.action]}]]},dispatcher:function(t,n,e){return i(this,void 0,void 0,(function*(){switch(t.type){case a.HAppActions.attribute:"count"===t.data.attrName&&(n.count=Number(t.data.newVal));break;case r.action:const o=t.data;if(o.type===c.count)n.count=o.data,e(c.count,n.count,a.HDispatchScopes.element);else console.log(o)}}))},id:"happ-app",debug:!0})}();
|
|
2
|
+
//# sourceMappingURL=hsml-appel_demo.fd0c6348.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"ofAMKA,EAAAC,E,oTAAAA,EAAAD,MAAc,KACf,kBACAC,EAAA,kBACAA,EAAA,sBAiEJ,IAAKC,GAdL,EAAAC,EAAAC,QAAqC,CACjCC,MAjDuC,WACvC,MAAO,CACHC,MAAO,GAEf,EA8CIC,KA5CqD,SAAUF,GAC/D,MAAO,CACH,CAAC,KAAM,CAAC,YACR,CAAC,IAAK,CACF,CAAC,KAAM,CAAC,UAAW,KAAMA,EAAMC,MAC/B,IACA,CAAC,SAAU,CAAEE,GAAI,CAAC,QAASR,EAAeS,IAAK,IAAM,CAAC,MACtD,CAAC,SAAU,CAAED,GAAI,CAAC,QAASR,EAAeU,IAAK,IAAM,CAAC,QAGlE,EAmCIC,WAjCiE,SAAgBC,EAAQP,EAAOQ,G,yCAKhG,OAAQD,EAAOE,MACX,KAAKX,EAAAY,YAAYC,KACjB,KAAKb,EAAAY,YAAYE,MACjB,KAAKd,EAAAY,YAAYG,OACb,MAEJ,KAAKf,EAAAY,YAAYI,UACgB,UAAzBP,EAAOQ,KAAKC,WACZhB,EAAMC,MAAQgB,OAAOV,EAAOQ,KAAKG,SAErC,MAEJ,KAAKvB,EAAeU,IAChBL,EAAMC,MAAQD,EAAMC,MAAQM,EAAOQ,KACnCI,YAAW,IAAMX,EAASb,EAAeS,IAAK,IAAI,KAClDI,EAASb,EAAeM,MAAOD,EAAMC,MAAOH,EAAAsB,gBAAgBC,SAC5D,MAEJ,KAAK1B,EAAeS,IAChBJ,EAAMC,MAAQD,EAAMC,MAAQM,EAAOQ,KACnCP,EAASb,EAAeM,MAAOD,EAAMC,MAAOH,EAAAsB,gBAAgBC,SAGxE,GAAC,EAMGC,GAAI,eAEJC,OAAO,KAQN1B,MAAU,KACX,qBA6CJ,EAAAC,EAAAC,QAA8C,CAC1CC,MA3C+B,WAC/B,MAAO,CACHC,MAAO,GAEf,EAwCIC,KAtCyC,SAAUF,GACnD,MAAO,CACH,CAAC,KAAM,CAAC,cAAeA,EAAMC,QAC7B,CAAC,eAAgB,CACbA,MAAOD,EAAMC,MACbE,GAAI,CAACL,EAAAY,YAAYH,OAAQV,EAAWU,UAGhD,EA+BID,WA7BsE,SAAgBC,EAAQP,EAAOQ,G,yCAKrG,OAAQD,EAAOE,MACX,KAAKX,EAAAY,YAAYI,UACgB,UAAzBP,EAAOQ,KAAKC,WACZhB,EAAMC,MAAQgB,OAAOV,EAAOQ,KAAKG,SAErC,MACJ,KAAKrB,EAAWU,OACZ,MAAMiB,EAAIjB,EAAOQ,KACjB,GAAQS,EAAEf,OACDd,EAAeM,MAChBD,EAAMC,MAAQuB,EAAET,KAChBP,EAASb,EAAeM,MAAOD,EAAMC,MAAOH,EAAAsB,gBAAgBC,cAG5DI,QAAQC,IAAIF,GAKhC,GAAC,EAMGF,GAAI,WAEJC,OAAO,G","sources":["demo/hsml-appel_demo.ts"],"sourcesContent":["import { HAction, HAppActions, happel, HDispatcher, HDispatchScopes, HState, HView } from \"../src/hsml-app\";\n\ninterface CounterState {\n count: number;\n}\n\nenum CounterActions {\n dec = \"counter-dec\",\n inc = \"counter-inc\",\n count = \"counter-count\"\n}\n\nconst counterState: HState<CounterState> = function () {\n return {\n count: 77\n }\n};\n\nconst counterView: HView<CounterState, CounterActions> = function (state) {\n return [\n [\"h3\", [\"Counter\"]],\n [\"p\", [\n [\"em\", [\"Count\"]], \": \", state.count,\n \" \",\n [\"button\", { on: [\"click\", CounterActions.dec, 1] }, [\"-\"]],\n [\"button\", { on: [\"click\", CounterActions.inc, 2] }, [\"+\"]]\n ]]\n ];\n};\n\nconst counterDispatcher: HDispatcher<CounterState, CounterActions> = async function (action, state, dispatch) {\n // console.log(\"action counter:\", action);\n // console.log(\"state counter:\", state);\n // console.log(\"happ counter:\", this);\n\n switch (action.type) {\n case HAppActions.init:\n case HAppActions.mount:\n case HAppActions.umount:\n break;\n\n case HAppActions.attribute:\n if (action.data.attrName === \"count\") {\n state.count = Number(action.data.newVal);\n }\n break;\n\n case CounterActions.inc:\n state.count = state.count + action.data as number;\n setTimeout(() => dispatch(CounterActions.dec, 1), 1e3); // async call\n dispatch(CounterActions.count, state.count, HDispatchScopes.element);\n break;\n\n case CounterActions.dec:\n state.count = state.count - action.data as number;\n dispatch(CounterActions.count, state.count, HDispatchScopes.element);\n break;\n }\n};\n\nhappel<CounterState, CounterActions>({\n state: counterState,\n view: counterView,\n dispatcher: counterDispatcher,\n id: \"happ-counter\",\n // attributes: [\"count\"],\n debug: true\n});\n\n\ninterface AppState {\n count: number;\n}\n\nenum AppActions {\n action = \"app-action\"\n}\n\nconst appState: HState<AppState> = function () {\n return {\n count: 33\n }\n};\n\nconst appView: HView<AppState, AppActions> = function (state) {\n return [\n [\"h2\", [\"App count: \", state.count]],\n [\"happ-counter\", {\n count: state.count,\n on: [HAppActions.action, AppActions.action]\n }]\n ];\n};\n\nconst appDispatcher: HDispatcher<AppState, AppActions | CounterActions> = async function (action, state, dispatch) {\n // console.log(\"action:\", action);\n // console.log(\"state:\", state);\n // console.log(\"happ:\", this);\n\n switch (action.type) {\n case HAppActions.attribute:\n if (action.data.attrName === \"count\") {\n state.count = Number(action.data.newVal);\n }\n break;\n case AppActions.action:\n const a = action.data as HAction<AppActions | CounterActions>;\n switch (a.type) {\n case CounterActions.count:\n state.count = a.data as number;\n dispatch(CounterActions.count, state.count, HDispatchScopes.element);\n break;\n default:\n console.log(a);\n break;\n }\n break;\n }\n};\n\nhappel<AppState, AppActions | CounterActions>({\n state: appState,\n view: appView,\n dispatcher: appDispatcher,\n id: \"happ-app\",\n // attributes: [],\n debug: true\n});\n"],"names":["$1adacf07b647a858$var$CounterActions","CounterActions","$1adacf07b647a858$var$AppActions","$es1PA","happel","state","count","view","on","dec","inc","dispatcher","action","dispatch","type","HAppActions","init","mount","umount","attribute","data","attrName","Number","newVal","setTimeout","HDispatchScopes","element","id","debug","a","console","log"],"version":3,"file":"hsml-appel_demo.fd0c6348.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><meta charset="utf-8"><title>PeRyL hsml app demo</title></head><body> <h1>PeRyL hsml app demo</h1> <happ-app count="11"></happ-app> <script type="module" src="hsml-appel_demo.39c5c95a.js"></script><script src="hsml-appel_demo.fd0c6348.js" nomodule defer></script> <script>document.getElementsByTagName("happ-app")[0].addEventListener("action",(function(e){console.log("EventListener action",e.detail)}));</script> </body></html>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(){function e(e,t,i,n){Object.defineProperty(e,t,{get:i,set:n,enumerable:!0,configurable:!0})}var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i={},n={},a=t.parcelRequirede31;null==a&&((a=function(e){if(e in i)return i[e].exports;if(e in n){var t=n[e];delete n[e];var a={id:e,exports:{}};return i[e]=a,t.call(a.exports,a,a.exports),a.exports}var s=new Error("Cannot find module '"+e+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(e,t){n[e]=t},t.parcelRequirede31=a),a.register("es1PA",(function(t,i){e(t.exports,"HAppActions",(function(){return n}),(function(e){return n=e})),e(t.exports,"HDispatchScopes",(function(){return l}),(function(e){return l=e})),e(t.exports,"happ",(function(){return f}),(function(e){return f=e})),e(t.exports,"HApp",(function(){return b}),(function(e){return b=e})),e(t.exports,"happel",(function(){return w}),(function(e){return w=e}));var n,s,l,o,d=a("8IJ2T"),r=function(e,t,i,n){return new(i||(i=Promise))((function(a,s){function l(e){try{d(n.next(e))}catch(e){s(e)}}function o(e){try{d(n.throw(e))}catch(e){s(e)}}function d(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(l,o)}d((n=n.apply(e,t||[])).next())}))};(s=n||(n={})).init="happ-init",s.mount="happ-mount",s.umount="happ-umount",s.action="happ-action",s.attribute="happ-attribute",(o=l||(l={})).element="element",o.window="window";const u=window.requestAnimationFrame||function(e){window.setTimeout(e,1e3/60)},c=window.cancelAnimationFrame||function(e){window.clearTimeout(e)},h="action:",v="dispatch:",m="render:",p="happ";function f(e){return new b(e.state,e.view,e.dispatcher,e.element,e.debug,e.id)}function w(e){customElements.define(e.id,class extends HTMLElement{static get observedAttributes(){var t;const i=e.state();return(null!==(t=e.attributes)&&void 0!==t?t:"object"==typeof i)?Object.keys(i):[]}constructor(){super(),this._happel=new b(e.state,e.view,e.dispatcher,void 0,e.debug,e.id),this._happel.customElement=this}connectedCallback(){this.attachShadow({mode:"open"}),this._happel.mount(this.shadowRoot)}disconnectedCallback(){this._happel.umount()}adoptedCallback(){this._happel.update()}attributeChangedCallback(e,t,i){this._happel.dispatch(n.attribute,{attrName:e,oldVal:t,newVal:i})}})}class b{constructor(e,t,i,a,s,l){this.refs={},this.dispatch=(e,t,i)=>r(this,void 0,void 0,(function*(){return this._dispatchAction(e,t,void 0,i)})),this.render=()=>{if(this.debug){const e=performance.now();let t;try{t=this.view(this.state)}catch(e){b.error(this.id,m,e)}const i=performance.now();return b.log(this.id,m,i-e+" ms",t),null!=t?t:[]}{let e;try{e=this.view(this.state)}catch(e){b.error(this.id,m,e)}return null!=e?e:[]}},this.actionCb=(e,t,i)=>{void 0===(t=(null==t?void 0:t.constructor)===Function?t(i):t)&&i&&(t=i instanceof CustomEvent?i.detail:function(e){const t=e.target;if("FORM"===t.nodeName){e.preventDefault();const i={data:{},validation:{},valid:!0},n=t.elements;for(let e=0;e<n.length;e++){const t=y(n[e]);if(t&&t.name){const a=i.data,s=t.name,l=t.value;void 0===a[s]?a[s]=l:"string"==typeof a[s]||a[s]instanceof String?a[s]=l instanceof Array?[a[s],...l]:[a[s],l]:a[s]instanceof Array?l instanceof Array?a[s]=a[s].concat(l):a[s].push(l):a[s]=l instanceof Array?[a[s],...l]:[a[s],l],a[s]instanceof Array&&(a[s]=a[s].filter((e=>null!==e)),"radio"===n[e].type&&(a[s]=a[s].length?a[s][0]:null)),t.validation&&(i.validation[s]=t.validation),t.valid||(i.valid=!1)}}return i}return y(t)}(i)),this._dispatchAction(e,t,i)},this.mount=e=>{const t="string"==typeof e?document.getElementById(e):e;if(t&&t[p]){t[p].umount()}if(t&&!this.element){this.element=t,t[p]=this;const e=this.render();this._updateDom(t,e,this),this._dispatchAction(n.mount,this.element)}return this},this.umount=()=>{if(this.element){this._dispatchAction(n.umount,this.element),this.element.hasAttribute(p)&&this.element.removeAttribute(p);const e=this.element.querySelectorAll(`[${p}]`);for(let t=0;t<e.length;t++){const i=e[t].happ;null==i||i.umount()}for(;this.element.firstChild;)this.element.removeChild(this.element.firstChild);delete this.element.happ,this.element=void 0}return this._windowActionListener&&window.removeEventListener(n.action,this._windowActionListener),this},this.update=()=>(this.element&&!this._updateSched&&(this._updateSched=u((()=>{if(this.element){const e=this.render();this._updateDom(this.element,e,this)}this._updateSched=void 0}))),this),this.toHsml=()=>{if(this.element){if(!this._updateSched)return["div",{skip:!0}];c(this._updateSched),this._updateSched=void 0}const e=this.render();return e.push((e=>{this.element||(this.element=e,e.happ=this,this._dispatchAction(n.mount,this.element))})),["div",e]},this.toHtml=()=>this.element?this.element.outerHTML:"",this.id=null!=l?l:p,this.debug=null!=s&&s,this.state=e(),this.view=t,this.dispatcher=null!=i?i:e=>r(this,void 0,void 0,(function*(){return b.log(this.id,h,e.type,e.data)})),this._dispatchAction(n.init,this).then((()=>a&&this.mount(a)))}_dispatchAction(e,t,i,n){return r(this,void 0,void 0,(function*(){if(this.debug){b.log(this.id,h,{type:e,data:t,event:i});const a=performance.now();yield this._dispatch(e,t,i,n);const s=performance.now();b.log(this.id,v,s-a+" ms",this.state)}else yield this._dispatch(e,t,i,n)}))}_dispatch(e,t,i,n){return r(this,void 0,void 0,(function*(){if(!n)try{(yield this.dispatcher({type:e,data:t,event:i},this.state,this.dispatch))||this.update()}catch(e){b.error(this.id,v,e)}"element"===n&&this._dispatchElement(e,t),"window"===n&&this._dispatchWindow(e,t)}))}_dispatchElement(e,t){return r(this,void 0,void 0,(function*(){this.customElement&&g(this.customElement,n.action,{type:e,data:t}),!this.customElement&&this.element&&g(this.element,n.action,{type:e,data:t})}))}_dispatchWindow(e,t){return r(this,void 0,void 0,(function*(){window.dispatchEvent(new CustomEvent(n.action,{detail:{type:e,data:t}}))}))}windowActionListen(){this._windowActionListener?b.warn("windowEventListener already added"):(this._windowActionListener=e=>{const t=e.detail;this._dispatchAction(n.action,t)},window.addEventListener(n.action,this._windowActionListener))}_updateDom(e,t,i){if(this.debug){const n=performance.now();(0,d.hsmls2idomPatch)(e,t,i);const a=performance.now();b.log(this.id,"update:",a-n+" ms",e)}else(0,d.hsmls2idomPatch)(e,t,i)}}function g(e,t,i){var n,a;null==e||e.dispatchEvent(new CustomEvent(t,{detail:i})),null===(a=(n=e)[`on${t}`])||void 0===a||a.call(n,new CustomEvent(t,{detail:i}))}function y(e){const t=e;if(t.willValidate){let e=!0;for(const i in t.validity)if("customError"!==i&&"valid"!==i&&t.validity[i]){const n=t.validation;if(n){const a=n[i];if(a){t.setCustomValidity(a),e=!1;break}t.setCustomValidity("");break}}e&&t.setCustomValidity("")}let i;switch(e.nodeName){case"INPUT":const t=e;switch(t.type){case"text":case"hidden":case"password":case"email":case"search":case"url":case"tel":case"color":case"submit":case"button":i={name:t.name,value:""===t.value?null:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"number":case"range":i={name:t.name,value:isNaN(t.valueAsNumber)?null:t.valueAsNumber,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"datetime-local":i={name:t.name,value:""===t.value?null:t.value,valueNumber:isNaN(t.valueAsNumber)?null:t.valueAsNumber,valueDate:isNaN(t.valueAsNumber)?null:new Date(t.valueAsNumber),validation:t.validationMessage,valid:t.validity.valid};break;case"date":case"month":case"time":case"week":i={name:t.name,value:""===t.value?null:t.value,valueNumber:isNaN(t.valueAsNumber)?null:t.valueAsNumber,valueDate:t.valueAsDate,validation:t.validationMessage,valid:t.validity.valid};break;case"radio":i={name:t.name,value:t.checked?t.value:null,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"checkbox":i="on"===t.value?{name:t.name,value:t.checked,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid}:{name:t.name,value:t.checked?String(t.value):null,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"file":const e=t.files,n=t.multiple||1===e.length?e[0]:null;i={name:t.name,value:n,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid}}break;case"SELECT":const n=e;if(n.multiple){const e=Array.from(n.selectedOptions).map((e=>e.value));i={name:n.name,value:e,valueString:n.value,validation:n.validationMessage,valid:n.validity.valid}}else i={name:n.name,value:""===n.value?null:n.value,validation:n.validationMessage,valid:n.validity.valid};break;case"TEXTAREA":const a=e;i={name:a.name,value:""===a.value?null:a.value,validation:a.validationMessage,valid:a.validity.valid};break;case"BUTTON":const s=e;i={name:s.name,value:""===s.value?null:s.value,validation:s.validationMessage,valid:s.validity.valid}}return i}b.log=console.log,b.error=console.error,b.warn=console.warn}))}();
|
|
2
|
+
//# sourceMappingURL=hsml-appi_demo.26745db2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"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","sources":["src/hsml-app.ts"],"sourcesContent":["import { HAttrOnData, HAttrOnDataFnc, HElement, HElements, HHandlerCtx } from \"./hsml\";\nimport { hsmls2idomPatch } from \"./hsml-idom\";\n\nexport type HState<State> = () => State;\n\nexport type HView<State, HActionType extends string> = (\n state: State\n) => HElements<HActionType>;\n\nexport type HView1<State, HActionType extends string> = (\n state: State\n) => HElement<HActionType>;\n\nexport type HAppAction =\n | \"happ-init\"\n | \"happ-mount\"\n | \"happ-umount\"\n | \"happ-action\"\n | \"happ-attribute\";\n\nexport enum HAppActions {\n init = \"happ-init\",\n mount = \"happ-mount\",\n umount = \"happ-umount\",\n action = \"happ-action\",\n attribute = \"happ-attribute\"\n}\n\nexport interface HAction<HActionType extends string> {\n type: HActionType;\n data?: any;\n event?: Event;\n}\n\nexport type HDispatchScope =\n | \"element\"\n | \"window\";\n\nexport enum HDispatchScopes {\n element = \"element\",\n window = \"window\"\n}\n\nexport type HDispatch<HActionType extends string> = (\n type: HAction<HActionType>[\"type\"],\n data?: HAction<HActionType>[\"data\"],\n scope?: HDispatchScope | HDispatchScopes\n) => Promise<void>;\n\ntype SkipUpdate = true;\n\nexport type HDispatcher<State, HActionType extends string> = (\n // this: HApp<State, HActionType>,\n action: HAction<HActionType | HAppAction | HAppActions>,\n state: State,\n dispatch: HDispatch<HActionType>\n) => Promise<void | SkipUpdate>;\n\nconst schedule = window.requestAnimationFrame ||\n // window.webkitRequestAnimationFrame ||\n // (window as any).mozRequestAnimationFrame ||\n // (window as any).oRequestAnimationFrame ||\n // (window as any).msRequestAnimationFrame ||\n function (callback: Function) { window.setTimeout(callback, 1000 / 60); };\n\nconst unschedule = window.cancelAnimationFrame ||\n // window.webkitCancelAnimationFrame ||\n // (window as any).mozCancelAnimationFrame ||\n // (window as any).oCancelAnimationFrame ||\n // (window as any).msCancelAnimationFrame ||\n function (handle: number) { window.clearTimeout(handle); };\n\nconst msgAction = \"action:\";\nconst msgDispatch = \"dispatch:\";\nconst msgRender = \"render:\";\nconst msgUpdate = \"update:\";\n\nconst HAPP = \"happ\";\n\nexport interface HAppI<State, HActionType extends string> {\n state: HState<State>;\n view: HView<State, HActionType>;\n dispatcher: HDispatcher<State, HActionType>;\n element?: Element | string | null;\n debug?: boolean;\n /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n id?: string;\n attributes?: string[];\n}\n\n/**\n * HApp definition\n *\n * @param hAppI HApp definition\n * @returns HApp instance\n */\nexport function happ<State, HActionType extends string>(hAppI: {\n state: HState<State>;\n view: HView<State, HActionType>;\n dispatcher: HDispatcher<State, HActionType>;\n element: Element | string | null;\n debug?: boolean;\n /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n id?: string;\n // attributes?: string[];\n}) {\n return new HApp<State, HActionType>(\n hAppI.state,\n hAppI.view,\n hAppI.dispatcher,\n hAppI.element,\n hAppI.debug,\n hAppI.id\n // hAppI!.attributes\n );\n}\n\n// export type Class<T = object> = new (...args: any[]) => T;\n\n// export function happi<State, HActionType extends string>(\n// hAppI: Class<HAppI<State, HActionType>>,\n// element?: Element | string | null,\n// debug? boolean,\n// /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n// id?: string\n// // attributes?: string[]\n// ) {\n// const hapi = new hAppI();\n// return new HApp<State, HActionType>(\n// hapi.state,\n// hapi.view,\n// hapi.dispatcher,\n// element,\n// debug\n// );\n// }\n\n// HAppEl\n\n/**\n * HApp custom HTML element definition.\n *\n * @param hAppI HApp definition\n */\nexport function happel<State, HActionType extends string>(hAppI: {\n state: HState<State>;\n view: HView<State, HActionType>;\n dispatcher: HDispatcher<State, HActionType>;\n /** Pattern ^[a-z]{0,10}-[a-z0-9-]{0,30}[a-z0-9]$ */\n id: string;\n /** Element attribute list */\n attributes?: string[];\n debug?: boolean;\n}): void {\n customElements.define(\n hAppI.id,\n class HAppElement extends HTMLElement {\n static get observedAttributes() {\n const state = hAppI.state();\n return hAppI.attributes ?? typeof state === \"object\"\n ? Object.keys(state as object)\n : [];\n }\n\n private _happel: HApp<State, HActionType>;\n\n constructor() {\n super();\n this._happel = new HApp<State, HActionType>(\n hAppI.state,\n hAppI.view,\n hAppI.dispatcher,\n undefined,\n hAppI.debug,\n hAppI.id\n // hAppI.attributes\n );\n (this._happel as any).customElement = this;\n }\n\n connectedCallback() {\n // this._happel.mount(this);\n this.attachShadow({ mode: \"open\" });\n this._happel.mount(this.shadowRoot as any);\n }\n\n disconnectedCallback() {\n this._happel.umount();\n }\n\n adoptedCallback() {\n this._happel.update();\n }\n\n attributeChangedCallback(\n attrName: string,\n oldVal: string | null,\n newVal: string | null\n ) {\n this._happel.dispatch(\n HAppActions.attribute as any,\n { attrName, oldVal, newVal });\n }\n }\n );\n}\n\n/**\n * HSML App\n */\nexport class HApp<State, HActionType extends string> implements HHandlerCtx<HActionType> {\n\n static log = console.log;\n static error = console.error;\n static warn = console.warn;\n\n readonly state: State;\n readonly view: HView<State, HActionType>;\n readonly dispatcher: HDispatcher<State, HActionType>;\n\n debug: boolean;\n\n /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n readonly id: string;\n // readonly attributes?: string[];\n\n readonly element?: HTMLElement;\n readonly refs: { [key: string]: HTMLElement } = {};\n\n readonly customElement?: HTMLElement; // happ custom html element\n\n private _updateSched?: number;\n\n // private _onDispatch?: HDispatcher<State>;\n\n private _windowActionListener?: (event: Event) => void;\n\n /**\n * @param state State init function\n * @param view View renderer function\n * @param dispatcher Dispatcher function\n * @param element Root element\n * @param debug Debug mode\n * @param id HApp ID, pattern \"^[a-z][a-z0-9-]{0,30}[a-z0-9]$\"\n */\n constructor(\n state: HState<State>,\n view: HView<State, HActionType>,\n dispatcher?: HDispatcher<State, HActionType>,\n element?: Element | string | null,\n debug?: boolean ,\n id?: string,\n // attributes?: string[]\n ) {\n this.id = id ?? HAPP;\n this.debug = debug ?? false;\n // this.attributes = attributes ?? [];\n // this.attributes = attributes ?? typeof state() === \"object\"\n // ? Object.keys(state() as object)\n // : [];\n this.state = state();\n this.view = view;\n this.dispatcher = dispatcher ?? (async (a) => HApp.log(this.id, msgAction, a.type, a.data));\n this._dispatchAction(HAppActions.init, this).then(() => element && this.mount(element));\n }\n\n /**\n * Dispatch app action.\n */\n dispatch: HDispatch<HActionType> = async (\n type: HActionType,\n data?: any,\n scope?: HDispatchScope\n ): Promise<void> => {\n return this._dispatchAction(type, data, undefined, scope);\n }\n\n // onDispatch = (dispatcher: HDispatcher<State>): this => {\n // this._onDispatch = dispatcher;\n // return this;\n // }\n\n private async _dispatchAction(\n type: HActionType | HAppAction | HAppActions,\n data?: any,\n event?: Event,\n scope?: HDispatchScope\n ): Promise<void> {\n if (this.debug) {\n HApp.log(this.id, msgAction, { type, data, event });\n const t0 = performance.now();\n await this._dispatch(type, data, event, scope);\n const t1 = performance.now();\n HApp.log(this.id, msgDispatch, `${t1 - t0} ms`, this.state);\n } else {\n await this._dispatch(type, data, event, scope);\n }\n }\n\n private async _dispatch(\n type: HActionType | HAppAction | HAppActions,\n data: any,\n event?: Event,\n scope?: HDispatchScope\n ): Promise<void> {\n if (!scope) {\n try {\n const skipUpdate = await this.dispatcher(\n { type: type as HActionType, data, event },\n this.state,\n this.dispatch\n );\n if (!skipUpdate) {\n this.update();\n }\n } catch (e) {\n HApp.error(this.id, msgDispatch, e);\n }\n }\n scope === \"element\" && this._dispatchElement(type, data);\n scope === \"window\" && this._dispatchWindow(type, data);\n }\n\n private async _dispatchElement(\n type: HActionType | HAppAction | HAppActions,\n data?: any\n ): Promise<void> {\n this.customElement && elementDispatchCustomEvent(this.customElement, HAppActions.action, { type, data });\n !this.customElement && this.element && elementDispatchCustomEvent(this.element, HAppActions.action, { type, data });\n // this._onDispatch?.({ type, data, event }, this.state, this.dispatch);\n }\n\n private async _dispatchWindow(\n type: HActionType | HAppAction | HAppActions,\n data?: any): Promise<void> {\n window.dispatchEvent(new CustomEvent(HAppActions.action, { detail: { type, data } }));\n }\n\n /**\n * Window action listen and route actions to dispatcher.\n * Call this method on app mount action.\n * Listening will be stopped on app umount automatically.\n */\n windowActionListen() {\n if (!this._windowActionListener) {\n this._windowActionListener = (event: Event) => {\n const action = (event as CustomEvent).detail as HAction<HActionType>;\n this._dispatchAction(HAppActions.action, action);\n };\n window.addEventListener(HAppActions.action, this._windowActionListener);\n } else {\n HApp.warn(\"windowEventListener already added\");\n }\n }\n\n /**\n * Render HSML based on app state.\n */\n render = (): HElements<HActionType> => {\n if (this.debug) {\n const t0 = performance.now();\n let hsmls;\n try {\n hsmls = this.view(this.state);\n } catch (e) {\n HApp.error(this.id, msgRender, e);\n }\n const t1 = performance.now();\n HApp.log(this.id, msgRender, `${t1 - t0} ms`, hsmls);\n return hsmls ?? [];\n } else {\n let hsmls;\n try {\n hsmls = this.view(this.state);\n } catch (e) {\n HApp.error(this.id, msgRender, e);\n }\n return hsmls ?? [];\n }\n }\n\n /**\n * HSML action callback.\n */\n actionCb = (actionType: HActionType, data: HAttrOnData, event: Event): void => {\n data = (data?.constructor === Function)\n ? (data as HAttrOnDataFnc)(event)\n : data;\n if (data === undefined && event) {\n if (event instanceof CustomEvent) {\n data = event.detail;\n } else {\n data = formData(event) as any;\n // TODO middlewares for data processing\n // const middlewares: ((data: any, event: Event) => any)[] = [];\n // data = middlewares.reduce(\n // (data, middleware) => middleware(data, event),\n // data\n // );\n }\n }\n this._dispatchAction(actionType, data, event);\n }\n\n private _updateDom<HActionType extends string>(\n el: Element,\n hsml: HElements<HActionType>,\n ctx: HHandlerCtx<HActionType>\n ): void {\n if (this.debug) {\n const t0 = performance.now();\n hsmls2idomPatch(el, hsml, ctx);\n const t1 = performance.now();\n HApp.log(this.id, msgUpdate, `${t1 - t0} ms`, el);\n } else {\n hsmls2idomPatch(el, hsml, ctx);\n }\n }\n\n /**\n * Mount app to DOM element.\n *\n * @param e DOM element\n */\n mount = (e: Element | string | null): this => {\n const el = (typeof e === \"string\") ? document.getElementById(e) : e;\n if (el && (el as any)[HAPP]) {\n const a = (el as any)[HAPP] as HApp<State, HActionType>;\n a.umount();\n }\n if (el && !this.element) {\n (this as any).element = el;\n (el as any)[HAPP] = this;\n const hsmls = (this as any).render();\n this._updateDom<HActionType>(el, hsmls, this);\n this._dispatchAction(HAppActions.mount, this.element);\n }\n return this;\n }\n\n /**\n * Umount app to DOM element.\n */\n umount = (): this => {\n if (this.element) {\n this._dispatchAction(HAppActions.umount, this.element);\n if (this.element.hasAttribute(HAPP)) {\n this.element.removeAttribute(HAPP);\n }\n const aNodes = this.element.querySelectorAll(`[${HAPP}]`);\n for (let i = 0; i < aNodes.length; i++) {\n const a = (aNodes[i] as any).happ as HApp<State, HActionType>;\n a?.umount();\n }\n while (this.element.firstChild /*.hasChildNodes()*/) {\n this.element.removeChild(this.element.firstChild);\n }\n delete (this.element as any).happ;\n (this as any).element = undefined;\n }\n if (this._windowActionListener) {\n window.removeEventListener(HAppActions.action, this._windowActionListener);\n }\n return this;\n }\n\n /**\n * Update DOM element based on app state.\n */\n update = (): this => {\n if (this.element && !this._updateSched) {\n this._updateSched = schedule(() => {\n if (this.element) {\n const hsmls = this.render();\n this._updateDom<HActionType>(this.element, hsmls, this);\n }\n this._updateSched = undefined;\n });\n }\n return this;\n }\n\n toHsml = (): HElement<HActionType> => {\n if (this.element) {\n if (this._updateSched) {\n unschedule(this._updateSched);\n this._updateSched = undefined;\n } else {\n return [\"div\", { skip: true }];\n }\n }\n const hsmls = this.render();\n hsmls.push(\n (e: Element) => {\n if (!this.element) {\n (this as any).element = e;\n (e as any).happ = this;\n this._dispatchAction(HAppActions.mount, this.element);\n }\n });\n return [\"div\", hsmls];\n }\n\n toHtml = (): string => {\n return this.element ? this.element.outerHTML : \"\";\n }\n\n}\n\nfunction elementDispatchCustomEvent<HActionType extends string>(\n el: HTMLElement,\n type: HActionType,\n data: any\n) {\n el?.dispatchEvent(new CustomEvent(type, { detail: data }));\n (el as any)[`on${type}`]?.(new CustomEvent(type, { detail: data }));\n}\n\ntype FormDataInputValue = string | number | boolean | null | Array<string | number | boolean | null>;\n\ntype FormInputData = {\n name?: string;\n value: FormDataInputValue;\n valueString?: string;\n valueNumber?: number | null;\n valueDate?: Date | null;\n validation: string;\n valid: boolean;\n};\n\ntype FormData = {\n data: {\n [name: string]: FormDataInputValue;\n };\n validation: { [name: string]: string };\n valid: boolean;\n};\n\nexport type HFormInputData<Value = FormDataInputValue> = {\n name?: string;\n value: Value;\n valueString?: string | null;\n valueNumber?: number | null;\n valueDate?: Date | null;\n validation: string;\n valid: boolean;\n};\n\nexport type HFormData<Data> = {\n data: Data;\n validation: { [name in keyof Data]?: string };\n valid?: boolean;\n};\n\nfunction formData(e: Event): FormData | FormInputData | undefined {\n const el = e.target as HTMLElement;\n switch (el.nodeName) {\n case \"FORM\":\n (e as Event).preventDefault();\n const form: FormData = {\n data: {},\n validation: {},\n valid: true\n };\n const els = (el as HTMLFormElement).elements;\n for (let i = 0; i < els.length; i++) {\n const inputData = formInputData(els[i]);\n if (inputData && inputData.name) {\n const formData = form.data;\n const name = inputData.name;\n const value = inputData.value;\n if (formData[name] === undefined) {\n formData[name] = value;\n } else if (typeof formData[name] === \"string\" || formData[name] instanceof String) {\n if (value instanceof Array) {\n formData[name] = [formData[name] as string, ...value];\n } else {\n formData[name] = [formData[name] as string, value as string];\n }\n } else if (formData[name] instanceof Array) {\n if (value instanceof Array) {\n formData[name] = (formData[name] as Array<any>).concat(value);\n } else {\n (formData[name] as Array<any>).push(value);\n }\n } else {\n if (value instanceof Array) {\n formData[name] = [formData[name] as string, ...value];\n } else {\n formData[name] = [formData[name] as string, value];\n }\n }\n if (formData[name] instanceof Array) {\n formData[name] = (formData[name] as Array<any>)\n .filter(d => d !== null);\n if ((els[i] as HTMLInputElement).type === \"radio\") {\n formData[name] = (formData[name] as Array<any>).length\n ? (formData[name] as Array<any>)[0]\n : null;\n }\n }\n if (inputData.validation) {\n form.validation[name] = inputData.validation;\n }\n if (!inputData.valid) {\n form.valid = false;\n }\n }\n }\n return form;\n default:\n return formInputData(el);\n }\n}\n\nfunction formInputData(el: Element): FormInputData | undefined {\n // Client-side form validation\n // https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\n const vel = el as HTMLInputElement;\n if (vel.willValidate) {\n let valid = true;\n for (const key in vel.validity) {\n if (key !== \"customError\" && key !== \"valid\") {\n if ((vel.validity as any)[key]) {\n const msgs = (vel as any)[\"validation\"];\n if (msgs) {\n const msg = (msgs as any)[key];\n if (msg) {\n vel.setCustomValidity(msg);\n // vel.reportValidity();\n valid = false;\n break;\n } else {\n vel.setCustomValidity(\"\");\n // vel.reportValidity();\n break;\n }\n }\n }\n }\n }\n if (valid) {\n vel.setCustomValidity(\"\");\n // vel.reportValidity();\n }\n }\n\n let data: FormInputData | undefined;\n switch (el.nodeName) {\n case \"INPUT\":\n const iel = el as HTMLInputElement;\n switch (iel.type) {\n case \"text\":\n case \"hidden\":\n case \"password\":\n case \"email\":\n case \"search\":\n case \"url\":\n case \"tel\":\n case \"color\":\n case \"submit\":\n case \"button\":\n data = {\n name: iel.name,\n value: iel.value === \"\" ? null : iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"number\":\n case \"range\":\n data = {\n name: iel.name,\n value: isNaN(iel.valueAsNumber)\n ? null\n : iel.valueAsNumber,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"datetime-local\":\n data = {\n name: iel.name,\n value: iel.value === \"\" ? null : iel.value,\n valueNumber: isNaN(iel.valueAsNumber)\n ? null\n : iel.valueAsNumber,\n valueDate: isNaN(iel.valueAsNumber)\n ? null\n : new Date(iel.valueAsNumber),\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"date\":\n case \"month\":\n case \"time\":\n case \"week\":\n data = {\n name: iel.name,\n value: iel.value === \"\" ? null : iel.value,\n valueNumber: isNaN(iel.valueAsNumber)\n ? null\n : iel.valueAsNumber,\n valueDate: iel.valueAsDate,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"radio\":\n data = {\n name: iel.name,\n value: iel.checked ? iel.value : null,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"checkbox\":\n if (iel.value === \"on\") { // value not set in element\n data = {\n name: iel.name,\n value: iel.checked,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n } else {\n data = {\n name: iel.name,\n value: iel.checked ? String(iel.value) : null,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n }\n break;\n case \"file\":\n const files = (iel as any).files as FileList;\n const value: any = iel.multiple\n ? files[0]\n : files.length === 1 ? files[0] : null;\n data = {\n name: iel.name,\n value,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n }\n break;\n case \"SELECT\":\n const sel = el as HTMLSelectElement;\n if (sel.multiple) {\n const values = Array.from(sel.selectedOptions).map(o => o.value);\n data = {\n name: sel.name,\n value: values,\n valueString: sel.value,\n validation: sel.validationMessage,\n valid: sel.validity.valid\n };\n } else {\n data = {\n name: sel.name,\n value: sel.value === \"\" ? null : sel.value,\n validation: sel.validationMessage,\n valid: sel.validity.valid\n };\n }\n break;\n case \"TEXTAREA\":\n const tel = el as HTMLTextAreaElement;\n data = {\n name: tel.name,\n value: tel.value === \"\" ? null : tel.value,\n validation: tel.validationMessage,\n valid: tel.validity.valid\n };\n break;\n case \"BUTTON\":\n const bel = el as HTMLButtonElement;\n data = {\n name: bel.name,\n value: bel.value === \"\" ? null : bel.value,\n validation: bel.validationMessage,\n valid: bel.validity.valid\n };\n break;\n }\n return data;\n}\n"],"names":["$a85519cc1b20a4af$export$3dcd9fad60135c2c","HAppActions","$a85519cc1b20a4af$export$3d736e925369e0e4","HDispatchScopes","$a85519cc1b20a4af$var$schedule","window","requestAnimationFrame","callback","setTimeout","$a85519cc1b20a4af$var$unschedule","cancelAnimationFrame","handle","clearTimeout","$a85519cc1b20a4af$var$msgAction","$a85519cc1b20a4af$var$msgDispatch","$a85519cc1b20a4af$var$msgRender","$a85519cc1b20a4af$var$HAPP","$a85519cc1b20a4af$export$eb8950696418f795","hAppI","$a85519cc1b20a4af$export$8cfef5dc37c46888","state","view","dispatcher","element","debug","id","$a85519cc1b20a4af$export$1cfc54b3834d3c50","customElements","define","HTMLElement","observedAttributes","_a","attributes","Object","keys","constructor","super","this","_happel","undefined","customElement","connectedCallback","attachShadow","mode","mount","shadowRoot","disconnectedCallback","umount","adoptedCallback","update","attributeChangedCallback","attrName","oldVal","newVal","dispatch","attribute","refs","type","data","scope","$a85519cc1b20a4af$var$__awaiter","_dispatchAction","render","t0","performance","now","hsmls","e","error","t1","log","actionCb","actionType","event","Function","CustomEvent","detail","el","target","nodeName","preventDefault","form","validation","valid","els","elements","i","length","inputData","$a85519cc1b20a4af$var$formInputData","name","formData","value","String","Array","concat","push","filter","d","$a85519cc1b20a4af$var$formData","document","getElementById","_updateDom","hasAttribute","removeAttribute","aNodes","querySelectorAll","a","happ","firstChild","removeChild","_windowActionListener","removeEventListener","action","_updateSched","toHsml","skip","toHtml","outerHTML","init","then","_dispatch","_dispatchElement","_dispatchWindow","$a85519cc1b20a4af$var$elementDispatchCustomEvent","dispatchEvent","windowActionListen","warn","addEventListener","hsml","ctx","$8IJ2T","hsmls2idomPatch","_b","call","vel","willValidate","key","validity","msgs","msg","setCustomValidity","iel","validationMessage","isNaN","valueAsNumber","valueString","valueNumber","valueDate","Date","valueAsDate","checked","files","multiple","sel","values","from","selectedOptions","map","o","tel","bel","console"],"version":3,"file":"hsml-appi_demo.26745db2.js.map"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function e(e,t,i,n){Object.defineProperty(e,t,{get:i,set:n,enumerable:!0,configurable:!0})}var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i={},n={},a=t.parcelRequirede31;null==a&&((a=function(e){if(e in i)return i[e].exports;if(e in n){var t=n[e];delete n[e];var a={id:e,exports:{}};return i[e]=a,t.call(a.exports,a,a.exports),a.exports}var s=new Error("Cannot find module '"+e+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(e,t){n[e]=t},t.parcelRequirede31=a),a.register("lQ1yG",(function(t,i){e(t.exports,"HAppActions",(function(){return n}),(function(e){return n=e})),e(t.exports,"HDispatchScopes",(function(){return l}),(function(e){return l=e})),e(t.exports,"happ",(function(){return f}),(function(e){return f=e})),e(t.exports,"HApp",(function(){return b}),(function(e){return b=e})),e(t.exports,"happel",(function(){return w}),(function(e){return w=e}));var n,s,l,o,d=a("hrCkK"),r=function(e,t,i,n){return new(i||(i=Promise))((function(a,s){function l(e){try{d(n.next(e))}catch(e){s(e)}}function o(e){try{d(n.throw(e))}catch(e){s(e)}}function d(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(l,o)}d((n=n.apply(e,t||[])).next())}))};(s=n||(n={})).init="happ-init",s.mount="happ-mount",s.umount="happ-umount",s.action="happ-action",s.attribute="happ-attribute",(o=l||(l={})).element="element",o.window="window";const u=window.requestAnimationFrame||function(e){window.setTimeout(e,1e3/60)},c=window.cancelAnimationFrame||function(e){window.clearTimeout(e)},h="action:",v="dispatch:",m="render:",p="happ";function f(e){return new b(e.state,e.view,e.dispatcher,e.element,e.debug,e.id)}function w(e){customElements.define(e.id,class extends HTMLElement{static get observedAttributes(){var t;const i=e.state();return(null!==(t=e.attributes)&&void 0!==t?t:"object"==typeof i)?Object.keys(i):[]}constructor(){super(),this._happel=new b(e.state,e.view,e.dispatcher,void 0,e.debug,e.id),this._happel.customElement=this}connectedCallback(){this.attachShadow({mode:"open"}),this._happel.mount(this.shadowRoot)}disconnectedCallback(){this._happel.umount()}adoptedCallback(){this._happel.update()}attributeChangedCallback(e,t,i){this._happel.dispatch(n.attribute,{attrName:e,oldVal:t,newVal:i})}})}class b{constructor(e,t,i,a,s,l){this.refs={},this.dispatch=(e,t,i)=>r(this,void 0,void 0,(function*(){return this._dispatchAction(e,t,void 0,i)})),this.render=()=>{if(this.debug){const e=performance.now();let t;try{t=this.view(this.state)}catch(e){b.error(this.id,m,e)}const i=performance.now();return b.log(this.id,m,i-e+" ms",t),null!=t?t:[]}{let e;try{e=this.view(this.state)}catch(e){b.error(this.id,m,e)}return null!=e?e:[]}},this.actionCb=(e,t,i)=>{void 0===(t=(null==t?void 0:t.constructor)===Function?t(i):t)&&i&&(t=i instanceof CustomEvent?i.detail:function(e){const t=e.target;if("FORM"===t.nodeName){e.preventDefault();const i={data:{},validation:{},valid:!0},n=t.elements;for(let e=0;e<n.length;e++){const t=g(n[e]);if(t&&t.name){const a=i.data,s=t.name,l=t.value;void 0===a[s]?a[s]=l:"string"==typeof a[s]||a[s]instanceof String?a[s]=l instanceof Array?[a[s],...l]:[a[s],l]:a[s]instanceof Array?l instanceof Array?a[s]=a[s].concat(l):a[s].push(l):a[s]=l instanceof Array?[a[s],...l]:[a[s],l],a[s]instanceof Array&&(a[s]=a[s].filter((e=>null!==e)),"radio"===n[e].type&&(a[s]=a[s].length?a[s][0]:null)),t.validation&&(i.validation[s]=t.validation),t.valid||(i.valid=!1)}}return i}return g(t)}(i)),this._dispatchAction(e,t,i)},this.mount=e=>{const t="string"==typeof e?document.getElementById(e):e;if(t&&t[p]){t[p].umount()}if(t&&!this.element){this.element=t,t[p]=this;const e=this.render();this._updateDom(t,e,this),this._dispatchAction(n.mount,this.element)}return this},this.umount=()=>{if(this.element){this._dispatchAction(n.umount,this.element),this.element.hasAttribute(p)&&this.element.removeAttribute(p);const e=this.element.querySelectorAll(`[${p}]`);for(let t=0;t<e.length;t++){const i=e[t].happ;null==i||i.umount()}for(;this.element.firstChild;)this.element.removeChild(this.element.firstChild);delete this.element.happ,this.element=void 0}return this._windowActionListener&&window.removeEventListener(n.action,this._windowActionListener),this},this.update=()=>(this.element&&!this._updateSched&&(this._updateSched=u((()=>{if(this.element){const e=this.render();this._updateDom(this.element,e,this)}this._updateSched=void 0}))),this),this.toHsml=()=>{if(this.element){if(!this._updateSched)return["div",{skip:!0}];c(this._updateSched),this._updateSched=void 0}const e=this.render();return e.push((e=>{this.element||(this.element=e,e.happ=this,this._dispatchAction(n.mount,this.element))})),["div",e]},this.toHtml=()=>this.element?this.element.outerHTML:"",this.id=null!=l?l:p,this.debug=null!=s&&s,this.state=e(),this.view=t,this.dispatcher=null!=i?i:e=>r(this,void 0,void 0,(function*(){return b.log(this.id,h,e.type,e.data)})),this._dispatchAction(n.init,this).then((()=>a&&this.mount(a)))}_dispatchAction(e,t,i,n){return r(this,void 0,void 0,(function*(){if(this.debug){b.log(this.id,h,{type:e,data:t,event:i});const a=performance.now();yield this._dispatch(e,t,i,n);const s=performance.now();b.log(this.id,v,s-a+" ms",this.state)}else yield this._dispatch(e,t,i,n)}))}_dispatch(e,t,i,n){return r(this,void 0,void 0,(function*(){if(!n)try{(yield this.dispatcher({type:e,data:t,event:i},this.state,this.dispatch))||this.update()}catch(e){b.error(this.id,v,e)}"element"===n&&this._dispatchElement(e,t),"window"===n&&this._dispatchWindow(e,t)}))}_dispatchElement(e,t){return r(this,void 0,void 0,(function*(){this.customElement&&y(this.customElement,n.action,{type:e,data:t}),!this.customElement&&this.element&&y(this.element,n.action,{type:e,data:t})}))}_dispatchWindow(e,t){return r(this,void 0,void 0,(function*(){window.dispatchEvent(new CustomEvent(n.action,{detail:{type:e,data:t}}))}))}windowActionListen(){this._windowActionListener?b.warn("windowEventListener already added"):(this._windowActionListener=e=>{const t=e.detail;this._dispatchAction(n.action,t)},window.addEventListener(n.action,this._windowActionListener))}_updateDom(e,t,i){if(this.debug){const n=performance.now();(0,d.hsmls2idomPatch)(e,t,i);const a=performance.now();b.log(this.id,"update:",a-n+" ms",e)}else(0,d.hsmls2idomPatch)(e,t,i)}}function y(e,t,i){var n,a;null==e||e.dispatchEvent(new CustomEvent(t,{detail:i})),null===(a=(n=e)[`on${t}`])||void 0===a||a.call(n,new CustomEvent(t,{detail:i}))}function g(e){const t=e;if(t.willValidate){let e=!0;for(const i in t.validity)if("customError"!==i&&"valid"!==i&&t.validity[i]){const n=t.validation;if(n){const a=n[i];if(a){t.setCustomValidity(a),e=!1;break}t.setCustomValidity("");break}}e&&t.setCustomValidity("")}let i;switch(e.nodeName){case"INPUT":const t=e;switch(t.type){case"text":case"hidden":case"password":case"email":case"search":case"url":case"tel":case"color":case"submit":case"button":i={name:t.name,value:""===t.value?null:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"number":case"range":i={name:t.name,value:isNaN(t.valueAsNumber)?null:t.valueAsNumber,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"datetime-local":i={name:t.name,value:""===t.value?null:t.value,valueNumber:isNaN(t.valueAsNumber)?null:t.valueAsNumber,valueDate:isNaN(t.valueAsNumber)?null:new Date(t.valueAsNumber),validation:t.validationMessage,valid:t.validity.valid};break;case"date":case"month":case"time":case"week":i={name:t.name,value:""===t.value?null:t.value,valueNumber:isNaN(t.valueAsNumber)?null:t.valueAsNumber,valueDate:t.valueAsDate,validation:t.validationMessage,valid:t.validity.valid};break;case"radio":i={name:t.name,value:t.checked?t.value:null,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"checkbox":i="on"===t.value?{name:t.name,value:t.checked,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid}:{name:t.name,value:t.checked?String(t.value):null,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid};break;case"file":const e=t.files,n=t.multiple||1===e.length?e[0]:null;i={name:t.name,value:n,valueString:t.value,validation:t.validationMessage,valid:t.validity.valid}}break;case"SELECT":const n=e;if(n.multiple){const e=Array.from(n.selectedOptions).map((e=>e.value));i={name:n.name,value:e,valueString:n.value,validation:n.validationMessage,valid:n.validity.valid}}else i={name:n.name,value:""===n.value?null:n.value,validation:n.validationMessage,valid:n.validity.valid};break;case"TEXTAREA":const a=e;i={name:a.name,value:""===a.value?null:a.value,validation:a.validationMessage,valid:a.validity.valid};break;case"BUTTON":const s=e;i={name:s.name,value:""===s.value?null:s.value,validation:s.validationMessage,valid:s.validity.valid}}return i}b.log=console.log,b.error=console.error,b.warn=console.warn}));
|
|
2
|
+
//# sourceMappingURL=hsml-appi_demo.eab18b83.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"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","sources":["src/hsml-app.ts"],"sourcesContent":["import { HAttrOnData, HAttrOnDataFnc, HElement, HElements, HHandlerCtx } from \"./hsml\";\nimport { hsmls2idomPatch } from \"./hsml-idom\";\n\nexport type HState<State> = () => State;\n\nexport type HView<State, HActionType extends string> = (\n state: State\n) => HElements<HActionType>;\n\nexport type HView1<State, HActionType extends string> = (\n state: State\n) => HElement<HActionType>;\n\nexport type HAppAction =\n | \"happ-init\"\n | \"happ-mount\"\n | \"happ-umount\"\n | \"happ-action\"\n | \"happ-attribute\";\n\nexport enum HAppActions {\n init = \"happ-init\",\n mount = \"happ-mount\",\n umount = \"happ-umount\",\n action = \"happ-action\",\n attribute = \"happ-attribute\"\n}\n\nexport interface HAction<HActionType extends string> {\n type: HActionType;\n data?: any;\n event?: Event;\n}\n\nexport type HDispatchScope =\n | \"element\"\n | \"window\";\n\nexport enum HDispatchScopes {\n element = \"element\",\n window = \"window\"\n}\n\nexport type HDispatch<HActionType extends string> = (\n type: HAction<HActionType>[\"type\"],\n data?: HAction<HActionType>[\"data\"],\n scope?: HDispatchScope | HDispatchScopes\n) => Promise<void>;\n\ntype SkipUpdate = true;\n\nexport type HDispatcher<State, HActionType extends string> = (\n // this: HApp<State, HActionType>,\n action: HAction<HActionType | HAppAction | HAppActions>,\n state: State,\n dispatch: HDispatch<HActionType>\n) => Promise<void | SkipUpdate>;\n\nconst schedule = window.requestAnimationFrame ||\n // window.webkitRequestAnimationFrame ||\n // (window as any).mozRequestAnimationFrame ||\n // (window as any).oRequestAnimationFrame ||\n // (window as any).msRequestAnimationFrame ||\n function (callback: Function) { window.setTimeout(callback, 1000 / 60); };\n\nconst unschedule = window.cancelAnimationFrame ||\n // window.webkitCancelAnimationFrame ||\n // (window as any).mozCancelAnimationFrame ||\n // (window as any).oCancelAnimationFrame ||\n // (window as any).msCancelAnimationFrame ||\n function (handle: number) { window.clearTimeout(handle); };\n\nconst msgAction = \"action:\";\nconst msgDispatch = \"dispatch:\";\nconst msgRender = \"render:\";\nconst msgUpdate = \"update:\";\n\nconst HAPP = \"happ\";\n\nexport interface HAppI<State, HActionType extends string> {\n state: HState<State>;\n view: HView<State, HActionType>;\n dispatcher: HDispatcher<State, HActionType>;\n element?: Element | string | null;\n debug?: boolean;\n /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n id?: string;\n attributes?: string[];\n}\n\n/**\n * HApp definition\n *\n * @param hAppI HApp definition\n * @returns HApp instance\n */\nexport function happ<State, HActionType extends string>(hAppI: {\n state: HState<State>;\n view: HView<State, HActionType>;\n dispatcher: HDispatcher<State, HActionType>;\n element: Element | string | null;\n debug?: boolean;\n /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n id?: string;\n // attributes?: string[];\n}) {\n return new HApp<State, HActionType>(\n hAppI.state,\n hAppI.view,\n hAppI.dispatcher,\n hAppI.element,\n hAppI.debug,\n hAppI.id\n // hAppI!.attributes\n );\n}\n\n// export type Class<T = object> = new (...args: any[]) => T;\n\n// export function happi<State, HActionType extends string>(\n// hAppI: Class<HAppI<State, HActionType>>,\n// element?: Element | string | null,\n// debug? boolean,\n// /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n// id?: string\n// // attributes?: string[]\n// ) {\n// const hapi = new hAppI();\n// return new HApp<State, HActionType>(\n// hapi.state,\n// hapi.view,\n// hapi.dispatcher,\n// element,\n// debug\n// );\n// }\n\n// HAppEl\n\n/**\n * HApp custom HTML element definition.\n *\n * @param hAppI HApp definition\n */\nexport function happel<State, HActionType extends string>(hAppI: {\n state: HState<State>;\n view: HView<State, HActionType>;\n dispatcher: HDispatcher<State, HActionType>;\n /** Pattern ^[a-z]{0,10}-[a-z0-9-]{0,30}[a-z0-9]$ */\n id: string;\n /** Element attribute list */\n attributes?: string[];\n debug?: boolean;\n}): void {\n customElements.define(\n hAppI.id,\n class HAppElement extends HTMLElement {\n static get observedAttributes() {\n const state = hAppI.state();\n return hAppI.attributes ?? typeof state === \"object\"\n ? Object.keys(state as object)\n : [];\n }\n\n private _happel: HApp<State, HActionType>;\n\n constructor() {\n super();\n this._happel = new HApp<State, HActionType>(\n hAppI.state,\n hAppI.view,\n hAppI.dispatcher,\n undefined,\n hAppI.debug,\n hAppI.id\n // hAppI.attributes\n );\n (this._happel as any).customElement = this;\n }\n\n connectedCallback() {\n // this._happel.mount(this);\n this.attachShadow({ mode: \"open\" });\n this._happel.mount(this.shadowRoot as any);\n }\n\n disconnectedCallback() {\n this._happel.umount();\n }\n\n adoptedCallback() {\n this._happel.update();\n }\n\n attributeChangedCallback(\n attrName: string,\n oldVal: string | null,\n newVal: string | null\n ) {\n this._happel.dispatch(\n HAppActions.attribute as any,\n { attrName, oldVal, newVal });\n }\n }\n );\n}\n\n/**\n * HSML App\n */\nexport class HApp<State, HActionType extends string> implements HHandlerCtx<HActionType> {\n\n static log = console.log;\n static error = console.error;\n static warn = console.warn;\n\n readonly state: State;\n readonly view: HView<State, HActionType>;\n readonly dispatcher: HDispatcher<State, HActionType>;\n\n debug: boolean;\n\n /** Pattern ^[a-z][a-z0-9-]{0,30}[a-z0-9]$ */\n readonly id: string;\n // readonly attributes?: string[];\n\n readonly element?: HTMLElement;\n readonly refs: { [key: string]: HTMLElement } = {};\n\n readonly customElement?: HTMLElement; // happ custom html element\n\n private _updateSched?: number;\n\n // private _onDispatch?: HDispatcher<State>;\n\n private _windowActionListener?: (event: Event) => void;\n\n /**\n * @param state State init function\n * @param view View renderer function\n * @param dispatcher Dispatcher function\n * @param element Root element\n * @param debug Debug mode\n * @param id HApp ID, pattern \"^[a-z][a-z0-9-]{0,30}[a-z0-9]$\"\n */\n constructor(\n state: HState<State>,\n view: HView<State, HActionType>,\n dispatcher?: HDispatcher<State, HActionType>,\n element?: Element | string | null,\n debug?: boolean ,\n id?: string,\n // attributes?: string[]\n ) {\n this.id = id ?? HAPP;\n this.debug = debug ?? false;\n // this.attributes = attributes ?? [];\n // this.attributes = attributes ?? typeof state() === \"object\"\n // ? Object.keys(state() as object)\n // : [];\n this.state = state();\n this.view = view;\n this.dispatcher = dispatcher ?? (async (a) => HApp.log(this.id, msgAction, a.type, a.data));\n this._dispatchAction(HAppActions.init, this).then(() => element && this.mount(element));\n }\n\n /**\n * Dispatch app action.\n */\n dispatch: HDispatch<HActionType> = async (\n type: HActionType,\n data?: any,\n scope?: HDispatchScope\n ): Promise<void> => {\n return this._dispatchAction(type, data, undefined, scope);\n }\n\n // onDispatch = (dispatcher: HDispatcher<State>): this => {\n // this._onDispatch = dispatcher;\n // return this;\n // }\n\n private async _dispatchAction(\n type: HActionType | HAppAction | HAppActions,\n data?: any,\n event?: Event,\n scope?: HDispatchScope\n ): Promise<void> {\n if (this.debug) {\n HApp.log(this.id, msgAction, { type, data, event });\n const t0 = performance.now();\n await this._dispatch(type, data, event, scope);\n const t1 = performance.now();\n HApp.log(this.id, msgDispatch, `${t1 - t0} ms`, this.state);\n } else {\n await this._dispatch(type, data, event, scope);\n }\n }\n\n private async _dispatch(\n type: HActionType | HAppAction | HAppActions,\n data: any,\n event?: Event,\n scope?: HDispatchScope\n ): Promise<void> {\n if (!scope) {\n try {\n const skipUpdate = await this.dispatcher(\n { type: type as HActionType, data, event },\n this.state,\n this.dispatch\n );\n if (!skipUpdate) {\n this.update();\n }\n } catch (e) {\n HApp.error(this.id, msgDispatch, e);\n }\n }\n scope === \"element\" && this._dispatchElement(type, data);\n scope === \"window\" && this._dispatchWindow(type, data);\n }\n\n private async _dispatchElement(\n type: HActionType | HAppAction | HAppActions,\n data?: any\n ): Promise<void> {\n this.customElement && elementDispatchCustomEvent(this.customElement, HAppActions.action, { type, data });\n !this.customElement && this.element && elementDispatchCustomEvent(this.element, HAppActions.action, { type, data });\n // this._onDispatch?.({ type, data, event }, this.state, this.dispatch);\n }\n\n private async _dispatchWindow(\n type: HActionType | HAppAction | HAppActions,\n data?: any): Promise<void> {\n window.dispatchEvent(new CustomEvent(HAppActions.action, { detail: { type, data } }));\n }\n\n /**\n * Window action listen and route actions to dispatcher.\n * Call this method on app mount action.\n * Listening will be stopped on app umount automatically.\n */\n windowActionListen() {\n if (!this._windowActionListener) {\n this._windowActionListener = (event: Event) => {\n const action = (event as CustomEvent).detail as HAction<HActionType>;\n this._dispatchAction(HAppActions.action, action);\n };\n window.addEventListener(HAppActions.action, this._windowActionListener);\n } else {\n HApp.warn(\"windowEventListener already added\");\n }\n }\n\n /**\n * Render HSML based on app state.\n */\n render = (): HElements<HActionType> => {\n if (this.debug) {\n const t0 = performance.now();\n let hsmls;\n try {\n hsmls = this.view(this.state);\n } catch (e) {\n HApp.error(this.id, msgRender, e);\n }\n const t1 = performance.now();\n HApp.log(this.id, msgRender, `${t1 - t0} ms`, hsmls);\n return hsmls ?? [];\n } else {\n let hsmls;\n try {\n hsmls = this.view(this.state);\n } catch (e) {\n HApp.error(this.id, msgRender, e);\n }\n return hsmls ?? [];\n }\n }\n\n /**\n * HSML action callback.\n */\n actionCb = (actionType: HActionType, data: HAttrOnData, event: Event): void => {\n data = (data?.constructor === Function)\n ? (data as HAttrOnDataFnc)(event)\n : data;\n if (data === undefined && event) {\n if (event instanceof CustomEvent) {\n data = event.detail;\n } else {\n data = formData(event) as any;\n // TODO middlewares for data processing\n // const middlewares: ((data: any, event: Event) => any)[] = [];\n // data = middlewares.reduce(\n // (data, middleware) => middleware(data, event),\n // data\n // );\n }\n }\n this._dispatchAction(actionType, data, event);\n }\n\n private _updateDom<HActionType extends string>(\n el: Element,\n hsml: HElements<HActionType>,\n ctx: HHandlerCtx<HActionType>\n ): void {\n if (this.debug) {\n const t0 = performance.now();\n hsmls2idomPatch(el, hsml, ctx);\n const t1 = performance.now();\n HApp.log(this.id, msgUpdate, `${t1 - t0} ms`, el);\n } else {\n hsmls2idomPatch(el, hsml, ctx);\n }\n }\n\n /**\n * Mount app to DOM element.\n *\n * @param e DOM element\n */\n mount = (e: Element | string | null): this => {\n const el = (typeof e === \"string\") ? document.getElementById(e) : e;\n if (el && (el as any)[HAPP]) {\n const a = (el as any)[HAPP] as HApp<State, HActionType>;\n a.umount();\n }\n if (el && !this.element) {\n (this as any).element = el;\n (el as any)[HAPP] = this;\n const hsmls = (this as any).render();\n this._updateDom<HActionType>(el, hsmls, this);\n this._dispatchAction(HAppActions.mount, this.element);\n }\n return this;\n }\n\n /**\n * Umount app to DOM element.\n */\n umount = (): this => {\n if (this.element) {\n this._dispatchAction(HAppActions.umount, this.element);\n if (this.element.hasAttribute(HAPP)) {\n this.element.removeAttribute(HAPP);\n }\n const aNodes = this.element.querySelectorAll(`[${HAPP}]`);\n for (let i = 0; i < aNodes.length; i++) {\n const a = (aNodes[i] as any).happ as HApp<State, HActionType>;\n a?.umount();\n }\n while (this.element.firstChild /*.hasChildNodes()*/) {\n this.element.removeChild(this.element.firstChild);\n }\n delete (this.element as any).happ;\n (this as any).element = undefined;\n }\n if (this._windowActionListener) {\n window.removeEventListener(HAppActions.action, this._windowActionListener);\n }\n return this;\n }\n\n /**\n * Update DOM element based on app state.\n */\n update = (): this => {\n if (this.element && !this._updateSched) {\n this._updateSched = schedule(() => {\n if (this.element) {\n const hsmls = this.render();\n this._updateDom<HActionType>(this.element, hsmls, this);\n }\n this._updateSched = undefined;\n });\n }\n return this;\n }\n\n toHsml = (): HElement<HActionType> => {\n if (this.element) {\n if (this._updateSched) {\n unschedule(this._updateSched);\n this._updateSched = undefined;\n } else {\n return [\"div\", { skip: true }];\n }\n }\n const hsmls = this.render();\n hsmls.push(\n (e: Element) => {\n if (!this.element) {\n (this as any).element = e;\n (e as any).happ = this;\n this._dispatchAction(HAppActions.mount, this.element);\n }\n });\n return [\"div\", hsmls];\n }\n\n toHtml = (): string => {\n return this.element ? this.element.outerHTML : \"\";\n }\n\n}\n\nfunction elementDispatchCustomEvent<HActionType extends string>(\n el: HTMLElement,\n type: HActionType,\n data: any\n) {\n el?.dispatchEvent(new CustomEvent(type, { detail: data }));\n (el as any)[`on${type}`]?.(new CustomEvent(type, { detail: data }));\n}\n\ntype FormDataInputValue = string | number | boolean | null | Array<string | number | boolean | null>;\n\ntype FormInputData = {\n name?: string;\n value: FormDataInputValue;\n valueString?: string;\n valueNumber?: number | null;\n valueDate?: Date | null;\n validation: string;\n valid: boolean;\n};\n\ntype FormData = {\n data: {\n [name: string]: FormDataInputValue;\n };\n validation: { [name: string]: string };\n valid: boolean;\n};\n\nexport type HFormInputData<Value = FormDataInputValue> = {\n name?: string;\n value: Value;\n valueString?: string | null;\n valueNumber?: number | null;\n valueDate?: Date | null;\n validation: string;\n valid: boolean;\n};\n\nexport type HFormData<Data> = {\n data: Data;\n validation: { [name in keyof Data]?: string };\n valid?: boolean;\n};\n\nfunction formData(e: Event): FormData | FormInputData | undefined {\n const el = e.target as HTMLElement;\n switch (el.nodeName) {\n case \"FORM\":\n (e as Event).preventDefault();\n const form: FormData = {\n data: {},\n validation: {},\n valid: true\n };\n const els = (el as HTMLFormElement).elements;\n for (let i = 0; i < els.length; i++) {\n const inputData = formInputData(els[i]);\n if (inputData && inputData.name) {\n const formData = form.data;\n const name = inputData.name;\n const value = inputData.value;\n if (formData[name] === undefined) {\n formData[name] = value;\n } else if (typeof formData[name] === \"string\" || formData[name] instanceof String) {\n if (value instanceof Array) {\n formData[name] = [formData[name] as string, ...value];\n } else {\n formData[name] = [formData[name] as string, value as string];\n }\n } else if (formData[name] instanceof Array) {\n if (value instanceof Array) {\n formData[name] = (formData[name] as Array<any>).concat(value);\n } else {\n (formData[name] as Array<any>).push(value);\n }\n } else {\n if (value instanceof Array) {\n formData[name] = [formData[name] as string, ...value];\n } else {\n formData[name] = [formData[name] as string, value];\n }\n }\n if (formData[name] instanceof Array) {\n formData[name] = (formData[name] as Array<any>)\n .filter(d => d !== null);\n if ((els[i] as HTMLInputElement).type === \"radio\") {\n formData[name] = (formData[name] as Array<any>).length\n ? (formData[name] as Array<any>)[0]\n : null;\n }\n }\n if (inputData.validation) {\n form.validation[name] = inputData.validation;\n }\n if (!inputData.valid) {\n form.valid = false;\n }\n }\n }\n return form;\n default:\n return formInputData(el);\n }\n}\n\nfunction formInputData(el: Element): FormInputData | undefined {\n // Client-side form validation\n // https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\n const vel = el as HTMLInputElement;\n if (vel.willValidate) {\n let valid = true;\n for (const key in vel.validity) {\n if (key !== \"customError\" && key !== \"valid\") {\n if ((vel.validity as any)[key]) {\n const msgs = (vel as any)[\"validation\"];\n if (msgs) {\n const msg = (msgs as any)[key];\n if (msg) {\n vel.setCustomValidity(msg);\n // vel.reportValidity();\n valid = false;\n break;\n } else {\n vel.setCustomValidity(\"\");\n // vel.reportValidity();\n break;\n }\n }\n }\n }\n }\n if (valid) {\n vel.setCustomValidity(\"\");\n // vel.reportValidity();\n }\n }\n\n let data: FormInputData | undefined;\n switch (el.nodeName) {\n case \"INPUT\":\n const iel = el as HTMLInputElement;\n switch (iel.type) {\n case \"text\":\n case \"hidden\":\n case \"password\":\n case \"email\":\n case \"search\":\n case \"url\":\n case \"tel\":\n case \"color\":\n case \"submit\":\n case \"button\":\n data = {\n name: iel.name,\n value: iel.value === \"\" ? null : iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"number\":\n case \"range\":\n data = {\n name: iel.name,\n value: isNaN(iel.valueAsNumber)\n ? null\n : iel.valueAsNumber,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"datetime-local\":\n data = {\n name: iel.name,\n value: iel.value === \"\" ? null : iel.value,\n valueNumber: isNaN(iel.valueAsNumber)\n ? null\n : iel.valueAsNumber,\n valueDate: isNaN(iel.valueAsNumber)\n ? null\n : new Date(iel.valueAsNumber),\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"date\":\n case \"month\":\n case \"time\":\n case \"week\":\n data = {\n name: iel.name,\n value: iel.value === \"\" ? null : iel.value,\n valueNumber: isNaN(iel.valueAsNumber)\n ? null\n : iel.valueAsNumber,\n valueDate: iel.valueAsDate,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"radio\":\n data = {\n name: iel.name,\n value: iel.checked ? iel.value : null,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n case \"checkbox\":\n if (iel.value === \"on\") { // value not set in element\n data = {\n name: iel.name,\n value: iel.checked,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n } else {\n data = {\n name: iel.name,\n value: iel.checked ? String(iel.value) : null,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n }\n break;\n case \"file\":\n const files = (iel as any).files as FileList;\n const value: any = iel.multiple\n ? files[0]\n : files.length === 1 ? files[0] : null;\n data = {\n name: iel.name,\n value,\n valueString: iel.value,\n validation: iel.validationMessage,\n valid: iel.validity.valid\n };\n break;\n }\n break;\n case \"SELECT\":\n const sel = el as HTMLSelectElement;\n if (sel.multiple) {\n const values = Array.from(sel.selectedOptions).map(o => o.value);\n data = {\n name: sel.name,\n value: values,\n valueString: sel.value,\n validation: sel.validationMessage,\n valid: sel.validity.valid\n };\n } else {\n data = {\n name: sel.name,\n value: sel.value === \"\" ? null : sel.value,\n validation: sel.validationMessage,\n valid: sel.validity.valid\n };\n }\n break;\n case \"TEXTAREA\":\n const tel = el as HTMLTextAreaElement;\n data = {\n name: tel.name,\n value: tel.value === \"\" ? null : tel.value,\n validation: tel.validationMessage,\n valid: tel.validity.valid\n };\n break;\n case \"BUTTON\":\n const bel = el as HTMLButtonElement;\n data = {\n name: bel.name,\n value: bel.value === \"\" ? null : bel.value,\n validation: bel.validationMessage,\n valid: bel.validity.valid\n };\n break;\n }\n return data;\n}\n"],"names":["$fe5fa9c04fc86188$export$3dcd9fad60135c2c","HAppActions","$fe5fa9c04fc86188$export$3d736e925369e0e4","HDispatchScopes","$fe5fa9c04fc86188$var$schedule","window","requestAnimationFrame","callback","setTimeout","$fe5fa9c04fc86188$var$unschedule","cancelAnimationFrame","handle","clearTimeout","$fe5fa9c04fc86188$var$msgAction","$fe5fa9c04fc86188$var$msgDispatch","$fe5fa9c04fc86188$var$msgRender","$fe5fa9c04fc86188$var$HAPP","$fe5fa9c04fc86188$export$eb8950696418f795","hAppI","$fe5fa9c04fc86188$export$8cfef5dc37c46888","state","view","dispatcher","element","debug","id","$fe5fa9c04fc86188$export$1cfc54b3834d3c50","customElements","define","HTMLElement","observedAttributes","_a","attributes","Object","keys","constructor","super","this","_happel","undefined","customElement","connectedCallback","attachShadow","mode","mount","shadowRoot","disconnectedCallback","umount","adoptedCallback","update","attributeChangedCallback","attrName","oldVal","newVal","dispatch","attribute","refs","type","data","scope","$fe5fa9c04fc86188$var$__awaiter","_dispatchAction","render","t0","performance","now","hsmls","e","error","t1","log","actionCb","actionType","event","Function","CustomEvent","detail","el","target","nodeName","preventDefault","form","validation","valid","els","elements","i","length","inputData","$fe5fa9c04fc86188$var$formInputData","name","formData","value","String","Array","concat","push","filter","d","$fe5fa9c04fc86188$var$formData","document","getElementById","_updateDom","hasAttribute","removeAttribute","aNodes","querySelectorAll","a","happ","firstChild","removeChild","_windowActionListener","removeEventListener","action","_updateSched","toHsml","skip","toHtml","outerHTML","init","then","_dispatch","_dispatchElement","_dispatchWindow","$fe5fa9c04fc86188$var$elementDispatchCustomEvent","dispatchEvent","windowActionListen","warn","addEventListener","hsml","ctx","$hrCkK","hsmls2idomPatch","_b","call","vel","willValidate","key","validity","msgs","msg","setCustomValidity","iel","validationMessage","isNaN","valueAsNumber","valueString","valueNumber","valueDate","Date","valueAsDate","checked","files","multiple","sel","values","from","selectedOptions","map","o","tel","bel","console"],"version":3,"file":"hsml-appi_demo.eab18b83.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="hsml-appi_demo.26745db2.js"></script><script nomodule defer src="hsml_demo.d6914957.js"></script><script type="module" src="hsml-appi_demo.eab18b83.js"></script><script type="module" src="hsml_demo.967b2a46.js"></script><meta charset="utf-8"><title>PeRyL hsml app demo</title></head><body> <h1>PeRyL hsml app demo</h1> <div id="app"></div> <script type="module" src="hsml-appi_demo.73f3689b.js"></script><script src="hsml-appi_demo.62af4432.js" nomodule defer></script> </body></html>
|
package/dist/hsml-app.d.ts
CHANGED
|
@@ -21,14 +21,15 @@ export declare enum HDispatchScopes {
|
|
|
21
21
|
window = "window"
|
|
22
22
|
}
|
|
23
23
|
export type HDispatch<HActionType extends string> = (type: HAction<HActionType>["type"], data?: HAction<HActionType>["data"], scope?: HDispatchScope | HDispatchScopes) => Promise<void>;
|
|
24
|
-
|
|
24
|
+
type SkipUpdate = true;
|
|
25
|
+
export type HDispatcher<State, HActionType extends string> = (action: HAction<HActionType | HAppAction | HAppActions>, state: State, dispatch: HDispatch<HActionType>) => Promise<void | SkipUpdate>;
|
|
25
26
|
export interface HAppI<State, HActionType extends string> {
|
|
26
27
|
state: HState<State>;
|
|
27
28
|
view: HView<State, HActionType>;
|
|
28
29
|
dispatcher: HDispatcher<State, HActionType>;
|
|
29
30
|
element?: Element | string | null;
|
|
30
31
|
debug?: boolean;
|
|
31
|
-
|
|
32
|
+
id?: string;
|
|
32
33
|
attributes?: string[];
|
|
33
34
|
}
|
|
34
35
|
export declare function happ<State, HActionType extends string>(hAppI: {
|
|
@@ -37,14 +38,14 @@ export declare function happ<State, HActionType extends string>(hAppI: {
|
|
|
37
38
|
dispatcher: HDispatcher<State, HActionType>;
|
|
38
39
|
element: Element | string | null;
|
|
39
40
|
debug?: boolean;
|
|
40
|
-
|
|
41
|
+
id?: string;
|
|
41
42
|
}): HApp<State, HActionType>;
|
|
42
43
|
export declare function happel<State, HActionType extends string>(hAppI: {
|
|
43
44
|
state: HState<State>;
|
|
44
45
|
view: HView<State, HActionType>;
|
|
45
46
|
dispatcher: HDispatcher<State, HActionType>;
|
|
46
|
-
|
|
47
|
-
attributes
|
|
47
|
+
id: string;
|
|
48
|
+
attributes?: string[];
|
|
48
49
|
debug?: boolean;
|
|
49
50
|
}): void;
|
|
50
51
|
export declare class HApp<State, HActionType extends string> implements HHandlerCtx<HActionType> {
|
|
@@ -64,8 +65,7 @@ export declare class HApp<State, HActionType extends string> implements HHandler
|
|
|
64
65
|
readonly view: HView<State, HActionType>;
|
|
65
66
|
readonly dispatcher: HDispatcher<State, HActionType>;
|
|
66
67
|
debug: boolean;
|
|
67
|
-
readonly
|
|
68
|
-
readonly attributes: string[];
|
|
68
|
+
readonly id: string;
|
|
69
69
|
readonly element?: HTMLElement;
|
|
70
70
|
readonly refs: {
|
|
71
71
|
[key: string]: HTMLElement;
|
|
@@ -73,7 +73,7 @@ export declare class HApp<State, HActionType extends string> implements HHandler
|
|
|
73
73
|
readonly customElement?: HTMLElement;
|
|
74
74
|
private _updateSched?;
|
|
75
75
|
private _windowActionListener?;
|
|
76
|
-
constructor(state: HState<State>, view: HView<State, HActionType>, dispatcher?: HDispatcher<State, HActionType>, element?: Element | string | null, debug?: boolean,
|
|
76
|
+
constructor(state: HState<State>, view: HView<State, HActionType>, dispatcher?: HDispatcher<State, HActionType>, element?: Element | string | null, debug?: boolean, id?: string);
|
|
77
77
|
dispatch: HDispatch<HActionType>;
|
|
78
78
|
private _dispatchAction;
|
|
79
79
|
private _dispatch;
|
package/dist/hsml-app.js
CHANGED
|
@@ -34,17 +34,21 @@ const msgRender = "render:";
|
|
|
34
34
|
const msgUpdate = "update:";
|
|
35
35
|
const HAPP = "happ";
|
|
36
36
|
function happ(hAppI) {
|
|
37
|
-
return new HApp(hAppI.state, hAppI.view, hAppI.dispatcher, hAppI.element, hAppI.debug, hAppI.
|
|
37
|
+
return new HApp(hAppI.state, hAppI.view, hAppI.dispatcher, hAppI.element, hAppI.debug, hAppI.id);
|
|
38
38
|
}
|
|
39
39
|
exports.happ = happ;
|
|
40
40
|
function happel(hAppI) {
|
|
41
|
-
customElements.define(
|
|
41
|
+
customElements.define(hAppI.id, class HAppElement extends HTMLElement {
|
|
42
42
|
static get observedAttributes() {
|
|
43
|
-
|
|
43
|
+
var _a;
|
|
44
|
+
const state = hAppI.state();
|
|
45
|
+
return ((_a = hAppI.attributes) !== null && _a !== void 0 ? _a : typeof state === "object")
|
|
46
|
+
? Object.keys(state)
|
|
47
|
+
: [];
|
|
44
48
|
}
|
|
45
49
|
constructor() {
|
|
46
50
|
super();
|
|
47
|
-
this._happel = new HApp(hAppI.state, hAppI.view, hAppI.dispatcher, undefined, hAppI.debug, hAppI.
|
|
51
|
+
this._happel = new HApp(hAppI.state, hAppI.view, hAppI.dispatcher, undefined, hAppI.debug, hAppI.id);
|
|
48
52
|
this._happel.customElement = this;
|
|
49
53
|
}
|
|
50
54
|
connectedCallback() {
|
|
@@ -64,7 +68,7 @@ function happel(hAppI) {
|
|
|
64
68
|
}
|
|
65
69
|
exports.happel = happel;
|
|
66
70
|
class HApp {
|
|
67
|
-
constructor(state, view, dispatcher, element, debug,
|
|
71
|
+
constructor(state, view, dispatcher, element, debug, id) {
|
|
68
72
|
this.refs = {};
|
|
69
73
|
this.dispatch = (type, data, scope) => __awaiter(this, void 0, void 0, function* () {
|
|
70
74
|
return this._dispatchAction(type, data, undefined, scope);
|
|
@@ -77,10 +81,10 @@ class HApp {
|
|
|
77
81
|
hsmls = this.view(this.state);
|
|
78
82
|
}
|
|
79
83
|
catch (e) {
|
|
80
|
-
HApp.error(this.
|
|
84
|
+
HApp.error(this.id, msgRender, e);
|
|
81
85
|
}
|
|
82
86
|
const t1 = performance.now();
|
|
83
|
-
HApp.log(this.
|
|
87
|
+
HApp.log(this.id, msgRender, `${t1 - t0} ms`, hsmls);
|
|
84
88
|
return hsmls !== null && hsmls !== void 0 ? hsmls : [];
|
|
85
89
|
}
|
|
86
90
|
else {
|
|
@@ -89,7 +93,7 @@ class HApp {
|
|
|
89
93
|
hsmls = this.view(this.state);
|
|
90
94
|
}
|
|
91
95
|
catch (e) {
|
|
92
|
-
HApp.error(this.
|
|
96
|
+
HApp.error(this.id, msgRender, e);
|
|
93
97
|
}
|
|
94
98
|
return hsmls !== null && hsmls !== void 0 ? hsmls : [];
|
|
95
99
|
}
|
|
@@ -180,22 +184,21 @@ class HApp {
|
|
|
180
184
|
this.toHtml = () => {
|
|
181
185
|
return this.element ? this.element.outerHTML : "";
|
|
182
186
|
};
|
|
187
|
+
this.id = id !== null && id !== void 0 ? id : HAPP;
|
|
183
188
|
this.debug = debug !== null && debug !== void 0 ? debug : false;
|
|
184
|
-
this.name = name !== null && name !== void 0 ? name : HAPP;
|
|
185
|
-
this.attributes = attributes !== null && attributes !== void 0 ? attributes : [];
|
|
186
189
|
this.state = state();
|
|
187
190
|
this.view = view;
|
|
188
|
-
this.dispatcher = dispatcher !== null && dispatcher !== void 0 ? dispatcher : ((a) => __awaiter(this, void 0, void 0, function* () { return HApp.log(this.
|
|
191
|
+
this.dispatcher = dispatcher !== null && dispatcher !== void 0 ? dispatcher : ((a) => __awaiter(this, void 0, void 0, function* () { return HApp.log(this.id, msgAction, a.type, a.data); }));
|
|
189
192
|
this._dispatchAction(HAppActions.init, this).then(() => element && this.mount(element));
|
|
190
193
|
}
|
|
191
194
|
_dispatchAction(type, data, event, scope) {
|
|
192
195
|
return __awaiter(this, void 0, void 0, function* () {
|
|
193
196
|
if (this.debug) {
|
|
194
|
-
HApp.log(this.
|
|
197
|
+
HApp.log(this.id, msgAction, { type, data, event });
|
|
195
198
|
const t0 = performance.now();
|
|
196
199
|
yield this._dispatch(type, data, event, scope);
|
|
197
200
|
const t1 = performance.now();
|
|
198
|
-
HApp.log(this.
|
|
201
|
+
HApp.log(this.id, msgDispatch, `${t1 - t0} ms`, this.state);
|
|
199
202
|
}
|
|
200
203
|
else {
|
|
201
204
|
yield this._dispatch(type, data, event, scope);
|
|
@@ -206,12 +209,14 @@ class HApp {
|
|
|
206
209
|
return __awaiter(this, void 0, void 0, function* () {
|
|
207
210
|
if (!scope) {
|
|
208
211
|
try {
|
|
209
|
-
yield this.dispatcher({ type: type, data, event }, this.state, this.dispatch);
|
|
212
|
+
const skipUpdate = yield this.dispatcher({ type: type, data, event }, this.state, this.dispatch);
|
|
213
|
+
if (!skipUpdate) {
|
|
214
|
+
this.update();
|
|
215
|
+
}
|
|
210
216
|
}
|
|
211
217
|
catch (e) {
|
|
212
|
-
HApp.error(this.
|
|
218
|
+
HApp.error(this.id, msgDispatch, e);
|
|
213
219
|
}
|
|
214
|
-
this.update();
|
|
215
220
|
}
|
|
216
221
|
scope === "element" && this._dispatchElement(type, data);
|
|
217
222
|
scope === "window" && this._dispatchWindow(type, data);
|
|
@@ -245,7 +250,7 @@ class HApp {
|
|
|
245
250
|
const t0 = performance.now();
|
|
246
251
|
(0, hsml_idom_1.hsmls2idomPatch)(el, hsml, ctx);
|
|
247
252
|
const t1 = performance.now();
|
|
248
|
-
HApp.log(this.
|
|
253
|
+
HApp.log(this.id, msgUpdate, `${t1 - t0} ms`, el);
|
|
249
254
|
}
|
|
250
255
|
else {
|
|
251
256
|
(0, hsml_idom_1.hsmls2idomPatch)(el, hsml, ctx);
|