feat: support name conventions of next remix releases

README.md

@@ -6,6 +6,9 @@
 
 >For more information, please refer to the React Router [documentation](https://reactrouter.com/en/main). Note that it follows the Remix file convention.
 
+>**Important**
+although react-router use names `loader`, `action`, `Component` these parts should exported from file as `clientLoader`, `clientAction`, `default`, see example below. use these name for future react-router releases.
+
 ## Install
 
 ```bash
@@ -117,12 +120,14 @@ export const caseSensitive = false
 
 export const id = 'main-page'
 
-export async function loader() {}
+// every `loader` should exported by name `clientLoader` from v2
+export async function clientLoader() {}
 
-export async function action() {}
+// every `action` should exported by name `clientAction` from v2
+export async function clientAction() {}
 
-// every component should exported without default with name `Component`
-export function Component() {
+// every component should exported as `default` no matter what is the name from v2
+export default function Component() {
   return <h1>Hello Remix Router!</h1>
 }
 

playground/app/root.tsx

@@ -3,7 +3,9 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+
+
+export default function Component() {
   return (
     <>
       <h1>test for first page</h1>

playground/app/routes/($lang).dashboard.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>dashboard</h1>
 }

playground/app/routes/_auth.lazy.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>hidden auth layout</h1>

playground/app/routes/_auth.login.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (

playground/app/routes/_index.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   return 'Vite + React'
 }
 
-export function Component() {
+export default function Component() {
   const [count, setCount] = useState(0)
   const data = useLoaderData() as string
 

playground/app/routes/auth.$.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat Route</h1>
 }

playground/app/routes/auth.$test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic Route</h1>
 }

playground/app/routes/auth.deploy.lazy.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>deploy</h1>

playground/app/routes/auth.deploy.test.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>deploy test</h1>
 }

playground/app/routes/auth.forgot-pass.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>forgot password</h1>
 }

playground/app/routes/auth.lazy.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>auth layout</h1>

playground/app/routes/auth.new.without.parent.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>without parent</h1>
 }

playground/app/routes/auth.recover.test.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>recover/test</h1>
 }

playground/app/routes/auth.recover/route.lazy.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>recover</h1>

playground/app/routes/concerts.$.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat</h1>
 }

playground/app/routes/concerts.$city.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-export async function loader() {
+export async function clientLoader() {
   return 'loader'
 }
 
-export async function action() {
+export async function clientAction() {
   return 'action'
 }
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic</h1>
 }

playground/app/routes/concerts._index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>concerts index</h1>
 }

playground/app/routes/concerts.trending.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>concerts trending</h1>
 }

playground/app/routes/concerts.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>concerts layout</h1>

playground/app/routes/concerts_.mine.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>mine is out of concerts layout</h1>
 }

playground/app/routes/concerts_.your.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>your is out of concerts layout</h1>
 }

playground/app/routes/notes.lazy.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (

src/index.ts

@@ -55,12 +55,21 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = options =>
 
       const routesObject = JSON.stringify(routesMap)
         .replace(/"ImportStart/g, '() => import(')
-        .replace(/ImportEnd"/g, ')')
-        .replace(/"spread":"SpreadStart/g, '...')
-        .replace(/SpreadEnd"/g, '')
+        .replace(/ImportEnd"/g, ').then(moduleFactory)')
+        .replace(/"spread":"SpreadStart/g, '...moduleFactory(')
+        .replace(/SpreadEnd"/g, ')')
       // console.log(JSON.stringify(routesObject, null, 2))
 
-      const routesCode = `${imports}\nexport const routes = ${routesObject}`
+      const routesCode = `
+${imports}
+      
+function moduleFactory(module) {
+  const { default: Component, clientLoader: loader, actionLoader: action, loader: _loader, action: _action, Component: _Component, ...rest } = module;
+  return { Component, loader, action, ...rest };
+}
+
+export const routes = ${routesObject}
+`
       return routesCode
     }
   },

test/sub-routes/($lang).dashboard.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>dashboard</h1>
 }

test/sub-routes/_auth.lazy.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>hidden auth layout</h1>

test/sub-routes/_auth.login.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (

test/sub-routes/_index.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   return 'Vite + React'
 }
 
-export function Component() {
+export default function Component() {
   const [count, setCount] = useState(0)
   const data = useLoaderData() as string
 

test/sub-routes/auth.recover/route.lazy.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>recover</h1>

test/toplevel-routes/($lang).dashboard.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>dashboard</h1>
 }

test/toplevel-routes/_auth.lazy.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>hidden auth layout</h1>

test/toplevel-routes/_auth.login.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (

test/toplevel-routes/_index.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   return 'Vite + React'
 }
 
-export function Component() {
+export default function Component() {
   const [count, setCount] = useState(0)
   const data = useLoaderData() as string
 

test/toplevel-routes/auth.$.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat Route</h1>
 }

test/toplevel-routes/auth.$test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic Route</h1>
 }

test/toplevel-routes/auth.deploy.lazy.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>deploy</h1>

test/toplevel-routes/auth.deploy.test.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>deploy test</h1>
 }

test/toplevel-routes/auth.forgot-pass.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>forgot password</h1>
 }