brew-js-react 0.6.3 → 0.6.5

package/view.js

@@ -1,9 +1,10 @@
-import { Component, Fragment, createContext, createElement, useContext, useEffect, useState } from "react";
-import { useAsync } from "zeta-dom-react";
+import { Component, createContext, createElement, useContext, useLayoutEffect } from "react";
+import { createAsyncScope, useAsync } from "zeta-dom-react";
 import dom, { reportError } from "zeta-dom/dom";
 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, setImmediate, single, throwNotFunction, watch } from "zeta-dom/util";
+import { always, any, arrRemove, catchAsync, createPrivateStore, defineObservableProperty, defineOwnProperty, definePrototype, delay, each, exclude, executeOnce, extend, fill, freeze, grep, isArray, isFunction, isPlainObject, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, setImmediate, single, throwNotFunction, watch } from "zeta-dom/util";
 import { animateIn, animateOut } from "brew-js/anim";
+import { toQueryString } from "brew-js/util/common";
 import { removeQueryAndHash } from "brew-js/util/path";
 import { app, onAppInit } from "./app.js";
 import { ViewStateContainer } from "./hooks.js";
@@ -20,7 +21,7 @@ const StateContext = createContext(rootContext);
 
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
-var event = {};
+var event = { waitFor: noop };
 
 onAppInit(function () {
     app.on('beforepageload', function (e) {
@@ -41,7 +42,7 @@ onAppInit(function () {
     rootState.setPage(app.page);
 });
 
-function ViewContext(view, page, parent) {
+export function ViewContext(view, page, parent) {
     var self = this;
     defineOwnProperty(self, 'view', view || null, true);
     defineOwnProperty(self, 'parent', parent || null, true);
@@ -59,6 +60,7 @@ function ViewContext(view, page, parent) {
         });
     });
 }
+defineOwnProperty(ViewContext, 'root', rootContext, true);
 
 definePrototype(ViewContext, {
     getChildren: function () {
@@ -66,72 +68,93 @@ definePrototype(ViewContext, {
             return v.currentContext;
         });
     },
+    setErrorView: function (errorView, error) {
+        var wrapper = _(this).wrapper;
+        return wrapper && errorView && !wrapper.setState({ error, errorView });
+    },
     on: function (event, handler) {
         return emitter.add(this, event, handler);
     }
 });
 
-function ErrorBoundary() {
-    Component.apply(this, arguments);
+function ErrorBoundary(props) {
+    Component.call(this, props);
     this.state = {};
+    _(props.context).wrapper = this;
 }
-ErrorBoundary.contextType = StateContext;
 
 definePrototype(ErrorBoundary, Component, {
+    componentDidMount: function () {
+        var self = this;
+        self.componentWillUnmount = watch(self.props.context, 'page', function () {
+            self.state.errorView = null;
+            self.forceUpdate();
+        });
+    },
     componentDidCatch: function (error) {
         var self = this;
-        if (errorView && !self.state.error) {
-            self.setState({ error });
+        if (errorView && self.state.errorView !== errorView) {
+            self.setState({ error, errorView });
         } else {
-            // ensure promise sent to beforepageload event is resolved
-            self.props.onComponentLoaded();
-            reportError(error, self.context.container);
+            self.props.onLoad();
+            reportError(error, self.props.context.container);
         }
     },
     render: function () {
         var self = this;
-        if (!self.context.container) {
+        var context = self.props.context;
+        if (!context.container) {
             setImmediate(function () {
+                extend(self, createAsyncScope(context.container));
+                dom.on(context.container, 'error', function (e) {
+                    return emitter.emit(e, context, { error: e.error });
+                });
                 self.forceUpdate();
             });
             return null;
         }
-        var props = {
-            view: self.context.view,
-            error: self.state.error,
-            reset: self.reset.bind(self)
-        };
-        var onComponentLoaded = self.props.onComponentLoaded;
-        var onError = self.componentDidCatch.bind(self);
-        if (props.error) {
-            return createElement(errorView, { onComponentLoaded, onError, viewProps: props });
+        var errorView = self.state.errorView;
+        if (errorView) {
+            self.props.onLoad();
+            return createElement(self.Provider, null, createElement(self.state.errorView, {
+                view: context.view,
+                error: self.state.error,
+                reset: self.reset.bind(self)
+            }));
         }
-        return createElement(props.view, { onComponentLoaded, onError, viewProps: self.props.viewProps });
+        var onError = self.componentDidCatch.bind(self);
+        var viewProps = {
+            errorHandler: self.errorHandler,
+            navigationType: event.navigationType,
+            viewContext: context,
+            viewData: context.page.data || {}
+        };
+        return createElement(self.Provider, null, createElement(context.view, extend({ viewProps, onError }, self.props)));
     },
     reset: function () {
-        this.setState({ error: null });
+        this.setState({ errorView: null });
     }
 });
 
 function ViewContainer() {
     Component.apply(this, arguments);
+    this.views = [];
 }
 ViewContainer.contextType = StateContext;
 
 definePrototype(ViewContainer, 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.setActive(self.getViewComponent() === (self.currentContext || '').view);
         });
         self.componentWillUnmount = function () {
             self.setActive(false);
             arrRemove(parent, self);
             unwatch();
             setImmediate(function () {
-                if (self.unmountView && !self.currentContext.active) {
+                if (self.currentContext && !self.currentContext.active) {
                     self.unmountView();
                 }
             });
@@ -145,13 +168,13 @@ definePrototype(ViewContainer, Component, {
         if (self.context.active) {
             self.updateView();
         }
-        (self.onRender || noop)();
-        return createElement(Fragment, null, self.prevView, self.currentView);
+        self.onRender();
+        return self.views;
     },
     updateView: function () {
         var self = this;
         var V = self.getViewComponent();
-        var viewChanged = V !== self.currentViewComponent;
+        var viewChanged = V !== (self.currentContext || '').view;
         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
@@ -161,64 +184,68 @@ definePrototype(ViewContainer, Component, {
                 return;
             }
         }
-        if (V && viewChanged) {
-            (self.unmountView || noop)(true);
-
+        var state = routeMap.get(V) || {};
+        if ((self.views[2] || '').key === state.id) {
+            return;
+        }
+        self.views[2] = null;
+        self.abort();
+        if (!V || !viewChanged) {
+            self.setActive(true);
+            self.setPage(app.page);
+            return;
+        }
+        event.waitFor(new Promise(function (resolve) {
             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 rootProps = self.props.rootProps;
             var initElement = executeOnce(function (element) {
-                context.container = element;
-                promise.then(function () {
-                    if (self.currentContext === context) {
-                        unmountView = function () {
-                            self.prevView = self.currentView;
-                            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: context.page.path, view: V }, true);
-                    }
-                });
+                defineOwnProperty(context, 'container', element, true);
+                self.currentContext = self.currentContext || context;
             });
-            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, _(context), {
-                currentContext: context,
-                currentView: view,
-                currentViewComponent: V,
-                unmountView: executeOnce(function () {
-                    self.setActive(false);
+            var onLoad = executeOnce(function () {
+                var element = context.container;
+                var promise = self.unmountView();
+                self.unmountView = executeOnce(function () {
                     state.rendered--;
-                    unmountView();
-                })
+                    self.setActive(false);
+                    app.emit('pageleave', element, { pathname: context.page.path, view: V }, true);
+                    return animateOut(element, 'show').then(function () {
+                        self.views[0] = null;
+                        self.forceUpdate();
+                    });
+                });
+                always(promise, delay).then(function () {
+                    app.emit('pageenter', element, { pathname: context.page.path, view: V }, true);
+                });
+                self.views.shift();
+                self.currentContext = context;
+                extend(self, _(context));
+                state.rendered++;
+                animateIn(element, 'show', '[brew-view]', true);
+                resolve();
             });
-            state.rendered++;
-            (event.waitFor || noop)(promise);
-        }
-        (self.setPage || noop)(app.page);
+            context.on('error', function () {
+                return (rootProps.onError || noop).apply(this, arguments);
+            });
+            self.abort = resolve;
+            self.views[2] = createElement(StateContext.Provider, { key: state.id, value: context },
+                createElement(ViewStateContainer, null,
+                    createElement('div', extend(exclude(rootProps, ['loader', 'onError']), { ref: initElement, 'brew-view': '' }),
+                        createElement(ErrorBoundary, { onLoad, context, self, loader: rootProps.loader }))));
+        }));
     },
     getViewComponent: function () {
         var props = this.props;
-        return any(props.views, isViewMatched) || props.defaultView;
+        return any(props.views, function (v) {
+            return matchViewParams(v, app.route);
+        }) || props.defaultView;
     }
 });
+fill(ViewContainer.prototype, 'abort onRender setActive setPage unmountView', noop);
+
+function normalizePart(value, part) {
+    return isUndefinedOrNull(value) || value === '' || value === part ? '' : value[0] === part ? value : part + value;
+}
 
 function getCurrentParams(view, params) {
     var state = routeMap.get(view);
@@ -271,31 +298,24 @@ function createViewComponent(factory) {
         factory = createElement.bind(null, factory);
     }
     return function fn(props) {
-        var viewContext = useContext(StateContext);
-        var viewProps = useState(props.viewProps);
-        var children = !promise && factory(viewProps[0]);
+        var children = promise || factory(props.viewProps);
         if (isThenable(children)) {
             promise = children;
-            children = null;
             catchAsync(promise);
+        } else {
+            useLayoutEffect(props.onLoad, []);
+            return children;
         }
-        var state = useAsync(function () {
-            return promise.then(null, props.onError);
-        }, !!promise)[1];
-        var loaded = !promise || !state.loading;
-        useEffect(function () {
-            state.elementRef(viewContext.container);
-            // 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);
+        var component = useAsync(function () {
+            return promise.then(null, function (error) {
+                promise = null;
+                props.onError(error);
             });
-        }, []);
-        useEffect(function () {
-            if (loaded) {
-                setImmediate(props.onComponentLoaded);
-            }
-        }, [loaded]);
-        return children || (state.value ? createElement(state.value.default, viewProps[0]) : null);
+        })[0];
+        if (component) {
+            props.onLoad();
+        }
+        return component ? createElement(component.default, props.viewProps) : (props.self.currentContext === props.context && props.loader) || null;
     };
 }
 
@@ -304,7 +324,8 @@ export function useViewContext() {
 }
 
 export function isViewMatched(view) {
-    return matchViewParams(view, app.route);
+    var route = app.route;
+    return matchViewParams(view, route) && resolvePath(view, route) === route.toString();
 }
 
 export function isViewRendered(view) {
@@ -347,7 +368,7 @@ export function registerView(factory, routeParams) {
 }
 
 export function registerErrorView(factory) {
-    errorView = createViewComponent(factory);
+    errorView = throwNotFunction(factory);
 }
 
 export function renderView() {
@@ -364,10 +385,12 @@ export function renderView() {
 }
 
 export function resolvePath(view, params) {
-    if (!routeMap.has(view)) {
-        return '/';
+    var suffix = '';
+    if (isArray(params)) {
+        suffix = normalizePart(isPlainObject(params[1]) ? toQueryString(params[1]) : params[1], '?') + normalizePart(params[2], '#');
+        params = params[0];
     }
-    return app.route.getPath(getCurrentParams(view, params));
+    return (routeMap.has(view) ? app.route.getPath(getCurrentParams(view, params)) : '/') + suffix;
 }
 
 export function linkTo(view, params) {