@thoughtbot/superglue 0.53.4 → 1.0.0

package/dist/chunk-LGUVOEZ3.mjs

@@ -0,0 +1,790 @@
+// lib/utils/url.ts
+import parse from "url-parse";
+function pathQuery(url) {
+  const { pathname, query } = new parse(url, {});
+  return pathname + query;
+}
+function pathQueryHash(url) {
+  const { pathname, query, hash } = new parse(url, {});
+  return pathname + query + hash;
+}
+function hasPropsAt(url) {
+  const parsed = new parse(url, {}, true);
+  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";
+  return parsed.toString();
+}
+function pathWithoutBZParams(url) {
+  const parsed = new parse(url, {}, true);
+  const query = parsed.query;
+  delete query["props_at"];
+  delete query["format"];
+  parsed.set("query", query);
+  return pathQueryHash(parsed.toString());
+}
+function removePropsAt(url) {
+  const parsed = new parse(url, {}, true);
+  const query = parsed.query;
+  delete query["props_at"];
+  parsed.set("query", query);
+  return parsed.toString();
+}
+function urlToPageKey(url) {
+  const parsed = new parse(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 parse(url, {}, true);
+  parsed.set("hash", "");
+  return parsed.toString();
+}
+function withoutBusters(url) {
+  const parsed = new parse(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);
+}
+function parsePageKey(pageKey) {
+  const { pathname, query } = new parse(pageKey, {}, true);
+  return {
+    pathname,
+    search: query
+  };
+}
+
+// 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/utils/request.ts
+import parse2 from "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 && 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"
+      );
+    }
+    const error = new SuperglueResponseError(rsp.statusText);
+    error.response = rsp;
+    throw error;
+  }
+  return args;
+}
+function argsForFetch(getState, pathQuery2, {
+  method = "GET",
+  headers = {},
+  body = "",
+  signal,
+  ...rest
+} = {}) {
+  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 parse2(
+    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 parse2(
+      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, ...rest }];
+}
+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: visit2,
+    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;
+    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.button > 0 || 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) {
+    const dataset = { ...linkOrForm.dataset };
+    if (linkOrForm.getAttribute(this.attributePrefix + "-visit")) {
+      this.visit(url, { ...opts, dataset });
+    }
+    if (linkOrForm.getAttribute(this.attributePrefix + "-remote")) {
+      const { currentPageKey } = this.store.getState().superglue;
+      this.remote(url, {
+        ...opts,
+        pageKey: currentPageKey,
+        dataset
+      });
+    }
+  }
+  handlers() {
+    return {
+      onClick: this.handleClick,
+      onSubmit: this.handleSubmit
+    };
+  }
+};
+var ujsHandlers = ({
+  ujsAttributePrefix,
+  visit: visit2,
+  remote: remote2,
+  store
+}) => {
+  const builder = new HandlerBuilder({
+    visit: visit2,
+    remote: remote2,
+    ujsAttributePrefix,
+    store
+  });
+  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/action_creators/index.ts
+import parse3 from "url-parse";
+
+// lib/actions.ts
+import { createAction } from "@reduxjs/toolkit";
+var GRAFTING_ERROR = "@@superglue/GRAFTING_ERROR";
+var GRAFTING_SUCCESS = "@@superglue/GRAFTING_SUCCESS";
+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 handleFetchErr(err, fetchArgs, dispatch) {
+  dispatch(superglueError({ message: err.message }));
+  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 MismatchedComponentError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "MismatchedComponentError";
+  }
+};
+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));
+  };
+};
+var lastVisitController = {
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  abort: (_reason) => {
+  }
+};
+var visit = (path, {
+  placeholderKey,
+  beforeSave = (prevPage, receivedPage) => receivedPage,
+  revisit = false,
+  ...rest
+} = {}) => {
+  path = withoutBusters(path);
+  return (dispatch, getState) => {
+    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);
+    }
+    const controller = new AbortController();
+    const { signal } = controller;
+    const fetchArgs = argsForFetch(getState, path, {
+      ...rest,
+      signal
+    });
+    dispatch(beforeVisit({ currentPageKey, fetchArgs }));
+    dispatch(beforeFetch({ fetchArgs }));
+    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 isGet = fetchArgs[1].method === "GET";
+      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 }));
+      }
+      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(() => visitMeta);
+    }).catch((e) => handleFetchErr(e, fetchArgs, dispatch));
+  };
+};
+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 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) => {
+    const fetches = defers.filter(({ type }) => type === "auto").map(function({
+      url,
+      successAction = GRAFTING_SUCCESS,
+      failAction = GRAFTING_ERROR
+    }) {
+      const parsedUrl = new parse3(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 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(
+        () => Promise.resolve()
+      );
+    } else {
+      return Promise.resolve();
+    }
+  };
+}
+
+export {
+  config,
+  pathWithoutBZParams,
+  urlToPageKey,
+  parsePageKey,
+  argsForHistory,
+  getIn,
+  setIn,
+  ujsHandlers,
+  GRAFTING_ERROR,
+  GRAFTING_SUCCESS,
+  saveResponse,
+  handleGraft,
+  updateFragments,
+  copyPage,
+  removePage,
+  beforeFetch,
+  beforeVisit,
+  beforeRemote,
+  setCSRFToken,
+  historyChange,
+  setActivePage,
+  MismatchedComponentError,
+  remote,
+  visit,
+  saveAndProcessPage
+};
+//# sourceMappingURL=chunk-LGUVOEZ3.mjs.map