feat: allow to force a pan when opening package menu (#631)

Author: fraxken

public/components/bundlephobia/bundlephobia.js

@@ -86,21 +86,16 @@ class Bundlephobia extends LitElement {
 
   #bunldeTask = new Task(this, {
     task: async([name, version]) => {
-      try {
-        const {
-          gzip, size, dependencySizes
-        } = await getJSON(`/bundle/${this.#httpName(name)}/${version}`);
-        const fullSize = dependencySizes.reduce((prev, curr) => prev + curr.approximateSize, 0);
-
-        return {
-          gzip: prettyBytes(gzip),
-          min: prettyBytes(size),
-          full: prettyBytes(fullSize)
-        };
-      }
-      catch {
-        return null;
-      }
+      const {
+        gzip, size, dependencySizes
+      } = await getJSON(`/bundle/${this.#httpName(name)}/${version}`);
+      const fullSize = dependencySizes.reduce((prev, curr) => prev + curr.approximateSize, 0);
+
+      return {
+        gzip: prettyBytes(gzip),
+        min: prettyBytes(size),
+        full: prettyBytes(fullSize)
+      };
     },
     args: () => [this.name, this.version]
   });

public/components/package/package.js

@@ -6,6 +6,10 @@ import { EVENTS } from "../../core/events.js";
 
 export class PackageInfo {
   static DOMElementName = "package-info";
+  /**
+   * Used to force a specific menu to open when focusing a package in the network
+   */
+  static ForcedPackageMenu = null;
 
   static close() {
     const domElement = document.getElementById(PackageInfo.DOMElementName);
@@ -78,14 +82,6 @@ export class PackageInfo {
     packageHTMLElement.appendChild(
       this.render()
     );
-    this.enableNavigation(
-      window.settings.config.defaultPackageMenu
-    );
-    packageHTMLElement.setAttribute("class", "slide-in");
-
-    if (window.settings.config.disableExternalRequests) {
-      return;
-    }
 
     const panFiles = packageHTMLElement.querySelector("#pan-files");
     const files = document.createElement("package-files");
@@ -117,6 +113,12 @@ export class PackageInfo {
     scripts.id = "pan-dependencies";
     scripts.classList.add("package-container", "hidden");
     panDependencies.parentElement.replaceChild(scripts, panDependencies);
+
+    const menuToOpen = PackageInfo.ForcedPackageMenu ??
+      window.settings.config.defaultPackageMenu;
+    this.enableNavigation(menuToOpen);
+    PackageInfo.ForcedPackageMenu = null;
+    packageHTMLElement.setAttribute("class", "slide-in");
   }
 
   /**
@@ -153,7 +155,9 @@ export class PackageInfo {
    * @returns {void}
    */
   enableNavigation(name) {
-    const div = this.menus.has(name) ? this.menus.get(name) : this.menus.get("info");
+    const div = this.menus.has(name) ?
+      this.menus.get(name) :
+      this.menus.get("info");
 
     const isActive = div.classList.contains("active");
     const isDisabled = div.classList.contains("disabled");
@@ -166,10 +170,10 @@ export class PackageInfo {
     div.classList.add("active");
     this.activeNavigation.classList.remove("active");
 
-    const targetPan = document.getElementById(`pan-${name}`);
     const currentPan = document.getElementById(`pan-${this.activeNavigation.getAttribute("data-menu")}`);
-    targetPan.classList.remove("hidden");
     currentPan.classList.add("hidden");
+    const targetPan = document.getElementById(`pan-${name}`);
+    targetPan.classList.remove("hidden");
     document.querySelector(".container-title").textContent = dataTitle;
 
     this.activeNavigation = div;

public/components/package/pannels/files/files.js

@@ -11,39 +11,40 @@ import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 class Files extends LitElement {
   static styles = [scrollbarStyle, css`
   :host{
-  display: block;
-  overflow: hidden auto;
-  height: calc(100vh - 315px);
-  box-sizing: border-box;
+    display: block;
+    overflow: hidden auto;
+    height: calc(100vh - 315px);
+    box-sizing: border-box;
   }
 
  .head-title {
-  background: var(--primary-darker);
-  height: 28px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  border-bottom: 2px solid var(--primary-lighter);
-  border-radius: 2px 2px 0 0;
-}
+    background: var(--primary-darker);
+    height: 28px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid var(--primary-lighter);
+    border-radius: 2px 2px 0 0;
+  }
 
  .head-title.no-margin {
-  margin-top: 0;
-}
+    margin-top: 0;
+  }
 
  .head-title>p {
-  text-shadow: 1px 1px 5px rgb(20 20 20 / 50%);
-  font-size: 18px;
-  font-variant: small-caps;
-
-  /* lowercase is needed with small-caps font variant */
-  text-transform: lowercase;
-  font-family: mononoki;
-  font-weight: bold;
-  letter-spacing: 1px;
-  padding: 0 10px;
-}
+    text-shadow: 1px 1px 5px rgb(20 20 20 / 50%);
+    font-size: 18px;
+    font-variant: small-caps;
+
+    /* lowercase is needed with small-caps font variant */
+    text-transform: lowercase;
+    font-family: mononoki;
+    font-weight: bold;
+    letter-spacing: 1px;
+    padding: 0 10px;
+  }
 `];
+
   static properties = {
     package: { type: Object }
   };
@@ -107,7 +108,12 @@ class Files extends LitElement {
     `,
     () => nothing
   )}
-    <bundle-phobia name=${name} version=${version}></bundle-phobia>
+
+  ${when(
+    window.settings.config.disableExternalRequests === false,
+    () => html`<bundle-phobia name=${name} version=${version}></bundle-phobia>`,
+    () => nothing
+  )}
     `;
   }
 

public/components/views/home/home.js

@@ -8,7 +8,11 @@ import * as utils from "../../../common/utils.js";
 import "../../gauge/gauge.js";
 import "../../expandable/expandable.js";
 import { EVENTS } from "../../../core/events.js";
-import { fetchScorecardData, getScorecardLink } from "../../../common/scorecard.js";
+import { PackageInfo } from "../../package/package.js";
+import {
+  fetchScorecardData,
+  getScorecardLink
+} from "../../../common/scorecard.js";
 
 // Import Components
 import "./maintainers/maintainers.js";
@@ -22,11 +26,35 @@ const kFlagsToWatch = new Set([
   "hasScript"
 ]);
 
-const kEmojiDescription = {
-  "📦": "scripts",
-  "⚔️": "sensitive files",
-  "🚨": "vulnerabilities",
-  "⛔️": "deprecated"
+const kEmojiMetadata = {
+  "📦": {
+    description: "scripts",
+    menu: {
+      name: "dependencies",
+      priority: 3
+    }
+  },
+  "⚔️": {
+    description: "sensitive files",
+    menu: {
+      name: "files",
+      priority: 1
+    }
+  },
+  "🚨": {
+    description: "vulnerabilities",
+    menu: {
+      name: "vulnerabilities",
+      priority: 2
+    }
+  },
+  "⛔️": {
+    description: "deprecated",
+    menu: {
+      name: "info",
+      priority: 0
+    }
+  }
 };
 
 export class HomeView {
@@ -207,10 +235,16 @@ export class HomeView {
     for (let id = 0; id < deps.length; id++) {
       const dependency = deps[id];
 
-      const element = this.renderPackage(dependency);
+      const [element, menuToOpen] = this.renderPackage(dependency);
       element.addEventListener("click", () => {
         window.navigation.setNavByName("network--view");
-        setTimeout(() => this.nsn.focusNodeByNameAndVersion(dependency.name, dependency.version), 25);
+        setTimeout(() => {
+          PackageInfo.ForcedPackageMenu = menuToOpen;
+          this.nsn.focusNodeByNameAndVersion(
+            dependency.name,
+            dependency.version
+          );
+        }, 25);
       });
       if (hideItems && id >= maxPackages) {
         element.classList.add("hidden");
@@ -238,13 +272,30 @@ export class HomeView {
 
   renderPackage(dependencyVer) {
     const { name, version, flags, deprecated } = dependencyVer;
+
+    const menuToOpen = {
+      name: "info",
+      priority: 0
+    };
     const inlinedEmojis = getFlagsEmojisInlined(
       flags.filter((name) => kFlagsToWatch.has(name)),
       new Set(window.settings.config.ignore.flags)
     );
 
-    const childs = utils.extractEmojis(inlinedEmojis)
-      .map((emoji) => utils.createDOMElement("p", { text: `${emoji} ${kEmojiDescription[emoji]}` }));
+    const childs = [];
+    for (const emoji of utils.extractEmojis(inlinedEmojis)) {
+      const { menu, description } = kEmojiMetadata[emoji];
+      if (menu.priority > menuToOpen.priority) {
+        menuToOpen.name = menu.name;
+        menuToOpen.priority = menu.priority;
+      }
+
+      childs.push(
+        utils.createDOMElement("p", {
+          text: `${emoji} ${description}`
+        })
+      );
+    }
 
     const packageContents = [
       utils.createDOMElement("div", {
@@ -267,9 +318,12 @@ export class HomeView {
       packageContents.push(utils.createDOMElement("p", { text: deprecated }));
     }
 
-    return utils.createDOMElement("div", {
-      childs: packageContents
-    });
+    return [
+      utils.createDOMElement("div", {
+        childs: packageContents
+      }),
+      menuToOpen.name
+    ];
   }
 
   generateWarnings() {