@thoughtbot/superglue 0.54.0 → 1.0.0

package/dist/cjs/superglue.cjs

@@ -30,25 +30,39 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // lib/index.tsx
 var lib_exports = {};
 __export(lib_exports, {
-  ApplicationBase: () => ApplicationBase,
-  BEFORE_FETCH: () => BEFORE_FETCH,
-  BEFORE_REMOTE: () => BEFORE_REMOTE,
-  BEFORE_VISIT: () => BEFORE_VISIT,
-  COPY_PAGE: () => COPY_PAGE,
+  Application: () => Application,
   GRAFTING_ERROR: () => GRAFTING_ERROR,
   GRAFTING_SUCCESS: () => GRAFTING_SUCCESS,
-  HISTORY_CHANGE: () => HISTORY_CHANGE,
-  REMOVE_PAGE: () => REMOVE_PAGE,
-  SAVE_RESPONSE: () => SAVE_RESPONSE,
-  UPDATE_FRAGMENTS: () => UPDATE_FRAGMENTS,
-  fragmentMiddleware: () => fragmentMiddleware,
+  NavigationContext: () => NavigationContext,
+  NavigationProvider: () => NavigationProvider,
+  beforeFetch: () => beforeFetch,
+  beforeRemote: () => beforeRemote,
+  beforeVisit: () => beforeVisit,
+  copyPage: () => copyPage,
   getIn: () => getIn,
-  urlToPageKey: () => urlToPageKey
+  pageReducer: () => pageReducer,
+  prepareStore: () => prepareStore,
+  removePage: () => removePage,
+  rootReducer: () => rootReducer,
+  saveAndProcessPage: () => saveAndProcessPage,
+  saveResponse: () => saveResponse,
+  setup: () => setup,
+  superglueReducer: () => superglueReducer,
+  updateFragments: () => updateFragments,
+  urlToPageKey: () => urlToPageKey,
+  useContent: () => useContent,
+  useSuperglue: () => useSuperglue
 });
 module.exports = __toCommonJS(lib_exports);
 var import_react2 = __toESM(require("react"));
 var import_url_parse4 = __toESM(require("url-parse"));
 
+// lib/config.ts
+var config = {
+  baseUrl: "",
+  maxPages: 20
+};
+
 // lib/utils/url.ts
 var import_url_parse = __toESM(require("url-parse"));
 function pathQuery(url) {
@@ -59,6 +73,11 @@ function pathQueryHash(url) {
   const { pathname, query, hash } = new import_url_parse.default(url, {});
   return pathname + query + hash;
 }
+function propsAtParam(url) {
+  const parsed = new import_url_parse.default(url, {}, true);
+  const query = parsed.query;
+  return query["props_at"];
+}
 function withFormatJson(url) {
   const parsed = new import_url_parse.default(url, {}, true);
   parsed.query["format"] = "json";
@@ -96,6 +115,13 @@ function formatForXHR(url) {
   const formats = [withoutHash, withFormatJson];
   return formats.reduce((memo, f) => f(memo), url);
 }
+function parsePageKey(pageKey) {
+  const { pathname, query } = new import_url_parse.default(pageKey, {}, true);
+  return {
+    pathname,
+    search: query
+  };
+}
 
 // lib/utils/helpers.ts
 function argsForHistory(path) {
@@ -224,260 +250,8 @@ function setIn(object, path, value) {
   return results[0];
 }
 
-// lib/action_creators/index.ts
-var import_url_parse2 = __toESM(require("url-parse"));
-
-// lib/actions.ts
-var actions_exports = {};
-__export(actions_exports, {
-  BEFORE_FETCH: () => BEFORE_FETCH,
-  BEFORE_REMOTE: () => BEFORE_REMOTE,
-  BEFORE_VISIT: () => BEFORE_VISIT,
-  COPY_PAGE: () => COPY_PAGE,
-  GRAFTING_ERROR: () => GRAFTING_ERROR,
-  GRAFTING_SUCCESS: () => GRAFTING_SUCCESS,
-  HANDLE_GRAFT: () => HANDLE_GRAFT,
-  HISTORY_CHANGE: () => HISTORY_CHANGE,
-  REMOVE_PAGE: () => REMOVE_PAGE,
-  SAVE_RESPONSE: () => SAVE_RESPONSE,
-  SET_CSRF_TOKEN: () => SET_CSRF_TOKEN,
-  SUPERGLUE_ERROR: () => SUPERGLUE_ERROR,
-  UPDATE_FRAGMENTS: () => UPDATE_FRAGMENTS
-});
-var BEFORE_FETCH = "@@superglue/BEFORE_FETCH";
-var BEFORE_VISIT = "@@superglue/BEFORE_VISIT";
-var BEFORE_REMOTE = "@@superglue/BEFORE_REMOTE";
-var SAVE_RESPONSE = "@@superglue/SAVE_RESPONSE";
-var HANDLE_GRAFT = "@@superglue/HANDLE_GRAFT";
-var SUPERGLUE_ERROR = "@@superglue/ERROR";
-var GRAFTING_ERROR = "@@superglue/GRAFTING_ERROR";
-var GRAFTING_SUCCESS = "@@superglue/GRAFTING_SUCCESS";
-var HISTORY_CHANGE = "@@superglue/HISTORY_CHANGE";
-var SET_CSRF_TOKEN = "@@superglue/SET_CSRF_TOKEN";
-var REMOVE_PAGE = "@@superglue/REMOVE_PAGE";
-var COPY_PAGE = "@@superglue/COPY_PAGE";
-var UPDATE_FRAGMENTS = "@@superglue/UPDATE_FRAGMENTS";
-
-// lib/action_creators/requests.ts
-function beforeRemote(payload) {
-  return {
-    type: BEFORE_REMOTE,
-    payload
-  };
-}
-function beforeFetch(payload) {
-  return {
-    type: BEFORE_FETCH,
-    payload
-  };
-}
-function handleError(err) {
-  return {
-    type: SUPERGLUE_ERROR,
-    payload: {
-      message: err.message
-    }
-  };
-}
-function handleFetchErr(err, fetchArgs, dispatch) {
-  dispatch(handleError(err));
-  throw err;
-}
-function buildMeta(pageKey, page, state, rsp, fetchArgs) {
-  const { assets: prevAssets } = state;
-  const { assets: nextAssets } = page;
-  return {
-    pageKey,
-    page,
-    redirected: rsp.redirected,
-    rsp,
-    fetchArgs,
-    componentIdentifier: page.componentIdentifier,
-    needsRefresh: needsRefresh(prevAssets, nextAssets)
-  };
-}
-var remote = (path, {
-  method = "GET",
-  headers,
-  body,
-  pageKey: rawPageKey,
-  beforeSave = (prevPage, receivedPage) => receivedPage
-} = {}) => {
-  path = withoutBusters(path);
-  rawPageKey = rawPageKey && urlToPageKey(rawPageKey);
-  return (dispatch, getState) => {
-    const fetchArgs = argsForFetch(getState, path, {
-      method,
-      headers,
-      body
-    });
-    if (rawPageKey === void 0) {
-      rawPageKey = getState().superglue.currentPageKey;
-    }
-    const pageKey = rawPageKey;
-    const currentPageKey = getState().superglue.currentPageKey;
-    dispatch(beforeRemote({ currentPageKey, fetchArgs }));
-    dispatch(beforeFetch({ fetchArgs }));
-    return fetch(...fetchArgs).then(parseResponse).then(({ rsp, json }) => {
-      const { superglue, pages = {} } = getState();
-      const meta = buildMeta(pageKey, json, superglue, rsp, fetchArgs);
-      const willReplaceCurrent = pageKey == currentPageKey;
-      const existingId = pages[currentPageKey]?.componentIdentifier;
-      const receivedId = json.componentIdentifier;
-      if (willReplaceCurrent && !!existingId && existingId != receivedId) {
-        console.warn(
-          `You're about replace an existing page located at pages["${currentPageKey}"]
-that has the componentIdentifier "${existingId}" with the contents of a
-received page that has a componentIdentifier of "${receivedId}".
-
-This can happen if you're using data-sg-remote or remote but your response
-redirected to a completely different page. Since remote requests do not
-navigate or change the current page component, your current page component may
-receive a shape that is unexpected and cause issues with rendering.
-
-Consider using data-sg-visit, the visit function, or redirect_back.`
-        );
-      }
-      const page = beforeSave(pages[pageKey], json);
-      return dispatch(saveAndProcessPage(pageKey, page)).then(() => meta);
-    }).catch((e) => handleFetchErr(e, fetchArgs, dispatch));
-  };
-};
-
-// lib/action_creators/index.ts
-function copyPage({
-  from,
-  to
-}) {
-  return {
-    type: COPY_PAGE,
-    payload: {
-      from,
-      to
-    }
-  };
-}
-function saveResponse({
-  pageKey,
-  page
-}) {
-  pageKey = urlToPageKey(pageKey);
-  return {
-    type: SAVE_RESPONSE,
-    payload: {
-      pageKey,
-      page
-    }
-  };
-}
-function handleGraft({
-  pageKey,
-  page
-}) {
-  pageKey = urlToPageKey(pageKey);
-  return {
-    type: HANDLE_GRAFT,
-    payload: {
-      pageKey,
-      page
-    }
-  };
-}
-function fetchDeferments(pageKey, defers = []) {
-  pageKey = urlToPageKey(pageKey);
-  return (dispatch) => {
-    const fetches = defers.filter(({ type }) => type === "auto").map(function({
-      url,
-      successAction = GRAFTING_SUCCESS,
-      failAction = GRAFTING_ERROR
-    }) {
-      const parsedUrl = new import_url_parse2.default(url, true);
-      const keyPath = parsedUrl.query.props_at;
-      return dispatch(remote(url, { pageKey })).then(() => {
-        dispatch({
-          type: successAction,
-          payload: {
-            pageKey,
-            keyPath
-          }
-        });
-      }).catch((err) => {
-        dispatch({
-          type: failAction,
-          payload: {
-            url,
-            err,
-            pageKey,
-            keyPath
-          }
-        });
-      });
-    });
-    return Promise.all(fetches);
-  };
-}
-function updateFragmentsUsing(page) {
-  const changedFragments = {};
-  page.fragments.forEach((fragment) => {
-    const { type, path } = fragment;
-    changedFragments[type] = getIn(page, path);
-  });
-  return {
-    type: UPDATE_FRAGMENTS,
-    payload: { changedFragments }
-  };
-}
-function saveAndProcessPage(pageKey, page) {
-  return (dispatch, getState) => {
-    pageKey = urlToPageKey(pageKey);
-    const { defers = [] } = page;
-    if ("action" in page) {
-      dispatch(handleGraft({ pageKey, page }));
-    } else {
-      dispatch(saveResponse({ pageKey, page }));
-    }
-    const hasFetch = typeof fetch != "undefined";
-    if (hasFetch) {
-      return dispatch(fetchDeferments(pageKey, defers)).then(() => {
-        if (page.fragments.length > 0) {
-          const finishedPage = getState().pages[pageKey];
-          dispatch(updateFragmentsUsing(finishedPage));
-          return Promise.resolve();
-        }
-      });
-    } else {
-      return Promise.resolve();
-    }
-  };
-}
-
-// lib/utils/react.ts
-function mapStateToProps(state, ownProps) {
-  let pageKey = ownProps.pageKey;
-  const params = ownProps;
-  const csrfToken = state.superglue.csrfToken;
-  pageKey = urlToPageKey(pageKey);
-  const { data, fragments } = state.pages[pageKey] || {
-    data: {},
-    fragments: []
-  };
-  return { ...data, ...params, pageKey, csrfToken, fragments };
-}
-var mapDispatchToProps = {
-  saveAndProcessPage,
-  copyPage
-};
-
-// lib/utils/request.ts
-var import_url_parse3 = __toESM(require("url-parse"));
-
-// lib/config.ts
-var config = {
-  baseUrl: "",
-  maxPages: 20
-};
-
 // lib/utils/request.ts
+var import_url_parse2 = __toESM(require("url-parse"));
 function isValidResponse(xhr) {
   return isValidContent(xhr) && !downloadingFile(xhr);
 }
@@ -508,7 +282,7 @@ function validateResponse(args) {
 }
 function handleServerErrors(args) {
   const { rsp } = args;
-  if (!rsp.ok) {
+  if (!rsp.ok && rsp.status !== 422) {
     if (rsp.status === 406) {
       console.error(
         "Superglue encountered a 406 Not Acceptable response. This can happen if you used respond_to and didn't specify format.json in the block. Try adding it to your respond_to. For example:\n\nrespond_to do |format|\n  format.html\n  format.json\n  format.csv\nend"
@@ -520,7 +294,13 @@ function handleServerErrors(args) {
   }
   return args;
 }
-function argsForFetch(getState, pathQuery2, { method = "GET", headers = {}, body = "", signal } = {}) {
+function argsForFetch(getState, pathQuery2, {
+  method = "GET",
+  headers = {},
+  body = "",
+  signal,
+  ...rest
+} = {}) {
   method = method.toUpperCase();
   const currentState = getState().superglue;
   const nextHeaders = { ...headers };
@@ -536,7 +316,7 @@ function argsForFetch(getState, pathQuery2, { method = "GET", headers = {}, body
   if (currentState.csrfToken) {
     nextHeaders["x-csrf-token"] = currentState.csrfToken;
   }
-  const fetchPath = new import_url_parse3.default(
+  const fetchPath = new import_url_parse2.default(
     formatForXHR(pathQuery2),
     config.baseUrl || {},
     true
@@ -554,7 +334,7 @@ function argsForFetch(getState, pathQuery2, { method = "GET", headers = {}, body
     signal
   };
   if (currentState.currentPageKey) {
-    const referrer = new import_url_parse3.default(
+    const referrer = new import_url_parse2.default(
       currentState.currentPageKey,
       config.baseUrl || {},
       false
@@ -571,7 +351,7 @@ function argsForFetch(getState, pathQuery2, { method = "GET", headers = {}, body
     }
     delete options.body;
   }
-  return [fetchPath.toString(), options];
+  return [fetchPath.toString(), { ...options, ...rest }];
 }
 function extractJSON(rsp) {
   return rsp.json().then((json) => {
@@ -590,10 +370,12 @@ var HandlerBuilder = class {
   constructor({
     ujsAttributePrefix,
     visit,
-    remote: remote2
+    remote: remote2,
+    store
   }) {
     this.attributePrefix = ujsAttributePrefix;
     this.isUJS = this.isUJS.bind(this);
+    this.store = store;
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.visit = visit;
@@ -607,7 +389,7 @@ var HandlerBuilder = class {
     }
   }
   isNonStandardClick(event) {
-    return event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    return event.button > 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
   }
   isUJS(node) {
     const hasVisit = !!node.getAttribute(this.attributePrefix + "-visit");
@@ -652,18 +434,17 @@ var HandlerBuilder = class {
     this.visitOrRemote(link, url, { method: "GET" });
   }
   visitOrRemote(linkOrForm, url, opts) {
+    const dataset = { ...linkOrForm.dataset };
     if (linkOrForm.getAttribute(this.attributePrefix + "-visit")) {
-      const nextOpts = { ...opts };
-      const placeholderKey = linkOrForm.getAttribute(
-        this.attributePrefix + "-placeholder"
-      );
-      if (placeholderKey) {
-        nextOpts.placeholderKey = urlToPageKey(placeholderKey);
-      }
-      return this.visit(url, { ...nextOpts });
+      this.visit(url, { ...opts, dataset });
     }
     if (linkOrForm.getAttribute(this.attributePrefix + "-remote")) {
-      return this.remote(url, opts);
+      const { currentPageKey } = this.store.getState().superglue;
+      this.remote(url, {
+        ...opts,
+        pageKey: currentPageKey,
+        dataset
+      });
     }
   }
   handlers() {
@@ -676,12 +457,14 @@ var HandlerBuilder = class {
 var ujsHandlers = ({
   ujsAttributePrefix,
   visit,
-  remote: remote2
+  remote: remote2,
+  store
 }) => {
   const builder = new HandlerBuilder({
     visit,
     remote: remote2,
-    ujsAttributePrefix
+    ujsAttributePrefix,
+    store
   });
   return builder.handlers();
 };
@@ -696,239 +479,361 @@ function needsRefresh(prevAssets, newAssets) {
   }
 }
 
-// lib/reducers/index.ts
-function addPlaceholdersToDeferredNodes(existingPage, page) {
-  const { defers = [] } = existingPage;
-  const prevDefers = defers.map(({ path }) => {
-    const node = getIn(existingPage, path);
-    const copy = JSON.stringify(node);
-    return [path, JSON.parse(copy)];
-  });
-  return prevDefers.reduce((memo, [path, node]) => {
-    return setIn(page, path, node);
-  }, page);
-}
-function constrainPagesSize(state) {
-  const { maxPages } = config;
-  const allPageKeys = Object.keys(state);
-  const cacheTimesRecentFirst = allPageKeys.map((key) => state[key].savedAt).sort((a, b) => b - a);
-  for (const key of Array.from(allPageKeys)) {
-    if (state[key].savedAt <= cacheTimesRecentFirst[maxPages - 1]) {
-      delete state[key];
-    }
+// lib/action_creators/index.ts
+var import_url_parse3 = __toESM(require("url-parse"));
+
+// lib/actions.ts
+var import_toolkit = require("@reduxjs/toolkit");
+var GRAFTING_ERROR = "@@superglue/GRAFTING_ERROR";
+var GRAFTING_SUCCESS = "@@superglue/GRAFTING_SUCCESS";
+var saveResponse = (0, import_toolkit.createAction)(
+  "@@superglue/SAVE_RESPONSE",
+  ({ pageKey, page }) => {
+    pageKey = urlToPageKey(pageKey);
+    return {
+      payload: {
+        pageKey,
+        page
+      }
+    };
+  }
+);
+var handleGraft = (0, import_toolkit.createAction)(
+  "@@superglue/HANDLE_GRAFT",
+  ({ pageKey, page }) => {
+    pageKey = urlToPageKey(pageKey);
+    return {
+      payload: {
+        page,
+        pageKey
+      }
+    };
   }
+);
+var superglueError = (0, import_toolkit.createAction)(
+  "@@superglue/ERROR"
+);
+var updateFragments = (0, import_toolkit.createAction)("@@superglue/UPDATE_FRAGMENTS");
+var copyPage = (0, import_toolkit.createAction)(
+  "@@superglue/COPY_PAGE"
+);
+var removePage = (0, import_toolkit.createAction)(
+  "@@superglue/REMOVE_PAGE"
+);
+var beforeFetch = (0, import_toolkit.createAction)(
+  "@@superglue/BEFORE_FETCH"
+);
+var beforeVisit = (0, import_toolkit.createAction)("@@superglue/BEFORE_VISIT");
+var beforeRemote = (0, import_toolkit.createAction)("@@superglue/BEFORE_REMOTE");
+var setCSRFToken = (0, import_toolkit.createAction)("@@superglue/SET_CSRF_TOKEN");
+var historyChange = (0, import_toolkit.createAction)("@@superglue/HISTORY_CHANGE");
+var setActivePage = (0, import_toolkit.createAction)("@@superglue/SET_ACTIVE_PAGE");
+
+// lib/action_creators/requests.ts
+function handleFetchErr(err, fetchArgs, dispatch) {
+  dispatch(superglueError({ message: err.message }));
+  throw err;
 }
-function saveResponse2(state, pageKey, page) {
-  state = { ...state };
-  let nextPage = {
+function buildMeta(pageKey, page, state, rsp, fetchArgs) {
+  const { assets: prevAssets } = state;
+  const { assets: nextAssets } = page;
+  return {
     pageKey,
-    ...page,
-    savedAt: Date.now()
+    page,
+    redirected: rsp.redirected,
+    rsp,
+    fetchArgs,
+    componentIdentifier: page.componentIdentifier,
+    needsRefresh: needsRefresh(prevAssets, nextAssets)
   };
-  const existingPage = state[pageKey];
-  if (existingPage) {
-    nextPage = addPlaceholdersToDeferredNodes(existingPage, nextPage);
-  }
-  constrainPagesSize(state);
-  state[pageKey] = nextPage;
-  return state;
 }
-function appendReceivedFragmentsOntoPage(state, pageKey, receivedFragments) {
-  if (!pageKey) {
-    return state;
-  }
-  if (receivedFragments.length === 0) {
-    return state;
+var MismatchedComponentError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "MismatchedComponentError";
   }
-  const currentPage = state[pageKey];
-  const { fragments: prevFragments = [] } = currentPage;
-  const nextFragments = [...prevFragments];
-  const existingKeys = {};
-  prevFragments.forEach((frag) => existingKeys[frag.path] = true);
-  receivedFragments.forEach((frag) => {
-    if (!existingKeys[frag.path]) {
-      nextFragments.push(frag);
-    }
-  });
-  const nextPage = {
-    ...currentPage,
-    fragments: nextFragments
-  };
-  const nextState = { ...state };
-  nextState[pageKey] = nextPage;
-  return nextState;
-}
-function graftNodeOntoPage(state, pageKey, node, pathToNode) {
-  if (!node) {
-    console.warn(
-      "There was no node returned in the response. Do you have the correct key path in your props_at?"
-    );
-    return state;
+};
+var remote = (path, {
+  pageKey: targetPageKey,
+  force = false,
+  beforeSave = (prevPage, receivedPage) => receivedPage,
+  ...rest
+} = {}) => {
+  path = withoutBusters(path);
+  targetPageKey = targetPageKey && urlToPageKey(targetPageKey);
+  return (dispatch, getState) => {
+    const fetchArgs = argsForFetch(getState, path, rest);
+    const currentPageKey = getState().superglue.currentPageKey;
+    dispatch(beforeRemote({ currentPageKey, fetchArgs }));
+    dispatch(beforeFetch({ fetchArgs }));
+    return fetch(...fetchArgs).then(parseResponse).then(({ rsp, json }) => {
+      const { superglue, pages = {} } = getState();
+      let pageKey;
+      if (targetPageKey === void 0) {
+        const isGet = fetchArgs[1].method === "GET";
+        pageKey = calculatePageKey(rsp, isGet, currentPageKey);
+      } else {
+        pageKey = targetPageKey;
+      }
+      const meta = buildMeta(pageKey, json, superglue, rsp, fetchArgs);
+      const existingId = pages[pageKey]?.componentIdentifier;
+      const receivedId = json.componentIdentifier;
+      if (!!existingId && existingId != receivedId && !force) {
+        const message = `You cannot replace or update an existing page
+located at pages["${currentPageKey}"] that has a componentIdentifier
+of "${existingId}" with the contents of a page response that has a
+componentIdentifier of "${receivedId}".
+
+This can happen if you're using data-sg-remote or remote but your
+response redirected to a page with a different componentIdentifier
+than the target page.             
+
+This limitation exists because the resulting page shape from grafting
+"${receivedId}"'s "${propsAtParam(path)}" into "${existingId}" may not be
+compatible with the page component associated with "${existingId}".
+
+Consider using data-sg-visit, the visit function, or redirect_back to
+the same page. Or if you're sure you want to proceed, use force: true.
+          `;
+        throw new MismatchedComponentError(message);
+      }
+      const page = beforeSave(pages[pageKey], json);
+      return dispatch(saveAndProcessPage(pageKey, page)).then(() => meta);
+    }).catch((e) => handleFetchErr(e, fetchArgs, dispatch));
+  };
+};
+function calculatePageKey(rsp, isGet, currentPageKey) {
+  let pageKey = urlToPageKey(rsp.url);
+  if (!isGet && !rsp.redirected) {
+    pageKey = currentPageKey;
   }
-  if (!pathToNode || !pageKey) {
-    return state;
+  const contentLocation = rsp.headers.get("content-location");
+  if (contentLocation) {
+    pageKey = urlToPageKey(contentLocation);
   }
-  const fullPathToNode = [pageKey, pathToNode].join(".");
-  return setIn(state, fullPathToNode, node);
+  return pageKey;
 }
-function handleGraft2(state, pageKey, page) {
-  const currentPage = state[pageKey];
-  if (!currentPage) {
-    const error = new Error(
-      `Superglue was looking for ${pageKey} in your state, but could not find it in your mapping. Did you forget to pass in a valid pageKey to this.props.remote or this.props.visit?`
-    );
-    throw error;
-  }
-  const {
-    data: receivedNode,
-    path: pathToNode,
-    fragments: receivedFragments = []
-  } = page;
-  return [
-    (nextState) => graftNodeOntoPage(nextState, pageKey, receivedNode, pathToNode),
-    (nextState) => appendReceivedFragmentsOntoPage(nextState, pageKey, receivedFragments)
-  ].reduce((memo, fn) => fn(memo), state);
-}
-function pageReducer(state = {}, action) {
-  switch (action.type) {
-    case SAVE_RESPONSE: {
-      const { pageKey, page } = action.payload;
-      return saveResponse2(state, pageKey, page);
-    }
-    case HANDLE_GRAFT: {
-      const { pageKey, page } = action.payload;
-      return handleGraft2(state, pageKey, page);
-    }
-    case UPDATE_FRAGMENTS: {
-      const { changedFragments } = action.payload;
-      let nextState = state;
-      Object.entries(state).forEach(([pageKey, page]) => {
-        page.fragments.forEach((fragment) => {
-          const { type, path } = fragment;
-          const changedNode = changedFragments[type];
-          const currentNode = getIn(nextState, `${pageKey}.${path}`);
-          if (type in changedFragments && changedNode !== currentNode) {
-            const nextNode = JSON.parse(JSON.stringify(changedNode));
-            nextState = setIn(nextState, `${pageKey}.${path}`, nextNode);
+
+// lib/action_creators/index.ts
+function fetchDeferments(pageKey, defers = []) {
+  pageKey = urlToPageKey(pageKey);
+  return (dispatch) => {
+    const fetches = defers.filter(({ type }) => type === "auto").map(function({
+      url,
+      successAction = GRAFTING_SUCCESS,
+      failAction = GRAFTING_ERROR
+    }) {
+      const parsedUrl = new import_url_parse3.default(url, true);
+      const keyPath = parsedUrl.query.props_at;
+      return dispatch(remote(url, { pageKey })).then(() => {
+        dispatch({
+          type: successAction,
+          payload: {
+            pageKey,
+            keyPath
+          }
+        });
+      }).catch((err) => {
+        dispatch({
+          type: failAction,
+          payload: {
+            url,
+            err,
+            pageKey,
+            keyPath
           }
         });
       });
-      return nextState;
-    }
-    case COPY_PAGE: {
-      const nextState = { ...state };
-      const { from, to } = action.payload;
-      nextState[urlToPageKey(to)] = JSON.parse(JSON.stringify(nextState[from]));
-      return nextState;
-    }
-    case REMOVE_PAGE: {
-      const { pageKey } = action.payload;
-      const nextState = { ...state };
-      delete nextState[pageKey];
-      return nextState;
-    }
-    default:
-      return state;
-  }
+    });
+    return Promise.all(fetches);
+  };
 }
-function superglueReducer(state = {}, action) {
-  switch (action.type) {
-    case HISTORY_CHANGE: {
-      const { pathname, search, hash } = action.payload;
-      const currentPageKey = urlToPageKey(pathname + search);
-      return {
-        ...state,
-        currentPageKey,
-        pathname,
-        search,
-        hash
-      };
-    }
-    case SAVE_RESPONSE: {
-      const {
-        page: { csrfToken, assets }
-      } = action.payload;
-      return { ...state, csrfToken, assets };
+function saveAndProcessPage(pageKey, page) {
+  return (dispatch, getState) => {
+    pageKey = urlToPageKey(pageKey);
+    const { defers = [] } = page;
+    if ("action" in page) {
+      const prevPage = getState().pages[pageKey];
+      dispatch(handleGraft({ pageKey, page }));
+      const currentPage = getState().pages[pageKey];
+      currentPage.fragments.forEach((fragment) => {
+        const { type, path } = fragment;
+        const currentFragment = getIn(currentPage, path);
+        const prevFragment = getIn(prevPage, path);
+        if (!prevFragment) {
+          dispatch(
+            updateFragments({
+              name: type,
+              pageKey,
+              value: currentFragment,
+              path
+            })
+          );
+        } else if (currentFragment !== prevFragment) {
+          dispatch(
+            updateFragments({
+              name: type,
+              pageKey,
+              value: currentFragment,
+              previousValue: prevFragment,
+              path
+            })
+          );
+        }
+      });
+    } else {
+      dispatch(saveResponse({ pageKey, page }));
+      const currentPage = getState().pages[pageKey];
+      currentPage.fragments.forEach((fragment) => {
+        const { type, path } = fragment;
+        const currentFragment = getIn(currentPage, path);
+        dispatch(
+          updateFragments({
+            name: type,
+            pageKey,
+            value: currentFragment,
+            path
+          })
+        );
+      });
     }
-    case SET_CSRF_TOKEN: {
-      const { csrfToken } = action.payload;
-      return { ...state, csrfToken };
+    const hasFetch = typeof fetch != "undefined";
+    if (hasFetch) {
+      return dispatch(fetchDeferments(pageKey, defers)).then(
+        () => Promise.resolve()
+      );
+    } else {
+      return Promise.resolve();
     }
-    default:
-      return state;
-  }
+  };
 }
-var rootReducer = {
-  superglue: superglueReducer,
-  pages: pageReducer
-};
 
 // lib/index.tsx
-var import_react_redux = require("react-redux");
+var import_react_redux3 = require("react-redux");
 var import_history = require("history");
 
-// lib/components/Nav.tsx
+// lib/components/Navigation.tsx
 var import_react = __toESM(require("react"));
-var Nav = class extends import_react.default.Component {
-  /**
-   * @ignore
-   */
-  constructor(props) {
-    super(props);
-    const { history, initialPageKey } = this.props;
-    this.history = history;
-    this.navigateTo = this.navigateTo.bind(this);
-    this.scrollTo = this.scrollTo.bind(this);
-    this.onHistoryChange = this.onHistoryChange.bind(this);
-    this.state = {
-      pageKey: initialPageKey,
-      ownProps: {}
-    };
-    this.hasWindow = typeof window !== "undefined";
-  }
-  /**
-   * @ignore
-   */
-  componentDidMount() {
-    this.unsubscribeHistory = this.history.listen(this.onHistoryChange);
-  }
-  /**
-   * @ignore
-   */
-  componentWillUnmount() {
-    this.unsubscribeHistory();
+var import_react_redux = require("react-redux");
+var NavigationContext = (0, import_react.createContext)(
+  {}
+);
+var hasWindow = typeof window !== "undefined";
+var setWindowScroll = (posX, posY) => {
+  hasWindow && window.scrollTo(posX, posY);
+};
+var notFound = (identifier) => {
+  let reminder = "";
+  if (!identifier) {
+    reminder = "Did you forget to add `json.componentIdentifier` in your application.json.props layout?";
   }
-  /**
-   * Passed to every page component. Manually navigate using pages that exists
-   * in the store and restores scroll position. This is what {@link Visit} in
-   * your `application_visit.js` ultimately calls.
-   *
-   * If there is an existing page in your store `navigateTo` will restore the props,
-   * render the correct component, and return `true`. Otherwise, it will return
-   * `false`. This is useful if you want to restore an existing page before making a
-   * call to `visit` or `remote`.
-   *
-   * @param path
-   * @param options when `none`, immediately returns `false`
-   * @returns `true` if the navigation was a success, `false` if the page was not found in the
-   * store.
-   */
-  navigateTo(path, {
-    action,
-    ownProps
-  } = {
-    action: "push",
-    ownProps: {}
-  }) {
+  const error = new Error(
+    `Superglue Nav component was looking for ${identifier} but could not find it in your mapping. ${reminder}`
+  );
+  throw error;
+};
+var NavigationProvider = (0, import_react.forwardRef)(function NavigationProvider2({ history, visit, remote: remote2, mapping }, ref) {
+  const dispatch = (0, import_react_redux.useDispatch)();
+  const pages = (0, import_react_redux.useSelector)((state) => state.pages);
+  const superglue = (0, import_react_redux.useSelector)(
+    (state) => state.superglue
+  );
+  const store = (0, import_react_redux.useStore)();
+  (0, import_react.useEffect)(() => {
+    return history.listen(onHistoryChange);
+  }, []);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => {
+      return {
+        navigateTo
+      };
+    },
+    []
+  );
+  const visitAndRestore = (pageKey, posX, posY) => {
+    return visit(pageKey, { revisit: true }).then((meta) => {
+      if (meta) {
+        if (meta.navigationAction === "none") {
+          dispatch(setActivePage({ pageKey }));
+          setWindowScroll(posX, posY);
+        }
+      } else {
+        console.warn(
+          `scoll restoration was skipped. Your visit's then funtion
+          should return the meta object it recieved if you want your
+          application to restore the page's previous scroll.`
+        );
+      }
+    });
+  };
+  const onHistoryChange = ({ location, action }) => {
+    const state = location.state;
+    if (!state && location.hash !== "" && action === "POP") {
+      const nextPageKey = urlToPageKey(location.pathname + location.search);
+      const containsKey = !!pages[nextPageKey];
+      if (containsKey) {
+        history.replace(
+          {
+            pathname: location.pathname,
+            search: location.search,
+            hash: location.hash
+          },
+          {
+            pageKey: nextPageKey,
+            superglue: true,
+            posY: window.pageYOffset,
+            posX: window.pageXOffset
+          }
+        );
+      }
+    }
+    if (state && "superglue" in state) {
+      dispatch(
+        historyChange({
+          pageKey: state.pageKey
+        })
+      );
+      if (action !== "POP") {
+        return;
+      }
+      const { pageKey, posX, posY } = state;
+      const containsKey = !!pages[pageKey];
+      if (containsKey) {
+        const { restoreStrategy } = pages[pageKey];
+        switch (restoreStrategy) {
+          case "fromCacheOnly":
+            dispatch(setActivePage({ pageKey }));
+            setWindowScroll(posX, posY);
+            break;
+          case "fromCacheAndRevisitInBackground":
+            dispatch(setActivePage({ pageKey }));
+            setWindowScroll(posX, posY);
+            visit(pageKey, { revisit: true });
+            break;
+          case "revisitOnly":
+          default:
+            visitAndRestore(pageKey, posX, posY);
+        }
+      } else {
+        visitAndRestore(pageKey, posX, posY);
+      }
+    }
+  };
+  const navigateTo = (path, { action } = {
+    action: "push"
+  }) => {
     if (action === "none") {
       return false;
     }
     path = pathWithoutBZParams(path);
     const nextPageKey = urlToPageKey(path);
-    const { store } = this.props;
-    const hasPage = !!store.getState().pages[nextPageKey];
+    const hasPage = Object.prototype.hasOwnProperty.call(
+      store.getState().pages,
+      nextPageKey
+    );
     if (hasPage) {
-      const location = this.history.location;
+      const location = history.location;
       const state = location.state;
       const prevPageKey = state.pageKey;
       const historyArgs = [
@@ -941,8 +846,8 @@ var Nav = class extends import_react.default.Component {
         }
       ];
       if (action === "push") {
-        if (this.hasWindow) {
-          this.history.replace(
+        if (hasWindow) {
+          history.replace(
             {
               pathname: location.pathname,
               search: location.search,
@@ -955,324 +860,319 @@ var Nav = class extends import_react.default.Component {
             }
           );
         }
-        this.history.push(...historyArgs);
+        history.push(...historyArgs);
       }
       if (action === "replace") {
-        this.history.replace(...historyArgs);
+        history.replace(...historyArgs);
       }
-      this.setState({ pageKey: nextPageKey, ownProps });
-      this.scrollTo(0, 0);
+      setActivePage({ pageKey: nextPageKey });
+      setWindowScroll(0, 0);
       if (action === "replace" && prevPageKey && prevPageKey !== nextPageKey) {
-        store.dispatch({
-          type: REMOVE_PAGE,
-          payload: {
-            pageKey: prevPageKey
-          }
-        });
+        dispatch(removePage({ pageKey: prevPageKey }));
       }
       return true;
     } else {
       console.warn(
-        `\`navigateTo\` was called , but could not find.
+        `\`navigateTo\` was called , but could not find
         the pageKey in the store. This may happen when the wrong
         content_location was set in your non-get controller action.
         No navigation will take place`
       );
       return false;
     }
+  };
+  const { currentPageKey, search } = superglue;
+  const { componentIdentifier } = pages[currentPageKey];
+  const Component = mapping[componentIdentifier];
+  if (Component) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      NavigationContext.Provider,
+      {
+        value: { pageKey: currentPageKey, search, navigateTo, visit, remote: remote2 }
+      },
+      /* @__PURE__ */ import_react.default.createElement(Component, null)
+    );
+  } else {
+    notFound(componentIdentifier);
   }
-  /**
-   * @ignore
-   */
-  scrollTo(posX, posY) {
-    this.hasWindow && window.scrollTo(posX, posY);
-  }
-  /**
-   * @ignore
-   */
-  onHistoryChange({ location, action }) {
-    const { store, visit } = this.props;
-    const { pathname, search, hash } = location;
-    const state = location.state;
-    if (state && "superglue" in state) {
-      store.dispatch({
-        type: HISTORY_CHANGE,
-        payload: { pathname, search, hash }
-      });
-      if (action !== "POP") {
-        return;
-      }
-      const { pageKey, posX, posY } = state;
-      const containsKey = !!store.getState().pages[pageKey];
-      if (containsKey) {
-        const { restoreStrategy } = store.getState().pages[pageKey];
-        switch (restoreStrategy) {
-          case "fromCacheOnly":
-            this.setState({ pageKey });
-            this.scrollTo(posX, posY);
-            break;
-          case "fromCacheAndRevisitInBackground":
-            this.setState({ pageKey });
-            this.scrollTo(posX, posY);
-            visit(pageKey, { revisit: true });
-            break;
-          case "revisitOnly":
-          default:
-            visit(pageKey, { revisit: true }).then((meta) => {
-              if (meta === void 0) {
-                console.warn(
-                  `scoll restoration was skipped. Your visit's then funtion
-                  should return the meta object it recieved if you want your
-                  application to restore the page's previous scroll.`
-                );
-              }
-              if (!!meta && meta.suggestedAction === "none") {
-                this.setState({ pageKey });
-                this.scrollTo(posX, posY);
-              }
-            });
-        }
-      } else {
-        visit(pageKey, { revisit: true }).then((meta) => {
-          if (meta === void 0) {
-            console.warn(
-              `scoll restoration was skipped. Your visit's then funtion
-              should return the meta object it recieved if you want your
-              application to restore the page's previous scroll.`
-            );
-          }
-          if (!!meta && meta.suggestedAction === "none") {
-            this.setState({ pageKey });
-            this.scrollTo(posX, posY);
-          }
-        });
-      }
+});
+
+// lib/reducers/index.ts
+function addPlaceholdersToDeferredNodes(existingPage, page) {
+  const { defers = [] } = existingPage;
+  const prevDefers = defers.map(({ path }) => {
+    const node = getIn(existingPage, path);
+    const copy = JSON.stringify(node);
+    return [path, JSON.parse(copy)];
+  });
+  return prevDefers.reduce((memo, [path, node]) => {
+    return setIn(page, path, node);
+  }, page);
+}
+function constrainPagesSize(state) {
+  const { maxPages } = config;
+  const allPageKeys = Object.keys(state);
+  const cacheTimesRecentFirst = allPageKeys.map((key) => state[key].savedAt).sort((a, b) => b - a);
+  for (const key of Array.from(allPageKeys)) {
+    if (state[key].savedAt <= cacheTimesRecentFirst[maxPages - 1]) {
+      delete state[key];
     }
   }
-  /**
-   * @ignore
-   */
-  notFound(identifier) {
-    let reminder = "";
-    if (!identifier) {
-      reminder = "Did you forget to add `json.componentIdentifier` in your application.json.props layout?";
+}
+function handleSaveResponse(state, pageKey, page) {
+  state = { ...state };
+  let nextPage = {
+    ...page,
+    savedAt: Date.now()
+  };
+  const existingPage = state[pageKey];
+  if (existingPage) {
+    nextPage = addPlaceholdersToDeferredNodes(existingPage, nextPage);
+  }
+  constrainPagesSize(state);
+  state[pageKey] = nextPage;
+  return state;
+}
+function appendReceivedFragmentsOntoPage(state, pageKey, receivedFragments) {
+  if (!pageKey) {
+    return state;
+  }
+  if (receivedFragments.length === 0) {
+    return state;
+  }
+  const currentPage = state[pageKey];
+  const { fragments: prevFragments = [] } = currentPage;
+  const nextFragments = [...prevFragments];
+  const existingKeys = {};
+  prevFragments.forEach((frag) => existingKeys[frag.path] = true);
+  receivedFragments.forEach((frag) => {
+    if (!existingKeys[frag.path]) {
+      nextFragments.push(frag);
     }
+  });
+  const nextPage = {
+    ...currentPage,
+    fragments: nextFragments
+  };
+  const nextState = { ...state };
+  nextState[pageKey] = nextPage;
+  return nextState;
+}
+function graftNodeOntoPage(state, pageKey, node, pathToNode) {
+  if (!node) {
+    console.warn(
+      "There was no node returned in the response. Do you have the correct key path in your props_at?"
+    );
+    return state;
+  }
+  if (!pathToNode || !pageKey) {
+    return state;
+  }
+  const fullPathToNode = [pageKey, pathToNode].join(".");
+  return setIn(state, fullPathToNode, node);
+}
+function handleGraftResponse(state, pageKey, page) {
+  const currentPage = state[pageKey];
+  if (!currentPage) {
     const error = new Error(
-      `Superglue Nav component was looking for ${identifier} but could not find it in your mapping. ${reminder}`
+      `Superglue was looking for ${pageKey} in your state, but could not find it in your mapping. Did you forget to pass in a valid pageKey to this.props.remote or this.props.visit?`
     );
     throw error;
   }
-  /**
-   * @ignore
-   */
-  render() {
-    const { store, visit, remote: remote2 } = this.props;
-    const { pageKey, ownProps } = this.state;
-    const { componentIdentifier } = store.getState().pages[pageKey];
-    const Component = this.props.mapping[componentIdentifier];
-    if (Component) {
-      return /* @__PURE__ */ import_react.default.createElement(
-        Component,
-        {
-          pageKey,
-          navigateTo: this.navigateTo,
-          visit,
-          remote: remote2,
-          ...ownProps
-        }
-      );
-    } else {
-      this.notFound(componentIdentifier);
-    }
+  const {
+    data: receivedNode,
+    path: pathToNode,
+    fragments: receivedFragments = []
+  } = page;
+  return [
+    (nextState) => graftNodeOntoPage(nextState, pageKey, receivedNode, pathToNode),
+    (nextState) => appendReceivedFragmentsOntoPage(nextState, pageKey, receivedFragments)
+  ].reduce((memo, fn) => fn(memo), state);
+}
+function pageReducer(state = {}, action) {
+  if (removePage.match(action)) {
+    const { pageKey } = action.payload;
+    const nextState = { ...state };
+    delete nextState[pageKey];
+    return nextState;
   }
-};
-var Nav_default = Nav;
-
-// lib/middleware.ts
-var actionValues = Object.values(actions_exports).map((action) => action.toString());
-var fragmentMiddleware = (store) => (next) => (action) => {
-  const prevState = store.getState();
-  const nextAction = next(action);
-  const nextState = store.getState();
-  if (!(action instanceof Object && "type" in action && typeof action.type === "string")) {
-    return nextAction;
+  if (copyPage.match(action)) {
+    const nextState = { ...state };
+    const { from, to } = action.payload;
+    nextState[urlToPageKey(to)] = JSON.parse(JSON.stringify(nextState[from]));
+    return nextState;
   }
-  const type = action.type;
-  if (actionValues.includes(type)) {
-    return nextAction;
+  if (handleGraft.match(action)) {
+    const { pageKey, page } = action.payload;
+    return handleGraftResponse(state, pageKey, page);
   }
-  if (prevState.pages === nextState.pages) {
-    return nextAction;
+  if (saveResponse.match(action)) {
+    const { pageKey, page } = action.payload;
+    const nextState = handleSaveResponse(state, pageKey, page);
+    return nextState;
   }
-  const changedFragments = {};
-  const changedKeys = Object.keys(nextState.pages).filter((key) => {
-    return prevState.pages[key] !== nextState.pages[key];
-  });
-  if (changedKeys.length === 0) {
-    return nextAction;
+  return state;
+}
+function superglueReducer(state = {
+  currentPageKey: "",
+  search: {},
+  assets: []
+}, action) {
+  if (setCSRFToken.match(action)) {
+    const { csrfToken } = action.payload;
+    return { ...state, csrfToken };
   }
-  changedKeys.forEach((key) => {
-    nextState.pages[key].fragments.forEach((fragment) => {
-      const { type: type2, path } = fragment;
-      const nextPage = nextState.pages[key];
-      const prevPage = prevState.pages[key];
-      let nextFragment, prevFragment;
-      try {
-        prevFragment = getIn(prevPage, path);
-        nextFragment = getIn(nextPage, path);
-      } catch (err) {
-        if (err instanceof KeyPathError) {
-          console.warn(err.message);
-        } else {
-          throw err;
-        }
-      }
-      if (nextFragment !== void 0 && prevFragment !== void 0 && nextFragment !== prevFragment && nextFragment) {
-        changedFragments[type2] = nextFragment;
-      }
-    });
-  });
-  if (Object.keys(changedFragments).length === 0) {
-    return nextAction;
+  if (setActivePage.match(action)) {
+    const { pageKey } = action.payload;
+    const { search } = parsePageKey(pageKey);
+    return {
+      ...state,
+      search,
+      currentPageKey: pageKey
+    };
   }
-  store.dispatch({
-    type: UPDATE_FRAGMENTS,
-    payload: {
-      changedFragments
-    }
-  });
-  return nextAction;
+  if (historyChange.match(action)) {
+    const { pageKey } = action.payload;
+    const { search } = parsePageKey(pageKey);
+    return {
+      ...state,
+      currentPageKey: pageKey,
+      search
+    };
+  }
+  if (saveResponse.match(action)) {
+    const {
+      page: { csrfToken, assets }
+    } = action.payload;
+    return { ...state, csrfToken, assets };
+  }
+  return state;
+}
+var rootReducer = {
+  superglue: superglueReducer,
+  pages: pageReducer
 };
 
-// lib/index.tsx
-function pageToInitialState(key, page) {
-  const slices = page.slices || {};
-  const nextPage = {
-    ...page,
-    pageKey: key,
-    //TODO remove this
-    savedAt: Date.now()
-  };
-  return {
-    pages: { [key]: nextPage },
-    ...slices
-  };
+// lib/hooks/index.ts
+var import_react_redux2 = require("react-redux");
+function useSuperglue() {
+  return (0, import_react_redux2.useSelector)((state) => state.superglue);
 }
-function start({
-  initialPage,
-  baseUrl = config.baseUrl,
-  maxPages = config.maxPages,
-  path
-}) {
-  const initialPageKey = urlToPageKey((0, import_url_parse4.default)(path).href);
-  const { csrfToken } = initialPage;
+function useContent() {
+  const superglueState = useSuperglue();
+  const currentPageKey = superglueState.currentPageKey;
+  return (0, import_react_redux2.useSelector)(
+    (state) => state.pages[currentPageKey]
+  ).data;
+}
+
+// lib/index.tsx
+var hasWindow2 = typeof window !== "undefined";
+var createHistory = () => {
+  if (hasWindow2) {
+    return (0, import_history.createBrowserHistory)({});
+  } else {
+    return (0, import_history.createMemoryHistory)({});
+  }
+};
+var prepareStore = (store, initialPage, path) => {
   const location = (0, import_url_parse4.default)(path);
+  const initialPageKey = urlToPageKey(location.href);
+  const { csrfToken } = initialPage;
+  store.dispatch(
+    historyChange({
+      pageKey: initialPageKey
+    })
+  );
+  store.dispatch(saveAndProcessPage(initialPageKey, initialPage));
+  store.dispatch(setCSRFToken({ csrfToken }));
+};
+var setup = ({
+  initialPage,
+  baseUrl,
+  path,
+  store,
+  buildVisitAndRemote,
+  history,
+  navigatorRef
+}) => {
   config.baseUrl = baseUrl;
-  config.maxPages = maxPages;
+  const { visit, remote: remote2 } = buildVisitAndRemote(navigatorRef, store);
+  const initialPageKey = urlToPageKey((0, import_url_parse4.default)(path).href);
+  const nextHistory = history || createHistory();
+  nextHistory.replace(...argsForHistory(path));
+  prepareStore(store, initialPage, path);
+  const handlers = ujsHandlers({
+    visit,
+    remote: remote2,
+    ujsAttributePrefix: "data-sg",
+    store
+  });
   return {
-    reducer: rootReducer,
-    prepareStore: function(store) {
-      store.dispatch({
-        type: HISTORY_CHANGE,
-        payload: {
-          pathname: location.pathname,
-          search: location.query,
-          hash: location.hash
-        }
-      });
-      store.dispatch(saveAndProcessPage(initialPageKey, initialPage));
-      store.dispatch({ type: SET_CSRF_TOKEN, payload: { csrfToken } });
-    },
-    initialState: pageToInitialState(initialPageKey, initialPage),
-    initialPageKey
+    visit,
+    remote: remote2,
+    nextHistory,
+    initialPageKey,
+    ujs: handlers
   };
-}
-var ApplicationBase = class extends import_react2.default.Component {
-  /**
-   * The constructor of the `ApplicationBase` class.
-   * @param props
-   */
-  constructor(props) {
-    super(props);
-    this.hasWindow = typeof window !== "undefined";
-    this.navigatorRef = import_react2.default.createRef();
-    const { prepareStore, initialState, initialPageKey, reducer } = start({
-      initialPage: this.props.initialPage,
-      baseUrl: this.props.baseUrl,
-      path: this.props.path
-      // The max number of pages to keep in the store. Default is 20
-      // maxPages: 20
-    });
-    this.initialPageKey = initialPageKey;
-    this.store = this.buildStore(initialState, reducer);
-    prepareStore(this.store);
-    this.history = this.createHistory();
-    this.history.replace(...argsForHistory(this.props.path));
-    const unconnectedMapping = this.mapping();
-    const nextMapping = {};
-    for (const key in unconnectedMapping) {
-      const component = unconnectedMapping[key];
-      nextMapping[key] = (0, import_react_redux.connect)(mapStateToProps, mapDispatchToProps)(component);
-    }
-    this.connectedMapping = nextMapping;
-    const { visit, remote: remote2 } = this.visitAndRemote(this.navigatorRef, this.store);
-    this.visit = visit;
-    this.remote = remote2;
-  }
-  componentDidMount() {
-    const { appEl } = this.props;
-    this.ujsHandlers = ujsHandlers({
-      visit: this.visit,
-      remote: this.remote,
-      ujsAttributePrefix: "data-sg"
+};
+function Application({
+  initialPage,
+  baseUrl,
+  path,
+  store,
+  buildVisitAndRemote,
+  history,
+  mapping,
+  ...rest
+}) {
+  const navigatorRef = (0, import_react2.useRef)(null);
+  const { visit, remote: remote2, nextHistory, initialPageKey, ujs } = (0, import_react2.useMemo)(() => {
+    return setup({
+      initialPage,
+      baseUrl,
+      path,
+      store,
+      buildVisitAndRemote,
+      history,
+      navigatorRef
     });
-    const { onClick, onSubmit } = this.ujsHandlers;
-    appEl.addEventListener("click", onClick);
-    appEl.addEventListener("submit", onSubmit);
-  }
-  componentWillUnmount() {
-    const { appEl } = this.props;
-    const { onClick, onSubmit } = this.ujsHandlers;
-    appEl.removeEventListener("click", onClick);
-    appEl.removeEventListener("submit", onSubmit);
-  }
-  createHistory() {
-    if (this.hasWindow) {
-      return (0, import_history.createBrowserHistory)({});
-    } else {
-      return (0, import_history.createMemoryHistory)({});
+  }, []);
+  return /* @__PURE__ */ import_react2.default.createElement("div", { onClick: ujs.onClick, onSubmit: ujs.onSubmit, ...rest }, /* @__PURE__ */ import_react2.default.createElement(import_react_redux3.Provider, { store }, /* @__PURE__ */ import_react2.default.createElement(
+    NavigationProvider,
+    {
+      ref: navigatorRef,
+      visit,
+      remote: remote2,
+      mapping,
+      history: nextHistory,
+      initialPageKey
     }
-  }
-  render() {
-    return /* @__PURE__ */ import_react2.default.createElement(import_react_redux.Provider, { store: this.store }, /* @__PURE__ */ import_react2.default.createElement(
-      Nav_default,
-      {
-        store: this.store,
-        ref: this.navigatorRef,
-        visit: this.visit,
-        remote: this.remote,
-        mapping: this.connectedMapping,
-        history: this.history,
-        initialPageKey: this.initialPageKey
-      }
-    ));
-  }
-};
+  )));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ApplicationBase,
-  BEFORE_FETCH,
-  BEFORE_REMOTE,
-  BEFORE_VISIT,
-  COPY_PAGE,
+  Application,
   GRAFTING_ERROR,
   GRAFTING_SUCCESS,
-  HISTORY_CHANGE,
-  REMOVE_PAGE,
-  SAVE_RESPONSE,
-  UPDATE_FRAGMENTS,
-  fragmentMiddleware,
+  NavigationContext,
+  NavigationProvider,
+  beforeFetch,
+  beforeRemote,
+  beforeVisit,
+  copyPage,
   getIn,
-  urlToPageKey
+  pageReducer,
+  prepareStore,
+  removePage,
+  rootReducer,
+  saveAndProcessPage,
+  saveResponse,
+  setup,
+  superglueReducer,
+  updateFragments,
+  urlToPageKey,
+  useContent,
+  useSuperglue
 });
 //# sourceMappingURL=superglue.cjs.map