feat: api data layer

src/routes/+layout.server.ts

@@ -1,15 +0,0 @@
-import type { Repository } from 'src/data/types';
-
-import { api_url } from '$lib/utils';
-
-export type ContribData = { repositories: Repository[] };
-
-export const prerender = true;
-
-export async function load({
-  fetch
-}): Promise<ContribData> {
-	const response = await fetch(api_url('contributors'));
-	const data = await response.json();
-	return data;
-};

src/routes/+layout.svelte

@@ -6,6 +6,13 @@
   import RouterEvents from '../data/RouterEvents';
 	import '../app.css';
 
+  import type { PageData } from './$types';
+
+  import { contributors } from "../data/api";
+
+  export let data: PageData;
+  contributors.init(data);
+
   // Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
   const show_loading_animation = derived(RouterEvents, ($event, set) => {
     if ($event.navigating) {

src/routes/+layout.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+import { contributors } from '../data/api';
+
+export const prerender = true;
+
+export const load: PageLoad = contributors.page_load_impl();

src/routes/api-settings/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import * as settings from '../../data/api/settings';
+  import { clear } from '../../data/api/cache';
+
+  let url = settings.api_base_url();
+
+  function handler() {
+    clear();
+    settings.set_api_base_url(url);
+    location.reload(true);
+  }
+</script>
+
+<section class="settings">
+  <input name="api-url" type="text" bind:value={url} />
+  <button on:click={handler}>Save</button>
+</section>
+<section class="cache">
+  <button on:click={clear}>Clear cache</button>
+</section>
+
+<style>
+  .settings {
+    padding-top: 5rem;
+  }
+</style>

src/routes/credits/+page.svelte

@@ -2,13 +2,14 @@
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	import type { ContribData } from '../+layout';
-
 	import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-	// From the layout hydration. See +layout.ts
-	export let data: ContribData;
+  // Handled by `+layout.ts`.
+  import { contributors } from '../../data/api';
+
+  import type { PageData } from './$types';
+  export let data: PageData;
 </script>
 
 <main>
@@ -18,9 +19,9 @@
 			<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
 		</div>
 		<div class="contrib-grid">
-			{#each data.repositories as { contributors, name }}
+			{#each $contributors.repositories as { contributors: contribs, name }}
 				<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-					<ContributorHost contribs={contributors} repo={name} />
+					<ContributorHost {contribs} repo={name} />
 				</div>
 			{/each}
 		</div>

src/routes/patches/+page.server.ts

@@ -1,26 +0,0 @@
-import type { Patch } from 'src/data/types';
-
-import { api_url } from '$lib/utils';
-
-import { readable } from 'svelte/store';
-
-export type PatchesData = { patches: Patch[]; packages: string[] };
-
-export async function load({
-  fetch
-}): Promise<PatchesData> {
-	const response = await fetch(api_url('patches'));
-	const patches = await response.json();
-	let packages: string[] = [];
-
-	// gets packages
-	for (let i = 0; i < patches.length; i++) {
-		patches[i].compatiblePackages.forEach((pkg: Patch) => {
-			let index = packages.findIndex((x) => x == pkg.name);
-			if (index === -1) {
-				packages.push(pkg.name);
-			}
-		});
-	}
-	return { patches, packages };
-};

src/routes/patches/+page.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
-	import type { PatchesData } from './+page';
-	import type { ContribData } from '../+layout';
+  import type { PageData } from './$types';
 
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
 	import type { CompatiblePackage } from 'src/data/types';
+  import { patches as api_patches } from '../../data/api';
 
 	import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
 	import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
 	import PatchCell from '$lib/components/molecules/PatchCell.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-	export let data: PatchesData & ContribData;
+	export let data: PageData;
+  // Needed when someone navigates directly to the page.
+  api_patches.init(data);
 
-	let { patches, packages } = data;
+	$: ({ patches, packages } = $api_patches);
 
 	let current: boolean = false;
 

src/routes/patches/+page.ts

@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+import { patches } from '../../data/api';
+
+export const load: PageLoad = patches.page_load_impl();