minor refactor vike-vue-query (#196)

Author: brillout

examples/vue-pinia/layouts/LayoutDefault.vue

@@ -45,10 +45,6 @@ a {
   line-height: 1.8em;
   border-right: 2px solid #eee;
 }
-.logo {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
 .content {
   transition: opacity 0.1s ease-in;
 }

examples/vue-query/.test.ts

@@ -1,33 +1,44 @@
-import { test, expect, run, fetchHtml, page, getServerUrl } from '@brillout/test-e2e'
+import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry } from '@brillout/test-e2e'
 
 runTest()
 
+const fetchedText = 'A New Hope'
+const url = '/'
+
 function runTest() {
   run('pnpm run dev')
 
-  const textLandingPage = 'A New Hope'
-  const title = 'Star Wars Movies'
-  testUrl({
-    url: '/',
-    title,
-    text: textLandingPage,
-  })
-}
-
-function testUrl({ url, title, text }: { url: string; title: string; text: string }) {
-  test(url + ' (HTML)', async () => {
+  test('HTML', async () => {
     const html = await fetchHtml(url)
-    expect(html).toContain(text)
-    expect(getTitle(html)).toBe(title)
+    expect(html).toContain(fetchedText)
   })
-  test(url + ' (Hydration)', async () => {
+
+  test('Hydration', async () => {
     await page.goto(getServerUrl() + url)
-    const body = await page.textContent('body')
-    expect(body).toContain(text)
+    await testDOM()
   })
+
+  test('Navigation', async () => {
+    await page.click('a[href="/about"]')
+    await page.click('a[href="/"]')
+    await testDOM()
+  })
+}
+
+async function testDOM() {
+  await testCounter()
+  const body = await page.textContent('body')
+  expect(body).toContain(fetchedText)
 }
 
-function getTitle(html: string) {
-  const title = html.match(/<title>(.*?)<\/title>/i)?.[1]
-  return title
+async function testCounter() {
+  // autoRetry() for awaiting client-side code loading & executing
+  await autoRetry(
+    async () => {
+      expect(await page.textContent('button')).toBe('Counter 0')
+      await page.click('button')
+      expect(await page.textContent('button')).toContain('Counter 1')
+    },
+    { timeout: 5 * 1000 },
+  )
 }

examples/vue-query/assets/logo.svg

@@ -1,10 +1,8 @@
 <template>
   <div class="layout">
     <div class="navigation">
-      <a href="/" class="logo">
-        <img src="../assets/logo.svg" height="64" width="64" />
-      </a>
       <Link href="/">Welcome</Link>
+      <Link href="/about">About</Link>
     </div>
     <div class="content"><slot /></div>
   </div>
@@ -47,10 +45,6 @@ a {
   line-height: 1.8em;
   border-right: 2px solid #eee;
 }
-.logo {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
 .content {
   transition: opacity 0.1s ease-in;
 }

examples/vue-query/layouts/HeadDefault.vue

@@ -9,15 +9,13 @@
     "@types/node-fetch": "^2.6.11",
     "@tanstack/vue-query": "^5.0.0",
     "node-fetch": "^3.3.2",
+    "typescript": "5.4.5",
     "vike": "^0.4.195",
     "vike-vue-query": "^0.1.2",
     "vike-vue": "^0.8.4",
     "vite": "^5.4.0",
-    "vue": "^3.4.36"
-  },
-  "type": "module",
-  "devDependencies": {
-    "typescript": "5.4.5",
+    "vue": "^3.4.36",
     "vue-tsc": "^1.8.27"
-  }
+  },
+  "type": "module"
 }

examples/vue-query/layouts/LayoutDefault.vue

@@ -1,15 +1,9 @@
 import type { Config } from 'vike/types'
 import Layout from '../layouts/LayoutDefault.vue'
-import Head from '../layouts/HeadDefault.vue'
 import vikeVue from 'vike-vue/config'
 import vikeVueQuery from 'vike-vue-query/config'
 
-// Default configs (can be overridden by pages)
 export default {
   Layout,
-  Head,
-  // <title>
-  title: 'My Vike + Vue + TanStack Query App',
-
   extends: [vikeVue, vikeVueQuery],
 } satisfies Config

examples/vue-query/package.json

@@ -1,3 +1,5 @@
+export { queryClientConfig }
+
 import type { QueryClientConfig } from '@tanstack/vue-query'
 
 // set query client options - e.g. not refetching when window loses or gains focus during development
@@ -8,5 +10,3 @@ const queryClientConfig: QueryClientConfig = {
     },
   },
 }
-
-export default queryClientConfig

examples/vue-query/pages/+config.ts

@@ -0,0 +1,4 @@
+<template>
+  <h1>About</h1>
+  <p>Example of using TanStack Query.</p>
+</template>

examples/vue-query/pages/+queryClientConfig.ts

@@ -14,12 +14,6 @@
     </template>
   </ol>
   <p>Source: <a href="https://brillout.github.io/star-wars">brillout.github.io/star-wars</a>.</p>
-  <p>
-    While initial data is fetched on the server, the client will refresh after rendering.<br>
-    <code>
-      Refreshing: {{ isFetching ? 'Yes' : 'No' }}
-    </code>
-  </p>
   <p>
   This page is:
   </p>

examples/vue-query/pages/_error/+Page.vue

@@ -2,13 +2,6 @@ import vue from '@vitejs/plugin-vue'
 import vike from 'vike/plugin'
 import { defineConfig } from 'vite'
 
-const config = defineConfig({
-  plugins: [
-    vike({ prerender: true }),
-    vue({
-      include: [/\.vue$/, /\.md$/],
-    }),
-  ],
+export default defineConfig({
+  plugins: [vike(), vue()],
 })
-
-export default config

examples/vue-query/pages/about/+Page.vue

@@ -51,7 +51,7 @@
     "vue-tsc": "^2.0.13"
   },
   "files": [
-    "dist"
+    "dist/"
   ],
   "license": "MIT"
 }

examples/vue-query/pages/index/+Page.vue

@@ -1,15 +1,18 @@
+export { config as default }
+
 import type { DehydratedState, QueryClient, QueryClientConfig } from '@tanstack/vue-query'
 import type { Config } from 'vike/types'
 import type _ from 'vike-vue/config' // Needed for declaration merging of Config
 
-export default {
+const config = {
   name: 'vike-vue-query',
   require: {
     'vike-vue': '>=0.7.0',
   },
-  onCreateApp: 'import:vike-vue-query/__internal/integration/installVueQuery:installVueQuery',
-  onAfterRenderHtml: 'import:vike-vue-query/__internal/integration/dehydrateVueQuery:dehydrateVueQuery',
-  onBeforeRenderClient: 'import:vike-vue-query/__internal/integration/hydrateVueQuery:hydrateVueQuery',
+  passToClient: ['_vueQueryInitialState'],
+  onCreateApp: 'import:vike-vue-query/__internal/integration/onCreateApp:onCreateApp',
+  onAfterRenderHtml: 'import:vike-vue-query/__internal/integration/onAfterRenderHtml:onAfterRenderHtml',
+  onBeforeRenderClient: 'import:vike-vue-query/__internal/integration/onBeforeRenderClient:onBeforeRenderClient',
   meta: {
     queryClientConfig: {
       env: {

examples/vue-query/pages/index/+title.ts

@@ -0,0 +1,13 @@
+export { onAfterRenderHtml }
+
+import { dehydrate } from '@tanstack/vue-query'
+import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
+
+const onAfterRenderHtml: OnAfterRenderHtmlSync = (pageContext): ReturnType<OnAfterRenderHtmlSync> => {
+  dehydrateVueQuery(pageContext)
+}
+
+type PageContext = Parameters<typeof onAfterRenderHtml>[0]
+function dehydrateVueQuery(pageContext: PageContext) {
+  pageContext._vueQueryInitialState = dehydrate(pageContext.queryClient!)
+}

examples/vue-query/vite.config.ts

@@ -1,9 +1,14 @@
+export { onBeforeRenderClient }
+
 import { hydrate } from '@tanstack/vue-query'
 import type { OnBeforeRenderClientSync } from 'vike-vue/types'
 
-export { hydrateVueQuery }
+const onBeforeRenderClient: OnBeforeRenderClientSync = (pageContext): ReturnType<OnBeforeRenderClientSync> => {
+  hydrateVueQuery(pageContext)
+}
 
-const hydrateVueQuery: OnBeforeRenderClientSync = (pageContext): ReturnType<OnBeforeRenderClientSync> => {
+type PageContext = Parameters<typeof onBeforeRenderClient>[0]
+function hydrateVueQuery(pageContext: PageContext) {
   if (!pageContext.isHydration) {
     return
   }

packages/vike-vue-pinia/package.json

@@ -1,9 +1,14 @@
+export { onCreateApp }
+
 import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import type { OnCreateAppSync } from 'vike-vue/types'
 
-export { installVueQuery }
+const onCreateApp: OnCreateAppSync = (pageContext): ReturnType<OnCreateAppSync> => {
+  installVueQuery(pageContext)
+}
 
-const installVueQuery: OnCreateAppSync = (pageContext): ReturnType<OnCreateAppSync> => {
+type PageContext = Parameters<typeof onCreateApp>[0]
+function installVueQuery(pageContext: PageContext) {
   const queryClient = new QueryClient(pageContext.config.queryClientConfig)
   pageContext.app.use(VueQueryPlugin, { queryClient })
   Object.assign(pageContext, { queryClient })

packages/vike-vue-query/integration/+config.ts

@@ -15,23 +15,23 @@
   },
   "exports": {
     "./config": "./dist/+config.js",
-    "./__internal/integration/installVueQuery": "./dist/installVueQuery.js",
-    "./__internal/integration/dehydrateVueQuery": "./dist/dehydrateVueQuery.js",
-    "./__internal/integration/hydrateVueQuery": "./dist/hydrateVueQuery.js"
+    "./__internal/integration/onCreateApp": "./dist/onCreateApp.js",
+    "./__internal/integration/onAfterRenderHtml": "./dist/onAfterRenderHtml.js",
+    "./__internal/integration/onBeforeRenderClient": "./dist/onBeforeRenderClient.js"
   },
   "typesVersions": {
     "*": {
       "config": [
         "./dist/+config.d.ts"
       ],
-      "__internal/integration/installVueQuery": [
-        "./dist/installVueQuery.d.ts"
+      "__internal/integration/onCreateApp": [
+        "./dist/onCreateApp.d.ts"
       ],
-      "__internal/integration/dehydrateVueQuery": [
-        "./dist/dehydrateVueQuery.d.ts"
+      "__internal/integration/onAfterRenderHtml": [
+        "./dist/onAfterRenderHtml.d.ts"
       ],
-      "__internal/integration/hydrateVueQuery": [
-        "./dist/hydrateVueQuery.d.ts"
+      "__internal/integration/onBeforeRenderClient": [
+        "./dist/onBeforeRenderClient.d.ts"
       ]
     }
   },
@@ -51,7 +51,7 @@
     "vue-tsc": "^2.0.13"
   },
   "files": [
-    "dist"
+    "dist/"
   ],
   "license": "MIT"
 }