mirror/plspace
1
0
Fork 0
mirror of https://git.shipoclu.com/moon/plspace.git synced 2026-08-13 02:42:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved component composition and added tests.

Browse Source
This commit is contained in:
Moon.eth
2026-07-29 10:30:28 +09:00
parent 95f9d73681
commit 264ae17a8d
39 changed files with 1811 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1173 -1
View File
File diff suppressed because it is too large Load Diff
package.json
+8 -2
View File
@@ -9,16 +9,22 @@
"build": "svelte-check --tsconfig ./tsconfig.json && vite build",
"build:only": "vite build",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
"check": "svelte-check --tsconfig ./tsconfig.json",
"test": "vitest run",
"test:watch": "vitest"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^7.2.0",
"@testing-library/jest-dom": "^7.0.0",
"@testing-library/svelte": "^5.4.2",
"@tsconfig/svelte": "^5.0.4",
"@types/node": "^26.1.2",
"jsdom": "^29.1.1",
"svelte": "^5.56.8",
"svelte-check": "^4.3.3",
"typescript": "^5.9.3",
"vite": "^8.1.5"
"vite": "^8.1.5",
"vitest": "^4.1.10"
},
"dependencies": {
"dompurify": "^3.4.12"
src/App.svelte
+8 -2
View File
@@ -2,8 +2,7 @@
/**
* Shell: restore the session, then render chrome plus whichever route matched.
*/
import { router } from '$lib/router.svelte'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import SiteHeader from '$components/chrome/SiteHeader.svelte'
import SiteNav from '$components/chrome/SiteNav.svelte'
import SiteFooter from '$components/chrome/SiteFooter.svelte'
@@ -20,11 +19,15 @@
import NotFound from '$routes/NotFound.svelte'
import type { TimelineKind } from '$lib/api/endpoints'
const { router, session } = useAppServices()
let booted = $state(false)
$effect(() => {
let active = true
void (async () => {
const landing = await session.restore()
if (!active) return
booted = true
if (landing) {
@@ -34,6 +37,9 @@
router.replace('#/login')
}
})()
return () => {
active = false
}
})
const route = $derived(router.current)
src/components/blog/BlogEntry.svelte
+5 -5
View File
@@ -11,8 +11,7 @@
* a federated round trip is slow enough that waiting feels broken.
*/
import type { Status } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { favouriteStatus, reblogStatus, deleteStatus } from '$lib/api/endpoints'
import { useAppServices } from '$lib/app-services'
import { displayNameOf, formatCount, fullHandle, profilePath } from '$lib/util/profile'
import { renderDisplayName } from '$lib/util/html'
import { isoDate, longDate, stampDate } from '$lib/util/time'
@@ -36,6 +35,7 @@
let { status, onupdate, ondelete, compact = false, longFormDate = false }: Props = $props()
const { endpoints, session } = useAppServices()
/** The status actually being displayed; a boost renders its target. */
const entry = $derived(status.reblog ?? status)
const booster = $derived(status.reblog ? status.account : null)
@@ -73,7 +73,7 @@
onupdate?.(applyLocal(status, { favourited: next, favourites_count: entry.favourites_count + (next ? 1 : -1) }))
try {
const updated = await favouriteStatus(session.api, entry.id, next)
const updated = await endpoints.favouriteStatus(session.api, entry.id, next)
onupdate?.(rewrap(status, updated))
} catch (cause) {
onupdate?.(status)
@@ -92,7 +92,7 @@
onupdate?.(applyLocal(status, { reblogged: next, reblogs_count: entry.reblogs_count + (next ? 1 : -1) }))
try {
const updated = await reblogStatus(session.api, entry.id, next)
const updated = await endpoints.reblogStatus(session.api, entry.id, next)
// Reblogging returns the *wrapper* status; unwrap to the original.
onupdate?.(rewrap(status, updated.reblog ?? updated))
} catch (cause) {
@@ -108,7 +108,7 @@
if (!confirm('Delete this entry? This cannot be undone.')) return
busy = true
try {
await deleteStatus(session.api, entry.id)
await endpoints.deleteStatus(session.api, entry.id)
ondelete?.(status.id)
} catch (cause) {
actionError = cause instanceof Error ? cause.message : 'Could not delete that.'
src/components/blog/Composer.svelte
+9 -11
View File
@@ -8,14 +8,14 @@
*/
import { untrack } from 'svelte'
import type { MediaAttachment, Status, StatusVisibility } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { postStatus, uploadMedia } from '$lib/api/endpoints'
import { useAppServices } from '$lib/app-services'
interface Props {
/** Set to reply to an existing entry. */
inReplyTo?: Status | null
/** Prefilled body, e.g. the mentions of the entry being replied to. */
initialText?: string
initialVisibility?: StatusVisibility
placeholder?: string
submitLabel?: string
onposted?: (status: Status) => void
@@ -24,16 +24,20 @@
let {
inReplyTo = null,
initialText = '',
initialVisibility = 'public',
placeholder = 'What are you up to?',
submitLabel = 'Post Entry',
onposted,
}: Props = $props()
const { endpoints, session } = useAppServices()
// Seeded once from the prop; afterwards the textarea owns the value.
let text = $state(untrack(() => initialText))
let warning = $state('')
let showWarning = $state(false)
let visibility = $state<StatusVisibility>('public')
let visibility = $state<StatusVisibility>(
untrack(() => inReplyTo?.visibility ?? initialVisibility),
)
let attachments = $state<MediaAttachment[]>([])
let busy = $state(false)
let uploading = $state(false)
@@ -46,12 +50,6 @@
!busy && !uploading && remaining >= 0 && (text.trim().length > 0 || attachments.length > 0),
)
// Default replies to the visibility of what they answer, so a private thread
// doesn't accidentally get a public reply.
$effect(() => {
if (inReplyTo) visibility = inReplyTo.visibility
})
async function onFiles(event: Event): Promise<void> {
const input = event.currentTarget as HTMLInputElement
const files = Array.from(input.files ?? [])
@@ -61,7 +59,7 @@
error = null
try {
for (const file of files.slice(0, maxAttachments - attachments.length)) {
const media = await uploadMedia(session.api, file)
const media = await endpoints.uploadMedia(session.api, file)
attachments = [...attachments, media]
}
} catch (cause) {
@@ -83,7 +81,7 @@
busy = true
error = null
try {
const created = await postStatus(session.api, {
const created = await endpoints.postStatus(session.api, {
status: text,
in_reply_to_id: inReplyTo?.id ?? null,
visibility,
src/components/blog/Composer.test.ts
+27
View File
@@ -0,0 +1,27 @@
import { fireEvent, render, waitFor } from '@testing-library/svelte'
import { describe, expect, it, vi } from 'vitest'
import { APP_SERVICES } from '$lib/app-services'
import { account, session, status, testServices } from '$test/fixtures'
import Composer from './Composer.svelte'
describe('Composer', () => {
it('posts through an in-memory endpoint double', async () => {
const postStatus = vi.fn().mockResolvedValue(status())
const services = testServices({
session: session({ token: 'token', me: account(), signedIn: true }),
endpoints: { postStatus },
})
const view = render(Composer, {
props: { initialText: 'A backend-free component test' },
context: new Map([[APP_SERVICES, services]]),
})
await fireEvent.click(view.getByRole('button', { name: 'Post Entry' }))
await waitFor(() => expect(postStatus).toHaveBeenCalledOnce())
expect(postStatus.mock.calls[0][1]).toMatchObject({
status: 'A backend-free component test',
visibility: 'public',
})
})
})
src/components/chrome/SiteFooter.svelte
+3 -1
View File
@@ -1,8 +1,10 @@
<script lang="ts">
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import { instanceDomain } from '$lib/api/endpoints'
import { profilePath } from '$lib/util/profile'
const { session } = useAppServices()
const domain = $derived(session.host ? instanceDomain(session.instance, session.host) : null)
const version = $derived(session.instance?.version ?? null)
</script>
src/components/chrome/SiteHeader.svelte
+4 -2
View File
@@ -2,13 +2,15 @@
/**
* The navy utility bar and the boxed logo strip beneath it.
*/
import { session } from '$lib/stores/session.svelte'
import { router, routeTo } from '$lib/router.svelte'
import { routeTo } from '$lib/router.svelte'
import { useAppServices } from '$lib/app-services'
import { instanceDomain } from '$lib/api/endpoints'
// Imported rather than referenced by path so Vite fingerprints it and the
// relative `base` still resolves when hosted from a subdirectory.
import logoUrl from '../../assets/plspace-logo.webp'
const { router, session } = useAppServices()
let query = $state('')
const domain = $derived(session.host ? instanceDomain(session.instance, session.host) : '')
src/components/chrome/SiteNav.svelte
+3 -2
View File
@@ -5,10 +5,11 @@
* Entries that need a token disappear when browsing logged out rather than
* erroring on click.
*/
import { session } from '$lib/stores/session.svelte'
import { router } from '$lib/router.svelte'
import { useAppServices } from '$lib/app-services'
import { profilePath } from '$lib/util/profile'
const { router, session } = useAppServices()
interface NavItem {
label: string
href: string
src/components/common/Avatar.svelte
+8
View File
@@ -34,6 +34,14 @@
for (let index = 0; index < seed.length; index += 1) hash = (hash * 31 + seed.charCodeAt(index)) >>> 0
return hash % 360
})
// A keyed list usually preserves account identity, but standalone usages can
// receive a different account. A failure from the previous URL must not hide
// the next account's valid image.
$effect(() => {
src
failed = false
})
</script>
{#snippet image()}
src/components/common/Pager.svelte
+3
View File
@@ -28,6 +28,9 @@
<p class="error-note" role="alert">
<strong class="error-note-title">Couldn’t load this list.</strong>
{feed.error}
<button type="button" class="button button--small" onclick={() => void feed.reload()}>
Try again
</button>
</p>
{/if}
src/components/people/PersonRow.svelte
+4 -8
View File
@@ -4,7 +4,8 @@
import { displayNameOf, formatCount, fullHandle, profilePath } from '$lib/util/profile'
import { renderDisplayName } from '$lib/util/html'
import { relativeTime } from '$lib/util/time'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import Avatar from '../common/Avatar.svelte'
import RichText from '../common/RichText.svelte'
interface Props {
@@ -15,18 +16,13 @@
let { account, actions }: Props = $props()
const { session } = useAppServices()
const name = $derived(renderDisplayName(displayNameOf(account), account.emojis))
</script>
<li class="person-row" data-account={account.acct} data-bot={account.bot ? 'true' : 'false'}>
<a href={profilePath(account)} class="person-row-photo-link">
<img
class="person-row-photo"
src={account.avatar_static || account.avatar}
alt=""
loading="lazy"
decoding="async"
/>
<Avatar {account} plain class="person-row-photo" />
</a>
<div class="person-row-body">
src/components/profile/ContactBox.svelte
+8 -6
View File
@@ -7,8 +7,7 @@
* rather than disappearing, so the box keeps its shape.
*/
import type { Account, Relationship } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { blockAccount, followAccount, unblockAccount, unfollowAccount } from '$lib/api/endpoints'
import { useAppServices } from '$lib/app-services'
import { displayNameOf } from '$lib/util/profile'
import Module from '../common/Module.svelte'
@@ -20,6 +19,7 @@
let { account, relationship, onrelationship }: Props = $props()
const { endpoints, session } = useAppServices()
let busy = $state(false)
let error = $state<string | null>(null)
@@ -56,17 +56,19 @@
function toggleFollow(): void {
if (blocking) {
void run(() => unblockAccount(session.api, account.id))
void run(() => endpoints.unblockAccount(session.api, account.id))
} else if (following || requested) {
void run(() => unfollowAccount(session.api, account.id))
void run(() => endpoints.unfollowAccount(session.api, account.id))
} else {
void run(() => followAccount(session.api, account.id))
void run(() => endpoints.followAccount(session.api, account.id))
}
}
function toggleBlock(): void {
void run(() =>
blocking ? unblockAccount(session.api, account.id) : blockAccount(session.api, account.id),
blocking
? endpoints.unblockAccount(session.api, account.id)
: endpoints.blockAccount(session.api, account.id),
)
}
</script>
src/components/profile/DetailsTable.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
<Module {title} flush>
<table class="data-table details-table">
<tbody>
{#each fields as field (field.name)}
{#each fields as field, index (`${field.name}:${index}`)}
<tr class="details-row" data-verified={field.verified ? 'true' : 'false'}>
<th class="data-table-label details-label" scope="row">{field.name}</th>
<td class="data-table-value details-value" data-verified={field.verified ? 'true' : 'false'}>
src/components/profile/FriendSpace.svelte
+2 -7
View File
@@ -9,6 +9,7 @@
import type { Account } from '$lib/api/types'
import { displayNameOf, formatCount, profilePath } from '$lib/util/profile'
import Module from '../common/Module.svelte'
import Avatar from '../common/Avatar.svelte'
interface Props {
title: string
@@ -66,13 +67,7 @@
<li class="friend-card" data-account={friend.acct}>
<a class="friend-card-link" href={profilePath(friend)}>
<span class="friend-card-name">{displayNameOf(friend)}</span>
<img
class="friend-card-photo"
src={friend.avatar_static || friend.avatar}
alt=""
loading="lazy"
decoding="async"
/>
<Avatar account={friend} plain size="friend" class="friend-card-photo" />
</a>
</li>
{/each}
src/components/profile/InterestsTable.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
<Module {title} flush>
<table class="data-table interests-table">
<tbody>
{#each interests as entry (entry.row)}
{#each interests as entry, index (`${entry.row}:${index}`)}
<tr class="interests-row" data-row={entry.row.toLowerCase()}>
<th class="data-table-label interests-label" scope="row">{entry.row}</th>
<td class="data-table-value interests-value">
src/components/profile/ProfileIdentity.svelte
+2 -1
View File
@@ -12,7 +12,7 @@
import { displayNameOf, fullHandle } from '$lib/util/profile'
import { renderDisplayName } from '$lib/util/html'
import { relativeTime, shortDate, yearsSince } from '$lib/util/time'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
interface Props {
profile: ProfileView
@@ -20,6 +20,7 @@
let { profile }: Props = $props()
const { session } = useAppServices()
const account = $derived(profile.account)
const name = $derived(renderDisplayName(displayNameOf(account), account.emojis))
const handle = $derived(fullHandle(account, session.host))
src/components/profile/ProfileTables.test.ts
+32
View File
@@ -0,0 +1,32 @@
import { render } from '@testing-library/svelte'
import { describe, expect, it } from 'vitest'
import DetailsTable from './DetailsTable.svelte'
import InterestsTable from './InterestsTable.svelte'
describe('profile tables', () => {
it('renders duplicate interest aliases without duplicate keyed-each failures', () => {
const view = render(InterestsTable, {
title: 'Interests',
interests: [
{ row: 'Music', value: 'Synthpop' },
{ row: 'Music', value: 'Shoegaze' },
],
})
expect(view.getByText('Synthpop')).toBeInTheDocument()
expect(view.getByText('Shoegaze')).toBeInTheDocument()
})
it('renders repeated free-form field names', () => {
const view = render(DetailsTable, {
title: 'Details',
fields: [
{ name: 'Website', value: 'One', verified: false },
{ name: 'Website', value: 'Two', verified: true },
],
})
expect(view.getByText('One')).toBeInTheDocument()
expect(view.getByText('Two')).toBeInTheDocument()
})
})
src/lib/app-services.ts
+84
View File
@@ -0,0 +1,84 @@
/**
* Runtime dependencies used by Svelte components.
*
* Components read these through context instead of importing backend functions
* and global stores directly. Production gets the real implementations by
* default; tests can replace only the pieces they exercise.
*/
import { getContext } from 'svelte'
import type { ApiClient } from './api/client'
import type { CredentialAccount, InstanceInfo } from './api/types'
import * as endpointImplementations from './api/endpoints'
import { router as defaultRouter, type RouteMatch } from './router.svelte'
import { session as defaultSession } from './stores/session.svelte'
import { theme as defaultTheme } from './stores/theme.svelte'
export interface SessionService {
host: string
token: string | null
me: CredentialAccount | null
instance: InstanceInfo | null
loading: boolean
error: string | null
readonly api: ApiClient
readonly signedIn: boolean
readonly connected: boolean
restore(): Promise<string | null>
connect(host: string): Promise<void>
login(host: string, returnTo?: string): Promise<void>
logout(): Promise<void>
disconnect(): void
}
export interface RouterService {
current: RouteMatch
go(to: string): void
replace(to: string): void
}
export interface ThemeService {
viewerCss: string
allowProfileCss: boolean
setViewerCss(css: string): void
setAllowProfileCss(allow: boolean): void
applyProfileCss(css: string | null | undefined): void
clearProfileCss(): void
}
export interface AppServices {
session: SessionService
router: RouterService
theme: ThemeService
endpoints: typeof endpointImplementations
}
export const APP_SERVICES = Symbol('plspace.app-services')
export const defaultAppServices: AppServices = {
session: defaultSession,
router: defaultRouter,
theme: defaultTheme,
endpoints: endpointImplementations,
}
/** Read dependencies supplied by a parent/test, falling back to production. */
export function useAppServices(): AppServices {
return getContext<AppServices | undefined>(APP_SERVICES) ?? defaultAppServices
}
export interface AppServiceOverrides {
session?: SessionService
router?: RouterService
theme?: ThemeService
endpoints?: Partial<typeof endpointImplementations>
}
/** Build a complete service object from small test doubles. */
export function createAppServices(overrides: AppServiceOverrides = {}): AppServices {
return {
session: overrides.session ?? defaultAppServices.session,
router: overrides.router ?? defaultAppServices.router,
theme: overrides.theme ?? defaultAppServices.theme,
endpoints: { ...defaultAppServices.endpoints, ...overrides.endpoints },
}
}
src/lib/router.svelte.ts
+6 -1
View File
@@ -56,7 +56,12 @@ function matchPattern(pattern: string, path: string): Record<string, string> | n
if (prefixed) {
const [, prefix, name] = prefixed
if (prefix && !actual.startsWith(prefix)) return null
const value = decodeURIComponent(actual.slice(prefix.length))
let value: string
try {
value = decodeURIComponent(actual.slice(prefix.length))
} catch {
return null
}
if (!value) return null
params[name.slice(1)] = value
continue
src/lib/router.test.ts
+13
View File
@@ -0,0 +1,13 @@
import { describe, expect, it } from 'vitest'
import { parseHash } from './router.svelte'
describe('parseHash', () => {
it('decodes valid route parameters', () => {
expect(parseHash('#/@alice%40remote.test').params.acct).toBe('alice@remote.test')
})
it('treats malformed percent escapes as not found', () => {
expect(() => parseHash('#/@broken%ZZ')).not.toThrow()
expect(parseHash('#/@broken%ZZ').name).toBe('notfound')
})
})
src/routes/Browse.svelte
+4 -4
View File
@@ -8,13 +8,13 @@
*/
import { untrack } from 'svelte'
import type { Account } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import { Feed } from '$lib/stores/feed.svelte'
import { fetchDirectory, instanceDomain } from '$lib/api/endpoints'
import { instanceDomain } from '$lib/api/endpoints'
import Module from '$components/common/Module.svelte'
import PersonList from '$components/people/PersonList.svelte'
import { router } from '$lib/router.svelte'
const { endpoints, router, session } = useAppServices()
let order = $state<'active' | 'new'>('active')
let localOnly = $state(true)
@@ -35,7 +35,7 @@
feed = new Feed<Account>(async (cursor) => {
if (!cursor.max_id) offset = 0
const limit = cursor.limit ?? 20
const items = await fetchDirectory(session.api, {
const items = await endpoints.fetchDirectory(session.api, {
offset,
limit,
order: currentOrder,
src/routes/Compose.svelte
+11 -8
View File
@@ -1,7 +1,6 @@
<script lang="ts">
/** A full-page composer, reachable from the nav and from "Send Message". */
import { session } from '$lib/stores/session.svelte'
import { router } from '$lib/router.svelte'
import { useAppServices } from '$lib/app-services'
import Module from '$components/common/Module.svelte'
import Composer from '$components/blog/Composer.svelte'
@@ -12,6 +11,7 @@
let { to }: Props = $props()
const { router, session } = useAppServices()
const prefill = $derived(to ? `@${to.replace(/^@/, '')} ` : '')
</script>
@@ -26,12 +26,15 @@
<div class="layout--single">
<Module title={to ? 'New message' : 'New entry'}>
<Composer
initialText={prefill}
placeholder={to ? 'Say something…' : 'What are you up to?'}
submitLabel={to ? 'Send' : 'Post Entry'}
onposted={(status) => router.go(`#/blog/${status.id}`)}
/>
{#key to}
<Composer
initialText={prefill}
initialVisibility={to ? 'direct' : 'public'}
placeholder={to ? 'Say something…' : 'What are you up to?'}
submitLabel={to ? 'Send' : 'Post Entry'}
onposted={(status) => router.go(`#/blog/${status.id}`)}
/>
{/key}
</Module>
{#if !session.signedIn}
src/routes/Compose.test.ts
+25
View File
@@ -0,0 +1,25 @@
import { render } from '@testing-library/svelte'
import { describe, expect, it } from 'vitest'
import { APP_SERVICES } from '$lib/app-services'
import { account, session, testServices } from '$test/fixtures'
import Compose from './Compose.svelte'
describe('Compose route', () => {
it('resets addressing and defaults to direct when the recipient changes', async () => {
const services = testServices({
session: session({ token: 'token', me: account(), signedIn: true }),
})
const view = render(Compose, {
props: { to: 'alice@example.test' },
context: new Map([[APP_SERVICES, services]]),
})
expect(view.getByRole('textbox', { name: 'Entry text' })).toHaveValue('@alice@example.test ')
expect(view.getByRole('combobox', { name: 'Who can see this' })).toHaveValue('direct')
await view.rerender({ to: 'bob@example.test' })
expect(view.getByRole('textbox', { name: 'Entry text' })).toHaveValue('@bob@example.test ')
expect(view.getByRole('combobox', { name: 'Who can see this' })).toHaveValue('direct')
})
})
src/routes/Home.svelte
+45 -19
View File
@@ -8,11 +8,8 @@
* what its local timeline looks like right now.
*/
import type { Account, Notification, Status } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import {
fetchFollowing,
fetchNotifications,
fetchTimeline,
instanceDomain,
instanceStats,
instanceThumbnail,
@@ -25,6 +22,8 @@
import RichText from '$components/common/RichText.svelte'
import Composer from '$components/blog/Composer.svelte'
const { endpoints, session } = useAppServices()
let friendStatus = $state<Status[]>([])
let bulletins = $state<Status[]>([])
let following = $state<Account[]>([])
@@ -38,6 +37,7 @@
*/
let friendStatusError = $state<string | null>(null)
let bulletinError = $state<string | null>(null)
let loadGeneration = 0
const me = $derived(session.me)
const domain = $derived(session.host ? instanceDomain(session.instance, session.host) : '')
@@ -65,13 +65,18 @@
const host = session.host
const signedIn = session.signedIn
if (!host) {
loadGeneration += 1
loading = false
return
}
void load(signedIn)
const generation = ++loadGeneration
void load(signedIn, host, generation)
return () => {
if (generation === loadGeneration) loadGeneration += 1
}
})
async function load(signedIn: boolean): Promise<void> {
async function load(signedIn: boolean, host = session.host, generation = ++loadGeneration): Promise<void> {
loading = true
error = null
friendStatusError = null
@@ -81,32 +86,49 @@
// Everything here is independent; a failure in one shouldn't blank the page.
const [statusPage, bulletinPage] = await Promise.all([
signedIn
? fetchTimeline(session.api, 'home', { limit: 10 }).catch((cause) => {
friendStatusError = messageOf(cause)
? endpoints.fetchTimeline(session.api, 'home', { limit: 10 }).catch((cause) => {
if (generation === loadGeneration) friendStatusError = messageOf(cause)
return { items: [], links: {} }
})
: Promise.resolve({ items: [], links: {} }),
fetchTimeline(session.api, 'local', { limit: 10 }).catch((cause) => {
bulletinError = messageOf(cause)
endpoints.fetchTimeline(session.api, 'local', { limit: 10 }).catch((cause) => {
if (generation === loadGeneration) bulletinError = messageOf(cause)
return { items: [], links: {} }
}),
])
if (generation !== loadGeneration || session.host !== host) return
friendStatus = statusPage.items
bulletins = bulletinPage.items
if (signedIn && session.me) {
void fetchFollowing(session.api, session.me.id, { limit: 12 })
.then((page) => (following = page.items))
.catch(() => (following = []))
void fetchNotifications(session.api, { limit: 40 })
.then((page) => (notifications = page.items))
.catch(() => (notifications = []))
const accountId = session.me.id
void endpoints
.fetchFollowing(session.api, accountId, { limit: 12 })
.then((page) => {
if (generation === loadGeneration) following = page.items
})
.catch(() => {
if (generation === loadGeneration) following = []
})
void endpoints
.fetchNotifications(session.api, { limit: 40 })
.then((page) => {
if (generation === loadGeneration) notifications = page.items
})
.catch(() => {
if (generation === loadGeneration) notifications = []
})
} else {
following = []
notifications = []
}
} catch (cause) {
error = cause instanceof Error ? cause.message : 'Could not load your home page.'
if (generation === loadGeneration) {
error = cause instanceof Error ? cause.message : 'Could not load your home page.'
}
} finally {
loading = false
if (generation === loadGeneration) loading = false
}
}
@@ -214,7 +236,11 @@
<div class="layout-column layout-column--main">
{#if session.signedIn}
<Module title="Post a bulletin">
<Composer placeholder="What are you up to?" submitLabel="Post" onposted={() => void load(true)} />
<Composer
placeholder="What are you up to?"
submitLabel="Post"
onposted={() => void load(true)}
/>
</Module>
{/if}
src/routes/Login.svelte
+3 -2
View File
@@ -6,11 +6,12 @@
* server and redirects to its consent screen, while "just look around" only
* needs the host and works on any server that allows anonymous API reads.
*/
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import { normalizeHost } from '$lib/api/client'
import { router } from '$lib/router.svelte'
import Module from '$components/common/Module.svelte'
const { router, session } = useAppServices()
let host = $state(session.host)
let busy = $state(false)
let error = $state<string | null>(null)
src/routes/Mail.svelte
+11 -12
View File
@@ -9,19 +9,14 @@
*/
import { untrack } from 'svelte'
import type { Account, Notification } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import { Feed } from '$lib/stores/feed.svelte'
import {
authorizeFollowRequest,
fetchFollowRequests,
fetchNotifications,
rejectFollowRequest,
} from '$lib/api/endpoints'
import { displayNameOf, fullHandle, profilePath } from '$lib/util/profile'
import { toPlainText } from '$lib/util/html'
import { stampDate } from '$lib/util/time'
import Module from '$components/common/Module.svelte'
import Pager from '$components/common/Pager.svelte'
import Avatar from '$components/common/Avatar.svelte'
interface Props {
folder?: string
@@ -29,6 +24,7 @@
let { folder = 'inbox' }: Props = $props()
const { endpoints, session } = useAppServices()
interface Folder {
key: string
label: string
@@ -73,11 +69,11 @@
untrack(() => {
if (key === 'requests') {
requests = new Feed<Account>((cursor) => fetchFollowRequests(session.api, cursor))
requests = new Feed<Account>((cursor) => endpoints.fetchFollowRequests(session.api, cursor))
void requests.reload()
} else {
notifications = new Feed<Notification>((cursor) =>
fetchNotifications(session.api, cursor, types.length > 0 ? types : undefined),
endpoints.fetchNotifications(session.api, cursor, types.length > 0 ? types : undefined),
)
void notifications.reload()
}
@@ -90,7 +86,10 @@
busyIds = { ...busyIds, [account.id]: true }
actionError = null
try {
await (approve ? authorizeFollowRequest : rejectFollowRequest)(session.api, account.id)
await (approve ? endpoints.authorizeFollowRequest : endpoints.rejectFollowRequest)(
session.api,
account.id,
)
requests.remove(account.id)
} catch (cause) {
actionError = cause instanceof Error ? cause.message : 'That didn’t work.'
@@ -156,7 +155,7 @@
<tr class="mail-row" data-kind="follow_request" data-account={account.acct}>
<td class="mail-table-from">
<a href={profilePath(account)}>
<img src={account.avatar_static || account.avatar} alt="" loading="lazy" />
<Avatar {account} plain />
</a>
</td>
<td>
@@ -210,7 +209,7 @@
<td class="mail-table-date">{stampDate(item.created_at)}</td>
<td class="mail-table-from">
<a href={profilePath(item.account)}>
<img src={item.account.avatar_static || item.account.avatar} alt="" loading="lazy" />
<Avatar account={item.account} plain />
</a>
</td>
<td class="mail-table-subject">
src/routes/Profile.svelte
+37 -27
View File
@@ -11,15 +11,9 @@
*/
import { untrack } from 'svelte'
import type { Account, Relationship, Status } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import { Feed } from '$lib/stores/feed.svelte'
import { theme, profileCssFromFields } from '$lib/stores/theme.svelte'
import {
fetchAccountStatuses,
fetchFollowers,
fetchRelationship,
lookupAccount,
} from '$lib/api/endpoints'
import { profileCssFromFields } from '$lib/stores/theme.svelte'
import {
buildProfileView,
displayNameOf,
@@ -46,6 +40,7 @@
let { acct, view = 'profile' }: Props = $props()
const { endpoints, session, theme } = useAppServices()
let account = $state<Account | null>(null)
let relationship = $state<Relationship | null>(null)
let loading = $state(true)
@@ -53,6 +48,7 @@
let friends = $state<Account[]>([])
let friendsLoading = $state(false)
let loadGeneration = 0
// Recreated whenever the account changes, so the feed never shows one
// person's entries under another's name.
@@ -77,20 +73,32 @@
const host = session.host
if (!host) return
untrack(() => void load(handle, currentView))
const generation = ++loadGeneration
theme.clearProfileCss()
untrack(() => void load(handle, currentView, host, generation))
return () => {
if (generation === loadGeneration) loadGeneration += 1
theme.clearProfileCss()
}
})
async function load(handle: string, currentView: Props['view']): Promise<void> {
async function load(
handle: string,
currentView: Props['view'],
host: string,
generation: number,
): Promise<void> {
loading = true
error = null
account = null
relationship = null
friends = []
friendsLoading = false
try {
const found = await lookupAccount(session.api, handle)
const found = await endpoints.lookupAccount(session.api, handle)
// A newer navigation won the race.
if (acct !== handle) return
if (generation !== loadGeneration || acct !== handle || session.host !== host) return
account = found
document.title = `${displayNameOf(found)} | plspace`
@@ -99,7 +107,7 @@
entries = new Feed<Status>(
(cursor) =>
fetchAccountStatuses(session.api, found.id, cursor, {
endpoints.fetchAccountStatuses(session.api, found.id, cursor, {
// The profile page mirrors "Latest Blog Entries": top-level posts.
exclude_replies: currentView !== 'blog',
}),
@@ -107,43 +115,45 @@
)
void entries.reload()
void loadFriends(found, currentView)
void loadRelationship(found)
void loadFriends(found, currentView, generation)
void loadRelationship(found, generation)
} catch (cause) {
if (acct !== handle) return
if (generation !== loadGeneration) return
error = cause instanceof Error ? cause.message : 'Could not load that profile.'
} finally {
if (acct === handle) loading = false
if (generation === loadGeneration) loading = false
}
}
async function loadFriends(target: Account, currentView: Props['view']): Promise<void> {
async function loadFriends(
target: Account,
currentView: Props['view'],
generation: number,
): Promise<void> {
if (followersHidden(target)) return
friendsLoading = true
try {
const page = await fetchFollowers(session.api, target.id, {
const page = await endpoints.fetchFollowers(session.api, target.id, {
limit: currentView === 'friends' ? 40 : FRIEND_PREVIEW,
})
if (account?.id === target.id) friends = page.items
if (generation === loadGeneration && account?.id === target.id) friends = page.items
} catch {
// Hidden or unavailable follower lists are normal; the count still shows.
if (account?.id === target.id) friends = []
if (generation === loadGeneration && account?.id === target.id) friends = []
} finally {
friendsLoading = false
if (generation === loadGeneration) friendsLoading = false
}
}
async function loadRelationship(target: Account): Promise<void> {
async function loadRelationship(target: Account, generation: number): Promise<void> {
try {
const found = await fetchRelationship(session.api, target.id)
if (account?.id === target.id) relationship = found
const found = await endpoints.fetchRelationship(session.api, target.id)
if (generation === loadGeneration && account?.id === target.id) relationship = found
} catch {
/* relationships need auth; absence is fine */
}
}
$effect(() => () => theme.clearProfileCss())
/** One line of an entry, for the headline list on the profile page. */
function teaserFor(entry: Status): string {
const text = toPlainText(entry.spoiler_text || entry.content)
src/routes/Profile.test.ts
+27
View File
@@ -0,0 +1,27 @@
import { act, render } from '@testing-library/svelte'
import { describe, expect, it, vi } from 'vitest'
import { APP_SERVICES } from '$lib/app-services'
import type { Account } from '$lib/api/types'
import { account, deferred, session, testServices, theme } from '$test/fixtures'
import Profile from './Profile.svelte'
describe('Profile', () => {
it('does not apply profile CSS after it has unmounted', async () => {
const lookup = deferred<Account>()
const applyProfileCss = vi.fn()
const services = testServices({
session: session(),
theme: theme({ applyProfileCss }),
endpoints: { lookupAccount: vi.fn(() => lookup.promise) },
})
const view = render(Profile, {
props: { acct: 'alice' },
context: new Map([[APP_SERVICES, services]]),
})
view.unmount()
await act(() => lookup.resolve(account({ fields: [{ name: 'css', value: '.x { color: red }' }] })))
expect(applyProfileCss).not.toHaveBeenCalled()
})
})
src/routes/Search.svelte
+17 -7
View File
@@ -7,9 +7,8 @@
*/
import { untrack } from 'svelte'
import type { SearchResults } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { search } from '$lib/api/endpoints'
import { router, routeTo } from '$lib/router.svelte'
import { useAppServices } from '$lib/app-services'
import { routeTo } from '$lib/router.svelte'
import Module from '$components/common/Module.svelte'
import PersonRow from '$components/people/PersonRow.svelte'
import BlogEntry from '$components/blog/BlogEntry.svelte'
@@ -21,32 +20,43 @@
let { q = '' }: Props = $props()
const { endpoints, router, session } = useAppServices()
// Seeded from the route, then kept in sync by the effect below.
let input = $state(untrack(() => q))
let results = $state<SearchResults | null>(null)
let loading = $state(false)
let error = $state<string | null>(null)
let generation = 0
$effect(() => {
const query = q
input = query
if (!query || !session.host) {
generation += 1
results = null
loading = false
error = null
return
}
untrack(() => void run(query))
return () => {
generation += 1
}
})
async function run(query: string): Promise<void> {
const currentGeneration = ++generation
loading = true
error = null
try {
const found = await search(session.api, query, { limit: 20 })
if (q === query) results = found
const found = await endpoints.search(session.api, query, { limit: 20 })
if (currentGeneration === generation) results = found
} catch (cause) {
if (q === query) error = cause instanceof Error ? cause.message : 'Search failed.'
if (currentGeneration === generation) {
error = cause instanceof Error ? cause.message : 'Search failed.'
}
} finally {
if (q === query) loading = false
if (currentGeneration === generation) loading = false
}
}
src/routes/Search.test.ts
+26
View File
@@ -0,0 +1,26 @@
import { render } from '@testing-library/svelte'
import { describe, expect, it, vi } from 'vitest'
import { APP_SERVICES } from '$lib/app-services'
import type { SearchResults } from '$lib/api/types'
import { deferred, session, testServices } from '$test/fixtures'
import Search from './Search.svelte'
describe('Search', () => {
it('returns to the empty state when a pending query is cleared', async () => {
const pending = deferred<SearchResults>()
const services = testServices({
session: session(),
endpoints: { search: vi.fn(() => pending.promise) },
})
const view = render(Search, {
props: { q: 'alice' },
context: new Map([[APP_SERVICES, services]]),
})
expect(await view.findByText('Searching…')).toBeInTheDocument()
await view.rerender({ q: '' })
expect(view.getByText('Enter something to search for.')).toBeInTheDocument()
expect(view.queryByText('Searching…')).not.toBeInTheDocument()
})
})
src/routes/Settings.svelte
+4 -2
View File
@@ -7,13 +7,15 @@
* locally), and whether the CSS other people publish on their profiles is
* honoured when you visit them.
*/
import { session } from '$lib/stores/session.svelte'
import { theme, CSS_FIELD_NAMES, PROFILE_SCOPE } from '$lib/stores/theme.svelte'
import { useAppServices } from '$lib/app-services'
import { CSS_FIELD_NAMES, PROFILE_SCOPE } from '$lib/stores/theme.svelte'
import { PRESETS, EXAMPLE_CSS } from '$lib/themes'
import { instanceDomain } from '$lib/api/endpoints'
import { displayNameOf, profilePath } from '$lib/util/profile'
import Module from '$components/common/Module.svelte'
const { session, theme } = useAppServices()
let draft = $state(theme.viewerCss)
let saved = $state(false)
src/routes/StatusPage.svelte
+14 -9
View File
@@ -8,8 +8,7 @@
*/
import { untrack } from 'svelte'
import type { Status } from '$lib/api/types'
import { session } from '$lib/stores/session.svelte'
import { fetchContext, fetchStatus } from '$lib/api/endpoints'
import { useAppServices } from '$lib/app-services'
import { displayNameOf, profilePath } from '$lib/util/profile'
import { stampDate, isoDate } from '$lib/util/time'
import { toPlainText } from '$lib/util/html'
@@ -25,11 +24,13 @@
let { id }: Props = $props()
const { endpoints, session } = useAppServices()
let status = $state<Status | null>(null)
let ancestors = $state<Status[]>([])
let descendants = $state<Status[]>([])
let loading = $state(true)
let error = $state<string | null>(null)
let loadGeneration = 0
interface ThreadedReply {
status: Status
@@ -80,28 +81,32 @@
const currentId = id
const host = session.host
if (!host) return
untrack(() => void load(currentId))
const generation = ++loadGeneration
untrack(() => void load(currentId, host, generation))
return () => {
if (generation === loadGeneration) loadGeneration += 1
}
})
async function load(currentId: string): Promise<void> {
async function load(currentId: string, host: string, generation: number): Promise<void> {
loading = true
error = null
try {
const [entry, context] = await Promise.all([
fetchStatus(session.api, currentId),
fetchContext(session.api, currentId).catch(() => ({ ancestors: [], descendants: [] })),
endpoints.fetchStatus(session.api, currentId),
endpoints.fetchContext(session.api, currentId).catch(() => ({ ancestors: [], descendants: [] })),
])
if (id !== currentId) return
if (generation !== loadGeneration || id !== currentId || session.host !== host) return
status = entry
ancestors = context.ancestors
descendants = context.descendants
document.title = `${toPlainText(entry.content).slice(0, 60)} | plspace`
} catch (cause) {
if (id !== currentId) return
if (generation !== loadGeneration) return
error = cause instanceof Error ? cause.message : 'Could not load that entry.'
} finally {
if (id === currentId) loading = false
if (generation === loadGeneration) loading = false
}
}
src/routes/Timeline.svelte
+4 -3
View File
@@ -6,9 +6,9 @@
import { untrack } from 'svelte'
import type { Status } from '$lib/api/types'
import type { TimelineKind } from '$lib/api/endpoints'
import { session } from '$lib/stores/session.svelte'
import { useAppServices } from '$lib/app-services'
import { Feed } from '$lib/stores/feed.svelte'
import { fetchTimeline, instanceDomain } from '$lib/api/endpoints'
import { instanceDomain } from '$lib/api/endpoints'
import Module from '$components/common/Module.svelte'
import TabBar from '$components/common/TabBar.svelte'
import BlogList from '$components/blog/BlogList.svelte'
@@ -21,6 +21,7 @@
let { kind, tag }: Props = $props()
const { endpoints, session } = useAppServices()
let feed = $state<Feed<Status>>(new Feed<Status>(async () => ({ items: [], links: {} })))
const domain = $derived(session.host ? instanceDomain(session.instance, session.host) : '')
@@ -54,7 +55,7 @@
// Home needs a token; fall back rather than showing a 401.
const resolved: TimelineKind = currentKind === 'home' && !authed ? 'local' : currentKind
feed = new Feed<Status>((cursor) =>
fetchTimeline(session.api, resolved, cursor, { tag: currentTag }),
endpoints.fetchTimeline(session.api, resolved, cursor, { tag: currentTag }),
)
void feed.reload()
document.title = `${title} | plspace`
src/test/README.md
+21
View File
@@ -0,0 +1,21 @@
# Component tests
Components obtain session, router, theme, and endpoint dependencies from
`$lib/app-services`. Production falls back to the real services. Tests render a
component with a context map and replace only the dependencies involved:
```ts
const services = testServices({
session: session({ signedIn: true }),
endpoints: { search: vi.fn().mockResolvedValue(results) },
})
render(Search, {
props: { q: 'alice' },
context: new Map([[APP_SERVICES, services]]),
})
```
This keeps component tests deterministic and prevents accidental network
requests without requiring module-level mocks. Any endpoint that was not
explicitly supplied throws immediately with its name.
src/test/fixtures.ts
+126
View File
@@ -0,0 +1,126 @@
import { ApiClient } from '$lib/api/client'
import type { Account, Status } from '$lib/api/types'
import {
createAppServices,
type AppServices,
type AppServiceOverrides,
type SessionService,
type ThemeService,
} from '$lib/app-services'
export function account(overrides: Partial<Account> = {}): Account {
return {
id: 'account-1',
username: 'alice',
acct: 'alice',
display_name: 'Alice',
note: '',
url: 'https://example.test/@alice',
avatar: '',
avatar_static: '',
header: '',
header_static: '',
locked: false,
created_at: '2020-01-01T00:00:00.000Z',
statuses_count: 0,
followers_count: 0,
following_count: 0,
fields: [],
emojis: [],
...overrides,
}
}
export function status(overrides: Partial<Status> = {}): Status {
return {
id: 'status-1',
uri: 'https://example.test/statuses/1',
created_at: '2026-01-01T00:00:00.000Z',
account: account(),
content: '<p>Hello</p>',
visibility: 'public',
sensitive: false,
spoiler_text: '',
in_reply_to_id: null,
in_reply_to_account_id: null,
replies_count: 0,
reblogs_count: 0,
favourites_count: 0,
media_attachments: [],
mentions: [],
tags: [],
emojis: [],
reblog: null,
...overrides,
}
}
export function session(overrides: Partial<SessionService> = {}): SessionService {
const host = overrides.host ?? 'example.test'
return {
host,
token: null,
me: null,
instance: null,
loading: false,
error: null,
api: new ApiClient(host),
signedIn: false,
connected: Boolean(host),
restore: async () => null,
connect: async () => {},
login: async () => {},
logout: async () => {},
disconnect: () => {},
...overrides,
}
}
export function theme(overrides: Partial<ThemeService> = {}): ThemeService {
return {
viewerCss: '',
allowProfileCss: true,
setViewerCss: () => {},
setAllowProfileCss: () => {},
applyProfileCss: () => {},
clearProfileCss: () => {},
...overrides,
}
}
/**
* Test services fail fast on any endpoint that was not explicitly faked. This
* turns an accidental network request into a local, descriptive test failure.
*/
export function testServices(overrides: AppServiceOverrides = {}): AppServices {
const services = createAppServices({
...overrides,
session: overrides.session ?? session(),
})
const configured = overrides.endpoints ?? {}
services.endpoints = new Proxy(services.endpoints, {
get(target, property, receiver) {
if (property in configured) return Reflect.get(target, property, receiver)
const value = Reflect.get(target, property, receiver)
if (typeof value !== 'function') return value
return () => {
throw new Error(`Test attempted an unfaked endpoint: ${String(property)}`)
}
},
})
return services
}
export function deferred<T>(): {
promise: Promise<T>
resolve(value: T): void
reject(cause: unknown): void
} {
let resolve!: (value: T) => void
let reject!: (cause: unknown) => void
const promise = new Promise<T>((res, rej) => {
resolve = res
reject = rej
})
return { promise, resolve, reject }
}
src/test/setup.ts
+22
View File
@@ -0,0 +1,22 @@
import '@testing-library/jest-dom/vitest'
const values = new Map<string, string>()
const memoryStorage: Storage = {
get length() {
return values.size
},
clear: () => values.clear(),
getItem: (key) => values.get(key) ?? null,
key: (index) => [...values.keys()][index] ?? null,
removeItem: (key) => {
values.delete(key)
},
setItem: (key, value) => {
values.set(key, String(value))
},
}
Object.defineProperty(globalThis, 'localStorage', {
configurable: true,
value: memoryStorage,
})
tsconfig.json
+2 -1
View File
@@ -20,7 +20,8 @@
"paths": {
"$lib/*": ["src/lib/*"],
"$components/*": ["src/components/*"],
"$routes/*": ["src/routes/*"]
"$routes/*": ["src/routes/*"],
"$test/*": ["src/test/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "vite.config.ts"],
vite.config.ts
+8 -2
View File
@@ -1,21 +1,27 @@
import { defineConfig } from 'vite'
import { defineConfig } from 'vitest/config'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { svelteTesting } from '@testing-library/svelte/vite'
import { fileURLToPath, URL } from 'node:url'
// Fully static output: the app talks to a Mastodon/Pleroma server directly from
// the browser, so `dist/` can be dropped on any static host (or file://-ish CDN).
export default defineConfig({
base: './',
plugins: [svelte()],
plugins: [svelte(), svelteTesting()],
resolve: {
alias: {
$lib: fileURLToPath(new URL('./src/lib', import.meta.url)),
$components: fileURLToPath(new URL('./src/components', import.meta.url)),
$routes: fileURLToPath(new URL('./src/routes', import.meta.url)),
$test: fileURLToPath(new URL('./src/test', import.meta.url)),
},
},
build: {
target: 'es2022',
cssCodeSplit: false,
},
test: {
environment: 'jsdom',
setupFiles: ['./src/test/setup.ts'],
},
})