ref: use user store with context

Author: jianyuan

src/hooks.client.ts

@@ -1,8 +1,8 @@
+import { getUserContext } from '$lib/contexts/user'
 import { pb } from '$lib/pocketbase'
-import { setContext } from 'svelte'
 
 pb.authStore.loadFromCookie(document.cookie)
 pb.authStore.onChange(() => {
-  setContext('user', pb.authStore.model)
+  getUserContext().set(pb.authStore.model)
   document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
 }, true)

src/lib/contexts/user.ts

@@ -0,0 +1,13 @@
+import type { AuthModel } from 'pocketbase'
+import { getContext, setContext } from 'svelte'
+import type { Writable } from 'svelte/store'
+
+const userKey = Symbol('user')
+
+export function setUserContext(user: Writable<AuthModel>) {
+  setContext(userKey, user)
+}
+
+export function getUserContext() {
+  return getContext<Writable<AuthModel>>(userKey)
+}

src/routes/+layout.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import '../app.postcss'
 
-  import { setContext, type Snippet } from 'svelte'
+  import type { Snippet } from 'svelte'
+  import { writable } from 'svelte/store'
   import { applyAction, enhance } from '$app/forms'
+  import { setUserContext } from '$lib/contexts/user'
   import { pb } from '$lib/pocketbase'
   import type { PageData } from './$types'
 
@@ -13,8 +15,8 @@
 
   let { data, children }: Props = $props()
 
-  // Add the user to the context so we can access it in other components
-  setContext('user', data.user)
+  const user = writable(data.user)
+  setUserContext(user)
 </script>
 
 <div class="bg-neutral text-neutral-content">
@@ -24,8 +26,8 @@
     </div>
     <div class="navbar-end">
       <ul class="menu menu-horizontal">
-        {#if data.user}
-          <li><a href="/">{data.user.email}</a></li>
+        {#if $user}
+          <li><a href="/">{$user.email}</a></li>
           <li>
             <form
               method="POST"

src/routes/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import type { AuthModel } from 'pocketbase'
-  import { getContext } from 'svelte'
+  import { getUserContext } from '$lib/contexts/user'
 
-  const user = getContext<AuthModel | undefined>('user')
+  const user = getUserContext()
 </script>
 
-{#if user}
-  <p>Logged in as {user.email}</p>
+{#if $user}
+  <p>Logged in as {$user.email}</p>
 {:else}
   <p>Not logged in</p>
 {/if}