brew-js-react 0.2.4 → 0.2.7

package/dist/brew-js-react.js

@@ -210,7 +210,8 @@ var _defaultExport = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_roo
 /* harmony default export */ const app = (_defaultExport);
 var install = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.install,
     addExtension = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addExtension,
-    addDetect = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addDetect;
+    addDetect = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addDetect,
+    isElementActive = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.isElementActive;
 
 ;// CONCATENATED MODULE: ./src/include/brew-js/app.js
 
@@ -244,8 +245,10 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     any = _lib$util.any,
     single = _lib$util.single,
     kv = _lib$util.kv,
+    fill = _lib$util.fill,
     pick = _lib$util.pick,
     exclude = _lib$util.exclude,
+    mapObject = _lib$util.mapObject,
     mapGet = _lib$util.mapGet,
     mapRemove = _lib$util.mapRemove,
     arrRemove = _lib$util.arrRemove,
@@ -262,6 +265,7 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     setImmediateOnce = _lib$util.setImmediateOnce,
     throwNotFunction = _lib$util.throwNotFunction,
     errorWithCode = _lib$util.errorWithCode,
+    isErrorWithCode = _lib$util.isErrorWithCode,
     util_keys = _lib$util.keys,
     values = _lib$util.values,
     util_hasOwnProperty = _lib$util.hasOwnProperty,
@@ -293,8 +297,12 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     reject = _lib$util.reject,
     always = _lib$util.always,
     resolveAll = _lib$util.resolveAll,
+    retryable = _lib$util.retryable,
+    deferrable = _lib$util.deferrable,
     catchAsync = _lib$util.catchAsync,
-    setPromiseTimeout = _lib$util.setPromiseTimeout;
+    setPromiseTimeout = _lib$util.setPromiseTimeout,
+    delay = _lib$util.delay,
+    makeAsync = _lib$util.makeAsync;
 
 ;// CONCATENATED MODULE: ./src/include/zeta-dom/util.js
 
@@ -514,6 +522,20 @@ var animateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_bre
 
 ;// CONCATENATED MODULE: ./src/include/brew-js/anim.js
 
+;// CONCATENATED MODULE: ./tmp/brew-js/util/path.js
+
+var setBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.setBaseUrl,
+    combinePath = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.combinePath,
+    normalizePath = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.normalizePath,
+    removeQueryAndHash = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.removeQueryAndHash,
+    withBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.withBaseUrl,
+    toAbsoluteUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.toAbsoluteUrl,
+    toRelativeUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.toRelativeUrl,
+    isSubPathOf = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.isSubPathOf,
+    toSegments = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.toSegments;
+
+;// CONCATENATED MODULE: ./src/include/brew-js/util/path.js
+
 ;// CONCATENATED MODULE: ./src/view.js
 
 
@@ -523,6 +545,7 @@ var animateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_bre
 
 
 
+
 var view_root = zeta_dom_dom.root;
 var routeMap = new Map();
 var usedParams = {};
@@ -530,32 +553,23 @@ var sortedViews = [];
 var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(Object.freeze({
   active: true
 }));
-var stateId;
 
 function ViewContainer() {
-  /** @type {any} */
-  var self = this;
-  external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(self, arguments);
-  self.mounted = false;
-
-  if (!stateId) {
-    stateId = history.state;
-    app_app.on('navigate', function () {
-      stateId = history.state;
-    });
-  }
-
-  self.componentWillUnmount = app_app.on('navigate', function () {
-    if (self.mounted && self.getViewComponent()) {
-      self.isForceUpdate = true;
-      self.forceUpdate();
-    }
-  });
+  external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(this, arguments);
+  this.stateId = history.state;
 }
 
 definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react_root_React_.Component, {
   componentDidMount: function componentDidMount() {
-    this.mounted = true;
+    /** @type {any} */
+    var self = this;
+    self.componentWillUnmount = combineFn(watch(app_app.route, function () {
+      self.setActive(self.getViewComponent() === self.currentViewComponent);
+    }), app_app.on('beforepageload', function (e) {
+      self.waitFor = e.waitFor;
+      self.stateId = history.state;
+      self.forceUpdate();
+    }));
   },
   componentDidCatch: function componentDidCatch(error) {
     zeta_dom_dom.emit('error', this.parentElement || view_root, {
@@ -565,22 +579,32 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
   render: function render() {
     /** @type {any} */
     var self = this;
-    var resolve;
-    var promise = new Promise(function (_resolve) {
-      resolve = _resolve;
-    });
+
+    if (history.state !== self.stateId) {
+      return self.lastChild || null;
+    }
+
     var V = self.getViewComponent();
 
+    if (V) {
+      // 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(V, getCurrentParams(V, true));
+
+      if (targetPath !== removeQueryAndHash(app_app.path)) {
+        app_app.navigate(targetPath, true);
+      }
+    }
+
     if (V && V !== self.currentViewComponent) {
-      self.currentViewComponent = V;
+      var prevElement = self.currentElement;
 
-      if (self.currentView && self.currentElement) {
-        var prevPath = self.currentPath;
-        var prevElement = self.currentElement;
+      if (prevElement) {
+        self.setActive(false);
         self.prevView = self.currentView;
         self.currentElement = undefined;
         app_app.emit('pageleave', prevElement, {
-          pathname: prevPath
+          pathname: self.currentPath
         }, true);
         animateOut(prevElement, 'show').then(function () {
           self.prevView = undefined;
@@ -588,15 +612,19 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         });
       }
 
-      var providerProps = {
-        key: routeMap.get(V).id,
-        value: {
-          view: V
-        }
+      var resolve;
+      var promise = new Promise(function (resolve_) {
+        resolve = resolve_;
+      });
+      var state = {
+        view: V
       };
-      var view = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(StateContext.Provider, providerProps, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewStateContainer, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(V, {
+      var view = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(StateContext.Provider, {
+        key: routeMap.get(V).id,
+        value: state
+      }, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewStateContainer, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(V, {
         rootProps: self.props.rootProps,
-        onComponentLoaded: function onComponentLoaded(element) {
+        onComponentLoaded: executeOnce(function (element) {
           self.currentElement = element;
           self.parentElement = element.parentElement;
           util_setImmediate(function () {
@@ -606,42 +634,25 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
               pathname: app_app.path
             }, true);
           });
-        }
+        })
       })));
-      defineGetterProperty(providerProps.value, 'active', function () {
-        return self.currentView === view;
+      extend(self, {
+        currentPath: app_app.path,
+        currentView: view,
+        currentViewComponent: V,
+        setActive: defineObservableProperty(state, 'active', true, true)
       });
-      self.currentPath = app_app.path;
-      self.currentView = view;
-    } else {
-      if (self.isForceUpdate) {
-        self.isForceUpdate = false;
-        app_app.emit('pageenter', self.currentElement, {
-          pathname: app_app.path
-        }, true);
-      }
-
-      resolve();
+      (self.waitFor || noop)(promise);
+      notifyAsync(self.parentElement || view_root, promise);
     }
 
-    notifyAsync(self.parentElement || view_root, promise);
-    return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment, null, self.prevView, self.currentView);
+    var child = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment, null, self.prevView, self.currentView);
+    self.lastChild = child;
+    return child;
   },
   getViewComponent: function getViewComponent() {
     var props = this.props;
-    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 !== app_app.path) {
-        app_app.navigate(targetPath, true);
-      }
-    }
-
-    return matched;
+    return any(props.views, isViewMatched) || props.defaultView;
   }
 });
 
@@ -723,7 +734,7 @@ function registerView(factory, routeParams) {
     }
 
     return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement('div', extend({}, props.rootProps, {
-      ref: ref,
+      ref: (0,external_zeta_dom_react_.combineRef)(ref, state[1].elementRef),
       children: state[0] && /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(state[0]["default"])
     }));
   };
@@ -789,7 +800,8 @@ function getCurrentStates() {
   return states[history.state] || (states[history.state] = {});
 }
 
-function ViewState(value) {
+function ViewState(key, value) {
+  this.key = key;
   this.value = value;
 }
 
@@ -828,9 +840,13 @@ function useRouteParam(name, defaultValue) {
     var setValue = function setValue() {
       var current = route[name] || '';
 
-      if (container.active && current !== ref.current) {
-        ref.current = current;
-        forceUpdate({});
+      if (current !== ref.current) {
+        if (container.active) {
+          ref.current = current;
+          forceUpdate({});
+        } else {
+          watch(container, 'active', setValue);
+        }
       }
     }; // route parameter might be changed after state initialization and before useEffect hook is called
 
@@ -871,20 +887,21 @@ function ViewStateContainer(props) {
     return {
       getState: function getState(uniqueId, key) {
         var cur = getCurrentStates();
-        var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(cur[key] && cur[key].value));
+        var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(key, cur[key] && cur[key].value));
 
         if (container.active) {
           var stateId = state.stateId;
 
-          if (stateId && stateId !== history.state) {
+          if (stateId && (stateId !== history.state || key !== state.key)) {
             var newValue = cur[key] && cur[key].value;
             emitter.emit('popstate', state, {
               newValue: newValue
             }); // detach value in previous history state from current one
 
-            var previous = new ViewState(state.value);
-            states[stateId][key] = previous;
+            var previous = new ViewState(state.key, state.value);
+            states[stateId][previous.key] = previous;
             state.value = newValue;
+            state.key = key;
           }
 
           state.stateId = history.state;
@@ -1093,6 +1110,7 @@ function StatefulMixin() {
   Mixin.call(this);
 
   _(this, {
+    elements: new WeakSet(),
     states: {},
     prefix: '',
     counter: 0
@@ -1125,8 +1143,9 @@ definePrototype(StatefulMixin, Mixin, {
     var self = this;
     var state = self.state;
     return function (current) {
-      if (current && current !== state.element) {
-        state.element = current;
+      state.element = current;
+
+      if (current && setAdd(_(self).elements, current)) {
         self.initElement(current, state);
       }
     };
@@ -1148,11 +1167,10 @@ definePrototype(StatefulMixin, Mixin, {
     var self = this;
     var clone = inherit(Object.getPrototypeOf(self), self);
 
-    _(clone, {
-      states: _(self).states,
+    _(clone, extend({}, _(self), {
       prefix: randomId() + '.',
       counter: 0
-    });
+    }));
 
     return clone;
   },
@@ -1339,18 +1357,6 @@ definePrototype(ErrorHandlerMixin, StatefulMixin, {
     });
   }
 });
-;// CONCATENATED MODULE: ./tmp/brew-js/var.js
-
-var getVarScope = undefined.getVarScope,
-    setVar = undefined.setVar,
-    declareVar = undefined.declareVar,
-    resetVar = undefined.resetVar,
-    getVar = undefined.getVar,
-    evaluate = undefined.evaluate,
-    evalAttr = undefined.evalAttr;
-
-;// CONCATENATED MODULE: ./src/include/brew-js/var.js
-
 ;// CONCATENATED MODULE: ./src/mixins/FlyoutToggleMixin.js
 
 
@@ -1379,9 +1385,8 @@ definePrototype(FlyoutToggleMixin, ClassNameMixin, {
 
 
 
-
 var FlyoutMixinSuper = ClassNameMixin.prototype;
-var varname = '__flyout' + randomId();
+var valueMap = new WeakMap();
 var flyoutMixinCounter = 0;
 function FlyoutMixin() {
   var self = this;
@@ -1422,7 +1427,9 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     });
   },
   open: function open(value) {
-    return openFlyout(this.elements()[0], kv(varname, value));
+    var element = this.elements()[0];
+    valueMap.set(element, value);
+    return openFlyout(element);
   },
   close: function close(value) {
     return closeFlyout(this.elements()[0], value);
@@ -1431,7 +1438,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     var element = this.elements()[0];
     return this.onToggleState(function (opened) {
       if (opened) {
-        return callback(getVar(element, varname));
+        return callback(valueMap.get(element));
       }
     });
   },
@@ -1447,7 +1454,6 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
 
     if (!element.id) {
       element.id = 'flyout-' + ++flyoutMixinCounter;
-      declareVar(element, varname, undefined);
     }
 
     app_app.on(element, {