Add get/set methods for prefetched props

src/services/createPropStore.ts

@@ -9,26 +9,32 @@ export const propStoreKey: InjectionKey<PropStore> = Symbol()
 type ComponentProps = { id: string, name: string, props?: (params: Record<string, unknown>) => unknown }
 
 export type PropStore = {
-  prefetchProps: (route: ResolvedRoute, prefetch: PrefetchConfigs) => void,
+  getPrefetchProps: (route: ResolvedRoute, prefetch: PrefetchConfigs) => Record<string, unknown>,
+  setPrefetchProps: (props: Record<string, unknown>) => void,
   setProps: (route: ResolvedRoute) => void,
   getProps: (id: string, name: string, route: ResolvedRoute) => unknown,
 }
 
 export function createPropStore(): PropStore {
   const store: Map<string, unknown> = reactive(new Map())
 
-  const prefetchProps: PropStore['prefetchProps'] = (route, prefetch) => {
-    route.matches
+  const getPrefetchProps: PropStore['getPrefetchProps'] = (route, prefetch) => {
+    return route.matches
       .filter(match => getPrefetchOption({ ...prefetch, routePrefetch: match.prefetch }, 'props'))
-      .flatMap(getComponentProps)
-      .forEach(({ id, name, props }) => {
-        if (props) {
-          const key = getPropKey(id, name, route)
-          const value = props(route.params)
-
-          store.set(key, value)
-        }
-      })
+      .flatMap(match => getComponentProps(match))
+      .reduce<Record<string, unknown>>((response, { id, name, props }) => {
+        const key = getPropKey(id, name, route)
+
+        response[key] = props?.(route.params)
+
+        return response
+      }, {})
+  }
+
+  const setPrefetchProps: PropStore['setPrefetchProps'] = (props) => {
+    Object.entries(props).forEach(([key, value]) => {
+      store.set(key, value)
+    })
   }
 
   const setProps: PropStore['setProps'] = (route) => {
@@ -89,5 +95,10 @@ export function createPropStore(): PropStore {
     }
   }
 
-  return { prefetchProps, setProps, getProps }
+  return {
+    getPrefetchProps,
+    setPrefetchProps,
+    getProps,
+    setProps,
+  }
 }