feat: rewrite mod version dropdown

src/components/GradleVersionInfo.astro

@@ -0,0 +1,172 @@
+---
+interface Props {
+  modid: string
+}
+const { modid } = Astro.props
+---
+
+<gradle-version modid={modid}>
+  <div class="wrapper">
+    <label for="loader-selector" class="sr-only">Select the Modloader</label>
+    <select
+      name="loader-selector"
+      id="loader-selector"
+      class="selector cursor-pointer rounded-md pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
+      aria-label="Choose the Modloader">
+      
+    </select>
+    <label for="version-selector" class="sr-only">Select the Version</label>
+    <select
+      name="version-selector"
+      id="version-selector"
+      class="selector cursor-pointer rounded-md ml-2 pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
+      aria-label="Choose the Version">
+    </select>
+  </div>
+  <pre class="mt-2"><code class="language-java" id=`${modid}-version` >{modid}_version = <span id="resulting-version"/></code></pre>
+</gradle-version>
+
+<script>
+class VersionInfo {
+    loaderList: any;
+    versionList: any;
+    finishedArray: any;
+    modInfo: any;
+    
+    selectedLoader: string;
+    selectedVersion: string;
+
+    constructor(loaderList: any, finishedArray: any, modInfo: any) {
+        this.loaderList = loaderList;
+        this.finishedArray = finishedArray;
+        this.modInfo = modInfo;
+        this.selectedLoader = this.loaderList[0];
+        this.versionList = this.loadVersionList();
+        this.selectedVersion = this.versionList[0];
+    }
+
+    setLoaderVersion(version: string) {
+        this.selectedLoader = version;
+        this.versionList = this.loadVersionList();
+    }
+    setGameVersion(version: string) {
+        this.selectedVersion = version;
+    }
+
+    /**
+     * Tries to get the mod version for the selected Minecraft version and Modloader
+     * @returns The resulting mod version
+     */
+    getResultingVersion(): string {
+        let resultingVersionID = this.finishedArray[this.selectedLoader + "+" + this.selectedVersion];
+        let resultingVersion = "Not available";
+        if (this.selectedLoader != "forge") resultingVersion += " (yet)"
+        try {
+            resultingVersion = this.modInfo.find((info: any) => info.id == resultingVersionID).version_number;
+        } catch {}
+        return resultingVersion;
+    }
+
+    /**
+     * Loads the version list from the finishedArray
+     * @returns A list of all the versions for the selected Modloader
+     * */
+    loadVersionList() {
+        let selectedLoader = this.selectedLoader;
+        let versionMap = Object.keys(this.finishedArray).reduce(function(map, value) { 
+            if (value.startsWith(selectedLoader)) {
+                const version = value.split("+")[1];
+                if (!Object.values(map).includes(version)) {
+                    map[version] = "";
+                }
+            }
+            return map;
+        }, {});
+        let versionList = Object.keys(versionMap).sort().reverse();
+        versionList = versionList.filter((version) => !version.includes("w") // Sorts out snapshots
+            && (!version.includes("-") || !versionList.includes(version.split("-")[0]) // Sorts out pre-releases/release candidates for releases that are already out
+        ));
+        return versionList;
+    }
+    
+    /**
+     * Loads the version info from Modrinth
+     * @param modid The ID of the mod
+     */
+    static async load(modid: string): Promise<VersionInfo> {
+        const modInfo = await fetch(`https://api.modrinth.com/v2/project/${modid}/version`).then((response) => response.json())
+        const loaderList = ['fabric', 'quilt', 'forge', 'neoforge'];
+        let sortedModInfo = Object.values(modInfo).sort((entry1: any, entry2: any) => new Date(entry1.date_published) < new Date(entry2.date_published) ? -1 : 1);
+
+        var finishedArray = sortedModInfo.reduce(function(map: any, value: any) {
+            value.game_versions.forEach((version: string) => {
+                value.loaders.forEach((loader: string) => {
+                    const loaderAndVersion = loader + "+" +version;
+                    map[loaderAndVersion] = value.id;
+                });
+            });
+        return map;
+        }, {});
+
+        return new VersionInfo(loaderList, finishedArray, modInfo);
+    }
+}
+
+// Define the behaviour for our new type of HTML element.
+class VersionElement extends HTMLElement {
+  static observedAttributes = ["modid"];
+
+  connectedCallback() {
+    var modid = this.getAttribute("modid");
+    if (modid == null) return;
+    
+    // Get the gradle.properties code block
+    const versionLabel = document.getElementById("resulting-version");
+    // Get the 2 selectors defined above
+    const loaderSelector = document.getElementById("loader-selector");
+    const versionSelector = document.getElementById("version-selector");
+    
+    VersionInfo.load(modid).then((versionInfo) => {
+        if (loaderSelector instanceof HTMLSelectElement) {
+            versionInfo.loaderList.forEach((loader: string) => {
+                loaderSelector.options[loaderSelector.options.length] = new Option(loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1), loader);
+            })
+        }
+        if (versionSelector instanceof HTMLSelectElement) {
+            versionInfo.versionList.forEach((version: string) => {
+                versionSelector.options[versionSelector.options.length] = new Option(version, version);
+            })
+        }
+
+        if (versionLabel) versionLabel.innerText = versionInfo.getResultingVersion();
+
+        loaderSelector?.addEventListener("change", async (e) => {
+            const {
+                target: { value }, // Returns the current loader string
+            } = e;
+
+            versionInfo.setLoaderVersion(value);
+            if (versionLabel) versionLabel.innerText = versionInfo.getResultingVersion();
+        });
+        versionSelector?.addEventListener("change", async (e) => {
+            const {
+                target: { value }, // Returns the current version string
+            } = e;
+
+            versionInfo.setGameVersion(value);
+            if (versionLabel) versionLabel.innerText = versionInfo.getResultingVersion();
+        });
+    });
+  }
+
+  
+}
+// Tell the browser to use our VersionElement class for <gradle-version> elements.
+customElements.define('gradle-version', VersionElement);
+</script>
+
+<style lang="scss" is:global>
+  .selector:is(.darkmode *) {
+    background-color: var(--dark-100);
+  }
+</style>

src/components/VersionDropdown.astro

@@ -1,72 +0,0 @@
----
-import { Icon } from 'astro-icon/components'
-import { loaderList, versionList} from '../js/modversion.js'
----
-
-<version-dropdown>
-  <div class="wrapper">
-    <label for="loader-selector" class="sr-only">Select the Modloader</label>
-    <select
-      name="loader-selector"
-      id="loader-selector"
-      class="selector cursor-pointer rounded-md pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
-      aria-label="Choose the Modloader">
-      { loaderList.map((loader) =>
-        <option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option>
-      )}
-    </select>
-    <label for="version-selector" class="sr-only">Select the Version</label>
-    <select
-      name="version-selector"
-      id="version-selector"
-      class="selector cursor-pointer rounded-md ml-2 pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
-      aria-label="Choose the Version">
-      { versionList.map((version) =>
-        <option value={version}>{version}</option>
-      )}
-      <Icon name="ion:copy-outline"></Icon>
-    </select>
-  </div>
-</version-dropdown>
-
-<script>
-import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/modversion";
-// Define the behaviour for our new type of HTML element.
-class VersionDropdown extends HTMLElement {
-  connectedCallback() {
-    // Get the gradle.properties code block
-    const versionLabel = document.getElementById("midnightlib-version");
-    // Get the 2 selectors defined above
-    const loaderSelector = document.getElementById("loader-selector");
-    const versionSelector = document.getElementById("version-selector");
-
-    loaderSelector?.addEventListener("change", async (e) => {
-      const {
-        target: { value }, // Returns the current loader string
-      } = e;
-
-      setLoaderVersion(value);
-      if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
-    });
-    versionSelector?.addEventListener("change", async (e) => {
-      const {
-        target: { value }, // Returns the current version string
-      } = e;
-
-      setGameVersion(value);
-      if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
-    });
-  }
-}
-// Tell the browser to use our VersionDropdown class for <version-dropdown> elements.
-customElements.define('version-dropdown', VersionDropdown);
-</script>
-
-<style lang="scss" is:global>
-  #loader-selector::after {
-    content: "v";
-  }
-  .selector:is(.darkmode *) {
-    background-color: var(--dark-100);
-  }
-</style>

src/js/modversion.js

@@ -1,45 +0,0 @@
-export const modInfo = await fetch('https://api.modrinth.com/v2/project/midnightlib/version').then((response) => response.json())
-export const loaderList = ['fabric', 'quilt', 'forge', 'neoforge'];
-var finishedArray = modInfo.reduce(function(map, value) {
-  value.game_versions.forEach(version => {
-    value.loaders.forEach(loader => {
-      const loaderAndVersion = loader + "+" +version;
-      if (!Object.values(map).includes(loaderAndVersion)) {
-        if (value.featured) map[loaderAndVersion] = value.id;
-      }
-    });
-  });
-  return map;
-}, {});
-export var selectedLoader = "fabric";
-
-export var versionList = [];
-var versionMap = await Object.keys(finishedArray).reduce(function(map, value) { 
-    if (value.startsWith(selectedLoader)) {
-        const version = value.split("+")[1];
-        if (!Object.values(map).includes(version)) {
-            map[version] = "";
-        }
-    }
-    return map;
-}, {});
-versionList = await Object.keys(versionMap).sort().reverse();
-
-export var selectedVersion = "1.21.4";
-
-
-export function setLoaderVersion(version) {
-  selectedLoader = version;
-}
-export function setGameVersion(version) {
-  selectedVersion = version;
-}
-export function getResultingVersion() {
-  var resultingVersionID = finishedArray[selectedLoader + "+" + selectedVersion];
-  var resultingVersion = "Not available";
-  if (selectedLoader != "forge") resultingVersion += " (yet)"
-  try {
-    resultingVersion = modInfo.find((info) => info.id == resultingVersionID).version_number;
-  } catch {}
-  return resultingVersion;
-}

src/pages/wiki/midnightlib.mdx

@@ -3,10 +3,9 @@ layout: ../../layouts/MarkdownLayout.astro
 title: MidnightLib Wiki
 ---
 
-import VersionDropdown from '../../components/VersionDropdown.astro'
+import GradleVersionInfo from '../../components/GradleVersionInfo.astro'
 import { Icon } from 'astro-icon/components'
 import { Notification } from 'accessible-astro-components'
-import { getResultingVersion } from '../../js/modversion.js'
 
 # MidnightLib Wiki
 
@@ -32,8 +31,7 @@ dependencies {
 }
 ```
 ### `gradle.properties`
-<VersionDropdown></VersionDropdown>
-{<pre><code className="language-java" id="midnightlib-version" >midnightlib_version = {getResultingVersion()}</code></pre>}
+<GradleVersionInfo modid='midnightlib' />
 
 <Notification type="info">
   <Icon name="ion:information-circle-outline" />