@thoughtbot/superglue 1.0.1 → 2.0.0-alpha.1

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

@@ -1,72 +1,74 @@
+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 __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+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
+));
+
 // lib/utils/url.ts
-import parse from "url-parse";
+var FAKE_ORIGIN = "https://example.com";
 function pathQuery(url) {
-  const { pathname, query } = new parse(url, {});
+  const { pathname, search: query } = new URL(url, FAKE_ORIGIN);
   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"];
+  const { searchParams } = new URL(url, FAKE_ORIGIN);
+  return searchParams.has("props_at");
 }
 function propsAtParam(url) {
-  const parsed = new parse(url, {}, true);
-  const query = parsed.query;
-  return query["props_at"];
+  const { searchParams } = new URL(url, FAKE_ORIGIN);
+  return searchParams.get("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());
+  const parsed = new URL(url, FAKE_ORIGIN);
+  parsed.searchParams.set("format", "json");
+  return parsed.href.replace(parsed.origin, "");
 }
 function removePropsAt(url) {
-  const parsed = new parse(url, {}, true);
-  const query = parsed.query;
-  delete query["props_at"];
-  parsed.set("query", query);
-  return parsed.toString();
+  const parsed = new URL(url, FAKE_ORIGIN);
+  parsed.searchParams.delete("props_at");
+  return parsed.href.replace(parsed.origin, "");
 }
 function urlToPageKey(url) {
-  const parsed = new parse(url, {}, true);
-  const query = parsed.query;
-  delete query["props_at"];
-  delete query["format"];
-  parsed.set("query", query);
+  const parsed = new URL(url, FAKE_ORIGIN);
+  parsed.searchParams.delete("props_at");
+  parsed.searchParams.delete("format");
   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());
+  const parsed = new URL(url, FAKE_ORIGIN);
+  parsed.hash = "";
+  return parsed.href.replace(parsed.origin, "");
 }
 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);
+  const { pathname, searchParams } = new URL(pageKey, FAKE_ORIGIN);
+  const search = Object.fromEntries(searchParams);
   return {
     pathname,
-    search: query
+    search
   };
 }
 
@@ -197,16 +199,32 @@ function setIn(object, path, value) {
   return results[0];
 }
 
-// lib/utils/request.ts
-import parse2 from "url-parse";
-
 // lib/config.ts
 var config = {
   baseUrl: "",
   maxPages: 20
 };
 
+// lib/utils/limited_set.ts
+var LimitedSet = class extends Set {
+  constructor(maxSize) {
+    super();
+    this.maxSize = maxSize;
+  }
+  add(value) {
+    if (this.size >= this.maxSize) {
+      const iterator = this.values();
+      const oldestValue = iterator.next().value;
+      this.delete(oldestValue);
+    }
+    super.add(value);
+    return this;
+  }
+};
+
 // lib/utils/request.ts
+import { v4 as uuidv4 } from "uuid";
+var lastRequestIds = new LimitedSet(20);
 function isValidResponse(xhr) {
   return isValidContent(xhr) && !downloadingFile(xhr);
 }
@@ -262,6 +280,9 @@ function argsForFetch(getState, pathQuery2, {
   nextHeaders["x-requested-with"] = "XMLHttpRequest";
   nextHeaders["accept"] = "application/json";
   nextHeaders["x-superglue-request"] = "true";
+  const requestId = uuidv4();
+  lastRequestIds.add(requestId);
+  nextHeaders["X-Superglue-Request-Id"] = requestId;
   if (method != "GET" && method != "HEAD") {
     nextHeaders["content-type"] = "application/json";
   }
@@ -271,11 +292,7 @@ function argsForFetch(getState, pathQuery2, {
   if (currentState.csrfToken) {
     nextHeaders["x-csrf-token"] = currentState.csrfToken;
   }
-  const fetchPath = new parse2(
-    formatForXHR(pathQuery2),
-    config.baseUrl || {},
-    true
-  );
+  const fetchPath = new URL(formatForXHR(pathQuery2), config.baseUrl);
   const credentials = "same-origin";
   if (!(method == "GET" || method == "HEAD")) {
     nextHeaders["x-http-method-override"] = method;
@@ -289,20 +306,16 @@ function argsForFetch(getState, pathQuery2, {
     signal
   };
   if (currentState.currentPageKey) {
-    const referrer = new parse2(
-      currentState.currentPageKey,
-      config.baseUrl || {},
-      false
-    ).href;
-    options.referrer = referrer;
+    const referrer = new URL(currentState.currentPageKey, config.baseUrl);
+    options.referrer = referrer.toString();
   }
   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);
+      allData.forEach((value, key) => fetchPath.searchParams.delete(key));
+      allData.forEach((value, key) => fetchPath.searchParams.append(key, value));
     }
     delete options.body;
   }
@@ -360,12 +373,11 @@ var HandlerBuilder = class {
       return;
     }
     event.preventDefault();
-    let url = form.getAttribute("action");
+    const 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)
@@ -381,11 +393,10 @@ var HandlerBuilder = class {
       return;
     }
     event.preventDefault();
-    let url = link.getAttribute("href");
+    const url = link.getAttribute("href");
     if (!url) {
       return;
     }
-    url = withoutBusters(url);
     this.visitOrRemote(link, url, { method: "GET" });
   }
   visitOrRemote(linkOrForm, url, opts) {
@@ -434,9 +445,6 @@ function needsRefresh(prevAssets, newAssets) {
   }
 }
 
-// lib/action_creators/index.ts
-import parse3 from "url-parse";
-
 // lib/actions.ts
 import { createAction } from "@reduxjs/toolkit";
 var GRAFTING_ERROR = "@@superglue/GRAFTING_ERROR";
@@ -468,7 +476,6 @@ var handleGraft = createAction(
 var superglueError = createAction(
   "@@superglue/ERROR"
 );
-var updateFragments = createAction("@@superglue/UPDATE_FRAGMENTS");
 var copyPage = createAction(
   "@@superglue/COPY_PAGE"
 );
@@ -483,6 +490,53 @@ 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");
+var handleFragmentGraft = createAction(
+  "@@superglue/HANDLE_FRAGMENT_GRAFT",
+  ({
+    fragmentId,
+    response
+  }) => {
+    return {
+      payload: {
+        response,
+        fragmentId
+      }
+    };
+  }
+);
+var saveFragment = createAction(
+  "@@superglue/SAVE_FRAGMENT",
+  ({ fragmentId, data }) => {
+    return {
+      payload: {
+        fragmentId,
+        data
+      }
+    };
+  }
+);
+var appendToFragment = createAction(
+  "@@superglue/APPEND_TO_FRAGMENT",
+  ({ data, fragmentId }) => {
+    return {
+      payload: {
+        data,
+        fragmentId
+      }
+    };
+  }
+);
+var prependToFragment = createAction(
+  "@@superglue/PREPEND_TO_FRAGMENT",
+  ({ data, fragmentId }) => {
+    return {
+      payload: {
+        data,
+        fragmentId
+      }
+    };
+  }
+);
 
 // lib/action_creators/requests.ts
 function handleFetchErr(err, fetchArgs, dispatch) {
@@ -492,15 +546,18 @@ function handleFetchErr(err, fetchArgs, dispatch) {
 function buildMeta(pageKey, page, state, rsp, fetchArgs) {
   const { assets: prevAssets } = state;
   const { assets: nextAssets } = page;
-  return {
+  const meta = {
     pageKey,
     page,
     redirected: rsp.redirected,
     rsp,
     fetchArgs,
-    componentIdentifier: page.componentIdentifier,
     needsRefresh: needsRefresh(prevAssets, nextAssets)
   };
+  if (page.action !== "handleStreamResponse") {
+    meta.componentIdentifier = page.componentIdentifier;
+  }
+  return meta;
 }
 var MismatchedComponentError = class extends Error {
   constructor(message) {
@@ -508,13 +565,13 @@ var MismatchedComponentError = class extends Error {
     this.name = "MismatchedComponentError";
   }
 };
+var defaultBeforeSave = (prevPage, receivedPage) => receivedPage;
 var remote = (path, {
   pageKey: targetPageKey,
   force = false,
-  beforeSave = (prevPage, receivedPage) => receivedPage,
+  beforeSave = defaultBeforeSave,
   ...rest
 } = {}) => {
-  path = withoutBusters(path);
   targetPageKey = targetPageKey && urlToPageKey(targetPageKey);
   return (dispatch, getState) => {
     const fetchArgs = argsForFetch(getState, path, rest);
@@ -531,10 +588,11 @@ var remote = (path, {
         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
+      if (json.action !== "handleStreamResponse") {
+        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}".
@@ -550,7 +608,8 @@ 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);
+          throw new MismatchedComponentError(message);
+        }
       }
       const page = beforeSave(pages[pageKey], json);
       return dispatch(saveAndProcessPage(pageKey, page)).then(() => meta);
@@ -568,7 +627,6 @@ var visit = (path, {
   revisit = false,
   ...rest
 } = {}) => {
-  path = withoutBusters(path);
   return (dispatch, getState) => {
     const currentPageKey = getState().superglue.currentPageKey;
     placeholderKey = placeholderKey && urlToPageKey(placeholderKey) || currentPageKey;
@@ -595,11 +653,13 @@ var visit = (path, {
       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
+      const meta = buildMeta(pageKey, json, superglue, rsp, fetchArgs);
+      if (json.action !== "handleStreamResponse") {
+        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}.
 
@@ -615,16 +675,17 @@ 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);
+            throw new MismatchedComponentError(message);
+          }
+          dispatch(copyPage({ from: placeholderKey, to: pageKey }));
         }
-        dispatch(copyPage({ from: placeholderKey, to: pageKey }));
       }
-      const meta = buildMeta(pageKey, json, superglue, rsp, fetchArgs);
       const visitMeta = {
         ...meta,
         navigationAction: calculateNavAction(
           meta,
           rsp,
+          json,
           isGet,
           pageKey,
           currentPageKey,
@@ -636,8 +697,11 @@ to the same page.
     }).catch((e) => handleFetchErr(e, fetchArgs, dispatch));
   };
 };
-function calculateNavAction(meta, rsp, isGet, pageKey, currentPageKey, revisit) {
+function calculateNavAction(meta, rsp, json, isGet, pageKey, currentPageKey, revisit) {
   let navigationAction = "push";
+  if (json.action === "handleStreamResponse") {
+    return "none";
+  }
   if (!rsp.redirected && !isGet) {
     navigationAction = "replace";
   }
@@ -666,6 +730,155 @@ function calculatePageKey(rsp, isGet, currentPageKey) {
   return pageKey;
 }
 
+// lib/action_creators/stream.ts
+var streamPrepend = (fragments, data, options = {}) => {
+  return (dispatch) => {
+    if (options.saveAs) {
+      const { saveAs } = options;
+      dispatch(
+        saveFragment({
+          fragmentId: saveAs,
+          data
+        })
+      );
+      fragments.forEach((fragmentId) => {
+        dispatch(
+          prependToFragment({
+            fragmentId,
+            data: {
+              __id: saveAs
+            }
+          })
+        );
+      });
+    } else {
+      fragments.forEach((fragmentId) => {
+        dispatch(
+          prependToFragment({
+            fragmentId,
+            data
+          })
+        );
+      });
+    }
+  };
+};
+var streamAppend = (fragments, data, options = {}) => {
+  return (dispatch) => {
+    if (options.saveAs) {
+      const { saveAs } = options;
+      dispatch(
+        saveFragment({
+          fragmentId: saveAs,
+          data
+        })
+      );
+      fragments.forEach((fragmentId) => {
+        dispatch(
+          appendToFragment({
+            fragmentId,
+            data: {
+              __id: saveAs
+            }
+          })
+        );
+      });
+    } else {
+      fragments.forEach((fragmentId) => {
+        dispatch(
+          appendToFragment({
+            fragmentId,
+            data
+          })
+        );
+      });
+    }
+  };
+};
+var streamSave = (fragment, data) => {
+  return (dispatch) => {
+    dispatch(
+      saveFragment({
+        fragmentId: fragment,
+        data
+      })
+    );
+  };
+};
+var handleStreamMessage = (rawMessage) => {
+  return (dispatch) => {
+    const message = JSON.parse(rawMessage);
+    let nextMessage = message;
+    if (message.handler !== "refresh") {
+      message.fragments.reverse().forEach((fragment) => {
+        const { id, path } = fragment;
+        const node = getIn(nextMessage, path);
+        nextMessage = setIn(nextMessage, path, { __id: id });
+        dispatch(
+          saveFragment({
+            fragmentId: id,
+            data: node
+          })
+        );
+      });
+    }
+    if (nextMessage.action === "handleStreamMessage") {
+      if (nextMessage.handler === "append") {
+        dispatch(
+          streamAppend(
+            nextMessage.fragmentIds,
+            nextMessage.data,
+            nextMessage.options
+          )
+        );
+      }
+      if (nextMessage.handler === "prepend") {
+        dispatch(
+          streamPrepend(
+            nextMessage.fragmentIds,
+            nextMessage.data,
+            nextMessage.options
+          )
+        );
+      }
+      if (nextMessage.handler === "save") {
+        dispatch(streamSave(nextMessage.fragmentIds[0], nextMessage.data));
+      }
+    }
+  };
+};
+var handleStreamResponse = (response) => {
+  return (dispatch) => {
+    let nextResponse = response;
+    nextResponse.fragments.reverse().forEach((fragment) => {
+      const { id, path } = fragment;
+      const node = getIn(nextResponse, path);
+      nextResponse = setIn(nextResponse, path, { __id: id });
+      dispatch(
+        saveFragment({
+          fragmentId: id,
+          data: node
+        })
+      );
+    });
+    nextResponse.data.forEach((message) => {
+      if (message.handler === "append") {
+        dispatch(
+          streamAppend(message.fragmentIds, message.data, message.options)
+        );
+      }
+      if (message.handler === "prepend") {
+        dispatch(
+          streamPrepend(message.fragmentIds, message.data, message.options)
+        );
+      }
+      if (message.handler === "save") {
+        dispatch(streamSave(message.fragmentIds[0], message.data));
+      }
+    });
+  };
+};
+
 // lib/action_creators/index.ts
 function fetchDeferments(pageKey, defers = []) {
   pageKey = urlToPageKey(pageKey);
@@ -675,8 +888,7 @@ function fetchDeferments(pageKey, defers = []) {
       successAction = GRAFTING_SUCCESS,
       failAction = GRAFTING_ERROR
     }) {
-      const parsedUrl = new parse3(url, true);
-      const keyPath = parsedUrl.query.props_at;
+      const keyPath = propsAtParam(url);
       return dispatch(remote(url, { pageKey })).then(() => {
         dispatch({
           type: successAction,
@@ -701,57 +913,40 @@ function fetchDeferments(pageKey, defers = []) {
   };
 }
 function saveAndProcessPage(pageKey, page) {
-  return (dispatch, getState) => {
+  return (dispatch) => {
     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);
+    let nextPage = page;
+    page.fragments.reverse().forEach((fragment) => {
+      const { id, path } = fragment;
+      const node = getIn(nextPage, path);
+      nextPage = setIn(page, path, { __id: id });
+      dispatch(
+        saveFragment({
+          fragmentId: id,
+          data: node
+        })
+      );
+    });
+    if (nextPage.action === "graft") {
+      if (typeof nextPage.fragmentContext === "string") {
         dispatch(
-          updateFragments({
-            name: type,
-            pageKey,
-            value: currentFragment,
-            path
+          handleFragmentGraft({
+            fragmentId: nextPage.fragmentContext,
+            response: nextPage
           })
         );
-      });
+      } else {
+        dispatch(handleGraft({ pageKey, page: nextPage }));
+      }
+    } else if (nextPage.action === "handleStreamResponse") {
+      dispatch(handleStreamResponse(nextPage));
+      return Promise.resolve();
+    } else {
+      dispatch(saveResponse({ pageKey, page: nextPage }));
     }
     const hasFetch = typeof fetch != "undefined";
     if (hasFetch) {
-      return dispatch(fetchDeferments(pageKey, defers)).then(
+      return dispatch(fetchDeferments(pageKey, nextPage.defers)).then(
         () => Promise.resolve()
       );
     } else {
@@ -761,19 +956,20 @@ function saveAndProcessPage(pageKey, page) {
 }
 
 export {
+  __commonJS,
+  __toESM,
   config,
-  pathWithoutBZParams,
   urlToPageKey,
   parsePageKey,
   argsForHistory,
   getIn,
   setIn,
+  lastRequestIds,
   ujsHandlers,
   GRAFTING_ERROR,
   GRAFTING_SUCCESS,
   saveResponse,
   handleGraft,
-  updateFragments,
   copyPage,
   removePage,
   beforeFetch,
@@ -782,9 +978,17 @@ export {
   setCSRFToken,
   historyChange,
   setActivePage,
+  handleFragmentGraft,
+  saveFragment,
+  appendToFragment,
+  prependToFragment,
   MismatchedComponentError,
   remote,
   visit,
+  streamPrepend,
+  streamAppend,
+  streamSave,
+  handleStreamMessage,
   saveAndProcessPage
 };
-//# sourceMappingURL=chunk-LGUVOEZ3.mjs.map
+//# sourceMappingURL=chunk-YS477OKK.mjs.map