brew-js-react 0.6.2 → 0.6.3

package/view.d.ts

@@ -4,6 +4,7 @@ import { useRouteState } from "./hooks";
 
 export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type ViewComponent<P> = React.FC<ViewProps<P>>;
+export type ViewParamMatchers = Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>;
 /**
  * @deprecated Alias of {@link ViewContext}
  */
@@ -108,21 +109,14 @@ export function useViewContext(): ViewContext;
  */
 export function useViewContainerState(): ViewContainerState;
 
-/**
- * Registers view component with specific route paramters.
- * Route parameters will be matched against current route state by {@link renderView}.
- * @param factory A callback that returns a promise resolving a React component, typically using async `import`.
- * @param params A dictionary containing route parameters.
- */
-export function registerView<P>(factory: () => Promise<{ default: React.ComponentType<P> }>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P extends ViewProps<infer S> ? S : {}>;
 
 /**
  * Registers view component with specific route paramters.
  * Route parameters will be matched against current route state by {@link renderView}.
- * @param component A React component.
+ * @param component A React component, or a callback that returns a promise resolving a React component, typically using async `import`.
  * @param params A dictionary containing route parameters.
  */
-export function registerView<P>(component: React.ComponentType<P>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P extends ViewProps<infer S> ? S : {}>;
+export function registerView<P = ViewProps>(component: React.ComponentType<P> | (() => Promise<{ default: React.ComponentType<P>; }>), params: ViewParamMatchers): ViewComponent<P extends ViewProps<infer S> ? S : {}>;
 
 /**
  * Registers a default error view to be displayed when view component failed to render.

package/view.js

@@ -1,9 +1,8 @@
 import { Component, Fragment, createContext, createElement, useContext, useEffect, useState } from "react";
 import { useAsync } from "zeta-dom-react";
 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";
+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 { animateIn, animateOut } from "brew-js/anim";
 import { removeQueryAndHash } from "brew-js/util/path";
 import { app, onAppInit } from "./app.js";
@@ -39,6 +38,7 @@ onAppInit(function () {
             });
         })(rootState);
     });
+    rootState.setPage(app.page);
 });
 
 function ViewContext(view, page, parent) {
@@ -83,27 +83,30 @@ definePrototype(ErrorBoundary, Component, {
         if (errorView && !self.state.error) {
             self.setState({ error });
         } else {
-            // emit error in next tick as ref callback may yet to be invoked
-            // if error is thrown synchronously in first render
-            setImmediate(function () {
-                reportError(error, self.context.container);
-            });
             // ensure promise sent to beforepageload event is resolved
             self.props.onComponentLoaded();
+            reportError(error, self.context.container);
         }
     },
     render: function () {
         var self = this;
+        if (!self.context.container) {
+            setImmediate(function () {
+                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, viewProps: props });
+            return createElement(errorView, { onComponentLoaded, onError, viewProps: props });
         }
-        return createElement(props.view, { onComponentLoaded, viewProps: self.props.viewProps });
+        return createElement(props.view, { onComponentLoaded, onError, viewProps: self.props.viewProps });
     },
     reset: function () {
         this.setState({ error: null });
@@ -184,7 +187,6 @@ definePrototype(ViewContainer, Component, {
                         app.emit('pageenter', element, { pathname: context.page.path, view: V }, true);
                     }
                 });
-                notifyAsync(element, promise);
             });
             var viewProps = function () {
                 return freeze({
@@ -278,10 +280,11 @@ function createViewComponent(factory) {
             catchAsync(promise);
         }
         var state = useAsync(function () {
-            return promise;
+            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);
@@ -292,9 +295,6 @@ function createViewComponent(factory) {
                 setImmediate(props.onComponentLoaded);
             }
         }, [loaded]);
-        if (state.error) {
-            throw state.error;
-        }
         return children || (state.value ? createElement(state.value.default, viewProps[0]) : null);
     };
 }