Skip to content

Add 'wait' option to bindCollection #336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Add 'wait' option to bindCollection #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3467215
Add wait option for RTDB and Firestore
Aug 15, 2019
fabfb81
fix tests
Aug 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 24 additions & 9 deletions packages/@posva/vuefire-core/src/firestore/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { firestore } from 'firebase'
export interface FirestoreOptions {
maxRefDepth?: number
reset?: boolean | (() => any)
wait?: boolean
serialize?: FirestoreSerializer
}

Expand All @@ -13,6 +14,7 @@ const DEFAULT_OPTIONS: Required<FirestoreOptions> = {
maxRefDepth: 2,
reset: true,
serialize: createSnapshot,
wait: false,
}
export { DEFAULT_OPTIONS as firestoreOptions }

Expand Down Expand Up @@ -187,7 +189,8 @@ export function bindCollection(
const options = Object.assign({}, DEFAULT_OPTIONS, extraOptions) // fill default values
// TODO support pathes? nested.obj.list (walkSet)
// NOTE use ops object
const array = ops.set(vm, key, [])
let array: any[] = options.wait ? [] : ops.set(vm, key, [])

// const array = (vm[key] = [])
const originalResolve = resolve
let isResolved: boolean
Expand All @@ -204,6 +207,7 @@ export function bindCollection(
const [data, refs] = extractRefs(snapshot)
// NOTE use ops
ops.add(array, newIndex, data)

// array.splice(newIndex, 0, data)
subscribeToRefs(
{
Expand All @@ -228,7 +232,7 @@ export function bindCollection(
const [data, refs] = extractRefs(snapshot, oldData)
// NOTE use ops
ops.add(array, newIndex, data)
// array.splice(newIndex, 0, data)

subscribeToRefs(
{
refs,
Expand Down Expand Up @@ -277,26 +281,36 @@ export function bindCollection(
resolve = ({ id }) => {
if (id in validDocs) {
if (++count >= expectedItems) {
if (options.wait) {
array = ops.set(vm, key, array)
}
originalResolve(vm[key])
// reset resolve to noop
resolve = () => {}
}
}
}
}

docChanges.forEach(c => {
change[c.type](c)
})

// resolves when array is empty
if (!docChanges.length) resolve()
if (!docChanges.length) {
if (options.wait) {
array = ops.set(vm, key, array)
}
resolve()
}
}, reject)

// TODO: we could allow an argument to unbind to override reset
return () => {
return (reset?: FirestoreOptions['reset']) => {
unbind()
if (options.reset !== false) {
const value = typeof options.reset === 'function' ? options.reset() : []
const resetOption = reset === undefined ? options.reset : reset
if (resetOption !== false) {
const value = typeof resetOption === 'function' ? resetOption() : []
ops.set(vm, key, value)
}
arraySubs.forEach(unsubscribeAll)
Expand Down Expand Up @@ -344,10 +358,11 @@ export function bindDocument(
}
}, reject)

return () => {
return (reset?: FirestoreOptions['reset']) => {
unbind()
if (options.reset !== false) {
const value = typeof options.reset === 'function' ? options.reset() : null
const resetOption = reset === undefined ? options.reset : reset
if (resetOption !== false) {
const value = typeof resetOption === 'function' ? resetOption() : null
ops.set(vm, key, value)
}
unsubscribeAll(subs)
Expand Down
26 changes: 17 additions & 9 deletions packages/@posva/vuefire-core/src/rtdb/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import { OperationsType } from '../shared'
export interface RTDBOptions {
reset?: boolean | (() => any)
serialize?: RTDBSerializer
wait?: boolean
}

const DEFAULT_OPTIONS: Required<RTDBOptions> = {
reset: true,
serialize: createRecordFromRTDBSnapshot,
wait: false,
}

export { DEFAULT_OPTIONS as rtdbOptions }
Expand Down Expand Up @@ -45,10 +47,11 @@ export function rtdbBindAsObject(
)
document.once('value', resolve)

return () => {
return (reset?: RTDBOptions['reset']) => {
document.off('value', listener)
if (options.reset !== false) {
const value = typeof options.reset === 'function' ? options.reset() : null
const resetOption = reset === undefined ? options.reset : reset
if (resetOption !== false) {
const value = typeof resetOption === 'function' ? resetOption() : null
ops.set(vm, key, value)
}
}
Expand All @@ -69,8 +72,7 @@ export function rtdbBindAsArray(
extraOptions: RTDBOptions = DEFAULT_OPTIONS
) {
const options = Object.assign({}, DEFAULT_OPTIONS, extraOptions)
const array: any[] = []
ops.set(vm, key, array)
const array: any[] = options.wait ? [] : ops.set(vm, key, [])

const childAdded = collection.on(
'child_added',
Expand Down Expand Up @@ -108,15 +110,21 @@ export function rtdbBindAsArray(
reject
)

collection.once('value', resolve)
collection.once('value', data => {
if (options.wait) {
ops.set(vm, key, array)
}
resolve(data)
})

return () => {
return (reset?: RTDBOptions['reset']) => {
const resetOption = reset === undefined ? options.reset : reset
collection.off('child_added', childAdded)
collection.off('child_changed', childChanged)
collection.off('child_removed', childRemoved)
collection.off('child_moved', childMoved)
if (options.reset !== false) {
const value = typeof options.reset === 'function' ? options.reset() : []
if (resetOption !== false) {
const value = typeof resetOption === 'function' ? resetOption() : []
ops.set(vm, key, value)
}
}
Expand Down
15 changes: 12 additions & 3 deletions packages/vuexfire/src/firestore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,11 +123,20 @@ export function firestoreAction<S, R>(
)
return data
},
add: (target, newIndex, data) =>
commit(VUEXFIRE_ARRAY_ADD, { target, newIndex, data }, commitOptions),
add: (target, newIndex, data) => {
if ('__ob__' in target) {
commit(VUEXFIRE_ARRAY_ADD, { target, newIndex, data }, commitOptions)
} else {
target[newIndex] = data
}
},
remove: (target, oldIndex) => {
const data = target[oldIndex]
commit(VUEXFIRE_ARRAY_REMOVE, { target, oldIndex }, commitOptions)
if ('__ob__' in target) {
commit(VUEXFIRE_ARRAY_REMOVE, { target, oldIndex }, commitOptions)
} else {
target.splice(oldIndex, 1)
}
return [data]
},
}
Expand Down
15 changes: 12 additions & 3 deletions packages/vuexfire/src/rtdb.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,20 @@ export function firebaseAction<S, R>(
)
return data
},
add: (target, newIndex, data) =>
commit(VUEXFIRE_ARRAY_ADD, { target, newIndex, data }, commitOptions),
add: (target, newIndex, data) => {
if ('__ob__' in target) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what was the reason behind this? Not using commit would prevent devtools to see it

commit(VUEXFIRE_ARRAY_ADD, { target, newIndex, data }, commitOptions)
} else {
target[newIndex] = data
}
},
remove: (target, oldIndex) => {
const data = target[oldIndex]
commit(VUEXFIRE_ARRAY_REMOVE, { target, oldIndex }, commitOptions)
if ('__ob__' in target) {
commit(VUEXFIRE_ARRAY_REMOVE, { target, oldIndex }, commitOptions)
} else {
target.splice(oldIndex, 1)
}
return [data]
},
}
Expand Down