fix(fixtures): update fixtures to latest Zero usage

test/fixtures/_shared/.env

@@ -4,11 +4,9 @@ ZERO_LOG_LEVEL="debug"
 ZERO_ADMIN_PASSWORD="password"
 
 ZERO_MUTATE_FORWARD_COOKIES="true"
-# ZERO_MUTATE_URL="http://localhost:3000/api/zero/mutate"
+ZERO_MUTATE_URL="http://localhost:3000/api/zero/mutate"
 
 ZERO_QUERY_FORWARD_COOKIES="true"
-# ZERO_QUERY_URL="http://localhost:3000/api/zero/query"
-
-# ZERO_AUTH_SECRET="secretkey"
+ZERO_QUERY_URL="http://localhost:3000/api/zero/query"
 
 ZERO_REPLICA_FILE="/tmp/zstart_replicas.db"

test/fixtures/_shared/db/schema.ts

@@ -10,11 +10,17 @@ import {
   boolean,
   createBuilder,
   createSchema,
+  defineMutator,
+  defineMutators,
+  defineQueries,
+  defineQuery,
+  escapeLike,
   number,
   relationships,
   string,
   table,
 } from '@rocicorp/zero'
+import { z } from 'zod'
 
 const user = table('user')
   .columns({
@@ -73,3 +79,100 @@ declare module '@rocicorp/zero' {
 }
 
 export const zql = createBuilder(schema)
+
+export interface ZeroContext {
+  userID: string | undefined
+}
+
+declare module '@rocicorp/zero' {
+  interface DefaultTypes {
+    context: ZeroContext
+  }
+}
+
+export const mutators = defineMutators({
+  message: {
+    insert: defineMutator(
+      z.object({
+        mediumID: z.string(),
+        body: z.string(),
+        id: z.string(),
+        timestamp: z.number(),
+      }),
+      async ({ tx, ctx: { userID }, args: { mediumID, body, id, timestamp } }) => {
+        if (!userID) {
+          throw new Error('You must be logged in to add messages')
+        }
+
+        return tx.mutate.message.insert({
+          senderID: userID,
+          mediumID,
+          body,
+          id,
+          timestamp,
+        })
+      },
+    ),
+    update: defineMutator(
+      z.object({ id: z.string(), body: z.string() }),
+      async ({ tx, ctx: { userID }, args: { id, body } }) => {
+        const messageToEdit = await tx.run(
+          zql.message.where('id', id).one(),
+        )
+        if (!messageToEdit) {
+          throw new Error(`Message with id ${id} not found`)
+        }
+
+        if (messageToEdit.senderID !== userID) {
+          throw new Error(`You aren't allowed to edit this message`)
+        }
+
+        return tx.mutate.message.update({ id, body })
+      },
+    ),
+    delete: defineMutator(
+      z.object({ id: z.string() }),
+      async ({ tx, ctx: { userID }, args: { id } }) => {
+        if (!userID) {
+          throw new Error('You must be logged in to delete')
+        }
+
+        return tx.mutate.message.delete({ id })
+      },
+    ),
+  },
+})
+
+export const queries = defineQueries({
+  messages: {
+    all: defineQuery(() => zql.message),
+    filtered: defineQuery(
+      z.object({
+        filterUser: z.string().optional(),
+        filterText: z.string().optional(),
+      }),
+      ({ args: { filterUser, filterText } }) => {
+        let filtered = zql.message
+          .related('medium', medium => medium.one())
+          .related('sender', sender => sender.one())
+          .orderBy('timestamp', 'desc')
+
+        if (filterUser) {
+          filtered = filtered.where('senderID', filterUser)
+        }
+
+        if (filterText) {
+          filtered = filtered.where('body', 'LIKE', `%${escapeLike(filterText)}%`)
+        }
+
+        return filtered
+      },
+    ),
+  },
+  users: {
+    all: defineQuery(() => zql.user),
+  },
+  mediums: {
+    all: defineQuery(() => zql.medium),
+  },
+})

test/fixtures/_shared/docker/docker-compose.yml

@@ -1,3 +1,5 @@
+name: zero-vue
+
 services:
   zstart_postgres:
     image: postgres:18.3-alpine
@@ -23,7 +25,7 @@ services:
       -c hot_standby=on
       -c hot_standby_feedback=on
     volumes:
-      - zstart_pgdata:/var/lib/postgresql/data
+      - zstart_pgdata:/var/lib/postgresql
       - ./:/docker-entrypoint-initdb.d
 
 volumes:

test/fixtures/nuxt/.env

@@ -1,2 +1,5 @@
-# NUXT_ZERO_AUTH_SECRET="secretkey"
-# NUXT_PUBLIC_ZERO_CACHE_URL="http://localhost:4848"
+NUXT_AUTH_SECRET="secretKey"
+NUXT_PUBLIC_ZERO_CACHE_URL="http://localhost:4848"
+NUXT_PUBLIC_ZERO_QUERY_URL="http://localhost:3000/api/zero/query"
+NUXT_PUBLIC_ZERO_MUTATE_URL="http://localhost:3000/api/zero/mutate"
+ZERO_UPSTREAM_DB="postgresql://user:password@127.0.0.1:5430/zstart"

test/fixtures/nuxt/app/app.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useInterval } from '#fx/composables/use-interval'
 import { randomMessage } from '#fx/db/data/test-data'
+import { mutators, queries } from '#fx/db/schema'
 import { formatDate } from '#fx/utils/date'
 import { randInt } from '#fx/utils/rand'
-import { mutators, queries } from '~/composables/zero'
 
 const zero = useZero()
 const { data: users } = useQuery(() => queries.users.all())
@@ -20,6 +20,7 @@ const { data: filteredMessages } = useQuery(() => queries.messages.filtered({
 }))
 
 const hasFilters = computed(() => filterUser.value || filterText.value)
+const canAddMessages = computed(() => !!zero.value.userID && users.value.length > 0 && mediums.value.length > 0)
 
 function deleteRandomMessage() {
   if (allMessages.value.length === 0) {
@@ -32,6 +33,10 @@ function deleteRandomMessage() {
 }
 
 function addRandomMessage() {
+  if (!canAddMessages.value) {
+    return false
+  }
+
   zero.value.mutate(mutators.message.insert(
     randomMessage(users.value, mediums.value),
   ))
@@ -68,7 +73,7 @@ function handleAddAction() {
 }
 
 function handleRemoveAction(e: MouseEvent | TouchEvent) {
-  if (zero.value.userID === 'anon' && 'shiftKey' in e && !e.shiftKey) {
+  if (!zero.value.userID && 'shiftKey' in e && !e.shiftKey) {
     // eslint-disable-next-line no-alert
     alert('You must be logged in to delete. Hold shift to try anyway.')
     return
@@ -106,7 +111,7 @@ function editMessage(e: MouseEvent, id: string, senderID: string, prev: string)
 
 const jwt = useCookie('jwt')
 async function toggleLogin() {
-  if (zero.value.userID === 'anon') {
+  if (!zero.value.userID) {
     await $fetch('/api/login')
   }
   else {
@@ -115,14 +120,15 @@ async function toggleLogin() {
   location.reload()
 }
 
-const user = computed(() => users.value.find(user => user.id === zero.value.userID)?.name ?? 'anon')
+const user = computed(() => users.value.find(user => user.id === zero.value.userID)?.name)
 </script>
 
 <template>
   <div>
     <div class="controls">
       <div>
         <button
+          :disabled="!canAddMessages"
           @mousedown="handleAddAction"
           @mouseup="stopAction"
           @mouseleave="stopAction"
@@ -143,9 +149,9 @@ const user = computed(() => users.value.find(user => user.id === zero.value.user
         <em>(hold down buttons to repeat)</em>
       </div>
       <div :style="{ justifyContent: 'end' }">
-        {{ user === 'anon' ? '' : `Logged in as ${user}` }}
+        {{ user ? `Logged in as ${user}` : '' }}
         <button @mousedown="toggleLogin">
-          {{ user === 'anon' ? 'Login' : 'Logout' }}
+          {{ user ? 'Logout' : 'Login' }}
         </button>
       </div>
     </div>

test/fixtures/nuxt/app/composables/zero.ts

@@ -1,121 +1,21 @@
-import {
-  defineMutator,
-  defineMutators,
-  defineQueries,
-  defineQuery,
-  escapeLike,
-} from '@rocicorp/zero'
 import { decodeJwt } from 'jose'
 import { createZeroComposables } from 'zero-vue'
-import z from 'zod'
 
-import { schema, zql } from '#fx/db/schema'
-
-export interface ZeroContext {
-  userID: string
-}
-
-declare module '@rocicorp/zero' {
-  interface DefaultTypes {
-    context: ZeroContext
-  }
-}
-
-export const mutators = defineMutators({
-  message: {
-    insert: defineMutator(
-      z.object({
-        mediumID: z.string(),
-        body: z.string(),
-        id: z.string(),
-        timestamp: z.number(),
-      }),
-      async ({ tx, ctx: { userID }, args: { mediumID, body, id, timestamp } }) => {
-        return tx.mutate.message.insert({
-          senderID: userID,
-          mediumID,
-          body,
-          id,
-          timestamp,
-        })
-      },
-    ),
-    update: defineMutator(
-      z.object({ id: z.string(), body: z.string() }),
-      async ({ tx, ctx: { userID }, args: { id, body } }) => {
-        const messageToEdit = await tx.run(
-          zql.message.where('id', id).one(),
-        )
-        if (!messageToEdit) {
-          throw new Error(`Message with id ${id} not found`)
-        }
-
-        if (messageToEdit.senderID !== userID) {
-          throw new Error(`You aren't allowed to edit this message`)
-        }
-
-        return tx.mutate.message.update({ id, body })
-      },
-    ),
-    delete: defineMutator(
-      z.object({ id: z.string() }),
-      async ({ tx, ctx: { userID }, args: { id } }) => {
-        if (!userID) {
-          throw new Error('You must be logged in to delete')
-        }
-
-        return tx.mutate.message.delete({ id })
-      },
-    ),
-  },
-})
-
-export const queries = defineQueries({
-  messages: {
-    all: defineQuery(() => zql.message),
-    filtered: defineQuery(
-      z.object({
-        filterUser: z.string().optional(),
-        filterText: z.string().optional(),
-      }),
-      ({ args: { filterUser, filterText } }) => {
-        let filtered = zql.message
-          .related('medium', medium => medium.one())
-          .related('sender', sender => sender.one())
-          .orderBy('timestamp', 'desc')
-
-        if (filterUser) {
-          filtered = filtered.where('senderID', filterUser)
-        }
-
-        if (filterText) {
-          filtered = filtered.where('body', 'LIKE', `%${escapeLike(filterText)}%`)
-        }
-
-        return filtered
-      },
-    ),
-  },
-  users: {
-    all: defineQuery(() => zql.user),
-  },
-  mediums: {
-    all: defineQuery(() => zql.medium),
-  },
-})
+import { mutators, schema } from '#fx/db/schema'
 
 function createComposables() {
   return createZeroComposables(() => {
     const jwt = useCookie('jwt')
     const decoded = jwt.value ? decodeJwt(jwt.value) : undefined
-    const userID = typeof decoded?.sub === 'string' ? decoded.sub : 'anon'
+    const userID = typeof decoded?.sub === 'string' ? decoded.sub : undefined
     const config = useRuntimeConfig()
 
     return {
       userID,
-      auth: jwt.value || undefined,
       context: { userID },
-      server: import.meta.client ? config.public.zero.cacheURL : undefined,
+      cacheURL: import.meta.client ? config.public.zero.cacheURL : undefined,
+      queryURL: config.public.zero.queryURL,
+      mutateURL: config.public.zero.mutateURL,
       schema,
       mutators,
       kvStore: 'mem' as const,

test/fixtures/nuxt/nuxt.config.ts

@@ -13,12 +13,12 @@ export default defineNuxtConfig({
   },
   css: ['~/assets/index.css'],
   runtimeConfig: {
-    zero: {
-      authSecret: '',
-    },
+    authSecret: '',
     public: {
       zero: {
         cacheURL: '',
+        queryURL: '',
+        mutateURL: '',
       },
     },
   },
@@ -28,7 +28,12 @@ export default defineNuxtConfig({
       esbuildOptions: {
         target: 'es2022',
       },
-      include: ['@rocicorp/zero'],
+      include: [
+        '@rocicorp/zero',
+        '@rocicorp/zero/bindings',
+        'jose',
+        'zod',
+      ],
     },
   },
 })