Merge pull request #11961 from remix-run/pedro/vmod-for-with-props-hocs

refactor: withprops hocs from virtual module

Author: pcattori

.changeset/route-component-export-props.md

@@ -0,0 +1,13 @@
+---
+"@react-router/dev": minor
+"react-router": minor
+---
+
+Params, loader data, and action data as props for route component exports
+
+```tsx
+export default function Component({ params, loaderData, actionData }) {}
+
+export function HydrateFallback({ params }) {}
+export function ErrorBoundary({ params, loaderData, actionData }) {}
+```

packages/react-router-dev/package.json

@@ -53,6 +53,7 @@
     "arg": "^5.0.1",
     "babel-dead-code-elimination": "^1.0.6",
     "chalk": "^4.1.2",
+    "dedent": "^1.5.3",
     "es-module-lexer": "^1.3.1",
     "exit-hook": "2.2.1",
     "fs-extra": "^10.0.0",

packages/react-router-dev/vite/plugin.ts

@@ -45,7 +45,7 @@ import {
   resolveEntryFiles,
   resolvePublicPath,
 } from "./config";
-import { withProps } from "./with-props";
+import * as WithProps from "./with-props";
 
 export async function resolveViteConfig({
   configFile,
@@ -1414,6 +1414,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
         }
       },
     },
+    WithProps.plugin,
     {
       name: "react-router-route-exports",
       async transform(code, id, options) {
@@ -1454,7 +1455,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
 
         let ast = parse(code, { sourceType: "module" });
         removeExports(ast, SERVER_ONLY_ROUTE_EXPORTS);
-        withProps(ast);
+        WithProps.transform(ast);
         return generate(ast, {
           sourceMaps: true,
           filename: id,

packages/react-router-dev/vite/with-props.ts

@@ -1,9 +1,61 @@
+import type { Plugin } from "vite";
+import dedent from "dedent";
+
 import type { Babel, NodePath, ParseResult } from "./babel";
 import { traverse, t } from "./babel";
+import * as VirtualModule from "./vmod";
+
+const vmodId = VirtualModule.id("with-props");
 
 const NAMED_COMPONENT_EXPORTS = ["HydrateFallback", "ErrorBoundary"];
 
-export const withProps = (ast: ParseResult<Babel.File>) => {
+export const plugin: Plugin = {
+  name: "react-router-with-props",
+  enforce: "pre",
+  resolveId(id) {
+    if (id === vmodId) return VirtualModule.resolve(vmodId);
+  },
+  async load(id) {
+    if (id !== VirtualModule.resolve(vmodId)) return;
+    return dedent`
+      import { createElement as h } from "react";
+      import { useActionData, useLoaderData, useParams } from "react-router";
+
+      export function withComponentProps(Component) {
+        return function Wrapped() {
+          const props = {
+            params: useParams(),
+            loaderData: useLoaderData(),
+            actionData: useActionData(),
+          };
+          return h(Component, props);
+        };
+      }
+
+      export function withHydrateFallbackProps(HydrateFallback) {
+        return function Wrapped() {
+          const props = {
+            params: useParams(),
+          };
+          return h(HydrateFallback, props);
+        };
+      }
+
+      export function withErrorBoundaryProps(ErrorBoundary) {
+        return function Wrapped() {
+          const props = {
+            params: useParams(),
+            loaderData: useLoaderData(),
+            actionData: useActionData(),
+          };
+          return h(ErrorBoundary, props);
+        };
+      }
+    `;
+  },
+};
+
+export const transform = (ast: ParseResult<Babel.File>) => {
   const hocs: Array<[string, Babel.Identifier]> = [];
   function getHocUid(path: NodePath, hocName: string) {
     const uid = path.scope.generateUidIdentifier(hocName);
@@ -72,7 +124,7 @@ export const withProps = (ast: ParseResult<Babel.File>) => {
         hocs.map(([name, identifier]) =>
           t.importSpecifier(identifier, t.identifier(name))
         ),
-        t.stringLiteral("react-router")
+        t.stringLiteral(vmodId)
       )
     );
   }

packages/react-router/index.ts

@@ -133,11 +133,6 @@ export {
   useRouteLoaderData,
   useRoutes,
 } from "./lib/hooks";
-export {
-  withComponentProps,
-  withHydrateFallbackProps,
-  withErrorBoundaryProps,
-} from "./lib/hocs";
 
 // Expose old RR DOM API
 export type {