nasso.dev
my fork of the bluesky client
[Persisted] Make broadcast subscriptions granular by key (#4874)
* Add fast path for guaranteed noop updates
* Change persisted.onUpdate() API to take a key
* Implement granular broadcast listeners
authored by
GitHub
686d5ebb
966f6c51
+95
-42
+3
-2
src/state/invites.tsx
+3
-2
src/state/invites.tsx
+4
-1
src/state/persisted/index.ts
+4
-1
src/state/persisted/index.ts
+35
-6
src/state/persisted/index.web.ts
+35
-6
src/state/persisted/index.web.ts
···
47
// Don't fire the update listeners yet to avoid a loop.
48
// If there was a change, we'll receive the broadcast event soon enough which will do that.
49
}
50
_state = {
51
..._state,
52
[key]: value,
53
}
54
writeToStorage(_state)
55
-
broadcast.postMessage({event: UPDATE_EVENT})
56
}
57
write satisfies PersistedApi['write']
58
59
-
export function onUpdate(cb: () => void): () => void {
60
-
_emitter.addListener('update', cb)
61
-
return () => _emitter.removeListener('update', cb)
62
}
63
onUpdate satisfies PersistedApi['onUpdate']
64
···
72
clearStorage satisfies PersistedApi['clearStorage']
73
74
async function onBroadcastMessage({data}: MessageEvent) {
75
-
if (typeof data === 'object' && data.event === UPDATE_EVENT) {
76
// read next state, possibly updated by another tab
77
const next = readFromStorage()
78
if (next) {
79
_state = next
80
-
_emitter.emit('update')
81
} else {
82
logger.error(
83
`persisted state: handled update update from broadcast channel, but found no data`,
···
47
// Don't fire the update listeners yet to avoid a loop.
48
// If there was a change, we'll receive the broadcast event soon enough which will do that.
49
}
50
+
try {
51
+
if (JSON.stringify({v: _state[key]}) === JSON.stringify({v: value})) {
52
+
// Fast path for updates that are guaranteed to be noops.
53
+
// This is good mostly because it avoids useless broadcasts to other tabs.
54
+
return
55
+
}
56
+
} catch (e) {
57
+
// Ignore and go through the normal path.
58
+
}
59
_state = {
60
..._state,
61
[key]: value,
62
}
63
writeToStorage(_state)
64
+
broadcast.postMessage({event: {type: UPDATE_EVENT, key}})
65
+
broadcast.postMessage({event: UPDATE_EVENT}) // Backcompat while upgrading
66
}
67
write satisfies PersistedApi['write']
68
69
+
export function onUpdate<K extends keyof Schema>(
70
+
key: K,
71
+
cb: (v: Schema[K]) => void,
72
+
): () => void {
73
+
const listener = () => cb(get(key))
74
+
_emitter.addListener('update', listener) // Backcompat while upgrading
75
+
_emitter.addListener('update:' + key, listener)
76
+
return () => {
77
+
_emitter.removeListener('update', listener) // Backcompat while upgrading
78
+
_emitter.removeListener('update:' + key, listener)
79
+
}
80
}
81
onUpdate satisfies PersistedApi['onUpdate']
82
···
90
clearStorage satisfies PersistedApi['clearStorage']
91
92
async function onBroadcastMessage({data}: MessageEvent) {
93
+
if (
94
+
typeof data === 'object' &&
95
+
(data.event === UPDATE_EVENT || // Backcompat while upgrading
96
+
data.event?.type === UPDATE_EVENT)
97
+
) {
98
// read next state, possibly updated by another tab
99
const next = readFromStorage()
100
+
if (next === _state) {
101
+
return
102
+
}
103
if (next) {
104
_state = next
105
+
if (typeof data.event.key === 'string') {
106
+
_emitter.emit('update:' + data.event.key)
107
+
} else {
108
+
_emitter.emit('update') // Backcompat while upgrading
109
+
}
110
} else {
111
logger.error(
112
`persisted state: handled update update from broadcast channel, but found no data`,
+4
-1
src/state/persisted/types.ts
+4
-1
src/state/persisted/types.ts
+6
-3
src/state/preferences/alt-text-required.tsx
+6
-3
src/state/preferences/alt-text-required.tsx
+2
-2
src/state/preferences/autoplay.tsx
+2
-2
src/state/preferences/autoplay.tsx
+2
-2
src/state/preferences/disable-haptics.tsx
+2
-2
src/state/preferences/disable-haptics.tsx
+2
-2
src/state/preferences/external-embeds-prefs.tsx
+2
-2
src/state/preferences/external-embeds-prefs.tsx
+2
-2
src/state/preferences/in-app-browser.tsx
+2
-2
src/state/preferences/in-app-browser.tsx
+2
-2
src/state/preferences/kawaii.tsx
+2
-2
src/state/preferences/kawaii.tsx
+2
-2
src/state/preferences/languages.tsx
+2
-2
src/state/preferences/languages.tsx
+6
-3
src/state/preferences/large-alt-badge.tsx
+6
-3
src/state/preferences/large-alt-badge.tsx
+6
-3
src/state/preferences/used-starter-packs.tsx
+6
-3
src/state/preferences/used-starter-packs.tsx
+2
-2
src/state/session/index.tsx
+2
-2
src/state/session/index.tsx
+10
-3
src/state/shell/color-mode.tsx
+10
-3
src/state/shell/color-mode.tsx
···
1
import React from 'react'
2
import * as persisted from '#/state/persisted'
3
4
type StateContext = {
···
43
)
44
45
React.useEffect(() => {
46
-
return persisted.onUpdate(() => {
47
-
setColorMode(persisted.get('colorMode'))
48
-
setDarkTheme(persisted.get('darkTheme'))
49
})
50
}, [])
51
52
return (
···
1
import React from 'react'
2
+
3
import * as persisted from '#/state/persisted'
4
5
type StateContext = {
···
44
)
45
46
React.useEffect(() => {
47
+
const unsub1 = persisted.onUpdate('darkTheme', nextDarkTheme => {
48
+
setDarkTheme(nextDarkTheme)
49
})
50
+
const unsub2 = persisted.onUpdate('colorMode', nextColorMode => {
51
+
setColorMode(nextColorMode)
52
+
})
53
+
return () => {
54
+
unsub1()
55
+
unsub2()
56
+
}
57
}, [])
58
59
return (
+5
-4
src/state/shell/onboarding.tsx
+5
-4
src/state/shell/onboarding.tsx
···
1
import React from 'react'
2
import * as persisted from '#/state/persisted'
3
-
import {track} from '#/lib/analytics/analytics'
4
5
export const OnboardingScreenSteps = {
6
Welcome: 'Welcome',
···
81
)
82
83
React.useEffect(() => {
84
-
return persisted.onUpdate(() => {
85
-
const next = persisted.get('onboarding').step
86
// TODO we've introduced a footgun
87
if (state.step !== next) {
88
dispatch({
89
type: 'set',
90
-
step: persisted.get('onboarding').step as OnboardingStep,
91
})
92
}
93
})
···
1
import React from 'react'
2
+
3
+
import {track} from '#/lib/analytics/analytics'
4
import * as persisted from '#/state/persisted'
5
6
export const OnboardingScreenSteps = {
7
Welcome: 'Welcome',
···
82
)
83
84
React.useEffect(() => {
85
+
return persisted.onUpdate('onboarding', nextOnboarding => {
86
+
const next = nextOnboarding.step
87
// TODO we've introduced a footgun
88
if (state.step !== next) {
89
dispatch({
90
type: 'set',
91
+
step: nextOnboarding.step as OnboardingStep,
92
})
93
}
94
})