diff --git a/public/components/bundlephobia/bundlephobia.js b/public/components/bundlephobia/bundlephobia.js
index 78086ef5..95a8a8f1 100644
--- a/public/components/bundlephobia/bundlephobia.js
+++ b/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]
});
diff --git a/public/components/package/package.js b/public/components/package/package.js
index 918580e7..81c7c3de 100644
--- a/public/components/package/package.js
+++ b/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;
diff --git a/public/components/package/pannels/files/files.js b/public/components/package/pannels/files/files.js
index aad247dc..12d88eb4 100644
--- a/public/components/package/pannels/files/files.js
+++ b/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
)}
-
+
+ ${when(
+ window.settings.config.disableExternalRequests === false,
+ () => html``,
+ () => nothing
+ )}
`;
}
diff --git a/public/components/views/home/home.js b/public/components/views/home/home.js
index 4a9af0d9..e1597cad 100644
--- a/public/components/views/home/home.js
+++ b/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() {