react-native-bundle-discovery 1.0.0-rc.10

package/views/_theme.js

@@ -0,0 +1,35 @@
+function isDark() {
+  const isSystemDarkMode = window?.matchMedia?.(
+    "(prefers-color-scheme: dark)",
+  )?.matches;
+  const userMode = localStorage.getItem("discoveryjs:color-scheme");
+  return userMode === "auto" ? isSystemDarkMode : userMode === "dark";
+}
+
+function doTheming(el) {
+  const dark = isDark();
+  el.classList.add("highcharts-light");
+  el.classList[!dark ? "add" : "remove"]("my-light");
+  el.classList[dark ? "add" : "remove"]("highcharts-dark");
+}
+
+// apply theme on import
+if (isDark()) {
+  // require("highcharts/themes/dark-unica"); // no
+  // require("highcharts/themes/brand-dark");
+  // require("highcharts/themes/dark-blue");
+  // require("highcharts/themes/dark-green");
+  require("highcharts/themes/high-contrast-dark");
+} else {
+  // require("highcharts/themes/avocado");
+  // require("highcharts/themes/brand-light");
+  // require("highcharts/themes/gray");
+  // require("highcharts/themes/grid-light"); // no
+  // require("highcharts/themes/grid");
+  // require("highcharts/themes/high-contrast-light");
+  // require("highcharts/themes/sand-signika"); // no
+  // require("highcharts/themes/skies");
+  // require("highcharts/themes/sunset");
+}
+
+module.exports = { doTheming };

package/views/foamtree.js

@@ -0,0 +1,135 @@
+const { FoamTree } = require("../vendors/foamtree.js");
+
+function injectTooltip(root) {
+  const t = root.querySelector(".tooltip");
+  if (t) return t;
+
+  const tooltip = document.createElement("div");
+  tooltip.className = "tooltip";
+  tooltip.id = "foamtree-tooltip";
+  root.appendChild(tooltip);
+  return tooltip;
+}
+
+function prependDuplicateTo(label) {
+  if (label.includes(" ~ ")) {
+    return "<b class='i-duplicate'>Duplicate</b> " + label.split(" ~ ")[1];
+  }
+  return label;
+}
+
+// Based on https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/client/components/Treemap.jsx
+discovery.view.define("foamtree", function (el, config, rawData, context) {
+  if (Array.isArray(rawData?.options?.series)) {
+    rawData.options.series.forEach((e) => {
+      if (e.data?.[0]?.value !== undefined) {
+        // mutate data by link
+        e.data = e.data.map((d) => d.value ?? null);
+      }
+    });
+  }
+
+  // console.log({ rawData });
+
+  // Render after element will be added to the DOM
+  // to avoid "FoamTree: element has zero dimensions: 0 x 0" error
+  setTimeout(() => {
+    try {
+      // Dirty hack to fix shadow DOM issue, xd
+      window.__el = el;
+
+      const root = el.closest(".discovery-root");
+      const tooltip = injectTooltip(root);
+
+      window.addEventListener("resize", () => ft.resize(), { passive: true });
+
+      root.addEventListener(
+        "mousemove",
+        (event) => {
+          if (tooltip.style.display === "none") return;
+          tooltip.style.left = event.pageX + 10 + "px";
+          tooltip.style.top = event.pageY + 10 + "px";
+        },
+        {
+          passive: true,
+        },
+      );
+      el.addEventListener("mouseover", () => {
+        tooltip.style.display = "block";
+      });
+      el.addEventListener("mouseout", () => {
+        tooltip.style.display = "none";
+      });
+
+      const ft = new FoamTree({
+        element: el,
+        layout: "squarified",
+        stacking: "flattened",
+        pixelRatio: window.devicePixelRatio || 1,
+        maxGroups: Infinity,
+        maxGroupLevelsDrawn: Infinity,
+        maxGroupLabelLevelsDrawn: Infinity,
+        maxGroupLevelsAttached: Infinity,
+        wireframeLabelDrawing: "always",
+        groupMinDiameter: 0,
+        groupLabelVerticalPadding: 0.2,
+        rolloutDuration: 0,
+        pullbackDuration: 0,
+        fadeDuration: 0,
+        groupExposureZoomMargin: 0.2,
+        zoomMouseWheelDuration: 300,
+        openCloseDuration: 200,
+        onGroupClick(event) {
+          event.preventDefault();
+          ft.zoom(event.group);
+        },
+        onGroupDoubleClick: (e) => e.preventDefault(),
+        onGroupHover(event) {
+          // Ignoring hovering on `FoamTree` branding group and the root group
+          if (event.group && event.group === rawData.options.dataObject) {
+            return event.preventDefault();
+          }
+
+          const { group } = event;
+
+          if (group && group.type) {
+            const htmlContent = [
+              `<b class="tooltip-name">${group.type}</b>: ${prependDuplicateTo(group.label)}`,
+              `<b>Size</b>: ${group.size}`,
+              group.type === "folder" ? `<b>Files</b>: ${group.files}` : null,
+            ]
+              .filter((e) => !!e)
+              .join("<br/>");
+
+            tooltip.style.display = "block";
+            tooltip.innerHTML = htmlContent;
+          } else {
+            tooltip.style.display = "none";
+            tooltip.innerHTML = "";
+          }
+
+          // if (group) {
+          //   this.setState({
+          //     showTooltip: true,
+          //     tooltipContent: this.getTooltipContent(group)
+          //   });
+          // } else {
+          //   this.setState({showTooltip: false});
+          // }
+        },
+        ...rawData.options,
+      });
+    } catch (e) {
+      console.error(e, rawData);
+      discovery.view.render(
+        el,
+        {
+          view: "alert-danger",
+          data: '"Error rendering chart, please check the console for more information."',
+        },
+        rawData,
+        context,
+      );
+    }
+  }, 0);
+});

package/views/global.css

@@ -0,0 +1,127 @@
+hr{
+    border: 1px solid rgb(222 222 222);
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.inline-block{
+    display: inline-block;
+}
+.discovery-content>.page-default{
+    height: 100%;
+    overflow: hidden;
+    padding-top: 16px;
+    padding-bottom: 16px;
+}
+.view-tabs-content>.view-content-filter>.view-input{
+    padding-top: 12px;
+    padding-bottom: 12px;
+    margin: 0;
+    background-color: var(--discovery-background-color);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+.main-tabs{
+    height: calc(100% - 20px);
+    margin-top: 12px;
+}
+.main-tabs .view-tabs-content{
+    height: calc(100% - 32px);
+}
+.foamtree-filter,
+.view-foamtree{
+    width: 100%;
+    height: 100%;
+}
+.foamtree-filter>.content{
+    height: calc(100% - 60px);
+    width: 100%;
+}
+.tooltip {
+    position: absolute;
+    z-index: 10;
+    display: none;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 5px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px #ccc;
+}
+.tooltip-name{
+    text-transform: capitalize;
+}
+.flex-no-wrap{
+    flex-wrap: nowrap;
+}
+.width-50p{
+    width: 50%;
+}
+.my-icon{
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+.my-icon-inline{
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 4px;
+}
+.my-icon-12{
+    width: 12px;
+    height: 12px;
+}
+.no-margin{
+    margin: 0;
+}
+.two-column>*{
+    width: 50%;
+}
+.m-v-8{
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+.i-duplicate{
+    display: inline-block;
+    background: #da444e;
+    color: #fff;
+    border-radius: 0.5em;
+    padding: 0 0.5em;
+}
+.m-l-0_5em{
+    margin-left: 0.5em;
+}
+.m-r-0_3em{
+    margin-right: 0.3em;
+}
+.copy-to-clipboard{
+    /* from: https://tabler.io/icons/icon/clipboard-copy */
+    background: url('data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-clipboard-copy%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M9%205h-2a2%202%200%200%200%20-2%202v12a2%202%200%200%200%202%202h3m9%20-9v-5a2%202%200%200%200%20-2%20-2h-2%22%20/%3E%3Cpath%20d=%22M13%2017v-1a1%201%200%200%201%201%20-1h1m3%200h1a1%201%200%200%201%201%201v1m0%203v1a1%201%200%200%201%20-1%201h-1m-3%200h-1a1%201%200%200%201%20-1%20-1v-1%22%20/%3E%3Cpath%20d=%22M9%203m0%202a2%202%200%200%201%202%20-2h2a2%202%200%200%201%202%202v0a2%202%200%200%201%20-2%202h-2a2%202%200%200%201%20-2%20-2z%22%20/%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center;
+    display: inline-block;
+    height: 32px;
+    width: 32px;
+}
+.copy-to-clipboard::before {
+    position: absolute;
+    top: -8px;
+    font-size: 0.7rem;
+    border-radius: 4px;
+    display: inline-block;
+    padding: 1px 4px;
+    color: #fff;
+    left: 78%;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+}
+.copy-to-clipboard.done::before {
+    content: "Copied!";
+    background: green;
+    opacity: 1;
+}
+.copy-to-clipboard.err::before {
+    content: "Error!";
+    background: red;
+    opacity: 1;
+}