brew-js-react 0.6.2 → 0.6.4

package/app.js

@@ -1,5 +1,5 @@
 import { combineFn, throwNotFunction } from "zeta-dom/util";
-import { install } from "brew-js/app";
+import { addExtension, install } from "brew-js/app";
 import defaults from "brew-js/defaults";
 
 /** @type {Brew.AppInstance<Brew.WithRouter & Brew.WithI18n>} */
@@ -8,13 +8,17 @@ export var app;
 const appInitCallabcks = [];
 
 export function onAppInit(callback) {
-    appInitCallabcks.push(throwNotFunction(callback));
+    if (app) {
+        callback(app);
+    } else {
+        appInitCallabcks.push(throwNotFunction(callback));
+    }
 }
 
-install('react', function (app_) {
-    // @ts-ignore: type inference issue
+const extension = addExtension(true, 'react2', ['?router', '?i18n'], function (app_) {
     app = app_;
     combineFn(appInitCallabcks)(app);
 });
 
+install('react', extension);
 defaults.react = true;

package/dialog.d.ts

@@ -1,4 +1,18 @@
-export type DialogCloseCallback<T> = (value?: T) => Promise<void>;
+import { ErrorHandler } from "zeta-dom-react";
+
+type PartialRequired<T, K extends keyof T> = Omit<T, K> & { [P in K]-?: T[P] }
+type VoidOrOptional<T> = [Exclude<T, undefined | void>] extends [never] ? void : Exclude<T, undefined | void>;
+
+export type DialogCloseCallback<T> = Zeta.IsAnyOrUnknown<T> extends true ?
+    (value?: any) => Promise<void> :
+    (value: T extends undefined ? void | undefined : T) => Promise<void>;
+export type DialogResult<T> = T extends void ? undefined : Zeta.IsAnyOrUnknown<T> extends true ? any : T | undefined;
+export type DialogOptionsStrict<T, V> = PartialRequired<DialogOptions<T, V>, 'onCommit'>;
+
+/** @deprecated */
+export type DialogBaseProps<T, V = T> = Omit<DialogOptions<T, V | undefined>, 'onRender' | 'wrapper'>;
+/** @deprecated */
+export type DialogRenderComponentProps<T, V = T> = DialogOptions<T, V | undefined> & DialogContext<V | undefined>;
 
 export interface DialogState<T> {
     /**
@@ -8,19 +22,19 @@ export interface DialogState<T> {
     /**
      * Opens the dialog.
      *
-     * It will receive result from {@link DialogState.close} or {@link DialogRenderComponentProps.closeDialog} when the dialog is properly closed.
+     * It will receive result from {@link DialogState.close} or {@link DialogContext.closeDialog} when the dialog is properly closed.
      * Otherwise in cases such as being closed due to lost of focus, result value will always be `undefined`.
      */
-    open: () => Promise<T | undefined>;
+    open(): Promise<DialogResult<T>>;
     /**
      * Closes the dialog, with optional result value.
      *
-     * This method is different from {@link DialogRenderComponentProps.closeDialog} that {@link DialogBaseProps.onCommit} will not be called.
+     * This method is similar to {@link DialogContext.dismissDialog} that {@link DialogOptions.onCommit} will not be called.
      */
-    close: (value?: T) => Promise<void>;
+    close(value?: T): Promise<void>;
 }
 
-export interface DialogBaseProps<T, V = T> {
+export interface DialogOptions<T, V = T | undefined> {
     /**
      * Specifies dialog title.
      * This property is intended to be handled by {@link DialogOptions.onRender} or {@link DialogOptions.wrapper}.
@@ -58,13 +72,13 @@ export interface DialogBaseProps<T, V = T> {
     /**
      * Callback to perform asynchronous action when user confirms the dialog.
      *
-     * The callback will receive value sent from {@link DialogRenderComponentProps.closeDialog},
+     * The callback will receive value sent from {@link DialogContext.commitDialog} or {@link DialogContext.closeDialog},
      * and will send resolved value to promise returned by {@link DialogState.open}.
      *
      * The dialog will be held open until the returned promise resolves.
      * When the promise rejects, the dialog will remain open.
      */
-    onCommit?: (value: V | undefined, context: Zeta.RunAsyncContext) => T | Promise<T> | void;
+    onCommit?: (value: V, context: Zeta.RunAsyncContext) => T | Promise<T> | undefined | void;
     /**
      * Callback to be invoked when dialog has opened.
      */
@@ -73,28 +87,42 @@ export interface DialogBaseProps<T, V = T> {
      * Callback to be invoked when dialog has closed, after outro animation and before React DOM is unmounted.
      */
     onClose?: (root: HTMLElement) => void;
+    /**
+     * A callback that render dialog contents.
+     */
+    onRender: React.VFC<DialogContext<V> & this>;
+    /**
+     * Specifies wrapper component that envelops content from {@link DialogOptions.onRender},
+     * which is useful for reusable layout for dialogs.
+     */
+    wrapper?: React.FC<DialogContext<V> & this & React.PropsWithChildren<{}>>;
 }
 
-export interface DialogRenderComponentProps<T, V = T> extends DialogBaseProps<T, V> {
+export interface DialogContext<V> {
+    /**
+     * Gets an {@link ErrorHandler} object that catches errors emitted from rendered content.
+     */
+    errorHandler: ErrorHandler;
     /**
-     * Commits the dialog, with optional result value.
+     * Commits the dialog with result value.
      *
-     * When {@link DialogBaseProps.onCommit} is specified, it is invoked with the value passed in.
+     * When {@link DialogOptions.onCommit} is specified, it is invoked with the value passed in.
      * Dialog will be closed when async operation is completed, or remain open if the operation failed.
+     *
+     * @deprecated Alias of {@link DialogContext.commitDialog}.
      */
-    closeDialog: (value?: V) => Promise<void>;
-}
-
-export interface DialogOptions<T, V = T> extends DialogBaseProps<T, V> {
+    closeDialog: DialogCloseCallback<V>;
     /**
-     * A callback that render dialog contents.
+     * Commits the dialog with result value.
+     *
+     * When {@link DialogOptions.onCommit} is specified, it is invoked with the value passed in.
+     * Dialog will be closed when async operation is completed, or remain open if the operation failed.
      */
-    onRender: React.FC<DialogRenderComponentProps<T, V> & this>;
+    commitDialog: DialogCloseCallback<V>;
     /**
-     * Specifies wrapper component that envelops content from {@link DialogOptions.onRender},
-     * which is useful for reusable layout for dialogs.
+     * Closes the dialog without invoking {@link DialogOptions.onCommit}.
      */
-    wrapper?: React.FC<React.PropsWithChildren<DialogRenderComponentProps<T, V> & this>>;
+    dismissDialog: DialogCloseCallback<void>;
 }
 
 export interface DialogProps<T, V = T> extends React.PropsWithChildren<DialogBaseProps<T, V>> {
@@ -108,7 +136,15 @@ export interface DialogProps<T, V = T> extends React.PropsWithChildren<DialogBas
  * Creates a controller to render dialog.
  * @param props A dictionary containing options.
  */
-export function createDialog<T = any, V = T>(props: DialogOptions<T, V>): DialogState<T>;
+export function createDialog<T, V>(props: DialogOptionsStrict<T, V>): DialogState<VoidOrOptional<T>>;
+
+export function createDialog<T, V>(props: DialogOptions<T, V>): DialogState<VoidOrOptional<T | V>>;
+
+export function createDialog<T, V = T>(props: DialogOptions<T, V | undefined>): DialogState<VoidOrOptional<T | V>>;
+
+export function createDialog<P extends DialogOptionsStrict<any, any>>(props: P): DialogState<VoidOrOptional<P extends DialogOptionsStrict<infer T, any> ? T : unknown>>;
+
+export function createDialog<P extends DialogOptions<any, any>>(props: P): DialogState<VoidOrOptional<P extends DialogOptions<infer T, infer V> ? T | V : unknown>>;
 
 /**
  * Renders a dialog declaratively.

package/dialog.js

@@ -1,6 +1,7 @@
 import { createElement, StrictMode, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import ReactDOMClient from "@misonou/react-dom-client";
+import { createAsyncScope } from "zeta-dom-react";
 import { either, extend, noop, pick, resolve } from "zeta-dom/util";
 import { containsOrEquals, removeNode } from "zeta-dom/domUtil";
 import dom from "zeta-dom/dom";
@@ -13,6 +14,7 @@ import { closeFlyout, openFlyout } from "brew-js/domAction";
 export function createDialog(props) {
     var root = document.createElement('div');
     var reactRoot = ReactDOMClient.createRoot(root);
+    var scope = createAsyncScope(root);
     var closeDialog = closeFlyout.bind(0, root);
     var promise;
 
@@ -45,16 +47,20 @@ export function createDialog(props) {
                 root.setAttribute('is-modal', '');
             }
             if (props.onRender) {
+                var commitDialog = props.onCommit ? function (value) {
+                    return runAsync(dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
+                } : closeDialog;
                 var dialogProps = extend({}, props, {
-                    closeDialog: props.onCommit ? function (value) {
-                        return runAsync(dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
-                    } : closeDialog
+                    errorHandler: scope.errorHandler,
+                    closeDialog: commitDialog,
+                    commitDialog: commitDialog,
+                    dismissDialog: closeDialog
                 });
                 var content = createElement(props.onRender, dialogProps);
                 if (props.wrapper) {
                     content = createElement(props.wrapper, dialogProps, content);
                 }
-                reactRoot.render(createElement(StrictMode, null, content));
+                reactRoot.render(createElement(StrictMode, null, createElement(scope.Provider, null, content)));
             }
             promise = resolve().then(function () {
                 dom.retainFocus(dom.activeElement, root);

package/dist/brew-js-react.js

@@ -1,14 +1,14 @@
-/*! brew-js-react v0.6.2 | (c) misonou | https://misonou.github.io */
+/*! brew-js-react v0.6.4 | (c) misonou | https://misonou.github.io */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("zeta-dom"), require("react"), require("react-dom"), require("brew-js"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
+		module.exports = factory(require("zeta-dom"), require("brew-js"), require("react"), require("react-dom"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
 	else if(typeof define === 'function' && define.amd)
-		define("brew-js-react", ["zeta-dom", "react", "react-dom", "brew-js", "zeta-dom-react", "waterpipe", "jquery"], factory);
+		define("brew-js-react", ["zeta-dom", "brew-js", "react", "react-dom", "zeta-dom-react", "waterpipe", "jquery"], factory);
 	else if(typeof exports === 'object')
-		exports["brew-js-react"] = factory(require("zeta-dom"), require("react"), require("react-dom"), require("brew-js"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
+		exports["brew-js-react"] = factory(require("zeta-dom"), require("brew-js"), require("react"), require("react-dom"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
 	else
-		root["brew"] = root["brew"] || {}, root["brew"]["react"] = factory(root["zeta"], root["React"], root["ReactDOM"], root["brew"], root["zeta"]["react"], root["waterpipe"], root["jQuery"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE__231__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__33__, __WEBPACK_EXTERNAL_MODULE__760__, __WEBPACK_EXTERNAL_MODULE__402__, __WEBPACK_EXTERNAL_MODULE__87__, __WEBPACK_EXTERNAL_MODULE__914__) => {
+		root["brew"] = root["brew"] || {}, root["brew"]["react"] = factory(root["zeta"], root["brew"], root["React"], root["ReactDOM"], root["zeta"]["react"], root["waterpipe"], root["jQuery"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE__231__, __WEBPACK_EXTERNAL_MODULE__760__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__33__, __WEBPACK_EXTERNAL_MODULE__402__, __WEBPACK_EXTERNAL_MODULE__87__, __WEBPACK_EXTERNAL_MODULE__914__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -255,7 +255,6 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
   pick = _lib$util.pick,
   randomId = _lib$util.randomId,
   resolve = _lib$util.resolve,
-  resolveAll = _lib$util.resolveAll,
   setImmediate = _lib$util.setImmediate,
   setImmediateOnce = _lib$util.setImmediateOnce,
   single = _lib$util.single,
@@ -264,6 +263,39 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
   watch = _lib$util.watch,
   watchable = _lib$util.watchable;
 
+// EXTERNAL MODULE: external {"commonjs":"brew-js","commonjs2":"brew-js","amd":"brew-js","root":"brew"}
+var external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_ = __webpack_require__(760);
+;// CONCATENATED MODULE: ./|umd|/brew-js/app.js
+
+/* harmony default export */ const app = ((/* unused pure expression or super */ null && (lib)));
+var addExtension = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addExtension,
+  install = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.install;
+
+;// CONCATENATED MODULE: ./|umd|/brew-js/defaults.js
+
+var defaults = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.defaults;
+/* harmony default export */ const brew_js_defaults = (defaults);
+;// CONCATENATED MODULE: ./src/app.js
+
+
+
+
+/** @type {Brew.AppInstance<Brew.WithRouter & Brew.WithI18n>} */
+var app_app;
+var appInitCallabcks = [];
+function onAppInit(callback) {
+  if (app_app) {
+    callback(app_app);
+  } else {
+    appInitCallabcks.push(throwNotFunction(callback));
+  }
+}
+var extension = addExtension(true, 'react2', ['?router', '?i18n'], function (app_) {
+  app_app = app_;
+  combineFn(appInitCallabcks)(app_app);
+});
+install('react', extension);
+brew_js_defaults.react = true;
 // EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react","amd":"react","root":"React"}
 var external_commonjs_react_commonjs2_react_amd_react_root_React_ = __webpack_require__(12);
 ;// CONCATENATED MODULE: ./|umd|/react.js
@@ -283,6 +315,20 @@ var Component = external_commonjs_react_commonjs2_react_amd_react_root_React_.Co
 var external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_ = __webpack_require__(33);
 // EXTERNAL MODULE: ./node_modules/@misonou/react-dom-client/fallback.js
 var fallback = __webpack_require__(621);
+// EXTERNAL MODULE: external {"commonjs":"zeta-dom-react","commonjs2":"zeta-dom-react","amd":"zeta-dom-react","root":["zeta","react"]}
+var external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_ = __webpack_require__(402);
+;// CONCATENATED MODULE: ./|umd|/zeta-dom-react.js
+
+var ViewStateProvider = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.ViewStateProvider,
+  classNames = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.classNames,
+  createAsyncScope = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.createAsyncScope,
+  useAsync = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useAsync,
+  useEagerState = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useEagerState,
+  useMemoizedFunction = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useMemoizedFunction,
+  useObservableProperty = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useObservableProperty,
+  useSingleton = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useSingleton,
+  useValueTrigger = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useValueTrigger;
+
 ;// CONCATENATED MODULE: ./|umd|/zeta-dom/domUtil.js
 
 var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.util,
@@ -302,13 +348,10 @@ var reportError = dom.reportError;
 
 var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.dom,
   lock = _lib$dom.lock,
-  notifyAsync = _lib$dom.notifyAsync,
   preventLeave = _lib$dom.preventLeave,
   runAsync = _lib$dom.runAsync,
   subscribeAsync = _lib$dom.subscribeAsync;
 
-// EXTERNAL MODULE: external {"commonjs":"brew-js","commonjs2":"brew-js","amd":"brew-js","root":"brew"}
-var external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_ = __webpack_require__(760);
 ;// CONCATENATED MODULE: ./|umd|/brew-js/domAction.js
 
 var closeFlyout = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.closeFlyout,
@@ -326,12 +369,14 @@ var closeFlyout = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_b
 
 
 
+
 /**
  * @param {Partial<import("./dialog").DialogOptions<any>>} props
  */
 function createDialog(props) {
   var root = document.createElement('div');
   var reactRoot = fallback.createRoot(root);
+  var scope = createAsyncScope(root);
   var closeDialog = closeFlyout.bind(0, root);
   var promise;
   zeta_dom_dom.on(root, {
@@ -362,16 +407,20 @@ function createDialog(props) {
         root.setAttribute('is-modal', '');
       }
       if (props.onRender) {
+        var commitDialog = props.onCommit ? function (value) {
+          return runAsync(zeta_dom_dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
+        } : closeDialog;
         var dialogProps = extend({}, props, {
-          closeDialog: props.onCommit ? function (value) {
-            return runAsync(zeta_dom_dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
-          } : closeDialog
+          errorHandler: scope.errorHandler,
+          closeDialog: commitDialog,
+          commitDialog: commitDialog,
+          dismissDialog: closeDialog
         });
         var content = /*#__PURE__*/createElement(props.onRender, dialogProps);
         if (props.wrapper) {
           content = /*#__PURE__*/createElement(props.wrapper, dialogProps, content);
         }
-        reactRoot.render( /*#__PURE__*/createElement(StrictMode, null, content));
+        reactRoot.render( /*#__PURE__*/createElement(StrictMode, null, /*#__PURE__*/createElement(scope.Provider, null, content)));
       }
       promise = resolve().then(function () {
         zeta_dom_dom.retainFocus(zeta_dom_dom.activeElement, root);
@@ -411,19 +460,6 @@ function Dialog(props) {
   }, [dialog]);
   return /*#__PURE__*/external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.createPortal(props.children, dialog.root);
 }
-// EXTERNAL MODULE: external {"commonjs":"zeta-dom-react","commonjs2":"zeta-dom-react","amd":"zeta-dom-react","root":["zeta","react"]}
-var external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_ = __webpack_require__(402);
-;// CONCATENATED MODULE: ./|umd|/zeta-dom-react.js
-
-var ViewStateProvider = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.ViewStateProvider,
-  classNames = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.classNames,
-  useAsync = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useAsync,
-  useEagerState = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useEagerState,
-  useMemoizedFunction = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useMemoizedFunction,
-  useObservableProperty = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useObservableProperty,
-  useSingleton = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useSingleton,
-  useValueTrigger = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useValueTrigger;
-
 ;// CONCATENATED MODULE: ./|umd|/zeta-dom/events.js
 
 var EventContainer = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.EventContainer;
@@ -431,39 +467,14 @@ var EventContainer = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_
 ;// CONCATENATED MODULE: ./|umd|/brew-js/util/common.js
 
 var getQueryParam = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.getQueryParam,
-  setQueryParam = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.setQueryParam;
+  setQueryParam = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.setQueryParam,
+  toQueryString = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.toQueryString;
 
 ;// CONCATENATED MODULE: ./|umd|/brew-js/util/path.js
 
 var parsePath = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.parsePath,
   removeQueryAndHash = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.removeQueryAndHash;
 
-;// CONCATENATED MODULE: ./|umd|/brew-js/app.js
-
-/* harmony default export */ const app = ((/* unused pure expression or super */ null && (lib)));
-var install = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.install;
-
-;// CONCATENATED MODULE: ./|umd|/brew-js/defaults.js
-
-var defaults = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.defaults;
-/* harmony default export */ const brew_js_defaults = (defaults);
-;// CONCATENATED MODULE: ./src/app.js
-
-
-
-
-/** @type {Brew.AppInstance<Brew.WithRouter & Brew.WithI18n>} */
-var app_app;
-var appInitCallabcks = [];
-function onAppInit(callback) {
-  appInitCallabcks.push(throwNotFunction(callback));
-}
-install('react', function (app_) {
-  // @ts-ignore: type inference issue
-  app_app = app_;
-  combineFn(appInitCallabcks)(app_app);
-});
-brew_js_defaults.react = true;
 ;// CONCATENATED MODULE: ./|umd|/brew-js/anim.js
 
 var animateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.animateIn,
@@ -510,6 +521,7 @@ onAppInit(function () {
       });
     })(rootState);
   });
+  rootState.setPage(app_app.page);
 });
 function ViewContext(view, page, parent) {
   var self = this;
@@ -545,6 +557,13 @@ function ErrorBoundary() {
 }
 ErrorBoundary.contextType = StateContext;
 definePrototype(ErrorBoundary, Component, {
+  componentDidMount: function componentDidMount() {
+    var self = this;
+    self.componentWillUnmount = watch(self.context, 'page', function () {
+      self.state.error = null;
+      self.forceUpdate();
+    });
+  },
   componentDidCatch: function componentDidCatch(error) {
     var self = this;
     if (errorView && !self.state.error) {
@@ -552,33 +571,37 @@ definePrototype(ErrorBoundary, Component, {
         error: 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();
+      self.props.onLoad();
+      reportError(error, self.context.container);
     }
   },
   render: function render() {
     var self = this;
-    var props = {
-      view: self.context.view,
-      error: self.state.error,
-      reset: self.reset.bind(self)
-    };
-    var onComponentLoaded = self.props.onComponentLoaded;
-    if (props.error) {
-      return /*#__PURE__*/createElement(errorView, {
-        onComponentLoaded: onComponentLoaded,
-        viewProps: props
+    var context = self.context;
+    if (!context.container) {
+      setImmediate(function () {
+        self.forceUpdate();
       });
+      return null;
     }
-    return /*#__PURE__*/createElement(props.view, {
-      onComponentLoaded: onComponentLoaded,
-      viewProps: self.props.viewProps
-    });
+    var error = self.state.error;
+    var scope = self.scope || (self.scope = createAsyncScope(context.container));
+    var childProps = {
+      onLoad: self.props.onLoad,
+      onError: self.componentDidCatch.bind(self),
+      viewProps: error ? {
+        view: context.view,
+        error: error,
+        reset: self.reset.bind(self)
+      } : {
+        errorHandler: scope.errorHandler,
+        navigationType: view_event.navigationType,
+        viewContext: context,
+        viewData: context.page.data || {}
+      }
+    };
+    return /*#__PURE__*/createElement(scope.Provider, null, /*#__PURE__*/createElement(error ? errorView : context.view, childProps));
   },
   reset: function reset() {
     this.setState({
@@ -637,11 +660,11 @@ definePrototype(ViewContainer, Component, {
       (self.unmountView || noop)(true);
       var context = new ViewContext(V, app_app.page, self.context);
       var state = routeMap.get(V);
-      var onComponentLoaded;
+      var onLoad;
       var promise = new Promise(function (resolve) {
-        onComponentLoaded = resolve;
+        onLoad = resolve;
       });
-      var unmountView = onComponentLoaded;
+      var unmountView = onLoad;
       var initElement = executeOnce(function (element) {
         context.container = element;
         promise.then(function () {
@@ -664,15 +687,7 @@ definePrototype(ViewContainer, Component, {
             }, true);
           }
         });
-        notifyAsync(element, promise);
       });
-      var viewProps = function viewProps() {
-        return freeze({
-          navigationType: view_event.navigationType,
-          viewContext: context,
-          viewData: context.page.data || {}
-        });
-      };
       var view = /*#__PURE__*/createElement(StateContext.Provider, {
         key: state.id,
         value: context
@@ -680,8 +695,7 @@ definePrototype(ViewContainer, Component, {
         ref: initElement,
         'brew-view': ''
       }), /*#__PURE__*/createElement(ErrorBoundary, {
-        onComponentLoaded: onComponentLoaded,
-        viewProps: viewProps
+        onLoad: onLoad
       }))));
       extend(self, _(context), {
         currentContext: context,
@@ -703,6 +717,9 @@ definePrototype(ViewContainer, Component, {
     return any(props.views, isViewMatched) || props.defaultView;
   }
 });
+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);
   if (!state.maxParams) {
@@ -753,33 +770,23 @@ 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 {
+      useEffect(props.onLoad, []);
+      return children;
     }
-    var state = useAsync(function () {
-      return promise;
-    }, !!promise)[1];
-    var loaded = !promise || !state.loading;
-    useEffect(function () {
-      // 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, props.onError);
+    })[0];
     useEffect(function () {
-      if (loaded) {
-        setImmediate(props.onComponentLoaded);
+      if (component) {
+        props.onLoad();
       }
-    }, [loaded]);
-    if (state.error) {
-      throw state.error;
-    }
-    return children || (state.value ? /*#__PURE__*/createElement(state.value["default"], viewProps[0]) : null);
+    }, [component]);
+    return component ? /*#__PURE__*/createElement(component["default"], props.viewProps) : null;
   };
 }
 function useViewContext() {
@@ -844,10 +851,12 @@ function renderView() {
   });
 }
 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_app.route.getPath(getCurrentParams(view, params));
+  return (routeMap.has(view) ? app_app.route.getPath(getCurrentParams(view, params)) : '/') + suffix;
 }
 function linkTo(view, params) {
   return app_app.toHref(resolvePath(view, params));
@@ -1606,6 +1615,13 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
   onVisibilityChanged: function onVisibilityChanged(callback) {
     return this.watch('visible', callback);
   },
+  whenVisible: function whenVisible(effect) {
+    var dispose = [];
+    dispose[0] = this.watch('visible', function (visible) {
+      dispose[1] = (visible ? isFunction(effect()) : dispose[1] && void dispose[1]()) || noop;
+    }, true);
+    return combineFn(dispose);
+  },
   initElement: function initElement(element, state) {
     var self = this;
     if (self.elements()[1]) {
@@ -1850,6 +1866,7 @@ function useMixinRef(mixin) {
 
 ;// CONCATENATED MODULE: ./src/index.js
 
+
 /* harmony default export */ const src = ((/* unused pure expression or super */ null && (brew)));