brew-js-react 0.4.0 → 0.4.2

package/dist/brew-js-react.js

@@ -1,4 +1,4 @@
-/*! brew-js-react v0.4.0 | (c) misonou | https://hackmd.io/@misonou/brew-js-react */
+/*! brew-js-react v0.4.2 | (c) misonou | https://hackmd.io/@misonou/brew-js-react */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), (function webpackLoadOptionalExternalModule() { try { return require("react-dom/client"); } catch(e) {} }()), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
@@ -196,6 +196,7 @@ __webpack_require__.d(src_namespaceObject, {
   "FocusStateMixin": () => (FocusStateMixin),
   "LoadingStateMixin": () => (LoadingStateMixin),
   "Mixin": () => (Mixin),
+  "ScrollIntoViewMixin": () => (ScrollIntoViewMixin),
   "ScrollableMixin": () => (ScrollableMixin),
   "StatefulMixin": () => (StatefulMixin),
   "ViewStateContainer": () => (ViewStateContainer),
@@ -214,6 +215,7 @@ __webpack_require__.d(src_namespaceObject, {
   "useAnimateMixin": () => (useAnimateMixin),
   "useAnimateSequenceMixin": () => (useAnimateSequenceMixin),
   "useAppReady": () => (useAppReady),
+  "useAppReadyState": () => (useAppReadyState),
   "useFlyoutMixin": () => (useFlyoutMixin),
   "useFocusStateMixin": () => (useFocusStateMixin),
   "useLanguage": () => (useLanguage),
@@ -222,8 +224,10 @@ __webpack_require__.d(src_namespaceObject, {
   "useMixinRef": () => (useMixinRef),
   "useRouteParam": () => (useRouteParam),
   "useRouteState": () => (useRouteState),
+  "useScrollIntoViewMixin": () => (useScrollIntoViewMixin),
   "useScrollableMixin": () => (useScrollableMixin),
-  "useViewContainerState": () => (useViewContainerState)
+  "useViewContainerState": () => (useViewContext),
+  "useViewContext": () => (useViewContext)
 });
 
 // EXTERNAL MODULE: external {"commonjs":"brew-js","commonjs2":"brew-js","amd":"brew-js","root":"brew"}
@@ -363,6 +367,7 @@ var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_do
     removeNode = domUtil_lib$util.removeNode,
     getClass = domUtil_lib$util.getClass,
     setClass = domUtil_lib$util.setClass,
+    getSafeAreaInset = domUtil_lib$util.getSafeAreaInset,
     getScrollOffset = domUtil_lib$util.getScrollOffset,
     getScrollParent = domUtil_lib$util.getScrollParent,
     getContentRect = domUtil_lib$util.getContentRect,
@@ -583,10 +588,13 @@ var setBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_br
 
 
 
+
+
 var root = zeta_dom_dom.root;
 var routeMap = new Map();
 var usedParams = {};
 var sortedViews = [];
+var emitter = new ZetaEventContainer();
 var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(Object.freeze({
   container: root,
   active: true
@@ -601,6 +609,16 @@ onAppInit(function () {
   });
 });
 
+function ViewContext(view) {
+  defineOwnProperty(this, 'view', view, true);
+}
+
+definePrototype(ViewContext, {
+  on: function on(event, handler) {
+    return emitter.add(this, event, handler);
+  }
+});
+
 function ErrorBoundary() {
   external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(this, arguments);
   this.state = {};
@@ -725,13 +743,12 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         });
         notifyAsync(element, promise);
       });
+      var state = new ViewContext(V);
       var viewProps = freeze({
         navigationType: view_event.navigationType,
+        viewContext: state,
         viewData: view_event.data || {}
       });
-      var state = {
-        view: V
-      };
       var view = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(StateContext.Provider, {
         key: routeMap.get(V).id,
         value: state
@@ -745,10 +762,18 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         currentPath: app_app.path,
         currentView: view,
         currentViewComponent: V,
+        setPage: defineObservableProperty(state, 'page', app_app.page, true),
         setActive: defineObservableProperty(state, 'active', true, true)
       });
+      watch(state, 'page', function (page, previousPage) {
+        emitter.emit('pagechange', state, {
+          previousPage: previousPage
+        });
+      });
       (view_event.waitFor || noop)(promise);
     }
+
+    (self.setPage || noop)(app_app.page);
   },
   getViewComponent: function getViewComponent() {
     var props = this.props;
@@ -841,7 +866,7 @@ function createViewComponent(factory) {
   };
 }
 
-function useViewContainerState() {
+function useViewContext() {
   return external_commonjs_react_commonjs2_react_amd_react_root_React_.useContext(StateContext);
 }
 function isViewMatched(view) {
@@ -890,6 +915,11 @@ function renderView() {
   var views = makeArray(arguments);
   var rootProps = isFunction(views[0]) ? {} : views.shift();
   var defaultView = views[0];
+  each(views, function (i, v) {
+    if (!routeMap.has(v)) {
+      throw new Error('Invalid argument to renderView: ' + (isFunction(v) ? v.name : v));
+    }
+  });
   views.sort(sortViews);
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewContainer, {
     rootProps: rootProps,
@@ -916,6 +946,7 @@ function navigateTo(view, params, data, replace) {
 function redirectTo(view, params, data) {
   return navigateTo(view, params, data, true);
 }
+
 ;// CONCATENATED MODULE: ./src/hooks.js
 
 
@@ -924,7 +955,7 @@ function redirectTo(view, params, data) {
 
 
 
-var emitter = new ZetaEventContainer();
+var hooks_emitter = new ZetaEventContainer();
 
 function getCurrentStates() {
   return app_app.historyStorage.current;
@@ -946,24 +977,23 @@ definePrototype(ViewState, {
   },
   onPopState: function onPopState(callback) {
     throwNotFunction(callback);
-    return emitter.add(this, 'popstate', function (e) {
+    return hooks_emitter.add(this, 'popstate', function (e) {
       callback.call(this, e.newValue);
     });
   }
 });
 function useAppReady() {
-  var sReady = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(false);
-  var ready = sReady[0],
-      setReady = sReady[1];
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
-    app_app.ready.then(function () {
-      setReady(true);
-    });
-  }, []);
-  return ready;
+  return useAppReadyState().ready;
+}
+function useAppReadyState() {
+  var readyState = (0,external_zeta_dom_react_.useObservableProperty)(app_app, 'readyState');
+  return {
+    ready: readyState === 'ready',
+    error: readyState === 'error'
+  };
 }
 function useRouteParam(name, defaultValue) {
-  var container = useViewContainerState();
+  var container = useViewContext();
   var route = app_app.route;
   var value = route[name] || '';
   var ref = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef)(value);
@@ -1002,7 +1032,7 @@ function useRouteParam(name, defaultValue) {
   return value;
 }
 function useRouteState(key, defaultValue, snapshotOnUpdate) {
-  var container = useViewContainerState();
+  var container = useViewContext();
   var cur = getCurrentStates();
   var state = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(cur.has(key) ? cur.get(key) : defaultValue);
 
@@ -1028,7 +1058,7 @@ function useRouteState(key, defaultValue, snapshotOnUpdate) {
   return state;
 }
 function ViewStateContainer(props) {
-  var container = useViewContainerState();
+  var container = useViewContext();
   var provider = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
     var cache = {};
     return {
@@ -1041,7 +1071,7 @@ function ViewStateContainer(props) {
           var store = state.store;
 
           if (store && (store !== cur && cur.has(key) || key !== state.key)) {
-            emitter.emit('popstate', state, {
+            hooks_emitter.emit('popstate', state, {
               newValue: value
             });
             state.value = value;
@@ -1746,6 +1776,29 @@ each('destroy enable disable setOptions refresh scrollPadding stop scrollLeft sc
     return obj.scrollable.apply(obj, [v].concat(makeArray(arguments)));
   });
 });
+;// CONCATENATED MODULE: ./src/mixins/ScrollIntoViewMixin.js
+
+
+
+function ScrollIntoViewMixin() {
+  StatefulMixin.call(this);
+}
+definePrototype(ScrollIntoViewMixin, StatefulMixin, {
+  when: function when(deps) {
+    var state = this.state;
+
+    var callback = state.callback || (state.callback = function () {
+      scrollIntoView(state.element);
+    });
+
+    if (state.deps && !equal(deps, state.deps)) {
+      setImmediateOnce(callback);
+    }
+
+    state.deps = makeArray(deps);
+    return this;
+  }
+});
 ;// CONCATENATED MODULE: ./src/mixin.js
 
 
@@ -1761,6 +1814,7 @@ each('destroy enable disable setOptions refresh scrollPadding stop scrollLeft sc
 
 
 
+
 function extendSelf(options) {
   extend(this, options);
 }
@@ -1773,30 +1827,17 @@ function createUseFunction(ctor) {
   };
 }
 
-function disposeMixin(mixin) {
-  mixin.disposed = true;
-  setImmediate(function () {
-    if (mixin.disposed) {
-      mixin.dispose();
-    }
-  });
-}
-
 var useAnimateMixin = createUseFunction(AnimateMixin);
 var useAnimateSequenceMixin = createUseFunction(AnimateSequenceMixin);
 var useFlyoutMixin = createUseFunction(FlyoutMixin);
 var useFocusStateMixin = createUseFunction(FocusStateMixin);
 var useLoadingStateMixin = createUseFunction(LoadingStateMixin);
 var useScrollableMixin = createUseFunction(ScrollableMixin);
+var useScrollIntoViewMixin = createUseFunction(ScrollIntoViewMixin);
 function useMixin(ctor) {
-  var mixin = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
+  return (0,external_zeta_dom_react_.useSingleton)(function () {
     return new ctor();
-  })[0].reset();
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
-    mixin.disposed = false;
-    return disposeMixin.bind(0, mixin);
-  }, []);
-  return mixin;
+  }).reset();
 }
 function useMixinRef(mixin) {
   return mixin && mixin.getMixin().reset();