react-native-bundle-discovery-ui 2.8.0 → 2.9.1

package/dist/client/views/moduleOverview.js

@@ -0,0 +1,122 @@
+const require_views__html = require("./_html.js");
+//#region src/client/views/moduleOverview.ts
+function renderHeader(o) {
+  const chips = [
+    o.pkg
+      ? require_views__html.chip(
+          `${require_views__html.escapeHTML(o.pkg.name)}${o.pkg.version ? ` <b>v${require_views__html.escapeHTML(o.pkg.version)}</b>` : ""}`,
+          "pkg",
+          discovery.encodePageHash("package", o.pkg.name),
+        )
+      : o.injectedBy
+        ? ""
+        : require_views__html.chip("Source code", "src"),
+    o.injectedBy
+      ? require_views__html.chip(`Injected by ${o.injectedBy}`, "warn")
+      : "",
+    o.pkg?.metadata?.deprecated
+      ? require_views__html.chip("Deprecated", "deprecated")
+      : "",
+    o.pkg?.metadata && !o.pkg.metadata.isLatest && o.pkg.metadata.latestVersion
+      ? require_views__html.chip(
+          `Latest v${require_views__html.escapeHTML(o.pkg.metadata.latestVersion)}`,
+          "warn",
+        )
+      : "",
+    o.isEntry ? require_views__html.chip("Entry point", "entry") : "",
+    o.duplicates
+      ? require_views__html.chip(`Duplicated ×${o.duplicates + 1}`, "danger")
+      : "",
+  ].join("");
+  return `
+    <div class="mo-header">
+      <span class="mo-ext">${require_views__html.escapeHTML(o.ext)}</span>
+      <div class="mo-title">
+        <div class="mo-dir">${require_views__html.escapeHTML(o.dir)}</div>
+        <div class="mo-file">${require_views__html.escapeHTML(o.file)}</div>
+        <div class="mo-chips">${chips}</div>
+      </div>
+    </div>`;
+}
+function renderCards(o) {
+  const delta = o.sourceSize ? o.outputSize / o.sourceSize - 1 : 0;
+  const deltaText =
+    delta === 0
+      ? "unchanged by transform"
+      : delta < 0
+        ? `<span class="mo-good">${require_views__html.formatPercent(-delta)} smaller</span> after transform`
+        : `<span class="mo-bad">${require_views__html.formatPercent(delta)} larger</span> after transform`;
+  const otherPackages = o.importerPackages - (o.importedByOwnCode ? 1 : 0);
+  const importers = [
+    o.importedByOwnCode ? "your code" : "",
+    otherPackages > 0
+      ? require_views__html.plural(otherPackages, "package")
+      : "",
+  ]
+    .filter(Boolean)
+    .join(" + ");
+  return `<div class="mo-cards">${[
+    require_views__html.card({
+      label: "Output size",
+      value: require_views__html.formatBytes(o.outputSize),
+      sub: `${require_views__html.formatPercent(o.bundleShare)} of bundle · #${o.rank.toLocaleString()} of ${o.modulesCount.toLocaleString()}`,
+      kind: "accent",
+      bar: o.largestShare,
+    }),
+    require_views__html.card({
+      label: "Source size",
+      value: require_views__html.formatBytes(o.sourceSize),
+      sub: o.sourceSize ? deltaText : void 0,
+    }),
+    require_views__html.card({
+      label: "Source lines",
+      value: o.sourceLines.toLocaleString(),
+      sub:
+        o.outputLines > 1
+          ? `${require_views__html.plural(o.outputLines, "line")} after transform`
+          : "minified to a single line",
+    }),
+    o.pkg
+      ? require_views__html.card({
+          label: "Share of package",
+          value: require_views__html.formatPercent(o.pkg.share),
+          sub: `of ${require_views__html.escapeHTML(o.pkg.name)} · ${require_views__html.formatBytes(o.pkg.size)} in ${require_views__html.plural(o.pkg.files, "file")}`,
+          bar: o.pkg.share,
+        })
+      : "",
+    require_views__html.card({
+      label: "Imports",
+      value: require_views__html.plural(o.imports.length, "module"),
+      sub: o.missingImports
+        ? `${o.missingImports} not in the bundle`
+        : o.imports.length
+          ? "direct dependencies"
+          : "no dependencies",
+    }),
+    require_views__html.card({
+      label: "Imported by",
+      value: require_views__html.plural(o.importedBy, "module"),
+      sub: o.importedBy
+        ? `from ${importers}`
+        : o.isEntry
+          ? "entry point"
+          : o.injectedBy
+            ? `loaded by ${o.injectedBy}`
+            : "nothing imports it",
+    }),
+    o.duplicates
+      ? require_views__html.card({
+          label: "Duplicates",
+          value: require_views__html.plural(o.duplicates, "copy", "copies"),
+          sub: `${require_views__html.formatBytes(o.duplicatesSize)} could be saved`,
+          kind: "danger",
+        })
+      : "",
+  ].join("")}</div>`;
+}
+discovery.view.define("module-overview", (el, _config, data) => {
+  const overview = data;
+  if (!overview) return;
+  el.innerHTML = renderHeader(overview) + renderCards(overview);
+});
+//#endregion

package/dist/client/views/packageOverview.js

@@ -0,0 +1,116 @@
+const require_views__html = require("./_html.js");
+//#region src/client/views/packageOverview.ts
+function formatDate(isoDate) {
+  return new Date(isoDate).toISOString().slice(0, 10);
+}
+function externalChip(text, href) {
+  return `<a class="mo-chip mo-chip-link" href="${require_views__html.escapeHTML(href)}" target="_blank" rel="noopener noreferrer">${text} ↗</a>`;
+}
+function renderHeader(o) {
+  const id = o.versions.length === 1 ? `${o.name}@${o.versions[0]}` : o.name;
+  const npmPath =
+    o.versions.length === 1 ? `${o.name}/v/${o.versions[0]}` : o.name;
+  const chips = [
+    ...o.versions.map((version) =>
+      require_views__html.chip(
+        `v${require_views__html.escapeHTML(version)}`,
+        "pkg",
+      ),
+    ),
+    o.deprecated.length
+      ? require_views__html.chip("Deprecated", "deprecated")
+      : "",
+    o.isOutdated && o.latestVersion
+      ? require_views__html.chip(
+          `Latest v${require_views__html.escapeHTML(o.latestVersion)}`,
+          "warn",
+        )
+      : "",
+    o.copies.length > 1
+      ? require_views__html.chip(`Duplicated ×${o.copies.length}`, "danger")
+      : "",
+    ...o.findings.map((f) =>
+      require_views__html.chip(
+        `💡 ${require_views__html.escapeHTML(f.title)}`,
+        "warn",
+        discovery.encodePageHash("default", "insights"),
+      ),
+    ),
+  ].join("");
+  const links = [
+    externalChip("npm", `https://www.npmjs.com/package/${npmPath}`),
+    externalChip("bundlephobia", `https://bundlephobia.com/package/${id}`),
+    externalChip("packagephobia", `https://packagephobia.com/result?p=${id}`),
+    `<a class="po-badge" href="https://bundlejs.com/?q=${require_views__html.escapeHTML(id)}" target="_blank" rel="noopener noreferrer"><img alt="bundlejs size" src="https://deno.bundlejs.com/?q=${require_views__html.escapeHTML(id)}&badge=detailed" /></a>`,
+  ].join("");
+  return `
+    <div class="mo-header">
+      <span class="mo-ext po-icon">npm</span>
+      <div class="mo-title">
+        <div class="mo-dir">${o.paths.map(require_views__html.escapeHTML).join(" · ")}</div>
+        <div class="mo-file">${require_views__html.escapeHTML(o.name)}</div>
+        <div class="mo-chips">${chips}</div>
+        <div class="mo-chips po-links">${links}</div>
+      </div>
+    </div>`;
+}
+function renderCards(o) {
+  const otherPackages = o.importerPackages;
+  const importers = [
+    o.importedByOwnCode ? "your code" : "",
+    otherPackages > 0
+      ? require_views__html.plural(otherPackages, "package")
+      : "",
+  ]
+    .filter(Boolean)
+    .join(" + ");
+  return `<div class="mo-cards">${[
+    require_views__html.card({
+      label: "Bundle size",
+      value: require_views__html.formatBytes(o.size),
+      sub: `${require_views__html.formatPercent(o.bundleShare)} of bundle · #${o.rank.toLocaleString()} of ${require_views__html.plural(o.packagesCount, "package")}`,
+      kind: "accent",
+      bar: o.largestShare,
+    }),
+    require_views__html.card({
+      label: "Files",
+      value: require_views__html.plural(o.filesCount, "module"),
+      sub: `largest: ${require_views__html.escapeHTML(o.largestFile.slice(o.largestFile.lastIndexOf("/") + 1))} · ${require_views__html.formatBytes(o.largestFileSize)}`,
+    }),
+    o.copies.length > 1
+      ? require_views__html.card({
+          label: "Copies",
+          value: require_views__html.plural(o.copies.length, "copy", "copies"),
+          sub: `${require_views__html.formatBytes(o.copiesSavings)} could be saved`,
+          kind: "danger",
+        })
+      : require_views__html.card({
+          label: "Copies",
+          value: "1 copy",
+          sub: "bundled only once",
+        }),
+    require_views__html.card({
+      label: "Imported by",
+      value: require_views__html.plural(o.importedBy, "module"),
+      sub: o.importedBy ? `from ${importers}` : "loaded by the bundler",
+    }),
+    o.publishedAt
+      ? require_views__html.card({
+          label: "Published",
+          value: formatDate(o.publishedAt),
+          sub: o.deprecated.length
+            ? '<span class="mo-bad">deprecated</span>'
+            : o.isOutdated && o.latestVersion
+              ? `<span class="mo-bad">outdated</span> · latest v${require_views__html.escapeHTML(o.latestVersion)}`
+              : '<span class="mo-good">latest version</span>',
+          kind: o.deprecated.length ? "danger" : "",
+        })
+      : "",
+  ].join("")}</div>`;
+}
+discovery.view.define("package-overview", (el, _config, data) => {
+  const overview = data;
+  if (!overview) return;
+  el.innerHTML = renderHeader(overview) + renderCards(overview);
+});
+//#endregion

package/dist/client/views/persistedFilterInput.js

@@ -0,0 +1,27 @@
+//#region src/client/views/persistedFilterInput.ts
+const persistedValues = /* @__PURE__ */ new Map();
+discovery.view.define(
+  "persisted-filter-input",
+  async function renderPersistedFilterInput(el, config, data, context) {
+    const { persistKey, onChange, ...rest } = config;
+    let inputEl = null;
+    await this.render(
+      el,
+      {
+        ...rest,
+        view: "input",
+        type: "regexp",
+        value: persistedValues.get(persistKey) ?? "",
+        onChange(value, name) {
+          persistedValues.set(persistKey, inputEl?.value.trim() ?? "");
+          onChange?.(value, name);
+        },
+      },
+      data,
+      context,
+    );
+    inputEl = el.querySelector("input");
+  },
+  { tag: false },
+);
+//#endregion

package/dist/client/views/reportBar.js

@@ -0,0 +1,89 @@
+const require_views__html = require("./_html.js");
+//#region src/client/views/reportBar.ts
+const PLATFORM_NAMES = {
+  ios: "iOS",
+  android: "Android",
+  web: "Web",
+  macos: "macOS",
+  windows: "Windows",
+};
+function platformName(platform) {
+  return (
+    PLATFORM_NAMES[platform] ??
+    platform.charAt(0).toUpperCase() + platform.slice(1)
+  );
+}
+function chip(text, kind, title) {
+  return `<span class="rb-chip rb-chip-${kind}"${title ? ` title="${require_views__html.escapeHTML(title)}"` : ""}>${text}</span>`;
+}
+function renderBuild(s) {
+  const chips = [
+    s.platform
+      ? chip(
+          require_views__html.escapeHTML(platformName(s.platform)),
+          "platform",
+        )
+      : "",
+  ];
+  if (s.dev === true)
+    chips.push(
+      chip(
+        "Dev bundle",
+        "warn",
+        "__DEV__ is true: the bundle has dev-only code, so sizes are bigger than in production. Build with --dev false.",
+      ),
+    );
+  else if (s.dev === false)
+    chips.push(chip("Production", "ok", "__DEV__: false"));
+  if (s.minify === false)
+    chips.push(
+      chip(
+        "Not minified",
+        "warn",
+        "Minify is off: sizes are bigger than in a release build. Build with --minify true.",
+      ),
+    );
+  else if (s.minify === true)
+    chips.push(chip("Minified", "ok", "Minify: true"));
+  return `<div class="rb-build">${chips.join("")}</div>`;
+}
+function renderSize(s) {
+  const sourceShare = s.totalSize ? s.sourceSize / s.totalSize : 0;
+  const nodeModulesShare = s.totalSize ? s.nodeModulesSize / s.totalSize : 0;
+  const title = `Your code: ${require_views__html.formatBytes(s.sourceSize)}\nnode_modules: ${require_views__html.formatBytes(s.nodeModulesSize)}`;
+  return `
+    <div class="rb-size" title="${require_views__html.escapeHTML(title)}">
+      <b class="rb-total">${require_views__html.formatBytes(s.totalSize)}</b>
+      <span class="rb-split">
+        <span class="rb-split-own" style="width:${(sourceShare * 100).toFixed(2)}%" title="${require_views__html.escapeHTML(`Your code: ${require_views__html.formatBytes(s.sourceSize)} (${require_views__html.formatPercent(sourceShare)})`)}"></span>
+        <span class="rb-split-nm" style="width:${(nodeModulesShare * 100).toFixed(2)}%" title="${require_views__html.escapeHTML(`node_modules: ${require_views__html.formatBytes(s.nodeModulesSize)} (${require_views__html.formatPercent(nodeModulesShare)})`)}"></span>
+      </span>
+      <span class="rb-legend">
+        <span><i class="rb-dot rb-dot-own"></i>Your code ${chip(require_views__html.formatPercent(sourceShare), "own")}</span>
+        <span><i class="rb-dot rb-dot-nm"></i>node_modules ${chip(require_views__html.formatPercent(nodeModulesShare), "nm")}</span>
+      </span>
+    </div>`;
+}
+function renderDate(s) {
+  if (!s.date) return "";
+  const date = new Date(s.date);
+  if (Number.isNaN(date.getTime())) return "";
+  const text = date.toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    year:
+      date.getFullYear() === /* @__PURE__ */ new Date().getFullYear()
+        ? void 0
+        : "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  return `<div class="rb-date" title="${require_views__html.escapeHTML(date.toISOString())}">Built ${require_views__html.escapeHTML(text)}</div>`;
+}
+discovery.view.define("report-bar", (el, _config, data) => {
+  const summary = data;
+  if (!summary) return;
+  el.innerHTML =
+    renderBuild(summary) + renderSize(summary) + renderDate(summary);
+});
+//#endregion