@thoughtbot/superglue 1.0.3 → 2.0.0-alpha.10

package/dist/cjs/superglue.cjs

@@ -42,19 +42,22 @@ __export(lib_exports, {
   getIn: () => getIn,
   pageReducer: () => pageReducer,
   prepareStore: () => prepareStore,
+  receiveResponse: () => receiveResponse,
   removePage: () => removePage,
   rootReducer: () => rootReducer,
   saveAndProcessPage: () => saveAndProcessPage,
   saveResponse: () => saveResponse,
   setup: () => setup,
   superglueReducer: () => superglueReducer,
-  updateFragments: () => updateFragments,
+  unproxy: () => unproxy2,
   urlToPageKey: () => urlToPageKey,
   useContent: () => useContent,
+  useSetFragment: () => useSetFragment,
+  useStreamSource: () => useStreamSource,
   useSuperglue: () => useSuperglue
 });
 module.exports = __toCommonJS(lib_exports);
-var import_react2 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // lib/config.ts
 var config = {
@@ -228,7 +231,26 @@ function setIn(object, path, value) {
   return results[0];
 }
 
+// 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);
 }
@@ -284,6 +306,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";
   }
@@ -323,7 +348,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;
@@ -477,7 +502,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"
 );
@@ -492,24 +516,291 @@ 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);
+}
+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) {
@@ -517,10 +808,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);
@@ -530,7 +822,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";
@@ -539,10 +831,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}".
@@ -558,9 +851,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));
   };
@@ -577,6 +888,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);
@@ -610,58 +1070,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 {
@@ -671,13 +1137,170 @@ function saveAndProcessPage(pageKey, page) {
 }
 
 // lib/index.tsx
+var import_react_redux5 = require("react-redux");
+
+// lib/hooks/useStreamSource.tsx
+var import_react2 = require("react");
+
+// lib/hooks/index.ts
 var import_react_redux3 = require("react-redux");
+
+// lib/hooks/useContent.tsx
+var import_react_redux = require("react-redux");
+var import_react = require("react");
+function useContent(fragmentRef) {
+  const superglueState = useSuperglue();
+  const currentPageKey = superglueState.currentPageKey;
+  const dependencies = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  const fragmentId = typeof fragmentRef === "string" ? fragmentRef : fragmentRef?.__id;
+  const sourceData = (0, import_react_redux.useSelector)((state) => {
+    if (fragmentId) {
+      return state.fragments[fragmentId];
+    } else {
+      return state.pages[currentPageKey].data;
+    }
+  });
+  const trackedFragments = (0, import_react_redux.useSelector)(
+    (state) => state.fragments,
+    (oldFragments, newFragments) => {
+      if (oldFragments === newFragments) {
+        return true;
+      }
+      return Array.from(dependencies.current).every((id) => {
+        const prevVal = oldFragments[id];
+        const nextVal = newFragments[id];
+        return prevVal === nextVal;
+      });
+    }
+  );
+  const store = (0, import_react_redux.useStore)();
+  const proxy = (0, import_react.useMemo)(() => {
+    const proxyCache = /* @__PURE__ */ new WeakMap();
+    if (fragmentId && !sourceData) {
+      return void 0;
+    }
+    return createProxy(
+      sourceData,
+      { current: store.getState().fragments },
+      dependencies.current,
+      proxyCache
+    );
+  }, [sourceData, trackedFragments]);
+  return proxy;
+}
+function unproxy2(proxy) {
+  return unproxy(proxy);
+}
+
+// lib/hooks/useSetFragment.tsx
+var import_react_redux2 = require("react-redux");
+var import_immer = require("immer");
+var immer = new import_immer.Immer();
+immer.setAutoFreeze(false);
+function useSetFragment() {
+  const dispatch = (0, import_react_redux2.useDispatch)();
+  const fragments = (0, import_react_redux2.useSelector)((state) => state.fragments);
+  function setter(fragmentRefOrId, updater) {
+    const fragmentId = typeof fragmentRefOrId === "string" ? fragmentRefOrId : fragmentRefOrId.__id;
+    const currentFragment = fragments[fragmentId];
+    if (currentFragment === void 0) {
+      throw new Error(`Fragment with id "${fragmentId}" not found`);
+    }
+    const updatedFragment = immer.produce(currentFragment, updater);
+    dispatch(
+      saveFragment({
+        fragmentId,
+        data: updatedFragment
+      })
+    );
+  }
+  return setter;
+}
+
+// lib/hooks/index.ts
+function useSuperglue() {
+  return (0, import_react_redux3.useSelector)((state) => state.superglue);
+}
+
+// lib/hooks/useStreamSource.tsx
+var import_lodash = __toESM(require("lodash.debounce"));
+var StreamActions = class {
+  constructor({
+    remote: remote2,
+    store
+  }) {
+    this.store = store;
+    this.remote = (0, import_lodash.default)(remote2, 300);
+  }
+  refresh(pageKey) {
+    this.remote(pageKey);
+  }
+  prepend(fragments, data, options = {}) {
+    this.store.dispatch(streamPrepend(fragments, data, options));
+  }
+  save(fragment, data) {
+    this.store.dispatch(streamSave(fragment, data));
+  }
+  append(fragments, data, options = {}) {
+    this.store.dispatch(streamAppend(fragments, data, options));
+  }
+  handle(rawMessage, currentPageKey) {
+    const message = JSON.parse(rawMessage);
+    const { superglue } = this.store.getState();
+    const nextPageKey = superglue.currentPageKey;
+    if (message.action === "handleStreamMessage") {
+      if (message.handler === "refresh" && currentPageKey === nextPageKey && !lastRequestIds.has(message.requestId)) {
+        this.refresh(currentPageKey);
+      }
+      if (message.handler !== "refresh") {
+        this.store.dispatch(handleStreamMessage(rawMessage));
+      }
+    }
+  }
+};
+var CableContext = (0, import_react2.createContext)({
+  cable: null,
+  streamActions: null
+});
+function useStreamSource(channel) {
+  const { cable: cable2, streamActions } = (0, import_react2.useContext)(CableContext);
+  const [connected, setConnected] = (0, import_react2.useState)(false);
+  const { currentPageKey } = useSuperglue();
+  const subscriptionRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (cable2) {
+      const subscription = cable2.subscriptions.create(channel, {
+        received: (message) => {
+          streamActions?.handle(message, currentPageKey);
+        },
+        connected: () => {
+          setConnected(true);
+        },
+        disconnected: () => setConnected(false)
+      });
+      subscriptionRef.current = subscription;
+      return () => subscription.unsubscribe();
+    } else {
+      subscriptionRef.current = null;
+      setConnected(false);
+      return () => {
+      };
+    }
+  }, [cable2, JSON.stringify(channel), currentPageKey]);
+  return {
+    connected,
+    subscription: subscriptionRef.current
+  };
+}
+
+// lib/index.tsx
+var import_actioncable = require("@rails/actioncable");
 var import_history = require("history");
 
 // lib/components/Navigation.tsx
-var import_react = __toESM(require("react"));
-var import_react_redux = require("react-redux");
-var NavigationContext = (0, import_react.createContext)(
+var import_react3 = __toESM(require("react"));
+var import_react_redux4 = require("react-redux");
+var NavigationContext = (0, import_react3.createContext)(
   {}
 );
 var hasWindow = typeof window !== "undefined";
@@ -694,27 +1317,27 @@ var notFound = (identifier) => {
   );
   throw error;
 };
-var NavigationProvider = (0, import_react.forwardRef)(function NavigationProvider2({ history, visit, remote: remote2, mapping }, ref) {
-  const dispatch = (0, import_react_redux.useDispatch)();
-  const pages = (0, import_react_redux.useSelector)((state) => state.pages);
-  const superglue = (0, import_react_redux.useSelector)(
+var NavigationProvider = (0, import_react3.forwardRef)(function NavigationProvider2({ history, visit, remote: remote2, mapping }, ref) {
+  const dispatch = (0, import_react_redux4.useDispatch)();
+  const pages = (0, import_react_redux4.useSelector)((state) => state.pages);
+  const superglue = (0, import_react_redux4.useSelector)(
     (state) => state.superglue
   );
-  const currentPageKey = (0, import_react_redux.useSelector)(
+  const currentPageKey = (0, import_react_redux4.useSelector)(
     (state) => state.superglue.currentPageKey
   );
-  const store = (0, import_react_redux.useStore)();
-  (0, import_react.useEffect)(() => {
+  const store = (0, import_react_redux4.useStore)();
+  (0, import_react3.useEffect)(() => {
     return history.listen(onHistoryChange);
   }, []);
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     const state = history.location.state;
     if (state && "superglue" in state) {
       const { posX, posY } = state;
       setWindowScroll(posX, posY);
     }
   }, [currentPageKey]);
-  (0, import_react.useImperativeHandle)(
+  (0, import_react3.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -739,7 +1362,6 @@ var NavigationProvider = (0, import_react.forwardRef)(function NavigationProvide
             hash: location.hash
           },
           {
-            pageKey: nextPageKey,
             superglue: true,
             posY: window.pageYOffset,
             posX: window.pageXOffset
@@ -748,7 +1370,7 @@ var NavigationProvider = (0, import_react.forwardRef)(function NavigationProvide
       }
     }
     if (state && "superglue" in state) {
-      const { pageKey } = state;
+      const pageKey = urlToPageKey(location.pathname + location.search);
       const prevPageKey = store.getState().superglue.currentPageKey;
       const containsKey = !!pages[pageKey];
       if (containsKey) {
@@ -797,7 +1419,6 @@ var NavigationProvider = (0, import_react.forwardRef)(function NavigationProvide
       const historyArgs = [
         path,
         {
-          pageKey: nextPageKey,
           superglue: true,
           posY: 0,
           posX: 0
@@ -843,12 +1464,12 @@ var NavigationProvider = (0, import_react.forwardRef)(function NavigationProvide
   const { componentIdentifier } = pages[currentPageKey];
   const Component = mapping[componentIdentifier];
   if (Component) {
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react3.default.createElement(
       NavigationContext.Provider,
       {
         value: { pageKey: currentPageKey, search, navigateTo, visit, remote: remote2 }
       },
-      /* @__PURE__ */ import_react.default.createElement(Component, null)
+      /* @__PURE__ */ import_react3.default.createElement(Component, null)
     );
   } else {
     notFound(componentIdentifier);
@@ -856,17 +1477,6 @@ var NavigationProvider = (0, import_react.forwardRef)(function NavigationProvide
 });
 
 // lib/reducers/index.ts
-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 constrainPagesSize(state) {
   const { maxPages } = config;
   const allPageKeys = Object.keys(state);
@@ -879,14 +1489,10 @@ function constrainPagesSize(state) {
 }
 function handleSaveResponse(state, pageKey, page) {
   state = { ...state };
-  let nextPage = {
+  const nextPage = {
     ...page,
     savedAt: Date.now()
   };
-  const existingPage = state[pageKey];
-  if (existingPage) {
-    nextPage = addPlaceholdersToDeferredNodes(existingPage, nextPage);
-  }
   constrainPagesSize(state);
   state[pageKey] = nextPage;
   return state;
@@ -916,7 +1522,7 @@ function appendReceivedFragmentsOntoPage(state, pageKey, receivedFragments) {
   nextState[pageKey] = nextPage;
   return nextState;
 }
-function graftNodeOntoPage(state, pageKey, node, pathToNode) {
+function graftNodeOntoTarget(state, pageKey, node, pathToNode) {
   if (!node) {
     console.warn(
       "There was no node returned in the response. Do you have the correct key path in your props_at?"
@@ -929,6 +1535,17 @@ function graftNodeOntoPage(state, pageKey, node, pathToNode) {
   const fullPathToNode = [pageKey, pathToNode].join(".");
   return setIn(state, fullPathToNode, node);
 }
+function handleFragmentGraftResponse(state, key, response) {
+  const target = state[key];
+  if (!target) {
+    const error = new Error(
+      `Superglue was looking for ${key} in your fragments, but could not find it.`
+    );
+    throw error;
+  }
+  const { data: receivedNode, path: pathToNode } = response;
+  return graftNodeOntoTarget(state, key, receivedNode, pathToNode);
+}
 function handleGraftResponse(state, pageKey, page) {
   const currentPage = state[pageKey];
   if (!currentPage) {
@@ -943,7 +1560,7 @@ function handleGraftResponse(state, pageKey, page) {
     fragments: receivedFragments = []
   } = page;
   return [
-    (nextState) => graftNodeOntoPage(nextState, pageKey, receivedNode, pathToNode),
+    (nextState) => graftNodeOntoTarget(nextState, pageKey, receivedNode, pathToNode),
     (nextState) => appendReceivedFragmentsOntoPage(nextState, pageKey, receivedFragments)
   ].reduce((memo, fn) => fn(memo), state);
 }
@@ -1006,25 +1623,68 @@ function superglueReducer(state = {
   }
   return state;
 }
+function fragmentReducer(state = {}, action) {
+  if (handleFragmentGraft.match(action)) {
+    const { fragmentId, response } = action.payload;
+    return handleFragmentGraftResponse(state, fragmentId, response);
+  }
+  if (saveFragment.match(action)) {
+    const { fragmentId, data } = action.payload;
+    return {
+      ...state,
+      [fragmentId]: data
+    };
+  }
+  if (appendToFragment.match(action)) {
+    const { data, fragmentId } = action.payload;
+    let targetFragment = state[fragmentId];
+    if (Array.isArray(targetFragment)) {
+      targetFragment = [...targetFragment, data];
+      return {
+        ...state,
+        [fragmentId]: targetFragment
+      };
+    } else {
+      return state;
+    }
+  }
+  if (prependToFragment.match(action)) {
+    const { data, fragmentId } = action.payload;
+    let targetFragment = state[fragmentId];
+    if (Array.isArray(targetFragment)) {
+      targetFragment = [data, ...targetFragment];
+      return {
+        ...state,
+        [fragmentId]: targetFragment
+      };
+    } else {
+      return state;
+    }
+  }
+  return state;
+}
 var rootReducer = {
   superglue: superglueReducer,
-  pages: pageReducer
+  pages: pageReducer,
+  fragments: fragmentReducer
 };
 
-// lib/hooks/index.ts
-var import_react_redux2 = require("react-redux");
-function useSuperglue() {
-  return (0, import_react_redux2.useSelector)((state) => state.superglue);
-}
-function useContent() {
-  const superglueState = useSuperglue();
-  const currentPageKey = superglueState.currentPageKey;
-  return (0, import_react_redux2.useSelector)(
-    (state) => state.pages[currentPageKey]
-  ).data;
-}
-
 // lib/index.tsx
+function getConfig(name) {
+  if (typeof document !== "undefined") {
+    const element = document.head.querySelector(
+      `meta[name='action-cable-${name}']`
+    );
+    if (element) {
+      return element.getAttribute("content") || "/cable";
+    } else {
+      return "/cable";
+    }
+  } else {
+    return "/cable";
+  }
+}
+var cable = (0, import_actioncable.createConsumer)(getConfig("url"));
 var hasWindow2 = typeof window !== "undefined";
 var createHistory = () => {
   if (hasWindow2) {
@@ -1041,6 +1701,9 @@ var prepareStore = (store, initialPage, path) => {
       pageKey: initialPageKey
     })
   );
+  store.dispatch(
+    receiveResponse({ pageKey: initialPageKey, response: initialPage })
+  );
   store.dispatch(saveAndProcessPage(initialPageKey, initialPage));
   store.dispatch(setCSRFToken({ csrfToken }));
 };
@@ -1065,12 +1728,14 @@ var setup = ({
     ujsAttributePrefix: "data-sg",
     store
   });
+  const streamActions = new StreamActions({ remote: remote2, store });
   return {
     visit,
     remote: remote2,
     nextHistory,
     initialPageKey,
-    ujs: handlers
+    ujs: handlers,
+    streamActions
   };
 };
 function Application({
@@ -1083,8 +1748,8 @@ function Application({
   mapping,
   ...rest
 }) {
-  const navigatorRef = (0, import_react2.useRef)(null);
-  const { visit, remote: remote2, nextHistory, initialPageKey, ujs } = (0, import_react2.useMemo)(() => {
+  const navigatorRef = (0, import_react4.useRef)(null);
+  const { visit, remote: remote2, nextHistory, initialPageKey, ujs, streamActions } = (0, import_react4.useMemo)(() => {
     return setup({
       initialPage,
       baseUrl,
@@ -1095,7 +1760,7 @@ function Application({
       navigatorRef
     });
   }, []);
-  return /* @__PURE__ */ import_react2.default.createElement("div", { onClick: ujs.onClick, onSubmit: ujs.onSubmit, ...rest }, /* @__PURE__ */ import_react2.default.createElement(import_react_redux3.Provider, { store }, /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement("div", { onClick: ujs.onClick, onSubmit: ujs.onSubmit, ...rest }, /* @__PURE__ */ import_react4.default.createElement(import_react_redux5.Provider, { store }, /* @__PURE__ */ import_react4.default.createElement(CableContext.Provider, { value: { streamActions, cable } }, /* @__PURE__ */ import_react4.default.createElement(
     NavigationProvider,
     {
       ref: navigatorRef,
@@ -1105,7 +1770,7 @@ function Application({
       history: nextHistory,
       initialPageKey
     }
-  )));
+  ))));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1121,15 +1786,18 @@ function Application({
   getIn,
   pageReducer,
   prepareStore,
+  receiveResponse,
   removePage,
   rootReducer,
   saveAndProcessPage,
   saveResponse,
   setup,
   superglueReducer,
-  updateFragments,
+  unproxy,
   urlToPageKey,
   useContent,
+  useSetFragment,
+  useStreamSource,
   useSuperglue
 });
 //# sourceMappingURL=superglue.cjs.map