[Feature]: Add/Edit MemoryRouter History without navigation

[daewigma]

What is the new or updated feature that you are suggesting?

The ability to add to and edit the existing history in MemoryRouter, without navigation.
Being able to add to the front (and adjusting the history.index and history.length accordingly), or add to the back (and just adjusting the history.length).

and the ability to update an entry without push/replace.

Why should this feature be included?

Due to certain requirements, my app ui needs to be in an iframe, but I want forward/back navigation to work, as well as the changed routes to reflect in the address bar. I can have some custom JS in the parent window.

This causes a couple requirements:

1. changes to route in iframe need to be sent to parent window
2. forward/back in parent window need to be passed to iframe
3. when page reloads, memory router loses all history. State in parent history needs to reflect everything the router needs to rebuild history
4. when rebuilding history, needs to change history with methods other than push/replace, as that's not what the parent's history actions are

I've come up with a hacky solution:

Parent window:

// if no history initially, first time loading app. Will be last item in history. Replace state with index
 if (!history.state?.index) {
   history.replaceState({
     index: window.history.length - 1,
   }, '');
 }

 let currentHistoryIndex = history.state.index;

 const historyChangeListener = (event) => {
   const newHistoryIndex = event.state.index;
   const goDistance = newHistoryIndex - currentHistoryIndex;
   currentHistoryIndex = newHistoryIndex;

   if (goDistance) {
     iframe.postMessage({ type: 'historyGo', args: [goDistance, event.state.entry]}, iframeOrigin);
   }
 };

 window.addEventListener('popstate', historyChangeListener );
 
const messageListener = (e) => {
  const eventOrigin = e.origin;

  if (eventOrigin !== iframeOrigin) {
    return;
  }
  const { type, args} = e.data;
  switch(type) {
    case 'historyPushState':
    {
      const index = window.history.length;
      const entry = args[0];
      currentHistoryIndex = index;
      window.history.pushState({ index, entry }, '', entry.pathname);
      return;
    }
    case 'historyReplaceState':
    {
      const index = window.history.state.index;
      const entry = args[0];
      currentHistoryIndex = index;
      window.history.replaceState({ index, entry }, '', entry.pathname);
      return;
    }
    default:
      return;
  }
};

 // listen to parent window
 window.addEventListener('message', messageListener, false);

Child window:

const addToFront = (history, entry) => {
  history.entries.unshift(entry);
  history.index++;
  history.length + 1;
};

const addToBack = (history, entry) => {
  history.entries.push(entry);
  history.length + 1;
};

export const HistoryHelper = () => {
  const history = useHistory();
  useEffect(() => {

    const { go } = history;
    const historyGo = (historyDelta: number, entry: HistoryEntry) => {
      // history incomplete. adding entries to make list the correct length
      if (!history.canGo(historyDelta)) {
        const entryAdder = historyDelta > 0 ? addToBack : addToFront;
        for (let i = 0; i < Math.abs(historyDelta) - 1; i++) {
          entryAdder(history, undefined);
        }
        entryAdder(history, entry);
      // entry was empty. was previously skipped over by going forward/back by multiple entries 
      } else if (!history.entries[history.index + historyDelta]) {
        history.entries[history.index + historyDelta] = entry;
      }
      go(historyDelta);
    };

     const messageListener = (e) => {
       const eventOrigin = e.origin;
       if (eventOrigin !== parentOrigin) {
         return;
       }

       const { type, args} = e.data;
       switch(type) {
         case 'historygo':
            historyGo(convertedArgs[0], convertedArgs[1]);
            return;
         default:
           return;
         }
     };

     // listen to parent window
     window.addEventListener('message', messageListener, false);
    return () => {
      window.removeEventListener('message', messageListener);
    };
  }, [history]);

  useEffect(() => {
    history.listen((entry, action) => {
      if (action === 'REPLACE') {
        window.top.postMessage({ type: 'historyReplaceState', args: [entry]}, parentOrigin);
      } else if (action === 'PUSH') {
        window.top.postMessage({ type: 'historyPushState', args: [entry]}, parentOrigin);
      }
    });
  }, [history]);

  return null;
};

const InnerIframeRouter = ({children}) => {
  const { pathname, search, hash } = window.location;
  const { state } = window.history;

  return <MemoryRouter initialEntries={[{ pathname, search, state, hash }]}>
    {children}
    <HistoryHelper  />
  </MemoryRouter>;
};

I've cleared up all of the logic dealing with my app, so my apologies if I accidentally broke these snippets in the process.
This is currently working, however, since I am manually updating the history in the historyGo method (and sometimes adding undefined entries), my concern is that the logic could change in the future, and this hack might now work.