pass props as second argument to resolve() in createInertiaApp

packages/core/src/page.ts

@@ -6,7 +6,7 @@ import {
   Component,
   Page,
   PageEvent,
-  PageHandler,
+  PageHandler, PageProps,
   PageResolver,
   PreserveStateOption,
   RouterInitParams,
@@ -50,7 +50,7 @@ class CurrentPage {
       history.clear()
     }
 
-    return this.resolve(page.component).then((component) => {
+    return this.resolve(page.component, page.props).then((component) => {
       if (componentId !== this.componentId) {
         // Component has changed since we started resolving this component, bail
         return
@@ -102,7 +102,7 @@ class CurrentPage {
       preserveState?: PreserveStateOption
     } = {},
   ) {
-    return this.resolve(page.component).then((component) => {
+    return this.resolve(page.component, page.props).then((component) => {
       this.page = page
       this.cleared = false
       history.setCurrent(page)
@@ -148,8 +148,8 @@ class CurrentPage {
     return this.swapComponent({ component, page, preserveState })
   }
 
-  public resolve(component: string): Promise<Component> {
-    return Promise.resolve(this.resolveComponent(component))
+  public resolve(component: string, props: PageProps): Promise<Component> {
+    return Promise.resolve(this.resolveComponent(component, props))
   }
 
   public isTheSame(page: Page): boolean {

packages/core/src/types.ts

@@ -83,7 +83,7 @@ export interface ClientSideVisitOptions {
   preserveState?: VisitOptions['preserveState']
 }
 
-export type PageResolver = (name: string) => Component
+export type PageResolver = (name: string, props: PageProps) => Component
 
 export type PageHandler = ({
   component,

packages/react/src/createInertiaApp.ts

@@ -78,12 +78,12 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
   const el = isServer ? null : document.getElementById(id)
   const initialPage = page || JSON.parse(el.dataset.page)
   // @ts-expect-error
-  const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
+  const resolveComponent = (name, props) => Promise.resolve(resolve(name, props)).then((module) => module.default || module)
 
   let head = []
 
   const reactApp = await Promise.all([
-    resolveComponent(initialPage.component),
+    resolveComponent(initialPage.component, initialPage.props),
     router.decryptHistory().catch(() => {}),
   ]).then(([initialComponent]) => {
     return setup({

packages/svelte/src/createInertiaApp.ts

@@ -1,4 +1,4 @@
-import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
+import { router, setupProgress, type InertiaAppResponse, type Page, PageProps } from '@inertiajs/core'
 import escape from 'html-escape'
 import type { ComponentType } from 'svelte'
 import App, { type InertiaAppProps } from './components/App.svelte'
@@ -36,10 +36,10 @@ export default async function createInertiaApp({
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
   const initialPage: Page = page || JSON.parse(el?.dataset.page || '{}')
-  const resolveComponent = (name: string) => Promise.resolve(resolve(name))
+  const resolveComponent = (name: string, props: PageProps) => Promise.resolve(resolve(name, props))
 
   const [initialComponent] = await Promise.all([
-    resolveComponent(initialPage.component),
+    resolveComponent(initialPage.component, initialPage.props),
     router.decryptHistory().catch(() => {}),
   ])
 

packages/svelte/src/types.ts

@@ -1,7 +1,8 @@
 import type { ComponentType } from 'svelte'
 import type { RenderFunction, RenderProps } from './components/Render.svelte'
+import { PageProps } from '@inertiajs/core'
 
-export type ComponentResolver = (name: string) => ResolvedComponent | Promise<ResolvedComponent>
+export type ComponentResolver = (name: string, props: PageProps) => ResolvedComponent | Promise<ResolvedComponent>
 
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps
 

packages/vue3/src/app.ts

@@ -18,7 +18,7 @@ import useForm from './useForm'
 export interface InertiaAppProps {
   initialPage: Page
   initialComponent?: object
-  resolveComponent?: (name: string) => DefineComponent | Promise<DefineComponent>
+  resolveComponent?: (name: string, props: PageProps) => DefineComponent | Promise<DefineComponent>
   titleCallback?: (title: string) => string
   onHeadUpdate?: (elements: string[]) => void
 }
@@ -43,7 +43,7 @@ const App: InertiaApp = defineComponent({
       required: false,
     },
     resolveComponent: {
-      type: Function as PropType<(name: string) => DefineComponent | Promise<DefineComponent>>,
+      type: Function as PropType<(name: string, props: PageProps) => DefineComponent | Promise<DefineComponent>>,
       required: false,
     },
     titleCallback: {

packages/vue3/src/createInertiaApp.ts

@@ -1,10 +1,10 @@
-import { Page, router, setupProgress } from '@inertiajs/core'
+import { Page, PageProps, router, setupProgress } from '@inertiajs/core'
 import { DefineComponent, Plugin, App as VueApp, createSSRApp, h } from 'vue'
 import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 
 interface CreateInertiaAppProps {
   id?: string
-  resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
+  resolve: (name: string, props: PageProps) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
   setup: (props: { el: Element; App: InertiaApp; props: InertiaAppProps; plugin: Plugin }) => void | VueApp
   title?: (title: string) => string
   progress?:
@@ -31,12 +31,12 @@ export default async function createInertiaApp({
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
   const initialPage = page || JSON.parse(el.dataset.page)
-  const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
+  const resolveComponent = (name, props) => Promise.resolve(resolve(name, props)).then((module) => module.default || module)
 
   let head = []
 
   const vueApp = await Promise.all([
-    resolveComponent(initialPage.component),
+    resolveComponent(initialPage.component, initialPage.props),
     router.decryptHistory().catch(() => {}),
   ]).then(([initialComponent]) => {
     return setup({