mirror of
https://github.com/ReVanced/revanced-website.git
synced 2026-01-18 08:43:56 +00:00
feat: use svelte query (#63)
This commit is contained in:
Ax333l
GitHub
@@ -1,56 +0,0 @@
|
||||
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) as string
|
||||
);
|
||||
|
||||
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 and reload
|
||||
export function clear_and_reload() {
|
||||
for (const key of Object.keys(localStorage)) {
|
||||
if (key.startsWith(CACHE_KEY_PREFIX)) {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
location.reload();
|
||||
}
|
||||
@@ -1,130 +1,24 @@
|
||||
import type { Readable, Subscriber, Unsubscriber, Writable } from 'svelte/store';
|
||||
import { writable } from 'svelte/store';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
import { building, 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>;
|
||||
// True if we have or are about to request data from the API.
|
||||
has_requested: boolean;
|
||||
|
||||
// `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() {
|
||||
return `${settings.api_base_url()}/${this.endpoint}`;
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
this.store.set(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);
|
||||
}
|
||||
|
||||
// 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 (building) {
|
||||
return {};
|
||||
}
|
||||
|
||||
// Might be better to actually return some data from the load function and use that on the client.
|
||||
if (!(dev || browser || building)) {
|
||||
throw new Error(
|
||||
'The API client is not optimized for production server-side rendering. Please change that :)'
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
await this.update(fetch);
|
||||
return {};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
throw error(504, 'API Request Error');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Implement Svelte store.
|
||||
subscribe(run: Subscriber<T>, invalidate?: any): Unsubscriber {
|
||||
// Make sure we have up-to-date data from the API.
|
||||
if (browser) {
|
||||
this.retrieve_if_needed();
|
||||
}
|
||||
|
||||
return this.store.subscribe(run, invalidate);
|
||||
}
|
||||
}
|
||||
|
||||
// API Endpoints
|
||||
import type { Patch, Repository, Tool } from '../../utils/types';
|
||||
import { dev_log } from '$lib/utils';
|
||||
import type { Patch, Repository, Tool } from '$lib/types';
|
||||
|
||||
export type ReposData = Repository[];
|
||||
export type PatchesData = { patches: Patch[]; packages: string[] };
|
||||
export type ToolsData = { [repo: string]: Tool };
|
||||
|
||||
export const repositories = new API<ReposData>('contributors', [], (json) => json.repositories);
|
||||
async function get_json(endpoint: string) {
|
||||
const url = `${settings.api_base_url()}/${endpoint}`;
|
||||
return await fetch(url).then((r) => r.json());
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
async function repositories(): Promise<ReposData> {
|
||||
return await get_json('contributors').then((json) => json.repositories);
|
||||
}
|
||||
|
||||
export const tools = new API<ToolsData>('tools', tools_placeholder, (json) => {
|
||||
// The API returns data in a weird shape. Make it easier to work with.
|
||||
async function tools(): Promise<ToolsData> {
|
||||
const json = await get_json('tools');
|
||||
// Make the data easier to work with.
|
||||
let map: Map<string, Tool> = new Map();
|
||||
for (const tool of json['tools']) {
|
||||
const repo: string = tool.repository;
|
||||
@@ -139,7 +33,7 @@ export const tools = new API<ToolsData>('tools', tools_placeholder, (json) => {
|
||||
});
|
||||
}
|
||||
|
||||
let value = map.get(repo);
|
||||
let value = map.get(repo)!!;
|
||||
value.assets.push({
|
||||
name: tool.name,
|
||||
size: tool.size,
|
||||
@@ -151,14 +45,19 @@ export const tools = new API<ToolsData>('tools', tools_placeholder, (json) => {
|
||||
}
|
||||
|
||||
return Object.fromEntries(map);
|
||||
});
|
||||
}
|
||||
|
||||
export const patches = new API<PatchesData>('patches', { patches: [], packages: [] }, (patches) => {
|
||||
async function manager(): Promise<Tool> {
|
||||
return await tools().then((data) => data['revanced/revanced-manager']);
|
||||
}
|
||||
|
||||
async function patches(): Promise<PatchesData> {
|
||||
const json = await get_json('patches');
|
||||
const packagesWithCount: { [key: string]: number } = {};
|
||||
|
||||
// gets packages and patch count
|
||||
for (let i = 0; i < patches.length; i++) {
|
||||
patches[i].compatiblePackages.forEach((pkg: Patch) => {
|
||||
for (let i = 0; i < json.length; i++) {
|
||||
json[i].compatiblePackages.forEach((pkg: Patch) => {
|
||||
packagesWithCount[pkg.name] = (packagesWithCount[pkg.name] || 0) + 1;
|
||||
});
|
||||
}
|
||||
@@ -168,5 +67,24 @@ export const patches = new API<PatchesData>('patches', { patches: [], packages:
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map((pkg) => pkg[0]);
|
||||
|
||||
return { patches, packages };
|
||||
});
|
||||
return { patches: json, packages };
|
||||
}
|
||||
|
||||
export const staleTime = 5 * 60 * 1000;
|
||||
export const queries = {
|
||||
manager: {
|
||||
queryKey: ['manager'],
|
||||
queryFn: manager,
|
||||
staleTime
|
||||
},
|
||||
patches: {
|
||||
queryKey: ['patches'],
|
||||
queryFn: patches,
|
||||
staleTime
|
||||
},
|
||||
repositories: {
|
||||
queryKey: ['repositories'],
|
||||
queryFn: repositories,
|
||||
staleTime
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user