198-use-shallowref-instead-of-shallowreactive-for-pagecontext-and-data (#198)

examples/full/components/Link.vue

@@ -19,7 +19,7 @@ import { usePageContext } from 'vike-vue/usePageContext'
 const pageContext = usePageContext()
 const { href } = useAttrs() as { href: string }
 const isActive = computed(() => {
-  const { urlPathname } = pageContext
+  const { urlPathname } = pageContext.value
   return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
 })
 </script>

examples/full/pages/+Head.vue

@@ -23,5 +23,5 @@ function getCanonicalUrl(pageContext: PageContext): null | string {
   return new URL(pageContext.urlPathname, pageContext.config.baseCanonicalUrl).toString()
 }
 
-const canonicalUrl = getCanonicalUrl(pageContext)
+const canonicalUrl = getCanonicalUrl(pageContext.value)
 </script>

examples/full/pages/_error/+Page.vue

@@ -8,7 +8,7 @@
 import { usePageContext } from 'vike-vue/usePageContext'
 
 const pageContext = usePageContext()
-let { is404, abortReason } = pageContext
+let { is404, abortReason } = pageContext.value
 if (!abortReason) {
   abortReason = is404 ? 'Page not found.' : 'Something went wrong.'
 }

examples/full/pages/star-wars/index/+Page.vue

@@ -1,7 +1,7 @@
 <template>
   <h1>Star Wars Movies</h1>
   <ol>
-    <li v-for="item in movies" :key="item.id">
+    <li v-for="item in data.movies" :key="item.id">
       <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{ item.release_date }})
     </li>
   </ol>
@@ -12,5 +12,5 @@
 <script lang="ts" setup>
 import type { Data } from './+data'
 import { useData } from 'vike-vue/useData'
-const { movies } = useData<Data>()
+const data = useData<Data>()
 </script>

examples/vue-pinia/components/Link.vue

@@ -19,7 +19,7 @@ import { usePageContext } from 'vike-vue/usePageContext'
 const pageContext = usePageContext()
 const { href } = useAttrs() as { href: string }
 const isActive = computed(() => {
-  const { urlPathname } = pageContext
+  const { urlPathname } = pageContext.value
   return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
 })
 </script>

examples/vue-query/components/Link.vue

@@ -19,7 +19,7 @@ import { usePageContext } from 'vike-vue/usePageContext'
 const pageContext = usePageContext()
 const { href } = useAttrs() as { href: string }
 const isActive = computed(() => {
-  const { urlPathname } = pageContext
+  const { urlPathname } = pageContext.value
   return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
 })
 </script>

packages/vike-vue/src/hooks/useConfig/useConfig-client.ts

@@ -6,20 +6,20 @@ import type { ConfigFromHook } from '../../types/Config.js'
 import { usePageContext } from '../usePageContext.js'
 import { getPageContext } from 'vike/getPageContext'
 import { applyHeadSettings } from '../../integration/applyHeadSettings.js'
-import { type MaybeRefOrGetter, toValue, watchEffect } from 'vue'
+import { type MaybeRefOrGetter, ShallowRef, toValue, watchEffect } from 'vue'
 
 function useConfig(): (config: MaybeRefOrGetter<ConfigFromHook>) => void {
   // Vike hook
-  let pageContext = getPageContext() as PageContext & PageContextInternal
-  if (pageContext) return (config) => setPageContextConfigFromHook(toValue(config), pageContext)
+  const pageContextInternal = getPageContext() as PageContext & PageContextInternal
+  if (pageContextInternal) return (config) => setPageContextConfigFromHook(toValue(config), pageContextInternal)
 
   // Component
-  pageContext = usePageContext()
+  const pageContext = usePageContext() as ShallowRef<PageContext & PageContextInternal>
   return (config) => {
     watchEffect(() => {
       const configValue = toValue(config)
-      if (!pageContext._headAlreadySetWrapper!.val) {
-        setPageContextConfigFromHook(configValue, pageContext)
+      if (!pageContext.value._headAlreadySetWrapper!.val) {
+        setPageContextConfigFromHook(configValue, pageContext.value)
       } else {
         applyHead(configValue)
       }

packages/vike-vue/src/hooks/useConfig/useConfig-server.ts

@@ -8,7 +8,7 @@ import { getPageContext } from 'vike/getPageContext'
 import { objectKeys } from '../../utils/objectKeys.js'
 import { includes } from '../../utils/includes.js'
 import { configsCumulative } from './configsCumulative.js'
-import { type MaybeRefOrGetter, toValue } from 'vue'
+import { type MaybeRefOrGetter, type ShallowRef, toValue } from 'vue'
 
 /**
  * Set configurations inside components and Vike hooks.
@@ -17,14 +17,14 @@ import { type MaybeRefOrGetter, toValue } from 'vue'
  */
 function useConfig(): (config: MaybeRefOrGetter<ConfigFromHook>) => void {
   // Vike hook
-  let pageContext = getPageContext() as PageContext & PageContextInternal
-  if (pageContext) return (config) => setPageContextConfigFromHook(toValue(config), pageContext)
+  const pageContextInternal = getPageContext() as PageContext & PageContextInternal
+  if (pageContextInternal) return (config) => setPageContextConfigFromHook(toValue(config), pageContextInternal)
 
   // Component
-  pageContext = usePageContext()
+  const pageContext = usePageContext() as ShallowRef<PageContext & PageContextInternal>
   return (config) => {
-    if (!pageContext._headAlreadySetWrapper?.val) {
-      setPageContextConfigFromHook(toValue(config), pageContext)
+    if (!pageContext.value._headAlreadySetWrapper?.val) {
+      setPageContextConfigFromHook(toValue(config), pageContext.value)
     } else {
       throw new Error("Using useConfig() with HTML streaming isn't supported yet")
     }

packages/vike-vue/src/hooks/useData.ts

@@ -3,16 +3,16 @@ export { useData }
 export { setData }
 
 import { inject } from 'vue'
-import type { App, ShallowReactive } from 'vue'
+import type { App, ShallowRef } from 'vue'
 
 const key = 'vike-vue:useData'
 
 /** https://vike.dev/useData */
-function useData<Data>(): ShallowReactive<Data> {
-  const data = inject<ShallowReactive<Data>>(key)!
+function useData<Data>(): ShallowRef<Data> {
+  const data = inject<ShallowRef<Data>>(key)!
   return data
 }
 
-function setData(app: App, data: ShallowReactive<unknown>): void {
+function setData(app: App, data: ShallowRef<unknown>): void {
   app.provide(key, data)
 }

packages/vike-vue/src/hooks/usePageContext.ts

@@ -3,17 +3,17 @@ export { usePageContext }
 export { setPageContext }
 
 import { inject } from 'vue'
-import type { App, ShallowReactive } from 'vue'
+import type { App, ShallowRef } from 'vue'
 import type { PageContext } from 'vike/types'
 
 const key = 'vike-vue:usePageContext'
 
 /** https://vike.dev/usePageContext */
-function usePageContext(): ShallowReactive<PageContext> {
-  const pageContext = inject<ShallowReactive<PageContext>>(key)!
+function usePageContext(): ShallowRef<PageContext> {
+  const pageContext = inject<ShallowRef<PageContext>>(key)!
   return pageContext
 }
 
-function setPageContext(app: App, pageContext: ShallowReactive<PageContext>) {
+function setPageContext(app: App, pageContext: ShallowRef<PageContext>) {
   app.provide(key, pageContext)
 }

packages/vike-vue/src/integration/createVueApp.ts

@@ -1,21 +1,10 @@
 export { createVueApp }
 export type { ChangePage }
 
-import {
-  type App,
-  createApp,
-  createSSRApp,
-  h,
-  nextTick,
-  shallowRef,
-  shallowReactive,
-  type Component,
-  Fragment,
-} from 'vue'
+import { type App, createApp, createSSRApp, h, nextTick, shallowRef, type Component, Fragment } from 'vue'
 import type { PageContext } from 'vike/types'
 import { setPageContext } from '../hooks/usePageContext'
 import { objectAssign } from '../utils/objectAssign'
-import { objectReplace } from '../utils/objectReplace'
 import { callCumulativeHooks } from '../utils/callCumulativeHooks'
 import { isPlainObject } from '../utils/isPlainObject'
 import { setData } from '../hooks/useData'
@@ -65,10 +54,8 @@ async function createVueApp(
 
   const data = pageContext.data ?? {}
   assertDataIsObject(data)
-  // TO-DO/breaking-change: use shallowRef() instead of shallowReactive()
-  // - Remove workaround https://github.com/vikejs/vike-vue/blob/89ca09ed18ffa1c0401851a506f505813a7dece7/packages/vike-vue/src/integration/onRenderClient.ts#L18-L21
-  const dataReactive = shallowReactive(data)
-  const pageContextReactive = shallowReactive(pageContext)
+  const dataReactive = shallowRef(data)
+  const pageContextReactive = shallowRef(pageContext)
   setPageContext(app, pageContextReactive)
   setData(app, dataReactive)
 
@@ -85,8 +72,8 @@ async function createVueApp(
     }
     const data = pageContext.data ?? {}
     assertDataIsObject(data)
-    objectReplace(dataReactive, data)
-    objectReplace(pageContextReactive, pageContext)
+    dataReactive.value = data
+    pageContextReactive.value = pageContext as typeof pageContextReactive.value
     onChangePage?.(pageContext)
     await nextTick()
     returned = true