@thoughtbot/superglue 1.0.1 → 2.0.0-alpha.1

package/dist/cjs/action_creators.cjs

@@ -1,9 +1,7 @@
 "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)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/action_creators/index.ts
@@ -38,52 +28,39 @@ __export(action_creators_exports, {
 module.exports = __toCommonJS(action_creators_exports);
 
 // lib/utils/url.ts
-var import_url_parse = __toESM(require("url-parse"));
+var FAKE_ORIGIN = "https://example.com";
 function pathQuery(url) {
-  const { pathname, query } = new import_url_parse.default(url, {});
+  const { pathname, search: query } = new URL(url, FAKE_ORIGIN);
   return pathname + query;
 }
 function hasPropsAt(url) {
-  const parsed = new import_url_parse.default(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 import_url_parse.default(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 import_url_parse.default(url, {}, true);
-  parsed.query["format"] = "json";
-  return 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 import_url_parse.default(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 import_url_parse.default(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 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());
+  const parsed = new URL(url, FAKE_ORIGIN);
+  parsed.hash = "";
+  return parsed.href.replace(parsed.origin, "");
 }
 function formatForXHR(url) {
   const formats = [withoutHash, withFormatJson];
@@ -123,6 +100,9 @@ function getIn(node, path) {
     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("="));
@@ -171,9 +151,34 @@ function normalizeKeyPath(path) {
     return path;
   }
 }
-
-// lib/utils/request.ts
-var import_url_parse2 = __toESM(require("url-parse"));
+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/config.ts
 var config = {
@@ -181,7 +186,26 @@ var config = {
   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
+var import_uuid = require("uuid");
+var lastRequestIds = new LimitedSet(20);
 function isValidResponse(xhr) {
   return isValidContent(xhr) && !downloadingFile(xhr);
 }
@@ -237,6 +261,9 @@ function argsForFetch(getState, pathQuery2, {
   nextHeaders["x-requested-with"] = "XMLHttpRequest";
   nextHeaders["accept"] = "application/json";
   nextHeaders["x-superglue-request"] = "true";
+  const requestId = (0, import_uuid.v4)();
+  lastRequestIds.add(requestId);
+  nextHeaders["X-Superglue-Request-Id"] = requestId;
   if (method != "GET" && method != "HEAD") {
     nextHeaders["content-type"] = "application/json";
   }
@@ -246,11 +273,7 @@ function argsForFetch(getState, pathQuery2, {
   if (currentState.csrfToken) {
     nextHeaders["x-csrf-token"] = currentState.csrfToken;
   }
-  const fetchPath = new import_url_parse2.default(
-    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;
@@ -264,20 +287,16 @@ function argsForFetch(getState, pathQuery2, {
     signal
   };
   if (currentState.currentPageKey) {
-    const referrer = new import_url_parse2.default(
-      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;
   }
@@ -305,9 +324,6 @@ function needsRefresh(prevAssets, newAssets) {
   }
 }
 
-// lib/action_creators/index.ts
-var import_url_parse3 = __toESM(require("url-parse"));
-
 // lib/actions.ts
 var import_toolkit = require("@reduxjs/toolkit");
 var GRAFTING_ERROR = "@@superglue/GRAFTING_ERROR";
@@ -339,7 +355,6 @@ var handleGraft = (0, import_toolkit.createAction)(
 var superglueError = (0, import_toolkit.createAction)(
   "@@superglue/ERROR"
 );
-var updateFragments = (0, import_toolkit.createAction)("@@superglue/UPDATE_FRAGMENTS");
 var copyPage = (0, import_toolkit.createAction)(
   "@@superglue/COPY_PAGE"
 );
@@ -354,6 +369,53 @@ var beforeRemote = (0, import_toolkit.createAction)("@@superglue/BEFORE_REMOTE")
 var setCSRFToken = (0, import_toolkit.createAction)("@@superglue/SET_CSRF_TOKEN");
 var historyChange = (0, import_toolkit.createAction)("@@superglue/HISTORY_CHANGE");
 var setActivePage = (0, import_toolkit.createAction)("@@superglue/SET_ACTIVE_PAGE");
+var handleFragmentGraft = (0, import_toolkit.createAction)(
+  "@@superglue/HANDLE_FRAGMENT_GRAFT",
+  ({
+    fragmentId,
+    response
+  }) => {
+    return {
+      payload: {
+        response,
+        fragmentId
+      }
+    };
+  }
+);
+var saveFragment = (0, import_toolkit.createAction)(
+  "@@superglue/SAVE_FRAGMENT",
+  ({ fragmentId, data }) => {
+    return {
+      payload: {
+        fragmentId,
+        data
+      }
+    };
+  }
+);
+var appendToFragment = (0, import_toolkit.createAction)(
+  "@@superglue/APPEND_TO_FRAGMENT",
+  ({ data, fragmentId }) => {
+    return {
+      payload: {
+        data,
+        fragmentId
+      }
+    };
+  }
+);
+var prependToFragment = (0, import_toolkit.createAction)(
+  "@@superglue/PREPEND_TO_FRAGMENT",
+  ({ data, fragmentId }) => {
+    return {
+      payload: {
+        data,
+        fragmentId
+      }
+    };
+  }
+);
 
 // lib/action_creators/requests.ts
 function handleFetchErr(err, fetchArgs, dispatch) {
@@ -363,15 +425,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) {
@@ -379,13 +444,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);
@@ -402,10 +467,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}".
@@ -421,7 +487,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);
@@ -439,7 +506,6 @@ var visit = (path, {
   revisit = false,
   ...rest
 } = {}) => {
-  path = withoutBusters(path);
   return (dispatch, getState) => {
     const currentPageKey = getState().superglue.currentPageKey;
     placeholderKey = placeholderKey && urlToPageKey(placeholderKey) || currentPageKey;
@@ -466,11 +532,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}.
 
@@ -486,16 +554,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,
@@ -507,8 +576,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";
   }
@@ -537,6 +609,113 @@ 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 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);
@@ -546,8 +725,7 @@ function fetchDeferments(pageKey, defers = []) {
       successAction = GRAFTING_SUCCESS,
       failAction = GRAFTING_ERROR
     }) {
-      const parsedUrl = new import_url_parse3.default(url, true);
-      const keyPath = parsedUrl.query.props_at;
+      const keyPath = propsAtParam(url);
       return dispatch(remote(url, { pageKey })).then(() => {
         dispatch({
           type: successAction,
@@ -572,57 +750,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 {