@thoughtbot/superglue 0.0.0 → 0.30.0

package/README.md

@@ -0,0 +1,122 @@
+# Superglue
+
+Use classic Rails to build rich React Redux applications with **NO APIs** and
+**NO client-side routing**.
+
+[![Build Status](https://circleci.com/gh/thoughtbot/superglue.svg?style=shield)](https://circleci.com/gh/thoughtbot/superglue)
+
+Superglue is a React Redux starter and library inspired by Turbolinks and designed
+to complement classic Rails. You can enjoy the benefits of Redux state
+management and React components without giving up the productivity of Rails form
+helpers, UJS, tag helpers, the flash, cookie auth, and more.
+
+## Caution
+
+This project is in its early phases of development. Its interface, behavior,
+and name are likely to change drastically before a major version release.
+
+### No APIs
+
+Instead of APIs, Superglue leans on Rail's ability to respond to different
+[mime types](https://apidock.com/rails/ActionController/MimeResponds/InstanceMethods/respond_to)
+on the same route. In a Superglue application, if you direct your browser to
+`/dashboard.html`, you would see the HTML version of the content, and if you
+went to `/dashboard.json` you would see the JSON version of the exact same
+content down to the footer.
+
+The end result would be something like this:
+
+![No Apis](https://thoughtbot.github.io/superglue/images/no_apis.png)
+
+### Powered by Classic Rails
+Superglue is mostly classic Rails. Features like the flash, cookie auth, and URL
+helpers continue to be useful. Here's a look at the directory structure of a
+typical Rails application with Superglue.
+
+```
+MyRailsApp/
+  app/
+  views/
+  dashboard/
+    index.html.erb <- Mostly empty. Where `index.json.props` gets rendered as initial state
+    index.js <- Your page component, will receive `index.json.props`. Gets packaged with application.js
+    index.json.props <- will also respond to `.json` requests
+```
+
+### PropsTemplate
+Powering these JSON responses is PropsTemplate, a traversable JSON templating DSL
+inspired by JBuilder. With PropsTemplate you can specify a path of the node you
+want, and PropsTemplate will walk the tree to it, skipping the execution of nodes
+that don't match the keypath.
+
+![No Apis](https://thoughtbot.github.io/superglue/images/props_template.png)
+
+### All together now!
+Superglue comes with batteries that bring all the above concepts together to make
+building popular SPA features easy, painless, and productive.
+
+#### SPA Navigation
+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} />
+```
+
+The above will request for `/posts` with an `accept` of `application/json`, and
+when the client receives the response, swap out the current component for the
+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
+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
+results would show without reloading the screen. In traditional applications,
+you may need a new controller, routes, a discussion over versioning, JSON
+serializer, plenty of new JS code, etc.
+
+![haircuts](https://thoughtbot.github.io/superglue/images/haircuts.png)
+
+With Superglue, this can be done in one line:
+
+```javascript
+  this.props.remote('/dashboard?qry=haircut&props_at=data.header.search')
+```
+
+The above will make a request to `/dashboard?qry=haircut`, walk your props to
+the `data.header.search` node, return it in the response, and immutably graft it
+in the exact same path on the redux store before finally letting React
+re-render.
+
+For more on what you can do, check out our documentation.
+
+#### Server-Side Rendering
+Server-Side Rendering is supported via [Humid](https://github.com/thoughtbot/humid).
+See the [documentation for server-side rendering][ssr docs].
+
+  [ssr docs]: ./recipes/server-side-rendering.md
+
+## Documentation
+
+Documentation is hosted on [Github pages](https://thoughtbot.github.io/superglue).
+
+## Contributing
+
+See the [CONTRIBUTING] document. Thank you, [contributors]!
+
+  [CONTRIBUTING]: CONTRIBUTING.md
+  [contributors]: https://github.com/thoughtbot/superglue/graphs/contributors
+
+## Special Thanks
+
+Thanks to [jbuilder](https://github.com/rails/jbuilder),
+[scour](https://github.com/rstacruz/scour),
+[turbolinks3](https://github.com/turbolinks/turbolinks-classic),
+[turbograft](https://github.com/Shopify/turbograft/),
+[turbostreamer](https://github.com/malomalo/turbostreamer)
+
+

package/action_creators/index.js

@@ -0,0 +1,160 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {
+  copyPage: true,
+  saveResponse: true,
+  handleGraft: true,
+  saveAndProcessPage: true
+};
+exports.copyPage = copyPage;
+exports.handleGraft = handleGraft;
+exports.saveAndProcessPage = saveAndProcessPage;
+exports.saveResponse = saveResponse;
+
+var _utils = require("../utils");
+
+var _urlParse = _interopRequireDefault(require("url-parse"));
+
+var _actions = require("../actions");
+
+var _requests = require("./requests");
+
+Object.keys(_requests).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _requests[key]) return;
+  exports[key] = _requests[key];
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function copyPage(_ref) {
+  var from = _ref.from,
+      to = _ref.to;
+  return {
+    type: _actions.COPY_PAGE,
+    payload: {
+      from: from,
+      to: to
+    }
+  };
+}
+
+function saveResponse(_ref2) {
+  var pageKey = _ref2.pageKey,
+      page = _ref2.page;
+  pageKey = (0, _utils.urlToPageKey)(pageKey);
+  return {
+    type: _actions.SAVE_RESPONSE,
+    payload: {
+      pageKey: pageKey,
+      page: page
+    }
+  };
+}
+
+function handleGraft(_ref3) {
+  var pageKey = _ref3.pageKey,
+      page = _ref3.page;
+  pageKey = (0, _utils.urlToPageKey)(pageKey);
+  return {
+    type: _actions.HANDLE_GRAFT,
+    payload: {
+      pageKey: pageKey,
+      page: page
+    }
+  };
+}
+
+function fetchDeferments(pageKey, defers) {
+  if (defers === void 0) {
+    defers = [];
+  }
+
+  pageKey = (0, _utils.urlToPageKey)(pageKey);
+  return function (dispatch) {
+    var fetches = defers.filter(function (_ref4) {
+      var type = _ref4.type;
+      return type === 'auto';
+    }).map(function (_ref5) {
+      var url = _ref5.url,
+          _ref5$successAction = _ref5.successAction,
+          successAction = _ref5$successAction === void 0 ? _actions.GRAFTING_SUCCESS : _ref5$successAction,
+          _ref5$failAction = _ref5.failAction,
+          failAction = _ref5$failAction === void 0 ? _actions.GRAFTING_ERROR : _ref5$failAction;
+      var parsedUrl = new _urlParse["default"](url, true);
+      var keyPath = parsedUrl.query.props_at;
+      return dispatch((0, _requests.remote)(url, {
+        pageKey: pageKey
+      })).then(function () {
+        dispatch({
+          type: successAction,
+          payload: {
+            pageKey: pageKey,
+            keyPath: keyPath
+          }
+        });
+      })["catch"](function (err) {
+        dispatch({
+          type: failAction,
+          payload: {
+            url: url,
+            err: err,
+            pageKey: pageKey,
+            keyPath: keyPath
+          }
+        });
+      });
+    });
+    return Promise.all(fetches);
+  };
+}
+
+function updateFragmentsUsing(page) {
+  var changedFragments = {};
+  page.fragments.forEach(function (fragment) {
+    var type = fragment.type,
+        path = fragment.path;
+    changedFragments[type] = (0, _utils.getIn)(page, path);
+  });
+  return {
+    type: _actions.UPDATE_FRAGMENTS,
+    payload: {
+      changedFragments: changedFragments
+    }
+  };
+}
+
+function saveAndProcessPage(pageKey, page) {
+  return function (dispatch, getState) {
+    pageKey = (0, _utils.urlToPageKey)(pageKey);
+    var _page$defers = page.defers,
+        defers = _page$defers === void 0 ? [] : _page$defers;
+
+    if ((0, _utils.isGraft)(page)) {
+      dispatch(handleGraft({
+        pageKey: pageKey,
+        page: page
+      }));
+    } else {
+      dispatch(saveResponse({
+        pageKey: pageKey,
+        page: page
+      }));
+    }
+
+    var hasFetch = typeof fetch != 'undefined';
+
+    if (hasFetch) {
+      return dispatch(fetchDeferments(pageKey, defers)).then(function () {
+        if (page.fragments.length > 0) {
+          var finishedPage = getState().pages[pageKey];
+          return dispatch(updateFragmentsUsing(finishedPage));
+        }
+      });
+    } else {
+      return Promise.resolve();
+    }
+  };
+}

package/action_creators/requests.js

@@ -0,0 +1,207 @@
+"use strict";
+
+exports.__esModule = true;
+exports.clearFlash = clearFlash;
+exports.remote = remote;
+exports.visit = visit;
+
+var _utils = require("../utils");
+
+var _actions = require("../actions");
+
+var _index = require("./index");
+
+function beforeFetch(payload) {
+  return {
+    type: _actions.BEFORE_FETCH,
+    payload: payload
+  };
+}
+
+function handleError(err) {
+  return {
+    type: _actions.SUPERGLUE_ERROR,
+    payload: {
+      message: err.message
+    }
+  };
+}
+
+function handleFetchErr(err, fetchArgs, dispatch) {
+  err.fetchArgs = fetchArgs;
+  err.url = fetchArgs[0];
+  err.pageKey = (0, _utils.urlToPageKey)(fetchArgs[0]);
+  dispatch(handleError(err));
+  throw err;
+}
+
+function buildMeta(pageKey, page, state) {
+  var prevAssets = state.assets;
+  var nextAssets = page.assets;
+  return {
+    pageKey: pageKey,
+    page: page,
+    componentIdentifier: page.componentIdentifier,
+    needsRefresh: (0, _utils.needsRefresh)(prevAssets, nextAssets)
+  };
+}
+
+function clearFlash(_ref) {
+  var pageKey = _ref.pageKey;
+  return {
+    type: _actions.CLEAR_FLASH,
+    payload: {
+      pageKey: pageKey
+    }
+  };
+}
+
+function remote(path, _temp) {
+  var _ref2 = _temp === void 0 ? {} : _temp,
+      _ref2$method = _ref2.method,
+      method = _ref2$method === void 0 ? 'GET' : _ref2$method,
+      headers = _ref2.headers,
+      _ref2$body = _ref2.body,
+      body = _ref2$body === void 0 ? '' : _ref2$body,
+      pageKey = _ref2.pageKey,
+      _ref2$beforeSave = _ref2.beforeSave,
+      beforeSave = _ref2$beforeSave === void 0 ? function (prevPage, receivedPage) {
+    return receivedPage;
+  } : _ref2$beforeSave;
+
+  path = (0, _utils.withoutBusters)(path);
+  pageKey = pageKey && (0, _utils.urlToPageKey)(pageKey);
+  return function (dispatch, getState) {
+    var fetchArgs = (0, _utils.argsForFetch)(getState, path, {
+      method: method,
+      headers: headers,
+      body: body
+    });
+    pageKey = pageKey || getState().superglue.currentPageKey;
+    dispatch(beforeFetch({
+      fetchArgs: fetchArgs
+    }));
+    return fetch.apply(void 0, fetchArgs).then(_utils.parseResponse).then(function (_ref3) {
+      var rsp = _ref3.rsp,
+          json = _ref3.json;
+
+      var _getState = getState(),
+          superglue = _getState.superglue,
+          _getState$pages = _getState.pages,
+          pages = _getState$pages === void 0 ? {} : _getState$pages;
+
+      var meta = Object.assign({}, buildMeta(pageKey, json, superglue), {
+        redirected: rsp.redirected,
+        rsp: rsp,
+        fetchArgs: fetchArgs
+      });
+      var page = beforeSave(pages[pageKey], json);
+      return dispatch((0, _index.saveAndProcessPage)(pageKey, page)).then(function () {
+        meta.pageKey = pageKey;
+        return meta;
+      });
+    })["catch"](function (e) {
+      return handleFetchErr(e, fetchArgs, dispatch);
+    });
+  };
+}
+
+var lastVisitController = {
+  abort: function abort() {}
+};
+
+function visit(path, _temp2) {
+  var _ref4 = _temp2 === void 0 ? {} : _temp2,
+      _ref4$method = _ref4.method,
+      method = _ref4$method === void 0 ? 'GET' : _ref4$method,
+      headers = _ref4.headers,
+      _ref4$body = _ref4.body,
+      body = _ref4$body === void 0 ? '' : _ref4$body,
+      placeholderKey = _ref4.placeholderKey,
+      _ref4$beforeSave = _ref4.beforeSave,
+      beforeSave = _ref4$beforeSave === void 0 ? function (prevPage, receivedPage) {
+    return receivedPage;
+  } : _ref4$beforeSave;
+
+  path = (0, _utils.withoutBusters)(path);
+  var pageKey = (0, _utils.urlToPageKey)(path);
+  return function (dispatch, getState) {
+    var currentKey = getState().superglue.currentPageKey;
+    dispatch(clearFlash({
+      pageKey: currentKey
+    }));
+    placeholderKey = placeholderKey && (0, _utils.urlToPageKey)(placeholderKey);
+    var hasPlaceholder = !!getState().pages[placeholderKey];
+
+    if (placeholderKey && hasPlaceholder) {
+      dispatch((0, _index.copyPage)({
+        from: placeholderKey,
+        to: pageKey
+      }));
+    }
+
+    if (placeholderKey && !hasPlaceholder) {
+      console.warn("Could not find placeholder with key " + placeholderKey + " in state. The props_at param will be ignored");
+      path = (0, _utils.removePropsAt)(path);
+    }
+
+    if (!placeholderKey && (0, _utils.hasPropsAt)(path)) {
+      console.warn("visit was called with props_at param in the path " + path + ", this will be ignore unless you provide a placeholder.");
+      path = (0, _utils.removePropsAt)(path);
+    }
+
+    var controller = new AbortController();
+    var signal = controller.signal;
+    var fetchArgs = (0, _utils.argsForFetch)(getState, path, {
+      headers: headers,
+      body: body,
+      method: method,
+      signal: signal
+    });
+    dispatch(beforeFetch({
+      fetchArgs: fetchArgs
+    }));
+    lastVisitController.abort();
+    lastVisitController = controller;
+    return fetch.apply(void 0, fetchArgs).then(_utils.parseResponse).then(function (_ref5) {
+      var rsp = _ref5.rsp,
+          json = _ref5.json;
+
+      var _getState2 = getState(),
+          superglue = _getState2.superglue,
+          _getState2$pages = _getState2.pages,
+          pages = _getState2$pages === void 0 ? {} : _getState2$pages;
+
+      var meta = Object.assign({}, buildMeta(pageKey, json, superglue), {
+        redirected: rsp.redirected,
+        rsp: rsp,
+        fetchArgs: fetchArgs
+      });
+      meta.suggestedAction = 'push';
+
+      if (!rsp.redirected && fetchArgs[1].method != 'GET') {
+        meta.suggestedAction = 'replace';
+      }
+
+      if (method !== 'GET') {
+        var contentLocation = rsp.headers.get('content-location');
+
+        if (contentLocation) {
+          pageKey = (0, _utils.urlToPageKey)(contentLocation);
+        }
+      }
+
+      if (rsp.redirected) {
+        pageKey = (0, _utils.urlToPageKey)(rsp.url);
+      }
+
+      var page = beforeSave(pages[pageKey], json);
+      return dispatch((0, _index.saveAndProcessPage)(pageKey, page)).then(function () {
+        meta.pageKey = pageKey;
+        return meta;
+      });
+    })["catch"](function (e) {
+      return handleFetchErr(e, fetchArgs, dispatch);
+    });
+  };
+}

package/actions.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.UPDATE_FRAGMENTS = exports.SUPERGLUE_ERROR = exports.SET_CSRF_TOKEN = exports.SAVE_RESPONSE = exports.REMOVE_PAGE = exports.HISTORY_CHANGE = exports.HANDLE_GRAFT = exports.GRAFTING_SUCCESS = exports.GRAFTING_ERROR = exports.COPY_PAGE = exports.CLEAR_FLASH = exports.BEFORE_FETCH = void 0;
+var BEFORE_FETCH = '@@superglue/BEFORE_FETCH';
+exports.BEFORE_FETCH = BEFORE_FETCH;
+var SAVE_RESPONSE = '@@superglue/SAVE_RESPONSE';
+exports.SAVE_RESPONSE = SAVE_RESPONSE;
+var HANDLE_GRAFT = '@@superglue/HANDLE_GRAFT';
+exports.HANDLE_GRAFT = HANDLE_GRAFT;
+var CLEAR_FLASH = '@@superglue/CLEAR_FLASH';
+exports.CLEAR_FLASH = CLEAR_FLASH;
+var SUPERGLUE_ERROR = '@@superglue/ERROR';
+exports.SUPERGLUE_ERROR = SUPERGLUE_ERROR;
+var GRAFTING_ERROR = '@@superglue/GRAFTING_ERROR';
+exports.GRAFTING_ERROR = GRAFTING_ERROR;
+var GRAFTING_SUCCESS = '@@superglue/GRAFTING_SUCCESS';
+exports.GRAFTING_SUCCESS = GRAFTING_SUCCESS;
+var HISTORY_CHANGE = '@@superglue/HISTORY_CHANGE';
+exports.HISTORY_CHANGE = HISTORY_CHANGE;
+var SET_CSRF_TOKEN = '@@superglue/SET_CSRF_TOKEN';
+exports.SET_CSRF_TOKEN = SET_CSRF_TOKEN;
+var REMOVE_PAGE = '@@superglue/REMOVE_PAGE';
+exports.REMOVE_PAGE = REMOVE_PAGE;
+var COPY_PAGE = '@@superglue/COPY_PAGE';
+exports.COPY_PAGE = COPY_PAGE;
+var UPDATE_FRAGMENTS = '@@superglue/UPDATE_FRAGMENTS';
+exports.UPDATE_FRAGMENTS = UPDATE_FRAGMENTS;

package/components/Nav.js

@@ -0,0 +1,186 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var Nav = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Nav, _React$Component);
+
+  function Nav(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    var _this$props = _this.props,
+        history = _this$props.history,
+        initialPageKey = _this$props.initialPageKey;
+    _this.history = history;
+    _this.navigateTo = _this.navigateTo.bind(_assertThisInitialized(_this));
+    _this.onHistoryChange = _this.onHistoryChange.bind(_assertThisInitialized(_this));
+    _this.state = {
+      pageKey: initialPageKey,
+      ownProps: {}
+    };
+    return _this;
+  }
+
+  var _proto = Nav.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.unsubscribeHistory = this.history.listen(this.onHistoryChange);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.unsubscribeHistory();
+  };
+
+  _proto.navigateTo = function navigateTo(path, _temp) {
+    var _ref = _temp === void 0 ? {
+      action: 'push',
+      ownProps: {}
+    } : _temp,
+        action = _ref.action,
+        ownProps = _ref.ownProps;
+
+    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 historyArgs = [path, {
+        pageKey: nextPageKey,
+        superglue: true
+      }];
+
+      if (action === 'push') {
+        var _this$history;
+
+        (_this$history = this.history).push.apply(_this$history, historyArgs);
+      }
+
+      if (action === 'replace') {
+        var _this$history2;
+
+        (_this$history2 = this.history).replace.apply(_this$history2, historyArgs);
+      }
+
+      this.setState({
+        pageKey: nextPageKey,
+        ownProps: ownProps
+      });
+
+      if (action === 'replace' && prevPageKey && prevPageKey !== nextPageKey) {
+        store.dispatch({
+          type: _actions.REMOVE_PAGE,
+          payload: {
+            pageKey: prevPageKey
+          }
+        });
+      }
+
+      return true;
+    } else {
+      console.warn("`navigateTo` was called , but could not find.\n        the pageKey in the store. This may happen when the wrong\n        content_location was set in your non-get controller action.\n        No navigation will take place");
+      return false;
+    }
+  };
+
+  _proto.onHistoryChange = function onHistoryChange(location) {
+    var store = this.props.store;
+    var pathname = location.pathname,
+        search = location.search,
+        hash = location.hash,
+        state = location.state;
+
+    if (state && state.superglue) {
+      store.dispatch({
+        type: _actions.HISTORY_CHANGE,
+        payload: {
+          pathname: pathname,
+          search: search,
+          hash: hash
+        }
+      });
+      var pageKey = state.pageKey;
+      var containsKey = !!store.getState().pages[pageKey];
+
+      if (containsKey) {
+        this.setState({
+          pageKey: pageKey
+        });
+      } else {
+        this.reloadPage();
+      }
+    }
+  };
+
+  _proto.reloadPage = function reloadPage() {
+    window.location.reload();
+  };
+
+  _proto.notFound = function notFound(identifier) {
+    var reminder = '';
+
+    if (!identifier) {
+      reminder = 'Did you forget to add `json.component_identifier` in your application.json.props layout?';
+    }
+
+    var error = new Error("Superglue Nav component was looking for " + identifier + " but could not find it in your mapping. " + reminder);
+    throw error;
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        store = _this$props2.store,
+        visit = _this$props2.visit,
+        remote = _this$props2.remote;
+    var _this$state = this.state,
+        pageKey = _this$state.pageKey,
+        ownProps = _this$state.ownProps;
+    var componentIdentifier = store.getState().pages[pageKey].componentIdentifier;
+    var Component = this.props.mapping[componentIdentifier];
+
+    if (Component) {
+      return /*#__PURE__*/_react["default"].createElement(Component, _extends({
+        pageKey: pageKey,
+        navigateTo: this.navigateTo,
+        visit: visit,
+        remote: remote
+      }, ownProps));
+    } else {
+      this.notFound(componentIdentifier);
+    }
+  };
+
+  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;