@thoughtbot/superglue 0.30.0 → 0.40.0

package/action_creators/requests.js

@@ -121,7 +121,9 @@ function visit(path, _temp2) {
       _ref4$beforeSave = _ref4.beforeSave,
       beforeSave = _ref4$beforeSave === void 0 ? function (prevPage, receivedPage) {
     return receivedPage;
-  } : _ref4$beforeSave;
+  } : _ref4$beforeSave,
+      _ref4$revisit = _ref4.revisit,
+      revisit = _ref4$revisit === void 0 ? false : _ref4$revisit;
 
   path = (0, _utils.withoutBusters)(path);
   var pageKey = (0, _utils.urlToPageKey)(path);
@@ -183,6 +185,14 @@ function visit(path, _temp2) {
         meta.suggestedAction = 'replace';
       }
 
+      if (revisit && fetchArgs[1].method == 'GET') {
+        if (rsp.redirected) {
+          meta.suggestedAction = 'replace';
+        } else {
+          meta.suggestedAction = 'none';
+        }
+      }
+
       if (method !== 'GET') {
         var contentLocation = rsp.headers.get('content-location');
 

package/components/Nav.js

@@ -33,11 +33,13 @@ var Nav = /*#__PURE__*/function (_React$Component) {
         initialPageKey = _this$props.initialPageKey;
     _this.history = history;
     _this.navigateTo = _this.navigateTo.bind(_assertThisInitialized(_this));
+    _this.scrollTo = _this.scrollTo.bind(_assertThisInitialized(_this));
     _this.onHistoryChange = _this.onHistoryChange.bind(_assertThisInitialized(_this));
     _this.state = {
       pageKey: initialPageKey,
       ownProps: {}
     };
+    _this.hasWindow = typeof window !== 'undefined';
     return _this;
   }
 
@@ -59,21 +61,39 @@ var Nav = /*#__PURE__*/function (_React$Component) {
         action = _ref.action,
         ownProps = _ref.ownProps;
 
+    if (action === 'none') {
+      return false;
+    }
+
     path = (0, _utils.pathWithoutBZParams)(path);
     var nextPageKey = (0, _utils.urlToPageKey)(path);
     var store = this.props.store;
     var hasPage = !!store.getState().pages[nextPageKey];
 
     if (hasPage) {
-      var prevPageKey = this.history.location.state.pageKey;
+      var location = this.history.location;
+      var prevPageKey = location.state.pageKey;
       var historyArgs = [path, {
         pageKey: nextPageKey,
-        superglue: true
+        superglue: true,
+        posY: 0,
+        posX: 0
       }];
 
       if (action === 'push') {
         var _this$history;
 
+        if (this.hasWindow) {
+          this.history.replace({
+            pathname: location.pathname,
+            search: location.search,
+            hash: location.hash
+          }, Object.assign({}, location.state, {
+            posY: window.pageYOffset,
+            posX: window.pageXOffset
+          }));
+        }
+
         (_this$history = this.history).push.apply(_this$history, historyArgs);
       }
 
@@ -87,6 +107,7 @@ var Nav = /*#__PURE__*/function (_React$Component) {
         pageKey: nextPageKey,
         ownProps: ownProps
       });
+      this.scrollTo(0, 0);
 
       if (action === 'replace' && prevPageKey && prevPageKey !== nextPageKey) {
         store.dispatch({
@@ -104,8 +125,18 @@ var Nav = /*#__PURE__*/function (_React$Component) {
     }
   };
 
-  _proto.onHistoryChange = function onHistoryChange(location) {
-    var store = this.props.store;
+  _proto.scrollTo = function scrollTo(posX, posY) {
+    this.hasWindow && window.scrollTo(posX, posY);
+  };
+
+  _proto.onHistoryChange = function onHistoryChange(_ref2) {
+    var _this2 = this;
+
+    var location = _ref2.location,
+        action = _ref2.action;
+    var _this$props2 = this.props,
+        store = _this$props2.store,
+        visit = _this$props2.visit;
     var pathname = location.pathname,
         search = location.search,
         hash = location.hash,
@@ -120,23 +151,75 @@ var Nav = /*#__PURE__*/function (_React$Component) {
           hash: hash
         }
       });
-      var pageKey = state.pageKey;
+
+      if (action !== 'POP') {
+        return;
+      }
+
+      var pageKey = state.pageKey,
+          posX = state.posX,
+          posY = state.posY;
       var containsKey = !!store.getState().pages[pageKey];
 
       if (containsKey) {
-        this.setState({
-          pageKey: pageKey
-        });
+        var restoreStrategy = store.getState().pages[pageKey].restoreStrategy;
+
+        switch (restoreStrategy) {
+          case 'fromCacheOnly':
+            this.setState({
+              pageKey: pageKey
+            });
+            this.scrollTo(posX, posY);
+            break;
+
+          case 'fromCacheAndRevisitInBackground':
+            this.setState({
+              pageKey: pageKey
+            });
+            this.scrollTo(posX, posY);
+            visit(pageKey, {
+              revisit: true
+            });
+            break;
+
+          case 'revisitOnly':
+          default:
+            visit(pageKey, {
+              revisit: true
+            }).then(function (meta) {
+              if (meta === undefined) {
+                console.warn("scoll restoration was skipped. Your visit's then funtion\n                  should return the meta object it recieved if you want your\n                  application to restore the page's previous scroll.");
+              }
+
+              if (!!meta && meta.suggestedAction === 'none') {
+                _this2.setState({
+                  pageKey: pageKey
+                });
+
+                _this2.scrollTo(posX, posY);
+              }
+            });
+        }
       } else {
-        this.reloadPage();
+        visit(pageKey, {
+          revisit: true
+        }).then(function (meta) {
+          if (meta === undefined) {
+            console.warn("scoll restoration was skipped. Your visit's then funtion\n              should return the meta object it recieved if you want your\n              application to restore the page's previous scroll.");
+          }
+
+          if (!!meta && meta.suggestedAction === 'none') {
+            _this2.setState({
+              pageKey: pageKey
+            });
+
+            _this2.scrollTo(posX, posY);
+          }
+        });
       }
     }
   };
 
-  _proto.reloadPage = function reloadPage() {
-    window.location.reload();
-  };
-
   _proto.notFound = function notFound(identifier) {
     var reminder = '';
 
@@ -149,10 +232,10 @@ var Nav = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.render = function render() {
-    var _this$props2 = this.props,
-        store = _this$props2.store,
-        visit = _this$props2.visit,
-        remote = _this$props2.remote;
+    var _this$props3 = this.props,
+        store = _this$props3.store,
+        visit = _this$props3.visit,
+        remote = _this$props3.remote;
     var _this$state = this.state,
         pageKey = _this$state.pageKey,
         ownProps = _this$state.ownProps;

package/index.js

@@ -198,7 +198,7 @@ var ApplicationBase = /*#__PURE__*/function (_React$Component) {
       visit: this.visit,
       remote: this.remote,
       store: this.store,
-      ujsAttributePrefix: 'data-bz'
+      ujsAttributePrefix: 'data-sg'
     });
     var _this$ujsHandlers = this.ujsHandlers,
         onClick = _this$ujsHandlers.onClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thoughtbot/superglue",
-  "version": "0.30.0",
+  "version": "0.40.0",
   "description": "Use a vanilla Rails with React and Redux",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "eslint-plugin-react": "^7.24.0",
     "fetch-headers": "^2.0.0",
     "fetch-mock": "^9.11.0",
-    "history": "^4.7.1",
+    "history": "^5.3.0",
     "html-react-parser": "^1.2.6",
     "jest": "^27.0.4",
     "node-fetch": "^2.6.1",
@@ -43,7 +43,7 @@
     "html-react-parser": ">=1.2.6",
     "react": ">=16",
     "redux": ">=4.1",
-    "history": "^4.7.1",
+    "history": "^5.3.0",
     "react-redux": ">=7.2",
     "redux-thunk": ">=2.3"
   },

package/utils/helpers.js

@@ -31,6 +31,8 @@ function argsForHistory(path) {
   var pageKey = (0, _url.urlToPageKey)(path);
   return [path, {
     superglue: true,
-    pageKey: pageKey
+    pageKey: pageKey,
+    posX: 0,
+    posY: 0
   }];
 }