@thoughtbot/superglue 0.53.4 → 0.54.0

package/dist/cjs/superglue.cjs

@@ -0,0 +1,1278 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// 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,
+  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,
+  getIn: () => getIn,
+  urlToPageKey: () => urlToPageKey
+});
+module.exports = __toCommonJS(lib_exports);
+var import_react2 = __toESM(require("react"));
+var import_url_parse4 = __toESM(require("url-parse"));
+
+// lib/utils/url.ts
+var import_url_parse = __toESM(require("url-parse"));
+function pathQuery(url) {
+  const { pathname, query } = new import_url_parse.default(url, {});
+  return pathname + query;
+}
+function pathQueryHash(url) {
+  const { pathname, query, hash } = new import_url_parse.default(url, {});
+  return pathname + query + hash;
+}
+function withFormatJson(url) {
+  const parsed = new import_url_parse.default(url, {}, true);
+  parsed.query["format"] = "json";
+  return parsed.toString();
+}
+function pathWithoutBZParams(url) {
+  const parsed = new import_url_parse.default(url, {}, true);
+  const query = parsed.query;
+  delete query["props_at"];
+  delete query["format"];
+  parsed.set("query", query);
+  return pathQueryHash(parsed.toString());
+}
+function urlToPageKey(url) {
+  const parsed = new import_url_parse.default(url, {}, true);
+  const query = parsed.query;
+  delete query["props_at"];
+  delete query["format"];
+  parsed.set("query", query);
+  return pathQuery(parsed.toString());
+}
+function withoutHash(url) {
+  const parsed = new import_url_parse.default(url, {}, true);
+  parsed.set("hash", "");
+  return parsed.toString();
+}
+function withoutBusters(url) {
+  const parsed = new import_url_parse.default(url, {}, true);
+  const query = parsed.query;
+  delete query["format"];
+  parsed.set("query", query);
+  return pathQuery(parsed.toString());
+}
+function formatForXHR(url) {
+  const formats = [withoutHash, withFormatJson];
+  return formats.reduce((memo, f) => f(memo), url);
+}
+
+// lib/utils/helpers.ts
+function argsForHistory(path) {
+  const pageKey = urlToPageKey(path);
+  return [
+    path,
+    {
+      superglue: true,
+      pageKey,
+      posX: 0,
+      posY: 0
+    }
+  ];
+}
+
+// lib/utils/immutability.ts
+var canLookAhead = /^[\da-zA-Z\-_]+=[\da-zA-Z\-_]+$/;
+var KeyPathError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "KeyPathError";
+  }
+};
+function getIn(node, path) {
+  const keyPath = normalizeKeyPath(path);
+  let result = node;
+  let i;
+  for (i = 0; i < keyPath.length; i++) {
+    const key = keyPath[i];
+    if (typeof result === "object" && result !== null) {
+      if (!Array.isArray(result) && canLookAhead.test(key)) {
+        throw new KeyPathError(
+          `Expected to find an Array when using the key: ${key}`
+        );
+      }
+      result = atKey(result, key);
+    } else {
+      throw new KeyPathError(
+        `Expected to traverse an Array or Obj, got ${JSON.stringify(result)}`
+      );
+    }
+  }
+  if (i === keyPath.length) {
+    return result;
+  } else {
+    return void 0;
+  }
+}
+function clone(node) {
+  return Array.isArray(node) ? [].slice.call(node) : { ...node };
+}
+function getKey(node, key) {
+  if (Array.isArray(node) && Number.isNaN(Number(key))) {
+    const key_parts = Array.from(key.split("="));
+    const attr = key_parts[0];
+    const id = key_parts[1];
+    if (!id || !attr) {
+      return key;
+    }
+    let i;
+    let child;
+    for (i = 0; i < node.length; i++) {
+      child = node[i];
+      if (typeof child === "object" && !Array.isArray(child) && child !== null) {
+        const val = child[attr];
+        if (val && val.toString() === id) {
+          break;
+        }
+      } else {
+        throw new KeyPathError(`Could not look ahead ${key} at ${child}`);
+      }
+    }
+    if (i === node.length) {
+      throw new KeyPathError(`Could not find ${key} while looking ahead`);
+    }
+    return i;
+  } else {
+    return key;
+  }
+}
+function atKey(node, key) {
+  const actualKey = getKey(node, key);
+  if (Array.isArray(node)) {
+    return node[actualKey];
+  } else {
+    return node[actualKey];
+  }
+}
+function normalizeKeyPath(path) {
+  if (typeof path === "string") {
+    path = path.replace(/ /g, "");
+    if (path === "") {
+      return [];
+    }
+    return path.split(".");
+  } else {
+    return path;
+  }
+}
+function setIn(object, path, value) {
+  const keypath = normalizeKeyPath(path);
+  const results = { 0: object };
+  const parents = { 0: object };
+  let i;
+  for (i = 0; i < keypath.length; i++) {
+    const parent = parents[i];
+    if (!(typeof parent === "object" && parent !== null)) {
+      throw new KeyPathError(
+        `Expected to traverse an Array or Obj, got ${JSON.stringify(parent)}`
+      );
+    }
+    const child = atKey(parent, keypath[i]);
+    parents[i + 1] = child;
+  }
+  results[keypath.length] = value;
+  for (i = keypath.length - 1; i >= 0; i--) {
+    const target = clone(parents[i]);
+    results[i] = target;
+    const key = getKey(results[i], keypath[i]);
+    if (Array.isArray(target)) {
+      target[key] = results[i + 1];
+    } else {
+      target[key] = results[i + 1];
+    }
+  }
+  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
+function isValidResponse(xhr) {
+  return isValidContent(xhr) && !downloadingFile(xhr);
+}
+function isValidContent(rsp) {
+  const contentType = rsp.headers.get("content-type");
+  const jsContent = /^(?:application\/json)(?:;|$)/;
+  return !!(contentType && contentType.match(jsContent));
+}
+function downloadingFile(xhr) {
+  const disposition = xhr.headers.get("content-disposition");
+  return !!(disposition && disposition.match(/^attachment/) !== null);
+}
+var SuperglueResponseError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "SuperglueResponseError";
+  }
+};
+function validateResponse(args) {
+  const { rsp } = args;
+  if (isValidResponse(rsp)) {
+    return args;
+  } else {
+    const error = new SuperglueResponseError("Invalid Superglue Response");
+    error.response = rsp;
+    throw error;
+  }
+}
+function handleServerErrors(args) {
+  const { rsp } = args;
+  if (!rsp.ok) {
+    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"
+      );
+    }
+    const error = new SuperglueResponseError(rsp.statusText);
+    error.response = rsp;
+    throw error;
+  }
+  return args;
+}
+function argsForFetch(getState, pathQuery2, { method = "GET", headers = {}, body = "", signal } = {}) {
+  method = method.toUpperCase();
+  const currentState = getState().superglue;
+  const nextHeaders = { ...headers };
+  nextHeaders["x-requested-with"] = "XMLHttpRequest";
+  nextHeaders["accept"] = "application/json";
+  nextHeaders["x-superglue-request"] = "true";
+  if (method != "GET" && method != "HEAD") {
+    nextHeaders["content-type"] = "application/json";
+  }
+  if (body instanceof FormData) {
+    delete nextHeaders["content-type"];
+  }
+  if (currentState.csrfToken) {
+    nextHeaders["x-csrf-token"] = currentState.csrfToken;
+  }
+  const fetchPath = new import_url_parse3.default(
+    formatForXHR(pathQuery2),
+    config.baseUrl || {},
+    true
+  );
+  const credentials = "same-origin";
+  if (!(method == "GET" || method == "HEAD")) {
+    nextHeaders["x-http-method-override"] = method;
+    method = "POST";
+  }
+  const options = {
+    method,
+    headers: nextHeaders,
+    body,
+    credentials,
+    signal
+  };
+  if (currentState.currentPageKey) {
+    const referrer = new import_url_parse3.default(
+      currentState.currentPageKey,
+      config.baseUrl || {},
+      false
+    ).href;
+    options.referrer = referrer;
+  }
+  if (method == "GET" || method == "HEAD") {
+    if (options.body instanceof FormData) {
+      const allData = new URLSearchParams(
+        options.body
+      );
+      const nextQuery = { ...fetchPath.query, ...Object.fromEntries(allData) };
+      fetchPath.set("query", nextQuery);
+    }
+    delete options.body;
+  }
+  return [fetchPath.toString(), options];
+}
+function extractJSON(rsp) {
+  return rsp.json().then((json) => {
+    return { rsp, json };
+  }).catch((e) => {
+    e.response = rsp;
+    throw e;
+  });
+}
+function parseResponse(prm) {
+  return Promise.resolve(prm).then(extractJSON).then(handleServerErrors).then(validateResponse);
+}
+
+// lib/utils/ujs.ts
+var HandlerBuilder = class {
+  constructor({
+    ujsAttributePrefix,
+    visit,
+    remote: remote2
+  }) {
+    this.attributePrefix = ujsAttributePrefix;
+    this.isUJS = this.isUJS.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.visit = visit;
+    this.remote = remote2;
+    this.visitOrRemote = this.visitOrRemote.bind(this);
+  }
+  retrieveLink(target) {
+    const link = target.closest("a");
+    if (link && link.href.length !== 0) {
+      return link;
+    }
+  }
+  isNonStandardClick(event) {
+    return event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+  }
+  isUJS(node) {
+    const hasVisit = !!node.getAttribute(this.attributePrefix + "-visit");
+    const hasRemote = !!node.getAttribute(this.attributePrefix + "-remote");
+    return hasVisit || hasRemote;
+  }
+  handleSubmit(event) {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement)) {
+      return;
+    }
+    if (!this.isUJS(form)) {
+      return;
+    }
+    event.preventDefault();
+    let url = form.getAttribute("action");
+    if (!url) {
+      return;
+    }
+    const method = (form.getAttribute("method") || "POST").toUpperCase();
+    url = withoutBusters(url);
+    this.visitOrRemote(form, url, {
+      method,
+      body: new FormData(form)
+    });
+  }
+  handleClick(event) {
+    if (!(event.target instanceof Element)) {
+      return;
+    }
+    const link = this.retrieveLink(event.target);
+    const isNonStandard = this.isNonStandardClick(event);
+    if (!link || isNonStandard || !this.isUJS(link)) {
+      return;
+    }
+    event.preventDefault();
+    let url = link.getAttribute("href");
+    if (!url) {
+      return;
+    }
+    url = withoutBusters(url);
+    this.visitOrRemote(link, url, { method: "GET" });
+  }
+  visitOrRemote(linkOrForm, url, opts) {
+    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 });
+    }
+    if (linkOrForm.getAttribute(this.attributePrefix + "-remote")) {
+      return this.remote(url, opts);
+    }
+  }
+  handlers() {
+    return {
+      onClick: this.handleClick,
+      onSubmit: this.handleSubmit
+    };
+  }
+};
+var ujsHandlers = ({
+  ujsAttributePrefix,
+  visit,
+  remote: remote2
+}) => {
+  const builder = new HandlerBuilder({
+    visit,
+    remote: remote2,
+    ujsAttributePrefix
+  });
+  return builder.handlers();
+};
+
+// lib/utils/window.ts
+function needsRefresh(prevAssets, newAssets) {
+  if (prevAssets && newAssets) {
+    const hasNewAssets = !newAssets.every((asset) => prevAssets.includes(asset));
+    return hasNewAssets;
+  } else {
+    return false;
+  }
+}
+
+// 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];
+    }
+  }
+}
+function saveResponse2(state, pageKey, page) {
+  state = { ...state };
+  let nextPage = {
+    pageKey,
+    ...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 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);
+          }
+        });
+      });
+      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;
+  }
+}
+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 };
+    }
+    case SET_CSRF_TOKEN: {
+      const { csrfToken } = action.payload;
+      return { ...state, csrfToken };
+    }
+    default:
+      return state;
+  }
+}
+var rootReducer = {
+  superglue: superglueReducer,
+  pages: pageReducer
+};
+
+// lib/index.tsx
+var import_react_redux = require("react-redux");
+var import_history = require("history");
+
+// lib/components/Nav.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();
+  }
+  /**
+   * 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: {}
+  }) {
+    if (action === "none") {
+      return false;
+    }
+    path = pathWithoutBZParams(path);
+    const nextPageKey = urlToPageKey(path);
+    const { store } = this.props;
+    const hasPage = !!store.getState().pages[nextPageKey];
+    if (hasPage) {
+      const location = this.history.location;
+      const state = location.state;
+      const prevPageKey = state.pageKey;
+      const historyArgs = [
+        path,
+        {
+          pageKey: nextPageKey,
+          superglue: true,
+          posY: 0,
+          posX: 0
+        }
+      ];
+      if (action === "push") {
+        if (this.hasWindow) {
+          this.history.replace(
+            {
+              pathname: location.pathname,
+              search: location.search,
+              hash: location.hash
+            },
+            {
+              ...state,
+              posY: window.pageYOffset,
+              posX: window.pageXOffset
+            }
+          );
+        }
+        this.history.push(...historyArgs);
+      }
+      if (action === "replace") {
+        this.history.replace(...historyArgs);
+      }
+      this.setState({ pageKey: nextPageKey, ownProps });
+      this.scrollTo(0, 0);
+      if (action === "replace" && prevPageKey && prevPageKey !== nextPageKey) {
+        store.dispatch({
+          type: REMOVE_PAGE,
+          payload: {
+            pageKey: prevPageKey
+          }
+        });
+      }
+      return true;
+    } else {
+      console.warn(
+        `\`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;
+    }
+  }
+  /**
+   * @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);
+          }
+        });
+      }
+    }
+  }
+  /**
+   * @ignore
+   */
+  notFound(identifier) {
+    let reminder = "";
+    if (!identifier) {
+      reminder = "Did you forget to add `json.componentIdentifier` in your application.json.props layout?";
+    }
+    const error = new Error(
+      `Superglue Nav component was looking for ${identifier} but could not find it in your mapping. ${reminder}`
+    );
+    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);
+    }
+  }
+};
+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;
+  }
+  const type = action.type;
+  if (actionValues.includes(type)) {
+    return nextAction;
+  }
+  if (prevState.pages === nextState.pages) {
+    return nextAction;
+  }
+  const changedFragments = {};
+  const changedKeys = Object.keys(nextState.pages).filter((key) => {
+    return prevState.pages[key] !== nextState.pages[key];
+  });
+  if (changedKeys.length === 0) {
+    return nextAction;
+  }
+  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;
+  }
+  store.dispatch({
+    type: UPDATE_FRAGMENTS,
+    payload: {
+      changedFragments
+    }
+  });
+  return nextAction;
+};
+
+// 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
+  };
+}
+function start({
+  initialPage,
+  baseUrl = config.baseUrl,
+  maxPages = config.maxPages,
+  path
+}) {
+  const initialPageKey = urlToPageKey((0, import_url_parse4.default)(path).href);
+  const { csrfToken } = initialPage;
+  const location = (0, import_url_parse4.default)(path);
+  config.baseUrl = baseUrl;
+  config.maxPages = maxPages;
+  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
+  };
+}
+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"
+    });
+    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)({});
+    }
+  }
+  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,
+  GRAFTING_ERROR,
+  GRAFTING_SUCCESS,
+  HISTORY_CHANGE,
+  REMOVE_PAGE,
+  SAVE_RESPONSE,
+  UPDATE_FRAGMENTS,
+  fragmentMiddleware,
+  getIn,
+  urlToPageKey
+});
+//# sourceMappingURL=superglue.cjs.map