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

Author: jamesst20

packages/core/src/page.ts

@@ -50,7 +50,7 @@ class CurrentPage {
       history.clear()
     }
 
-    return this.resolve(page.component).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
@@ -102,7 +102,7 @@ class CurrentPage {
       preserveState?: PreserveStateOption
     } = {},
   ) {
-    return this.resolve(page.component).then((component) => {
+    return this.resolve(page.component, page).then((component) => {
       this.page = page
       this.cleared = false
       return this.swap({ component, page, preserveState })
@@ -149,8 +149,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, page: Page): Promise<Component> {
+    return Promise.resolve(this.resolveComponent(component, page))
   }
 
   public isTheSame(page: Page): boolean {

packages/core/src/types.ts

@@ -59,7 +59,7 @@ export interface ClientSideVisitOptions {
   preserveState?: VisitOptions['preserveState']
 }
 
-export type PageResolver = (name: string) => Component
+export type PageResolver = (name: string, page: Page) => 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, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module)
 
   let head = []
 
   const reactApp = await Promise.all([
-    resolveComponent(initialPage.component),
+    resolveComponent(initialPage.component, initialPage),
     router.decryptHistory().catch(() => {}),
   ]).then(([initialComponent]) => {
     return setup({

packages/svelte/src/createInertiaApp.ts

@@ -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, page: Page) => Promise.resolve(resolve(name, page))
 
   const [initialComponent] = await Promise.all([
-    resolveComponent(initialPage.component),
+    resolveComponent(initialPage.component, initialPage),
     router.decryptHistory().catch(() => {}),
   ])
 

packages/svelte/src/types.ts

@@ -1,7 +1,8 @@
 import type { ComponentType } from 'svelte'
+import type { Page } from '@jamesst20/inertia-core'
 import type { RenderFunction, RenderProps } from './components/Render.svelte'
 
-export type ComponentResolver = (name: string) => ResolvedComponent | Promise<ResolvedComponent>
+export type ComponentResolver = (name: string, page: Page) => 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, 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,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, page) => Promise.resolve(resolve(name, page)).then((module) => module.default || module)
 
   let head = []
 
   const vueApp = await Promise.all([
-    resolveComponent(initialPage.component),
+    resolveComponent(initialPage.component, initialPage),
     router.decryptHistory().catch(() => {}),
   ]).then(([initialComponent]) => {
     return setup({