npm - peryl - Versions diffs - 1.5.2 → 1.5.4 - Mend

peryl 1.5.2 → 1.5.4

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.

Files changed (187) hide show

package/README.md +31 -17
package/demo/hsml-app-form-validation_demo.html +1 -0
package/demo/hsml-app-form-validation_demo.ts +22 -23
package/demo/hsml-app-form_demo.html +1 -0
package/demo/hsml-app-form_demo.ts +24 -20
package/demo/hsml-app-test_demo.ts +36 -41
package/demo/hsml-app-tictactoe_demo.ts +17 -16
package/demo/hsml-app_demo.html +1 -0
package/demo/hsml-app_demo.ts +16 -16
package/demo/hsml-appel_demo.html +7 -0
package/demo/hsml-appel_demo.ts +47 -27
package/demo/hsml-appi_demo.ts +15 -22
package/demo/hsml_demo.ts +27 -22
package/demo/js/hsml-app-js-happi_demo.html +28 -21
package/demo/js/hsml-app-js_demo.html +15 -17
package/dist/browser-esmodule/encode.js.map +1 -1
package/dist/browser-esmodule/hsml-app.js +114 -123
package/dist/browser-esmodule/hsml-app.js.map +1 -1
package/dist/browser-esmodule/hsml-convert.js.map +1 -1
package/dist/browser-esmodule/hsml-dom.js +3 -3
package/dist/browser-esmodule/hsml-dom.js.map +1 -1
package/dist/browser-esmodule/hsml-h.js.map +1 -1
package/dist/browser-esmodule/hsml-html.js +2 -2
package/dist/browser-esmodule/hsml-html.js.map +1 -1
package/dist/browser-esmodule/hsml-idom.js +5 -5
package/dist/browser-esmodule/hsml-idom.js.map +1 -1
package/dist/browser-esmodule/hsml.js.map +1 -1
package/dist/browser-esmodule/http.js.map +1 -1
package/dist/browser-esmodule/index.js +118 -127
package/dist/browser-esmodule/index.js.map +1 -1
package/dist/browser-esmodule/router.js.map +1 -1
package/dist/browser-umd/encode.js +1 -1
package/dist/browser-umd/encode.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/hsml-convert.js.map +1 -1
package/dist/browser-umd/hsml-dom.js +1 -1
package/dist/browser-umd/hsml-dom.js.map +1 -1
package/dist/browser-umd/hsml-h.js.map +1 -1
package/dist/browser-umd/hsml-html.js +1 -1
package/dist/browser-umd/hsml-html.js.map +1 -1
package/dist/browser-umd/hsml-idom.js +1 -1
package/dist/browser-umd/hsml-idom.js.map +1 -1
package/dist/browser-umd/hsml.js.map +1 -1
package/dist/browser-umd/http.js +1 -1
package/dist/browser-umd/http.js.map +1 -1
package/dist/browser-umd/index.js +1 -1
package/dist/browser-umd/index.js.map +1 -1
package/dist/browser-umd/router.js +1 -1
package/dist/browser-umd/router.js.map +1 -1
package/dist/browser-umd/validators-moment.js +1 -1
package/dist/browser-umd/validators-moment.js.map +1 -1
package/dist/browser-umd/validators-numeral.js.map +1 -1
package/dist/demo/encode_demo.ce182166.js.map +1 -1
package/dist/demo/encode_demo.f40a44eb.js.map +1 -1
package/dist/demo/hsml-app-form-validation_demo.8e406f15.js +2 -0
package/dist/demo/hsml-app-form-validation_demo.8e406f15.js.map +1 -0
package/dist/demo/hsml-app-form-validation_demo.9a95cff3.js +2 -0
package/dist/demo/hsml-app-form-validation_demo.9a95cff3.js.map +1 -0
package/dist/demo/hsml-app-form-validation_demo.c6856b02.js +2 -0
package/dist/demo/hsml-app-form-validation_demo.c6856b02.js.map +1 -0
package/dist/demo/hsml-app-form-validation_demo.fdcc0b2d.js +2 -0
package/dist/demo/hsml-app-form-validation_demo.fdcc0b2d.js.map +1 -0
package/dist/demo/hsml-app-form-validation_demo.html +1 -1
package/dist/demo/hsml-app-form_demo.950b2a09.js +2 -0
package/dist/demo/hsml-app-form_demo.950b2a09.js.map +1 -0
package/dist/demo/hsml-app-form_demo.ea3af725.js +2 -0
package/dist/demo/hsml-app-form_demo.ea3af725.js.map +1 -0
package/dist/demo/hsml-app-form_demo.html +1 -1
package/dist/demo/hsml-app-test_demo.36a210b8.js +2 -0
package/dist/demo/hsml-app-test_demo.36a210b8.js.map +1 -0
package/dist/demo/hsml-app-test_demo.6ab4ea94.js +2 -0
package/dist/demo/hsml-app-test_demo.6ab4ea94.js.map +1 -0
package/dist/demo/hsml-app-test_demo.html +1 -1
package/dist/demo/hsml-app-tictactoe_demo.7a91c368.js +2 -0
package/dist/demo/hsml-app-tictactoe_demo.7a91c368.js.map +1 -0
package/dist/demo/hsml-app-tictactoe_demo.97905c2f.js +2 -0
package/dist/demo/hsml-app-tictactoe_demo.97905c2f.js.map +1 -0
package/dist/demo/hsml-app-tictactoe_demo.html +1 -1
package/dist/demo/hsml-app_demo.b5c1d27d.js +2 -0
package/dist/demo/hsml-app_demo.b5c1d27d.js.map +1 -0
package/dist/demo/hsml-app_demo.bbebbbcf.js +2 -0
package/dist/demo/hsml-app_demo.bbebbbcf.js.map +1 -0
package/dist/demo/hsml-app_demo.html +1 -1
package/dist/demo/hsml-appel_demo.4d9e135c.js +2 -0
package/dist/demo/hsml-appel_demo.4d9e135c.js.map +1 -0
package/dist/demo/hsml-appel_demo.7ddb6fb3.js +2 -0
package/dist/demo/hsml-appel_demo.7ddb6fb3.js.map +1 -0
package/dist/demo/hsml-appel_demo.html +1 -1
package/dist/demo/hsml-appi_demo.e5e28a65.js +2 -0
package/dist/demo/hsml-appi_demo.e5e28a65.js.map +1 -0
package/dist/demo/hsml-appi_demo.fef950c1.js +2 -0
package/dist/demo/hsml-appi_demo.fef950c1.js.map +1 -0
package/dist/demo/hsml-appi_demo.html +1 -1
package/dist/demo/hsml-convert_demo.0ea1fa3b.js.map +1 -1
package/dist/demo/hsml-convert_demo.63e3e7b5.js.map +1 -1
package/dist/demo/{hsml_demo.ff950ba1.js → hsml_demo.a248689a.js} +2 -2
package/dist/demo/hsml_demo.a248689a.js.map +1 -0
package/dist/demo/hsml_demo.eb3b08be.js +2 -0
package/dist/demo/hsml_demo.eb3b08be.js.map +1 -0
package/dist/demo/hsml_demo.html +1 -1
package/dist/demo/http_demo.3e7da3d8.js.map +1 -1
package/dist/demo/http_demo.8e435f23.js.map +1 -1
package/dist/demo/i18n_demo.html +1 -1
package/dist/demo/router_demo.3cfa03aa.js.map +1 -1
package/dist/demo/router_demo.89ab1681.js.map +1 -1
package/dist/demo/{validators_demo.252e13a6.js → validators_demo.90ff6001.js} +2 -2
package/dist/demo/validators_demo.90ff6001.js.map +1 -0
package/dist/demo/{validators_demo.66893723.js → validators_demo.ef5b2dea.js} +2 -2
package/dist/demo/validators_demo.ef5b2dea.js.map +1 -0
package/dist/demo/validators_demo.html +1 -1
package/dist/encode.js +1 -1
package/dist/encode.js.map +1 -1
package/dist/hsml-app.d.ts +63 -42
package/dist/hsml-app.js +110 -117
package/dist/hsml-app.js.map +1 -1
package/dist/hsml-convert.d.ts +3 -3
package/dist/hsml-convert.js.map +1 -1
package/dist/hsml-dom.d.ts +2 -2
package/dist/hsml-dom.js +3 -3
package/dist/hsml-dom.js.map +1 -1
package/dist/hsml-h.d.ts +8 -8
package/dist/hsml-h.js.map +1 -1
package/dist/hsml-html.d.ts +4 -4
package/dist/hsml-html.js +2 -2
package/dist/hsml-html.js.map +1 -1
package/dist/hsml-idom.d.ts +2 -2
package/dist/hsml-idom.js +5 -5
package/dist/hsml-idom.js.map +1 -1
package/dist/hsml.d.ts +26 -27
package/dist/hsml.js.map +1 -1
package/dist/http.js +1 -1
package/dist/http.js.map +1 -1
package/dist/router.js +1 -1
package/dist/router.js.map +1 -1
package/package.json +8 -8
package/src/hsml-app.ts +305 -197
package/src/hsml-convert.ts +8 -8
package/src/hsml-dom.ts +18 -18
package/src/hsml-h.ts +10 -10
package/src/hsml-html.ts +19 -19
package/src/hsml-idom.ts +25 -25
package/src/hsml.ts +46 -143
package/demo/hsml-appc_demo.html +0 -16
package/demo/hsml-appc_demo.ts +0 -49
package/dist/demo/hsml-app-form-validation_demo.0b03b743.js +0 -2
package/dist/demo/hsml-app-form-validation_demo.0b03b743.js.map +0 -1
package/dist/demo/hsml-app-form-validation_demo.b3a5c810.js +0 -2
package/dist/demo/hsml-app-form-validation_demo.b3a5c810.js.map +0 -1
package/dist/demo/hsml-app-form-validation_demo.d3925067.js +0 -2
package/dist/demo/hsml-app-form-validation_demo.d3925067.js.map +0 -1
package/dist/demo/hsml-app-form-validation_demo.f757d763.js +0 -2
package/dist/demo/hsml-app-form-validation_demo.f757d763.js.map +0 -1
package/dist/demo/hsml-app-form_demo.007ffcaa.js +0 -2
package/dist/demo/hsml-app-form_demo.007ffcaa.js.map +0 -1
package/dist/demo/hsml-app-form_demo.a034239d.js +0 -2
package/dist/demo/hsml-app-form_demo.a034239d.js.map +0 -1
package/dist/demo/hsml-app-test_demo.35c14dc9.js +0 -2
package/dist/demo/hsml-app-test_demo.35c14dc9.js.map +0 -1
package/dist/demo/hsml-app-test_demo.3c7e16ae.js +0 -2
package/dist/demo/hsml-app-test_demo.3c7e16ae.js.map +0 -1
package/dist/demo/hsml-app-tictactoe_demo.5f4861c1.js +0 -2
package/dist/demo/hsml-app-tictactoe_demo.5f4861c1.js.map +0 -1
package/dist/demo/hsml-app-tictactoe_demo.7deeabad.js +0 -2
package/dist/demo/hsml-app-tictactoe_demo.7deeabad.js.map +0 -1
package/dist/demo/hsml-app_demo.87d83c29.js +0 -2
package/dist/demo/hsml-app_demo.87d83c29.js.map +0 -1
package/dist/demo/hsml-app_demo.941a13a6.js +0 -2
package/dist/demo/hsml-app_demo.941a13a6.js.map +0 -1
package/dist/demo/hsml-appc_demo.0234ff15.js +0 -2
package/dist/demo/hsml-appc_demo.0234ff15.js.map +0 -1
package/dist/demo/hsml-appc_demo.f5783031.js +0 -2
package/dist/demo/hsml-appc_demo.f5783031.js.map +0 -1
package/dist/demo/hsml-appc_demo.html +0 -1
package/dist/demo/hsml-appel_demo.0e8a4d4c.js +0 -2
package/dist/demo/hsml-appel_demo.0e8a4d4c.js.map +0 -1
package/dist/demo/hsml-appel_demo.1a5c2c26.js +0 -2
package/dist/demo/hsml-appel_demo.1a5c2c26.js.map +0 -1
package/dist/demo/hsml-appi_demo.2c3fb511.js +0 -2
package/dist/demo/hsml-appi_demo.2c3fb511.js.map +0 -1
package/dist/demo/hsml-appi_demo.427fdebd.js +0 -2
package/dist/demo/hsml-appi_demo.427fdebd.js.map +0 -1
package/dist/demo/hsml_demo.33f28c29.js +0 -2
package/dist/demo/hsml_demo.33f28c29.js.map +0 -1
package/dist/demo/hsml_demo.ff950ba1.js.map +0 -1
package/dist/demo/validators_demo.252e13a6.js.map +0 -1
package/dist/demo/validators_demo.66893723.js.map +0 -1

package/demo/hsml-app-tictactoe_demo.ts CHANGED Viewed

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

package/demo/hsml-app_demo.html CHANGED Viewed

@@ -8,6 +8,7 @@
 </head>
 <body>
+    <div id="app"></div>
     <script type="module" src="hsml-app_demo.ts"></script>
 </body>

package/demo/hsml-app_demo.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { HApp, HDispatcher, HState, HView } from "../src/hsml-app";
 // Actions definition
-enum Action {
-    say = "say",
-    fetch = "fetch"
-}
+// enum Actions {
+//     say = "say",
+//     fetch = "fetch"
+// }
+type Actions = "say" | "fetch";
 interface State {
     message: string;
@@ -20,33 +22,34 @@ const state: HState<State> = function () {
 };
 // Template function, returns HSML markup generated from app state
-const view: HView<State> = function (state) {
+const view: HView<State, Actions> = function (state) {
     return [
         ["p", [
             "Greeting: ", state.message
         ]],
         ["p", [
             // On button event "click" dispatch Action.say type with data "Hello"
-            ["button", { on: ["click", Action.say, "Hello"] }, "Say Hello"],
+            ["button", { on: ["click", "say", "Hello"] }, "Say Hello"],
             " ",
-            ["button", { on: ["click", Action.say, "Hi"] }, "Say Hi"],
+            ["button", { on: ["click", "say", "Hi"] }, "Say Hi"],
         ]],
         ["p", [
-            ["button", { on: ["click", Action.fetch] }, "Server fetch time"],
+            ["button", { on: ["click", "fetch"] }, "Server fetch time"],
             ["pre", state.json]
         ]]
     ];
 };
 // Action dispatcher, app logic
-const dispatcher: HDispatcher<State> = async function (action, state, dispatch) {
+const dispatcher: HDispatcher<State, Actions> = async function (action, state, dispatch) {
     switch (action.type) {
-        // Dispatch action "say"
-        case Action.say:
+        case "say":
             // Change app state message by action data (3. parameter of on click action)
             state.message = action.data;
             break;
-        case Action.fetch:
+        case "fetch":
             // Server async call
             try {
                 const res = await fetch("http://date.jsontest.com");
@@ -59,8 +62,5 @@ const dispatcher: HDispatcher<State> = async function (action, state, dispatch)
     }
 };
-// Debug mode logging HApp actions, rendering, dispatching info
-HApp.debug = true;
 // Run application
-(window as any).app = new HApp(state, view, dispatcher);
+(window as any).app = new HApp<State, Actions>(state, view, dispatcher, "app", true);

package/demo/hsml-appel_demo.html CHANGED Viewed

@@ -12,6 +12,13 @@
     <happ-app></happ-app>
     <script type="module" src="hsml-appel_demo.ts"></script>
+    <script type="module">
+        document.getElementsByTagName("happ-app")[0]
+            .addEventListener("action",
+                function (e) {
+                    console.log("EventListener action", e.detail);
+                });
+    </script>
 </body>
 </html>

package/demo/hsml-appel_demo.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { HElements } from "../src/hsml";
-import { HAction, HAppAction, happel, HDispatch, HDispatcher, HState, HView } from "../src/hsml-app";
+import { HAction, HAppActions, happel, HDispatch, HDispatcher, HDispatchScopes, HState, HView } from "../src/hsml-app";
 interface CounterState {
     count: number;
 }
-enum CounterAction {
+enum CounterActions {
     dec = "counter-dec",
     inc = "counter-inc",
     count = "counter-count"
@@ -17,57 +17,64 @@ const counterState: HState<CounterState> = function () {
     }
 };
-const counterView: HView<CounterState> = function (state: CounterState): HElements {
+const counterView: HView<CounterState, CounterActions> = function (state) {
     return [
         ["h3", ["Counter"]],
         ["p", [
             ["em", ["Count"]], ": ", state.count,
             " ",
-            ["button", { on: ["click", CounterAction.dec, 1] }, ["-"]],
-            ["button", { on: ["click", CounterAction.inc, 2] }, ["+"]]
+            ["button", { on: ["click", CounterActions.dec, 1] }, ["-"]],
+            ["button", { on: ["click", CounterActions.inc, 2] }, ["+"]]
         ]]
     ];
 };
-const counterDispatcher: HDispatcher<CounterState> = async function (action: HAction, state: CounterState, dispatch: HDispatch) {
+const counterDispatcher: HDispatcher<CounterState, CounterActions> = async function (action, state, dispatch) {
     console.log("action counter:", action);
     // console.log("state counter:", state);
     // console.log("happ counter:", this);
     switch (action.type) {
-        case HAppAction._init:
-        case HAppAction._mount:
-        case HAppAction._umount:
+        case HAppActions.init:
+        case HAppActions.mount:
+        case HAppActions.umount:
             break;
-        case HAppAction._element:
+        case HAppActions.attribute:
             if (action.data.attrName === "count") {
                 state.count = Number(action.data.newVal);
             }
             break;
-        case CounterAction.inc:
+        case CounterActions.inc:
             state.count = state.count + action.data as number;
-            setTimeout(() => dispatch(CounterAction.dec, 1), 1e3); // async call
-            dispatch(CounterAction.count, state.count);
+            setTimeout(() => dispatch(CounterActions.dec, 1), 1e3); // async call
+            dispatch(CounterActions.count, state.count, HDispatchScopes.element);
             break;
-        case CounterAction.dec:
+        case CounterActions.dec:
             state.count = state.count - action.data as number;
-            dispatch(CounterAction.count, state.count);
+            dispatch(CounterActions.count, state.count, HDispatchScopes.element);
             break;
     }
 };
-happel("happ-counter", ["count"], counterState, counterView, counterDispatcher);
+happel<CounterState, CounterActions>({
+    state: counterState,
+    view: counterView,
+    dispatcher: counterDispatcher,
+    name: "counter",
+    attributes: ["count"],
+    debug: true
+});
 interface AppState {
     count: number;
 }
-enum AppAction {
-    count = "app-count"
+enum AppActions {
+    action = "app-action"
 }
 const appState: HState<AppState> = function () {
@@ -76,29 +83,42 @@ const appState: HState<AppState> = function () {
     }
 };
-const appView: HView<AppState> = function (state: AppState): HElements {
+const appView: HView<AppState, AppActions> = function (state) {
     return [
         ["h2", ["App count: ", state.count]],
         ["happ-counter", {
             count: 33,
-            on: [CounterAction.count, AppAction.count]
+            on: [HAppActions.action, AppActions.action]
         }]
     ];
 };
-const appDispatcher: HDispatcher<CounterState> = async function (action, state, dispatch) {
+const appDispatcher: HDispatcher<AppState, AppActions | CounterActions> = async function (action, state, dispatch) {
     console.log("action:", action);
     // console.log("state:", state);
     // console.log("happ:", this);
     switch (action.type) {
-        case AppAction.count:
-            state.count = action.data as number;
+        case AppActions.action:
+            const a = action.data as HAction<AppActions | CounterActions>;
+            switch (a.type) {
+                case CounterActions.count:
+                    state.count = a.data as number;
+                    dispatch(CounterActions.count, state.count, HDispatchScopes.element);
+                    break;
+                default:
+                    console.log(a);
+                    break;
+            }
             break;
     }
 };
-happel("happ-app", [], appState, appView, appDispatcher);
-// HApp.debug = true;
-// HApp.debug = window.location.hostname === "localhost";
+happel<AppState, AppActions | CounterActions>({
+    state: appState,
+    view: appView,
+    dispatcher: appDispatcher,
+    name: "app",
+    attributes: [],
+    debug: true
+});

package/demo/hsml-appi_demo.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { HElements } from "../src/hsml";
-import { HAction, HApp, HAppAction, happi, HAppI, HDispatch } from "../src/hsml-app";
+import { HAction, HApp, HAppActions, HDispatch, happ } from "../src/hsml-app";
-enum Action {
+enum Actions {
     name = "name"
 }
@@ -9,19 +9,19 @@ interface State {
     name: string;
 }
-class App implements HAppI<State> {
+(window as any).app = happ<State, Actions>({
-    state(): State {
+    state: function (): State {
         return { name: "" };
-    }
+    },
-    view(state: State): HElements {
+    view: function (state: State): HElements<Actions> {
         return [
             ["h1", "Hello"],
             ["input~focus", {
                 type: "text",
                 placeholder: "name",
-                on: ["input", Action.name]
+                on: ["input", Actions.name]
             }],
             ["p",
                 state.name
@@ -29,30 +29,23 @@ class App implements HAppI<State> {
                     : "Greeting"
             ]
         ];
-    }
+    },
-    async dispatcher(this: HApp<State>, action: HAction, state: State, dispatch: HDispatch): Promise<void> {
+    dispatcher: async function (this: HApp<State, Actions>, action: HAction<Actions>, state: State, dispatch: HDispatch<Actions>): Promise<void> {
         console.log(action);
         // console.log(this);
         switch (action.type) {
-            case HAppAction._mount:
+            case HAppActions.mount:
                 this.refs["focus"].focus();
                 break;
-            case Action.name:
+            case Actions.name:
                 state.name = action.data;
                 break;
         }
+    },
-        // console.log("state:", JSON.stringify(state));
-    }
-}
-// HApp.debug = true;
-// HApp.debug = window.location.hostname === "localhost";
-const app = happi(App);
-(self as any).app = app;
+    element: "app",
+    debug: false
+});

package/demo/hsml_demo.ts CHANGED Viewed

@@ -1,16 +1,16 @@
 import { hsmls2idomPatch } from "../src/hsml-idom";
 import { HElements, HElement } from "../src/hsml";
-type View<STATE> = (state: STATE, dispatch: Dispatch) => HElements;
+type View<State, Actions extends string> = (state: State, dispatch: Dispatch<Actions>) => HElements<Actions>;
-type Dispatch = (event: string, data?: any) => void;
+type Dispatch<Actions extends string> = (action: Actions, data?: any) => void;
-type Dispatcher<STATE> = (event: string, data: any, state: STATE, dispatch: Dispatch) => STATE;
+type Dispatcher<State, Actions extends string> = (action: Actions, data: any, state: State, dispatch: Dispatch<Actions>) => State;
-function render<STATE>(element: HTMLElement,
-                       view: View<STATE>,
-                       state: STATE,
-                       dispatch: Dispatch): void {
+function render<State, Actions extends string>(element: HTMLElement,
+                       view: View<State, Actions>,
+                       state: State,
+                       dispatch: Dispatch<Actions>): void {
     (render as any).scheduled || ((render as any).scheduled = null);
     if (!state) {
         return;
@@ -19,29 +19,34 @@ function render<STATE>(element: HTMLElement,
         (render as any).scheduled = setTimeout(() => {
             const hsml = view(state, dispatch);
             // console.log("render", hsml);
-            hsmls2idomPatch(element, hsml);
+            hsmls2idomPatch<Actions>(element, hsml);
             (render as any).scheduled = null;
         }, 0);
     }
 }
-const dispatch: Dispatch = (event: string, data?: any): void => {
-    // console.log("dispatch", event, data);
-    const state = dispatcher(event, data, appState, dispatch);
+const dispatch: Dispatch<Actions> = (action, data): void => {
+    // console.log("dispatch", action, data);
+    const state = dispatcher(action, data, appState, dispatch);
     // console.log("state", state);
     render(appElement!, view, state, dispatch);
 };
-// ----------------------------------------------------------------------------
 const appState = {
     title: "Counter",
     count: 0
 };
-type AppState = typeof appState;
+type State = typeof appState;
+type Actions =
+    | "inc"
+    | "dec"
+    | "dec_async"
+    | "action"
+    | "xxx";
-const view: View<AppState> = (state: AppState, dispatch: Dispatch): HElements => {
+const view: View<State, Actions> = (state, dispatch): HElements<Actions> => {
     return [
         ["h2", [state.title]],
         ["p", [
@@ -50,18 +55,18 @@ const view: View<AppState> = (state: AppState, dispatch: Dispatch): HElements =>
             button("-", () =>  dispatch("dec", 1)),
             button("+", () => dispatch("inc", 2)),
             " ",
-            button("xxx", () => dispatch("xxx")),
+            button("xxx", () => dispatch("xxx"))
         ]],
     ];
 }
-function button(label: string, cb: (e: Event) => void): HElement {
+function button(label: string, cb: (e: Event) => void): HElement<Actions> {
     return ["button", { click: cb }, [label]];
 }
-const dispatcher: Dispatcher<AppState> = (event: string, data: any, state: AppState, dispatch: Dispatch): AppState => {
-    // console.log("reduce", event, data);
-    switch (event) {
+const dispatcher: Dispatcher<State, Actions> = (action, data, state, dispatch) => {
+    console.log("action:", action, data);
+    switch (action) {
         case "inc":
             state.count += data;
             break;
@@ -73,7 +78,7 @@ const dispatcher: Dispatcher<AppState> = (event: string, data: any, state: AppSt
             state.count -= data;
             break;
         default:
-            console.warn("unhandled event", event, data);
+            console.warn("unhandled action:", action, data);
     }
     return state;
 }
@@ -82,4 +87,4 @@ const appElement = document.getElementById("app");
 render(appElement!, view, appState, dispatch);
-dispatch("event", {});
+dispatch("action", {});

package/demo/js/hsml-app-js-happi_demo.html CHANGED Viewed

@@ -13,53 +13,60 @@
     <script src="../../dist/browser-umd/hsml-app.js"></script>
     <!-- <script src="https://unpkg.com/peryl/dist/browser-umd/hsml-app.js"></script> -->
     <script type="module">
-        // import { HApp, happi } from "../../dist/browser-esmodule/hsml-app.js";
-        // import { HApp, happi } from "https://unpkg.com/peryl/dist/browser-esmodule/hsml-app.js";
+        // import { HApp, happ } from "../../dist/browser-esmodule/hsml-app.js";
+        // import { HApp, happ } from "https://unpkg.com/peryl/dist/browser-esmodule/hsml-app.js";
-        const Action = {
+        const Actions = {
             change: "change",
             reset: "reset"
         };
-        class App {
+        happ({
-            state() {
+            state: function () {
                 return { name: "" };
-            }
+            },
-            view(state) {
+            view: function (state) {
                 return [
                     ["h1", ["Hello ", state.name]],
-                    ["input", { type: "text", placeholder: "Name", value: state.name, on: ["input", Action.change] }],
-                    ["button", { type: "button", on: ["click", Action.reset] }, "Reset"]
+                    ["input", {
+                        type: "text",
+                        placeholder: "Name",
+                        value: state.name,
+                        on: ["input", Actions.change]
+                    }],
+                    ["button", {
+                        type: "button",
+                        on: ["click", Actions.reset]
+                    }, "Reset"]
                 ];
-            }
+            },
-            async dispatcher(action, state, dispatch) {
+            dispatcher: async function (action, state, dispatch) {
                 console.log("action:", action);
                 console.log("state:", state);
                 console.log("happ:", this);
                 switch (action.type) {
-                    case HAppAction._init:
-                    case HAppAction._mount:
-                    case HAppAction._umount:
+                    case HAppActions.init:
+                    case HAppActions.mount:
+                    case HAppActions.umount:
                         break;
-                    case Action.change:
+                    case Actions.change:
                         state.name = action.data;
                         break;
-                    case Action.reset:
+                    case Actions.reset:
                         state.name = new String();
                         break;
                 }
-            }
-        }
+            },
-        HApp.debug = true;
-        happi(App, "app");
+            element: "app",
+            debug: true
+        });
     </script>
 </body>