[All] Pass the full page object to resolveComponent inertiajs#1864

Author: jamesst20

packages/core/src/router.ts

@@ -462,7 +462,7 @@ export class Router {
       preserveState?: PreserveStateOption
     } = {},
   ): Promise<void> {
-    return Promise.resolve(this.resolveComponent(page.component)).then((component) => {
+    return Promise.resolve(this.resolveComponent(page.component, page)).then((component) => {
       if (visitId === this.visitId) {
         page.scrollRegions = page.scrollRegions || []
         page.rememberedState = page.rememberedState || {}
@@ -494,7 +494,7 @@ export class Router {
     if (event.state !== null) {
       const page = event.state
       const visitId = this.createVisitId()
-      Promise.resolve(this.resolveComponent(page.component)).then((component) => {
+      Promise.resolve(this.resolveComponent(page.component, page)).then((component) => {
         if (visitId === this.visitId) {
           this.page = page
           this.swapComponent({ component, page, preserveState: false }).then(() => {

packages/core/src/types.ts

@@ -43,7 +43,7 @@ export interface Page<SharedProps extends PageProps = PageProps> {
   rememberedState: Record<string, unknown>
 }
 
-export type PageResolver = (name: string) => Component
+export type PageResolver = (name: string, page: Page) => Component
 
 export type PageHandler = ({
   component,

packages/react/src/createInertiaApp.ts

@@ -78,11 +78,11 @@ 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, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module)
 
   let head = []
 
-  const reactApp = await resolveComponent(initialPage.component).then((initialComponent) => {
+  const reactApp = await resolveComponent(initialPage.component, initialPage).then((initialComponent) => {
     return setup({
       // @ts-expect-error
       el,

packages/svelte/src/lib/createInertiaApp.ts

@@ -40,9 +40,9 @@ 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, page: Page) => Promise.resolve(resolve(name, page))
 
-  await resolveComponent(initialPage.component).then((initialComponent) => {
+  await resolveComponent(initialPage.component, initialPage).then((initialComponent) => {
     store.set({
       component: initialComponent,
       page: initialPage,

packages/svelte/src/lib/types.ts

@@ -1,6 +1,7 @@
+import type { Page } from '@inertiajs/core'
 import type { ComponentType } from 'svelte'
 
-export type ComponentResolver = (name: string) => ResolvedComponent | Promise<ResolvedComponent>
+export type ComponentResolver = (name: string, page: Page) => ResolvedComponent | Promise<ResolvedComponent>
 
 export type ResolvedComponent = {
   default?: ComponentType

packages/vue2/src/app.ts

@@ -8,7 +8,7 @@ import useForm from './useForm'
 export interface InertiaProps {
   initialPage: Page
   initialComponent?: object
-  resolveComponent?: (name: string) => Component
+  resolveComponent?: (name: string, page: Page) => Component
   titleCallback?: (title: string) => string
   onHeadUpdate?: (elements: string[]) => void
 }

packages/vue2/src/createInertiaApp.ts

@@ -4,7 +4,7 @@ import App, { InertiaApp, InertiaProps, plugin } from './app'
 
 interface CreateInertiaAppProps {
   id?: string
-  resolve: (name: string) => Component | Promise<Component> | { default: Component }
+  resolve: (name: string, page: Page) => Component | Promise<Component> | { default: Component }
   setup: (props: {
     el: Element
     App: InertiaApp
@@ -40,11 +40,11 @@ export default async function createInertiaApp({
   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, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module)
 
   let head = []
 
-  const vueApp = await resolveComponent(initialPage.component).then((initialComponent) => {
+  const vueApp = await resolveComponent(initialPage.component, initialPage).then((initialComponent) => {
     return setup({
       el,
       App,

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, page: Page) => DefineComponent | Promise<DefineComponent>
   titleCallback?: (title: string) => string
   onHeadUpdate?: (elements: string[]) => void
 }

packages/vue3/src/createInertiaApp.ts

@@ -4,7 +4,7 @@ import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 
 interface CreateInertiaAppProps {
   id?: string
-  resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
+  resolve: (name: string, page: Page) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
   setup: (props: { el: Element; App: InertiaApp; props: InertiaAppProps; plugin: Plugin }) => void | VueApp
   title?: (title: string) => string
   progress?:
@@ -31,11 +31,11 @@ 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, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module)
 
   let head = []
 
-  const vueApp = await resolveComponent(initialPage.component).then((initialComponent) => {
+  const vueApp = await resolveComponent(initialPage.component, initialPage).then((initialComponent) => {
     return setup({
       el,
       App,