brew-js-react 0.5.7 → 0.6.0

package/hooks.js

@@ -1,5 +1,5 @@
 import { createElement, useEffect, useMemo, useRef, useState } from "react";
-import { ViewStateProvider, useMemoizedFunction, useObservableProperty, useUpdateTrigger } from "zeta-dom-react";
+import { ViewStateProvider, useMemoizedFunction, useObservableProperty, useValueTrigger } from "zeta-dom-react";
 import { catchAsync, definePrototype, delay, each, equal, extend, freeze, isFunction, isPlainObject, keys, kv, mapObject, throwNotFunction } from "zeta-dom/util";
 import { ZetaEventContainer } from "zeta-dom/events";
 import { getQueryParam, setQueryParam } from "brew-js/util/common";
@@ -84,20 +84,15 @@ export function useRouteParam(name, defaultValue) {
     const container = useViewContext();
     const params = container.page.params;
     const value = params[name] || '';
-    const ref = useRef(value);
-    const forceUpdate = useUpdateTrigger();
+    const notifyChange = useValueTrigger(value);
     useEffect(function () {
         var setValue = function () {
-            var current = container.page.params[name] || '';
-            if (current !== ref.current) {
-                forceUpdate();
-            }
+            notifyChange(container.page.params[name] || '');
         };
         // route parameter might be changed after state initialization and before useEffect hook is called
         setValue();
         return container.on('pagechange', setValue);
     }, [name]);
-    ref.current = value;
     if (defaultValue && container.active && (!value || (name === 'remainingSegments' && value === '/'))) {
         app.navigate(app.route.getPath(extend({}, params, kv(name, defaultValue))), true);
     }
@@ -129,22 +124,20 @@ export function useQueryParam(key, value, snapshotOnUpdate) {
     }
     var container = useViewContext();
     var getParams = function () {
-        return mapObject(key === false ? value : kv(key, value), function (v, i) {
+        return freeze(mapObject(key === false ? value : kv(key, value), function (v, i) {
             return getQueryParam(i, app.path) || v || '';
-        });
+        }));
     };
-    var state = useState([]);
+    var ref = useRef({});
     useMemo(function () {
-        state[0].splice(0, 2, getParams());
+        ref.current = getParams();
     }, [key]);
-    var current = state[0][0];
-    var trackChanges = function (values) {
-        if (!equal(values, current)) {
-            extend(current, values);
-            state[1]([current]);
-        }
-    };
+    var current = ref.current;
+    var notifyChange = useValueTrigger(current, function (current, params) {
+        return equal(current, params) || !(ref.current = params);
+    });
     var setParams = useMemoizedFunction(function (values) {
+        var current = ref.current;
         if (key !== false) {
             values = kv(key, isFunction(values) ? values(current[key]) : values);
         } else if (isFunction(values)) {
@@ -159,19 +152,19 @@ export function useQueryParam(key, value, snapshotOnUpdate) {
                 if (snapshotOnUpdate) {
                     app.snapshot();
                 }
-                catchAsync(app.navigate(search + url.hash, true));
-                trackChanges(getParams());
+                catchAsync(app.navigate((search || '?') + url.hash, true));
+                notifyChange(getParams());
             }
         }
     });
     useEffect(function () {
         return app.watch('path', function () {
             if (container.active) {
-                trackChanges(getParams());
+                notifyChange(getParams());
             }
         });
     }, [key]);
-    return [key !== false ? current[key] : (state[0][1] || (state[0][1] = freeze(extend({}, current)))), setParams];
+    return [key !== false ? current[key] : current, setParams];
 }
 
 export function ViewStateContainer(props) {

package/mixins/AnimateSequenceMixin.js

@@ -31,9 +31,9 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
         var self = this;
         AnimateSequenceMixinSuper.initElement.call(self, element, state);
         if (self.selector) {
-            self.onDispose(watchElements(element, self.selector, function (addedNodes) {
+            state.onDispose(watchElements(element, self.selector, function (addedNodes) {
                 $(addedNodes).attr('is-animate-sequence', '');
-            }));
+            }).dispose);
         }
     }
 });

package/mixins/ClassNameMixin.js

@@ -21,18 +21,13 @@ export default function ClassNameMixin(classNames) {
 }
 
 definePrototype(ClassNameMixin, StatefulMixin, {
-    initState: function () {
-        return {
-            element: null,
-            classNames: fill(this.classNames, false)
-        };
-    },
     initElement: function (element, state) {
         var self = this;
+        state.classNames = fill(self.classNames, false);
         checkState(self, element, state);
-        watchOwnAttributes(element, 'class', function () {
+        state.onDispose(watchOwnAttributes(element, 'class', function () {
             checkState(self, element, state, true);
-        });
+        }).dispose);
     },
     onLayoutEffect: function (element, state) {
         setClass(element, state.classNames);

package/mixins/FlyoutMixin.d.ts

@@ -35,6 +35,10 @@ export interface FlyoutMixinOptions {
  * Mixin should be created using {@link useFlyoutMixin} and applied to element by {@link Mixin.use}.
  */
 export default class FlyoutMixin extends ClassNameMixin {
+    /**
+     * Gets the flyout element.
+     */
+    readonly element: Element | null;
     /**
      * Gets whether the flyout is open.
      */

package/mixins/FlyoutMixin.js

@@ -1,4 +1,4 @@
-import { definePrototype, extend, makeArray, pick } from "zeta-dom/util";
+import { definePrototype, extend, makeArray, pick, throws } from "zeta-dom/util";
 import { closeFlyout, openFlyout, toggleFlyout } from "brew-js/domAction";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
@@ -25,6 +25,9 @@ export default function FlyoutMixin() {
 }
 
 definePrototype(FlyoutMixin, ClassNameMixin, {
+    get element() {
+        return this.elements()[0] || null;
+    },
     getOptions: function () {
         var self = this;
         var options = pick(self, ['closeOnBlur']);
@@ -57,19 +60,18 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         });
     },
     open: function (value, source) {
-        return openFlyout(this.elements()[0], value, source, this.getOptions());
+        return openFlyout(this.element, value, source, this.getOptions());
     },
     close: function (value) {
-        return closeFlyout(this.elements()[0], value);
+        return closeFlyout(this.element, value);
     },
     toggleSelf: function (source) {
-        return toggleFlyout(this.elements()[0], source, this.getOptions());
+        return toggleFlyout(this.element, source, this.getOptions());
     },
     onOpen: function (callback) {
-        var element = this.elements()[0];
         return this.onToggleState(function (opened) {
             if (opened) {
-                return callback(valueMap.get(element));
+                callback(valueMap.get(this.element));
             }
         });
     },
@@ -81,8 +83,11 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     },
     initElement: function (element, state) {
         var self = this;
+        if (self.elements()[1]) {
+            throws('FlyoutMixin only supports single element');
+        }
         FlyoutMixinSuper.initElement.call(self, element, state);
-        self.onDispose(app.on(element, {
+        state.onDispose(app.on(element, {
             flyoutshow: function (e) {
                 valueMap.set(element, e.data);
                 self.isFlyoutOpened = true;

package/mixins/FlyoutToggleMixin.js

@@ -32,7 +32,7 @@ definePrototype(FlyoutToggleMixin, ClassNameMixin, {
     initElement: function (element, state) {
         var self = this;
         FlyoutToggleMixinSuper.initElement.call(self, element, state);
-        self.onDispose(dom.on(element, {
+        state.onDispose(dom.on(element, {
             focusin: function () {
                 triggerFlyoutAction(self, state, 'focus', self.open, [null, dom.activeElement]);
             },

package/mixins/FocusStateMixin.js

@@ -23,7 +23,7 @@ definePrototype(FocusStateMixin, StatefulMixin, {
                 callback(arg || target);
             }
         };
-        this.onDispose(dom.on(element, {
+        state.onDispose(dom.on(element, {
             focusin: function (e) {
                 state.focused = e.source;
                 setClass(element, 'focused', e.source);

package/mixins/LoadingStateMixin.js

@@ -16,7 +16,7 @@ definePrototype(LoadingStateMixin, ClassNameMixin, {
         var self = this;
         LoadingStateMixinSuper.initElement.call(self, element, state);
         getDirectiveComponent(element).enableLoadingClass = true;
-        self.onDispose(subscribeAsync(element, function (loading) {
+        state.onDispose(subscribeAsync(element, function (loading) {
             self.loading = loading || !!any(self.elements(), function (v) {
                 return v !== element && getClass(v, 'loading') === true;
             });

package/mixins/ScrollableMixin.d.ts

@@ -52,6 +52,14 @@ export default class ScrollableMixin extends ClassNameMixin implements JQueryScr
      * the element will act as content to be scrolled.
      */
     readonly target: StaticAttributeMixin;
+    /**
+     * Gets the element with scrollable plugin enabled.
+     */
+    readonly element: Element | null;
+    /**
+     * Gets the element which its scrolling position is currently controlled.
+     */
+    readonly contentElement: Element | null;
     /**
      * Gets the index of the currently visible element matched by {@link ScrollableMixinOptions.pagedItemSelector} options.
      */

package/mixins/ScrollableMixin.js

@@ -1,4 +1,4 @@
-import { defineHiddenProperty, definePrototype, each, extend } from "zeta-dom/util";
+import { defineHiddenProperty, definePrototype, each, extend, throws } from "zeta-dom/util";
 import { getDirectiveComponent } from "brew-js/directive";
 import { app } from "../app.js";
 import Mixin from "./Mixin.js";
@@ -15,6 +15,13 @@ export default function ScrollableMixin() {
 }
 
 definePrototype(ScrollableMixin, ClassNameMixin, {
+    get element() {
+        return this.elements()[0] || null;
+    },
+    get contentElement() {
+        var element = this.element;
+        return element && getDirectiveComponent(element).scrollable.scrollTarget;
+    },
     withOptions: function (options) {
         this.options = options;
         return this;
@@ -35,8 +42,11 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     },
     initElement: function (element, state) {
         var self = this;
+        if (self.elements()[1]) {
+            throws('ScrollableMixin only supports single element');
+        }
         ScrollableMixinSuper.initElement.call(self, element, state);
-        self.onDispose(app.on(element, {
+        state.onDispose(app.on(element, {
             scrollIndexChange: function (e) {
                 self.pageIndex = e.newIndex;
             },
@@ -52,7 +62,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
 
 each('destroy enable disable setOptions setStickyPosition refresh scrollPadding stop scrollLeft scrollTop scrollBy scrollTo scrollByPage scrollToPage scrollToElement', function (i, v) {
     defineHiddenProperty(ScrollableMixin.prototype, v, function () {
-        var obj = getDirectiveComponent(this.elements()[0]);
+        var obj = getDirectiveComponent(this.element);
         return obj.scrollable[v].apply(null, arguments);
     });
 });

package/mixins/StatefulMixin.d.ts

@@ -9,6 +9,12 @@ export interface MixinState {
      * Additional state.
      */
     [x: string]: any;
+
+    /**
+     * Registers callback to clean up resources when the element is unmounted.
+     * @param callback A callback.
+     */
+    onDispose(callback: Zeta.UnregisterCallback): void;
 }
 
 export interface MixinRef<T extends StatefulMixin = StatefulMixin> {
@@ -29,7 +35,7 @@ export default abstract class StatefulMixin<T extends MixinState = MixinState> e
      * By default, existing values on the actual state object will be overwritten in subsequent update.
      * To handle changes, overrides the {@link StatefulMixin.mergeState} method.
      */
-    protected get state(): Exclude<Partial<T>, 'element'>;
+    protected get state(): Exclude<Partial<T>, 'element' | 'onDispose'>;
 
     /**
      * Gets an array of mounted elements which this mixin has been applied.
@@ -37,12 +43,14 @@ export default abstract class StatefulMixin<T extends MixinState = MixinState> e
     elements(): HTMLElement[];
     /**
      * Registers callback to clean up resources when the host component is unmounted.
+     * For individual element, use {@link MixinState.onDispose}.
      * @param callback A callback.
      */
     onDispose(callback: Zeta.UnregisterCallback): void;
 
     /**
      * Override this method to create state object with initial values.
+     * @deprecated Initialize state in {@link StatefulMixin.initElement} instead.
      */
     protected initState(): T;
     /**

package/mixins/StatefulMixin.js

@@ -1,7 +1,26 @@
-import { combineFn, createPrivateStore, definePrototype, extend, keys, map, pipe, watch } from "zeta-dom/util";
+import { arrRemove, combineFn, createPrivateStore, definePrototype, each, extend, keys, setImmediateOnce, throwNotFunction, watch } from "zeta-dom/util";
 import Mixin from "./Mixin.js";
 
 const _ = createPrivateStore();
+const unmounted = new Set();
+
+function disposeUnmountedStates() {
+    each(unmounted, function (i, v) {
+        combineFn(_(v).splice(0))();
+    });
+    unmounted.clear();
+}
+
+function MixinState(parent, element) {
+    _(this, [parent.delete.bind(parent, element)]);
+    parent.set(element, this);
+}
+
+definePrototype(MixinState, {
+    onDispose: function (callback) {
+        _(this).push(throwNotFunction(callback));
+    }
+});
 
 function MixinRefImpl(mixin) {
     this.mixin = mixin;
@@ -17,8 +36,8 @@ export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
         pending: {},
-        elements: new Set(),
-        states: new WeakMap(),
+        elements: [],
+        states: new Map(),
         flush: watch(this, false),
         dispose: []
     });
@@ -44,34 +63,35 @@ definePrototype(StatefulMixin, Mixin, {
         var self = this;
         var obj = _(self);
         var newState = obj.pending;
-        var state;
+        var element, state;
         return function (current) {
             if (current) {
-                state = obj.states.get(current) || extend(self.initState(), newState);
-                if (state.element !== current) {
-                    state.element = current;
-                    self.initElement(current, state);
-                    obj.states.set(current, state);
+                element = current;
+                state = obj.states.get(element) || new MixinState(obj.states, element);
+                obj.elements.push(element);
+                if (!state.element) {
+                    self.initElement(element, extend(state, self.initState(), newState, { element }));
                 } else if (keys(newState)[0]) {
-                    self.mergeState(current, state, newState);
+                    self.mergeState(element, state, newState);
                 }
-                self.onLayoutEffect(current, state);
-                obj.elements.add(current);
+                self.onLayoutEffect(element, state);
+                unmounted.delete(state);
             } else if (state) {
-                var prev = state.element;
-                self.onBeforeUpdate(prev, state);
-                obj.elements.delete(prev);
+                unmounted.add(state);
+                self.onBeforeUpdate(element, state);
+                arrRemove(obj.elements, element);
             }
+            setImmediateOnce(disposeUnmountedStates);
         };
     },
     elements: function () {
-        return map(_(this).elements, pipe);
+        return _(this).elements.slice();
     },
     onDispose: function (callback) {
         _(this).dispose.push(callback);
     },
     initState: function () {
-        return { element: null };
+        return {};
     },
     initElement: function (element, state) {
     },
@@ -87,9 +107,12 @@ definePrototype(StatefulMixin, Mixin, {
     },
     dispose: function () {
         var state = _(this);
+        each(state.states, function (i, v) {
+            unmounted.add(v);
+        });
+        setImmediateOnce(disposeUnmountedStates);
         combineFn(state.dispose.splice(0))();
         state.flush();
-        state.states = {};
         state.pending = {};
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.5.7",
+  "version": "0.6.0",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -15,8 +15,8 @@
     "@misonou/react-dom-client": "^1.1.1",
     "brew-js": ">=0.6.5",
     "waterpipe": "^2.5.0",
-    "zeta-dom": ">=0.4.10",
-    "zeta-dom-react": ">=0.4.14"
+    "zeta-dom": ">=0.5.1",
+    "zeta-dom-react": ">=0.5.6"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/view.js

@@ -1,6 +1,6 @@
-import { Component, Fragment, createContext, createElement, useContext, useEffect } from "react";
+import { Component, Fragment, createContext, createElement, useContext, useEffect, useState } from "react";
 import { useAsync } from "zeta-dom-react";
-import dom from "zeta-dom/dom";
+import dom, { reportError } from "zeta-dom/dom";
 import { notifyAsync } from "zeta-dom/domLock";
 import { ZetaEventContainer } from "zeta-dom/events";
 import { any, arrRemove, catchAsync, createPrivateStore, defineObservableProperty, defineOwnProperty, definePrototype, each, exclude, executeOnce, extend, freeze, grep, isArray, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, resolveAll, setImmediate, single, throwNotFunction, watch } from "zeta-dom/util";
@@ -70,7 +70,7 @@ function ViewContext(view, page, parent) {
 definePrototype(ViewContext, {
     getChildren: function () {
         return map(_(this).children, function (v) {
-            return v.currentState;
+            return v.currentContext;
         });
     },
     on: function (event, handler) {
@@ -93,7 +93,7 @@ definePrototype(ErrorBoundary, Component, {
             // 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);
+                reportError(error, self.context.container);
             });
             // ensure promise sent to beforepageload event is resolved
             self.props.onComponentLoaded();
@@ -135,7 +135,7 @@ definePrototype(ViewContainer, Component, {
             arrRemove(parent, self);
             unwatch();
             setImmediate(function () {
-                if (self.unmountView && !self.currentState.active) {
+                if (self.unmountView && !self.currentContext.active) {
                     self.unmountView();
                 }
             });
@@ -168,50 +168,53 @@ definePrototype(ViewContainer, Component, {
         if (V && viewChanged) {
             (self.unmountView || noop)(true);
 
-            var state = new ViewContext(V, app.page, self.context);
+            var context = new ViewContext(V, app.page, self.context);
+            var state = routeMap.get(V);
             var onComponentLoaded;
             var promise = new Promise(function (resolve) {
                 onComponentLoaded = resolve;
             });
             var unmountView = onComponentLoaded;
             var initElement = executeOnce(function (element) {
-                state.container = element;
+                context.container = element;
                 promise.then(function () {
-                    if (self.currentState === state) {
+                    if (self.currentContext === context) {
                         unmountView = function () {
                             self.prevView = self.currentView;
-                            app.emit('pageleave', element, { pathname: state.page.path, view: V }, true);
+                            app.emit('pageleave', element, { pathname: context.page.path, view: V }, true);
                             animateOut(element, 'show').then(function () {
                                 self.prevView = undefined;
                                 self.forceUpdate();
                             });
                         };
                         animateIn(element, 'show', '[brew-view]', true);
-                        app.emit('pageenter', element, { pathname: state.page.path, view: V }, true);
+                        app.emit('pageenter', element, { pathname: context.page.path, view: V }, true);
                     }
                 });
                 notifyAsync(element, promise);
             });
-            var viewProps = freeze({
-                navigationType: event.navigationType,
-                viewContext: state,
-                viewData: event.data || {}
-            });
-            var view = createElement(StateContext.Provider, { key: routeMap.get(V).id, value: state },
+            var viewProps = function () {
+                return freeze({
+                    navigationType: event.navigationType,
+                    viewContext: context,
+                    viewData: context.page.data || {}
+                });
+            };
+            var view = createElement(StateContext.Provider, { key: state.id, value: context },
                 createElement(ViewStateContainer, null,
                     createElement('div', extend({}, self.props.rootProps, { ref: initElement, 'brew-view': '' }),
                         createElement(ErrorBoundary, { onComponentLoaded, viewProps }))));
-            extend(self, _(state), {
-                currentState: state,
+            extend(self, _(context), {
+                currentContext: context,
                 currentView: view,
                 currentViewComponent: V,
                 unmountView: executeOnce(function () {
                     self.setActive(false);
-                    routeMap.get(V).rendered--;
+                    state.rendered--;
                     unmountView();
                 })
             });
-            routeMap.get(V).rendered++;
+            state.rendered++;
             (event.waitFor || noop)(promise);
         }
         (self.setPage || noop)(app.page);
@@ -273,19 +276,24 @@ function createViewComponent(factory) {
         factory = createElement.bind(null, factory);
     }
     return function fn(props) {
-        var viewProps = props.viewProps;
-        var children = !promise && factory(viewProps);
+        var viewContext = useContext(StateContext);
+        var viewProps = useState(props.viewProps);
+        var children = !promise && factory(viewProps[0]);
         if (isThenable(children)) {
             promise = children;
             children = null;
             catchAsync(promise);
         }
         var state = useAsync(function () {
-            return promise.then(function (s) {
-                return createElement(s.default, viewProps);
-            });
+            return promise;
         }, !!promise)[1];
         var loaded = !promise || !state.loading;
+        useEffect(function () {
+            // listen to property directly so that it is invoked after pagechange event handlers in actual component
+            return watch(viewContext, 'page', function () {
+                viewProps[1](props.viewProps);
+            });
+        }, []);
         useEffect(function () {
             if (loaded) {
                 setImmediate(props.onComponentLoaded);
@@ -294,7 +302,7 @@ function createViewComponent(factory) {
         if (state.error) {
             throw state.error;
         }
-        return children || state.value || createElement(Fragment);
+        return children || (state.value ? createElement(state.value.default, viewProps[0]) : null);
     };
 }