Restore Vue 3 usePage generic type (#1394)

* Restore Vue 3 `usePage` generic type * Constrain Page generic * Fix type issue returning page from generic usePage * Add types to usePage usage in Vue 3 playground * Rename generic type for consistency * Update React adapter for constrained Page generic
inertiajs · Feb 2, 2023 · 60b167c · 60b167c
1 parent 1308029
commit 60b167c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -27,7 +27,7 @@ export interface PageProps {
   [key: string]: unknown
 }
 
-export interface Page<SharedProps = PageProps> {
+export interface Page<SharedProps extends PageProps = PageProps> {
   component: string
   props: PageProps &
     SharedProps & {

diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts
@@ -9,13 +9,13 @@ type ReactComponent = ReactNode
 type HeadManagerOnUpdate = (elements: string[]) => void // TODO: When shipped, replace with: Inertia.HeadManagerOnUpdate
 type HeadManagerTitleCallback = (title: string) => string // TODO: When shipped, replace with: Inertia.HeadManagerTitleCallback
 
-type AppType<SharedProps = PageProps> = FunctionComponent<
+type AppType<SharedProps extends PageProps = PageProps> = FunctionComponent<
   {
     children?: (props: { Component: ComponentType; key: Key; props: Page<SharedProps>['props'] }) => ReactNode
   } & SetupOptions<unknown, SharedProps>['props']
 >
 
-export type SetupOptions<ElementType, SharedProps> = {
+export type SetupOptions<ElementType, SharedProps extends PageProps> = {
   el: ElementType
   App: AppType
   props: {
@@ -33,7 +33,7 @@ type BaseInertiaAppOptions = {
 }
 
 type CreateInertiaAppSetupReturnType = ReactInstance | void
-type InertiaAppOptionsForCSR<SharedProps> = BaseInertiaAppOptions & {
+type InertiaAppOptionsForCSR<SharedProps extends PageProps> = BaseInertiaAppOptions & {
   id?: string
   page?: Page | string
   render?: undefined
@@ -49,21 +49,21 @@ type InertiaAppOptionsForCSR<SharedProps> = BaseInertiaAppOptions & {
 }
 
 type CreateInertiaAppSSRContent = { head: string[]; body: string }
-type InertiaAppOptionsForSSR<SharedProps> = BaseInertiaAppOptions & {
+type InertiaAppOptionsForSSR<SharedProps extends PageProps> = BaseInertiaAppOptions & {
   id?: undefined
   page: Page | string
   render: typeof renderToString
   progress: undefined
   setup(options: SetupOptions<null, SharedProps>): ReactInstance
 }
 
-export default async function createInertiaApp<SharedProps = PageProps>(
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
   options: InertiaAppOptionsForCSR<SharedProps>,
 ): Promise<CreateInertiaAppSetupReturnType>
-export default async function createInertiaApp<SharedProps = PageProps>(
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
   options: InertiaAppOptionsForSSR<SharedProps>,
 ): Promise<CreateInertiaAppSSRContent>
-export default async function createInertiaApp<SharedProps = PageProps>({
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>({
   id = 'app',
   resolve,
   setup,

diff --git a/packages/vue3/src/app.ts b/packages/vue3/src/app.ts
@@ -1,4 +1,4 @@
-import { createHeadManager, Page, router } from '@inertiajs/core'
+import { createHeadManager, Page, PageProps, router } from '@inertiajs/core'
 import { DefineComponent, defineComponent, h, markRaw, Plugin, PropType, ref, shallowRef } from 'vue'
 import remember from './remember'
 import { VuePageHandlerArgs } from './types'
@@ -15,7 +15,7 @@ export interface InertiaAppProps {
 export type InertiaApp = DefineComponent<InertiaAppProps>
 
 const component = ref(null)
-const page = ref<Partial<Page>>({})
+const page = ref<Page<any>>(null)
 const layout = shallowRef(null)
 const key = ref(null)
 let headManager = null
@@ -115,6 +115,6 @@ export const plugin: Plugin = {
   },
 }
 
-export function usePage() {
+export function usePage<SharedProps extends PageProps>(): Page<SharedProps> {
   return page.value
 }
diff --git a/playgrounds/vue3/resources/js/Components/Layout.vue b/playgrounds/vue3/resources/js/Components/Layout.vue
@@ -2,7 +2,7 @@
 import { Link, usePage } from '@inertiajs/vue3'
 import { computed } from 'vue'
 
-const appName = computed(() => usePage().props.appName)
+const appName = computed(() => usePage<{ appName: string }>().props.appName)
 </script>
 
 <template>