pdsls.dev
1import { Nsid } from "@atcute/lexicons";
2import { useLocation, useNavigate } from "@solidjs/router";
3import { createEffect, For, Show } from "solid-js";
4import { resolveLexiconAuthority } from "../utils/api.js";
5
6interface LexiconSchema {
7 lexicon: number;
8 id: string;
9 description?: string;
10 defs: {
11 [key: string]: LexiconDef;
12 };
13}
14
15interface LexiconDef {
16 type: string;
17 description?: string;
18 key?: string;
19 record?: LexiconObject;
20 parameters?: LexiconObject;
21 input?: { encoding: string; schema?: LexiconObject };
22 output?: { encoding: string; schema?: LexiconObject };
23 errors?: Array<{ name: string; description?: string }>;
24 properties?: { [key: string]: LexiconProperty };
25 required?: string[];
26 nullable?: string[];
27 maxLength?: number;
28 minLength?: number;
29 maxGraphemes?: number;
30 minGraphemes?: number;
31 items?: LexiconProperty;
32 refs?: string[];
33 closed?: boolean;
34 enum?: string[];
35 const?: string;
36 default?: any;
37 minimum?: number;
38 maximum?: number;
39 accept?: string[];
40 maxSize?: number;
41 knownValues?: string[];
42 format?: string;
43}
44
45interface LexiconObject {
46 type: string;
47 description?: string;
48 ref?: string;
49 refs?: string[];
50 closed?: boolean;
51 properties?: { [key: string]: LexiconProperty };
52 required?: string[];
53 nullable?: string[];
54}
55
56interface LexiconProperty {
57 type: string;
58 description?: string;
59 ref?: string;
60 refs?: string[];
61 closed?: boolean;
62 format?: string;
63 items?: LexiconProperty;
64 minLength?: number;
65 maxLength?: number;
66 maxGraphemes?: number;
67 minGraphemes?: number;
68 minimum?: number;
69 maximum?: number;
70 enum?: string[];
71 const?: string | boolean | number;
72 default?: any;
73 knownValues?: string[];
74 accept?: string[];
75 maxSize?: number;
76}
77
78const TypeBadge = (props: { type: string; format?: string; refType?: string }) => {
79 const navigate = useNavigate();
80 const displayType =
81 props.refType ? props.refType.replace(/^#/, "")
82 : props.format ? `${props.type}:${props.format}`
83 : props.type;
84
85 const isLocalRef = () => props.refType?.startsWith("#");
86 const isExternalRef = () => props.refType && !props.refType.startsWith("#");
87
88 const handleClick = async () => {
89 if (isLocalRef()) {
90 const defName = props.refType!.slice(1);
91 window.history.replaceState(null, "", `#schema:${defName}`);
92 const element = document.getElementById(`def-${defName}`);
93 if (element) {
94 element.scrollIntoView({ behavior: "instant", block: "start" });
95 }
96 } else if (isExternalRef()) {
97 try {
98 const [nsid, anchor] = props.refType!.split("#");
99 const authority = await resolveLexiconAuthority(nsid as Nsid);
100
101 const hash = anchor ? `#schema:${anchor}` : "#schema";
102 navigate(`/at://${authority}/com.atproto.lexicon.schema/${nsid}${hash}`);
103 } catch (err) {
104 console.error("Failed to resolve lexicon authority:", err);
105 }
106 }
107 };
108
109 return (
110 <>
111 <Show when={props.refType}>
112 <button
113 type="button"
114 onClick={handleClick}
115 class="inline-block cursor-pointer rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 hover:bg-blue-200 hover:underline active:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 dark:active:bg-blue-900/50"
116 >
117 {displayType}
118 </button>
119 </Show>
120 <Show when={!props.refType}>
121 <span class="inline-block rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
122 {displayType}
123 </span>
124 </Show>
125 </>
126 );
127};
128
129const UnionBadges = (props: { refs: string[] }) => (
130 <div class="flex flex-wrap gap-2">
131 <For each={props.refs}>{(refType) => <TypeBadge type="union" refType={refType} />}</For>
132 </div>
133);
134
135const ConstraintsList = (props: { property: LexiconProperty }) => (
136 <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
137 <Show when={props.property.minLength !== undefined}>
138 <span>minLength: {props.property.minLength}</span>
139 </Show>
140 <Show when={props.property.maxLength !== undefined}>
141 <span>maxLength: {props.property.maxLength}</span>
142 </Show>
143 <Show when={props.property.maxGraphemes !== undefined}>
144 <span>maxGraphemes: {props.property.maxGraphemes}</span>
145 </Show>
146 <Show when={props.property.minGraphemes !== undefined}>
147 <span>minGraphemes: {props.property.minGraphemes}</span>
148 </Show>
149 <Show when={props.property.minimum !== undefined}>
150 <span>min: {props.property.minimum}</span>
151 </Show>
152 <Show when={props.property.maximum !== undefined}>
153 <span>max: {props.property.maximum}</span>
154 </Show>
155 <Show when={props.property.maxSize !== undefined}>
156 <span>maxSize: {props.property.maxSize}</span>
157 </Show>
158 <Show when={props.property.accept}>
159 <span>accept: [{props.property.accept!.join(", ")}]</span>
160 </Show>
161 <Show when={props.property.enum}>
162 <span>enum: [{props.property.enum!.join(", ")}]</span>
163 </Show>
164 <Show when={props.property.const}>
165 <span>const: {props.property.const?.toString()}</span>
166 </Show>
167 <Show when={props.property.default !== undefined}>
168 <span>default: {JSON.stringify(props.property.default)}</span>
169 </Show>
170 <Show when={props.property.knownValues}>
171 <span>knownValues: [{props.property.knownValues!.join(", ")}]</span>
172 </Show>
173 <Show when={props.property.closed}>
174 <span>closed: true</span>
175 </Show>
176 </div>
177);
178
179const PropertyRow = (props: {
180 name: string;
181 property: LexiconProperty;
182 required?: boolean;
183 hideNameType?: boolean;
184}) => {
185 const hasConstraints = (property: LexiconProperty) =>
186 property.minLength !== undefined ||
187 property.maxLength !== undefined ||
188 property.maxGraphemes !== undefined ||
189 property.minGraphemes !== undefined ||
190 property.minimum !== undefined ||
191 property.maximum !== undefined ||
192 property.maxSize !== undefined ||
193 property.accept ||
194 property.enum ||
195 property.const ||
196 property.default !== undefined ||
197 property.knownValues ||
198 property.closed;
199
200 return (
201 <div class="flex flex-col gap-2 py-3">
202 <Show when={!props.hideNameType}>
203 <div class="flex flex-wrap items-center gap-2">
204 <span class="font-mono text-sm font-semibold">{props.name}</span>
205 <Show when={!props.property.refs}>
206 <TypeBadge
207 type={props.property.type}
208 format={props.property.format}
209 refType={props.property.ref}
210 />
211 </Show>
212 <Show when={props.property.refs}>
213 <span class="inline-block rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
214 union
215 </span>
216 </Show>
217 <Show when={props.required}>
218 <span class="text-xs font-semibold text-red-500 dark:text-red-400">required</span>
219 </Show>
220 </div>
221 </Show>
222 <Show when={props.property.refs}>
223 <UnionBadges refs={props.property.refs!} />
224 </Show>
225 <Show when={hasConstraints(props.property)}>
226 <ConstraintsList property={props.property} />
227 </Show>
228 <Show when={props.property.items}>
229 <div class="flex flex-col gap-2">
230 <div class="flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400">
231 <span class="font-semibold">items:</span>
232 <Show when={!props.property.items!.refs}>
233 <TypeBadge
234 type={props.property.items!.type}
235 format={props.property.items!.format}
236 refType={props.property.items!.ref}
237 />
238 </Show>
239 <Show when={props.property.items!.refs}>
240 <span class="inline-block rounded bg-blue-100 px-1.5 py-0.5 font-mono text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
241 union
242 </span>
243 </Show>
244 </div>
245 <Show when={props.property.items!.refs}>
246 <UnionBadges refs={props.property.items!.refs!} />
247 </Show>
248 </div>
249 </Show>
250 <Show when={props.property.items && hasConstraints(props.property.items)}>
251 <ConstraintsList property={props.property.items!} />
252 </Show>
253 <Show when={props.property.description && !props.hideNameType}>
254 <p class="text-sm text-neutral-700 dark:text-neutral-300">{props.property.description}</p>
255 </Show>
256 </div>
257 );
258};
259
260const DefSection = (props: { name: string; def: LexiconDef }) => {
261 const defTypeColor = () => {
262 switch (props.def.type) {
263 case "record":
264 return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300";
265 case "query":
266 return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300";
267 case "procedure":
268 return "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300";
269 case "subscription":
270 return "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300";
271 case "object":
272 return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
273 case "token":
274 return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300";
275 default:
276 return "bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300";
277 }
278 };
279
280 const hasDefContent = () =>
281 props.def.refs ||
282 props.def.minLength !== undefined ||
283 props.def.maxLength !== undefined ||
284 props.def.maxGraphemes !== undefined ||
285 props.def.minGraphemes !== undefined ||
286 props.def.minimum !== undefined ||
287 props.def.maximum !== undefined ||
288 props.def.maxSize !== undefined ||
289 props.def.accept ||
290 props.def.enum ||
291 props.def.const ||
292 props.def.default !== undefined ||
293 props.def.closed ||
294 props.def.items ||
295 props.def.knownValues;
296
297 const handleHeaderClick = () => {
298 window.history.replaceState(null, "", `#schema:${props.name}`);
299 const element = document.getElementById(`def-${props.name}`);
300 if (element) {
301 element.scrollIntoView({ behavior: "instant", block: "start" });
302 }
303 };
304
305 return (
306 <div class="flex flex-col gap-3" id={`def-${props.name}`}>
307 <div class="flex items-center gap-2">
308 <button
309 type="button"
310 onClick={handleHeaderClick}
311 class="cursor-pointer text-lg font-semibold hover:underline"
312 >
313 {props.name === "main" ? "Main Definition" : props.name}
314 </button>
315 <span class={`rounded px-2 py-0.5 text-xs font-semibold uppercase ${defTypeColor()}`}>
316 {props.def.type}
317 </span>
318 </div>
319
320 <Show when={props.def.description}>
321 <p class="text-sm text-neutral-700 dark:text-neutral-300">{props.def.description}</p>
322 </Show>
323
324 {/* Record key */}
325 <Show when={props.def.key}>
326 <div>
327 <span class="text-sm font-semibold">Record Key: </span>
328 <span class="font-mono text-sm">{props.def.key}</span>
329 </div>
330 </Show>
331
332 {/* Properties (for record/object types) */}
333 <Show
334 when={Object.keys(props.def.properties || props.def.record?.properties || {}).length > 0}
335 >
336 <div class="flex flex-col gap-2">
337 <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
338 Properties
339 </h4>
340 <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
341 <For each={Object.entries(props.def.properties || props.def.record?.properties || {})}>
342 {([name, property]) => (
343 <PropertyRow
344 name={name}
345 property={property}
346 required={(props.def.required || props.def.record?.required || []).includes(name)}
347 />
348 )}
349 </For>
350 </div>
351 </div>
352 </Show>
353
354 {/* Parameters (for query/procedure) */}
355 <Show
356 when={
357 props.def.parameters?.properties &&
358 Object.keys(props.def.parameters.properties).length > 0
359 }
360 >
361 <div class="flex flex-col gap-2">
362 <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
363 Parameters
364 </h4>
365 <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
366 <For each={Object.entries(props.def.parameters!.properties!)}>
367 {([name, property]) => (
368 <PropertyRow
369 name={name}
370 property={property}
371 required={(props.def.parameters?.required || []).includes(name)}
372 />
373 )}
374 </For>
375 </div>
376 </div>
377 </Show>
378
379 {/* Input */}
380 <Show when={props.def.input}>
381 <div class="flex flex-col gap-2">
382 <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
383 Input
384 </h4>
385 <div class="flex flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50/50 p-3 dark:border-neutral-700 dark:bg-neutral-800/30">
386 <div class="text-sm">
387 <span class="font-semibold">Encoding: </span>
388 <span class="font-mono">{props.def.input!.encoding}</span>
389 </div>
390 <Show when={props.def.input!.schema?.ref}>
391 <div class="flex items-center gap-2">
392 <span class="text-sm font-semibold">Schema:</span>
393 <TypeBadge type="ref" refType={props.def.input!.schema!.ref} />
394 </div>
395 </Show>
396 <Show when={props.def.input!.schema?.refs}>
397 <div class="flex flex-col gap-2">
398 <div class="flex items-center gap-2">
399 <span class="text-sm font-semibold">Schema (union):</span>
400 </div>
401 <UnionBadges refs={props.def.input!.schema!.refs!} />
402 </div>
403 </Show>
404 <Show
405 when={
406 props.def.input!.schema?.properties &&
407 Object.keys(props.def.input!.schema.properties).length > 0
408 }
409 >
410 <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
411 <For each={Object.entries(props.def.input!.schema!.properties!)}>
412 {([name, property]) => (
413 <PropertyRow
414 name={name}
415 property={property}
416 required={(props.def.input!.schema?.required || []).includes(name)}
417 />
418 )}
419 </For>
420 </div>
421 </Show>
422 </div>
423 </div>
424 </Show>
425
426 {/* Output */}
427 <Show when={props.def.output}>
428 <div class="flex flex-col gap-2">
429 <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
430 Output
431 </h4>
432 <div class="flex flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50/50 p-3 dark:border-neutral-700 dark:bg-neutral-800/30">
433 <div class="text-sm">
434 <span class="font-semibold">Encoding: </span>
435 <span class="font-mono">{props.def.output!.encoding}</span>
436 </div>
437 <Show when={props.def.output!.schema?.ref}>
438 <div class="flex items-center gap-2">
439 <span class="text-sm font-semibold">Schema:</span>
440 <TypeBadge type="ref" refType={props.def.output!.schema!.ref} />
441 </div>
442 </Show>
443 <Show when={props.def.output!.schema?.refs}>
444 <div class="flex flex-col gap-2">
445 <div class="flex items-center gap-2">
446 <span class="text-sm font-semibold">Schema (union):</span>
447 </div>
448 <UnionBadges refs={props.def.output!.schema!.refs!} />
449 </div>
450 </Show>
451 <Show
452 when={
453 props.def.output!.schema?.properties &&
454 Object.keys(props.def.output!.schema.properties).length > 0
455 }
456 >
457 <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
458 <For each={Object.entries(props.def.output!.schema!.properties!)}>
459 {([name, property]) => (
460 <PropertyRow
461 name={name}
462 property={property}
463 required={(props.def.output!.schema?.required || []).includes(name)}
464 />
465 )}
466 </For>
467 </div>
468 </Show>
469 </div>
470 </div>
471 </Show>
472
473 {/* Errors */}
474 <Show when={props.def.errors && props.def.errors.length > 0}>
475 <div class="flex flex-col gap-2">
476 <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
477 Errors
478 </h4>
479 <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
480 <For each={props.def.errors}>
481 {(error) => (
482 <div class="flex flex-col gap-1 py-2">
483 <div class="font-mono text-sm font-semibold">{error.name}</div>
484 <Show when={error.description}>
485 <p class="text-sm text-neutral-700 dark:text-neutral-300">
486 {error.description}
487 </p>
488 </Show>
489 </div>
490 )}
491 </For>
492 </div>
493 </div>
494 </Show>
495
496 {/* Other Definitions */}
497 <Show
498 when={
499 !(
500 props.def.properties ||
501 props.def.parameters ||
502 props.def.input ||
503 props.def.output ||
504 props.def.errors ||
505 props.def.record
506 ) && hasDefContent()
507 }
508 >
509 <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
510 <PropertyRow name={props.name} property={props.def} hideNameType />
511 </div>
512 </Show>
513 </div>
514 );
515};
516
517export const LexiconSchemaView = (props: { schema: LexiconSchema }) => {
518 const location = useLocation();
519
520 // Handle scrolling to a definition when hash is like #schema:definitionName
521 createEffect(() => {
522 const hash = location.hash;
523 if (hash.startsWith("#schema:")) {
524 const defName = hash.slice(8);
525 const element = document.getElementById(`def-${defName}`);
526 if (element) element.scrollIntoView({ behavior: "instant", block: "start" });
527 }
528 });
529
530 return (
531 <div class="w-full max-w-4xl px-2">
532 {/* Header */}
533 <div class="flex flex-col gap-2 border-b border-neutral-300 pb-4 dark:border-neutral-700">
534 <h2 class="text-lg font-semibold">{props.schema.id}</h2>
535 <div class="flex gap-4 text-sm text-neutral-600 dark:text-neutral-400">
536 <span>
537 <span class="font-semibold">Lexicon version: </span>
538 <span class="font-mono">{props.schema.lexicon}</span>
539 </span>
540 </div>
541 <Show when={props.schema.description}>
542 <p class="text-sm text-neutral-700 dark:text-neutral-300">{props.schema.description}</p>
543 </Show>
544 </div>
545
546 {/* Definitions */}
547 <div class="flex flex-col gap-6 pt-4">
548 <For each={Object.entries(props.schema.defs)}>
549 {([name, def]) => <DefSection name={name} def={def} />}
550 </For>
551 </div>
552 </div>
553 );
554};