feat: hydration

src/lib/components/molecules/ContributorHost.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import type { Contributor } from '$lib/types';
 	import ContributorButton from '../atoms/ContributorPerson.svelte';
 
-	export let contribs;
+	export let contribs: Contributor[];
 	export let repo: string;
 
 	let repo_name = repo

src/lib/stores/ContributorsStore.js

@@ -1,10 +0,0 @@
-import { readable } from "svelte/store";
-
-const fetchContributors = async () => {
-    const response = await fetch('https://releases.rvcd.win/contributors');
-    const json = await response.json();
-    return json;
-};
-
-const ContributorsStore = readable(fetchContributors());
-export default ContributorsStore;

src/lib/stores/PatchesStore.js

@@ -1,11 +0,0 @@
-import { readable } from "svelte/store";
-
-const fetchPatches = async () => {
-    const response = await fetch('https://releases.rvcd.win/patches');
-    const json = await response.json();
-    console.log(typeof json)
-    return json;
-};
-
-const PatchesStore = readable(fetchPatches());
-export default PatchesStore;

src/lib/types.ts

@@ -0,0 +1,34 @@
+export interface Contributor {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+}
+
+export interface Repository {
+  name: string;
+  contributors: Contributor[];
+}
+
+export interface Patch {
+  name:               string;
+  description:        string;
+  version:            string;
+  excluded:           boolean;
+  deprecated:         boolean;
+  dependencies:       string[];
+  options:            PatchOption[];
+  compatiblePackages: CompatiblePackage[];
+}
+
+export interface CompatiblePackage {
+  name:     string;
+  versions: string[];
+}
+
+export interface PatchOption {
+  key:         string;
+  title:       string;
+  description: string;
+  required:    boolean;
+  choices:     string[];
+}

src/routes/+layout.ts

@@ -0,0 +1,10 @@
+import type { Repository } from '$lib/types';
+
+export type APIOutput = { repositories: Repository[] };
+
+export async function load({
+  fetch
+}): APIOutput {
+  const response = await fetch('https://releases.rvcd.win/contributors');
+  return await response.json();
+}

src/routes/credits/+page.svelte

@@ -1,28 +1,20 @@
 <script lang="ts">
+  import type { APIOutput } from '../+layout';
 	import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-	import ContributorsStore from '../../lib/stores/ContributorsStore.js';
     import Footer from '$lib/components/molecules/Footer.svelte';
-	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	let data;
+  // From the layout hydration. See +layout.ts
-
+	export let data: APIOutput;
-	onMount(() => {
-		ContributorsStore.subscribe(async (e) => {
-			data = await e;
-		});
-	});
 </script>
 
 <div class="wrapper contrib-grid">
-	{#if data}
 		{#each data.repositories as { contributors, name }}
 			<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 				<ContributorHost contribs={contributors} repo={name} />
 			</div>
 		{/each}
-	{/if}
 </div>
 
 <style>
@@ -34,4 +26,4 @@
 	}
 </style>
 
-<Footer />
+<Footer />

src/routes/patches/+page.svelte

@@ -1,43 +1,24 @@
 <script lang="ts">
+    import type { Output } from "./+page";
     import Patch from "$lib/components/atoms/Patch.svelte";
-    import PatchesStore from "$lib/stores/PatchesStore";
     import Footer from "$lib/components/molecules/Footer.svelte";
-    import { onMount } from "svelte";
     import { fly } from 'svelte/transition';
     import { quintOut } from 'svelte/easing';
 
-    let patches: any;
+    export let data: Output;
-    let pkg_list: Object[] = [];
+
+    let { patches, packages } = data;
 
     let current: boolean | Object = false;
-
-    onMount (async () => {
-        PatchesStore.subscribe(async (e) => {
-            patches = await e;
-            console.log(patches);
-
-            for (let i = 0; i < patches.length; i++) {
-                patches[i].compatiblePackages.forEach(pkg => {
-                    let index = pkg_list.findIndex(x => x == pkg.name); 
-                    if (index === -1) {
-                        pkg_list.push(pkg.name);
-                        pkg_list = pkg_list;
-                    };
-                });
-            };
-        })
-    });
-    
 </script>
 
 <section>
     <aside class="menu">
-        {#if pkg_list}
         <div in:fly="{{ y: 10, easing: quintOut, duration: 750 }}">
             <h5>PACKAGES</h5>
             <hr/>
             <div class="package-list">
-                {#each pkg_list as pkg}
+                {#each packages as pkg}
                     <div 
                         class="package"
                         class:selected={ current === pkg }
@@ -48,10 +29,8 @@
                 {/each}
             </div>
         </div>
-        {/if}
     </aside>
 
-    {#if patches}
         <div class="patches-list patches-container">
             {#each patches as patch, i}
                 <div in:fly="{{ x: 10, easing: quintOut, duration: 750, delay: (80 * i)}}">
@@ -72,7 +51,6 @@
                 </div>
             {/each}
         </div>
-    {/if}
 </section>
 
 <Footer/>

src/routes/patches/+page.ts

@@ -0,0 +1,24 @@
+import type { Patch } from '$lib/types';
+
+export type Output = { patches: Patch[], packages: string[] };
+
+export async function load({
+  fetch
+}): Output {
+  const response = await fetch('https://releases.rvcd.win/patches');
+  const json = await response.json();
+
+  let pkg_list = [];
+
+  // yes
+  for (let i = 0; i < json.length; i++) {
+    json[i].compatiblePackages.forEach(pkg => {
+      let index = pkg_list.findIndex(x => x == pkg.name);
+      if (index === -1) {
+        pkg_list.push(pkg.name);
+      };
+    });
+  };
+
+  return { patches: json, packages: pkg_list };
+}