brew-js-react 0.4.6 → 0.4.8

package/dist/brew-js-react.js

@@ -1,27 +1,17 @@
-/*! brew-js-react v0.4.6 | (c) misonou | https://hackmd.io/@misonou/brew-js-react */
+/*! brew-js-react v0.4.8 | (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"));
+		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"));
 	else if(typeof define === 'function' && define.amd)
-		define("brew-js-react", ["brew-js", "react", "react-dom", "react-dom/client", "zeta-dom", "zeta-dom-react", "waterpipe"], factory);
+		define("brew-js-react", ["brew-js", "react", "react-dom", "zeta-dom", "zeta-dom-react", "waterpipe"], factory);
 	else if(typeof exports === 'object')
-		exports["brew-js-react"] = 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"));
+		exports["brew-js-react"] = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"));
 	else
-		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["react-dom/client"], root["zeta"], root["zeta-dom-react"], root["waterpipe"]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE__80__, __WEBPACK_EXTERNAL_MODULE__359__, __WEBPACK_EXTERNAL_MODULE__318__, __WEBPACK_EXTERNAL_MODULE__715__, __WEBPACK_EXTERNAL_MODULE__654__, __WEBPACK_EXTERNAL_MODULE__103__, __WEBPACK_EXTERNAL_MODULE__28__) {
+		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["zeta"], root["zeta-dom-react"], root["waterpipe"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__80__, __WEBPACK_EXTERNAL_MODULE__359__, __WEBPACK_EXTERNAL_MODULE__318__, __WEBPACK_EXTERNAL_MODULE__654__, __WEBPACK_EXTERNAL_MODULE__103__, __WEBPACK_EXTERNAL_MODULE__28__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 715:
-/***/ ((module) => {
-
-"use strict";
-if(typeof __WEBPACK_EXTERNAL_MODULE__715__ === 'undefined') { var e = new Error("Cannot find module 'react-dom/client'"); e.code = 'MODULE_NOT_FOUND'; throw e; }
-
-module.exports = __WEBPACK_EXTERNAL_MODULE__715__;
-
-/***/ }),
-
 /***/ 28:
 /***/ ((module) => {
 
@@ -70,38 +60,33 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__654__;
 
 /***/ }),
 
-/***/ 662:
+/***/ 862:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-var React = __webpack_require__(318);
+var ReactDOM = __webpack_require__(318);
 var ReactDOMClient;
-try {
-    ReactDOMClient = __webpack_require__(715);
-} catch (e) {
+
+if (ReactDOM.createRoot) {
+    ReactDOMClient = ReactDOM;
+} else {
     ReactDOMClient = {
         createRoot(container, options) {
             return {
                 render(children) {
-                    React.render(children, container);
+                    ReactDOM.render(children, container);
                 },
                 unmount() {
-                    React.unmountComponentAtNode(container);
+                    ReactDOM.unmountComponentAtNode(container);
                 }
             };
         },
         hydrateRoot(container, initialChildren, options) {
-            React.hydrate(initialChildren, container);
-            return {
-                render(children) {
-                    React.render(children, container);
-                },
-                unmount() {
-                    React.unmountComponentAtNode(container);
-                }
-            };
+            ReactDOM.hydrate(initialChildren, container);
+            return ReactDOMClient.createRoot(container, options);
         },
     };
 }
+
 /** @type {import("react-dom/client")} */
 module.exports = ReactDOMClient;
 
@@ -241,14 +226,14 @@ var install = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_
 var external_commonjs_react_commonjs2_react_amd_react_root_React_ = __webpack_require__(359);
 // EXTERNAL MODULE: external {"commonjs":"react-dom","commonjs2":"react-dom","amd":"react-dom","root":"ReactDOM"}
 var external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_ = __webpack_require__(318);
-// EXTERNAL MODULE: ./node_modules/@misonou/react-dom-client/index.js
-var react_dom_client = __webpack_require__(662);
+// EXTERNAL MODULE: ./node_modules/@misonou/react-dom-client/fallback.js
+var fallback = __webpack_require__(862);
 ;// CONCATENATED MODULE: ./src/include/external/react-dom-client.js
 // @ts-nocheck
 
 /** @type {import("react-dom/client")} */
 
-/* harmony default export */ const external_react_dom_client = (react_dom_client);
+/* harmony default export */ const react_dom_client = (fallback);
 // EXTERNAL MODULE: external {"commonjs":"zeta-dom","commonjs2":"zeta-dom","amd":"zeta-dom","root":"zeta"}
 var external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_ = __webpack_require__(654);
 ;// CONCATENATED MODULE: ./tmp/zeta-dom/util.js
@@ -257,6 +242,7 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     noop = _lib$util.noop,
     pipe = _lib$util.pipe,
     either = _lib$util.either,
+    sameValueZero = _lib$util.sameValueZero,
     is = _lib$util.is,
     isUndefinedOrNull = _lib$util.isUndefinedOrNull,
     isArray = _lib$util.isArray,
@@ -321,6 +307,7 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     lcfirst = _lib$util.lcfirst,
     trim = _lib$util.trim,
     matchWord = _lib$util.matchWord,
+    matchWordMulti = _lib$util.matchWordMulti,
     htmlDecode = _lib$util.htmlDecode,
     resolve = _lib$util.resolve,
     reject = _lib$util.reject,
@@ -436,7 +423,7 @@ var addAsyncAction = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_roo
 
 function createDialog(props) {
   var root = document.createElement('div');
-  var reactRoot = external_react_dom_client.createRoot(root);
+  var reactRoot = react_dom_client.createRoot(root);
 
   var _closeDialog = closeFlyout.bind(0, root);
 
@@ -609,6 +596,9 @@ var emitter = new ZetaEventContainer();
 var rootContext = freeze(extend(new ViewContext(null, null), {
   container: root
 }));
+
+var rootState = _(rootContext);
+
 var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(rootContext);
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
@@ -616,19 +606,39 @@ var errorView;
 var view_event = {};
 onAppInit(function () {
   app_app.on('beforepageload', function (e) {
+    rootState.setPage(app_app.page);
+    rootState.setActive(true);
     view_event = e;
+    e.waitFor(new Promise(function (resolve) {
+      (function updateViewRecursive(next) {
+        if (!next[0]) {
+          return resolve();
+        }
 
-    _(rootContext).setPage(app_app.page);
+        resolveAll(map(next, function (v) {
+          return new Promise(function (resolve) {
+            v.onRender = resolve;
+            v.forceUpdate();
+          });
+        })).then(function () {
+          updateViewRecursive(map(next, function (v) {
+            return v.children;
+          }));
+        });
+      })(rootState.children);
+    }));
   });
 });
 
 function ViewContext(view, page) {
   var self = this;
+  watch(self, true);
   defineOwnProperty(self, 'view', view, true);
 
   _(self, {
+    children: [],
     setPage: defineObservableProperty(self, 'page', page, true),
-    setActive: defineObservableProperty(self, 'active', true, true)
+    setActive: defineObservableProperty(self, 'active', !!page, true)
   });
 
   watch(self, 'page', function (page, previousPage) {
@@ -698,33 +708,27 @@ definePrototype(ErrorBoundary, external_commonjs_react_commonjs2_react_amd_react
 
 function ViewContainer() {
   external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(this, arguments);
-  this.stateId = history.state;
 }
 
 ViewContainer.contextType = StateContext;
 definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react_root_React_.Component, {
   componentDidMount: function componentDidMount() {
-    /** @type {any} */
     var self = this;
+
+    var parent = _(self.context).children;
+
+    parent.push(self);
     self.componentWillUnmount = combineFn(watch(app_app.route, function () {
       (self.setActive || noop)(self.getViewComponent() === self.currentViewComponent);
-    }), app_app.on('beforepageload', function () {
-      self.stateId = history.state;
-
-      if (self.context === rootContext || self.updateOnNext) {
-        view_event.waitFor(new Promise(function (resolve) {
-          self.onRender = resolve;
-        }));
-        self.updateView();
-        self.forceUpdate();
-      }
-    }));
+    }), function () {
+      arrRemove(parent, self);
+    });
   },
   render: function render() {
     /** @type {any} */
     var self = this;
 
-    if (history.state === self.stateId && self.context.active) {
+    if (self.context.active) {
       self.updateView();
     }
 
@@ -734,21 +738,20 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
   updateView: function updateView() {
     var self = this;
     var V = self.getViewComponent();
-    self.updateOnNext = false;
+    var viewChanged = V !== self.currentViewComponent;
 
-    if (V) {
+    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
       var targetPath = resolvePath(V, getCurrentParams(V, true));
 
       if (targetPath !== removeQueryAndHash(app_app.path)) {
         app_app.navigate(targetPath, true);
-        self.updateOnNext = true;
         return;
       }
     }
 
-    if (V && V !== self.currentViewComponent) {
+    if (V && viewChanged) {
       var prevElement = self.currentElement;
 
       if (prevElement) {
@@ -986,26 +989,24 @@ function redirectTo(view, params, data) {
 
 
 
-
 var hooks_emitter = new ZetaEventContainer();
 
 function getCurrentStates() {
   return app_app.historyStorage.current;
 }
 
-function ViewState(key, value) {
+function ViewState(key, dispose) {
   this.key = key;
-  this.value = value;
+  this.store = getCurrentStates();
+  this.dispose = dispose;
 }
 
 definePrototype(ViewState, {
   get: function get() {
-    return this.value;
+    return this.store.get(this.key);
   },
   set: function set(value) {
-    var self = this;
-    self.value = value;
-    self.store.set(self.key, value);
+    this.store.set(this.key, value);
   },
   onPopState: function onPopState(callback) {
     throwNotFunction(callback);
@@ -1014,6 +1015,34 @@ definePrototype(ViewState, {
     });
   }
 });
+
+function updateViewState(state, key, store) {
+  var newValue = state.get();
+
+  if (key !== state.key || store !== state.store && store.has(key)) {
+    newValue = store.get(key);
+    hooks_emitter.emit('popstate', state, {
+      newValue: newValue
+    });
+  }
+
+  state.key = key;
+  state.store = store;
+  store.set(key, newValue);
+}
+
+function useViewContextWithEffect(callback, deps) {
+  var container = useViewContext();
+  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
+    return app_app.on('beforepageload popstate', function () {
+      if (container.active) {
+        callback(getCurrentStates());
+      }
+    });
+  }, deps);
+  return container;
+}
+
 function useAppReady() {
   return useAppReadyState().ready;
 }
@@ -1065,11 +1094,18 @@ function useRouteParam(name, defaultValue) {
   return value;
 }
 function useRouteState(key, defaultValue, snapshotOnUpdate) {
-  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);
+  var state = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(cur && cur.has(key) ? cur.get(key) : defaultValue);
+  var container = useViewContextWithEffect(function (cur) {
+    state[1](function (oldValue) {
+      return cur.has(key) ? cur.get(key) : (cur.set(key, oldValue), oldValue);
+    });
+  }, [key]);
 
-  if (container.active && cur.get(key) !== state[0]) {
+  if (!cur) {
+    // delay app ready to ensure that beforepageload event can be caught
+    app_app.beforeInit(delay(1));
+  } else if (container.active && cur.get(key) !== state[0]) {
     if (snapshotOnUpdate && cur.has(key)) {
       app_app.snapshot();
       cur = getCurrentStates();
@@ -1078,44 +1114,27 @@ function useRouteState(key, defaultValue, snapshotOnUpdate) {
     cur.set(key, state[0]);
   }
 
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
-    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;
 }
 function ViewStateContainer(props) {
-  var container = useViewContext();
+  var cache = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)({})[0];
+  var container = useViewContextWithEffect(function (cur) {
+    each(cache, function (i, v) {
+      updateViewState(v, v.key, cur);
+    });
+  }, []);
   var provider = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
-    var cache = {};
     return {
       getState: function getState(uniqueId, key) {
-        var cur = getCurrentStates();
-        var value = cur.get(key);
-        var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(key, value));
-
-        if (container.active) {
-          var store = state.store;
-
-          if (store && (store !== cur && cur.has(key) || key !== state.key)) {
-            hooks_emitter.emit('popstate', state, {
-              newValue: value
-            });
-            state.value = value;
-            state.key = key;
-          }
+        var state = cache[uniqueId];
 
-          state.store = cur;
-          cur.set(key, state.value);
+        if (state && container.active) {
+          updateViewState(state, key, getCurrentStates());
         }
 
-        return state;
+        return state || (cache[uniqueId] = new ViewState(key, function () {
+          delete cache[uniqueId];
+        }));
       }
     };
   })[0];
@@ -1148,19 +1167,19 @@ if (toPrimitive) {
 }
 
 function createCallback(translate) {
-  var callback = function callback(key, data) {
-    var result = translate(key, data, true);
+  var callback = function callback(key, data, lang) {
+    var result = translate(key, data, lang, true);
     return result !== undefined ? result : key;
   };
 
   return extend(callback, {
-    html: function html(id, data) {
+    html: function html(id, data, lang) {
       return {
-        __html: translate(id, data)
+        __html: translate(id, data, lang)
       };
     },
-    lazy: function lazy(id, data) {
-      return new TString(translate.bind(0, id, data, true));
+    lazy: function lazy(id, data, lang) {
+      return new TString(translate.bind(0, id, data, lang, true));
     }
   });
 }
@@ -1190,36 +1209,38 @@ function makeTranslation(resources, defaultLang) {
     }
   }
 
-  function translate(key, data, noEncode) {
+  function translate(key, data, lang, noEncode) {
     var prefix = re.test(key) ? RegExp.$1 : '';
     var name = prefix ? key.slice(RegExp.lastMatch.length) : key;
-    return getTranslation(prefix, name, data, noEncode, app_app.language);
+    return getTranslation(prefix, name, data, noEncode, lang || app_app.language);
   }
 
   function getTranslationCallback() {
+    var currentLang = String(this);
     var prefix = makeArray(arguments);
-    var key = prefix.join(' ');
-    return cache[key] || (cache[key] = createCallback(function (key, data, noEncode) {
-      var lang = app_app.language;
+    var key = currentLang + ' ' + prefix.join(' ');
+    return cache[key] || (cache[key] = prefix[0] ? createCallback(function (key, data, lang, noEncode) {
+      lang = lang || currentLang || app_app.language;
       return single(prefix, function (v) {
         return getTranslation(v, key, data, noEncode, lang);
       });
+    }) : createCallback(function (key, data, lang, noEncode) {
+      return translate(key, data, lang || currentLang, noEncode);
     }));
   }
 
   function useTranslation() {
     var language = useLanguage();
-    var t = getTranslationCallback.apply(0, arguments);
+    var t = getTranslationCallback.apply(language, arguments);
     return {
       language: language,
       t: t
     };
   }
 
-  cache[''] = createCallback(translate);
   return {
-    translate: cache[''],
-    getTranslation: getTranslationCallback,
+    translate: createCallback(translate),
+    getTranslation: getTranslationCallback.bind(''),
     useTranslation: useTranslation,
     keys: function keys(prefix) {
       return util_keys(resources[defaultLang][prefix] || empty);
@@ -1529,13 +1550,20 @@ function AnimateSequenceMixin() {
   self.item = new AnimateSequenceItemMixin(self.className);
 }
 definePrototype(AnimateSequenceMixin, AnimateMixin, {
+  withOptions: function withOptions(options) {
+    this.selector = options;
+    return this;
+  },
   reset: function reset() {
     this.item.reset();
     return AnimateSequenceMixinSuper.reset.call(this);
   },
   getCustomAttributes: function getCustomAttributes() {
-    return extend({}, AnimateSequenceMixinSuper.getCustomAttributes.call(this), {
-      'animate-sequence': '.' + this.className
+    var self = this;
+    return extend({}, AnimateSequenceMixinSuper.getCustomAttributes.call(self), {
+      'animate-in': null,
+      'animate-sequence-type': (self.effects || []).join(' '),
+      'animate-sequence': self.selector || '.' + self.className
     });
   },
   clone: function clone() {