ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-06-12 21:27:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: use svelte query (#63)

Browse Source
This commit is contained in:
Ax333l
2023-02-11 21:22:55 +01:00
committed by GitHub
parent 368b2c9ee5
commit e1b37fab7d
17 changed files with 367 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/routes/+layout.svelte
View File

@ -1,11 +1,44 @@
<script lang="ts" context="module">
import { writable } from 'svelte/store';
// There might be a better place to put this, but I am not entirely sure...
export const isRestoring = writable(false);
</script>
<script lang="ts">
import '../app.scss';
import { derived } from 'svelte/store';
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import { QueryClient } from '@tanstack/query-core';
import { persistQueryClient } from '@tanstack/query-persist-client-core';
import { QueryClientProvider } from '@tanstack/svelte-query';
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import NavHost from '$layout/Navbar/NavHost.svelte';
import Spinner from '$lib/components/Spinner.svelte';
import { staleTime } from '$data/api';
import RouterEvents from '$data/RouterEvents';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
enabled: browser,
cacheTime: staleTime
}
}
});
onMount(() => {
isRestoring.set(true);
const [unsubscribe, promise] = persistQueryClient({
queryClient,
persister: createSyncStoragePersister({ storage: localStorage })
});
promise.then(() => isRestoring.set(false));
return unsubscribe;
});
// Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
const show_loading_animation = derived(
RouterEvents,
@ -22,14 +55,14 @@
);
</script>
<NavHost />
<QueryClientProvider client={queryClient}>
<NavHost />
{#if $show_loading_animation}
<Spinner />
{: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}> -->
{#if $show_loading_animation}
<Spinner />
{:else}
<slot />
{/if}
<!-- guhh afn -->
<!-- <Footer> -->
</QueryClientProvider>

13
src/routes/+layout.ts
View File

@ -1,14 +1 @@
import type { PageLoad } from './$types';
import { repositories } from '$data/api';
export const prerender = true;
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 (err) {
console.log(err);
}
};

20
src/routes/contributors/+page.svelte
View File

@ -2,11 +2,15 @@
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import { repositories } from '$data/api';
import ContributorHost from './ContributorSection.svelte';
import Footer from '$layout/Footer.svelte';
import Meta from '$lib/components/Meta.svelte';
import Query from '$lib/components/Query.svelte';
import { queries } from '$data/api';
import { createQuery } from '@tanstack/svelte-query';
const query = createQuery(['repositories'], queries.repositories);
</script>
<Meta title="Contributors" />
@ -24,11 +28,13 @@
</h4>
</div>
<div class="repos">
{#each $repositories as { contributors, name: repo }}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<ContributorHost {contributors} {repo} />
</div>
{/each}
<Query {query} let:data>
{#each data as { contributors, name: repo }}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<ContributorHost {contributors} {repo} />
</div>
{/each}
</Query>
</div>
</div>
</main>

4
src/routes/contributors/+page.ts
View File

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

15
src/routes/download/+page.svelte
View File

@ -1,16 +1,19 @@
<script lang="ts">
import { tools } from '$data/api';
import { queries } from '$data/api';
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import { createQuery } from '@tanstack/svelte-query';
import manager_screenshot from '$images/manager_two.png?format=avif;webp;png&picture';
import Meta from '$lib/components/Meta.svelte';
import Query from '$lib/components/Query.svelte';
import Button from '$lib/components/Button.svelte';
import Footer from '$layout/Footer.svelte';
import Picture from '$lib/components/Picture.svelte';
$: manager = $tools['revanced/revanced-manager'];
const query = createQuery(['manager'], queries.manager);
</script>
<Meta title="Download" />
@ -19,9 +22,11 @@
<h2>ReVanced <span>Manager</span></h2>
<p>Patch your favourite apps, right on your device.</p>
<div class="buttons">
<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">
{manager.version}
</Button>
<Query {query} let:data>
<Button kind="primary" icon="download" href={data.assets[0].url} target="_blank">
{data.version}
</Button>
</Query>
<Button href="https://github.com/revanced/revanced-manager" target="_blank">View Source</Button>
</div>
<div class="screenshot">

5
src/routes/download/+page.ts
View File

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

131
src/routes/patches/[[package]]/+page.svelte
View File

@ -4,7 +4,9 @@
import type { PageData } from './$types';
import type { Patch } from '$lib/types';
import { patches as api_patches } from '$data/api';
import { createQuery } from '@tanstack/svelte-query';
import { queries } from '$data/api';
import Meta from '$lib/components/Meta.svelte';
import PackageMenu from '../PackageMenu.svelte';
@ -14,8 +16,9 @@
import Search from '$lib/components/Search.svelte';
import FilterChip from '$lib/components/FilterChip.svelte';
import Dialogue from '$lib/components/Dialogue.svelte';
import Query from '$lib/components/Query.svelte';
$: ({ patches, packages } = $api_patches);
const query = createQuery(['patches'], queries.patches);
export let data: PageData;
$: ({ selectedPkg } = data);
@ -25,24 +28,44 @@
let timeout: any = null;
let mobilePackages = false;
function filterByPackage(pkg: string | undefined, packageList: any[]) {
return packageList.find((x: Package) => x.name === pkg);
function checkCompatibility(patch: Patch, pkg: string, cmp: (a: string, b: string) => boolean) {
if (pkg === '') {
return false;
}
return !!patch.compatiblePackages.find((compat) => cmp(compat.name, pkg));
}
function checkPkgName(pkg: string, packageList: any[]) {
// Basically the same function as before lol
return packageList.find((x: Package) => x.name.replace(/\./g, '').includes(pkg));
function searchString(str: string, term: string, replacement_regex: RegExp) {
return str
.toLowerCase()
.replace(replacement_regex, '')
.includes(term || '');
}
function search(patch: Patch) {
return (
patch.description.toLowerCase().replace(/\s/g, '').includes(searchTermFiltered) ||
patch.name.toLowerCase().replace(/-/g, '').includes(searchTermFiltered) ||
checkPkgName(searchTermFiltered, patch.compatiblePackages)
);
function filter(patches: Patch[], pkg: string, search?: string): Patch[] {
if (search === undefined && pkg === '') {
return patches;
}
return patches.filter((patch) => {
// Don't show if the patch doesn't support the selected package
if (pkg && !checkCompatibility(patch, pkg, (a, b) => a === b)) {
return false;
}
// Filter based on the search term.
if (search !== undefined) {
return (
searchString(patch.description, search, /\s/g) ||
searchString(patch.name, search, /-/g) ||
checkCompatibility(patch, pkg, (a, b) => searchString(a, b, /\./g))
);
}
return true;
});
}
// Make sure we don't have filter the patches after every key press
// Make sure we don't have to filter the patches after every key press
const debounce = () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
@ -83,55 +106,51 @@
<FilterChip>Patch options</FilterChip> -->
</div>
<div class="mobile-packages-Dialogue">
<Dialogue bind:modalOpen={mobilePackages} fullscreen>
<svelte:fragment slot="title">Packages</svelte:fragment>
<div class="mobile-packages">
<span
on:click={() => (mobilePackages = !mobilePackages)}
on:keypress={() => (mobilePackages = !mobilePackages)}
>
<Package {selectedPkg} name="All packages" />
</span>
{#each packages as pkg}
<Query {query} let:data>
<div class="mobile-packages-Dialogue">
<Dialogue bind:modalOpen={mobilePackages} fullscreen>
<svelte:fragment slot="title">Packages</svelte:fragment>
<div class="mobile-packages">
<span
on:click={() => (mobilePackages = !mobilePackages)}
on:keypress={() => (mobilePackages = !mobilePackages)}
>
<Package {selectedPkg} name={pkg} />
<Package {selectedPkg} name="All packages" />
</span>
{/each}
</div>
</Dialogue>
</div>
{#each data.packages as pkg}
<span
on:click={() => (mobilePackages = !mobilePackages)}
on:keypress={() => (mobilePackages = !mobilePackages)}
>
<Package {selectedPkg} name={pkg} />
</span>
{/each}
</div>
</Dialogue>
</div>
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PackageMenu>
<span class="packages">
<Package {selectedPkg} name="All packages" />
{#each packages as pkg}
<Package {selectedPkg} name={pkg} />
{/each}
</span>
</PackageMenu>
</aside>
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PackageMenu>
<span class="packages">
<Package {selectedPkg} name="All packages" />
{#each data.packages as pkg}
<Package {selectedPkg} name={pkg} />
{/each}
</span>
</PackageMenu>
</aside>
<div class="patches-container">
{#each patches as patch}
<!-- Trigger new animations when package or search changes (I love Svelte) -->
{#key selectedPkg || searchTermFiltered}
<!-- Show patch if it supports the selected package, or if no package has been selected -->
{#if filterByPackage(selectedPkg, patch.compatiblePackages) || !selectedPkg}
<!-- ...same with search -->
{#if search(patch) || !searchTermFiltered}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PatchItem {patch} />
</div>
{/if}
{/if}
{/key}
{/each}
</div>
<div class="patches-container">
{#each filter(data.patches, selectedPkg || '', searchTermFiltered) as patch}
<!-- Trigger new animations when package or search changes (I love Svelte) -->
{#key selectedPkg || searchTermFiltered}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PatchItem {patch} />
</div>
{/key}
{/each}
</div>
</Query>
</main>
<Footer />

6
src/routes/patches/[[package]]/+page.ts
View File

@ -1,10 +1,6 @@
import { patches } from '$data/api';
import type { PageLoad } from './$types';
const api = patches.page_load_impl();
export const load: PageLoad = async ({ params, fetch }) => {
export const load: PageLoad = async ({ params }) => {
const selectedPkg = params.package || undefined;
await api({ fetch });
return { selectedPkg };
};