@thoughtbot/superglue 2.0.0-alpha.4 → 2.0.0-alpha.5

package/dist/cjs/superglue.cjs

@@ -6060,9 +6060,214 @@ var prependToFragment = (0, import_toolkit.createAction)(
   }
 );
 
+// 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 Redux actions 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) {
+            throw new Error(`Fragment with id "${item.__id}" not found`);
+          }
+          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 Redux actions to update state."
+      );
+    },
+    deleteProperty() {
+      throw new Error(
+        "Cannot delete properties on proxy array. Use Redux actions to update state."
+      );
+    },
+    defineProperty() {
+      throw new Error(
+        "Cannot define properties on proxy array. Use Redux actions 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) {
+          throw new Error(`Fragment with id "${value.__id}" not found`);
+        }
+        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 Redux actions to update state."
+      );
+    },
+    deleteProperty() {
+      throw new Error(
+        "Cannot delete properties on proxy object. Use Redux actions to update state."
+      );
+    },
+    defineProperty() {
+      throw new Error(
+        "Cannot define properties on proxy object. Use Redux actions 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) {
@@ -6101,7 +6306,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";
@@ -6134,7 +6339,15 @@ the same page. Or if you're sure you want to proceed, use force: true.
         }
       }
       dispatch(receiveResponse({ pageKey, response: json }));
-      const page = beforeSave(pages[pageKey], json);
+      const existingPage = createProxy(
+        pages[pageKey],
+        { current: fragments },
+        /* @__PURE__ */ new Set(),
+        /* @__PURE__ */ new WeakMap()
+      );
+      const page = JSON.parse(
+        JSON.stringify(beforeSave(existingPage, json))
+      );
       return dispatch(saveAndProcessPage(pageKey, page)).then(() => meta);
     }).catch((e) => handleFetchErr(e, fetchArgs, dispatch));
   };
@@ -6300,210 +6513,6 @@ var handleStreamResponse = (response) => {
   };
 };
 
-// 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 Redux actions 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) {
-            throw new Error(`Fragment with id "${item.__id}" not found`);
-          }
-          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 Redux actions to update state."
-      );
-    },
-    deleteProperty() {
-      throw new Error(
-        "Cannot delete properties on proxy array. Use Redux actions to update state."
-      );
-    },
-    defineProperty() {
-      throw new Error(
-        "Cannot define properties on proxy array. Use Redux actions 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) {
-          throw new Error(`Fragment with id "${value.__id}" not found`);
-        }
-        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 Redux actions to update state."
-      );
-    },
-    deleteProperty() {
-      throw new Error(
-        "Cannot delete properties on proxy object. Use Redux actions to update state."
-      );
-    },
-    defineProperty() {
-      throw new Error(
-        "Cannot define properties on proxy object. Use Redux actions 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/index.ts
 function fetchDeferments(pageKey, defers = []) {
   pageKey = urlToPageKey(pageKey);
@@ -6619,8 +6628,6 @@ function useContent(fragmentRef, options) {
   const superglueState = useSuperglue();
   const currentPageKey = superglueState.currentPageKey;
   const dependencies = (0, import_react.useRef)(/* @__PURE__ */ new Set());
-  const fragmentsHookRef = (0, import_react.useRef)({});
-  const proxyCache = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
   const fragmentId = typeof fragmentRef === "string" ? fragmentRef : fragmentRef?.__id;
   const sourceData = (0, import_react_redux.useSelector)((state) => {
     if (fragmentId) {
@@ -6629,7 +6636,7 @@ function useContent(fragmentRef, options) {
       return state.pages[currentPageKey].data;
     }
   });
-  const fragments = (0, import_react_redux.useSelector)(
+  const trackedFragments = (0, import_react_redux.useSelector)(
     (state) => state.fragments,
     (oldFragments, newFragments) => {
       if (oldFragments === newFragments) {
@@ -6642,9 +6649,10 @@ function useContent(fragmentRef, options) {
       });
     }
   );
-  fragmentsHookRef.current = fragments;
   const raiseOnMissing = !(options?.optional ?? false);
+  const store = (0, import_react_redux.useStore)();
   const proxy = (0, import_react.useMemo)(() => {
+    const proxyCache = /* @__PURE__ */ new WeakMap();
     if (fragmentId && !sourceData) {
       if (raiseOnMissing) {
         throw new Error(`Fragment with id "${fragmentId}" not found`);
@@ -6654,11 +6662,11 @@ function useContent(fragmentRef, options) {
     }
     return createProxy(
       sourceData,
-      fragmentsHookRef,
+      { current: store.getState().fragments },
       dependencies.current,
-      proxyCache.current
+      proxyCache
     );
-  }, [sourceData, options?.optional]);
+  }, [sourceData, trackedFragments, options?.optional]);
   return proxy;
 }
 function unproxy2(proxy) {