show version correctly (#544)

* show version correctly

* fix lint/prettier

* button style

Author: ABevier

modules/desktop/electron/libs/initialize.ts

@@ -1,13 +1,11 @@
 import fs from "fs";
 import { getGuiPath } from "./tea-dir";
 import log from "./logger";
-import semver from "semver";
 import { cliBinPath, asyncExec } from "./cli";
 import { createInitialSessionFile } from "./auth";
-import semverCompare from "semver/functions/compare";
+import { SemVer, isValidSemVer } from "@tea/libtea";
 
-// Versions before this do not support the --json flag
-const MINIMUM_TEA_VERSION = "0.28.3";
+const MINIMUM_TEA_VERSION = "0.31.2";
 
 const destinationDirectory = getGuiPath();
 
@@ -35,55 +33,46 @@ export async function initializeTeaCli(): Promise<string> {
 }
 
 async function initializeTeaCliInternal(): Promise<string> {
-  try {
-    let binCheck = "";
-    let needsUpdate = false;
+  let binCheck = "";
+  let needsUpdate = false;
 
-    // Create the destination directory if it doesn't exist
-    if (!fs.existsSync(destinationDirectory)) {
-      fs.mkdirSync(destinationDirectory, { recursive: true });
-    }
+  // Create the destination directory if it doesn't exist
+  if (!fs.existsSync(destinationDirectory)) {
+    fs.mkdirSync(destinationDirectory, { recursive: true });
+  }
 
-    // replace this with max's pr
-    const curlCommand = `curl --insecure -L -o "${cliBinPath}" "${binaryUrl}"`;
-
-    const exists = fs.existsSync(cliBinPath);
-    if (exists) {
-      log.info("binary tea already exists at", cliBinPath);
-      try {
-        binCheck = await asyncExec(`cd ${destinationDirectory} && ./tea --version`);
-        const teaVersion = binCheck.toString().split(" ")[1];
-        if (semverCompare(teaVersion, MINIMUM_TEA_VERSION) < 0) {
-          log.info("binary tea version is too old, updating");
-          needsUpdate = true;
-        }
-      } catch (error) {
-        // probably binary is not executable or no permission
-        log.error("Error checking tea binary version:", error);
+  // replace this with max's pr
+  const curlCommand = `curl --insecure -L -o "${cliBinPath}" "${binaryUrl}"`;
+
+  const exists = fs.existsSync(cliBinPath);
+  if (exists) {
+    log.info("binary tea already exists at", cliBinPath);
+    try {
+      binCheck = await asyncExec(`cd ${destinationDirectory} && ./tea --version`);
+      const teaVersion = binCheck.toString().split(" ")[1].trim();
+      if (new SemVer(teaVersion).compare(new SemVer(MINIMUM_TEA_VERSION)) < 0) {
+        log.info("binary tea version is too old, updating");
         needsUpdate = true;
-        await asyncExec(`cd ${destinationDirectory} && rm tea`);
-      }
-    }
-
-    if (!exists || needsUpdate) {
-      try {
-        await asyncExec(curlCommand);
-        log.info("Binary downloaded and saved to", cliBinPath);
-        await asyncExec("chmod u+x " + cliBinPath);
-        log.info("Binary is now ready for use at", cliBinPath);
-        binCheck = await asyncExec(`cd ${destinationDirectory} && ./tea --version`);
-      } catch (error) {
-        log.error("Error setting-up tea binary:", error);
       }
+    } catch (error) {
+      // probably binary is not executable or no permission
+      log.error("Error checking tea binary version:", error);
+      needsUpdate = true;
+      await asyncExec(`cd ${destinationDirectory} && rm tea`);
     }
+  }
 
-    const version = binCheck.toString().split(" ")[1];
-    log.info("binary tea version:", version);
-    return semver.valid(version.trim()) ? version : "";
-  } catch (error) {
-    log.error(error);
-    return "";
+  if (!exists || needsUpdate) {
+    await asyncExec(curlCommand);
+    log.info("Binary downloaded and saved to", cliBinPath);
+    await asyncExec("chmod u+x " + cliBinPath);
+    log.info("Binary is now ready for use at", cliBinPath);
+    binCheck = await asyncExec(`cd ${destinationDirectory} && ./tea --version`);
   }
+
+  const version = binCheck.toString().split(" ")[1];
+  log.info("binary tea version:", version);
+  return isValidSemVer(version.trim()) ? version : "";
 }
 
 export default async function initialize(): Promise<string> {

modules/desktop/electron/libs/tea-dir.ts

@@ -2,12 +2,11 @@
 import fs from "fs";
 import path from "path";
 import { app } from "electron";
-import semver, { SemVer } from "semver";
 import log from "./logger";
 import type { InstalledPackage } from "../../src/libs/types";
-import semverCompare from "semver/functions/compare";
 import { mkdirp } from "mkdirp";
 import fetch from "node-fetch";
+import { SemVer, isValidSemVer } from "@tea/libtea";
 
 type Dir = {
   name: string;
@@ -34,26 +33,26 @@ export async function getInstalledPackages(): Promise<InstalledPackage[]> {
   log.info("recursively reading:", pkgsPath);
   const folders = await deepReadDir({
     dir: pkgsPath,
-    continueDeeper: (name: string) => !semver.valid(name) && name !== ".tea",
-    filter: (name: string) => !!semver.valid(name) && name !== ".tea"
+    continueDeeper: (name: string) => !isValidSemVer(name) && name !== ".tea",
+    filter: (name: string) => !!isValidSemVer(name) && name !== ".tea"
   });
 
   const bottles = folders
     .map((p: string) => p.split(".tea/")[1])
     .map(parseVersionFromPath)
     .filter((v): v is ParsedVersion => !!v)
-    .sort((a, b) => semverCompare(b.semVer, a.semVer));
+    .sort((a, b) => b.semVer.compare(a.semVer));
 
   log.info("installed bottles:", bottles.length);
 
   return bottles.reduce<InstalledPackage[]>((pkgs, bottle) => {
     const pkg = pkgs.find((v) => v.full_name === bottle.full_name);
     if (pkg) {
-      pkg.installed_versions.push(bottle.semVer.version);
+      pkg.installed_versions.push(bottle.semVer.toString());
     } else {
       pkgs.push({
         full_name: bottle.full_name,
-        installed_versions: [bottle.semVer.version]
+        installed_versions: [bottle.semVer.toString()]
       });
     }
     return pkgs;
@@ -65,7 +64,7 @@ const parseVersionFromPath = (versionPath: string): ParsedVersion | null => {
     const path = versionPath.trim().split("/");
     const version = path.pop();
     return {
-      semVer: new SemVer(semver.clean(version || "") || ""),
+      semVer: new SemVer(version ?? ""),
       full_name: path.join("/")
     };
   } catch (e) {
@@ -119,9 +118,9 @@ export const deepReadDir = async ({
       if (f.isDirectory() && deeper) {
         const nextFiles = await deepReadDir({ dir: nextPath, continueDeeper, filter });
         arrayOfFiles.push(...nextFiles);
-      } else if (filter && filter(f.name)) {
+      } else if (!f.isSymbolicLink() && filter && filter(f.name)) {
         arrayOfFiles.push(nextPath);
-      } else if (!filter) {
+      } else if (!f.isSymbolicLink() && !filter) {
         arrayOfFiles.push(nextPath);
       }
     }

modules/desktop/package.json

@@ -39,6 +39,7 @@
     "@sveltejs/adapter-static": "^1.0.0-next.48",
     "@sveltejs/kit": "^1.15.9",
     "@tea/ui": "workspace:*",
+    "@tea/libtea": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/svelte": "^3.2.2",
     "@types/bcryptjs": "^2.4.2",
@@ -103,7 +104,6 @@
     "mousetrap": "^1.6.5",
     "pushy-electron": "^1.0.11",
     "renderer": "link:@types/electron/renderer",
-    "semver": "^7.3.8",
     "svelte-infinite-scroll": "^2.0.1",
     "svelte-markdown": "^0.2.3",
     "svelte-watch-resize": "^1.0.3",
@@ -114,7 +114,8 @@
   },
   "pnpm": {
     "onlyBuiltDependencies": [
-      "@tea/ui"
+      "@tea/ui",
+      "@tea/libtea"
     ]
   },
   "homepage": "https://tea.xyz",

modules/desktop/src/components/package-banner/package-banner.svelte

@@ -5,7 +5,6 @@
   import Button from "@tea/ui/button/button.svelte";
   import ButtonIcon from "@tea/ui/button-icon/button-icon.svelte";
   import ToolTip from "@tea/ui/tool-tip/tool-tip.svelte";
-  import semverCompare from "semver/functions/compare";
   import ProgressCircle from "@tea/ui/progress-circle/progress-circle.svelte";
 
   import type { GUIPackage } from "$libs/types";
@@ -16,6 +15,7 @@
   import PackageImage from "../package-card/bg-image.svelte";
   import PackageVersionSelector from "$components/package-install-button/package-version-selector.svelte";
   import { fixPackageName } from "$libs/packages/pkg-utils";
+  import { semverCompare } from "$libs/packages/pkg-utils";
 
   export let pkg: GUIPackage;
   let installing = false;

modules/desktop/src/components/package-card/package-card.svelte

@@ -57,7 +57,7 @@
           <div class="flex w-fit flex-col items-center">
             <div class="install-button {layout}" on:mousedown={preventPropagation}>
               {#if pkg.state === PackageStates.INSTALLED}
-                <PackageInstalledBadge version={pkg.version} />
+                <PackageInstalledBadge {pkg} />
               {:else}
                 <PackageInstallButton
                   {pkg}

modules/desktop/src/components/package-install-button/package-install-button.svelte

@@ -24,6 +24,13 @@
     return state === PackageStates.INSTALLING || state === PackageStates.UPDATING;
   };
 
+  const getVersion = (pkg: GUIPackage) => {
+    if (pkg.state === PackageStates.INSTALLED) {
+      return pkg.installed_versions?.[0] ?? pkg.version;
+    }
+    return pkg.version;
+  };
+
   const badgeClass: Record<PackageStates, string> = {
     [PackageStates.AVAILABLE]: "install-badge",
     [PackageStates.INSTALLING]: "install-badge",
@@ -53,7 +60,7 @@
       >
         <div class="flex items-center gap-x-2">
           <div>{ctaLabel}</div>
-          <div class="version-label {badgeClass[pkg.state]}">{pkg.version}</div>
+          <div class="version-label {badgeClass[pkg.state]}">v{getVersion(pkg)}</div>
         </div>
         {#if hasVersionSelectorDropdown}
           <i class="icon-downward-arrow flex" />

modules/desktop/src/components/package-install-button/package-installed-badge.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-  export let version = "1.0.0";
+  import type { GUIPackage } from "$libs/types";
+
+  export let pkg: GUIPackage | null = null;
 </script>
 
 <div class="container relative h-full">
   <div class="content flex items-center justify-center gap-2 p-2">
     <i class="icon-check-circle-o flex text-sm text-[#00ffd0]" />
     <div class="text-xs">INSTALLED</div>
     <div class="rounded-sm bg-white px-1 text-[10px] leading-[12px] text-black">
-      v{version}
+      v{pkg?.installed_versions?.[0]}
     </div>
   </div>
 </div>

modules/desktop/src/components/package-install-button/package-version-selector.svelte

@@ -2,7 +2,7 @@
   import { PackageStates, type GUIPackage } from "$libs/types";
   import clickOutside from "@tea/ui/lib/clickOutside";
   import PackageStateButton from "./package-install-button.svelte";
-  import semver from "semver";
+  import { semverCompare } from "$libs/packages/pkg-utils";
 
   export let buttonSize: "small" | "large" = "small";
   export let pkg: GUIPackage;
@@ -27,7 +27,7 @@
 
   $: installedVersions = pkg.installed_versions || [];
   $: allVersions = Array.from(new Set([pkg.version, ...availableVersions])).sort(
-    (a: string, b: string) => semver.rcompare(a, b)
+    (a: string, b: string) => semverCompare(b, a)
   );
 
   const handleClick = (evt: MouseEvent, version: string) => {

modules/desktop/src/libs/packages/pkg-utils.ts

@@ -1,6 +1,6 @@
+import log from "$libs/logger";
 import type { GUIPackage } from "$libs/types";
-import { clean } from "semver";
-import semverCompare from "semver/functions/compare";
+import { SemVer } from "@tea/libtea";
 
 // Find a list of available versions for a package based on the bottles
 export const findAvailableVersions = (pkg: Pick<GUIPackage, "bottles" | "version">) => {
@@ -15,10 +15,19 @@ export const findAvailableVersions = (pkg: Pick<GUIPackage, "bottles" | "version
     if (b.arch === arch) versionSet.add(b.version);
   }
 
-  return Array.from(versionSet).sort((a, b) => semverCompare(cleanVersion(b), cleanVersion(a)));
+  return Array.from(versionSet).sort((a, b) => semverCompare(b, a));
 };
 
-export const cleanVersion = (version: string) => clean(version) || "0.0.0";
+export const semverCompare = (a: string, b: string) => {
+  try {
+    return new SemVer(a).compare(new SemVer(b));
+  } catch (err) {
+    log.error(`Failed to compare versions ${a} and ${b}`, err);
+    // This is bad if it happens, but it's better than crashing, the tea semver library is very permissive
+    // and it would be extremely unlikely for this to happen in practice as how would something get bottled in the first place?
+    return a.localeCompare(b);
+  }
+};
 
 // Add a new version to the list of installed versions while maintaining the sort order
 export const addInstalledVersion = (
@@ -29,9 +38,7 @@ export const addInstalledVersion = (
     return [newVersion];
   }
 
-  return [...installedVersions, newVersion].sort((a, b) =>
-    semverCompare(cleanVersion(b), cleanVersion(a))
-  );
+  return [...installedVersions, newVersion].sort((a, b) => semverCompare(b, a));
 };
 
 export const findRecentInstalledVersion = (pkg: GUIPackage) => {
@@ -50,3 +57,13 @@ export const isInstalling = (pkg: GUIPackage) => {
 export const fixPackageName = (title: string) => {
   return title.replace("-", "\u2011");
 };
+
+// Checks if an installed package is up to date. It is assumed that the package is installed.
+export const isPackageUpToDate = (pkg: GUIPackage) => {
+  if (!pkg.installed_versions?.length) {
+    return false;
+  }
+
+  // if the installed version is equal or newer than the latest version, it's up to date
+  return semverCompare(pkg.installed_versions[0], pkg.version) >= 0;
+};

modules/desktop/src/libs/stores/pkgs.ts

@@ -27,6 +27,7 @@ import { notificationStore } from "$libs/stores";
 import withRetry from "$libs/utils/retry";
 
 import log from "$libs/logger";
+import { isPackageUpToDate } from "../packages/pkg-utils";
 
 const packageRefreshInterval = 1000 * 60 * 60; // 1 hour
 
@@ -80,7 +81,7 @@ export default function initPackagesStore() {
       return PackageStates.AVAILABLE;
     }
 
-    const isUpToDate = pkg.version === pkg.installed_versions?.[0];
+    const isUpToDate = isPackageUpToDate(pkg);
 
     if (isInstalling(pkg)) {
       const hasNoVersions = !pkg.installed_versions?.length;