Shows how to get repo export and walk it in TypeScript
walktherepo.wisp.place
Download and show status
+31
-10
+31
-10
src/lib/RepoStats.svelte
+31
-10
src/lib/RepoStats.svelte
···
1
1
<script lang="ts">
2
-
import { Client } from '@atproto/lex'
3
-
import * as com from '../lexicons/com'
4
2
const { did, pdsUrl } = $props();
5
3
let loading = $state(true)
4
+
let downloadedBytes = $state(0)
5
+
let downloadedMB = $derived((downloadedBytes / (1024 * 1024)).toFixed(2))
6
+
let error: string | null = $state(null)
7
+
6
8
7
9
const getRepoStats = async () => {
10
+
const endPoint = `${pdsUrl}/xrpc/com.atproto.sync.getRepo?did=${did}`
11
+
12
+
try {
13
+
const response = await fetch(endPoint)
14
+
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
8
15
9
-
const endPoint = `${pdsUrl}/xrpc/com.atproto.sync.getRepo`
16
+
const reader = response.body?.getReader()
17
+
if (!reader) throw new Error('ReadableStream not supported')
10
18
11
-
const client = new Client( pdsUrl);
12
-
const response = await client.call(com.atproto.sync.getRepo, {
13
-
did: did,
14
-
});
15
-
console.log(response);
19
+
while (true) {
20
+
const { done, value } = await reader.read()
21
+
if (done) break
22
+
downloadedBytes += value.length
23
+
}
24
+
loading = false
25
+
} catch (err) {
26
+
console.error('Error fetching repo stats:', error)
27
+
error = err.message
28
+
loading = false
29
+
}
16
30
}
17
31
32
+
$effect(() => {
33
+
getRepoStats()
34
+
})
35
+
18
36
</script>
19
37
20
38
<div>
39
+
{#if error}
40
+
<p style="color: red">{error}</p>
41
+
{/if}
21
42
{#if loading}
22
-
Loading...
43
+
Loading... ({downloadedMB} MB downloaded)
23
44
{:else }
24
45
<ol>
25
-
46
+
<li>Total downloaded: {downloadedMB} MB</li>
26
47
</ol>
27
48
{/if}
28
49
</div>