brew-js-react 0.3.1 → 0.3.3

package/dialog.js

@@ -1,19 +1,18 @@
 import { createElement, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
+import ReactDOMClient from "./include/external/react-dom-client.js";
 import { always, catchAsync, either, extend, makeAsync, noop, pipe } from "./include/zeta-dom/util.js";
 import { containsOrEquals, removeNode } from "./include/zeta-dom/domUtil.js";
 import dom from "./include/zeta-dom/dom.js";
 import { lock, preventLeave } from "./include/zeta-dom/domLock.js";
 import { closeFlyout, openFlyout } from "./include/brew-js/domAction.js";
 
-const createRoot = ReactDOM.createRoot;
-
 /**
  * @param {Partial<import("./dialog").DialogOptions<any>>} props
  */
 export function createDialog(props) {
     var root = document.createElement('div');
-    var reactRoot = createRoot && createRoot(root);
+    var reactRoot = ReactDOMClient.createRoot(root);
     var closeDialog = closeFlyout.bind(0, root);
     var promise;
 
@@ -21,11 +20,7 @@ export function createDialog(props) {
         removeNode(root);
         (props.onClose || noop)(root);
         if (props.onRender) {
-            if (reactRoot) {
-                reactRoot.unmount();
-            } else {
-                ReactDOM.unmountComponentAtNode(root);
-            }
+            reactRoot.unmount();
         }
     });
 
@@ -55,11 +50,7 @@ export function createDialog(props) {
                 if (props.wrapper) {
                     content = createElement(props.wrapper, dialogProps, content);
                 }
-                if (reactRoot) {
-                    reactRoot.render(content);
-                } else {
-                    ReactDOM.render(content, root);
-                }
+                reactRoot.render(content);
             }
             promise = openFlyout(root);
             if (props.preventLeave) {

package/dist/brew-js-react.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
+		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"));
 	else if(typeof define === 'function' && define.amd)
-		define("brew-js-react", ["brew-js", "react", "react-dom", "zeta-dom", "zeta-dom-react", "waterpipe", "jQuery"], factory);
+		define("brew-js-react", ["brew-js", "react", "react-dom", "react-dom/client", "zeta-dom", "zeta-dom-react", "waterpipe", "jQuery"], factory);
 	else if(typeof exports === 'object')
-		exports["brew-js-react"] = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
+		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"), require("jQuery"));
 	else
-		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["zeta"], root["zeta-dom-react"], root["waterpipe"], root["jQuery"]);
-})(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__, __WEBPACK_EXTERNAL_MODULE__145__) {
+		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["react-dom/client"], root["zeta"], root["zeta-dom-react"], root["waterpipe"], root["jQuery"]);
+})(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__, __WEBPACK_EXTERNAL_MODULE__145__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -19,6 +19,16 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__145__;
 
 /***/ }),
 
+/***/ 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) => {
 
@@ -67,28 +77,41 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__654__;
 
 /***/ }),
 
-/***/ 346:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-/// <reference types="jq-scrollable" />
-// @ts-nocheck
-
-/** @type {JQueryStatic} */
-var jQuery = window.jQuery || __webpack_require__(145);
-
-module.exports = jQuery;
-
-/***/ }),
-
-/***/ 43:
+/***/ 662:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-// @ts-nocheck
-
-/** @type {Waterpipe} */
-var waterpipe = window.waterpipe || __webpack_require__(28);
+var React = __webpack_require__(318);
+var ReactDOMClient;
+try {
+    ReactDOMClient = __webpack_require__(715);
+} catch (e) {
+    ReactDOMClient = {
+        createRoot(container, options) {
+            return {
+                render(children) {
+                    React.render(children, container);
+                },
+                unmount() {
+                    React.unmountComponentAtNode(container);
+                }
+            };
+        },
+        hydrateRoot(container, initialChildren, options) {
+            React.hydrate(initialChildren, container);
+            return {
+                render(children) {
+                    React.render(children, container);
+                },
+                unmount() {
+                    React.unmountComponentAtNode(container);
+                }
+            };
+        },
+    };
+}
+/** @type {import("react-dom/client")} */
+module.exports = ReactDOMClient;
 
-module.exports = waterpipe;
 
 /***/ })
 
@@ -220,6 +243,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);
+;// 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);
 // 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
@@ -304,8 +335,6 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     delay = _lib$util.delay,
     makeAsync = _lib$util.makeAsync;
 
-;// CONCATENATED MODULE: ./src/include/zeta-dom/util.js
-
 ;// CONCATENATED MODULE: ./tmp/zeta-dom/domUtil.js
 
 var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.util,
@@ -348,8 +377,6 @@ var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_do
     mergeRect = domUtil_lib$util.mergeRect,
     elementFromPoint = domUtil_lib$util.elementFromPoint;
 
-;// CONCATENATED MODULE: ./src/include/zeta-dom/domUtil.js
-
 ;// CONCATENATED MODULE: ./tmp/zeta-dom/dom.js
 
 var dom_defaultExport = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.dom;
@@ -383,16 +410,12 @@ var domLock_lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom
     notifyAsync = domLock_lib$dom.notifyAsync,
     preventLeave = domLock_lib$dom.preventLeave;
 
-;// CONCATENATED MODULE: ./src/include/zeta-dom/domLock.js
-
 ;// CONCATENATED MODULE: ./tmp/brew-js/domAction.js
 
 var addAsyncAction = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addAsyncAction,
     closeFlyout = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.closeFlyout,
     openFlyout = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.openFlyout;
 
-;// CONCATENATED MODULE: ./src/include/brew-js/domAction.js
-
 ;// CONCATENATED MODULE: ./src/dialog.js
 
 
@@ -401,14 +424,14 @@ var addAsyncAction = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_roo
 
 
 
-var createRoot = external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.createRoot;
+
 /**
  * @param {Partial<import("./dialog").DialogOptions<any>>} props
  */
 
 function createDialog(props) {
   var root = document.createElement('div');
-  var reactRoot = createRoot && createRoot(root);
+  var reactRoot = external_react_dom_client.createRoot(root);
 
   var _closeDialog = closeFlyout.bind(0, root);
 
@@ -418,11 +441,7 @@ function createDialog(props) {
     (props.onClose || noop)(root);
 
     if (props.onRender) {
-      if (reactRoot) {
-        reactRoot.unmount();
-      } else {
-        external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.unmountComponentAtNode(root);
-      }
+      reactRoot.unmount();
     }
   });
   return {
@@ -456,11 +475,7 @@ function createDialog(props) {
           content = /*#__PURE__*/(0,external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement)(props.wrapper, dialogProps, content);
         }
 
-        if (reactRoot) {
-          reactRoot.render(content);
-        } else {
-          external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.render(content, root);
-        }
+        reactRoot.render(content);
       }
 
       promise = openFlyout(root);
@@ -511,8 +526,6 @@ var external_zeta_dom_react_ = __webpack_require__(103);
 
 var ZetaEventContainer = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.EventContainer;
 
-;// CONCATENATED MODULE: ./src/include/zeta-dom/events.js
-
 ;// CONCATENATED MODULE: ./tmp/brew-js/defaults.js
 
 var defaults_defaultExport = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.defaults;
@@ -538,12 +551,11 @@ var animateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_bre
     addAnimateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addAnimateIn,
     addAnimateOut = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addAnimateOut;
 
-;// 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,
+    parsePath = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.parsePath,
     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,
@@ -552,8 +564,6 @@ var setBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_br
     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
 
 
@@ -589,9 +599,13 @@ definePrototype(ErrorBoundary, external_commonjs_react_commonjs2_react_amd_react
         error: error
       });
     } else {
-      zeta_dom_dom.emit('error', self.context.container, {
-        error: error
-      }, true);
+      // emit error in next tick as ref callback may yet to be invoked
+      // if error is thrown synchronously in first render
+      setImmediate(function () {
+        zeta_dom_dom.emit('error', self.context.container, {
+          error: error
+        }, true);
+      });
     }
   },
   render: function render() {
@@ -883,6 +897,7 @@ function redirectTo(view, params) {
 
 
 
+
 var emitter = new ZetaEventContainer();
 var states = {};
 
@@ -959,15 +974,28 @@ function useRouteParam(name, defaultValue) {
 
   return value;
 }
-function useRouteState(key, 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);
 
-  if (container.active) {
+  if (container.active && cur[key] !== state[0]) {
+    if (snapshotOnUpdate && key in cur) {
+      app_app.snapshot();
+      cur = getCurrentStates();
+    }
+
     cur[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);
+      }
+    });
+  }, [container, snapshotOnUpdate]);
   return state;
 }
 function ViewStateContainer(props) {
@@ -1006,8 +1034,12 @@ function ViewStateContainer(props) {
     value: provider
   }, props.children);
 }
-// EXTERNAL MODULE: ./src/include/external/waterpipe.js
-var waterpipe = __webpack_require__(43);
+// EXTERNAL MODULE: external "waterpipe"
+var external_waterpipe_ = __webpack_require__(28);
+;// CONCATENATED MODULE: ./src/include/external/waterpipe.js
+// @ts-nocheck
+
+/* harmony default export */ const waterpipe = (external_waterpipe_);
 ;// CONCATENATED MODULE: ./src/i18n.js
 
 
@@ -1192,8 +1224,6 @@ var observe_lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom
     watchAttributes = observe_lib$dom.watchAttributes,
     watchOwnAttributes = observe_lib$dom.watchOwnAttributes;
 
-;// CONCATENATED MODULE: ./src/include/zeta-dom/observe.js
-
 ;// CONCATENATED MODULE: ./src/mixins/StatefulMixin.js
 
 
@@ -1213,7 +1243,7 @@ function StatefulMixin() {
   Mixin.call(this);
 
   _(this, {
-    elements: new WeakSet(),
+    elements: new Set(),
     flush: watch(this, false),
     dispose: [],
     states: {},
@@ -1288,6 +1318,7 @@ definePrototype(StatefulMixin, Mixin, {
     var states = state.states;
     combineFn(state.dispose.splice(0))();
     state.flush();
+    state.elements.clear();
     each(states, function (i, v) {
       delete states[i];
     });
@@ -1527,14 +1558,14 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
       element.id = 'flyout-' + ++flyoutMixinCounter;
     }
 
-    app_app.on(element, {
+    self.onDispose(app_app.on(element, {
       animationstart: function animationstart() {
         self.animating = true;
       },
       animationcomplete: function animationcomplete() {
         self.animating = false;
       }
-    }, true);
+    }, true));
     setImmediate(function () {
       each(self.toggle.elements(), function (i, v) {
         v.setAttribute('toggle', '#' + element.id);
@@ -1568,7 +1599,7 @@ function FocusStateMixin() {
 definePrototype(FocusStateMixin, StatefulMixin, {
   initElement: function initElement(element, state) {
     FocusStateMixinSuper.initElement.call(this, element, state);
-    zeta_dom_dom.on(element, {
+    this.onDispose(zeta_dom_dom.on(element, {
       focusin: function focusin(e) {
         state.focused = true;
         setClass(element, 'focused', e.source);
@@ -1577,7 +1608,7 @@ definePrototype(FocusStateMixin, StatefulMixin, {
         state.focused = false;
         setClass(element, 'focused', false);
       }
-    });
+    }));
   },
   getClassNames: function getClassNames() {
     return [{
@@ -1599,7 +1630,7 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
   initElement: function initElement(element, state) {
     LoadingStateMixinSuper.initElement.call(this, element, state);
     lock(element);
-    zeta_dom_dom.on(element, {
+    this.onDispose(zeta_dom_dom.on(element, {
       asyncStart: function asyncStart() {
         state.loading = true;
         setClass(element, 'loading', true);
@@ -1612,7 +1643,7 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
         state.loading = false;
         setClass(element, 'loading', false);
       }
-    });
+    }));
   },
   getClassNames: function getClassNames() {
     return [{
@@ -1620,8 +1651,12 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
     }];
   }
 });
-// EXTERNAL MODULE: ./src/include/external/jquery.js
-var jquery = __webpack_require__(346);
+// EXTERNAL MODULE: external "jQuery"
+var external_jQuery_ = __webpack_require__(145);
+;// CONCATENATED MODULE: ./src/include/external/jquery.js
+// @ts-nocheck
+
+/* harmony default export */ const jquery = (external_jQuery_);
 ;// CONCATENATED MODULE: ./src/mixins/ScrollableMixin.js
 
 
@@ -1657,7 +1692,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
   },
   initElement: function initElement(element, state) {
     var self = this;
-    app_app.on(element, {
+    self.onDispose(app_app.on(element, {
       statechange: function statechange(e) {
         if ('pageIndex' in e.newValues) {
           extend(self, {
@@ -1671,7 +1706,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
       scrollStop: function scrollStop() {
         self.scrolling = false;
       }
-    }, true);
+    }, true));
   },
   clone: function clone() {
     var mixin = ScrollableMixinSuper.clone.call(this);