react-native-bundle-discovery-ui 2.5.0 → 2.7.0-rc.0

package/dist/bin.js

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+const require_rolldown_runtime = require("./rolldown-runtime-VH7oDXx4.js");
+const require_src = require("./src-BSLX-He2.js");
+const require_discoveryrc = require("./discoveryrc.js");
+let minimist = require("minimist");
+minimist = require_rolldown_runtime.__toESM(minimist);
+let node_fs = require("node:fs");
+node_fs = require_rolldown_runtime.__toESM(node_fs);
+let node_path = require("node:path");
+node_path = require_rolldown_runtime.__toESM(node_path);
+let _discoveryjs_cli = require("@discoveryjs/cli");
+let chalk = require("chalk");
+chalk = require_rolldown_runtime.__toESM(chalk);
+let _discoveryjs_cli_lib_shared_utils_js = require("@discoveryjs/cli/lib/shared/utils.js");
+//#region src/build.ts
+function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
+	if (verbose) console.info(`Building HTML page from file: ${chalk.default.green(filePath)} options: ${JSON.stringify({
+		output,
+		clean,
+		singleFile
+	}, null, 2)}`);
+	if (!filePath) {
+		console.error(`Usage: '${chalk.default.green("npx react-native-bundle-discovery build <path-to-file>")}', Please provide a path to a JSON file.`);
+		process.exit(1);
+	}
+	const jsonFilePath = node_path.default.resolve(process.cwd(), filePath);
+	if (verbose) console.info(`Loading JSON file from: ${chalk.default.green(jsonFilePath)}, base directory: ${chalk.default.green(process.cwd())}`);
+	let fullJsonPath;
+	try {
+		fullJsonPath = require.resolve(jsonFilePath);
+	} catch (err) {
+		console.error(`❌Error loading file: ${chalk.default.red(jsonFilePath)}\n\n`);
+		console.error(err.message);
+		process.exit(1);
+	}
+	const configFile = node_path.default.resolve(__dirname, "./.tmp.js");
+	if (verbose) console.info(`Creating temporary config file at: ${chalk.default.green(configFile)}, for discovery.js`);
+	const transformRcdoctor = node_path.default.join(__dirname, "rsdoctor.js");
+	node_fs.default.writeFileSync(configFile, `const {transformRSDoctorData} = require("${transformRcdoctor}");
+module.exports = ${JSON.stringify({
+		...require_discoveryrc,
+		data: "<tmp>"
+	}, null, 1).replace(`"<tmp>"`, require_src.isRsdoctorReportPath(fullJsonPath) ? `() => transformRSDoctorData(require("${fullJsonPath}"))` : `() => require("${fullJsonPath}")`)};`);
+	if (verbose) console.info(`Building HTML page with options:`, {
+		output,
+		clean,
+		singleFile
+	});
+	const _config = {
+		name: "Bundle Discovery",
+		mode: "single",
+		colorScheme: "auto",
+		download: true,
+		upload: false,
+		embed: false,
+		encodings: false
+	};
+	const _options = {
+		singleFile,
+		clean,
+		output,
+		cache: true,
+		cachedir: node_path.default.resolve(__dirname, "./.discoveryjs-cache"),
+		checkCacheTtl: false,
+		minify: true,
+		dataCompression: true,
+		sourcemap: false,
+		embed: "by-config",
+		experimentalJsonxl: false,
+		scriptFormat: "esm",
+		scriptExternal: [],
+		data: true,
+		excludeModelOnDataFail: false,
+		prettyData: false,
+		modelDownload: false,
+		modelDataUpload: true,
+		modelResetCache: false,
+		serveOnlyAssets: true,
+		dev: true,
+		config: configFile,
+		configFile
+	};
+	return (0, _discoveryjs_cli.build)(_options, _config, configFile).then(() => {
+		console.log(`========================================`);
+		console.log(`✅ HTML page built successfully at: ${chalk.default.green(node_path.default.resolve(output, "index.html").replace(`${process.cwd()}/`, ""))}`);
+		console.log(`========================================`);
+	});
+}
+//#endregion
+//#region src/server.ts
+function serve(filePath, port, verbose) {
+	const PORT = process.env.PORT || port;
+	if (verbose) console.info(`start server with file: ${filePath} on port: ${port} ${process.env.PORT ? `(${chalk.default.yellow("PORT")} env)` : ""}`);
+	if (!filePath) {
+		console.error(`Usage: '${chalk.default.green("npx react-native-bundle-discovery server <path-to-file>")}', Please provide a path to a JSON file.`);
+		process.exit(1);
+	}
+	const jsonFilePath = node_path.default.resolve(process.cwd(), filePath);
+	if (verbose) console.info(`Loading JSON file from: ${chalk.default.green(jsonFilePath)}, base directory: ${chalk.default.green(process.cwd())}`);
+	let fullJsonPath;
+	try {
+		fullJsonPath = require.resolve(jsonFilePath);
+	} catch (err) {
+		console.error(`❌Error loading file: ${chalk.default.red(jsonFilePath)}\n\n`);
+		console.error(err.message);
+		process.exit(1);
+	}
+	const configFile = node_path.default.resolve(__dirname, "./.tmp.js");
+	if (verbose) console.info(`Creating temporary config file at: ${chalk.default.green(configFile)}, for discovery.js`);
+	const transformRcdoctor = node_path.default.join(__dirname, "rsdoctor.js");
+	node_fs.default.writeFileSync(configFile, `const {transformRSDoctorData} = require("${transformRcdoctor}");
+module.exports = ${JSON.stringify({
+		...require_discoveryrc,
+		data: "<tmp>"
+	}, null, 1).replace(`"<tmp>"`, require_src.isRsdoctorReportPath(fullJsonPath) ? `() => transformRSDoctorData(require("${fullJsonPath}"))` : `() => require("${fullJsonPath}")`)};`);
+	if (verbose) console.info(`Running server with config: ${chalk.default.green(configFile)}`);
+	return (0, _discoveryjs_cli_lib_shared_utils_js.silent)(() => (0, _discoveryjs_cli.createServer)({
+		cache: false,
+		minify: true,
+		dev: false,
+		config: configFile,
+		configFile
+	}).then((server) => server.listen(PORT, () => {
+		console.log(`[react-native-bundle-discovery]: 🚀 Server listen on ${chalk.default.green.underline(chalk.default.green(`http://localhost:${PORT}`))}`);
+	})));
+}
+//#endregion
+//#region src/bin.ts
+function printHelp() {
+	console.log(`react-native-bundle-discovery-ui
+
+Usage:
+  react-native-bundle-discovery-ui <file> [port] [--verbose] # <- server can be omitted
+  react-native-bundle-discovery-ui server <file> [port] [--verbose]
+
+  react-native-bundle-discovery-ui build <file> [--output <path>] [--clean] [--single-file] [--verbose]
+
+Commands:
+  server <file> [port]  Run a web server to show a Metro bundler stat report
+  build <file>          Build a HTML report from the Metro bundler stat file
+
+Options:
+  -v, --verbose          Run with verbose logging
+  -o, --output <path>    Path for a build result (default: .bundle-discovery)
+  -c, --clean            Clean output directory before writing build files (default: true)
+  -s, --single-file      Output report build as a single HTML file (default: true)
+  -p, --port <port>      Port for server command (same as [port], default: 8079)
+  -h, --help             Show help
+`);
+}
+function fail(message) {
+	console.error(message);
+	console.error("Use --help to see usage.");
+	process.exit(1);
+}
+function main() {
+	const argv = (0, minimist.default)(process.argv.slice(2), {
+		alias: {
+			v: "verbose",
+			h: "help",
+			o: "output",
+			c: "clean",
+			s: "single-file",
+			p: "port"
+		},
+		boolean: [
+			"verbose",
+			"help",
+			"clean",
+			"single-file"
+		],
+		string: ["output"],
+		default: {
+			clean: true,
+			"single-file": true
+		}
+	});
+	const command = argv._[0];
+	const isServerCommand = command === "server";
+	const isBuildCommand = command === "build";
+	const isImplicitServerCommand = Boolean(command) && !isServerCommand && !isBuildCommand;
+	if (argv.help || !command) {
+		printHelp();
+		process.exit(0);
+	}
+	if (isServerCommand || isImplicitServerCommand) {
+		const file = isImplicitServerCommand ? argv._[0] : argv._[1];
+		if (!file) fail("Missing required argument: <file>");
+		const rawPort = argv.port ?? (isImplicitServerCommand ? argv._[1] : argv._[2]) ?? 8079;
+		const port = Number(rawPort);
+		if (!Number.isFinite(port)) fail(`Invalid port: ${rawPort}`);
+		return serve(file, port, Boolean(argv.verbose));
+	}
+	if (isBuildCommand) {
+		const file = argv._[1];
+		if (!file) fail("Missing required argument: <file>");
+		return buildHtmlPage(file, argv.output, argv.clean, argv["single-file"], Boolean(argv.verbose));
+	}
+	fail(`Unknown command: ${command}`);
+}
+main();
+//#endregion

package/dist/client/_virtual/_rolldown/runtime.js

@@ -0,0 +1,23 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__toESM = __toESM;

package/dist/client/pages/_common.js

@@ -0,0 +1,282 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/client/pages/_common.ts
+const platformColor = `transformOptions.platform = 'android' ? 'rgba(194, 239, 116, .4)' : 'rgba(119, 31, 218, .4)'`;
+function getPackage(entry) {
+	return `
+  $packages: $.packages;
+  $totalSize: $.modules.sum(=>output.sizeInBytes);
+  $toModule: => {
+    ext:  $.path.getFileExtension(),
+    name: $.path, 
+    size: $.output.sizeInBytes.formatBytes(), 
+    percent: ($.output.sizeInBytes / $totalSize).percent(3),
+  };
+
+  ${entry}.group(=> path.getModulesName())
+     .map(=> ({ 
+        $pkgName: $.key;
+        pkgName: $pkgName, // example: lodash
+        size: $.value.sum(=>output.sizeInBytes),
+        pkgInstances: $.value
+          .group(=> path.split('node_modules/' + $pkgName).pick(0) + 'node_modules/' + $pkgName)
+          .map(=> {
+             $pkgNameWithPath: $.key;
+             $pkgInfo: $packages.[path = $pkgNameWithPath][0];
+             pkgName: $pkgNameWithPath, // example: node_modules/lodash
+             version: $pkgInfo.version,
+             metadata: $pkgInfo.metadata,
+             size: $.value.sum(=> output.sizeInBytes),
+             modules: $.value.map(=> $.$toModule()),
+          }),
+     }))`;
+}
+const metadataTooltip = {
+	view: "text",
+	when: "metadata.createdAt",
+	data: "'Published ' + metadata.createdAt.formatDate() + ' (' + metadata.createdAt.timeAgo() + ')'"
+};
+const outdatedColor = "rgba(255, 165, 0, 0.35)";
+function getMetadataBadges({ deprecated, outdated, latestVersion, renderLatestVersion }) {
+	return [{
+		view: "pill-badge",
+		when: deprecated,
+		data: `{ text: '⚠️ deprecated', message: ${deprecated} }`,
+		color: "#cf222e",
+		textColor: "white",
+		darkColor: "#f85149",
+		darkTextColor: "white",
+		tooltip: "text: message"
+	}, renderLatestVersion ? {
+		view: "pill-badge",
+		when: outdated,
+		data: `{ text: '↑ v' + ${latestVersion} }`,
+		color: outdatedColor,
+		tooltip: "text: 'Latest version on npm'"
+	} : null].filter(Boolean);
+}
+function getPackageList({ data, itemPkgName, showCopiesBadge, expanded, limit, subLimit }) {
+	return {
+		view: "list",
+		data,
+		emptyText: "⚠️ No packages found",
+		limit,
+		item: {
+			view: "tree",
+			expanded,
+			itemConfig: {
+				content: [
+					itemPkgName,
+					"text: ' '",
+					"pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+					...getMetadataBadges({
+						deprecated: "pkgInstances.metadata.deprecated[0]",
+						outdated: "pkgInstances.[metadata and not metadata.isLatest]",
+						latestVersion: "pkgInstances.metadata.latestVersion[0]",
+						renderLatestVersion: false
+					}),
+					showCopiesBadge ? {
+						view: "pill-badge",
+						when: "pkgInstances.size() > 1",
+						data: "(pkgInstances.size() - 1).pluralBadge(['copy','copies'], '+')",
+						color: "rgba(255, 0, 0, 0.35)"
+					} : null,
+					{
+						view: "pill-badge",
+						data: "pkgInstances.modules.size().pluralBadge(['file','files'])"
+					}
+				].filter(Boolean),
+				children: `$.pkgInstances`,
+				itemConfig: {
+					view: "tree-leaf",
+					limit: subLimit,
+					content: [
+						"text:pkgName",
+						"text:' '",
+						{
+							view: "pill-badge",
+							data: "{ text: 'v' + version, metadata }",
+							color: "#0af",
+							tooltip: metadataTooltip
+						},
+						"pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+						{
+							view: "pill-badge",
+							data: "modules.size().pluralBadge(['file','files'])"
+						},
+						...getMetadataBadges({
+							deprecated: "metadata.deprecated",
+							outdated: "metadata and not metadata.isLatest",
+							latestVersion: "metadata.latestVersion",
+							renderLatestVersion: true
+						})
+					],
+					children: `$.modules`,
+					itemConfig: {
+						view: "tree-leaf",
+						content: getTreeModule({ hasPercent: true })
+					}
+				}
+			}
+		}
+	};
+}
+function getTreeModule({ hasTextMatch = false, hasPercent = false } = {}) {
+	return [
+		"pill-badge:{ text: ext, color: ext.getExtColor() }",
+		hasTextMatch ? {
+			view: "link",
+			content: hasTextMatch ? "text-match" : "text",
+			data: `{
+          href: name.pageLink("module", {}),
+          text: name,
+          match: #.filterByPathStr
+        }`
+		} : {
+			view: "link",
+			data: `{ href: $.name.pageLink("module", {}), text: $.name }`
+		},
+		"text:' '",
+		{
+			view: "badge",
+			when: "isEntry",
+			text: "Entrypoint",
+			color: "gold",
+			textColor: "black"
+		},
+		"pill-badge:{ text: size, color: 'rgba(120, 177, 9, 0.35)' }",
+		hasPercent ? "pill-badge:{ text: percent, color: 'rgba(120, 177, 9, 0.35)' }" : null
+	].filter(Boolean);
+}
+function getModulesTree({ data, limit }) {
+	if (!data) throw new Error("[getModulesTree]: data is required");
+	return {
+		view: "content-filter",
+		data,
+		name: "filterByPathStr",
+		content: {
+			view: "list",
+			limit,
+			data: ".[name ~= #.filterByPathStr]",
+			emptyText: "⚠️ No modules found",
+			item: {
+				view: "tree",
+				expanded: false,
+				itemConfig: {
+					content: getTreeModule({ hasTextMatch: true }),
+					children: `
+            [
+               {
+                 title:'Imported by modules',
+                 data: $.reasons,
+                 type: 'reasons',
+               },
+               {
+                 title:'Similar copies',
+                 data: $.duplicates,
+                 type: 'duplicates',
+               }
+            ].filter(=> $.data.size() > 0)
+          `,
+					itemConfig: {
+						view: "switch",
+						content: [{
+							when: "type=\"reasons\"",
+							content: {
+								view: "tree-leaf",
+								content: [
+									"text:title",
+									"text:' '",
+									"badge:{ text: $.data.size() }"
+								],
+								children: `$.data`,
+								itemConfig: {
+									view: "tree-leaf",
+									content: getTreeModule()
+								}
+							}
+						}, {
+							when: "type=\"duplicates\"",
+							content: {
+								view: "tree-leaf",
+								content: [
+									"text:title",
+									"text:' '",
+									"badge:{ text: $.data.size() }"
+								],
+								children: `$.data`,
+								itemConfig: {
+									view: "tree-leaf",
+									content: getTreeModule()
+								}
+							}
+						}]
+					}
+				}
+			}
+		}
+	};
+}
+const metadata = {
+	platform: {
+		when: "transformOptions.platform",
+		view: "badge",
+		data: `{ prefix: 'Platform: ', text: transformOptions.platform, color: ${platformColor} }`
+	},
+	size: {
+		when: "modules.filter(=> $.path has 'node_modules').size()",
+		view: "badge",
+		data: `{ prefix: 'Size: ', text: modules.sum(=>output.sizeInBytes).formatBytes(), color: ${platformColor} }`
+	},
+	node_modules_size: {
+		when: "modules.filter(=> $.path has 'node_modules').size()",
+		view: "badge",
+		data: "{ prefix: 'node_modules: ', text: modules.filter(=> $.path has 'node_modules').sum(=>output.sizeInBytes).formatBytes(), color: 'rgba(255, 0, 0, 0.35)' }"
+	},
+	source_code_size: {
+		when: "modules.filter(=> $.path has 'node_modules').size()",
+		view: "badge",
+		data: `
+        // vars
+        $totalSize: modules.sum(=>output.sizeInBytes);
+        $thirdPartySize: modules.filter(=> $.path has 'node_modules').sum(=>output.sizeInBytes);
+        // return data
+        { prefix: 'Source code: ', text: ($totalSize - $thirdPartySize).formatBytes(), color: 'rgba(148, 111, 234, 0.5)' }`
+	},
+	is_dev: {
+		when: "transformOptions.dev != null",
+		view: "badge",
+		data: "{ prefix: '__DEV__: ', text: transformOptions.dev }"
+	},
+	is_minified: {
+		when: "transformOptions.minify != null",
+		view: "badge",
+		data: "{ prefix: 'Minify: ', text: transformOptions.minify }"
+	}
+};
+const externalLinkHtml = `<svg class="my-icon my-icon-link" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"></path></svg>`;
+function getCopyToClipboardButton({ textToCopy, className, text }) {
+	return {
+		view: "button",
+		className: `${className ?? ""} copy-to-clipboard`,
+		text,
+		data: `{ textToCopy: ${textToCopy} }`,
+		onClick(elm, data) {
+			clearTimeout(elm.__timer);
+			navigator.clipboard.writeText(data.textToCopy).then(() => {
+				elm.classList.add("done");
+				elm.__timer = setTimeout(() => elm.classList.remove("done"), 2e3);
+			}).catch(() => {
+				elm.classList.add("err");
+				elm.__timer = setTimeout(() => elm.classList.remove("err"), 2e3);
+			});
+		}
+	};
+}
+//#endregion
+exports.externalLinkHtml = externalLinkHtml;
+exports.getCopyToClipboardButton = getCopyToClipboardButton;
+exports.getModulesTree = getModulesTree;
+exports.getPackage = getPackage;
+exports.getPackageList = getPackageList;
+exports.getTreeModule = getTreeModule;
+exports.metadata = metadata;

package/dist/client/pages/default.js

@@ -0,0 +1,184 @@
+const require_pages__common = require("./_common.js");
+//#region src/client/pages/default.ts
+const topMetaData = [
+	require_pages__common.metadata.platform,
+	require_pages__common.metadata.size,
+	require_pages__common.metadata.source_code_size,
+	require_pages__common.metadata.node_modules_size,
+	require_pages__common.metadata.is_dev,
+	require_pages__common.metadata.is_minified
+];
+const TABS = {
+	TREEMAP_FOAMTREE: "treemap-foamtree",
+	MODULES: "modules",
+	PACKAGES: "packages",
+	DUPLICATES: "duplicates"
+};
+function parseHashRef(url = window.location.href) {
+	return new URL(url).hash.split(":")?.[1];
+}
+discovery.page.define("default", [...topMetaData, {
+	view: "tabs",
+	name: "mainTabs",
+	className: "main-tabs",
+	value: parseHashRef() ?? TABS.TREEMAP_FOAMTREE,
+	tabs: [
+		{
+			value: TABS.TREEMAP_FOAMTREE,
+			text: "Treemap chart",
+			className: `main-tabs-${TABS.TREEMAP_FOAMTREE}`
+		},
+		{
+			value: TABS.PACKAGES,
+			className: `main-tabs-${TABS.PACKAGES}`,
+			content: ["text:'Packages '", `pill-badge: modules.filter(=> path has "node_modules").group(=> path.getModulesName(), => 0).size()`]
+		},
+		{
+			value: TABS.MODULES,
+			className: `main-tabs-${TABS.MODULES}`,
+			content: ["text:'Modules '", "pill-badge: modules.size()"]
+		},
+		{
+			value: TABS.DUPLICATES,
+			className: `main-tabs-${TABS.DUPLICATES}`,
+			content: ["text:'Duplicate modules '", "pill-badge: modules.filter(=> duplicates).size()"]
+		}
+	],
+	content: {
+		view: "switch",
+		context(_data, context) {
+			const isHashChangeEvent = (/* @__PURE__ */ new Error("")).stack.includes("Promise.all");
+			discovery.overridePageHashStateWithAnchor({
+				id: "default",
+				ref: isHashChangeEvent ? discovery.pageRef : context.mainTabs
+			});
+			discovery.cancelScheduledRender();
+			const id = discovery.pageRef ?? TABS.TREEMAP_FOAMTREE;
+			setTimeout(() => {
+				discovery.dom.root.querySelectorAll(".main-tabs>div>.onclick").forEach((e) => {
+					e.classList.remove("active");
+				});
+				discovery.dom.root.querySelectorAll(`.main-tabs .main-tabs-${id}`).forEach((e) => {
+					e.classList.add("active");
+				});
+			}, 50);
+			return {
+				...context,
+				id
+			};
+		},
+		content: [
+			{
+				when: `#.id="${TABS.TREEMAP_FOAMTREE}"`,
+				content: {
+					view: "content-filter",
+					name: "filterByPathStr",
+					debounce: 300,
+					className: "foamtree-filter",
+					content: {
+						view: "foamtree",
+						data: `
+              $root: $.rootFolder;
+              $applyFilter: => #.filterByPathStr ? $.modules.filter(=> $.path ~= #.filterByPathStr) : $.modules;
+              $dataObject: $.$applyFilter()
+                .map(=> {path, size: $.output.sizeInBytes})
+                .transformFilesList($root, "foamtree");
+
+              {
+                options: { 
+                  dataObject: $dataObject,
+                  descriptionGroupSize: 0.05,
+                  descriptionGroupMinHeight: 30,
+                }
+              }
+              `
+					}
+				}
+			},
+			{
+				when: `#.id="${TABS.MODULES}"`,
+				content: require_pages__common.getModulesTree({
+					limit: 200,
+					data: `
+              $entryPoint: $.entryPointPath;
+              $totalSize: modules.sum(=>output.sizeInBytes);
+              $toModule: => {
+                ext:  $.path.getFileExtension(),
+                name: $.path, 
+                size: $.output.sizeInBytes.formatBytes(), 
+                percent: ($.output.sizeInBytes / $totalSize).percent(3),
+              };
+              modules.map(=> { 
+                ...$.$toModule(),
+                isEntry: $.isEntry,
+                reasons: $.dependents.map(=> $.$toModule()),
+                duplicates: $.duplicates.map(=> $.$toModule()),
+              })
+            `
+				})
+			},
+			{
+				when: `#.id="${TABS.PACKAGES}"`,
+				content: [
+					require_pages__common.getCopyToClipboardButton({
+						text: "Copy list",
+						className: "copy-before-ask-chatgpt",
+						textToCopy: `"- " + modules.filter(=> path has "node_modules").group(=> path.getModulesName()).map(=> $.key).join("\\n- ")`
+					}),
+					{
+						view: "link",
+						className: "ask-chatgpt view-button",
+						text: "and Ask ChatGPT",
+						external: true,
+						data: `{
+                  href: $.askChatGPTAboutPackages()
+                }`
+					},
+					{
+						view: "content-filter",
+						data: `${require_pages__common.getPackage(`modules.filter(=> path has "node_modules")`)}.sort(pkgInstances desc, size desc)`,
+						className: "packages-content",
+						name: "filterByPathStr",
+						content: require_pages__common.getPackageList({
+							showCopiesBadge: true,
+							expanded: false,
+							limit: 200,
+							subLimit: 50,
+							data: ".[pkgName ~= #.filterByPathStr]",
+							itemPkgName: {
+								view: "link",
+								content: "text-match",
+								data: `{
+                          href: pkgName.pageLink("package", {}),
+                          text: pkgName,
+                          match: #.filterByPathStr
+                        }`
+							}
+						})
+					}
+				]
+			},
+			{
+				when: `#.id="${TABS.DUPLICATES}"`,
+				content: require_pages__common.getModulesTree({ data: `
+              // values
+              $duplicatesOnly: modules.filter(=> duplicates);
+              $totalSize: $duplicatesOnly.sum(=>output.sizeInBytes);
+              $toModule: => {
+                ext:  $.path.getFileExtension(),
+                name: $.path, 
+                size: $.output.sizeInBytes.formatBytes(), 
+                percent: ($.output.sizeInBytes / $totalSize).percent(3),
+              };
+              // return
+              $duplicatesOnly.map(=> { 
+                ...$.$toModule(),
+                reasons: $.dependents.map(=> $.$toModule()),
+                duplicates: $.duplicates.map(=> $.$toModule()),
+              })
+            ` })
+			}
+		]
+	}
+}]);
+//#endregion