[Feature] Modifing the route modules on the client

[AlemTuzlak]

Problem

While working on Remix Development Tools I have run into the issue of navigations between routes removing my modifications on the window.__remixRouteModules. What happens is that I am on some route, lets say /login and I navigate to /home, the newly added route components override the old window.__remixRouteModules and remove my modifications in the entry.client.tsx

Example

Here is the code I use to inject route boundaries for the dev tools:

 window.__remixRouteModules = Object.keys(window.__remixRouteModules).reduce(
    (acc, key) => {
      const value = window.__remixRouteModules[key];
      if (key === "root") {
        return {
          ...acc,
          [key]: {
            ...value,
            default: () => {
              return (
                <>
                  {ReactDOM.createPortal(
                    <RemixDevTools {...props} />,
                    document.body
                  )}
                  <value.default />
                </>
              );
            },
          },
        };
      }

      return {
        ...acc,
        [key]: {
          ...value,
          default: () => {
            return (
              <>
                <InvisibleBoundary path={key} />
                <value.default />
              </>
            );
          },
        },
      };
    },
    {}
  );

Now this works great when the page is loaded initially. The dev tools are mounted and the route boundaries are set. But as soon as I navigate somewhere else this is removed due to this:

remix/packages/remix-react/browser.tsx

Line 139 in 47a98bc

Object.assign(window.__remixRouteModules, newRouteModules);

And the dev tools are still visible due to the fact I added them to the root component and the above just adds new routes but these new routes don't get the boundaries due to the fact that my code ran and it doesn't run again on changes to the object, and there is no reliable way that I have found to listen to changes to this property on the window object.

Solution

Add a prop to the RemixBrowser component that will allow it to augment the route modules on each addition.

I've created this example PR (#7015) to showcase my solution which might not work for all cases but basically the idea is to add a prop to RemixBrowser to allow changes to the new routes before they are assigned to the object on the window

Concerns

I am not sure how this is handled by the router and if it would cause un-necessary re-renders, there might be a more elegant solution for sure but I would like to hear more on this!

[AlemTuzlak]

This would possibly allow for plugins like million.js where you would augment each module before its set on the window by wrapping the default export with block(<value.default />)

[brophdawg11]

FWIW, now that Remix is using route.lazy we can almost do this through a Proxy in entry.client:

window.__remixRouteModules = new Proxy(window.__remixRouteModules, {
  set(target, prop, value) {
    if (value.default) {
      let comp = value.default;
      value.default = function Wrapped() {
        return React.createElement(
          "div",
          { style: { border: "1px solid red" } },
          React.createElement(comp)
        );
      };
    }
    Reflect.set(target, prop, value);
    return true;
  },
});

But that breaks at the moment because default is a readonly property on an imported module. If we adjusted the import() code to spread into a new object then the above proxy works:

https://github.com/remix-run/remix/blob/main/packages/remix-react/routeModules.ts#L196

-    routeModulesCache[route.id] = routeModule;
-    return routeModule;
+    routeModulesCache[route.id] = { ...routeModule };
+    return routeModulesCache[route.id];

You also can't do the spread inside the Proxy because then it doesn't affect routeModulewhich is what get's spread onto the React Router route.