@thoughtbot/superglue 1.0.3 → 2.0.0-alpha.10

package/dist/{chunk-ENOVWJUC.mjs → chunk-J2XH5QTK.mjs}

@@ -179,7 +179,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
+import { v4 as uuidv4 } from "uuid";
+var lastRequestIds = new LimitedSet(20);
 function isValidResponse(xhr) {
   return isValidContent(xhr) && !downloadingFile(xhr);
 }
@@ -235,6 +254,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";
   }
@@ -274,7 +296,7 @@ function argsForFetch(getState, pathQuery2, {
   return [fetchPath.toString(), { ...options, ...rest }];
 }
 function extractJSON(rsp) {
-  return rsp.clone().json().then((json) => {
+  return rsp.json().then((json) => {
     return { rsp, json };
   }).catch((e) => {
     e.response = rsp;
@@ -428,7 +450,6 @@ var handleGraft = createAction(
 var superglueError = createAction(
   "@@superglue/ERROR"
 );
-var updateFragments = createAction("@@superglue/UPDATE_FRAGMENTS");
 var copyPage = createAction(
   "@@superglue/COPY_PAGE"
 );
@@ -443,24 +464,291 @@ 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 receiveResponse = createAction(
+  "@@superglue/RECEIVE_RESPONSE",
+  ({ pageKey, response }) => {
+    pageKey = urlToPageKey(pageKey);
+    return {
+      payload: {
+        pageKey,
+        response
+      }
+    };
+  }
+);
+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/utils/proxy.ts
+var ORIGINAL_TARGET = Symbol("@@originalTarget");
+var ARRAY_GETTER_METHODS = /* @__PURE__ */ new Set([
+  Symbol.iterator,
+  "at",
+  "concat",
+  "entries",
+  "every",
+  "filter",
+  "find",
+  "findIndex",
+  "flat",
+  "flatMap",
+  "forEach",
+  "includes",
+  "indexOf",
+  "join",
+  "keys",
+  "lastIndexOf",
+  "map",
+  "reduce",
+  "reduceRight",
+  "slice",
+  "some",
+  "toString",
+  "values"
+]);
+var ARRAY_SETTER_METHODS = /* @__PURE__ */ new Set([
+  "copyWithin",
+  "fill",
+  "pop",
+  "push",
+  "reverse",
+  "shift",
+  "sort",
+  "splice",
+  "unshift"
+]);
+function isArraySetter(prop) {
+  return ARRAY_SETTER_METHODS.has(prop);
+}
+function isArrayGetter(prop) {
+  return ARRAY_GETTER_METHODS.has(prop);
+}
+function convertToInt(prop) {
+  if (typeof prop === "symbol") return null;
+  const num = Number(prop);
+  return Number.isInteger(num) ? num : null;
+}
+function isFragmentReference(value) {
+  return !!value && typeof value === "object" && "__id" in value && typeof value.__id === "string";
+}
+function createArrayProxy(arrayData, fragments, dependencies, proxyCache) {
+  if (proxyCache && proxyCache.has(arrayData)) {
+    return proxyCache.get(arrayData);
+  }
+  const proxy = new Proxy(arrayData, {
+    get(target, prop) {
+      if (prop === ORIGINAL_TARGET) {
+        return target;
+      }
+      if (isArrayGetter(prop)) {
+        const method = target[prop];
+        if (typeof method === "function") {
+          return function(...args) {
+            return Reflect.apply(method, proxy, args);
+          };
+        }
+        return method;
+      }
+      if (isArraySetter(prop)) {
+        throw new Error(
+          `Cannot mutate proxy array. Use useSetFragment to update state.`
+        );
+      }
+      const index = convertToInt(prop);
+      if (index !== null && index >= 0 && index < target.length) {
+        const item = target[index];
+        if (isFragmentReference(item)) {
+          dependencies.add(item.__id);
+          const fragmentData = fragments.current[item.__id];
+          if (!fragmentData) {
+            return void 0;
+          }
+          return createProxy(fragmentData, fragments, dependencies, proxyCache);
+        }
+        if (typeof item === "object" && item !== null) {
+          if ("$$typeof" in item) {
+            return item;
+          } else {
+            return createProxy(
+              item,
+              fragments,
+              dependencies,
+              proxyCache
+            );
+          }
+        }
+        return item;
+      }
+      return Reflect.get(target, prop);
+    },
+    has(target, prop) {
+      if (prop === ORIGINAL_TARGET) {
+        return true;
+      }
+      return Reflect.has(target, prop);
+    },
+    set() {
+      throw new Error(
+        "Cannot mutate proxy array. Use useSetFragment to update state."
+      );
+    },
+    deleteProperty() {
+      throw new Error(
+        "Cannot delete properties on proxy array. Use useSetFragment to update state."
+      );
+    },
+    defineProperty() {
+      throw new Error(
+        "Cannot define properties on proxy array. Use useSetFragment to update state."
+      );
+    }
+  });
+  if (proxyCache) {
+    proxyCache.set(arrayData, proxy);
+  }
+  return proxy;
+}
+function createObjectProxy(objectData, fragments, dependencies, proxyCache) {
+  if (proxyCache && proxyCache.has(objectData)) {
+    return proxyCache.get(objectData);
+  }
+  const proxy = new Proxy(objectData, {
+    get(target, prop) {
+      if (prop === ORIGINAL_TARGET) {
+        return target;
+      }
+      const value = target[prop];
+      if (isFragmentReference(value)) {
+        dependencies.add(value.__id);
+        const fragmentData = fragments.current[value.__id];
+        if (!fragmentData) {
+          return void 0;
+        }
+        return createProxy(fragmentData, fragments, dependencies, proxyCache);
+      }
+      if (typeof value === "object" && value !== null) {
+        if ("$$typeof" in value) {
+          return value;
+        } else if (Array.isArray(value)) {
+          return createArrayProxy(value, fragments, dependencies, proxyCache);
+        } else {
+          return createObjectProxy(value, fragments, dependencies, proxyCache);
+        }
+      }
+      return value;
+    },
+    has(target, prop) {
+      if (prop === ORIGINAL_TARGET) {
+        return true;
+      }
+      return Reflect.has(target, prop);
+    },
+    set() {
+      throw new Error(
+        "Cannot mutate proxy object. Use useSetFragment to update state."
+      );
+    },
+    deleteProperty() {
+      throw new Error(
+        "Cannot delete properties on proxy object. Use useSetFragment to update state."
+      );
+    },
+    defineProperty() {
+      throw new Error(
+        "Cannot define properties on proxy object. Use useSetFragment to update state."
+      );
+    }
+  });
+  if (proxyCache) {
+    proxyCache.set(objectData, proxy);
+  }
+  return proxy;
+}
+function createProxy(content, fragments, dependencies, proxyCache) {
+  if (!content || typeof content !== "object") {
+    return content;
+  }
+  if ("$$typeof" in content) {
+    return content;
+  }
+  if (Array.isArray(content)) {
+    return createArrayProxy(content, fragments, dependencies, proxyCache);
+  }
+  return createObjectProxy(content, fragments, dependencies, proxyCache);
+}
+function unproxy(proxy) {
+  if (proxy && typeof proxy === "object" && ORIGINAL_TARGET in proxy) {
+    return proxy[ORIGINAL_TARGET];
+  }
+  return proxy;
+}
 
 // lib/action_creators/requests.ts
 function handleFetchErr(err, fetchArgs, dispatch) {
   dispatch(superglueError({ message: err.message }));
+  console.error(err);
   throw err;
 }
 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) {
@@ -468,10 +756,11 @@ 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
 } = {}) => {
   targetPageKey = targetPageKey && urlToPageKey(targetPageKey);
@@ -481,7 +770,7 @@ var remote = (path, {
     dispatch(beforeRemote({ currentPageKey, fetchArgs }));
     dispatch(beforeFetch({ fetchArgs }));
     return fetch(...fetchArgs).then(parseResponse).then(({ rsp, json }) => {
-      const { superglue, pages = {} } = getState();
+      const { superglue, pages = {}, fragments } = getState();
       let pageKey;
       if (targetPageKey === void 0) {
         const isGet = fetchArgs[1].method === "GET";
@@ -490,10 +779,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}".
@@ -509,9 +799,27 @@ 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);
+        }
+      }
+      dispatch(
+        receiveResponse({
+          pageKey,
+          response: JSON.parse(JSON.stringify(json))
+        })
+      );
+      const existingPage = createProxy(
+        pages[pageKey],
+        { current: fragments },
+        /* @__PURE__ */ new Set(),
+        /* @__PURE__ */ new WeakMap()
+      );
+      let page = json;
+      if (json.action === "savePage" || json.action === "graft") {
+        page = JSON.parse(
+          JSON.stringify(beforeSave(existingPage, json))
+        );
       }
-      const page = beforeSave(pages[pageKey], json);
       return dispatch(saveAndProcessPage(pageKey, page)).then(() => meta);
     }).catch((e) => handleFetchErr(e, fetchArgs, dispatch));
   };
@@ -550,14 +858,16 @@ var visit = (path, {
     );
     lastVisitController = controller;
     return fetch(...fetchArgs).then(parseResponse).then(({ rsp, json }) => {
-      const { superglue, pages = {} } = getState();
+      const { superglue, pages = {}, fragments } = 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}.
 
@@ -573,29 +883,50 @@ 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,
           revisit
         )
       };
-      const page = beforeSave(pages[pageKey], json);
+      dispatch(
+        receiveResponse({
+          pageKey,
+          response: JSON.parse(JSON.stringify(json))
+        })
+      );
+      const existingPage = createProxy(
+        pages[pageKey],
+        { current: fragments },
+        /* @__PURE__ */ new Set(),
+        /* @__PURE__ */ new WeakMap()
+      );
+      let page = json;
+      if (json.action === "savePage" || json.action === "graft") {
+        page = JSON.parse(
+          JSON.stringify(beforeSave(existingPage, json))
+        );
+      }
       return dispatch(saveAndProcessPage(pageKey, page)).then(() => visitMeta);
     }).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";
   }
@@ -624,6 +955,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);
@@ -657,58 +1137,64 @@ function fetchDeferments(pageKey, defers = []) {
     return Promise.all(fetches);
   };
 }
+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 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);
+    let nextPage = page;
+    const state = getState();
+    if (page.action === "savePage" && state.pages[pageKey]) {
+      const existingPage = createProxy(
+        state.pages[pageKey],
+        { current: state.fragments },
+        /* @__PURE__ */ new Set(),
+        /* @__PURE__ */ new WeakMap()
+      );
+      nextPage = JSON.parse(
+        JSON.stringify(addPlaceholdersToDeferredNodes(existingPage, nextPage))
+      );
+    }
+    page.fragments.slice().reverse().forEach((fragment) => {
+      const { id, path } = fragment;
+      const node = getIn(nextPage, path);
+      nextPage = setIn(nextPage, 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 {
@@ -724,12 +1210,12 @@ export {
   argsForHistory,
   getIn,
   setIn,
+  lastRequestIds,
   ujsHandlers,
   GRAFTING_ERROR,
   GRAFTING_SUCCESS,
   saveResponse,
   handleGraft,
-  updateFragments,
   copyPage,
   removePage,
   beforeFetch,
@@ -738,9 +1224,20 @@ export {
   setCSRFToken,
   historyChange,
   setActivePage,
+  handleFragmentGraft,
+  saveFragment,
+  receiveResponse,
+  appendToFragment,
+  prependToFragment,
+  createProxy,
+  unproxy,
   MismatchedComponentError,
   remote,
   visit,
+  streamPrepend,
+  streamAppend,
+  streamSave,
+  handleStreamMessage,
   saveAndProcessPage
 };
-//# sourceMappingURL=chunk-ENOVWJUC.mjs.map
+//# sourceMappingURL=chunk-J2XH5QTK.mjs.map