@thoughtbot/superglue 0.30.0 → 0.41.0

package/README.md

@@ -60,7 +60,7 @@ A popular ask of SPAs is page-to-page navigation without reloading. This is
 easily done with Superglue's own UJS attributes inspired by Turbolinks:
 
 ```jsx
-  <a href='/posts' data-bz-visit={true} />
+  <a href='/posts' data-sg-visit={true} />
 ```
 
 The above will request for `/posts` with an `accept` of `application/json`, and
@@ -70,8 +70,8 @@ component the response asks for, and `pushState` on history.
 
 #### Partial updates
 Some features rely on updating some parts of the existing page. In
-addition to `data-bz-visit` and it's equivalent `this.props.visit`, Superglue
-also provides `data-bz-remote` or `this.props.remote`, which you can use to
+addition to `data-sg-visit` and it's equivalent `this.props.visit`, Superglue
+also provides `data-sg-remote` or `this.props.remote`, which you can use to
 update parts of your page in async fashion without changing `window.history`.
 
 Imagine having to implement search, where you enter some text, hit enter, and

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

@@ -9,8 +9,6 @@ var _utils = require("../utils");
 
 var _actions = require("../actions");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -33,11 +31,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 +59,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 +105,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 +123,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 +149,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 +230,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;
@@ -174,13 +255,5 @@ var Nav = /*#__PURE__*/function (_React$Component) {
   return Nav;
 }(_react["default"].Component);
 
-Nav.propTypes = {
-  store: _propTypes["default"].object,
-  history: _propTypes["default"].object,
-  mapping: _propTypes["default"].object,
-  visit: _propTypes["default"].func,
-  remote: _propTypes["default"].func,
-  initialPageKey: _propTypes["default"].string
-};
 var _default = Nav;
 exports["default"] = _default;

package/components/RailsTag.js

@@ -7,10 +7,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _htmlReactParser = _interopRequireWildcard(require("html-react-parser"));
 
-var _attributesToProps = _interopRequireDefault(require("html-react-parser/lib/attributes-to-props"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -48,7 +44,7 @@ var RailsTag = /*#__PURE__*/function (_React$Component) {
         children = domNode.children;
 
     if (!parent && type === 'tag') {
-      var nextProps = Object.assign({}, this.props, (0, _attributesToProps["default"])(attribs), {
+      var nextProps = Object.assign({}, this.props, (0, _htmlReactParser.attributesToProps)(attribs), {
         children: (0, _htmlReactParser.domToReact)(children)
       });
       delete nextProps.html;
@@ -65,7 +61,4 @@ var RailsTag = /*#__PURE__*/function (_React$Component) {
   return RailsTag;
 }(_react["default"].Component);
 
-exports["default"] = RailsTag;
-RailsTag.propTypes = {
-  html: _propTypes["default"].string
-};
+exports["default"] = RailsTag;

package/index.js

@@ -34,8 +34,6 @@ var _history = require("history");
 
 var _Nav = _interopRequireDefault(require("./components/Nav"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react2 = require("./utils/react");
 
 exports.mapStateToProps = _react2.mapStateToProps;
@@ -198,7 +196,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,
@@ -254,10 +252,4 @@ var ApplicationBase = /*#__PURE__*/function (_React$Component) {
   return ApplicationBase;
 }(_react["default"].Component);
 
-exports.ApplicationBase = ApplicationBase;
-ApplicationBase.propTypes = {
-  initialPage: _propTypes["default"].object,
-  baseUrl: _propTypes["default"].string,
-  path: _propTypes["default"].string,
-  appEl: _propTypes["default"].object
-};
+exports.ApplicationBase = ApplicationBase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thoughtbot/superglue",
-  "version": "0.30.0",
+  "version": "0.41.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",
@@ -40,15 +40,16 @@
     "redux-thunk": "^2.3.0"
   },
   "peerDependencies": {
+    "history": "^5.3.0",
     "html-react-parser": ">=1.2.6",
     "react": ">=16",
-    "redux": ">=4.1",
-    "history": "^4.7.1",
     "react-redux": ">=7.2",
+    "redux": ">=4.1",
     "redux-thunk": ">=2.3"
   },
   "dependencies": {
     "abortcontroller-polyfill": "^1.7.3",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "url-parse": "^1.5.1"
   }
 }

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
   }];
 }