Handle hot module unloading in layout

This commit is contained in:
Jon Staab
2025-10-21 08:27:30 -07:00
parent 7476767aa7
commit ecbb3086d8
8 changed files with 262 additions and 285 deletions
+1 -1
View File
@@ -113,7 +113,7 @@ export const makeFeed = ({
onScroll: async () => { onScroll: async () => {
const $buffer = get(buffer) const $buffer = get(buffer)
events.update($events => [...$events, ...$buffer.splice(0, 100)]) events.update($events => [...$events, ...$buffer.splice(0, 30)])
if ($buffer.length < 100) { if ($buffer.length < 100) {
ctrl.load(100) ctrl.load(100)
+1 -1
View File
@@ -349,7 +349,7 @@ export const {
// Relays sending events with empty signatures that the user has to choose to trust // Relays sending events with empty signatures that the user has to choose to trust
export const relaysPendingTrust = writable<string[]>([]) export const relaysPendingTrust = withGetter(writable<string[]>([]))
// Relays that mostly send restricted responses to requests and events // Relays that mostly send restricted responses to requests and events
+1 -2
View File
@@ -11,10 +11,9 @@ w.plausible =
;(w.plausible.q = w.plausible.q || []).push(arguments) ;(w.plausible.q = w.plausible.q || []).push(arguments)
} }
export const setupAnalytics = () => { export const setupAnalytics = () =>
page.subscribe($page => { page.subscribe($page => {
if ($page.route && getSetting("report_usage")) { if ($page.route && getSetting("report_usage")) {
w.plausible("pageview", {u: $page.route.id}) w.plausible("pageview", {u: $page.route.id})
} }
}) })
}
+1 -2
View File
@@ -2,10 +2,9 @@ import {page} from "$app/stores"
export const lastPageBySpaceUrl = new Map<string, string>() export const lastPageBySpaceUrl = new Map<string, string>()
export const setupHistory = () => { export const setupHistory = () =>
page.subscribe($page => { page.subscribe($page => {
if ($page.params.relay) { if ($page.params.relay) {
lastPageBySpaceUrl.set($page.params.relay, $page.url.pathname) lastPageBySpaceUrl.set($page.params.relay, $page.url.pathname)
} }
}) })
}
+123
View File
@@ -0,0 +1,123 @@
import {on, call, dissoc, assoc, uniq} from "@welshman/lib"
import type {StampedEvent} from "@welshman/util"
import type {Socket, RelayMessage, ClientMessage} from "@welshman/net"
import {
makeSocketPolicyAuth,
SocketEvent,
isRelayEvent,
isRelayOk,
isRelayClosed,
isClientReq,
isClientEvent,
isClientClose,
} from "@welshman/net"
import {signer} from "@welshman/app"
import {
userSettingsValues,
getSetting,
relaysPendingTrust,
relaysMostlyRestricted,
} from "@app/core/state"
export const authPolicy = makeSocketPolicyAuth({
sign: (event: StampedEvent) => signer.get()?.sign(event),
shouldAuth: (socket: Socket) => true,
})
export const trustPolicy = (socket: Socket) => {
const buffer: RelayMessage[] = []
const unsubscribers = [
// When the socket goes from untrusted to trusted, receive all buffered messages
userSettingsValues.subscribe($settings => {
if ($settings.trusted_relays.includes(socket.url)) {
for (const message of buffer.splice(0)) {
socket._recvQueue.push(message)
}
}
}),
// When we get an event with no signature from an untrusted relay, remove it from
// the receive queue. If trust status is undefined, buffer it for later.
on(socket, SocketEvent.Receiving, (message: RelayMessage) => {
if (isRelayEvent(message) && !message[2]?.sig) {
const isTrusted = getSetting<string[]>("trusted_relays").includes(socket.url)
if (!isTrusted) {
buffer.push(message)
socket._recvQueue.remove(message)
relaysPendingTrust.update($r => uniq([...$r, socket.url]))
}
}
}),
]
return () => {
unsubscribers.forEach(call)
}
}
export const mostlyRestrictedPolicy = (socket: Socket) => {
let total = 0
let restricted = 0
let error = ""
const pending = new Set<string>()
const updateStatus = () =>
relaysMostlyRestricted.update(
restricted > total / 2 ? assoc(socket.url, error) : dissoc(socket.url),
)
const unsubscribers = [
on(socket, SocketEvent.Receive, (message: RelayMessage) => {
if (isRelayOk(message)) {
const [_, id, ok, details = ""] = message
if (pending.has(id)) {
pending.delete(id)
if (!ok && details.startsWith("restricted: ")) {
restricted++
error = details
updateStatus()
}
}
}
if (isRelayClosed(message)) {
const [_, id, details = ""] = message
if (pending.has(id)) {
pending.delete(id)
if (details.startsWith("restricted: ")) {
restricted++
error = details
updateStatus()
}
}
}
}),
on(socket, SocketEvent.Send, (message: ClientMessage) => {
if (isClientReq(message)) {
total++
pending.add(message[1])
updateStatus()
}
if (isClientEvent(message)) {
total++
pending.add(message[1].id)
updateStatus()
}
if (isClientClose(message)) {
pending.delete(message[1])
}
}),
]
return () => {
unsubscribers.forEach(call)
}
}
+6 -2
View File
@@ -1,5 +1,6 @@
import { import {
always, always,
call,
on, on,
hash, hash,
last, last,
@@ -281,8 +282,8 @@ const syncWrapManager = async () => {
} }
} }
export const syncDataStores = () => export const syncDataStores = async () => {
Promise.all([ const unsubscribers = await Promise.all([
syncEvents(), syncEvents(),
syncTracker(), syncTracker(),
syncRelays(), syncRelays(),
@@ -292,3 +293,6 @@ export const syncDataStores = () =>
syncPlaintext(), syncPlaintext(),
syncWrapManager(), syncWrapManager(),
]) ])
return () => unsubscribers.forEach(call)
}
+3
View File
@@ -1,3 +1,4 @@
import {noop} from "@welshman/lib"
import * as Sentry from "@sentry/browser" import * as Sentry from "@sentry/browser"
import {getSetting} from "@app/core/state" import {getSetting} from "@app/core/state"
@@ -17,4 +18,6 @@ export const setupTracking = () => {
}, },
}) })
} }
return noop
} }
+126 -277
View File
@@ -2,39 +2,20 @@
import "@src/app.css" import "@src/app.css"
import "@capacitor-community/safe-area" import "@capacitor-community/safe-area"
import {throttle} from "throttle-debounce" import {throttle} from "throttle-debounce"
import {onMount} from "svelte"
import * as nip19 from "nostr-tools/nip19" import * as nip19 from "nostr-tools/nip19"
import {get} from "svelte/store" import {get} from "svelte/store"
import {App, type URLOpenListenerEvent} from "@capacitor/app" import {App, type URLOpenListenerEvent} from "@capacitor/app"
import {dev} from "$app/environment" import {dev} from "$app/environment"
import {goto} from "$app/navigation" import {goto} from "$app/navigation"
import {sync} from "@welshman/store" import {sync} from "@welshman/store"
import {assoc, call, defer, dissoc, on, sleep, spec} from "@welshman/lib" import {call, on, spec} from "@welshman/lib"
import type {StampedEvent} from "@welshman/util" import {defaultSocketPolicies} from "@welshman/net"
import {Nip46Broker, makeSecret} from "@welshman/signer"
import type {Socket, RelayMessage, ClientMessage} from "@welshman/net"
import {
defaultSocketPolicies,
makeSocketPolicyAuth,
SocketEvent,
isRelayEvent,
isRelayOk,
isRelayClosed,
isClientReq,
isClientEvent,
isClientClose,
} from "@welshman/net"
import { import {
repository, repository,
pubkey, pubkey,
session,
sessions, sessions,
signer,
signerLog, signerLog,
dropSession,
shouldUnwrap, shouldUnwrap,
loginWithNip01,
loginWithNip46,
loadRelaySelections, loadRelaySelections,
SignerLogEntryStatus, SignerLogEntryStatus,
} from "@welshman/app" } from "@welshman/app"
@@ -45,19 +26,14 @@
import * as welshmanSigner from "@welshman/signer" import * as welshmanSigner from "@welshman/signer"
import * as net from "@welshman/net" import * as net from "@welshman/net"
import * as app from "@welshman/app" import * as app from "@welshman/app"
import {nsecDecode} from "@lib/util"
import {preferencesStorageProvider} from "@lib/storage" import {preferencesStorageProvider} from "@lib/storage"
import AppContainer from "@app/components/AppContainer.svelte" import AppContainer from "@app/components/AppContainer.svelte"
import ModalContainer from "@app/components/ModalContainer.svelte" import ModalContainer from "@app/components/ModalContainer.svelte"
import {setupHistory} from "@app/util/history" import {setupHistory} from "@app/util/history"
import {setupTracking} from "@app/util/tracking" import {setupTracking} from "@app/util/tracking"
import {setupAnalytics} from "@app/util/analytics" import {setupAnalytics} from "@app/util/analytics"
import { import {authPolicy, trustPolicy, mostlyRestrictedPolicy} from "@app/util/policies"
userSettingsValues, import {userSettingsValues} from "@app/core/state"
relaysPendingTrust,
getSetting,
relaysMostlyRestricted,
} from "@app/core/state"
import {syncApplicationData} from "@app/core/sync" import {syncApplicationData} from "@app/core/sync"
import {theme} from "@app/util/theme" import {theme} from "@app/util/theme"
import {toast, pushToast} from "@app/util/toast" import {toast, pushToast} from "@app/util/toast"
@@ -69,280 +45,153 @@
import * as storage from "@app/util/storage" import * as storage from "@app/util/storage"
import NewNotificationSound from "@src/app/components/NewNotificationSound.svelte" import NewNotificationSound from "@src/app/components/NewNotificationSound.svelte"
// Migration: delete old indexeddb database const {children} = $props()
indexedDB?.deleteDatabase("flotilla")
// Migration: old nostrtalk instance used different sessions // Add stuff to window for convenience
if ($session && !$signer) { Object.assign(window, {
dropSession($session.pubkey) get,
} nip19,
theme,
...lib,
...welshmanSigner,
...router,
...util,
...feeds,
...net,
...app,
...appState,
...commands,
...requests,
...notifications,
})
// Initialize push notification handler asap // Initialize push notification handler asap
initializePushNotifications() initializePushNotifications()
const {children} = $props() // Listen for navigation messages from service worker
navigator.serviceWorker?.addEventListener("message", event => {
const ready = $state(defer<void>()) if (event.data && event.data.type === "NAVIGATE") {
goto(event.data.url)
let initialized = false
onMount(async () => {
Object.assign(window, {
get,
nip19,
theme,
...lib,
...welshmanSigner,
...router,
...util,
...feeds,
...net,
...app,
...appState,
...commands,
...requests,
...notifications,
})
// Listen for navigation messages from service worker
navigator.serviceWorker?.addEventListener("message", event => {
if (event.data && event.data.type === "NAVIGATE") {
goto(event.data.url)
}
})
// Listen for deep link events
App.addListener("appUrlOpen", (event: URLOpenListenerEvent) => {
const url = new URL(event.url)
const target = `${url.pathname}${url.search}${url.hash}`
goto(target, {replaceState: false, noScroll: false})
})
// Nstart login
if (window.location.hash?.startsWith("#nostr-login")) {
const params = new URLSearchParams(window.location.hash.slice(1))
const login = params.get("nostr-login")
let success = false
try {
if (login?.startsWith("bunker://")) {
const clientSecret = makeSecret()
const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl(login)
const broker = new Nip46Broker({relays, clientSecret, signerPubkey})
const result = await broker.connect(connectSecret, appState.NIP46_PERMS)
const pubkey = await broker.getPublicKey()
// TODO: remove ack result
if (pubkey && ["ack", connectSecret].includes(result)) {
loginWithNip46(pubkey, clientSecret, signerPubkey, relays)
broker.cleanup()
success = true
}
} else if (login) {
loginWithNip01(nsecDecode(login))
success = true
}
} catch (e) {
console.error(e)
}
if (success) {
goto("/home")
}
} }
})
// Sync theme // Listen for deep link events
theme.subscribe($theme => { App.addListener("appUrlOpen", (event: URLOpenListenerEvent) => {
document.body.setAttribute("data-theme", $theme) const url = new URL(event.url)
}) const target = `${url.pathname}${url.search}${url.hash}`
goto(target, {replaceState: false, noScroll: false})
})
// Sync font size // Handle back button on mobile
userSettingsValues.subscribe($userSettingsValues => { App.addListener("backButton", () => {
// @ts-ignore if (window.history.length > 1) {
document.documentElement.style["font-size"] = `${$userSettingsValues.font_size}rem` window.history.back()
}) } else {
App.exitApp()
}
})
if (!initialized) { // Listen to navigation changes
initialized = true const unsubscribeHistory = setupHistory()
setupHistory()
setupTracking()
setupAnalytics()
App.addListener("backButton", () => { // Report usage on navigation change
if (window.history.length > 1) { const unsubscribeAnalytics = setupAnalytics()
window.history.back()
} else {
App.exitApp()
}
})
repository.on("update", ({added}) => { // Bug tracking
for (const event of added) { const unsubscribeTracking = setupTracking()
loadRelaySelections(event.pubkey)
}
})
// Sync current pubkey // Load user data, listen for messages, etc
await sync({ const unsubscribeApplicationData = syncApplicationData()
// Whenever we see a new pubkey, load their outbox event
const unsubscribeRepository = on(repository, "update", ({added}) => {
for (const event of added) {
loadRelaySelections(event.pubkey)
}
})
// Subscribe to badge count for changes
const unsubscribeBadgeCount = notifications.badgeCount.subscribe(
notifications.handleBadgeCountChanges,
)
// Listen for signer errors, report to user via toast
const unsubscribeSignerLog = signerLog.subscribe(
throttle(10_000, $log => {
const recent = $log.slice(-10)
const success = recent.filter(spec({status: SignerLogEntryStatus.Success}))
const failure = recent.filter(spec({status: SignerLogEntryStatus.Failure}))
if (!$toast && failure.length > 5 && success.length === 0) {
pushToast({
theme: "error",
timeout: 60_000,
message: "Your signer appears to be unresponsive.",
action: {
message: "Details",
onclick: () => goto("/settings/profile"),
},
})
}
}),
)
// Sync theme
const unsubscribeTheme = theme.subscribe($theme => {
document.body.setAttribute("data-theme", $theme)
})
// Sync font size
const unsubscribeSettings = userSettingsValues.subscribe($userSettingsValues => {
// @ts-ignore
document.documentElement.style["font-size"] = `${$userSettingsValues.font_size}rem`
})
let unsubscribeStorage: () => void
const ready = call(async () => {
// Sync stuff to localstorage
await Promise.all([
sync({
key: "pubkey", key: "pubkey",
store: pubkey, store: pubkey,
storage: preferencesStorageProvider, storage: preferencesStorageProvider,
}) }),
sync({
// Sync user sessions
await sync({
key: "sessions", key: "sessions",
store: sessions, store: sessions,
storage: preferencesStorageProvider, storage: preferencesStorageProvider,
}) }),
sync({
// Sync shouldUnwrap
await sync({
key: "shouldUnwrap", key: "shouldUnwrap",
store: shouldUnwrap, store: shouldUnwrap,
storage: preferencesStorageProvider, storage: preferencesStorageProvider,
}) }),
])
// Sync application data (relay, events, etc) // Sync stuff to indexeddb
await storage.syncDataStores() unsubscribeStorage = await storage.syncDataStores()
})
// Wait 300 ms for any throttled stores to finish // Default socket policies
sleep(300).then(() => ready.resolve()) const additionalPolicies = [authPolicy, trustPolicy, mostlyRestrictedPolicy]
defaultSocketPolicies.push( defaultSocketPolicies.push(...additionalPolicies)
makeSocketPolicyAuth({
sign: (event: StampedEvent) => signer.get()?.sign(event),
shouldAuth: (socket: Socket) => true,
}),
(socket: Socket) => {
const buffer: RelayMessage[] = []
const unsubscribers = [ // Cleanup on hot reload
// When the socket goes from untrusted to trusted, receive all buffered messages import.meta.hot?.dispose(() => {
userSettingsValues.subscribe($settings => { App.removeAllListeners()
if ($settings.trusted_relays.includes(socket.url)) { unsubscribeHistory()
for (const message of buffer.splice(0)) { unsubscribeAnalytics()
socket._recvQueue.push(message) unsubscribeTracking()
} unsubscribeApplicationData()
} unsubscribeRepository()
}), unsubscribeBadgeCount()
// When we get an event with no signature from an untrusted relay, remove it from unsubscribeSignerLog()
// the receive queue. If trust status is undefined, buffer it for later. unsubscribeTheme()
on(socket, SocketEvent.Receiving, (message: RelayMessage) => { unsubscribeSettings()
if (isRelayEvent(message) && !message[2]?.sig) { unsubscribeStorage?.()
const isTrusted = getSetting<string[]>("trusted_relays").includes(socket.url) defaultSocketPolicies.splice(-additionalPolicies.length)
if (!isTrusted) {
socket._recvQueue.remove(message)
buffer.push(message)
if (!$relaysPendingTrust.includes(socket.url)) {
relaysPendingTrust.update($r => [...$r, socket.url])
}
}
}
}),
]
return () => {
unsubscribers.forEach(call)
}
},
function monitorRestrictedResponses(socket: Socket) {
let total = 0
let restricted = 0
let error = ""
const pending = new Set<string>()
const updateStatus = () =>
relaysMostlyRestricted.update(
restricted > total / 2 ? assoc(socket.url, error) : dissoc(socket.url),
)
const unsubscribers = [
on(socket, SocketEvent.Receive, (message: RelayMessage) => {
if (isRelayOk(message)) {
const [_, id, ok, details = ""] = message
if (pending.has(id)) {
pending.delete(id)
if (!ok && details.startsWith("restricted: ")) {
restricted++
error = details
updateStatus()
}
}
}
if (isRelayClosed(message)) {
const [_, id, details = ""] = message
if (pending.has(id)) {
pending.delete(id)
if (details.startsWith("restricted: ")) {
restricted++
error = details
updateStatus()
}
}
}
}),
on(socket, SocketEvent.Send, (message: ClientMessage) => {
if (isClientReq(message)) {
total++
pending.add(message[1])
updateStatus()
}
if (isClientEvent(message)) {
total++
pending.add(message[1].id)
updateStatus()
}
if (isClientClose(message)) {
pending.delete(message[1])
}
}),
]
return () => {
unsubscribers.forEach(call)
}
},
)
// Load user data, listen for messages, etc
syncApplicationData()
// subscribe to badge count for changes
notifications.badgeCount.subscribe(notifications.handleBadgeCountChanges)
// Listen for signer errors, report to user via toast
signerLog.subscribe(
throttle(10_000, $log => {
const recent = $log.slice(-10)
const success = recent.filter(spec({status: SignerLogEntryStatus.Success}))
const failure = recent.filter(spec({status: SignerLogEntryStatus.Failure}))
if (!$toast && failure.length > 5 && success.length === 0) {
pushToast({
theme: "error",
timeout: 60_000,
message: "Your signer appears to be unresponsive.",
action: {
message: "Details",
onclick: () => goto("/settings/profile"),
},
})
}
}),
)
}
}) })
</script> </script>