feat: allow configuration of how route modules are loaded in the browser

[jacob-ebey]

Adds a new API for bundler plugin usage to take control over the loading of client modules:

// entry.client.tsx
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import type { unstable_LoadRouteModuleFunction } from "react-router";
import { HydratedRouter } from "react-router/dom";

const loadRouteModule: unstable_LoadRouteModuleFunction = async (
  route,
  routeModulesCache
) => {
  if (route.id in routeModulesCache) {
    return routeModulesCache[route.id];
  }

  console.log("Running custom import logic for route module:", route.module);

  // Note: a proper implementation should handle an error here
  // We trigger a hard reload in RR's default implementation
  let routeModule = await import(route.module);

  routeModulesCache[route.id] = routeModule;
  return routeModule;
};

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter unstable_loadRouteModule={loadRouteModule} />
    </StrictMode>
  );
});

[changeset-bot]

🦋 Changeset detected

Latest commit: 84753c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
react-router	Major
@react-router/architect	Major
@react-router/cloudflare	Major
@react-router/dev	Major
react-router-dom	Major
@react-router/express	Major
@react-router/node	Major
@react-router/serve	Major
@react-router/fs-routes	Major
@react-router/remix-routes-option-adapter	Major
create-react-router	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[brophdawg11]

Note - this new API would need to be added to the new import() calls for split route modules

[github-actions]

Alpha release created: 0.0.0-experimental-1d8f3ee

⚠️ Note: This release was created from the HEAD of this branch so it may contain commits that have landed in dev but have not been released yet depending on when this branch was created. You can run the following command to see the commits that may not have been released yet:

git log --pretty=oneline [email protected]

[brophdawg11]

@jacob-ebey Can you confirm this is correct?

[github-actions]

Alpha release created: 0.0.0-experimental-235eba2

⚠️ Note: This release was created from the HEAD of this branch so it may contain commits that have landed in dev but have not been released yet depending on when this branch was created. You can run the following command to see the commits that may not have been released yet:

git log --pretty=oneline [email protected]

[github-actions]

Alpha release created: 0.0.0-experimental-84753c0

⚠️ Note: This release was created from the HEAD of this branch so it may contain commits that have landed in dev but have not been released yet depending on when this branch was created. You can run the following command to see the commits that may not have been released yet:

git log --pretty=oneline [email protected]

[brophdawg11]

@ScriptedAlchemy - [email protected] has this included if you want to give it a shot:

function customLoadRouteModule(route, routeModulesCache) {
  if (route.id in routeModulesCache) {
    return routeModulesCache[route.id] as RouteModule;
  }

  try {
    // Load the module however you want
    let routeModule = loadModulehoweverYouWant(route.module); // 👈
    routeModulesCache[route.id] = routeModule;
    return routeModule;
  } catch (error: unknown) {
    // Handle errors - see default handling in
    // https://github.com/remix-run/react-router/blob/browser_module_loading/packages/react-router/lib/dom/ssr/routeModules.ts#L276 
  }
}

<HydratedRouter unstable_loadRouteModule={customLoadRouteModule} />

Would you want to take full control here including error handling or would you prefer letting RR continue to handle the errors in a default manner?