refactor(bundlephobia): migrate from vanilla JS to Lit.js

package.json

@@ -88,6 +88,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
+    "@lit/task": "^1.0.3",
     "@nodesecure/documentation-ui": "^1.3.0",
     "@nodesecure/flags": "^3.0.3",
     "@nodesecure/i18n": "^4.0.1",

public/components/bundlephobia/bundlephobia.js

@@ -1,48 +1,150 @@
 // Import Third-party Dependencies
 import prettyBytes from "pretty-bytes";
 import { getJSON } from "@nodesecure/vis-network";
+import { LitElement, html, css } from "lit";
+import { Task } from "@lit/task";
 
-export class Bundlephobia {
-  /**
-   * @param {!string} name
-   * @param {!string} version
-   */
-  constructor(name, version) {
-    this.name = name;
-    this.version = version;
+class Bundlephobia extends LitElement {
+  /*
+   TODO: the css has been duplicated for now but once we migrated the code that use bundlephobia.css to lit
+   we should reuse this css in each lit component
+  * */
+  static styles = css`
+ div.bundlephobia {
+  height: 50px;
+  display: flex;
+  margin-top: 10px;
+}
+
+ div.bundlephobia>div {
+  height: inherit;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 2px dashed var(--secondary);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 1px 1px 10px rgb(41 103 122 / 30%) inset;
+}
+
+ div.bundlephobia>div+div {
+  margin-left: 10px;
+}
+
+ div.bundlephobia>div>b {
+  font-weight: 800;
+  color: var(--secondary);
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+ div.bundlephobia>div>b i {
+  font-family: mononoki;
+  font-size: 14px;
+  color: #fce12b;
+}
+
+ div.bundlephobia>div>span {
+  font-size: 12px;
+  font-family: mononoki;
+  text-transform: uppercase;
+}
+
+.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;
+}
+
+.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;
+}
+`;
+
+  static get DEFAULT_SIZE() {
+    return "N/A";
+  }
+  static properties = {
+    name: { type: String },
+    version: { type: String }
+  };
+
+  #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;
+      }
+    },
+    args: () => [this.name, this.version]
+  });
+
+  #httpName(name) {
+    return name.replaceAll("/", "%2F");
   }
 
-  get httpName() {
-    return this.name.replaceAll("/", "%2F");
+  render() {
+    return this.#bunldeTask.render({
+      pending: () => this.#bundlephobiaTemplate(),
+      complete: (bundle) => this.#bundlephobiaTemplate(bundle),
+      error: () => this.#bundlephobiaTemplate()
+    });
   }
 
-  async fetchDataOnHttpServer() {
-    const [sizeGzip, sizeMin, sizeFull] = [
-      document.querySelector(".size-gzip"),
-      document.querySelector(".size-min"),
-      document.querySelector(".size-full")
-    ];
-
-    try {
-      const {
-        gzip, size, dependencySizes
-      } = await getJSON(`/bundle/${this.httpName}/${this.version}`);
-      const fullSize = dependencySizes.reduce((prev, curr) => prev + curr.approximateSize, 0);
-
-      const result = {
-        gzip: prettyBytes(gzip),
-        min: prettyBytes(size),
-        full: prettyBytes(fullSize)
-      };
-
-      sizeGzip.textContent = result.gzip;
-      sizeMin.textContent = result.min;
-      sizeFull.textContent = result.full;
-
-      return result;
-    }
-    catch {
-      return null;
-    }
+  #bundlephobiaTemplate(bundle = {
+    gzip: Bundlephobia.DEFAULT_SIZE,
+    min: Bundlephobia.DEFAULT_SIZE,
+    full: Bundlephobia.DEFAULT_SIZE
+  }) {
+    const { gzip, min, full } = bundle;
+
+    return html`
+    <div class="head-title">
+      <p>bundlephobia</p>
+    </div>
+    <div class="bundlephobia" id="bundlephobia-sizes">
+      <div>
+        <b class="size-min">${min}</b>
+        <span>MIN</span>
+      </div>
+      <div>
+        <b class="size-gzip">${gzip}</b>
+        <span>GZIP</span>
+      </div>
+      <div>
+        <b class="size-full">${full}</b>
+        <span>FULL</span>
+      </div>
+    </div>
+`;
   }
 }
+
+customElements.define("bundle-phobia", Bundlephobia);
+

public/components/package/package.html

@@ -134,24 +134,6 @@
       <p>[[=z.token('package_info.title.minified_files')]]</p>
     </div>
     <div class="list-item line" id="minifiedfiles"></div>
-
-    <!-- bundlephobia (package size) -->
-    <div class="head-title">
-      <p>bundlephobia</p>
-    </div>
-    <div class="bundlephobia" id="bundlephobia-sizes">
-      <div>
-        <b class="size-min">N/A</b>
-        <span>MIN</span>
-      </div>
-      <div>
-        <b class="size-gzip">N/A</b>
-        <span>GZIP</span>
-      </div>
-      <div>
-        <b class="size-full">N/A</b>
-        <span>FULL</span>
-      </div>
     </div>
   </div>
 

public/components/package/package.js

@@ -1,7 +1,8 @@
 // Import Internal Dependencies
-import { Bundlephobia } from "../bundlephobia/bundlephobia.js";
+import "../bundlephobia/bundlephobia.js";
 import { PackageHeader } from "./header/header.js";
 import * as Pannels from "./pannels/index.js";
+import * as utils from "../../common/utils.js";
 
 export class PackageInfo {
   static DOMElementName = "package-info";
@@ -83,17 +84,19 @@ export class PackageInfo {
     packageHTMLElement.setAttribute("class", "slide-in");
 
     if (window.settings.config.disableExternalRequests) {
-      const bundlephobiaElement = packageHTMLElement.querySelector("#bundlephobia-sizes");
-      const bundlephobiaTitleElement = bundlephobiaElement.previousElementSibling;
-      bundlephobiaElement.classList.add("hidden");
-      bundlephobiaTitleElement.classList.add("hidden");
-
       return;
     }
 
-    new Bundlephobia(this.dependencyVersion.name, this.dependencyVersion.version)
-      .fetchDataOnHttpServer()
-      .catch(console.error);
+    const panFiles = packageHTMLElement.querySelector("#pan-files");
+
+    const bundlephobia = utils.createDOMElement("bundle-phobia", {
+      attributes: {
+        name: this.dependencyVersion.name,
+        version: this.dependencyVersion.version
+      }
+    });
+
+    panFiles.appendChild(bundlephobia);
   }
 
   /**