brew-js-react 0.2.2 → 0.2.5

package/view.js

@@ -2,14 +2,16 @@ import React, { useRef } 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, defineGetterProperty, definePrototype, each, extend, isFunction, keys, makeArray, noop, pick, randomId, setImmediate } from "./include/zeta-dom/util.js";
+import { any, defineGetterProperty, definePrototype, each, exclude, extend, grep, isFunction, keys, makeArray, map, noop, pick, randomId, setImmediate, single } 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";
 import { ViewStateContainer } from "./hooks.js";
 
 const root = dom.root;
 const routeMap = new Map();
 const usedParams = {};
+const sortedViews = [];
 const StateContext = React.createContext(Object.freeze({ active: true }));
 
 let stateId;
@@ -27,6 +29,7 @@ function ViewContainer() {
     }
     self.componentWillUnmount = app.on('navigate', function () {
         if (self.mounted && self.getViewComponent()) {
+            self.isForceUpdate = true;
             self.forceUpdate();
         }
     });
@@ -62,7 +65,7 @@ definePrototype(ViewContainer, React.Component, {
             }
             var providerProps = {
                 key: routeMap.get(V).id,
-                value: {}
+                value: { view: V }
             };
             var view = React.createElement(StateContext.Provider, providerProps,
                 React.createElement(ViewStateContainer, null,
@@ -84,7 +87,10 @@ definePrototype(ViewContainer, React.Component, {
             self.currentPath = app.path;
             self.currentView = view;
         } else {
-            app.emit('pageenter', self.currentElement, { pathname: app.path }, true);
+            if (self.isForceUpdate) {
+                self.isForceUpdate = false;
+                app.emit('pageenter', self.currentElement, { pathname: app.path }, true);
+            }
             resolve();
         }
         notifyAsync(self.parentElement || root, promise);
@@ -92,22 +98,84 @@ definePrototype(ViewContainer, React.Component, {
     },
     getViewComponent: function () {
         var props = this.props;
-        return any(props.views, isViewMatched) || (history.state === stateId && void redirectTo(props.defaultView));
+        var matched = any(props.views, isViewMatched) || props.defaultView;
+        if (history.state === stateId) {
+            // ensure the current path actually corresponds to the matched view
+            // when some views are not included in the list of allowed views
+            var targetPath = linkTo(matched, getCurrentParams(matched, true));
+            if (targetPath !== removeQueryAndHash(app.path)) {
+                app.navigate(targetPath, true);
+            }
+        }
+        return matched;
     }
 });
 
-export function useViewContainerState() {
-    return React.useContext(StateContext);
+function getCurrentParams(view, includeAll, params) {
+    var state = routeMap.get(view);
+    if (!state.maxParams) {
+        var matchers = exclude(state.matchers, ['remainingSegments']);
+        var matched = map(app.routes, function (v) {
+            var route = app.parseRoute(v);
+            var matched = route.length && !any(matchers, function (v, i) {
+                var pos = route.params[i];
+                return (v ? !(pos >= 0) : pos < route.minLength) || (!isFunction(v) && !route.match(i, v));
+            });
+            return matched ? route : null;
+        });
+        if (matched[1]) {
+            matched = grep(matched, function (v) {
+                return !single(v.params, function (v, i) {
+                    return usedParams[i] && !matchers[i];
+                });
+            });
+        }
+        if (matched[0]) {
+            var last = matched.slice(-1)[0];
+            state.maxParams = keys(extend.apply(0, [{}].concat(matched.map(function (v) {
+                return v.params;
+            }))));
+            state.minParams = map(last.params, function (v, i) {
+                return state.params[i] || v >= last.minLength ? null : i;
+            });
+        }
+    }
+    return pick(params || app.route, includeAll ? state.maxParams : state.minParams);
 }
 
-export function isViewMatched(view) {
+function sortViews(a, b) {
+    return (routeMap.get(b) || {}).matchCount - (routeMap.get(a) || {}).matchCount;
+}
+
+function matchViewParams(view, route) {
     var params = routeMap.get(view);
-    return !!params && false === any(params.matchers, function (v, i) {
-        var value = app.route[i] || '';
+    return !!params && !single(params.matchers, function (v, i) {
+        var value = route[i] || '';
         return isFunction(v) ? !v(value) : (v || '') !== value;
     });
 }
 
+export function useViewContainerState() {
+    return React.useContext(StateContext);
+}
+
+export function isViewMatched(view) {
+    return matchViewParams(view, app.route);
+}
+
+export function matchView(path, views) {
+    var route = app.route;
+    if (typeof path === 'string') {
+        route = route.parse(path);
+    } else {
+        views = path;
+    }
+    views = views ? makeArray(views).sort(sortViews) : sortedViews;
+    return any(views, function (v) {
+        return matchViewParams(v, route);
+    }) || undefined;
+}
+
 export function registerView(factory, routeParams) {
     var Component = function (props) {
         var state = useAsync(factory);
@@ -135,6 +203,8 @@ export function registerView(factory, routeParams) {
             return typeof v === 'string';
         })
     });
+    sortedViews.push(Component);
+    sortedViews.sort(sortViews);
     return Component;
 }
 
@@ -142,24 +212,16 @@ export function renderView() {
     var views = makeArray(arguments);
     var rootProps = isFunction(views[0]) ? {} : views.shift();
     var defaultView = views[0];
-    views.sort(function (a, b) {
-        return (routeMap.get(b) || {}).matchCount - (routeMap.get(a) || {}).matchCount;
-    });
+    views.sort(sortViews);
     return React.createElement(ViewContainer, { rootProps, views, defaultView });
 }
 
 export function linkTo(view, params) {
-    var viewParams = (routeMap.get(view) || {}).params;
-    var newParams = {};
-    for (var i in app.route) {
-        if (viewParams && i in viewParams) {
-            newParams[i] = viewParams[i];
-        } else if (params && i in params) {
-            newParams[i] = params[i];
-        } else if (!usedParams[i]) {
-            newParams[i] = app.route[i];
-        }
+    var state = routeMap.get(view);
+    if (!state) {
+        return '/';
     }
+    var newParams = extend(getCurrentParams(view), getCurrentParams(view, true, params), state.params);
     return app.route.getPath(newParams);
 }