Allow passing initialData callback

Author: RobertBoes

packages/react/src/createInertiaApp.ts

@@ -35,8 +35,9 @@ type BaseInertiaAppOptions = {
 type CreateInertiaAppSetupReturnType = ReactInstance | void
 type InertiaAppOptionsForCSR<SharedProps extends PageProps> = BaseInertiaAppOptions & {
   id?: string
-  page?: Page | string
+  page?: Page
   render?: undefined
+  initialData?: (el: HTMLElement) => Page
   progress?:
     | false
     | {
@@ -51,8 +52,9 @@ type InertiaAppOptionsForCSR<SharedProps extends PageProps> = BaseInertiaAppOpti
 type CreateInertiaAppSSRContent = { head: string[]; body: string }
 type InertiaAppOptionsForSSR<SharedProps extends PageProps> = BaseInertiaAppOptions & {
   id?: undefined
-  page: Page | string
+  page: Page
   render: typeof renderToString
+  initialData?: undefined
   progress?: undefined
   setup(options: SetupOptions<null, SharedProps>): ReactInstance
 }
@@ -68,6 +70,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
   resolve,
   setup,
   title,
+  initialData = (el) => JSON.parse(el.dataset.page),
   progress = {},
   page,
   render,
@@ -76,7 +79,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
 > {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el.dataset.page)
+  const initialPage = page || initialData(el)
   // @ts-expect-error
   const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
 
@@ -88,6 +91,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
       el,
       App,
       props: {
+        // @ts-expect-error
         initialPage,
         initialComponent,
         resolveComponent,

packages/svelte/src/lib/createInertiaApp.ts

@@ -17,6 +17,7 @@ interface CreateInertiaAppProps {
       resolveComponent: ComponentResolver
     }
   }) => void | SvelteApp
+  initialData?: (el: HTMLElement | null) => Page
   progress?:
     | false
     | {
@@ -32,12 +33,13 @@ export default async function createInertiaApp({
   id = 'app',
   resolve,
   setup,
+  initialData = (el) => JSON.parse(el?.dataset.page ?? '{}'),
   progress = {},
   page,
 }: CreateInertiaAppProps): InertiaAppResponse {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el?.dataset.page ?? '{}')
+  const initialPage = page || initialData(el)
   const resolveComponent = (name: string) => Promise.resolve(resolve(name))
 
   await resolveComponent(initialPage.component).then((initialComponent) => {

packages/vue2/src/createInertiaApp.ts

@@ -15,6 +15,7 @@ interface CreateInertiaAppProps {
     plugin: PluginObject<any>
   }) => void | Vue
   title?: (title: string) => string
+  initialData?: (el: HTMLElement) => Page
   progress?:
     | false
     | {
@@ -32,13 +33,14 @@ export default async function createInertiaApp({
   resolve,
   setup,
   title,
+  initialData = (el) => JSON.parse(el.dataset.page),
   progress = {},
   page,
   render,
 }: CreateInertiaAppProps): Promise<{ head: string[]; body: string } | void> {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el.dataset.page)
+  const initialPage = page || initialData(el)
   // @ts-expect-error
   const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
 

packages/vue3/src/createInertiaApp.ts

@@ -7,6 +7,7 @@ interface CreateInertiaAppProps {
   resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
   setup: (props: { el: Element; App: InertiaApp; props: InertiaAppProps; plugin: Plugin }) => void | VueApp
   title?: (title: string) => string
+  initialData?: (el: HTMLElement) => Page
   progress?:
     | false
     | {
@@ -24,13 +25,14 @@ export default async function createInertiaApp({
   resolve,
   setup,
   title,
+  initialData = (el) => JSON.parse(el.dataset.page),
   progress = {},
   page,
   render,
 }: CreateInertiaAppProps): Promise<{ head: string[]; body: string }> {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el.dataset.page)
+  const initialPage = page || initialData(el)
   const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
 
   let head = []