peryl 1.5.35 → 1.5.36

package/demo/hsml-app-form_demo.ts

@@ -260,7 +260,7 @@ const view: HView<State, Actions> = function (state) {
     ];
 };
 
-const dispatcher: HDispatcher<State, Actions> = async function (this, action, state) {
+const dispatcher: HDispatcher<State, Actions> = async function (action, state, _dispatch, app) {
     switch (action.type) {
         case HAppActions.init:
         case HAppActions.mount:
@@ -269,7 +269,7 @@ const dispatcher: HDispatcher<State, Actions> = async function (this, action, st
             break;
         }
         case Actions.rmfile: {
-            this.refs["file"].value = null;
+            app.refs["file"].value = null;
             break;
         }
         case Actions.change: {

package/demo/hsml-app-test_demo.ts

@@ -23,7 +23,7 @@ const counterView: HView1<CounterState, CounterActions> = (state) => {
     ]];
 };
 
-const counterDispatcher: HDispatcher<CounterState, CounterActions> = async function (this: HApp<CounterState, CounterActions>, action, state, dispatch) {
+const counterDispatcher: HDispatcher<CounterState, CounterActions> = async function (action, state, dispatch, app) {
     console.log("action counter:", action);
     // console.log("state counter:", state);
     // console.log("happ counter:", this);
@@ -31,7 +31,7 @@ const counterDispatcher: HDispatcher<CounterState, CounterActions> = async funct
     switch (action.type) {
 
         case HAppActions.mount:
-            this.eventListener(
+            app.eventListener(
                 Actions.xXx,
                 (data: any) => {
                     dispatch(CounterActions.dec, data);
@@ -174,13 +174,13 @@ const view: HView<State, Actions | CounterActions> = function (state) {
     ];
 };
 
-const dispatcher: HDispatcher<State, Actions | CounterActions> = async function (this: HApp<State, Actions | CounterActions>, action, state, dispatch) {
+const dispatcher: HDispatcher<State, Actions | CounterActions> = async function (action, state, dispatch, app) {
     console.log("action:", action);
     // console.log("state:", state);
-    // console.log("happ:", this);
-    console.log("refs:", this.refs);
+    // console.log("happ:", app);
+    console.log("refs:", app.refs);
 
-    counterDispatcher.call(this, action as HAction<CounterActions>, state.counter, dispatch);
+    counterDispatcher(action as HAction<CounterActions>, state.counter, dispatch, app as any);
 
     switch (action.type) {
         case HAppActions.init:

package/demo/hsml-appel-usercard_demo.ts

@@ -323,15 +323,18 @@ const userCardDispatcher: HDispatcher<UserCardState, UserCardActions> = async fu
  * Register the user card as a custom web component
  * Creates <happ-user-card> element that can be used in HTML
  */
-happel<UserCardState, UserCardActions>({
-    id: "happ-user-card",
-    state: userCardState,
-    view: userCardView,
-    dispatcher: userCardDispatcher,
-    // attributes are auto-detected from state keys, but can be explicitly defined:
-    // attributes: ["username", "avatar", "role", "online"],
-    debug: true
-});
+happel<UserCardState, UserCardActions>(
+    "happ-user-card",
+    {
+        state: userCardState,
+        view: userCardView,
+        dispatcher: userCardDispatcher,
+        // id: "user-card",
+        // attributes are auto-detected from state keys, but can be explicitly defined:
+        // attributes: ["username", "avatar", "role", "online"],
+        debug: true
+    }
+);
 
 
 // ============================================================================
@@ -561,10 +564,13 @@ const userDemoDispatcher: HDispatcher<UserDemoState, UserDemoActions | UserCardA
 /**
  * Register the demo parent component
  */
-happel<UserDemoState, UserDemoActions | UserCardActions>({
-    id: "happ-user-demo",
-    state: userDemoState,
-    view: userDemoView,
-    dispatcher: userDemoDispatcher,
-    debug: true
-});
+happel<UserDemoState, UserDemoActions | UserCardActions>(
+    "happ-user-demo",
+    {
+        state: userDemoState,
+        view: userDemoView,
+        dispatcher: userDemoDispatcher,
+        // id: "user-demo",
+        debug: true
+    }
+);

package/demo/hsml-appel_demo.ts

@@ -58,14 +58,17 @@ const counterDispatcher: HDispatcher<CounterState, CounterActions> = async funct
     }
 };
 
-happel<CounterState, CounterActions>({
-    state: counterState,
-    view: counterView,
-    dispatcher: counterDispatcher,
-    id: "happ-counter",
-    // attributes: ["count"],
-    debug: true
-});
+happel<CounterState, CounterActions>(
+    "happ-counter",
+    {
+        state: counterState,
+        view: counterView,
+        dispatcher: counterDispatcher,
+        // id: "counter",
+        // attributes: ["count"],
+        debug: true
+    }
+);
 
 
 interface AppState {
@@ -111,11 +114,11 @@ const appDispatcher: HDispatcher<AppState, AppActions | CounterActions> = async
     }
 };
 
-happel<AppState, AppActions | CounterActions>({
+happel<AppState, AppActions | CounterActions>("happ-app", {
     state: appState,
     view: appView,
     dispatcher: appDispatcher,
-    id: "happ-app",
+    // id: "app",
     // attributes: [],
     debug: true
 });

package/demo/hsml-appi_demo.ts

@@ -31,13 +31,13 @@ interface State {
         ];
     },
 
-    dispatcher: async function (this: HApp<State, Actions>, action, state, dispatch) {
+    dispatcher: async function (action, state, dispatch, app) {
         console.log(action);
-        // console.log(this);
+        // console.log(app);
         switch (action.type) {
 
             case HAppActions.mount:
-                this.refs["focus"].focus();
+                app.refs["focus"].focus();
                 break;
 
             case Actions.name:

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

@@ -992,16 +992,17 @@ const $9adf8bc2f1ba310f$var$HAPP = "happ";
 function $9adf8bc2f1ba310f$export$eb8950696418f795(hAppI) {
     return new $9adf8bc2f1ba310f$export$8cfef5dc37c46888(hAppI.state, hAppI.view, hAppI.dispatcher, hAppI.element, hAppI.debug, hAppI.id);
 }
-function $9adf8bc2f1ba310f$export$1cfc54b3834d3c50(hAppI) {
-    if (!customElements.get(hAppI.id)) customElements.define(hAppI.id, class HAppElement extends HTMLElement {
+function $9adf8bc2f1ba310f$export$1cfc54b3834d3c50(name, hAppI) {
+    if (!customElements.get(name)) customElements.define(name, class HAppElement extends HTMLElement {
         static get observedAttributes() {
             var _a;
             const state = hAppI.state();
             return (_a = hAppI.attributes) !== null && _a !== void 0 ? _a : typeof state === "object" ? Object.keys(state) : [];
         }
         constructor(){
+            var _a;
             super();
-            this._happel = new $9adf8bc2f1ba310f$export$8cfef5dc37c46888(hAppI.state, hAppI.view, hAppI.dispatcher, undefined, hAppI.debug, hAppI.id);
+            this._happel = new $9adf8bc2f1ba310f$export$8cfef5dc37c46888(hAppI.state, hAppI.view, hAppI.dispatcher, undefined, hAppI.debug, (_a = hAppI.id) !== null && _a !== void 0 ? _a : name);
             this._happel.customElement = this;
         }
         connectedCallback() {
@@ -1191,7 +1192,7 @@ class $9adf8bc2f1ba310f$export$8cfef5dc37c46888 {
                     type: type,
                     data: data,
                     event: event
-                }, this.state, this.dispatch);
+                }, this.state, this.dispatch, this);
                 if (!skipUpdate) this.update();
             } catch (e) {
                 $9adf8bc2f1ba310f$export$8cfef5dc37c46888.error(this.id, $9adf8bc2f1ba310f$var$msgDispatch, e);