Merge pull request #17 from Axelen123/api-data

@sveltejs/adapter-static and API Data layer

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /build
+/public
 /.svelte-kit
 /package
 .env

package.json

@@ -5,14 +5,15 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"package": "svelte-kit package",
-		"preview": "vite preview",
+		"preview": "sirv ./public --no-clear",
+		"vite:preview": "vite preview",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/adapter-static": "next",
 		"@sveltejs/kit": "next",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
@@ -21,6 +22,7 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
+		"sirv-cli": "^2.0.2",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-preprocess": "^4.10.6",

src/data/api/cache.ts

@@ -0,0 +1,51 @@
+import { browser } from "$app/environment";
+
+import { dev_log } from "$lib/utils";
+
+const CACHE_KEY_PREFIX = "revanced_api_cache_l1";
+const L1_CACHE_VALIDITY = 5 * 60 * 1000; // 5 minutes
+
+function l1_key_name(endpoint: string) {
+  return `${CACHE_KEY_PREFIX}:${endpoint}`;
+}
+
+// Get item from the cache
+export function get(endpoint: string) {
+  if (!browser) {
+    return null;
+  }
+
+  const key_name = l1_key_name(endpoint);
+  const ls_data: { valid_until: number; data: any } | null = JSON.parse(localStorage.getItem(key_name));
+
+  if (ls_data === null || ls_data.valid_until <= Date.now()) {
+    dev_log("Cache", `missed "${endpoint}"`);
+    localStorage.removeItem(key_name);
+    return null;
+  }
+
+
+  dev_log("Cache", `hit "${endpoint}"`);
+  return ls_data.data;
+}
+
+// Update the cache
+export function update(endpoint: string, data: any) {
+  if (!browser) {
+    return;
+  }
+
+  localStorage.setItem(l1_key_name(endpoint), JSON.stringify({
+    data,
+    valid_until: Date.now() + L1_CACHE_VALIDITY
+  }));
+}
+
+// Clear the cache
+export function clear() {
+  for (const key of Object.keys(localStorage)) {
+    if (key.startsWith(CACHE_KEY_PREFIX)) {
+      localStorage.removeItem(key);
+    }
+  }
+}

src/data/api/index.ts

@@ -0,0 +1,144 @@
+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 * 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;
+
+  // 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;
+      };
+    }
+  }
+
+  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;
+  }
+
+  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;
+    }
+
+    // Try to get data from the cache.
+    let data = cache.get(this.endpoint);
+
+    if (data === null) {
+      // Fetch and transform data
+      const response = await fetch_fn(this.url());
+      data = this.transform(await response.json());
+
+      // Update the cache.
+      cache.update(this.endpoint, data);
+    }
+
+    // Initialize with the data. Applicable when page load function runs on client.
+    this.init(data);
+
+    // store_in_cache(data)...
+
+    return data;
+  }
+
+  // Implements the load function found in `+page/layout.ts` files.
+  page_load_impl() {
+    return async ({ fetch }) => {
+      try {
+        return await this.request(fetch);
+      } catch(e) {
+        console.error(e);
+        if (this.load_fn_fallback !== undefined && !prerendering) {
+          return this.load_fn_fallback;
+        }
+        throw error(500, "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);
+    }
+
+    return this.store.subscribe(run, invalidate);
+  }
+}
+
+// API Endpoints
+import type { Patch, Repository } from '../types';
+import { dev_log } from "$lib/utils";
+
+export type ContribData = { repositories: Repository[] };
+export type PatchesData = { patches: Patch[]; packages: string[] };
+
+export const contributors = new API<ContribData>("contributors", undefined, { repositories: [] });
+
+export const patches = new API<PatchesData>("patches", patches => {
+	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/data/api/settings.ts

@@ -0,0 +1,22 @@
+import { browser } from "$app/environment";
+
+const URL_KEY = "revanced_api_url";
+
+// Get base URL
+export function api_base_url(): string {
+  const default_base_url = "https://releases.revanced.app";
+  if (browser) {
+    return localStorage.getItem(URL_KEY) || default_base_url;
+  }
+
+  return default_base_url;
+}
+
+// (re)set base URL.
+export function set_api_base_url(url?: string) {
+  if (!url) {
+    localStorage.removeItem(URL_KEY);
+  } else {
+    localStorage.setItem(URL_KEY, url);
+  }
+}

src/lib/components/atoms/NavButton.svelte

@@ -1,10 +1,11 @@
 <script>
   import RouterEvents from '../../../data/RouterEvents';
 	export let href = '/';
+  export let is_selected = target_url => href === target_url;
 </script>
 
 <a data-sveltekit-prefetch {href}>
-	<li class:selected={href === $RouterEvents.target_url.pathname}>
+	<li class:selected={is_selected($RouterEvents.target_url.pathname)}>
 		<slot />
 	</li>
 </a>

src/lib/components/molecules/NavHost.svelte

@@ -29,10 +29,11 @@
 	</a>
 	<ul>
 		<Navigation href="/">Home</Navigation>
-		<Navigation href="/download">Download</Navigation>
+		<Navigation href="/download/">Download</Navigation>
-		<Navigation href="/docs">Docs</Navigation>
+		<Navigation href="/docs/">Docs</Navigation>
-		<Navigation href="/patches">Patches</Navigation>
+		<Navigation href="/patches/">Patches</Navigation>
-		<Navigation href="/credits">Credits</Navigation>
+		<Navigation href="/credits/">Credits</Navigation>
+		<Navigation href="/api-settings/">API Settings</Navigation>
 	</ul>
 	<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>
 		<div class="menu-btn__burger" />

src/lib/utils.ts

@@ -0,0 +1,8 @@
+import { dev } from "$app/environment";
+
+// console.log, but only if in dev environment.
+export function dev_log(part: string, ...args) {
+  if (dev) {
+    console.log(`[${part}]:`, ...args);
+  }
+}

src/routes/+error.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Navigation from '$lib/components/atoms/NavButton.svelte';
+  import { page } from '$app/stores';
+
+  $: status = $page.status;
+</script>
+
+<section class="error">
+  <h1>{status}</h1>
+  {#if status == 500}
+	  <p>
+      {$page.error.message}
+    </p>
+  {:else 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>
+  {/if}
+</section>
+
+<style>
+.error {
+  padding-top: 5rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 10rem;
+  color: var(--accent-color);
+}
+p {
+  font-size: 5ch;
+  color: var(--white);
+}
+</style>

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

@@ -1,11 +1,7 @@
-import type { Repository } from 'src/data/types';
+import type { PageLoad } from './$types';
 
-export type ContribData = { repositories: Repository[] };
+import { contributors } from '../data/api';
 
-export async function load({
+export const prerender = true;
-  fetch
+
-}): Promise<ContribData> {
+export const load: PageLoad = contributors.page_load_impl();
-	const response = await fetch('https://releases.rvcd.win/contributors');
-	const data = await response.json();
-	return data;
-};

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
+  // Handled by `+layout.ts`.
-	export let data: ContribData;
+  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/docs/+page.svelte

@@ -48,8 +48,7 @@
 		<br />
 		<br />
 		<div class="button-wrapper">
-			<Button kind="secondary">Using ReVanced CLI and installing ReVanced -></Button
+			Using ReVanced CLI and installing ReVanced (Docs will be overhauled anyways)
-			>
 		</div>
 	</div>
 </main>

src/routes/patches/+page.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
-	import type { PatchesData } from './+page';
+  import type { PageData } from './$types';
-	import type { ContribData } from '../+layout';
 
 	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

@@ -1,23 +1,5 @@
-import { readable } from 'svelte/store';
+import type { PageLoad } from './$types';
-import type { Patch } from 'src/data/types';
 
-export type PatchesData = { patches: Patch[]; packages: string[] };
+import { patches } from '../../data/api';
 
-export async function load({
+export const load: PageLoad = patches.page_load_impl();
-  fetch
-}): Promise<PatchesData> {
-	const response = await fetch('https://releases.rvcd.win/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 };
-};

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -8,7 +8,11 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter({
+			pages: 'public',
+		}),
+
+		trailingSlash: 'always'
 	}
 };