brew-js-react 0.3.2 → 0.3.3

package/hooks.js

@@ -1,6 +1,7 @@
 import { createElement, useEffect, useRef, useState } from "react";
 import { ViewStateProvider } from "zeta-dom-react";
 import { definePrototype, extend, kv, setImmediateOnce, throwNotFunction, watch } from "./include/zeta-dom/util.js";
+import { bind } from "./include/zeta-dom/domUtil.js";
 import { ZetaEventContainer } from "./include/zeta-dom/events.js";
 import { app } from "./app.js";
 import { useViewContainerState } from "./view.js";
@@ -77,13 +78,25 @@ export function useRouteParam(name, defaultValue) {
     return value;
 }
 
-export function useRouteState(key, defaultValue) {
-    const container = useViewContainerState();
-    const cur = getCurrentStates();
-    const state = useState(key in cur ? cur[key] : defaultValue);
-    if (container.active) {
+export function useRouteState(key, defaultValue, snapshotOnUpdate) {
+    var container = useViewContainerState();
+    var cur = getCurrentStates();
+    var state = useState(key in cur ? cur[key] : defaultValue);
+    if (container.active && cur[key] !== state[0]) {
+        if (snapshotOnUpdate && key in cur) {
+            app.snapshot();
+            cur = getCurrentStates();
+        }
         cur[key] = state[0];
     }
+    useEffect(function () {
+        return bind(window, 'popstate', function () {
+            if (snapshotOnUpdate && container.active) {
+                var cur = getCurrentStates();
+                state[1](key in cur ? cur[key] : defaultValue);
+            }
+        });
+    }, [container, snapshotOnUpdate]);
     return state;
 }
 

package/mixins/FlyoutMixin.js

@@ -79,14 +79,14 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         if (!element.id) {
             element.id = 'flyout-' + (++flyoutMixinCounter);
         }
-        app.on(element, {
+        self.onDispose(app.on(element, {
             animationstart: function () {
                 self.animating = true;
             },
             animationcomplete: function () {
                 self.animating = false;
             },
-        }, true);
+        }, true));
         setImmediate(function () {
             each(self.toggle.elements(), function (i, v) {
                 v.setAttribute('toggle', '#' + element.id);

package/mixins/FocusStateMixin.js

@@ -12,7 +12,7 @@ export default function FocusStateMixin() {
 definePrototype(FocusStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         FocusStateMixinSuper.initElement.call(this, element, state);
-        dom.on(element, {
+        this.onDispose(dom.on(element, {
             focusin: function (e) {
                 state.focused = true;
                 setClass(element, 'focused', e.source);
@@ -21,7 +21,7 @@ definePrototype(FocusStateMixin, StatefulMixin, {
                 state.focused = false;
                 setClass(element, 'focused', false);
             }
-        });
+        }));
     },
     getClassNames: function () {
         return [{ focused: !!this.state.focused }];

package/mixins/LoadingStateMixin.js

@@ -14,7 +14,7 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         LoadingStateMixinSuper.initElement.call(this, element, state);
         lock(element);
-        dom.on(element, {
+        this.onDispose(dom.on(element, {
             asyncStart: function () {
                 state.loading = true;
                 setClass(element, 'loading', true);
@@ -27,7 +27,7 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
                 state.loading = false;
                 setClass(element, 'loading', false);
             }
-        });
+        }));
     },
     getClassNames: function () {
         return [{ loading: !!this.state.loading }];

package/mixins/ScrollableMixin.js

@@ -35,7 +35,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     },
     initElement: function (element, state) {
         var self = this;
-        app.on(element, {
+        self.onDispose(app.on(element, {
             statechange: function (e) {
                 if ('pageIndex' in e.newValues) {
                     extend(self, { pageIndex: e.newValues.pageIndex });
@@ -47,7 +47,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
             scrollStop: function() {
                 self.scrolling = false;
             }
-        }, true);
+        }, true));
     },
     clone: function () {
         var mixin = ScrollableMixinSuper.clone.call(this);

package/mixins/StatefulMixin.js

@@ -16,7 +16,7 @@ definePrototype(MixinRefImpl, {
 export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
-        elements: new WeakSet(),
+        elements: new Set(),
         flush: watch(this, false),
         dispose: [],
         states: {},
@@ -84,6 +84,7 @@ definePrototype(StatefulMixin, Mixin, {
         var states = state.states;
         combineFn(state.dispose.splice(0))();
         state.flush();
+        state.elements.clear();
         each(states, function (i, v) {
             delete states[i];
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -13,7 +13,7 @@
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
     "@misonou/react-dom-client": "^1.0.3",
-    "brew-js": ">=0.4.7",
+    "brew-js": ">=0.4.9",
     "waterpipe": "^2.5.0",
     "zeta-dom": ">=0.3.1",
     "zeta-dom-react": ">=0.2.1"
@@ -43,6 +43,9 @@
     "webpack": "^5.3.0",
     "webpack-cli": "^4.1.0"
   },
+  "sideEffects": [
+    "./src/app.js"
+  ],
   "keywords": [
     "html",
     "dom",

package/view.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useAsync } from "zeta-dom-react";
 import dom from "./include/zeta-dom/dom.js";
 import { notifyAsync } from "./include/zeta-dom/domLock.js";
-import { any, combineFn, defineObservableProperty, definePrototype, each, exclude, executeOnce, extend, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
+import { any, combineFn, defineObservableProperty, definePrototype, each, exclude, executeOnce, extend, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, setImmediate, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
 import { animateIn, animateOut } from "./include/brew-js/anim.js";
 import { removeQueryAndHash } from "./include/brew-js/util/path.js";
 import { app } from "./app.js";
@@ -28,7 +28,11 @@ definePrototype(ErrorBoundary, React.Component, {
         if (errorView && !self.state.error) {
             self.setState({ error });
         } else {
-            dom.emit('error', self.context.container, { error }, true);
+            // emit error in next tick as ref callback may yet to be invoked
+            // if error is thrown synchronously in first render
+            setImmediate(function () {
+                dom.emit('error', self.context.container, { error }, true);
+            });
         }
     },
     render: function () {