Support for type-hinting shared Page Props (#2636)

* Type-hint shared props

* Update svelte.spec.ts

Author: pascalbaljet

packages/core/src/types.ts

@@ -9,6 +9,7 @@ declare module 'axios' {
 
 export type DefaultInertiaConfig = {
   errorValueType: string
+  sharedPageProps: PageProps
 }
 /**
  * Designed to allow overriding of some core types using TypeScript
@@ -20,6 +21,10 @@ export type DefaultInertiaConfig = {
  * declare module '@inertiajs/core' {
  *   export interface InertiaConfig {
  *     errorValueType: string[]
+ *     sharedPageProps: {
+ *       auth: { user: User | null }
+ *       flash: { success?: string; error?: string }
+ *     }
  *   }
  * }
  * ```
@@ -29,6 +34,7 @@ export type InertiaConfigFor<Key extends keyof DefaultInertiaConfig> = Key exten
   ? InertiaConfig[Key]
   : DefaultInertiaConfig[Key]
 export type ErrorValue = InertiaConfigFor<'errorValueType'>
+export type SharedPageProps = InertiaConfigFor<'sharedPageProps'>
 
 export type Errors = Record<string, ErrorValue>
 export type ErrorBag = Record<string, Errors>

packages/react/src/usePage.ts

@@ -1,13 +1,13 @@
-import { Page, PageProps } from '@inertiajs/core'
+import { Page, PageProps, SharedPageProps } from '@inertiajs/core'
 import { useContext } from 'react'
 import PageContext from './PageContext'
 
-export default function usePage<TPageProps extends PageProps = PageProps>(): Page<TPageProps> {
+export default function usePage<TPageProps extends PageProps = PageProps>(): Page<TPageProps & SharedPageProps> {
   const page = useContext(PageContext)
 
   if (!page) {
     throw new Error('usePage must be used within the Inertia component')
   }
 
-  return page
+  return page as Page<TPageProps & SharedPageProps>
 }

packages/react/test-app/Pages/TypeScriptProps.tsx

@@ -0,0 +1,35 @@
+// This component is used for checking the TypeScript implementation; there is no Playwright test depending on it.
+import { usePage } from '@inertiajs/react'
+
+declare module '@inertiajs/core' {
+  export interface InertiaConfig {
+    sharedPageProps: {
+      flash: { success?: string; error?: string }
+    }
+  }
+}
+
+type PageProps = {
+  posts: { id: number; title: string }[]
+}
+
+export default function TypeScriptProps() {
+  const page = usePage<PageProps>()
+
+  const error = page.props.flash.error
+  const postTitles = page.props.posts.map((post) => post.title)
+
+  // @ts-expect-error - 'message' does not exist on flash
+  const flashMessage = page.props.flash.message
+  // @ts-expect-error - 'users' does not exist on page props
+  const userNames = page.props.users.map((user) => user.name)
+
+  console.log({
+    error,
+    postTitles,
+    flashMessage,
+    userNames,
+  })
+
+  return null
+}

packages/svelte/src/index.ts

@@ -6,7 +6,7 @@ export { default as Link } from './components/Link.svelte'
 export { default as WhenVisible } from './components/WhenVisible.svelte'
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as inertia } from './link'
-export { default as page } from './page'
+export { default as page, usePage } from './page'
 export { type ResolvedComponent } from './types'
 export { default as useForm, type InertiaForm, type InertiaFormProps } from './useForm'
 export { default as usePoll } from './usePoll'

packages/svelte/src/page.ts

@@ -1,8 +1,8 @@
-import { type Page } from '@inertiajs/core'
-import { writable } from 'svelte/store'
+import { type Page, type PageProps, type SharedPageProps } from '@inertiajs/core'
+import { derived, writable, type Readable } from 'svelte/store'
 
-type SveltePage = Omit<Page, 'props'> & {
-  props: Page['props'] & {
+type SveltePage<TPageProps extends PageProps = PageProps> = Omit<Page<TPageProps & SharedPageProps>, 'props'> & {
+  props: Page<TPageProps & SharedPageProps>['props'] & {
     [key: string]: any
   }
 }
@@ -12,3 +12,7 @@ const { set, subscribe } = writable<SveltePage>()
 export const setPage = set
 
 export default { subscribe }
+
+export function usePage<TPageProps extends PageProps = PageProps>(): Readable<SveltePage<TPageProps>> {
+  return derived({ subscribe }, ($page) => $page as SveltePage<TPageProps>)
+}

packages/svelte/test-app/Pages/Svelte/PropsAndPageStore.svelte

@@ -1,36 +1,42 @@
 <script lang="ts">
-  import { inertia, page, useForm } from '@inertiajs/svelte'
+  import { inertia, page, usePage, useForm } from '@inertiajs/svelte'
   import { onMount } from 'svelte'
 
+  type PageProps = {
+    foo: string
+  }
+
   export let foo
 
   const form = useForm({ foo })
 
+  const pageProps: PageProps = {
+    foo: $page.props.foo,
+  }
+
+  const sveltePage = usePage<PageProps>()
+
   console.log('[script] foo prop is', foo)
   console.log('[script] $page.props.foo is', $page.props.foo)
+  console.log('[script] $sveltePage.props.foo is', $sveltePage.props.foo)
 
   $: console.log('[reactive expression] foo prop is', foo)
   $: console.log('[reactive expression] $page.props.foo is', $page.props.foo)
+  $: console.log('[reactive expression] $sveltePage.props.foo is', $sveltePage.props.foo)
 
   onMount(() => {
     console.log('[onMount] foo prop is', foo)
     console.log('[onMount] $page.props.foo is', $page.props.foo)
+    console.log('[onMount] $sveltePage.props.foo is', $sveltePage.props.foo)
   })
-
-  type PageProps = {
-    foo: string
-  }
-
-  const pageProps: PageProps = {
-    foo: $page.props.foo,
-  }
 </script>
 
 <div>
   <input id="input" type="text" bind:value={$form.foo} />
   <p>foo prop is {foo}</p>
   <p>$page.props.foo is {$page.props.foo}</p>
   <p>pageProps.foo is {pageProps.foo}</p>
+  <p>$sveltePage.props.foo is {$sveltePage.props.foo}</p>
 
   <a href="/svelte/props-and-page-store" use:inertia={{ data: { foo: 'bar' } }}> Bar </a>
   <a href="/svelte/props-and-page-store" use:inertia={{ data: { foo: 'baz' } }}> Baz </a>

packages/svelte/test-app/Pages/TypeScriptProps.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+  declare module '@inertiajs/core' {
+    export interface InertiaConfig {
+      sharedPageProps: {
+        flash: { success?: string; error?: string }
+      }
+    }
+  }
+</script>
+
+<script lang="ts">
+  // This component is used for checking the TypeScript implementation; there is no Playwright test depending on it.
+  import { usePage } from '@inertiajs/svelte'
+
+  type PageProps = {
+    posts: { id: number; title: string }[]
+  }
+
+  const page = usePage<PageProps>()
+
+  $: error = $page.props.flash.error
+  $: postTitles = $page.props.posts.map((post) => post.title)
+
+  // @ts-expect-error - 'message' does not exist on flash
+  $: flashMessage = $page.props.flash.message
+  // @ts-expect-error - 'users' does not exist on page props
+  $: userNames = $page.props.users.map((user) => user.name)
+
+  console.log({
+    error,
+    postTitles,
+    flashMessage,
+    userNames,
+  })
+</script>

packages/vue3/src/app.ts

@@ -5,6 +5,7 @@ import {
   Page,
   PageProps,
   router,
+  SharedPageProps,
 } from '@inertiajs/core'
 import {
   computed,
@@ -133,7 +134,7 @@ export const plugin: Plugin = {
   },
 }
 
-export function usePage<SharedProps extends PageProps>(): Page<SharedProps> {
+export function usePage<TPageProps extends PageProps = PageProps>(): Page<TPageProps & SharedPageProps> {
   return reactive({
     props: computed(() => page.value?.props),
     url: computed(() => page.value?.url),
@@ -147,5 +148,5 @@ export function usePage<SharedProps extends PageProps>(): Page<SharedProps> {
     matchPropsOn: computed(() => page.value?.matchPropsOn),
     rememberedState: computed(() => page.value?.rememberedState),
     encryptHistory: computed(() => page.value?.encryptHistory),
-  })
+  }) as Page<TPageProps>
 }

packages/vue3/src/types.ts

@@ -1,4 +1,4 @@
-import { createHeadManager, Page, PageHandler, router } from '@inertiajs/core'
+import { createHeadManager, Page, PageHandler, PageProps, router, SharedPageProps } from '@inertiajs/core'
 import { ComponentPublicInstance } from 'vue'
 import useForm from './useForm'
 
@@ -15,7 +15,7 @@ declare module '@inertiajs/core' {
 declare module 'vue' {
   export interface ComponentCustomProperties {
     $inertia: typeof router
-    $page: Page
+    $page: Page<PageProps & SharedPageProps>
     $headManager: ReturnType<typeof createHeadManager>
   }
 

packages/vue3/test-app/Pages/TypeScriptProps.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// This component is used for checking the TypeScript implementation; there is no Playwright test depending on it.
+import { usePage } from '@inertiajs/vue3'
+
+declare module '@inertiajs/core' {
+  export interface InertiaConfig {
+    sharedPageProps: {
+      flash: { success?: string; error?: string }
+    }
+  }
+}
+
+type PageProps = {
+  posts: { id: number; title: string }[]
+}
+
+const page = usePage<PageProps>()
+
+const error = page.props.flash.error
+const postTitles = page.props.posts.map((post) => post.title)
+
+// @ts-expect-error - 'message' does not exist on flash
+const flashMessage = page.props.flash.message
+// @ts-expect-error - 'users' does not exist on page props
+const userNames = page.props.users.map((user) => user.name)
+
+console.log({
+  error,
+  postTitles,
+  flashMessage,
+  userNames,
+})
+</script>
+
+<template>
+  {{ $page.props.flash.error }}
+
+  <!-- @vue-expect-error - 'message' does not exist on flash -->
+  {{ $page.props.flash.message }}
+</template>