Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/danielroe/zero-vue. Vue bindings for Zero
sync vue zero
Something went wrong. Try again.
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210import { createBuilder, createSchema, defineMutatorsWithType, defineMutatorWithType, defineQueriesWithType, defineQuery, number, string, table, Zero,} from '@rocicorp/zero'import { assert, describe, expect, it } from 'vitest'import { computed, nextTick, ref } from 'vue'import z from 'zod'import { createZeroComposables } from './create-zero-composables'
const testSchema = createSchema({ tables: [ table('test') .columns({ id: number(), name: string(), }) .primaryKey('id'), ],})
describe('createZeroComposables', () => { it('creates a zero instance', () => { const { useZero } = createZeroComposables({ userID: 'test-user', server: null, schema: testSchema, kvStore: 'mem' as const, })
const zero = useZero() assert(zero.value) expect(zero.value.userID).toEqual('test-user') })
it('useConnectionState works', () => { const { useConnectionState } = createZeroComposables({ userID: 'test-user', server: null, schema: testSchema, kvStore: 'mem' as const, })
const connectionState = useConnectionState() assert(connectionState.value) })
it('accepts Zero instance instead of options', () => { const zero = new Zero({ userID: 'test-user', server: null, schema: testSchema, kvStore: 'mem' as const, }) const { useZero } = createZeroComposables({ zero })
const usedZero = useZero() assert(usedZero.value) expect(usedZero.value).toEqual(zero) })
it('updates when options change', async () => { const userID = ref('test-user') const zeroOptions = computed(() => ({ userID: userID.value, server: null, schema: testSchema, kvStore: 'mem' as const, }))
const { useZero } = createZeroComposables(zeroOptions)
const zero = useZero() assert(zero.value)
expect(zero.value.userID).toEqual('test-user')
const oldZero = zero.value
userID.value = 'test-user-2' await nextTick() await new Promise(resolve => setTimeout(resolve, 1))
expect(zero.value.userID).toEqual('test-user-2') expect(zero.value.closed).toBe(false) expect(oldZero.closed).toBe(true) })
it('useQuery works whithout explicitly calling useZero', async () => { const defineMutators = defineMutatorsWithType<typeof testSchema>() const defineMutator = defineMutatorWithType<typeof testSchema>() const mutators = defineMutators({ test: { insert: defineMutator( z.object({ id: z.number(), name: z.string() }), async ({ tx, args: { id, name } }) => { return tx.mutate.test.insert({ id, name }) }, ), }, })
const zero = new Zero({ userID: 'test-user', server: null, schema: testSchema, mutators, kvStore: 'mem' as const, })
await zero.mutate(mutators.test.insert({ id: 1, name: 'test1' })).client await zero.mutate(mutators.test.insert({ id: 2, name: 'test2' })).client
const zql = createBuilder(testSchema) const defineQueries = defineQueriesWithType<typeof testSchema>() const queries = defineQueries({ byId: defineQuery( z.number(), ({ args: id }) => zql.test.where('id', id), ), })
const { useQuery } = createZeroComposables({ zero, })
const { data } = useQuery(() => queries.byId(1)) expect(data.value).toMatchInlineSnapshot(`[ { "id": 1, "name": "test1", Symbol(rc): 1, },]`) })
it('updates when Zero instance changes', async () => { const userID = ref('test-user')
const zero = computed(() => ({ zero: new Zero({ userID: userID.value, server: null, schema: testSchema, kvStore: 'mem' as const, }) }))
const { useZero } = createZeroComposables(zero) const usedZero = useZero() assert(usedZero?.value)
expect(usedZero.value.userID).toEqual('test-user')
const oldZero = usedZero.value
userID.value = 'test-user-2' await nextTick() await new Promise(resolve => setTimeout(resolve, 1))
expect(usedZero.value.userID).toEqual('test-user-2') expect(usedZero.value.closed).toBe(false) expect(oldZero.closed).toBe(true) })
it('is created lazily and once', async () => { const zero = new Zero({ userID: 'test-user', server: null, schema: testSchema, kvStore: 'mem' as const, })
let zeroAccessCount = 0 const accessCountPerCreation = 2
const proxiedOpts = new Proxy( { zero }, { get(target, prop) { if (prop === 'zero') { zeroAccessCount++ } return target[prop as keyof typeof target] }, }, )
const { useZero } = createZeroComposables(proxiedOpts)
expect(zeroAccessCount).toBe(0)
useZero() expect(zeroAccessCount).toBe(accessCountPerCreation)
await nextTick() expect(zeroAccessCount).toBe(accessCountPerCreation)
useZero() await nextTick() expect(zeroAccessCount).toBe(accessCountPerCreation) })})