brew-js-react 0.6.3 → 0.6.5

package/dist/brew-js-react.js

@@ -1,4 +1,4 @@
-/*! brew-js-react v0.6.3 | (c) misonou | https://misonou.github.io */
+/*! brew-js-react v0.6.5 | (c) misonou | https://misonou.github.io */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("zeta-dom"), require("brew-js"), require("react"), require("react-dom"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
@@ -181,6 +181,7 @@ __webpack_require__.d(__webpack_exports__, {
   ScrollableMixin: () => (/* reexport */ ScrollableMixin),
   StatefulMixin: () => (/* reexport */ StatefulMixin),
   UnmanagedClassNameMixin: () => (/* reexport */ UnmanagedClassNameMixin),
+  ViewContext: () => (/* reexport */ ViewContext),
   ViewStateContainer: () => (/* reexport */ ViewStateContainer),
   createDialog: () => (/* reexport */ createDialog),
   isViewMatched: () => (/* reexport */ isViewMatched),
@@ -220,6 +221,7 @@ var external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_ = __we
 ;// CONCATENATED MODULE: ./|umd|/zeta-dom/util.js
 
 var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.util,
+  always = _lib$util.always,
   any = _lib$util.any,
   arrRemove = _lib$util.arrRemove,
   catchAsync = _lib$util.catchAsync,
@@ -301,12 +303,12 @@ var external_commonjs_react_commonjs2_react_amd_react_root_React_ = __webpack_re
 ;// CONCATENATED MODULE: ./|umd|/react.js
 
 var Component = external_commonjs_react_commonjs2_react_amd_react_root_React_.Component,
-  Fragment = external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment,
   StrictMode = external_commonjs_react_commonjs2_react_amd_react_root_React_.StrictMode,
   createContext = external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext,
   createElement = external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement,
   useContext = external_commonjs_react_commonjs2_react_amd_react_root_React_.useContext,
   useEffect = external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect,
+  useLayoutEffect = external_commonjs_react_commonjs2_react_amd_react_root_React_.useLayoutEffect,
   useMemo = external_commonjs_react_commonjs2_react_amd_react_root_React_.useMemo,
   useRef = external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef,
   useState = external_commonjs_react_commonjs2_react_amd_react_root_React_.useState;
@@ -315,6 +317,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,
@@ -355,12 +371,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, {
@@ -391,16 +409,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);
@@ -440,19 +462,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;
@@ -460,7 +469,8 @@ 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
 
@@ -482,6 +492,7 @@ var animateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_bre
 
 
 
+
 var _ = createPrivateStore();
 var root = zeta_dom_dom.root;
 var routeMap = new Map();
@@ -495,7 +506,9 @@ var rootState = _(rootContext);
 var StateContext = /*#__PURE__*/createContext(rootContext);
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
-var view_event = {};
+var view_event = {
+  waitFor: noop
+};
 onAppInit(function () {
   app_app.on('beforepageload', function (e) {
     rootState.setPage(app_app.page);
@@ -532,86 +545,109 @@ function ViewContext(view, page, parent) {
     });
   });
 }
+defineOwnProperty(ViewContext, 'root', rootContext, true);
 definePrototype(ViewContext, {
   getChildren: function getChildren() {
     return map(_(this).children, function (v) {
       return v.currentContext;
     });
   },
+  setErrorView: function setErrorView(errorView, error) {
+    var wrapper = _(this).wrapper;
+    return wrapper && errorView && !wrapper.setState({
+      error: error,
+      errorView: errorView
+    });
+  },
   on: function on(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 componentDidMount() {
+    var self = this;
+    self.componentWillUnmount = watch(self.props.context, 'page', function () {
+      self.state.errorView = null;
+      self.forceUpdate();
+    });
+  },
   componentDidCatch: function componentDidCatch(error) {
     var self = this;
-    if (errorView && !self.state.error) {
+    if (errorView && self.state.errorView !== errorView) {
       self.setState({
-        error: error
+        error: error,
+        errorView: 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 render() {
     var self = this;
-    if (!self.context.container) {
+    var context = self.props.context;
+    if (!context.container) {
       setImmediate(function () {
+        extend(self, createAsyncScope(context.container));
+        zeta_dom_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 /*#__PURE__*/createElement(errorView, {
-        onComponentLoaded: onComponentLoaded,
-        onError: onError,
-        viewProps: props
-      });
+    var errorView = self.state.errorView;
+    if (errorView) {
+      self.props.onLoad();
+      return /*#__PURE__*/createElement(self.Provider, null, /*#__PURE__*/createElement(self.state.errorView, {
+        view: context.view,
+        error: self.state.error,
+        reset: self.reset.bind(self)
+      }));
     }
-    return /*#__PURE__*/createElement(props.view, {
-      onComponentLoaded: onComponentLoaded,
-      onError: onError,
-      viewProps: self.props.viewProps
-    });
+    var onError = self.componentDidCatch.bind(self);
+    var viewProps = {
+      errorHandler: self.errorHandler,
+      navigationType: view_event.navigationType,
+      viewContext: context,
+      viewData: context.page.data || {}
+    };
+    return /*#__PURE__*/createElement(self.Provider, null, /*#__PURE__*/createElement(context.view, extend({
+      viewProps: viewProps,
+      onError: onError
+    }, self.props)));
   },
   reset: function reset() {
     this.setState({
-      error: null
+      errorView: null
     });
   }
 });
 function ViewContainer() {
   Component.apply(this, arguments);
+  this.views = [];
 }
 ViewContainer.contextType = StateContext;
 definePrototype(ViewContainer, Component, {
-  setActive: noop,
   componentDidMount: function componentDidMount() {
     var self = this;
     var parent = _(self.context).children;
     var unwatch = watch(app_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();
         }
       });
@@ -625,13 +661,13 @@ definePrototype(ViewContainer, Component, {
     if (self.context.active) {
       self.updateView();
     }
-    (self.onRender || noop)();
-    return /*#__PURE__*/createElement(Fragment, null, self.prevView, self.currentView);
+    self.onRender();
+    return self.views;
   },
   updateView: function updateView() {
     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
@@ -641,75 +677,81 @@ 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_app.page);
+      return;
+    }
+    view_event.waitFor(new Promise(function (resolve) {
       var context = new ViewContext(V, app_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 unmountView() {
-              self.prevView = self.currentView;
-              app_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_app.emit('pageenter', element, {
-              pathname: context.page.path,
-              view: V
-            }, true);
-          }
-        });
+        defineOwnProperty(context, 'container', element, true);
+        self.currentContext = self.currentContext || context;
       });
-      var viewProps = function viewProps() {
-        return freeze({
-          navigationType: view_event.navigationType,
-          viewContext: context,
-          viewData: context.page.data || {}
+      var onLoad = executeOnce(function () {
+        var element = context.container;
+        var promise = self.unmountView();
+        self.unmountView = executeOnce(function () {
+          state.rendered--;
+          self.setActive(false);
+          app_app.emit('pageleave', element, {
+            pathname: context.page.path,
+            view: V
+          }, true);
+          return animateOut(element, 'show').then(function () {
+            self.views[0] = null;
+            self.forceUpdate();
+          });
         });
-      };
-      var view = /*#__PURE__*/createElement(StateContext.Provider, {
+        always(promise, delay).then(function () {
+          app_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();
+      });
+      context.on('error', function () {
+        return (rootProps.onError || noop).apply(this, arguments);
+      });
+      self.abort = resolve;
+      self.views[2] = /*#__PURE__*/createElement(StateContext.Provider, {
         key: state.id,
         value: context
-      }, /*#__PURE__*/createElement(ViewStateContainer, null, /*#__PURE__*/createElement('div', extend({}, self.props.rootProps, {
+      }, /*#__PURE__*/createElement(ViewStateContainer, null, /*#__PURE__*/createElement('div', extend(exclude(rootProps, ['loader', 'onError']), {
         ref: initElement,
         'brew-view': ''
       }), /*#__PURE__*/createElement(ErrorBoundary, {
-        onComponentLoaded: onComponentLoaded,
-        viewProps: viewProps
+        onLoad: onLoad,
+        context: context,
+        self: self,
+        loader: rootProps.loader
       }))));
-      extend(self, _(context), {
-        currentContext: context,
-        currentView: view,
-        currentViewComponent: V,
-        unmountView: executeOnce(function () {
-          self.setActive(false);
-          state.rendered--;
-          unmountView();
-        })
-      });
-      state.rendered++;
-      (view_event.waitFor || noop)(promise);
-    }
-    (self.setPage || noop)(app_app.page);
+    }));
   },
   getViewComponent: function getViewComponent() {
     var props = this.props;
-    return any(props.views, isViewMatched) || props.defaultView;
+    return any(props.views, function (v) {
+      return matchViewParams(v, app_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);
   if (!state.maxParams) {
@@ -760,38 +802,32 @@ 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 ? /*#__PURE__*/createElement(state.value["default"], viewProps[0]) : null);
+    })[0];
+    if (component) {
+      props.onLoad();
+    }
+    return component ? /*#__PURE__*/createElement(component["default"], props.viewProps) : props.self.currentContext === props.context && props.loader || null;
   };
 }
 function useViewContext() {
   return useContext(StateContext);
 }
 function isViewMatched(view) {
-  return matchViewParams(view, app_app.route);
+  var route = app_app.route;
+  return matchViewParams(view, route) && resolvePath(view, route) === route.toString();
 }
 function isViewRendered(view) {
   return !!(routeMap.get(view) || '').rendered;
@@ -830,7 +866,7 @@ function registerView(factory, routeParams) {
   return Component;
 }
 function registerErrorView(factory) {
-  errorView = createViewComponent(factory);
+  errorView = throwNotFunction(factory);
 }
 function renderView() {
   var views = makeArray(arguments);
@@ -849,10 +885,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));