From 3a655da0ec789ad59f97c461c323c15969a0ee4b Mon Sep 17 00:00:00 2001 From: HichemTab-tech Date: Thu, 7 Aug 2025 13:57:13 +0100 Subject: [PATCH 1/6] pass props as second argument to resolve() in createInertiaApp --- packages/core/src/page.ts | 9 +++++---- packages/core/src/types.ts | 2 +- packages/react/src/createInertiaApp.ts | 4 ++-- packages/svelte/src/createInertiaApp.ts | 6 +++--- packages/svelte/src/types.ts | 3 ++- packages/vue3/src/app.ts | 4 ++-- packages/vue3/src/createInertiaApp.ts | 8 ++++---- 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/core/src/page.ts b/packages/core/src/page.ts index f53f23dd4..fafa3cc71 100644 --- a/packages/core/src/page.ts +++ b/packages/core/src/page.ts @@ -7,6 +7,7 @@ import { Page, PageEvent, PageHandler, + PageProps, PageResolver, PreserveStateOption, RouterInitParams, @@ -50,7 +51,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 +103,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 +149,8 @@ class CurrentPage { return this.swapComponent({ component, page, preserveState }) } - public resolve(component: string): Promise { - return Promise.resolve(this.resolveComponent(component)) + public resolve(component: string, props: PageProps): Promise { + return Promise.resolve(this.resolveComponent(component, props)) } public isTheSame(page: Page): boolean { diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index b9a1bd5d0..089a0d7da 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -88,7 +88,7 @@ export interface ClientSideVisitOptions { onSuccess?: (page: Page) => void } -export type PageResolver = (name: string) => Component +export type PageResolver = (name: string, props: PageProps) => Component export type PageHandler = ({ component, diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts index fc75a1496..ff34771fa 100644 --- a/packages/react/src/createInertiaApp.ts +++ b/packages/react/src/createInertiaApp.ts @@ -78,12 +78,12 @@ export default async function createInertiaApp 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({ diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts index 87b646b55..2ad191a2b 100644 --- a/packages/svelte/src/createInertiaApp.ts +++ b/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(() => {}), ]) diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts index 6367e9c7e..73015a611 100644 --- a/packages/svelte/src/types.ts +++ b/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 +export type ComponentResolver = (name: string, props: PageProps) => ResolvedComponent | Promise export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps diff --git a/packages/vue3/src/app.ts b/packages/vue3/src/app.ts index 51340187a..ba48146c1 100755 --- a/packages/vue3/src/app.ts +++ b/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 + resolveComponent?: (name: string, props: PageProps) => DefineComponent | Promise 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>, + type: Function as PropType<(name: string, props: PageProps) => DefineComponent | Promise>, required: false, }, titleCallback: { diff --git a/packages/vue3/src/createInertiaApp.ts b/packages/vue3/src/createInertiaApp.ts index b58857611..9ca09374d 100644 --- a/packages/vue3/src/createInertiaApp.ts +++ b/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 | { default: DefineComponent } + resolve: (name: string, props: PageProps) => DefineComponent | Promise | { 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({ From c5d1f1db3ed7f8b0cf083aba97e042382b359018 Mon Sep 17 00:00:00 2001 From: HichemTab-tech Date: Thu, 7 Aug 2025 14:06:20 +0100 Subject: [PATCH 2/6] pass props to resolveComponent method in router --- packages/core/src/router.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts index ff466863f..3fd01efb6 100644 --- a/packages/core/src/router.ts +++ b/packages/core/src/router.ts @@ -1,4 +1,4 @@ -import { hideProgress, revealProgress } from '.' +import { hideProgress, PageProps, revealProgress } from '.' import { eventHandler } from './eventHandler' import { fireBeforeEvent } from './events' import { history } from './history' @@ -280,8 +280,8 @@ export class Router { return history.decrypt() } - public resolveComponent(component: string): Promise { - return currentPage.resolve(component) + public resolveComponent(component: string, props: PageProps = {}): Promise { + return currentPage.resolve(component, props) } public replace(params: ClientSideVisitOptions): void { From 1c658832dd2b87c1e52ab8eac2b50c005ad5c88e Mon Sep 17 00:00:00 2001 From: HichemTab-tech Date: Fri, 22 Aug 2025 23:03:43 +0100 Subject: [PATCH 3/6] pass page instead of props to resolveComponent method in router --- packages/core/src/page.ts | 9 ++++----- packages/core/src/router.ts | 6 +++--- packages/core/src/types.ts | 2 +- packages/react/src/createInertiaApp.ts | 4 ++-- packages/svelte/src/createInertiaApp.ts | 6 +++--- packages/svelte/src/types.ts | 4 ++-- packages/vue3/src/app.ts | 4 ++-- packages/vue3/src/createInertiaApp.ts | 8 ++++---- 8 files changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/core/src/page.ts b/packages/core/src/page.ts index fafa3cc71..5d37cb083 100644 --- a/packages/core/src/page.ts +++ b/packages/core/src/page.ts @@ -7,7 +7,6 @@ import { Page, PageEvent, PageHandler, - PageProps, PageResolver, PreserveStateOption, RouterInitParams, @@ -51,7 +50,7 @@ class CurrentPage { history.clear() } - return this.resolve(page.component, page.props).then((component) => { + return this.resolve(page.component, page).then((component) => { if (componentId !== this.componentId) { // Component has changed since we started resolving this component, bail return @@ -103,7 +102,7 @@ class CurrentPage { preserveState?: PreserveStateOption } = {}, ) { - return this.resolve(page.component, page.props).then((component) => { + return this.resolve(page.component, page).then((component) => { this.page = page this.cleared = false history.setCurrent(page) @@ -149,8 +148,8 @@ class CurrentPage { return this.swapComponent({ component, page, preserveState }) } - public resolve(component: string, props: PageProps): Promise { - return Promise.resolve(this.resolveComponent(component, props)) + public resolve(component: string, page: Page): Promise { + return Promise.resolve(this.resolveComponent(component, page)) } public isTheSame(page: Page): boolean { diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts index 3fd01efb6..560fb6cf4 100644 --- a/packages/core/src/router.ts +++ b/packages/core/src/router.ts @@ -1,4 +1,4 @@ -import { hideProgress, PageProps, revealProgress } from '.' +import { hideProgress, revealProgress } from '.' import { eventHandler } from './eventHandler' import { fireBeforeEvent } from './events' import { history } from './history' @@ -280,8 +280,8 @@ export class Router { return history.decrypt() } - public resolveComponent(component: string, props: PageProps = {}): Promise { - return currentPage.resolve(component, props) + public resolveComponent(component: string): Promise { + return currentPage.resolve(component, currentPage.get()) } public replace(params: ClientSideVisitOptions): void { diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 089a0d7da..a144a50f7 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -88,7 +88,7 @@ export interface ClientSideVisitOptions { onSuccess?: (page: Page) => void } -export type PageResolver = (name: string, props: PageProps) => Component +export type PageResolver = (name: string, page: Page) => Component export type PageHandler = ({ component, diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts index ff34771fa..d96a6da82 100644 --- a/packages/react/src/createInertiaApp.ts +++ b/packages/react/src/createInertiaApp.ts @@ -78,12 +78,12 @@ export default async function createInertiaApp Promise.resolve(resolve(name, props)).then((module) => module.default || module) + const resolveComponent = (name, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module) let head = [] const reactApp = await Promise.all([ - resolveComponent(initialPage.component, initialPage.props), + resolveComponent(initialPage.component, initialPage), router.decryptHistory().catch(() => {}), ]).then(([initialComponent]) => { return setup({ diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts index 2ad191a2b..ea570bc7b 100644 --- a/packages/svelte/src/createInertiaApp.ts +++ b/packages/svelte/src/createInertiaApp.ts @@ -1,4 +1,4 @@ -import { router, setupProgress, type InertiaAppResponse, type Page, PageProps } from '@inertiajs/core' +import { router, setupProgress, type InertiaAppResponse, type Page } 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, props: PageProps) => Promise.resolve(resolve(name, props)) + const resolveComponent = (name: string, page: Page) => Promise.resolve(resolve(name, page)) const [initialComponent] = await Promise.all([ - resolveComponent(initialPage.component, initialPage.props), + resolveComponent(initialPage.component, initialPage), router.decryptHistory().catch(() => {}), ]) diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts index 73015a611..09e7adb33 100644 --- a/packages/svelte/src/types.ts +++ b/packages/svelte/src/types.ts @@ -1,8 +1,8 @@ import type { ComponentType } from 'svelte' import type { RenderFunction, RenderProps } from './components/Render.svelte' -import { PageProps } from '@inertiajs/core' +import { type Page } from '@inertiajs/core' -export type ComponentResolver = (name: string, props: PageProps) => ResolvedComponent | Promise +export type ComponentResolver = (name: string, page: Page) => ResolvedComponent | Promise export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps diff --git a/packages/vue3/src/app.ts b/packages/vue3/src/app.ts index ba48146c1..fd034e7c3 100755 --- a/packages/vue3/src/app.ts +++ b/packages/vue3/src/app.ts @@ -18,7 +18,7 @@ import useForm from './useForm' export interface InertiaAppProps { initialPage: Page initialComponent?: object - resolveComponent?: (name: string, props: PageProps) => DefineComponent | Promise + resolveComponent?: (name: string, page: Page) => DefineComponent | Promise 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, props: PageProps) => DefineComponent | Promise>, + type: Function as PropType<(name: string, page: Page) => DefineComponent | Promise>, required: false, }, titleCallback: { diff --git a/packages/vue3/src/createInertiaApp.ts b/packages/vue3/src/createInertiaApp.ts index 9ca09374d..4b375358f 100644 --- a/packages/vue3/src/createInertiaApp.ts +++ b/packages/vue3/src/createInertiaApp.ts @@ -1,10 +1,10 @@ -import { Page, PageProps, router, setupProgress } from '@inertiajs/core' +import { Page, 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, props: PageProps) => DefineComponent | Promise | { default: DefineComponent } + resolve: (name: string, page: Page) => DefineComponent | Promise | { 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, props) => Promise.resolve(resolve(name, props)).then((module) => module.default || module) + const resolveComponent = (name, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module) let head = [] const vueApp = await Promise.all([ - resolveComponent(initialPage.component, initialPage.props), + resolveComponent(initialPage.component, initialPage), router.decryptHistory().catch(() => {}), ]).then(([initialComponent]) => { return setup({ From 0297d87df5f5804d928b8c2cf69a7b38a34abae9 Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Tue, 26 Aug 2025 08:45:19 +0200 Subject: [PATCH 4/6] Fix code style --- packages/react/src/createInertiaApp.ts | 3 ++- packages/svelte/src/types.ts | 2 +- packages/vue3/src/createInertiaApp.ts | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts index d96a6da82..427476039 100644 --- a/packages/react/src/createInertiaApp.ts +++ b/packages/react/src/createInertiaApp.ts @@ -78,7 +78,8 @@ export default async function createInertiaApp Promise.resolve(resolve(name, page)).then((module) => module.default || module) + const resolveComponent = (name, page) => + Promise.resolve(resolve(name, page)).then((module) => module.default || module) let head = [] diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts index 09e7adb33..9cc1c1196 100644 --- a/packages/svelte/src/types.ts +++ b/packages/svelte/src/types.ts @@ -1,6 +1,6 @@ +import { type Page } from '@inertiajs/core' import type { ComponentType } from 'svelte' import type { RenderFunction, RenderProps } from './components/Render.svelte' -import { type Page } from '@inertiajs/core' export type ComponentResolver = (name: string, page: Page) => ResolvedComponent | Promise diff --git a/packages/vue3/src/createInertiaApp.ts b/packages/vue3/src/createInertiaApp.ts index 4b375358f..b3b6c0d69 100644 --- a/packages/vue3/src/createInertiaApp.ts +++ b/packages/vue3/src/createInertiaApp.ts @@ -31,7 +31,8 @@ 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, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module) + const resolveComponent = (name, page) => + Promise.resolve(resolve(name, page)).then((module) => module.default || module) let head = [] From 388f50c80a20b11bafd154383b122fb79eb941e7 Mon Sep 17 00:00:00 2001 From: HichemTab-tech Date: Tue, 26 Aug 2025 15:44:16 +0100 Subject: [PATCH 5/6] replace ts-expect-error with ts-ignore --- packages/react/src/createInertiaApp.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts index d96a6da82..25de9a6a2 100644 --- a/packages/react/src/createInertiaApp.ts +++ b/packages/react/src/createInertiaApp.ts @@ -77,7 +77,7 @@ export default async function createInertiaApp Promise.resolve(resolve(name, page)).then((module) => module.default || module) let head = [] From 56f9cb688eccb073a7d3fe00ad6e557bd295d4c8 Mon Sep 17 00:00:00 2001 From: HichemTab-tech Date: Tue, 26 Aug 2025 15:48:44 +0100 Subject: [PATCH 6/6] fix ts on unknown component --- packages/react/src/createInertiaApp.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts index 2eb42998d..f0aefc386 100644 --- a/packages/react/src/createInertiaApp.ts +++ b/packages/react/src/createInertiaApp.ts @@ -77,9 +77,9 @@ export default async function createInertiaApp - Promise.resolve(resolve(name, page)).then((module) => module.default || module) + Promise.resolve(resolve(name, page)).then((module: any) => module.default || module) let head = []