brew-js-react 0.5.4 → 0.5.6

package/hooks.js

@@ -1,7 +1,9 @@
-import { createElement, useEffect, useRef, useState } from "react";
-import { ViewStateProvider, useObservableProperty, useUpdateTrigger } from "zeta-dom-react";
-import { definePrototype, delay, each, extend, kv, setImmediateOnce, throwNotFunction, watch } from "zeta-dom/util";
+import { createElement, useEffect, useMemo, useRef, useState } from "react";
+import { ViewStateProvider, useMemoizedFunction, useObservableProperty, useUpdateTrigger } 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";
+import { parsePath } from "brew-js/util/path";
 import { app } from "./app.js";
 import { useViewContext } from "./view.js";
 
@@ -81,34 +83,23 @@ export function useAppReadyState() {
 export function useRouteParam(name, defaultValue) {
     const container = useViewContext();
     const params = container.page.params;
-    const route = app.route;
     const value = params[name] || '';
     const ref = useRef(value);
     const forceUpdate = useUpdateTrigger();
     useEffect(function () {
         var setValue = function () {
-            var current = route[name] || '';
+            var current = container.page.params[name] || '';
             if (current !== ref.current) {
-                if (container.active) {
-                    ref.current = current;
-                    forceUpdate();
-                } else {
-                    watch(container, 'active', setValue);
-                }
+                forceUpdate();
             }
         };
         // route parameter might be changed after state initialization and before useEffect hook is called
         setValue();
-        if (name in route) {
-            return route.watch(name, function () {
-                setImmediateOnce(setValue);
-            });
-        }
-        console.error('Route parameter ' + name + ' does not exist');
-    }, [name, defaultValue]);
+        return container.on('pagechange', setValue);
+    }, [name]);
     ref.current = value;
     if (defaultValue && container.active && (!value || (name === 'remainingSegments' && value === '/'))) {
-        app.navigate(route.getPath(extend({}, params, kv(name, defaultValue))), true);
+        app.navigate(app.route.getPath(extend({}, params, kv(name, defaultValue))), true);
     }
     return value;
 }
@@ -130,6 +121,59 @@ export function useRouteState(key, defaultValue, snapshotOnUpdate) {
     return state;
 }
 
+export function useQueryParam(key, value, snapshotOnUpdate) {
+    if (isPlainObject(key)) {
+        snapshotOnUpdate = value;
+        value = key;
+        key = false;
+    }
+    var container = useViewContext();
+    var getParams = function () {
+        return mapObject(key === false ? value : kv(key, value), function (v, i) {
+            return getQueryParam(i, app.path) || v || '';
+        });
+    };
+    var state = useState([]);
+    useMemo(function () {
+        state[0].splice(0, 2, getParams());
+    }, [key]);
+    var current = state[0][0];
+    var trackChanges = function (values) {
+        if (!equal(values, current)) {
+            extend(current, values);
+            state[1]([current]);
+        }
+    };
+    var setParams = useMemoizedFunction(function (values) {
+        if (key !== false) {
+            values = kv(key, isFunction(values) ? values(current[key]) : values);
+        } else if (isFunction(values)) {
+            values = values(extend({}, current));
+        }
+        if (container.active) {
+            var url = parsePath(app.path);
+            var search = keys(values).reduce(function (v, i) {
+                return values[i] !== current[i] ? setQueryParam(i, values[i] || null, v) : v;
+            }, url.search);
+            if (search !== url.search) {
+                if (snapshotOnUpdate) {
+                    app.snapshot();
+                }
+                catchAsync(app.navigate(search + url.hash, true));
+                trackChanges(getParams());
+            }
+        }
+    });
+    useEffect(function () {
+        return app.watch('path', function () {
+            if (container.active) {
+                trackChanges(getParams());
+            }
+        });
+    }, [key]);
+    return [key !== false ? current[key] : (state[0][1] || (state[0][1] = freeze(extend({}, current)))), setParams];
+}
+
 export function ViewStateContainer(props) {
     const cache = useState({})[0];
     const container = useViewContextWithEffect(function (cur) {

package/mixin.js

@@ -27,15 +27,15 @@ function createUseFunction(ctor) {
     };
 }
 
-export const useAnimateMixin = createUseFunction(AnimateMixin);
-export const useAnimateSequenceMixin = createUseFunction(AnimateSequenceMixin);
-export const useClassNameToggleMixin = createUseFunction(ClassNameToggleMixin);
-export const useFlyoutMixin = createUseFunction(FlyoutMixin);
-export const useFocusStateMixin = createUseFunction(FocusStateMixin);
-export const useLoadingStateMixin = createUseFunction(LoadingStateMixin);
-export const useScrollableMixin = createUseFunction(ScrollableMixin);
-export const useScrollIntoViewMixin = createUseFunction(ScrollIntoViewMixin);
-export const useUnmanagedClassNameMixin = createUseFunction(UnmanagedClassNameMixin);
+export const useAnimateMixin = /*#__PURE__*/ createUseFunction(AnimateMixin);
+export const useAnimateSequenceMixin = /*#__PURE__*/ createUseFunction(AnimateSequenceMixin);
+export const useClassNameToggleMixin = /*#__PURE__*/ createUseFunction(ClassNameToggleMixin);
+export const useFlyoutMixin = /*#__PURE__*/ createUseFunction(FlyoutMixin);
+export const useFocusStateMixin = /*#__PURE__*/ createUseFunction(FocusStateMixin);
+export const useLoadingStateMixin = /*#__PURE__*/ createUseFunction(LoadingStateMixin);
+export const useScrollableMixin = /*#__PURE__*/ createUseFunction(ScrollableMixin);
+export const useScrollIntoViewMixin = /*#__PURE__*/ createUseFunction(ScrollIntoViewMixin);
+export const useUnmanagedClassNameMixin = /*#__PURE__*/ createUseFunction(UnmanagedClassNameMixin);
 
 export function useMixin(ctor) {
     return useSingleton(function () {

package/mixins/FlyoutMixin.js

@@ -1,5 +1,5 @@
 import { definePrototype, extend, makeArray, pick } from "zeta-dom/util";
-import { closeFlyout, isFlyoutOpen, openFlyout } from "brew-js/domAction";
+import { closeFlyout, openFlyout } from "brew-js/domAction";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
@@ -57,11 +57,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         });
     },
     open: function (value, source) {
-        var element = this.elements()[0];
-        if (!isFlyoutOpen(element)) {
-            valueMap.set(element, value);
-        }
-        return openFlyout(element, source, this.getOptions());
+        return openFlyout(this.elements()[0], value, source, this.getOptions());
     },
     close: function (value) {
         return closeFlyout(this.elements()[0], value);
@@ -84,6 +80,17 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         var self = this;
         FlyoutMixinSuper.initElement.call(self, element, state);
         self.onDispose(app.on(element, {
+            flyoutshow: function (e) {
+                valueMap.set(element, e.data);
+                self.isFlyoutOpened = true;
+                self.visible = true;
+            },
+            flyoutclose: function () {
+                self.isFlyoutOpened = false;
+            },
+            flyouthide: function () {
+                self.visible = false;
+            },
             animationstart: function () {
                 self.animating = true;
             },
@@ -91,14 +98,5 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
                 self.animating = false;
             },
         }, true));
-    },
-    onClassNameUpdated: function (element, prevState, state) {
-        var self = this;
-        var isFlyoutOpened = isFlyoutOpen(element);
-        if (!isFlyoutOpened) {
-            valueMap.delete(element);
-        }
-        self.visible = state.open;
-        self.isFlyoutOpened = isFlyoutOpened;
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -13,7 +13,7 @@
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
     "@misonou/react-dom-client": "^1.1.1",
-    "brew-js": ">=0.6.2",
+    "brew-js": ">=0.6.5",
     "waterpipe": "^2.5.0",
     "zeta-dom": ">=0.4.10",
     "zeta-dom-react": ">=0.4.14"
@@ -27,7 +27,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@jest/globals": "^26.6.2",
-    "@misonou/build-utils": "^1.1.2",
+    "@misonou/build-utils": "^1.1.3",
     "@misonou/test-utils": "^1.0.3",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/react": "^12.1.2",

package/view.d.ts

@@ -1,3 +1,5 @@
+/// <reference path="./brew.d.ts" />
+
 import { useRouteState } from "./hooks";
 
 export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
@@ -16,14 +18,35 @@ export interface ViewContextEventMap {
 }
 
 export interface ViewContext extends Zeta.ZetaEventDispatcher<ViewContextEventMap, ViewContext> {
+    /**
+     * Gets the parent view context, or `null` if there is no parent context.
+     */
+    readonly parent: ViewContext | null;
+    /**
+     * Gets the HTML element associated with this view.
+     */
     readonly container: HTMLElement;
+    /**
+     * Gets the rendered view component.
+     */
     readonly view: ViewComponent<any>;
+    /**
+     * Gets whether the view is active.
+     *
+     * A rendered view becomes inactive if the view will be replaced by another view, or parent container will be unmounted.
+     * It may also be temporarily inactive during navigation.
+     */
     readonly active: boolean;
     /**
      * Gets information of current page that rendered the view.
      * Unlike {@link Brew.WithRouter.page}, it will not change when user has navigated away and the current view is going to unmount.
      */
     readonly page: Brew.PageInfo;
+
+    /**
+     * Gets view contexts rendered under this view container.
+     */
+    getChildren(): ViewContext[];
 }
 
 export interface ViewProps<S = {}> {
@@ -97,6 +120,12 @@ export function registerErrorView(component: React.ComponentType<ErrorViewProps>
  */
 export function isViewMatched(view: ViewComponent<any>): boolean;
 
+/**
+ * Returns whether a registered view component is currently being rendered.
+ * @param view A view component returned from {@link registerView}.
+ */
+export function isViewRendered(view: ViewComponent<any>): boolean;
+
 /**
  * Gets the view component that matches the current path within all registered views.
  * However it does not imply if the view is in fact being rendered.
@@ -110,6 +139,13 @@ export function matchView(): ViewComponent<any> | undefined;
  */
 export function matchView(views: ViewComponent<any>[]): ViewComponent<any> | undefined;
 
+/**
+ * Gets the view component that matches the current path within the given set of views.
+ * However it does not imply if the view is in fact being rendered.
+ * @param views A list of view components.
+ */
+export function matchView(...views: ViewComponent<any>[]): ViewComponent<any> | undefined;
+
 /**
  * Gets the view component that matches the specified path.
  * @param path A valid path that could navigate to.
@@ -123,6 +159,13 @@ export function matchView(path: string): ViewComponent<any> | undefined;
  */
 export function matchView(path: string, views: ViewComponent<any>[]): ViewComponent<any> | undefined;
 
+/**
+ * Gets the view component that matches the specified path, within the given set of views.
+ * @param path A valid path that could navigate to.
+ * @param views A list of view components.
+ */
+export function matchView(path: string, ...views: ViewComponent<any>[]): ViewComponent<any> | undefined;
+
 /**
  * Renders view by matching current route state against registered route parameters of each supplied views.
  * @param args A list of view components created by {@link registerView}.

package/view.js

@@ -3,7 +3,7 @@ import { useAsync } from "zeta-dom-react";
 import dom from "zeta-dom/dom";
 import { notifyAsync } from "zeta-dom/domLock";
 import { ZetaEventContainer } from "zeta-dom/events";
-import { any, arrRemove, catchAsync, combineFn, createPrivateStore, defineObservableProperty, defineOwnProperty, definePrototype, each, exclude, executeOnce, extend, freeze, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, resolveAll, setImmediate, single, throwNotFunction, watch } from "zeta-dom/util";
+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";
 import { animateIn, animateOut } from "brew-js/anim";
 import { removeQueryAndHash } from "brew-js/util/path";
 import { app, onAppInit } from "./app.js";
@@ -15,7 +15,7 @@ const routeMap = new Map();
 const usedParams = {};
 const sortedViews = [];
 const emitter = new ZetaEventContainer();
-const rootContext = freeze(extend(new ViewContext(null, null), { container: root }));
+const rootContext = freeze(extend(new ViewContext(), { container: root }));
 const rootState = _(rootContext);
 const StateContext = React.createContext(rootContext);
 
@@ -48,13 +48,13 @@ onAppInit(function () {
     });
 });
 
-function ViewContext(view, page) {
+function ViewContext(view, page, parent) {
     var self = this;
-    watch(self, true);
-    defineOwnProperty(self, 'view', view, true);
+    defineOwnProperty(self, 'view', view || null, true);
+    defineOwnProperty(self, 'parent', parent || null, true);
     _(self, {
         children: [],
-        setPage: defineObservableProperty(self, 'page', page, true),
+        setPage: defineObservableProperty(self, 'page', page || null, true),
         setActive: defineObservableProperty(self, 'active', !!page, true)
     });
     watch(self, 'page', function (page, previousPage) {
@@ -63,6 +63,11 @@ function ViewContext(view, page) {
 }
 
 definePrototype(ViewContext, {
+    getChildren: function () {
+        return map(_(this).children, function (v) {
+            return v.currentState;
+        });
+    },
     on: function (event, handler) {
         return emitter.add(this, event, handler);
     }
@@ -85,6 +90,8 @@ definePrototype(ErrorBoundary, React.Component, {
             setImmediate(function () {
                 dom.emit('error', self.context.container, { error }, true);
             });
+            // ensure promise sent to beforepageload event is resolved
+            self.props.onComponentLoaded();
         }
     },
     render: function () {
@@ -111,18 +118,25 @@ function ViewContainer() {
 ViewContainer.contextType = StateContext;
 
 definePrototype(ViewContainer, React.Component, {
+    setActive: noop,
     componentDidMount: function () {
         var self = this;
         var parent = _(self.context).children;
+        var unwatch = watch(app.route, function () {
+            self.setActive(self.getViewComponent() === self.currentViewComponent);
+        });
+        self.componentWillUnmount = function () {
+            self.setActive(false);
+            arrRemove(parent, self);
+            unwatch();
+            setImmediate(function () {
+                if (self.unmountView && !self.currentState.active) {
+                    self.unmountView();
+                }
+            });
+        };
         parent.push(self);
-        self.componentWillUnmount = combineFn(
-            watch(app.route, function () {
-                (self.setActive || noop)(self.getViewComponent() === self.currentViewComponent);
-            }),
-            function () {
-                arrRemove(parent, self);
-            }
-        );
+        self.setActive(true);
     },
     render: function () {
         /** @type {any} */
@@ -140,40 +154,39 @@ definePrototype(ViewContainer, React.Component, {
         if (V && (viewChanged || !(self.children || '')[0])) {
             // ensure the current path actually corresponds to the matched view
             // when some views are not included in the list of allowed views
-            var targetPath = resolvePath(V, getCurrentParams(V, true));
+            var targetPath = resolvePath(V, app.route);
             if (targetPath !== removeQueryAndHash(app.path)) {
                 app.navigate(targetPath, true);
                 return;
             }
         }
         if (V && viewChanged) {
-            var prevElement = self.currentElement;
-            if (prevElement) {
-                self.setActive(false);
-                self.prevView = self.currentView;
-                self.currentElement = undefined;
-                app.emit('pageleave', prevElement, { pathname: self.currentPath }, true);
-                animateOut(prevElement, 'show').then(function () {
-                    self.prevView = undefined;
-                    self.forceUpdate();
-                });
-            }
-            (self.cancelPrevious || noop)();
+            (self.unmountView || noop)(true);
 
+            var state = new ViewContext(V, app.page, self.context);
             var onComponentLoaded;
             var promise = new Promise(function (resolve) {
                 onComponentLoaded = resolve;
             });
+            var unmountView = onComponentLoaded;
             var initElement = executeOnce(function (element) {
-                self.currentElement = element;
                 state.container = element;
                 promise.then(function () {
-                    animateIn(element, 'show', '[brew-view]', true);
-                    app.emit('pageenter', element, { pathname: app.path }, true);
+                    if (self.currentState === state) {
+                        unmountView = function () {
+                            self.prevView = self.currentView;
+                            app.emit('pageleave', element, { pathname: state.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);
+                    }
                 });
                 notifyAsync(element, promise);
             });
-            var state = new ViewContext(V, app.page);
             var viewProps = freeze({
                 navigationType: event.navigationType,
                 viewContext: state,
@@ -184,11 +197,16 @@ definePrototype(ViewContainer, React.Component, {
                     React.createElement('div', extend({}, self.props.rootProps, { ref: initElement, 'brew-view': '' }),
                         React.createElement(ErrorBoundary, { onComponentLoaded, viewProps }))));
             extend(self, _(state), {
-                cancelPrevious: onComponentLoaded,
-                currentPath: app.path,
+                currentState: state,
                 currentView: view,
-                currentViewComponent: V
+                currentViewComponent: V,
+                unmountView: executeOnce(function () {
+                    self.setActive(false);
+                    routeMap.get(V).rendered--;
+                    unmountView();
+                })
             });
+            routeMap.get(V).rendered++;
             (event.waitFor || noop)(promise);
         }
         (self.setPage || noop)(app.page);
@@ -199,7 +217,7 @@ definePrototype(ViewContainer, React.Component, {
     }
 });
 
-function getCurrentParams(view, includeAll, params) {
+function getCurrentParams(view, params) {
     var state = routeMap.get(view);
     if (!state.maxParams) {
         var matchers = exclude(state.matchers, ['remainingSegments']);
@@ -228,7 +246,7 @@ function getCurrentParams(view, includeAll, params) {
             });
         }
     }
-    return pick(params || app.route, includeAll ? state.maxParams : state.minParams);
+    return extend(pick(app.route, state.minParams), params && pick(params, state.maxParams), state.params);
 }
 
 function sortViews(a, b) {
@@ -262,11 +280,14 @@ function createViewComponent(factory) {
                 return React.createElement(s.default, viewProps);
             });
         }, !!promise)[1];
-        if (!promise || !state.loading) {
-            props.onComponentLoaded();
-            if (state.error) {
-                throw state.error;
+        var loaded = !promise || !state.loading;
+        React.useEffect(function () {
+            if (loaded) {
+                setImmediate(props.onComponentLoaded);
             }
+        }, [loaded]);
+        if (state.error) {
+            throw state.error;
         }
         return children || state.value || React.createElement(React.Fragment);
     };
@@ -280,14 +301,17 @@ export function isViewMatched(view) {
     return matchViewParams(view, app.route);
 }
 
-export function matchView(path, views) {
+export function isViewRendered(view) {
+    return !!(routeMap.get(view) || '').rendered;
+}
+
+export function matchView() {
+    var views = makeArray(arguments);
     var route = app.route;
-    if (typeof path === 'string') {
-        route = route.parse(path);
-    } else {
-        views = path;
+    if (typeof views[0] === 'string') {
+        route = route.parse(views.shift());
     }
-    views = views ? makeArray(views).sort(sortViews) : sortedViews;
+    views = views[0] ? (isArray(views[0]) ? makeArray(views[0]) : views).sort(sortViews) : sortedViews;
     return any(views, function (v) {
         return matchViewParams(v, route);
     }) || undefined;
@@ -304,6 +328,7 @@ export function registerView(factory, routeParams) {
     });
     routeMap.set(Component, {
         id: randomId(),
+        rendered: 0,
         matchCount: keys(routeParams).length,
         matchers: routeParams,
         params: pick(routeParams, function (v) {
@@ -333,12 +358,10 @@ export function renderView() {
 }
 
 export function resolvePath(view, params) {
-    var state = routeMap.get(view);
-    if (!state) {
+    if (!routeMap.has(view)) {
         return '/';
     }
-    var newParams = extend(getCurrentParams(view), getCurrentParams(view, true, params || {}), state.params);
-    return app.route.getPath(newParams);
+    return app.route.getPath(getCurrentParams(view, params));
 }
 
 export function linkTo(view, params) {