brew-js-react 0.7.2 → 0.7.4

package/hooks.d.ts

@@ -1,6 +1,6 @@
 export type SetQueryParamAction<T> = Partial<T> | ((prev: Readonly<T>) => Partial<T>);
 
-export const ViewStateContainer: React.FC;
+export const ViewStateContainer: React.FC<React.PropsWithChildren<{}>>;
 
 /**
  * Returns if the app has completed initialization, and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "",
   "type": "module",
   "main": "index.js",

package/view.d.ts

@@ -249,14 +249,14 @@ export function matchView(path: string, ...views: ViewComponent<any>[]): ViewCom
  * 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}.
  */
-export function renderView(...args: ViewComponent<any>[]): JSX.Element;
+export function renderView(...args: ViewComponent<any>[]): React.ReactElement;
 
 /**
  * Renders view by matching current route state against registered route parameters of each supplied views.
  * @param props Optional parameters passed to the root element rendered by the function.
  * @param args A list of view components created by {@link registerView}.
  */
-export function renderView(props: ViewComponentRootProps, ...args: ViewComponent<any>[]): JSX.Element;
+export function renderView(props: ViewComponentRootProps, ...args: ViewComponent<any>[]): React.ReactElement;
 
 /**
  * Resets all rendered views by unmounting and remounting the view components, or re-rendering the view components if they are currently replaced by error views.

package/view.js

@@ -2,7 +2,7 @@ import { Component, createContext, createElement, useContext, useLayoutEffect }
 import { createAsyncScope, useAsync } from "zeta-dom-react";
 import dom, { reportError } from "zeta-dom/dom";
 import { ZetaEventContainer } from "zeta-dom/events";
-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 { always, any, arrRemove, catchAsync, combineFn, createPrivateStore, defineObservableProperty, defineOwnProperty, definePrototype, delay, each, exclude, executeOnce, extend, fill, freeze, grep, hasOwnProperty, 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";
@@ -30,10 +30,7 @@ onAppInit(function () {
         event = e;
         (function updateViewRecursive(next) {
             each(next.children, function (i, v) {
-                e.waitFor(new Promise(function (resolve) {
-                    v.onRender = resolve;
-                    v.forceUpdate();
-                }).then(function () {
+                e.waitFor(v.renderAsync().then(function () {
                     updateViewRecursive(v);
                 }));
             });
@@ -149,6 +146,7 @@ definePrototype(ErrorBoundary, Component, {
 function ViewContainer() {
     Component.apply(this, arguments);
     this.views = [];
+    this.dispose = new Set();
 }
 ViewContainer.contextType = StateContext;
 
@@ -166,6 +164,7 @@ definePrototype(ViewContainer, Component, {
             setImmediate(function () {
                 if (self.currentContext && !self.currentContext.active) {
                     self.unmountView();
+                    combineFn(self.dispose)();
                 }
             });
         };
@@ -180,13 +179,22 @@ definePrototype(ViewContainer, Component, {
         this.currentContext = context;
         (this.props.rootProps.ref || {}).current = context;
     },
+    renderAsync: function () {
+        var self = this;
+        return new Promise(function (resolve) {
+            self.dispose.add(resolve);
+            self.forceUpdate(function () {
+                self.dispose.delete(resolve);
+                resolve();
+            });
+        });
+    },
     render: function () {
         /** @type {any} */
         var self = this;
         if (self.context.active) {
             self.updateView();
         }
-        self.onRender();
         return self.views;
     },
     updateView: function () {
@@ -234,10 +242,10 @@ definePrototype(ViewContainer, Component, {
                     app.emit('pageleave', element, { pathname: context.page.path, view: V }, true);
                     return animateOut(element, 'show').then(function () {
                         self.views[0] = null;
-                        self.forceUpdate();
+                        return self.renderAsync();
                     });
                 });
-                always(promise, delay).then(function () {
+                always(promise || delay(), function () {
                     app.emit('pageenter', element, { pathname: context.page.path, view: V }, true);
                 });
                 self.views.shift();
@@ -264,7 +272,7 @@ definePrototype(ViewContainer, Component, {
         }) || props.defaultView;
     }
 });
-fill(ViewContainer.prototype, 'abort onRender setActive setPage unmountView', noop);
+fill(ViewContainer.prototype, 'abort setActive setPage unmountView', noop);
 
 function normalizePart(value, part) {
     return isUndefinedOrNull(value) || value === '' || value === part ? '' : value[0] === part ? value : part + value;
@@ -273,31 +281,26 @@ function normalizePart(value, part) {
 function getCurrentParams(view, params) {
     var state = routeMap.get(view);
     if (!state.maxParams) {
-        var matchers = exclude(state.matchers, ['remainingSegments']);
+        var maxParams = {};
         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));
+            var routeParams = route.params;
+            var params = {};
+            var invalid = single(routeParams, (v, i) => {
+                if (usedParams[i] && !state.matchers[i]) {
+                    return v < route.minLength;
+                }
+                params[i] = true;
+            }) || single(state.matchers, function (v, i) {
+                return i !== 'remainingSegments' && !(isFunction(v) ? hasOwnProperty(routeParams, i) : v ? route.match(i, v) : routeParams[i] >= route.minLength);
             });
-            return matched ? route : null;
+            return invalid ? null : extend(maxParams, params) && route;
+        });
+        var last = matched.slice(-1)[0] || {};
+        state.maxParams = ['remainingSegments'].concat(keys(maxParams));
+        state.minParams = map(last.params, function (v, i) {
+            return state.params[i] || v >= last.minLength ? null : i;
         });
-        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, [{ remainingSegments: true }].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 extend(pick(app.route, state.minParams), params && pick(params, state.maxParams), state.params);
 }