brew-js-react 0.3.3 → 0.4.0

package/app.js

@@ -1,12 +1,20 @@
+import { combineFn, throwNotFunction } from "./include/zeta-dom/util.js";
 import { install } from "./include/brew-js/app.js";
 import defaults from "./include/brew-js/defaults.js";
 
 /** @type {Brew.AppInstance<Brew.WithRouter & Brew.WithI18n>} */
 export var app;
 
+const appInitCallabcks = [];
+
+export function onAppInit(callback) {
+    appInitCallabcks.push(throwNotFunction(callback));
+}
+
 install('react', function (app_) {
     // @ts-ignore: type inference issue
     app = app_;
+    combineFn(appInitCallabcks)(app);
 });
 
 defaults.react = true;

package/dist/brew-js-react.js

@@ -1,3 +1,4 @@
+/*! brew-js-react v0.4.0 | (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"));
@@ -209,6 +210,7 @@ __webpack_require__.d(src_namespaceObject, {
   "registerErrorView": () => (registerErrorView),
   "registerView": () => (registerView),
   "renderView": () => (renderView),
+  "resolvePath": () => (resolvePath),
   "useAnimateMixin": () => (useAnimateMixin),
   "useAnimateSequenceMixin": () => (useAnimateSequenceMixin),
   "useAppReady": () => (useAppReady),
@@ -385,6 +387,7 @@ var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_z
     textInputAllowed = _lib$dom.textInputAllowed,
     beginDrag = _lib$dom.beginDrag,
     beginPinchZoom = _lib$dom.beginPinchZoom,
+    insertText = _lib$dom.insertText,
     getShortcut = _lib$dom.getShortcut,
     setShortcut = _lib$dom.setShortcut,
     focusable = _lib$dom.focusable,
@@ -536,12 +539,18 @@ var defaults_defaultExport = external_commonjs_brew_js_commonjs2_brew_js_amd_bre
 ;// 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: ./tmp/brew-js/anim.js
@@ -583,6 +592,14 @@ var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_reac
   active: true
 }));
 var errorView;
+/** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
+
+var view_event = {};
+onAppInit(function () {
+  app_app.on('beforepageload', function (e) {
+    view_event = e;
+  });
+});
 
 function ErrorBoundary() {
   external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(this, arguments);
@@ -625,7 +642,8 @@ definePrototype(ErrorBoundary, external_commonjs_react_commonjs2_react_amd_react
     }
 
     return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(props.view, {
-      onComponentLoaded: onComponentLoaded
+      onComponentLoaded: onComponentLoaded,
+      viewProps: self.props.viewProps
     });
   },
   reset: function reset() {
@@ -646,9 +664,9 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
     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;
+    }), app_app.on('beforepageload', function () {
       self.stateId = history.state;
+      self.updateView();
       self.forceUpdate();
     }));
   },
@@ -656,16 +674,20 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
     /** @type {any} */
     var self = this;
 
-    if (history.state !== self.stateId) {
-      return self.lastChild || null;
+    if (history.state === self.stateId) {
+      self.updateView();
     }
 
+    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);
+  },
+  updateView: function updateView() {
+    var self = this;
     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));
+      var targetPath = resolvePath(V, getCurrentParams(V, true));
 
       if (targetPath !== removeQueryAndHash(app_app.path)) {
         app_app.navigate(targetPath, true);
@@ -703,6 +725,10 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         });
         notifyAsync(element, promise);
       });
+      var viewProps = freeze({
+        navigationType: view_event.navigationType,
+        viewData: view_event.data || {}
+      });
       var state = {
         view: V
       };
@@ -712,7 +738,8 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
       }, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewStateContainer, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement('div', extend({}, self.props.rootProps, {
         ref: initElement
       }), /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ErrorBoundary, {
-        onComponentLoaded: onComponentLoaded
+        onComponentLoaded: onComponentLoaded,
+        viewProps: viewProps
       }))));
       extend(self, {
         currentPath: app_app.path,
@@ -720,12 +747,8 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         currentViewComponent: V,
         setActive: defineObservableProperty(state, 'active', true, true)
       });
-      (self.waitFor || noop)(promise);
+      (view_event.waitFor || noop)(promise);
     }
-
-    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;
@@ -791,8 +814,8 @@ function createViewComponent(factory) {
     factory = external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement.bind(null, factory);
   }
 
-  return function (props) {
-    var viewProps = Object.freeze(props.viewProps || {});
+  return function fn(props) {
+    var viewProps = props.viewProps;
     var children = !promise && factory(viewProps);
 
     if (isThenable(children)) {
@@ -874,7 +897,7 @@ function renderView() {
     defaultView: defaultView
   });
 }
-function linkTo(view, params) {
+function resolvePath(view, params) {
   var state = routeMap.get(view);
 
   if (!state) {
@@ -884,11 +907,14 @@ function linkTo(view, params) {
   var newParams = extend(getCurrentParams(view), getCurrentParams(view, true, params || {}), state.params);
   return app_app.route.getPath(newParams);
 }
-function navigateTo(view, params) {
-  return app_app.navigate(linkTo(view, params));
+function linkTo(view, params) {
+  return app_app.toHref(resolvePath(view, params));
+}
+function navigateTo(view, params, data, replace) {
+  return app_app.navigate(resolvePath(view, params), replace, data && freeze(extend({}, data)));
 }
-function redirectTo(view, params) {
-  return app_app.navigate(linkTo(view, params), true);
+function redirectTo(view, params, data) {
+  return navigateTo(view, params, data, true);
 }
 ;// CONCATENATED MODULE: ./src/hooks.js
 
@@ -899,10 +925,9 @@ function redirectTo(view, params) {
 
 
 var emitter = new ZetaEventContainer();
-var states = {};
 
 function getCurrentStates() {
-  return states[history.state] || (states[history.state] = {});
+  return app_app.historyStorage.current;
 }
 
 function ViewState(key, value) {
@@ -915,7 +940,9 @@ definePrototype(ViewState, {
     return this.value;
   },
   set: function set(value) {
-    this.value = value;
+    var self = this;
+    self.value = value;
+    self.store.set(self.key, value);
   },
   onPopState: function onPopState(callback) {
     throwNotFunction(callback);
@@ -977,24 +1004,26 @@ function useRouteParam(name, defaultValue) {
 function useRouteState(key, defaultValue, snapshotOnUpdate) {
   var container = useViewContainerState();
   var cur = getCurrentStates();
-  var state = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(key in cur ? cur[key] : defaultValue);
+  var state = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(cur.has(key) ? cur.get(key) : defaultValue);
 
-  if (container.active && cur[key] !== state[0]) {
-    if (snapshotOnUpdate && key in cur) {
+  if (container.active && cur.get(key) !== state[0]) {
+    if (snapshotOnUpdate && cur.has(key)) {
       app_app.snapshot();
       cur = getCurrentStates();
     }
 
-    cur[key] = state[0];
+    cur.set(key, state[0]);
   }
 
   (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
-    return bind(window, 'popstate', function () {
-      if (snapshotOnUpdate && container.active) {
-        var cur = getCurrentStates();
-        state[1](key in cur ? cur[key] : defaultValue);
-      }
-    });
+    if (snapshotOnUpdate) {
+      return bind(window, 'popstate', function () {
+        if (container.active) {
+          var cur = getCurrentStates();
+          state[1](cur.has(key) ? cur.get(key) : defaultValue);
+        }
+      });
+    }
   }, [container, snapshotOnUpdate]);
   return state;
 }
@@ -1005,25 +1034,22 @@ function ViewStateContainer(props) {
     return {
       getState: function getState(uniqueId, key) {
         var cur = getCurrentStates();
-        var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(key, cur[key] && cur[key].value));
+        var value = cur.get(key);
+        var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(key, value));
 
         if (container.active) {
-          var stateId = state.stateId;
+          var store = state.store;
 
-          if (stateId && (stateId !== history.state || key !== state.key)) {
-            var newValue = cur[key] && cur[key].value;
+          if (store && (store !== cur && cur.has(key) || key !== state.key)) {
             emitter.emit('popstate', state, {
-              newValue: newValue
-            }); // detach value in previous history state from current one
-
-            var previous = new ViewState(state.key, state.value);
-            states[stateId][previous.key] = previous;
-            state.value = newValue;
+              newValue: value
+            });
+            state.value = value;
             state.key = key;
           }
 
-          state.stateId = history.state;
-          cur[key] = state;
+          state.store = cur;
+          cur.set(key, state.value);
         }
 
         return state;
@@ -1747,6 +1773,15 @@ 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);
@@ -1758,7 +1793,8 @@ function useMixin(ctor) {
     return new ctor();
   })[0].reset();
   (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
-    return mixin.dispose.bind(mixin);
+    mixin.disposed = false;
+    return disposeMixin.bind(0, mixin);
   }, []);
   return mixin;
 }