react-native-bundle-discovery 1.3.0 → 2.0.0-rc.1

package/views/_theme.js

@@ -1,35 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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;
-}
-.prettify-checkbox{
-    position: absolute;
-    right: 31px;
-    margin-top: -26px;
-    z-index: 1;
-}
-.ask-chatgpt{
-    color: var(--discovery-view-button-color, #000);
-    text-decoration: none;
-    vertical-align: middle;
-    position: absolute;
-    z-index: 9;
-    margin-top: 12px;
-    margin-left: 105px !important;
-    height: 35px;
-}
-.ask-chatgpt::before {
-    content: '”';
-    font-size: 2em;
-    vertical-align: middle;
-    font-family: math;
-    margin-right: 0.2em;
-    display: inline-block;
-    height: 15px;
-}
-.packages-content>.view-input{
-    padding-left: 265px;
-}
-.copy-before-ask-chatgpt{
-    width: 95px;
-    background-position: left center;
-    padding-left: 25px;
-    position: absolute;
-    z-index: 9;
-    margin-top: 12px;
-    height: 35px;
-}
-.bundlejs-badge-img{
-    line-height: 0;
-    margin-bottom: -5px;
-    margin-left: 10px;
-}