feat: improved relation component

src/_modules/components/Relation.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-	import { db } from '$modules';
+	import Document from './Document.svelte';
 
 	import type { RelationField } from '$modules/fields';
 	import type { CollectionName } from '$modules/database';
 
+	//
+
 	type C = $$Generic<CollectionName>;
 
-	export let relation: RelationField<C> | undefined;
+	export let to: RelationField<C> | undefined;
 </script>
 
-{#if relation}
-	<slot relation={db.get_document(relation?.collection, relation.document)} />
+{#if to}
+	<Document collection={to.collection} name={to.document} let:doc>
+		<slot {doc} />
+	</Document>
 {/if}

src/routes/(database)/work_experiences/2022-10_oggi_dyne/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
 	import { db } from '$modules/index';
 	import { Document } from '$modules/components';
+	import Relation from '$modules/components/Relation.svelte';
 
 	export const props = db.create('work_experiences', {
 		date_start: '2022-10',
@@ -19,3 +20,9 @@
 	<pre>{JSON.stringify(doc, null, 2)}</pre>
 	<!-- <img src={entry.logo} alt="" /> -->
 </Document>
+
+<!-- OR -->
+
+<Relation to={props.organization} let:doc>
+	<pre>{JSON.stringify(doc, null, 2)}</pre>
+</Relation>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Collection, Document, Relation } from '$modules/components';
+	import DocumentContent from '$modules/components/DocumentContent.svelte';
 	import { db } from '$modules/index';
 
 	const links = db.get_paths();
@@ -32,8 +33,9 @@
 			<div class="rounded-lg border border-gray-300 p-4">
 				<pre>{JSON.stringify(experience, null, 2)}</pre>
 
-				<Relation relation={experience.props?.organization} let:relation>
-					<pre>{JSON.stringify(relation, null, 2)}</pre>
+				<Relation to={experience.props?.organization} let:doc>
+					<pre>{JSON.stringify(doc, null, 2)}</pre>
+					<DocumentContent />
 				</Relation>
 			</div>
 		{/each}