refactor: api client

.github/workflows/refresh.yaml

@@ -1,13 +0,0 @@
-name: refresh
-on:
-  schedule:
-    - cron: '0 */2 * * *'
-  workflow_dispatch:
-jobs:
-  cron:
-    runs-on: ubuntu-latest
-    environment: production
-    steps:
-      - name: Refresh the site prerender with the latest API data
-        run: |
-          curl -X POST '${{ secrets.DEPLOY_HOOK }}'

src/data/api/index.ts

@@ -2,73 +2,31 @@ import type { Readable, Subscriber, Unsubscriber, Writable } from "svelte/store"
 import { writable } from "svelte/store";
 import { error } from "@sveltejs/kit";
 
-import { prerendering, browser } from "$app/environment";
+import { prerendering, browser, dev } from "$app/environment";
 
 import * as settings from "./settings";
 import * as cache from "./cache";
 
-
 export class API<T> implements Readable<T> {
   private store: Writable<T>;
-  // Note: transform function will not be called on cache hit.
-  private transform: (v: any) => T;
-  // True if we have or are about to request data from the possibly user-specified API.
-  private requested_from_api = false;
+  // True if we have or are about to request data from the API.
+  has_requested: boolean;
 
-  // If `transform_fn_or_key` is unspecified, the data will be returned from the API as is.
-  // If `transform_fn_or_key` is a function, the JSON data will pass through it.
-  // If `transform_fn_or_key` is a string, the JSON data will be assigned to a prop on an object.
-  // If `load_fn_fallback` is not specified, the load function will instead cause HTTP error 500 if the API request fails (it will always throw if prerendering).
-  constructor(public readonly endpoint: string, transform_fn_or_key?: ((v: any) => T) | string, private load_fn_fallback?: T) {
-    if (transform_fn_or_key === undefined) {
-      this.transform = (v) => v as T;
-    } else if (typeof transform_fn_or_key != "string") {
-      // `transform_fn_or_key` is function.
-      this.transform = transform_fn_or_key;
-    } else {
-      // `transform_fn_or_key` is string.
-      this.transform = (v) => {
-        let data = {};
-        data[transform_fn_or_key] = v;
-        return data as T;
-      };
-    }
+  // `transform` will transform the data received from the API.
+  constructor(public readonly endpoint: string, private readonly default_value: T, private readonly transform: ((v: any) => T) = (v) => v as T) {
+    // Initialize with cached data if possible.
+    const cached_data = cache.get(this.endpoint);
+    this.has_requested = cached_data !== null;
+
+    this.store = writable(cached_data || this.default_value);
   }
 
-  private url(): string {
-    let url = `${settings.api_base_url()}/${this.endpoint}`;
-
-    if (prerendering) {
-      url += '?cacheBypass=';
-      // Just add some random stuff to the string. Doesn't really matter what we add.
-      // This is here to make sure we bypass the cache while prerendering.
-      for (let i = 0; i < 6; i++) {
-        url += Math.floor(Math.random() * 10).toString();
-      }
-    }
-
-    return url;
+  private url() {
+    return `${settings.api_base_url()}/${this.endpoint}`;
   }
 
-  initialized() {
-    return this.store !== undefined;
-  }
-
-  // Initialize if needed
-  init(data: T) {
-    if (this.initialized()) {
-      return;
-    }
-
-    this.store = writable(data);
-  }
-
-  // Request data, transform, cache and initialize if necessary.
-  async request(fetch_fn = fetch): Promise<T> {
-    if (browser) {
-      this.requested_from_api = true;
-    }
-
+  // Please don't call this directly
+  private async _update(fetch_fn: typeof fetch) {
     // Try to get data from the cache.
     let data = cache.get(this.endpoint);
 
@@ -81,38 +39,51 @@ export class API<T> implements Readable<T> {
       cache.update(this.endpoint, data);
     }
 
-    // Initialize with the data. Applicable when page load function runs on client.
-    this.init(data);
+    this.store.set(data);
+  }
 
-    // store_in_cache(data)...
+  // Retrieve data and update.
+  private update(fetch_fn = fetch) {
+    // Make sure we set this immediately outside of the async function to avoid JS event loop weirdness.
+    this.has_requested = true;
+    return this._update(fetch_fn);
+  }
 
-    return data;
+  // Start retrieving data if needed.
+  retrieve_if_needed() {
+    if (!this.has_requested) {
+      return this.update();
+    }
+    return Promise.resolve()
   }
 
   // Implements the load function found in `+page/layout.ts` files.
   page_load_impl() {
     return async ({ fetch }) => {
+      if (prerendering) {
+        return {};
+      }
+
+      // Might be better to actually return some data from the load function and use that on the client.
+      if (!(dev || browser || prerendering)) {
+        throw new Error("The API client is not optimized for production server-side rendering. Please change that :)");
+      }
+
       try {
-        return await this.request(fetch);
+        await this.update(fetch);
+        return {};
       } catch(e) {
         console.error(e);
-        if (this.load_fn_fallback !== undefined && !prerendering) {
-          return this.load_fn_fallback;
-        }
-        throw error(500, "API Request Error");
+        throw error(504, "API Request Error");
       }
     };
   }
 
   // Implement Svelte store.
   subscribe(run: Subscriber<T>, invalidate?: any): Unsubscriber {
-    if (!this.initialized()) {
-      // Make sure you call <api>.init() with data from the load() function of the page you are working on or a layout above it.
-      throw Error(`API "${this.endpoint}" has not been initialized yet.`);
-    }
     // Make sure we have up-to-date data from the API.
-    if (!this.requested_from_api && browser) {
-      this.request().then(this.store.set);
+    if (browser) {
+      this.retrieve_if_needed();
     }
 
     return this.store.subscribe(run, invalidate);
@@ -123,12 +94,28 @@ export class API<T> implements Readable<T> {
 import type { Patch, Repository, Tool } from '../types';
 import { dev_log } from "$lib/utils";
 
-export type ContribData = { repositories: Repository[] };
+export type ReposData = Repository[];
 export type PatchesData = { patches: Patch[]; packages: string[] };
-export type ToolsData = { tools: { [repo: string]: Tool } };
+export type ToolsData = { [repo: string]: Tool };
 
-export const contributors = new API<ContribData>("contributors", undefined, { repositories: [] });
-export const tools = new API<ToolsData>("tools", json => {
+export const repositories = new API<ReposData>("contributors", [], json => json.repositories);
+
+// It needs to look this way to not break everything.
+const tools_placeholder: ToolsData = {
+  "revanced/revanced-manager": {
+    version: "v0.0.0",
+    timestamp: "",
+    repository: "",
+    assets: [{
+      url: "",
+      name: "",
+      content_type: "",
+      size: null,
+    }]
+  }
+}
+
+export const tools = new API<ToolsData>("tools", tools_placeholder, json => {
   // The API returns data in a weird shape. Make it easier to work with.
   let map: Map<string, Tool> = new Map();
   for (const tool of json["tools"]) {
@@ -155,10 +142,10 @@ export const tools = new API<ToolsData>("tools", json => {
     map.set(repo, value);
   }
 
-  return { tools: Object.fromEntries(map) };
+  return Object.fromEntries(map);
 });
 
-export const patches = new API<PatchesData>("patches", patches => {
+export const patches = new API<PatchesData>("patches", { patches: [], packages: [] }, patches => {
 	let packages: string[] = [];
 
 	// gets packages

src/lib/components/molecules/Footer.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import type { Repository } from 'src/data/types';
-
-	export let repositories: Repository[];
+import { repositories } from "../../../data/api";
 </script>
 
 <hr />
@@ -26,25 +24,23 @@
 			<a href="/patches"><h6>Patches</h6></a>
 			<a href="/contributors"><h6>Contributors</h6></a>
 		</div>
-		{#if repositories.length}
-			<div class="link-column">
-				<h5>Repos</h5>
-				{#each repositories as { name }}
-					<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
-						<div>
-							<h6>
-								{name
-									.replace(/-/g, ' ')
-									.replace(/revanced\/revanced/g, '')
-									.replace(/cli/g, 'CLI')
-									.replace(/api/g, 'API')
-									.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
-							</h6>
-						</div>
-					</a>
-				{/each}
-			</div>
-		{/if}
+		<div class="link-column">
+			<h5>Repos</h5>
+			{#each $repositories as { name }}
+				<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
+					<div>
+						<h6>
+							{name
+								.replace(/-/g, ' ')
+								.replace(/revanced\/revanced/g, '')
+								.replace(/cli/g, 'CLI')
+								.replace(/api/g, 'API')
+								.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
+						</h6>
+					</div>
+				</a>
+			{/each}
+		</div>
 		<div class="link-column">
 			<!-- to replace -->
 			<h5>Socials</h5>

src/routes/+error.svelte

@@ -7,14 +7,14 @@
 
 <section class="error">
 	<h1>{status}</h1>
-	{#if status == 500}
-		<p>
-			{$page.error.message}
-		</p>
-	{:else if status == 404}
+	{#if status == 404}
 		<p>That page received a cease and desist letter from a multi-billion dollar tech company.</p>
 		<br />
 		<Navigation href="/" is_selected={() => true}>Home</Navigation>
+	{:else}
+		<p>
+			{$page.error.message}
+		</p>
 	{/if}
 </section>
 

src/routes/+layout.svelte

@@ -6,13 +6,6 @@
   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) {
@@ -44,3 +37,6 @@
 {:else}
 	<slot />
 {/if}
+<!--
+     afn if you are moving the footer here, please make it not use the repositories store directly and instead use component props :) -->
+<!-- <Footer repos={$repositories}> -->

src/routes/+layout.ts

@@ -1,7 +1,14 @@
 import type { PageLoad } from './$types';
 
-import { contributors } from '../data/api';
+import { repositories } from '../data/api';
 
 export const prerender = true;
 
-export const load: PageLoad = contributors.page_load_impl();
+const base = repositories.page_load_impl();
+
+export const load: PageLoad = async ({ fetch }) => {
+  // The entire site may softlock if the user sets a bad API url if we don't do this.
+  try {
+    return await base({ fetch });
+  } catch(_) { }
+}

src/routes/contributors/+page.svelte

@@ -5,11 +5,7 @@
 	import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-  // Handled by `+layout.ts`.
-  import { contributors } from '../../data/api';
-
-  import type { PageData } from './$types';
-  export let data: PageData;
+  import { repositories } from '../../data/api';
 </script>
 
 <svelte:head>
@@ -25,7 +21,7 @@
 			<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 $contributors.repositories as { contributors: contribs, name }}
+			{#each $repositories as { contributors: contribs, name }}
 				<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 					<ContributorHost {contribs} repo={name} />
 				</div>
@@ -34,7 +30,7 @@
 	</div>
 </main>
 
-<Footer {...data} />
+<Footer />
 
 <style>
 	.contrib-grid {

src/routes/contributors/+page.ts

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

src/routes/download/+page.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	import { tools as api_tools } from '../../data/api';
+	import { tools } from '../../data/api';
 	import Button from '$lib/components/atoms/Button.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-	export let data: PageData;
-	api_tools.init(data);
-
-  $: manager = $api_tools.tools["revanced/revanced-manager"];
+  $: manager = $tools["revanced/revanced-manager"];
 </script>
 
 <div class="wrapper">
@@ -17,7 +13,7 @@
 	<img src="../manager_two.png" alt="Manager Screenshot"/>
 </div>
 
-<Footer {...data}/>
+<Footer />
 
 <style>
 

src/routes/patches/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
@@ -12,10 +10,6 @@
 	import PatchCell from '$lib/components/molecules/PatchCell.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-	export let data: PageData;
-	// Needed when someone navigates directly to the page.
-	api_patches.init(data);
-
 	$: ({ patches, packages } = $api_patches);
 
 	let current: boolean = false;
@@ -55,7 +49,7 @@
 		{/each}
 	</div>
 </main>
-<Footer {...data} />
+<Footer />
 
 <style>
 	main {