fix(nuxt): avoid calling runWithContext (#334)

* fix(nuxt): avoid calling runWithContext

* fix: infer `CookieStorageOptions` from `@nuxt/schema` rather than `nuxt/schema`

playground/app.vue

@@ -1,18 +1,5 @@
-<script setup lang="ts">
-const cookieStore = useCookieStore()
-const localStorageStore = useLocalStorageStore()
-const sessionStorageStore = useSessionStorageStore()
-</script>
-
 <template>
-  <main>
-    <label for="cookie">{{ cookieStore.$id }}</label>
-    <input id="cookie" v-model="cookieStore.username">
-    <label for="local">{{ localStorageStore.$id }}</label>
-    <input id="locale" v-model="localStorageStore.username">
-    <label for="session">{{ sessionStorageStore.$id }}</label>
-    <input id="session" v-model="sessionStorageStore.username">
-  </main>
+  <NuxtPage />
 </template>
 
 <style>
@@ -22,30 +9,4 @@ body {
   background-color: #181825;
   color: #cdd6f4;
 }
-
-main {
-  max-width: 600px;
-  padding: 10px;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 10px;
-}
-
-label {
-  margin: auto 0 auto auto;
-}
-
-input {
-  border-radius: 5px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #585b70;
-  background-color: transparent;
-  color: inherit;
-  font-size: inherit;
-}
-
-input:focus-visible {
-  outline: #cba6f7 2px solid;
-}
 </style>

playground/composables/token-store.ts

@@ -0,0 +1,7 @@
+export const useTokenStore = defineStore('token', () => {
+  const token = ref('')
+
+  return { token }
+}, {
+  persist: true,
+})

playground/middleware/login.global.ts

@@ -0,0 +1,11 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const tokenStore = useTokenStore()
+
+  if (!tokenStore.token && to.path !== '/login') {
+    return navigateTo('/login')
+  }
+
+  if (tokenStore.token && to.path === '/login') {
+    return navigateTo('/page')
+  }
+})

playground/pages/index.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const cookieStore = useCookieStore()
+const localStorageStore = useLocalStorageStore()
+const sessionStorageStore = useSessionStorageStore()
+</script>
+
+<template>
+  <main>
+    <label for="cookie">{{ cookieStore.$id }}</label>
+    <input id="cookie" v-model="cookieStore.username">
+    <label for="local">{{ localStorageStore.$id }}</label>
+    <input id="locale" v-model="localStorageStore.username">
+    <label for="session">{{ sessionStorageStore.$id }}</label>
+    <input id="session" v-model="sessionStorageStore.username">
+  </main>
+</template>
+
+<style scoped>
+main {
+  max-width: 600px;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+}
+
+label {
+  margin: auto 0 auto auto;
+}
+
+input {
+  border-radius: 5px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #585b70;
+  background-color: transparent;
+  color: inherit;
+  font-size: inherit;
+}
+
+input:focus-visible {
+  outline: #cba6f7 2px solid;
+}
+</style>

playground/pages/login.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const tokenStore = useTokenStore()
+
+async function login() {
+  tokenStore.token = 'loginToken'
+  await navigateTo('/page')
+}
+</script>
+
+<template>
+  <main>
+    <h1>Login page</h1>
+    <button @click="login">
+      Login
+    </button>
+  </main>
+</template>

playground/pages/page.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+async function goToLogin() {
+  await navigateTo('/login')
+}
+</script>
+
+<template>
+  <main>
+    <h1>home page</h1>
+    <button @click="goToLogin">
+      To Login Page
+    </button>
+  </main>
+</template>

src/runtime/core.ts

@@ -73,7 +73,6 @@ function persistState(
 export function createPersistence(
   context: PiniaPluginContext,
   optionsParser: (p: PersistenceOptions) => Persistence,
-  runWithContext: (fn: () => void) => void = fn => fn(),
 ) {
   const { pinia, store, options: { persist } } = context
 
@@ -99,21 +98,21 @@ export function createPersistence(
 
   store.$hydrate = ({ runHooks = true } = {}) => {
     persistences.forEach((p) => {
-      runWithContext(() => hydrateStore(store, p, context, runHooks))
+      hydrateStore(store, p, context, runHooks)
     })
   }
 
   store.$persist = () => {
     persistences.forEach((p) => {
-      runWithContext(() => persistState(store.$state, p))
+      persistState(store.$state, p)
     })
   }
 
   persistences.forEach((p) => {
-    runWithContext(() => hydrateStore(store, p, context))
+    hydrateStore(store, p, context)
 
     store.$subscribe(
-      (_mutation, state) => runWithContext(() => persistState(state, p)),
+      (_mutation, state) => persistState(state, p),
       { detached: true },
     )
   })

src/runtime/plugin.ts

@@ -1,11 +1,10 @@
 import type { Pinia, PiniaPluginContext } from 'pinia'
-import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from '#app'
+import { defineNuxtPlugin, useRuntimeConfig } from '#app'
 import { destr } from 'destr'
 import { createPersistence } from './core'
 import { storages } from './storages'
 
 function piniaPlugin(context: PiniaPluginContext) {
-  const nuxtApp = useNuxtApp()
   const config = useRuntimeConfig()
   const options = config.public.piniaPluginPersistedstate
 
@@ -27,7 +26,7 @@ function piniaPlugin(context: PiniaPluginContext) {
     afterHydrate: p.afterHydrate,
     pick: p.pick,
     omit: p.omit,
-  }), nuxtApp.runWithContext)
+  }))
 }
 
 export default defineNuxtPlugin(({ $pinia }) => {