@thoughtbot/superglue 0.54.0 → 1.0.0

package/dist/{chunk-MNVGYKSD.mjs → chunk-LGUVOEZ3.mjs}

@@ -1,9 +1,3 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
 // lib/utils/url.ts
 import parse from "url-parse";
 function pathQuery(url) {
@@ -19,6 +13,11 @@ function hasPropsAt(url) {
   const query = parsed.query;
   return !!query["props_at"];
 }
+function propsAtParam(url) {
+  const parsed = new parse(url, {}, true);
+  const query = parsed.query;
+  return query["props_at"];
+}
 function withFormatJson(url) {
   const parsed = new parse(url, {}, true);
   parsed.query["format"] = "json";
@@ -63,6 +62,13 @@ function formatForXHR(url) {
   const formats = [withoutHash, withFormatJson];
   return formats.reduce((memo, f) => f(memo), url);
 }
+function parsePageKey(pageKey) {
+  const { pathname, query } = new parse(pageKey, {}, true);
+  return {
+    pathname,
+    search: query
+  };
+}
 
 // lib/utils/helpers.ts
 function argsForHistory(path) {
@@ -191,23 +197,6 @@ function setIn(object, path, value) {
   return results[0];
 }
 
-// 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
 import parse2 from "url-parse";
 
@@ -248,7 +237,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"
@@ -260,7 +249,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 };
@@ -311,7 +306,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) => {
@@ -330,10 +325,12 @@ var HandlerBuilder = class {
   constructor({
     ujsAttributePrefix,
     visit: visit2,
-    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 = visit2;
@@ -347,7 +344,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");
@@ -392,18 +389,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() {
@@ -416,12 +412,14 @@ var HandlerBuilder = class {
 var ujsHandlers = ({
   ujsAttributePrefix,
   visit: visit2,
-  remote: remote2
+  remote: remote2,
+  store
 }) => {
   const builder = new HandlerBuilder({
     visit: visit2,
     remote: remote2,
-    ujsAttributePrefix
+    ujsAttributePrefix,
+    store
   });
   return builder.handlers();
 };
@@ -440,65 +438,55 @@ function needsRefresh(prevAssets, newAssets) {
 import parse3 from "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";
+import { createAction } from "@reduxjs/toolkit";
 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";
+var saveResponse = createAction(
+  "@@superglue/SAVE_RESPONSE",
+  ({ pageKey, page }) => {
+    pageKey = urlToPageKey(pageKey);
+    return {
+      payload: {
+        pageKey,
+        page
+      }
+    };
+  }
+);
+var handleGraft = createAction(
+  "@@superglue/HANDLE_GRAFT",
+  ({ pageKey, page }) => {
+    pageKey = urlToPageKey(pageKey);
+    return {
+      payload: {
+        page,
+        pageKey
+      }
+    };
+  }
+);
+var superglueError = createAction(
+  "@@superglue/ERROR"
+);
+var updateFragments = createAction("@@superglue/UPDATE_FRAGMENTS");
+var copyPage = createAction(
+  "@@superglue/COPY_PAGE"
+);
+var removePage = createAction(
+  "@@superglue/REMOVE_PAGE"
+);
+var beforeFetch = createAction(
+  "@@superglue/BEFORE_FETCH"
+);
+var beforeVisit = createAction("@@superglue/BEFORE_VISIT");
+var beforeRemote = createAction("@@superglue/BEFORE_REMOTE");
+var setCSRFToken = createAction("@@superglue/SET_CSRF_TOKEN");
+var historyChange = createAction("@@superglue/HISTORY_CHANGE");
+var setActivePage = createAction("@@superglue/SET_ACTIVE_PAGE");
 
 // lib/action_creators/requests.ts
-function beforeVisit(payload) {
-  return {
-    type: BEFORE_VISIT,
-    payload
-  };
-}
-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));
+  dispatch(superglueError({ message: err.message }));
   throw err;
 }
 function buildMeta(pageKey, page, state, rsp, fetchArgs) {
@@ -514,47 +502,55 @@ function buildMeta(pageKey, page, state, rsp, fetchArgs) {
     needsRefresh: needsRefresh(prevAssets, nextAssets)
   };
 }
+var MismatchedComponentError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "MismatchedComponentError";
+  }
+};
 var remote = (path, {
-  method = "GET",
-  headers,
-  body,
-  pageKey: rawPageKey,
-  beforeSave = (prevPage, receivedPage) => receivedPage
+  pageKey: targetPageKey,
+  force = false,
+  beforeSave = (prevPage, receivedPage) => receivedPage,
+  ...rest
 } = {}) => {
   path = withoutBusters(path);
-  rawPageKey = rawPageKey && urlToPageKey(rawPageKey);
+  targetPageKey = targetPageKey && urlToPageKey(targetPageKey);
   return (dispatch, getState) => {
-    const fetchArgs = argsForFetch(getState, path, {
-      method,
-      headers,
-      body
-    });
-    if (rawPageKey === void 0) {
-      rawPageKey = getState().superglue.currentPageKey;
-    }
-    const pageKey = rawPageKey;
+    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 willReplaceCurrent = pageKey == currentPageKey;
-      const existingId = pages[currentPageKey]?.componentIdentifier;
+      const existingId = pages[pageKey]?.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}".
+      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 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.
+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.             
 
-Consider using data-sg-visit, the visit function, or redirect_back.`
-        );
+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);
@@ -562,121 +558,115 @@ Consider using data-sg-visit, the visit function, or redirect_back.`
   };
 };
 var lastVisitController = {
-  abort: () => {
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  abort: (_reason) => {
   }
 };
 var visit = (path, {
-  method = "GET",
-  headers,
-  body,
   placeholderKey,
   beforeSave = (prevPage, receivedPage) => receivedPage,
-  revisit = false
+  revisit = false,
+  ...rest
 } = {}) => {
   path = withoutBusters(path);
-  let pageKey = urlToPageKey(path);
   return (dispatch, getState) => {
-    placeholderKey = placeholderKey && urlToPageKey(placeholderKey);
-    const hasPlaceholder = !!(placeholderKey && getState().pages[placeholderKey]);
-    if (placeholderKey && hasPlaceholder) {
-      dispatch(copyPage({ from: placeholderKey, to: pageKey }));
-    }
-    if (placeholderKey && !hasPlaceholder) {
+    const currentPageKey = getState().superglue.currentPageKey;
+    placeholderKey = placeholderKey && urlToPageKey(placeholderKey) || currentPageKey;
+    const hasPlaceholder = placeholderKey in getState().pages;
+    if (hasPropsAt(path) && !hasPlaceholder) {
       console.warn(
         `Could not find placeholder with key ${placeholderKey} in state. The props_at param will be ignored`
       );
       path = removePropsAt(path);
     }
-    if (!placeholderKey && 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 = removePropsAt(path);
-    }
     const controller = new AbortController();
     const { signal } = controller;
     const fetchArgs = argsForFetch(getState, path, {
-      headers,
-      body,
-      method,
+      ...rest,
       signal
     });
-    const currentPageKey = getState().superglue.currentPageKey;
     dispatch(beforeVisit({ currentPageKey, fetchArgs }));
     dispatch(beforeFetch({ fetchArgs }));
-    lastVisitController.abort();
+    lastVisitController.abort(
+      "Aborting the previous `visit`. There can be one visit at a time. Use `remote` if there is a need for async requests."
+    );
     lastVisitController = controller;
     return fetch(...fetchArgs).then(parseResponse).then(({ rsp, json }) => {
       const { superglue, pages = {} } = getState();
-      const meta = buildMeta(pageKey, json, superglue, rsp, fetchArgs);
       const isGet = fetchArgs[1].method === "GET";
-      meta.suggestedAction = "push";
-      if (!rsp.redirected && !isGet) {
-        meta.suggestedAction = "replace";
-      }
-      if (revisit && isGet) {
-        if (rsp.redirected) {
-          meta.suggestedAction = "replace";
-        } else {
-          meta.suggestedAction = "none";
+      const pageKey = calculatePageKey(rsp, isGet, currentPageKey);
+      if (placeholderKey && hasPropsAt(path) && hasPlaceholder) {
+        const existingId = pages[placeholderKey]?.componentIdentifier;
+        const receivedId = json.componentIdentifier;
+        if (!!existingId && existingId != receivedId) {
+          const message = `You received a page response with a
+componentIdentifier "${receivedId}" that is different than the
+componentIdentifier "${existingId}" located at ${placeholderKey}.
+
+This can happen if you're using data-sg-visit or visit with a
+props_at param, but the 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}".
+
+Check that you're rendering a page with a matching
+componentIdentifier, or consider using redirect_back_with_props_at
+to the same page.
+            `;
+          throw new MismatchedComponentError(message);
         }
+        dispatch(copyPage({ from: placeholderKey, to: pageKey }));
       }
-      pageKey = urlToPageKey(rsp.url);
-      if (!isGet && !rsp.redirected) {
-        pageKey = currentPageKey;
-      }
-      const contentLocation = rsp.headers.get("content-location");
-      if (contentLocation) {
-        pageKey = urlToPageKey(contentLocation);
-      }
+      const meta = buildMeta(pageKey, json, superglue, rsp, fetchArgs);
+      const visitMeta = {
+        ...meta,
+        navigationAction: calculateNavAction(
+          meta,
+          rsp,
+          isGet,
+          pageKey,
+          currentPageKey,
+          revisit
+        )
+      };
       const page = beforeSave(pages[pageKey], json);
-      return dispatch(saveAndProcessPage(pageKey, page)).then(() => {
-        meta.pageKey = pageKey;
-        return meta;
-      });
+      return dispatch(saveAndProcessPage(pageKey, page)).then(() => visitMeta);
     }).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 calculateNavAction(meta, rsp, isGet, pageKey, currentPageKey, revisit) {
+  let navigationAction = "push";
+  if (!rsp.redirected && !isGet) {
+    navigationAction = "replace";
+  }
+  const isSamePage = pageKey == currentPageKey;
+  if (isSamePage) {
+    navigationAction = "none";
+  }
+  if (revisit && isGet) {
+    if (rsp.redirected) {
+      navigationAction = "replace";
+    } else {
+      navigationAction = "none";
     }
-  };
+  }
+  return navigationAction;
 }
-function handleGraft({
-  pageKey,
-  page
-}) {
-  pageKey = urlToPageKey(pageKey);
-  return {
-    type: HANDLE_GRAFT,
-    payload: {
-      pageKey,
-      page
-    }
-  };
+function calculatePageKey(rsp, isGet, currentPageKey) {
+  let pageKey = urlToPageKey(rsp.url);
+  if (!isGet && !rsp.redirected) {
+    pageKey = currentPageKey;
+  }
+  const contentLocation = rsp.headers.get("content-location");
+  if (contentLocation) {
+    pageKey = urlToPageKey(contentLocation);
+  }
+  return pageKey;
 }
+
+// lib/action_creators/index.ts
 function fetchDeferments(pageKey, defers = []) {
   pageKey = urlToPageKey(pageKey);
   return (dispatch) => {
@@ -710,35 +700,60 @@ function fetchDeferments(pageKey, defers = []) {
     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) {
+      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
+          })
+        );
+      });
     }
     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();
-        }
-      });
+      return dispatch(fetchDeferments(pageKey, defers)).then(
+        () => Promise.resolve()
+      );
     } else {
       return Promise.resolve();
     }
@@ -746,34 +761,30 @@ function saveAndProcessPage(pageKey, page) {
 }
 
 export {
+  config,
   pathWithoutBZParams,
   urlToPageKey,
+  parsePageKey,
   argsForHistory,
-  KeyPathError,
   getIn,
   setIn,
-  BEFORE_FETCH,
-  BEFORE_VISIT,
-  BEFORE_REMOTE,
-  SAVE_RESPONSE,
-  HANDLE_GRAFT,
+  ujsHandlers,
   GRAFTING_ERROR,
   GRAFTING_SUCCESS,
-  HISTORY_CHANGE,
-  SET_CSRF_TOKEN,
-  REMOVE_PAGE,
-  COPY_PAGE,
-  UPDATE_FRAGMENTS,
-  actions_exports,
-  remote,
-  visit,
-  copyPage,
   saveResponse,
   handleGraft,
-  saveAndProcessPage,
-  mapStateToProps,
-  mapDispatchToProps,
-  config,
-  ujsHandlers
+  updateFragments,
+  copyPage,
+  removePage,
+  beforeFetch,
+  beforeVisit,
+  beforeRemote,
+  setCSRFToken,
+  historyChange,
+  setActivePage,
+  MismatchedComponentError,
+  remote,
+  visit,
+  saveAndProcessPage
 };
-//# sourceMappingURL=chunk-MNVGYKSD.mjs.map
+//# sourceMappingURL=chunk-LGUVOEZ3.mjs.map