refactor: improve scroll prop architecture and consistency

Author: FlorianV85

src/inertia.ts

@@ -253,7 +253,6 @@ export class Inertia<Pages> {
       finalProps = { ...pageProps }
     }
 
-    let result
     if (requestInfo.partialComponent === component) {
       const only = requestInfo.onlyProps
       const except = requestInfo.exceptProps ?? []
@@ -267,30 +266,20 @@ export class Inertia<Pages> {
       debug('building props for a partial reload %O', requestInfo)
       debug('cherry picking props %s', cherryPickProps)
 
-      result = await buildPartialRequestProps(
+      return buildPartialRequestProps(
         finalProps,
         cherryPickProps,
-        this.ctx.containerResolver
+        this.ctx.containerResolver,
+        requestInfo.scrollMergeIntent
       )
     } else {
       debug('building props for a standard visit %O', requestInfo)
-      result = await buildStandardVisitProps(finalProps, this.ctx.containerResolver)
-    }
-
-    const prependProps: string[] = []
-    const mergeProps: string[] = [...(result.mergeProps || [])]
-    const scrollProps = result.scrollProps ?? {}
-    for (const [key, propInfo] of Object.entries(scrollProps)) {
-      const scrolPropPath = `${key}.${propInfo.wrapper}`
-
-      if (requestInfo.scrollMergeIntent === 'prepend') {
-        prependProps.push(scrolPropPath)
-      } else if (requestInfo.scrollMergeIntent === 'append') {
-        mergeProps.push(scrolPropPath)
-      }
+      return buildStandardVisitProps(
+        finalProps,
+        this.ctx.containerResolver,
+        requestInfo.scrollMergeIntent
+      )
     }
-
-    return { ...result, mergeProps, prependProps }
   }
 
   /**

src/props.ts

@@ -387,13 +387,12 @@ export function isScrollProp<T extends UnPackedPageProps>(
  * Reads from the "metadata" key produced by AdonisJS transformers
  * rather than inspecting the raw paginator instance.
  */
-function resolveScrollMetadata(serialized: any, pageName: string, wrapper: string): ScrollMetadata {
+function resolveScrollMetadata(serialized: any, pageName: string): ScrollMetadata {
   const meta = serialized?.metadata ?? {}
   const currentPage: number | null = meta.currentPage ?? null
   const lastPage: number | null = meta.lastPage ?? null
   return {
     pageName,
-    wrapper,
     currentPage,
     nextPage:
       currentPage !== null && lastPage !== null && currentPage < lastPage ? currentPage + 1 : null,
@@ -441,13 +440,16 @@ async function unpackPropValue(
  */
 export async function buildStandardVisitProps(
   pageProps: PageProps,
-  containerResolver: ContainerResolver<any>
+  containerResolver: ContainerResolver<any>,
+  scrollMergeIntent?: string
 ) {
   const mergeProps: string[] = []
   const deepMergeProps: string[] = []
   const newProps: ComponentProps = {}
   const deferredProps: { [group: string]: string[] } = {}
+  const prependProps: string[] = []
   const scrollProps: { [key: string]: ScrollMetadata } = {}
+  const scrollResolvers = new Map<string, (jsonValue: any) => void>()
   const unpackedValues: Array<{
     key: string
     value: UnPackedPageProps | (() => AsyncOrSync<UnPackedPageProps>)
@@ -485,6 +487,16 @@ export async function buildStandardVisitProps(
        * so that scrollProps metadata can be derived after serialization.
        */
       if (isScrollProp(value)) {
+        const scrollPath = `${key}.${value.wrapper}`
+
+        if (scrollMergeIntent === 'prepend') {
+          prependProps.push(scrollPath)
+        } else if (scrollMergeIntent === 'append') {
+          mergeProps.push(scrollPath)
+        }
+        scrollResolvers.set(key, (jsonValue) => {
+          scrollProps[key] = resolveScrollMetadata(jsonValue, value.pageName)
+        })
         unpackedValues.push({ key, value: value.value })
         continue
       }
@@ -551,27 +563,28 @@ export async function buildStandardVisitProps(
           .then((r) => unpackPropValue(r, containerResolver))
           .then((jsonValue) => {
             newProps[key] = jsonValue
+            if (scrollResolvers.has(key)) {
+              scrollResolvers.get(key)!(jsonValue)
+            }
           })
       } else {
         return unpackPropValue(value, containerResolver).then((jsonValue) => {
           newProps[key] = jsonValue
+          if (scrollResolvers.has(key)) {
+            scrollResolvers.get(key)!(jsonValue)
+          }
         })
       }
     })
   )
 
-  for (const [key, value] of Object.entries(pageProps)) {
-    if (isObject(value) && isScrollProp(value)) {
-      scrollProps[key] = resolveScrollMetadata(newProps[key], value.pageName, value.wrapper)
-    }
-  }
-
   return {
     props: newProps,
     mergeProps,
     deepMergeProps,
     deferredProps,
     scrollProps,
+    prependProps,
   }
 }
 
@@ -602,11 +615,14 @@ export async function buildStandardVisitProps(
 export async function buildPartialRequestProps(
   pageProps: PageProps,
   cherryPickProps: string[],
-  containerResolver: ContainerResolver<any>
+  containerResolver: ContainerResolver<any>,
+  scrollMergeIntent?: string
 ) {
   const mergeProps: string[] = []
   const deepMergeProps: string[] = []
+  const prependProps: string[] = []
   const scrollProps: { [key: string]: ScrollMetadata } = {}
+  const scrollResolvers = new Map<string, (jsonValue: any) => void>()
   const newProps: ComponentProps = {}
   const unpackedValues: Array<{
     key: string
@@ -651,6 +667,16 @@ export async function buildPartialRequestProps(
        * Unpack scroll prop value and track pageName for metadata derivation
        */
       if (isScrollProp(value)) {
+        const scrollPath = `${key}.${value.wrapper}`
+
+        if (scrollMergeIntent === 'prepend') {
+          prependProps.push(scrollPath)
+        } else if (scrollMergeIntent === 'append') {
+          mergeProps.push(scrollPath)
+        }
+        scrollResolvers.set(key, (jsonValue) => {
+          scrollProps[key] = resolveScrollMetadata(jsonValue, value.pageName)
+        })
         unpackedValues.push({ key, value: value.value })
         continue
       }
@@ -708,26 +734,27 @@ export async function buildPartialRequestProps(
           .then((r) => unpackPropValue(r, containerResolver))
           .then((jsonValue) => {
             newProps[key] = jsonValue
+            if (scrollResolvers.has(key)) {
+              scrollResolvers.get(key)!(jsonValue)
+            }
           })
       } else {
         return unpackPropValue(value, containerResolver).then((jsonValue) => {
           newProps[key] = jsonValue
+          if (scrollResolvers.has(key)) {
+            scrollResolvers.get(key)!(jsonValue)
+          }
         })
       }
     })
   )
 
-  for (const [key, value] of Object.entries(pageProps)) {
-    if (isObject(value) && isScrollProp(value)) {
-      scrollProps[key] = resolveScrollMetadata(newProps[key], value.pageName, value.wrapper)
-    }
-  }
-
   return {
     props: newProps,
     mergeProps,
     deepMergeProps,
     deferredProps: {},
     scrollProps,
+    prependProps,
   }
 }

src/types.ts

@@ -145,7 +145,6 @@ export type ScrollProp<T extends UnPackedPageProps> = {
  */
 export type ScrollMetadata = {
   pageName: string
-  wrapper: string
   currentPage: number | null
   nextPage: number | null
   previousPage: number | null

tests/inertia_page.spec.ts

@@ -2169,7 +2169,6 @@ test.group('Inertia.page | scroll helper', () => {
             "nextPage": 2,
             "pageName": "page",
             "previousPage": null,
-            "wrapper": "data",
           },
         },
         "url": "",