feat: search packages with websocket (#434)

* feat: search packages with websocket

* refactor: enhance searchnav styles

* chore: finalize style

* feat: add hint for min & max package length

* chore: enhance search view css

* fix: use dataset to work with package name

* refactor: hide network searchbar when not required

* chore: improve logs

* fix: use template to render home view

* refactor: enhance initSearchBar

* fix: bug with searchbar display: none

* fix(css): remove overflow-x: auto on .packages

* chore: improve package close button css

* chore: add i18n for searchbar placeholder

* feat(search): allow to remove packages from cache

* fix: make new current package active on reload

* feat(search): add spinner while searching packages

* feat(search): add spinner while searching package versions

* feat(search): move search spinner into input

* fix: init on reload when removed last active package only

* refactor: split interface init function

* feat: highlight exact match package

* feat: close package info when switching network

* fix: network searchbar

---------

Co-authored-by: fraxken <[email protected]>

Author: PierreDemailly

eslint.config.mjs

@@ -1,32 +1,24 @@
-// Import Node.js Dependencies
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+import { ESLintConfig, globals } from "@openally/config.eslint";
 
-// Import Third-party Dependencies
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname
-});
-
-export default [{
-  ignores: ["**/node_modules/", "**/tmp/", "**/dist/", "**/coverage/", "**/fixtures/"]
-}, ...compat.extends("@nodesecure/eslint-config"), {
-  languageOptions: {
-    sourceType: "module",
-
-    parserOptions: {
-      requireConfigFile: false
+export default [
+  ...ESLintConfig,
+  {
+    rules: {
+      "func-style": "off",
+      "no-invalid-this": "off",
+      "no-inner-declarations": "off",
+      "no-case-declarations": "off",
+      // TODO: enable this rule when migrating to @topcli/cmder
+      "default-param-last": "off"
+    },
+    languageOptions: {
+      sourceType: "module",
+      globals: {
+        ...globals.browser
+      }
     }
   },
-
-  rules: {
-    "func-style": "off",
-    "no-invalid-this": "off",
-    "no-inner-declarations": "off",
-    "no-case-declarations": "off"
+  {
+  ignores: ["**/node_modules/", "**/tmp/", "**/dist/", "**/coverage/", "**/fixtures/"]
   }
-}];
+];

i18n/english.js

@@ -1,4 +1,5 @@
-/* eslint-disable max-len */
+/* eslint-disable @stylistic/max-len */
+
 // Import Third-party Dependencies
 import { taggedString as tS } from "@nodesecure/i18n";
 
@@ -188,7 +189,11 @@ const ui = {
     "Node.js core modules": "Node.js core modules",
     "Available licenses": "Available licenses",
     "Available flags": "Available flags",
-    default: "Search options"
+    default: "Search options",
+    packagesCache: "Packages available in the cache",
+    noPackageFound: "No package found",
+    packageLengthErr: "Package name must be between 2 and 64 characters.",
+    registryPlaceholder: "Search packages"
   },
   legend: {
     default: "The package is fine.",

i18n/french.js

@@ -1,4 +1,5 @@
-/* eslint-disable max-len */
+/* eslint-disable @stylistic/max-len */
+
 // Import Third-party Dependencies
 import { taggedString as tS } from "@nodesecure/i18n";
 
@@ -188,7 +189,11 @@ const ui = {
     "Node.js core modules": "Modules de base de Node.js",
     "Available licenses": "Licences disponibles",
     "Available flags": "Drapeaux disponibles",
-    default: "Options de recherche"
+    default: "Options de recherche",
+    packagesCache: "Packages disponibles dans le cache",
+    noPackageFound: "Aucun package trouvé",
+    packageLengthErr: "Le nom du package doit être compris entre 2 et 64 caractères.",
+    registryPlaceholder: "Recherche de packages"
   },
   legend: {
     default: "Rien à signaler.",

package.json

@@ -12,13 +12,14 @@
     "node": ">=18"
   },
   "scripts": {
-    "eslint": "eslint bin src test workspaces",
-    "eslint-fix": "npm run eslint -- --fix",
+    "lint": "eslint bin src test workspaces",
+    "lint-fix": "npm run lint -- --fix",
     "prepublishOnly": "rimraf ./dist && npm run build && pkg-ok",
     "build": "node ./esbuild.config.js",
-    "test": "npm run test-only && npm run eslint",
-    "test-only": "glob -c \"node --loader=esmock --no-warnings --test\" \"test/**/*.test.js\"",
-    "coverage": "c8 --reporter=lcov npm run test"
+    "test": "npm run test-only && npm run lint",
+    "test-only": "glob -c \"node --loader=esmock --no-warnings --test-concurrency 1 --test\" \"test/**/*.test.js\"",
+    "coverage": "c8 --reporter=lcov npm run test",
+    "clear:cache": "node ./scripts/clear-cache.js"
   },
   "files": [
     "bin",
@@ -62,14 +63,13 @@
   "homepage": "https://github.com/NodeSecure/cli#readme",
   "devDependencies": {
     "@myunisoft/httpie": "^5.0.0",
-    "@nodesecure/eslint-config": "2.0.0-beta.0",
     "@nodesecure/size-satisfies": "^1.1.0",
     "@nodesecure/vis-network": "^1.4.0",
+    "@openally/config.eslint": "^1.1.0",
     "@types/node": "^22.2.0",
     "c8": "^10.1.2",
     "cross-env": "^7.0.3",
     "esbuild": "^0.23.0",
-    "eslint": "^9.8.0",
     "esmock": "^2.6.7",
     "glob": "^11.0.0",
     "http-server": "^14.1.1",
@@ -104,10 +104,13 @@
     "kleur": "^4.1.5",
     "ms": "^2.1.3",
     "open": "^10.1.0",
+    "pino": "^9.3.2",
+    "pino-pretty": "^11.2.2",
     "polka": "^0.5.2",
     "sade": "^1.8.1",
     "semver": "^7.6.3",
     "sirv": "^2.0.4",
+    "ws": "^8.18.0",
     "zup": "0.0.2"
   }
 }

public/common/utils.js

@@ -250,3 +250,15 @@ export function currentLang() {
 
   return detectedLang in window.i18n ? detectedLang : "english";
 }
+
+export function debounce(callback, delay) {
+  let timer;
+
+  // eslint-disable-next-line func-names
+  return function() {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      callback();
+    }, delay);
+  };
+}

public/components/navigation/navigation.css

@@ -1,4 +1,4 @@
-nav {
+nav#aside {
   width: 70px;
   flex-shrink: 0;
   background: var(--primary);
@@ -8,60 +8,66 @@ nav {
   flex-direction: column;
   z-index: 40;
 }
-  nav > .nsecure-logo {
-    margin-top: 20px;
-  }
 
-  nav > ul {
-    width: inherit;
-    display: flex;
-    margin-top: 10px;
-    flex-direction: column;
-    flex-grow: 1;
-    margin-bottom: 20px;
-  }
+nav#aside>.nsecure-logo {
+  margin-top: 20px;
+}
 
-  nav > ul li {
-    height: 70px;
-    display: flex;
-    position: relative;
-    justify-content: center;
-    align-items: center;
-  }
-  nav > ul li+li {
-    margin-top: 10px;
-  }
+nav#aside>ul {
+  width: inherit;
+  display: flex;
+  margin-top: 10px;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-bottom: 20px;
+}
 
-    nav > ul li:not(.active):hover {
-      cursor: pointer;
-      background: rgba(50, 200, 255, 0.085);
-    }
+nav#aside>ul li {
+  height: 70px;
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+}
+
+nav#aside>ul li+li {
+  margin-top: 10px;
+}
 
-    nav > ul li.active:before {
-      background: var(--secondary);
-      position: absolute;
-      left: 0;
-      top: 17.5px;
-      height: 35px;
-      width: 4px;
-      border-radius: 0 4px 4px 0;
-      content: "";
-    }
+nav#aside>ul li:not(.active):hover {
+  cursor: pointer;
+  background: rgba(50, 200, 255, 0.085);
+}
+
+nav#aside>ul li.active:before {
+  background: var(--secondary);
+  position: absolute;
+  left: 0;
+  top: 17.5px;
+  height: 35px;
+  width: 4px;
+  border-radius: 0 4px 4px 0;
+  content: "";
+}
+
+nav#aside>ul li>i {
+  font-size: 24px;
+}
+
+nav#aside>ul li.active,
+nav#aside>ul li.active span {
+  color: var(--secondary);
+}
+
+nav#aside>ul li>span {
+  position: absolute;
+  left: 10px;
+  bottom: 5px;
+  font-size: 12px;
+  color: #FFF;
+  font-weight: bold;
+}
 
-    nav > ul li > i {
-      font-size: 24px;
-    }
-    nav > ul li.active, nav > ul li.active span {
-      color: var(--secondary);
-    }
-    nav > ul li > span {
-      position: absolute;
-      left: 10px;
-      bottom: 5px;
-      font-size: 12px;
-      color: #FFF;
-      font-weight: bold;
-    }
-.bottom-nav {
+nav#aside>ul li.bottom-nav {
   margin-top: auto;
 }

public/components/navigation/navigation.js

@@ -5,6 +5,7 @@ import { PackageInfo } from "../package/package.js";
 const kAvailableView = new Set([
   "network--view",
   "home--view",
+  "search--view",
   "settings--view"
 ]);
 
@@ -50,6 +51,10 @@ export class ViewNavigation {
           this.onNavigationSelected(this.menus.get("settings--view"));
           break;
         }
+        case hotkeys.search: {
+          this.onNavigationSelected(this.menus.get("search--view"));
+          break;
+        }
       }
     });
   }
@@ -68,6 +73,11 @@ export class ViewNavigation {
     selectedNav.classList.add("active");
     this.setAnchor(menuName);
 
+    const searchbar = document.getElementById("searchbar");
+    if (searchbar) {
+      searchbar.style.display =  menuName === "network--view" ? "flex" : "none";
+    }
+
     this.activeMenu = selectedNav;
   }