setup types, more intelligent list component implementation example

.gitignore

@@ -1,5 +1,9 @@
 node_modules
 
+# Types
+/util/lexicons
+/src/types
+
 # Output
 .output
 .vercel

bun.lock

@@ -6,6 +6,7 @@
       "devDependencies": {
         "@atcute/client": "^2.0.9",
         "@atcute/identity": "^0.1.2",
+        "@atcute/lex-cli": "^1.0.4",
         "@eslint/compat": "^1.2.5",
         "@eslint/js": "^9.18.0",
         "@iconify-json/mynaui": "^1.2.9",
@@ -43,6 +44,8 @@
 
     "@atcute/identity": ["@atcute/identity@0.1.2", "", { "dependencies": { "@badrap/valita": "^0.4.2" } }, "sha512-YmRCXm/Z4lnJz4RItnr5e6NiTtQaCRb6xIEuaqRs/6wxKHMVEzFY8ROC24L7MO5qiAgIU6GsbWv67YmSo6Y2tQ=="],
 
+    "@atcute/lex-cli": ["@atcute/lex-cli@1.0.4", "", { "dependencies": { "@badrap/valita": "^0.3.11", "@externdefs/collider": "^0.1.0", "picocolors": "^1.1.1", "prettier": "^3.3.3" }, "bin": { "lex-cli": "cli.mjs" } }, "sha512-8mRnjjK+b6Z4wmfFRUYYPswVZhT7PYZBHLMCFNiI1AdrZqaJ1CmoiExYjkVGQkixZURRIaxr49KGBV2iSMF/pQ=="],
+
     "@badrap/valita": ["@badrap/valita@0.4.3", "", {}, "sha512-C9iZSrVlTb610dxZ2oatK5LwefaHv0Q9eYfVDH3co846x7WinhCfc8jCDTE55yM8WxlmOfX2ckKmsSr7KzZ/gg=="],
 
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.1", "", { "os": "aix", "cpu": "ppc64" }, "sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ=="],
@@ -115,6 +118,8 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.7", "", { "dependencies": { "@eslint/core": "^0.12.0", "levn": "^0.4.1" } }, "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g=="],
 
+    "@externdefs/collider": ["@externdefs/collider@0.1.0", "", { "peerDependencies": { "@badrap/valita": "^0.3.9" } }, "sha512-vmFJEKHhftREiuhhK3WIMKk6bGfm7kM9c5HeVElFCbtqajXqCfwY/GR3f1G0qYWCvbtcoBhIZ2O8ia3A2/pjkw=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -587,10 +592,14 @@
 
     "zimmerframe": ["zimmerframe@1.1.2", "", {}, "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="],
 
+    "@atcute/lex-cli/@badrap/valita": ["@badrap/valita@0.3.16", "", {}, "sha512-slP2blSd6A+xUBgGf+wW6adGd72ojBLxemU0jXQ0fXQcsZWYQ70wTLTJggs6+oxcAqN/bvYA3Ops8SqR2Imyaw=="],
+
     "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
 
+    "@externdefs/collider/@badrap/valita": ["@badrap/valita@0.3.16", "", {}, "sha512-slP2blSd6A+xUBgGf+wW6adGd72ojBLxemU0jXQ0fXQcsZWYQ70wTLTJggs6+oxcAqN/bvYA3Ops8SqR2Imyaw=="],
+
     "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
 
     "@iconify/utils/globals": ["globals@15.15.0", "", {}, "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg=="],

package.json

@@ -12,11 +12,13 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
+		"lint": "prettier --check . && eslint .",
+		"types": "bash ./util/generate-lexicons.sh"
 	},
 	"devDependencies": {
 		"@atcute/client": "^2.0.9",
 		"@atcute/identity": "^0.1.2",
+		"@atcute/lex-cli": "^1.0.4",
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@iconify-json/mynaui": "^1.2.9",

src/lib/components/list.svelte

@@ -1,9 +1,22 @@
-<script>
+<script lang="ts">
-	
+	import type { MeWoachFeedSession } from '@atcute/client/lexicons';
-    export let did;
+	export let sessions: MeWoachFeedSession.Record[] = [];
-    export let rpc;
 </script>
-  
+
-<p>list data: {did}!</p>
+<ul>
-<p>rpc: {rpc != null}</p>
+	{#each sessions as session}
-  
+		<li class="mx-auto mb-2 w-1/3 bg-gray-400 p-4">
+			<div>
+				<a href={'https://pdsls.dev/' + session.content.uri}>{session.label}</a>
+				<p>{session.createdAt}</p>
+				{#if session.participants?.length}
+					{#each session.participants ?? [] as participant}
+						<a href={'/user/' + participant.uri.split('at://')[1]}
+							>{participant.uri.split('at://')[1]}</a
+						>
+					{/each}
+				{/if}
+			</div>
+		</li>
+	{/each}
+</ul>

src/routes/+layout.ts

@@ -7,6 +7,7 @@ export const trailingSlash = 'always';
 export const load: LayoutLoad = async () => {
 	const manager = new CredentialManager({ service: 'https://bsky.social' });
 	const rpc = new XRPC({ handler: manager });
+	await manager.login({ identifier: 'm.woach.me', password: 'c5sj-oyqa-uxhx-ju45' });
 	return {
 		rpc
 	};

src/routes/user/[handle]/+page.svelte

@@ -9,6 +9,6 @@
 <h1>{data.userData.handle}</h1>
 <h2>{data.userData.did}</h2>
 
-<List did={data.userData.did} rpc={data.rpc}/>
+<List sessions={data.userData.sessions}/>
 
 

src/routes/user/[handle]/+page.ts

@@ -1,3 +1,4 @@
+import type { ComAtprotoRepoListRecords, MeWoachFeedSession } from '@atcute/client/lexicons'; // Import the type
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ parent, params }) => {
@@ -9,11 +10,24 @@ export const load: PageLoad = async ({ parent, params }) => {
 		}
 	});
 
+	const {
+		data: { records }
+	} = await rpc.get('com.atproto.repo.listRecords', {
+		params: {
+			repo: userData.did,
+			collection: 'me.woach.feed.session'
+		}
+	});
+
+	const sessionsValues: MeWoachFeedSession.Record[] = records.map(
+		(record: ComAtprotoRepoListRecords.Record) => record.value as MeWoachFeedSession.Record
+	);
+
 	return {
 		userData: {
 			handle: params.handle,
-			did: userData.did
+			did: userData.did,
-		},
+			sessions: sessionsValues
-		rpc
+		}
 	};
 };

tsconfig.json

@@ -1,6 +1,7 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
+		"typeRoots": ["node_modules/@types", "src/types"],
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,
@@ -9,7 +10,7 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files

util/generate-lexicons.sh

@@ -0,0 +1,7 @@
+#!bin/bash
+
+
+pnpm exec lex-cli generate \
+	./util/lexicons/me/woach/**/*.json \
+	-o ./src/types/lexicons.ts \
+	--description "Contains type declarations for woach.me lexicons"