@thoughtbot/superglue 1.0.3 → 2.0.0-alpha.10

package/dist/cjs/action_creators.cjs

@@ -100,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("="));
@@ -148,6 +151,34 @@ function normalizeKeyPath(path) {
     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/config.ts
 var config = {
@@ -155,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);
 }
@@ -211,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";
   }
@@ -250,7 +303,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;
@@ -302,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"
 );
@@ -317,24 +369,285 @@ 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 receiveResponse = (0, import_toolkit.createAction)(
+  "@@superglue/RECEIVE_RESPONSE",
+  ({ pageKey, response }) => {
+    pageKey = urlToPageKey(pageKey);
+    return {
+      payload: {
+        pageKey,
+        response
+      }
+    };
+  }
+);
+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/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);
+}
 
 // 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) {
@@ -342,10 +655,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);
@@ -355,7 +669,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";
@@ -364,10 +678,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}".
@@ -383,9 +698,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));
   };
@@ -424,14 +757,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}.
 
@@ -447,29 +782,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";
   }
@@ -498,6 +854,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);
@@ -531,58 +994,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 {