minor refactor vike-vue-pinia (#195)

examples/vue-pinia/.test.ts

@@ -0,0 +1,45 @@
+import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry } from '@brillout/test-e2e'
+
+runTest()
+
+const counter1 = 'button#counter-1'
+const counter2 = 'button#counter-2'
+const counter3 = 'button#counter-3'
+
+function runTest() {
+  run('pnpm run dev')
+
+  test('initial state', async () => {
+    const url = '/'
+    const html = await fetchHtml(url)
+    expect(html).toContain('<button type="button" id="counter-1">Counter 1</button>')
+    expect(html).toContain('<button type="button" id="counter-2">Counter 1</button>')
+    await page.goto(getServerUrl() + url)
+    expect(await page.textContent(counter1)).toBe('Counter 1')
+    expect(await page.textContent(counter2)).toBe('Counter 1')
+  })
+
+  test('synced state', async () => {
+    // autoRetry() for awaiting client-side code loading & executing
+    await autoRetry(
+      async () => {
+        expect(await page.textContent(counter1)).toBe('Counter 1')
+        await page.click(counter1)
+        expect(await page.textContent(counter1)).toContain('Counter 2')
+      },
+      { timeout: 5 * 1000 },
+    )
+    expect(await page.textContent(counter1)).toBe('Counter 2')
+    expect(await page.textContent(counter2)).toBe('Counter 2')
+  })
+
+  test('preserved state upon client-side navigation', async () => {
+    await page.click('a[href="/about"]')
+    expect(await page.textContent(counter3)).toBe('Counter 2')
+    await page.click(counter3)
+    expect(await page.textContent(counter3)).toContain('Counter 3')
+    await page.click('a[href="/"]')
+    expect(await page.textContent(counter1)).toBe('Counter 3')
+    expect(await page.textContent(counter2)).toBe('Counter 3')
+  })
+}

examples/vue-pinia/layouts/LayoutDefault.vue

@@ -1,9 +1,6 @@
 <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>

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

@@ -1,14 +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 vikeVuePinia from 'vike-vue-pinia/config'
 
-// Default configs (can be overridden by pages)
 export default {
   Layout,
-  Head,
-  // <title>
-  title: 'My Vike + Vue + Pinia App',
   extends: [vikeVue, vikeVuePinia],
 } satisfies Config

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

@@ -1,4 +1,9 @@
 <template>
   <h1>About</h1>
-  <p>Example of using Vike.</p>
+  <p>Example of using Pinia.</p>
+  <Counter id="counter-3" />
 </template>
+
+<script lang="ts" setup>
+import Counter from '../../components/Counter.vue'
+</script>

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

@@ -1,14 +1,14 @@
 <template>
-  <h1>My Vike + Vue app</h1>
+  <h1>Vike + Vue + Pinia</h1>
   This page is:
   <ul>
     <li>Rendered to HTML.</li>
     <li>Interactive.</li>
   </ul>
   <h2>Counters synced via shared store</h2>
-  <Counter />
+  <Counter id="counter-1" />
   <hr />
-  <Counter />
+  <Counter id="counter-2"/>
 </template>
 
 <script lang="ts" setup>

examples/vue-pinia/vite.config.ts

@@ -1,14 +1,9 @@
+export { config as default }
+
 import vue from '@vitejs/plugin-vue'
 import vike from 'vike/plugin'
 import { UserConfig } from 'vite'
 
 const config: UserConfig = {
-  plugins: [
-    vike({ prerender: true }),
-    vue({
-      include: [/\.vue$/, /\.md$/],
-    }),
-  ],
+  plugins: [vike(), vue()],
 }
-
-export default config

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

@@ -1,15 +1,17 @@
+export { config as default }
+
 import type { Pinia, StateTree } from 'pinia'
 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-pinia',
   require: {
     'vike-vue': '>=0.7.0',
   },
-  onCreateApp: 'import:vike-vue-pinia/__internal/integration/installPinia:installPinia',
-  onAfterRenderHtml: 'import:vike-vue-pinia/__internal/integration/dehydratePinia:dehydratePinia',
-  onBeforeRenderClient: 'import:vike-vue-pinia/__internal/integration/hydratePinia:hydratePinia',
+  onCreateApp: 'import:vike-vue-pinia/__internal/integration/onCreateApp:onCreateApp',
+  onAfterRenderHtml: 'import:vike-vue-pinia/__internal/integration/onAfterRenderHtml:onAfterRenderHtml',
+  onBeforeRenderClient: 'import:vike-vue-pinia/__internal/integration/onBeforeRenderClient:onBeforeRenderClient',
 } satisfies Config
 
 declare global {

packages/vike-vue-pinia/integration/onAfterRenderHtml.ts

@@ -0,0 +1,13 @@
+export { onAfterRenderHtml }
+
+import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
+
+const onAfterRenderHtml: OnAfterRenderHtmlSync = (pageContext): ReturnType<OnAfterRenderHtmlSync> => {
+  return dehydratePinia(pageContext)
+}
+
+type PageContext = Parameters<typeof onAfterRenderHtml>[0]
+function dehydratePinia(pageContext: PageContext) {
+  const { pinia } = pageContext
+  return { piniaInitialState: pinia!.state.value }
+}

packages/vike-vue-pinia/integration/hydratePinia.ts → packages/vike-vue-pinia/integration/onBeforeRenderClient.ts

@@ -1,12 +1,15 @@
+export { onBeforeRenderClient }
+
 import type { OnBeforeRenderClientSync } from 'vike-vue/types'
 
-export { hydratePinia }
+const onBeforeRenderClient: OnBeforeRenderClientSync = (pageContext): ReturnType<OnBeforeRenderClientSync> => {
+  hydratePinia(pageContext)
+}
+
+type PageContext = Parameters<typeof onBeforeRenderClient>[0]
+function hydratePinia(pageContext: PageContext) {
+  const { pinia, fromHtmlRenderer, isHydration } = pageContext
 
-const hydratePinia: OnBeforeRenderClientSync = ({
-  pinia,
-  fromHtmlRenderer,
-  isHydration,
-}): ReturnType<OnBeforeRenderClientSync> => {
   if (!isHydration) {
     return
   }

packages/vike-vue-pinia/integration/onCreateApp.ts

@@ -0,0 +1,15 @@
+export { onCreateApp }
+
+import { createPinia } from 'pinia'
+import type { OnCreateAppSync } from 'vike-vue/types'
+
+const onCreateApp: OnCreateAppSync = (pageContext): ReturnType<OnCreateAppSync> => {
+  installPinia(pageContext)
+}
+
+type PageContext = Parameters<typeof onCreateApp>[0]
+function installPinia(pageContext: PageContext) {
+  const pinia = createPinia()
+  pageContext.app.use(pinia)
+  Object.assign(pageContext, { pinia })
+}

packages/vike-vue-pinia/package.json

@@ -15,23 +15,23 @@
   },
   "exports": {
     "./config": "./dist/+config.js",
-    "./__internal/integration/installPinia": "./dist/installPinia.js",
-    "./__internal/integration/dehydratePinia": "./dist/dehydratePinia.js",
-    "./__internal/integration/hydratePinia": "./dist/hydratePinia.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/installPinia": [
-        "./dist/installPinia.d.ts"
+      "__internal/integration/onCreateApp": [
+        "./dist/onCreateApp.d.ts"
       ],
-      "__internal/integration/dehydratePinia": [
-        "./dist/dehydratePinia.d.ts"
+      "__internal/integration/onAfterRenderHtml": [
+        "./dist/onAfterRenderHtml.d.ts"
       ],
-      "__internal/integration/hydratePinia": [
-        "./dist/hydratePinia.d.ts"
+      "__internal/integration/onBeforeRenderClient": [
+        "./dist/onBeforeRenderClient.d.ts"
       ]
     }
   },