feat(database): rename .key property to id to match Firestore

BREAKING CHANGE: the default `serialize()` option adds a non enumerable
property named `id` that correspond to the DatabaseRef's `key`. It was
previously added as a non-enumerable key named `.key`. if you want to
keep the old behavior you can pass a global `serialize()` to the
`rtdbPlugin` options:

```ts
import { createApp } from 'vue'
import { rtdbPlugin } from 'vuefire'

const app = createApp()
app.use(rtdbPlugin, { serialize })
```

Author: posva

src/database/index.ts

@@ -19,6 +19,11 @@ import {
 } from '../shared'
 import { rtdbUnbinds } from './optionsApi'
 import { bindAsArray, bindAsObject, _DatabaseRefOptions } from './subscribe'
+import {
+  VueDatabaseDocumentData,
+  VueDatabaseQueryData,
+  _RefDatabase,
+} from './utils'
 
 export { databasePlugin } from './optionsApi'
 
@@ -180,24 +185,3 @@ export function useObject<T = unknown>(
 
 export const unbind = (target: Ref, reset?: _DatabaseRefOptions['reset']) =>
   internalUnbind('', rtdbUnbinds.get(target), reset)
-
-export interface _RefDatabase<T> extends _RefWithState<T, Error> {}
-
-/**
- * Type used by default by the `serialize` option.
- */
-export type VueDatabaseDocumentData<T = unknown> =
-  | null
-  | (T & {
-      /**
-       * id of the document
-       */
-      readonly id: string
-    })
-
-/**
- * Same as VueDatabaseDocumentData but for a query.
- */
-export type VueDatabaseQueryData<T = unknown> = Array<
-  Exclude<VueDatabaseDocumentData<T>, null>
->

src/database/utils.ts

@@ -1,25 +1,24 @@
 import type { DataSnapshot } from 'firebase/database'
-import { isObject } from '../shared'
+import { isObject, _RefWithState } from '../shared'
 
 /**
  * Convert firebase Database snapshot into a bindable data record.
  *
  * @param snapshot
  * @return
  */
-export function createRecordFromDatabaseSnapshot(snapshot: DataSnapshot): any {
-  const value = snapshot.val()
-  const res = isObject(value)
+export function createRecordFromDatabaseSnapshot(
+  snapshot: DataSnapshot
+): VueDatabaseDocumentData<unknown> {
+  const value: unknown = snapshot.val()
+  const res: unknown = isObject(value)
     ? value
-    : Object.defineProperty({}, '.value', { value })
-  // if (isObject(value)) {
-  //   res = value
-  // } else {
-  //   res = {}
-  //   Object.defineProperty(res, '.value', { value })
-  // }
-
-  Object.defineProperty(res, '.key', { value: snapshot.key })
+    : (Object.defineProperty({}, '.value', { value }) as unknown)
+  // TODO: Transform the return type to be T directly (value different from object)
+  // since we have a ref, we can set any value now
+
+  Object.defineProperty(res, 'id', { value: snapshot.key })
+  // @ts-expect-error: id added just above
   return res
 }
 
@@ -32,10 +31,34 @@ export type DatabaseSnapshotSerializer = typeof createRecordFromDatabaseSnapshot
  * @param key
  * @return the index where the key was found
  */
-export function indexForKey(array: any[], key: string | null | number): number {
+export function indexForKey(
+  array: VueDatabaseQueryData,
+  key: string | null | number
+): number {
   for (let i = 0; i < array.length; i++) {
-    if (array[i]['.key'] === key) return i
+    if (array[i].id === key) return i
   }
 
   return -1
 }
+
+export interface _RefDatabase<T> extends _RefWithState<T, Error> {}
+
+/**
+ * Type used by default by the `serialize` option.
+ */
+export type VueDatabaseDocumentData<T = unknown> =
+  | null
+  | (T & {
+      /**
+       * id of the document
+       */
+      readonly id: string
+    })
+
+/**
+ * Same as VueDatabaseDocumentData but for a query.
+ */
+export type VueDatabaseQueryData<T = unknown> = Array<
+  Exclude<VueDatabaseDocumentData<T>, null>
+>

src/index.ts

@@ -2,11 +2,14 @@ export { useList, useObject } from './database'
 export type {
   UseListOptions,
   UseObjectOptions,
-  _RefDatabase,
   UseDatabaseRefOptions,
+} from './database'
+export type {
+  DatabaseSnapshotSerializer,
+  _RefDatabase,
   VueDatabaseDocumentData,
   VueDatabaseQueryData,
-} from './database'
+} from './database/utils'
 
 export { databasePlugin } from './database/optionsApi'
 export type { DatabasePluginOptions } from './database/optionsApi'

tests/database/options.spec.ts

@@ -1,7 +1,11 @@
 import { defineComponent } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { databasePlugin, DatabasePluginOptions } from '../../src'
+import {
+  databasePlugin,
+  DatabasePluginOptions,
+  DatabaseSnapshotSerializer,
+} from '../../src'
 import { setupDatabaseRefs } from '../utils'
 import { push } from 'firebase/database'
 
@@ -30,7 +34,7 @@ describe('RTDB: plugin options', () => {
 
   it('calls custom serialize function with a ref', async () => {
     const pluginOptions: DatabasePluginOptions = {
-      serialize: vi.fn(() => ({ foo: 'bar' })),
+      serialize: vi.fn(() => ({ id: '2', foo: 'bar' })),
     }
     const { vm } = mount(
       {
@@ -55,12 +59,12 @@ describe('RTDB: plugin options', () => {
     expect(pluginOptions.serialize).toHaveBeenCalledWith(
       expect.objectContaining({ val: expect.any(Function) })
     )
-    expect(vm.items).toEqual([{ foo: 'bar' }])
+    expect(vm.items).toEqual([{ foo: 'bar', id: '2' }])
   })
 
   it('can override serialize with local option', async () => {
-    const pluginOptions = {
-      serialize: vi.fn(() => ({ foo: 'bar' })),
+    const pluginOptions: DatabasePluginOptions = {
+      serialize: vi.fn(() => ({ id: '2', foo: 'bar' })),
     }
 
     const items = databaseRef()
@@ -76,7 +80,10 @@ describe('RTDB: plugin options', () => {
       }
     )
 
-    const spy = vi.fn(() => ({ bar: 'bar' }))
+    const spy: DatabaseSnapshotSerializer = vi.fn(() => ({
+      id: '3',
+      bar: 'bar',
+    }))
 
     vm.$rtdbBind('items', items, { serialize: spy })
     await push(items, { text: 'foo' })
@@ -86,6 +93,6 @@ describe('RTDB: plugin options', () => {
     expect(spy).toHaveBeenCalledWith(
       expect.objectContaining({ val: expect.any(Function) })
     )
-    expect(vm.items).toEqual([{ bar: 'bar' }])
+    expect(vm.items).toEqual([{ bar: 'bar', id: '3' }])
   })
 })