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

package/dist/client/pages/module.js

@@ -0,0 +1,260 @@
+const require_pages__common = require("./_common.js");
+//#region src/client/pages/module.ts
+function getMetroWarn({ when, href, linkText, content }) {
+	return {
+		view: "alert-warning",
+		when,
+		className: "m-v-8",
+		content: [...content, linkText && href ? {
+			view: "link",
+			data: {
+				external: true,
+				href,
+				text: linkText
+			}
+		} : null].filter(Boolean)
+	};
+}
+discovery.page.define("module", {
+	view: "context",
+	data: `{
+    $currentModule: $.modules.[path = #.id].pick(0); 
+    ...$, 
+    currentModule: $currentModule,
+    isEntry: $currentModule.isEntry,
+    isInjectedByMetro: $currentModule.path = '__prelude__' or $currentModule.path has '@react-native/js-polyfills',
+    isWebpackRuntime: $currentModule.path has '__runtime__',
+  }`,
+	content: [{
+		view: "h2",
+		content: [
+			"text: \"Module: \"",
+			"text: $.currentModule.path",
+			require_pages__common.getCopyToClipboardButton({
+				textToCopy: `$.currentModule.path`,
+				className: "m-l-0_5em"
+			})
+		]
+	}, {
+		view: "tabs",
+		name: "tabs",
+		tabs: [
+			{
+				value: "mcontent",
+				text: "Module content"
+			},
+			{
+				value: "networkGraph",
+				when: "not isInjectedByMetro and not isEntry and not isWebpackRuntime",
+				text: "Imported by modules"
+			},
+			{
+				value: "mduplicates",
+				when: "not isInjectedByMetro and not isEntry and not isWebpackRuntime and currentModule.duplicates",
+				text: "Duplicates"
+			}
+		],
+		content: {
+			view: "switch",
+			content: [
+				{
+					when: "#.tabs=\"mcontent\"",
+					content: [
+						getMetroWarn({
+							when: "$.currentModule.path = '__prelude__'",
+							content: ["html: '<b>__prelude__</b>'", "text: ' is a special runtime code that was generated by the Metro bundler, see: '"],
+							href: "https://github.com/facebook/metro/blob/f595e9e1c9021ad372b489be8958cc298eb1e0d9/packages/metro/src/lib/getPreludeCode.js#L25-L33",
+							linkText: "getPreludeCode.js"
+						}),
+						getMetroWarn({
+							when: "$.currentModule.path = '__runtime__'",
+							content: ["html: '<b>__runtime__</b>'", "text: ' is a special runtime code that was generated by the Webpack/Rspack bundler'"]
+						}),
+						getMetroWarn({
+							when: "$.currentModule.path has '@react-native/js-polyfills'",
+							content: ["html: '<b>@react-native/js-polyfills/*</b>'", "text: ' is a special package that was injected by the Metro bundler, see: '"],
+							href: "https://github.com/facebook/react-native/blob/198c6fc81cda67a46fff457cc39eb2a297eddc01/packages/metro-config/src/index.flow.js#L61",
+							linkText: "rn/metro-config/index.js"
+						}),
+						getMetroWarn({
+							when: "$.currentModule.path has 'metro-runtime'",
+							content: ["html: '<b>metro-runtime/*</b>'", "text: ' is a special package that was injected by the Metro bundler, see: '"],
+							href: "https://github.com/facebook/metro/blob/f595e9e1c9021ad372b489be8958cc298eb1e0d9/packages/metro-config/src/defaults/defaults.js#L61-L63",
+							linkText: "metro-config/index.js"
+						}),
+						{
+							view: "hstack",
+							className: "flex-no-wrap",
+							content: [{
+								view: "block",
+								className: "width-50p",
+								content: ["h5: 'Source'", {
+									view: "source",
+									syntax: "ts",
+									source: "=$.currentModule.source.code"
+								}]
+							}, {
+								view: "block",
+								className: "width-50p",
+								content: [{
+									view: "h5",
+									content: "text:\"Output\""
+								}, {
+									view: "context",
+									modifiers: [{
+										view: "checkbox",
+										name: "prettify",
+										checked: true,
+										className: "prettify-checkbox",
+										content: "text:\"Prettify\""
+									}],
+									content: [{
+										view: "source-prettify",
+										syntax: "ts",
+										source: "=(#.prettify ? $.currentModule.output.code.prettifyJS() : $.currentModule.output.code)"
+									}]
+								}]
+							}]
+						}
+					]
+				},
+				{
+					when: "#.tabs=\"networkGraph\"",
+					content: {
+						view: "context",
+						context: `{ ...#, maxParentDepth: $.currentModule.getBestNetworkGraphSize() }`,
+						modifiers: [
+							"html: '<br/>'",
+							"text:'Max parent depth: '",
+							{
+								view: "input",
+								name: "maxParentDepth",
+								className: "inline-block",
+								htmlType: "number",
+								htmlMin: 1,
+								htmlMax: 10
+							}
+						],
+						content: [{
+							view: "context",
+							data: `{
+                    // Vars
+                    $tmp: $.currentModule.getNetworkGraph({ maxParentDepth: #.maxParentDepth });
+                    $limit: 150;
+                    // Return data
+                    currentModule: $.currentModule,                      
+                    entryPointPath: $tmp.entryPointPath,
+                    limit: $limit,
+                    data: $tmp.data,
+                    isGraphTooBig: $tmp.data.size() > $limit,
+                  }`,
+							content: [{
+								when: "isGraphTooBig",
+								view: "block",
+								className: "m-v-8",
+								content: [{
+									view: "alert-warning",
+									data: "\"Amount of dependencies \"+$.data.size()+\" (limit: \"+$.limit+\") are too big to display as a graph :(\""
+								}]
+							}, {
+								view: "hstack",
+								className: "flex-no-wrap two-column",
+								content: [{
+									when: "not isGraphTooBig",
+									view: "highcharts",
+									data: `{
+                        options: {
+                          chart: {
+                            type: "networkgraph",
+                            height: "500px",
+                          },
+                          title: {
+                            text: "Import Dependency Graph",
+                            align: "left",
+                          },
+                          subtitle: {
+                            text: "It shows which modules import this file (Red - current module, Gold - entry point)",
+                            align: "left",
+                          },
+                          plotOptions: {
+                            networkgraph: {
+                              keys: ["from", "to"],
+                              layoutAlgorithm: {
+                                enableSimulation: true,
+                                friction: -0.9,
+                                gravitationalConstant: 0.06,
+                              },
+                            },
+                          },
+                          series: [
+                            {
+                              accessibility: {
+                                enabled: false,
+                              },
+                              dataLabels: {
+                                enabled: true,
+                                linkFormat: "",
+                                style: {
+                                  fontSize: "0.8em",
+                                  fontWeight: "normal",
+                                },
+                              },
+                              id: "lang-tree",
+                              data: $.data,
+                              nodes:[
+                                { id: $.currentModule.path, marker: { radius: 15, fillColor: 'red' }, },
+                                { id: $.entryPointPath, marker: { radius: 15, fillColor: 'gold' } }
+                              ].filter(=> id),
+                            },
+                          ],
+                        },
+                      }`
+								}, {
+									view: "block",
+									content: ["h4: 'Modules that import this file: ' + $.currentModule.path", {
+										view: "list",
+										data: `
+                                $totalSize: modules.sum(=>output.sizeInBytes);
+                                $toModule: => {
+                                  $deepIdx: $$ + 1;
+                                  ext:  $.path.getFileExtension(),
+                                  name: $.path,
+                                  size: $.output.sizeInBytes.formatBytes(),
+                                  percent: ($.output.sizeInBytes / $totalSize).percent(3),
+                                  children: $deepIdx < 2 ? $.dependents.map(=> $.$toModule()) : null,
+                                };
+                                $.currentModule.dependents.map(=> $.$toModule(0))
+                              `,
+										emptyText: "⚠️ No importing modules found",
+										item: {
+											view: "tree",
+											expanded: false,
+											itemConfig: {
+												content: require_pages__common.getTreeModule({ hasTextMatch: true }),
+												children: `$.children`
+											}
+										}
+									}]
+								}]
+							}]
+						}]
+					}
+				},
+				{
+					when: "#.tabs=\"mduplicates\"",
+					content: require_pages__common.getModulesTree({ data: `
+              $totalSize: modules.sum(=>output.sizeInBytes);
+              $toModule: => {
+                ext:  $.path.getFileExtension(),
+                name: $.path, 
+                size: $.output.sizeInBytes.formatBytes(), 
+                percent: ($.output.sizeInBytes / $totalSize).percent(3),
+              };
+              currentModule.duplicates.map(=> $.$toModule())
+            ` })
+				}
+			]
+		}
+	}]
+});
+//#endregion

package/dist/client/pages/package.js

@@ -0,0 +1,187 @@
+const require_pages__common = require("./_common.js");
+//#region src/client/pages/package.ts
+discovery.page.define("package", {
+	view: "context",
+	data: `
+    // Tmp variables
+    $currentPkgName: #.id;
+    ${require_pages__common.getPackage(`$pkg: modules.filter(=> path has "node_modules" and path has $currentPkgName)`)}[0];
+    $copies: $pkg.pkgInstances.size() - 1;
+    $ver: $pkg.pkgInstances[0].version;
+
+    // Return value
+    { 
+      ...$, 
+      currentPkgHasCopies: $copies > 0,
+      currentPkgCopiesCount: $copies,
+      currentPkgVersion: $ver,
+      currentPkgWithUniqVer: $pkg.pkgName + ($copies = 0 ? '@' + $ver : ''),
+      currentPkgWithUniqVerNpm: $pkg.pkgName + ($copies = 0 ? '/v/' + $ver : ''),
+      currentPkg: $pkg,
+      currentPkgInstancesWithMetadata: $pkg.pkgInstances.[metadata],
+      currentPkgDeprecated: $pkg.pkgInstances.[metadata.deprecated],
+      currentPkgOutdated: $pkg.pkgInstances.[metadata and not metadata.isLatest],
+      currentPkgLatestVersion: $pkg.pkgInstances.metadata.latestVersion[0],
+    }
+  `,
+	content: [
+		{
+			view: "block",
+			content: [
+				{
+					view: "h1",
+					className: "inline-block no-margin",
+					content: `badge: {
+            text: $.currentPkgWithUniqVer,
+            color: "#fffb5a",
+          }`
+				},
+				{
+					when: "$.currentPkgCopiesCount > 0",
+					view: "h2",
+					className: "inline-block no-margin",
+					content: [`badge: {
+              text: '+' + $.currentPkgCopiesCount, 
+              postfix: $.currentPkgCopiesCount = 1 ? 'copy' : 'copies',
+              color: "rgba(255, 0, 0, 0.35)"
+            }`]
+				},
+				{
+					when: "$.currentPkgDeprecated",
+					view: "h2",
+					className: "inline-block no-margin",
+					content: `badge: { text: 'deprecated', color: "rgba(255, 0, 0, 0.35)" }`
+				},
+				{
+					when: "$.currentPkgOutdated",
+					view: "h2",
+					className: "inline-block no-margin",
+					content: `badge: {
+            prefix: 'latest',
+            text: 'v' + $.currentPkgLatestVersion,
+            color: "rgba(255, 165, 0, 0.35)"
+          }`
+				},
+				require_pages__common.getCopyToClipboardButton({
+					textToCopy: `$.currentPkg.pkgName`,
+					className: "m-l-0_5em"
+				})
+			]
+		},
+		{
+			when: "$.currentPkgDeprecated",
+			view: "list",
+			data: "$.currentPkgDeprecated",
+			item: {
+				view: "alert-danger",
+				content: [
+					"html: '<b>Deprecated</b> '",
+					"text: 'v' + version + (#.data.currentPkgHasCopies ? ' (' + pkgName + ')' : '') + ': '",
+					"text: metadata.deprecated"
+				]
+			}
+		},
+		"html: '<br>'",
+		{
+			view: "block",
+			content: [
+				"text: 'Links: '",
+				{
+					view: "link",
+					external: true,
+					data: `{ href: "https://www.npmjs.com/package/" + currentPkgWithUniqVerNpm }`,
+					content: ["text: 'npmjs.com'", `html: '<span class="my-icon-inline my-icon-12">${require_pages__common.externalLinkHtml}</span>'`]
+				},
+				"text: ' '",
+				{
+					view: "link",
+					external: true,
+					data: `{ href: "https://bundlephobia.com/package/" + currentPkgWithUniqVer }`,
+					content: ["text: 'bundlephobia.com'", `html: '<span class="my-icon-inline my-icon-12">${require_pages__common.externalLinkHtml}</span>'`]
+				},
+				"text: ' '",
+				{
+					view: "link",
+					external: true,
+					data: `{ href: "https://packagephobia.com/result?p=" + currentPkgWithUniqVer }`,
+					content: ["text: 'packagephobia.com'", `html: '<span class="my-icon-inline my-icon-12">${require_pages__common.externalLinkHtml}</span>'`]
+				},
+				{
+					view: "link",
+					external: true,
+					data: `{ href: "https://bundlejs.com/?q=" + currentPkgWithUniqVer, q: currentPkgWithUniqVer }`,
+					content: [{
+						view: "html",
+						data: `'<img class="bundlejs-badge-img" src="https://deno.bundlejs.com/?q=' + q + '&badge=detailed" />'`
+					}]
+				}
+			]
+		},
+		{
+			when: "$.currentPkgInstancesWithMetadata",
+			view: "block",
+			content: ["h3: 'Versions'", {
+				view: "table",
+				data: "$.currentPkgInstancesWithMetadata",
+				cols: [
+					{
+						header: "Path",
+						content: "text: pkgName"
+					},
+					{
+						header: "Version",
+						content: "pill-badge:{ text: 'v' + version, color: '#0af' }"
+					},
+					{
+						header: "Published",
+						data: "metadata.createdAt",
+						content: [
+							"text: formatDate()",
+							"text: ' '",
+							"pill-badge:{ text: timeAgo() }"
+						]
+					},
+					{
+						header: "Latest",
+						content: [{
+							view: "link",
+							external: true,
+							data: `{
+                    href: "https://www.npmjs.com/package/" + #.data.currentPkg.pkgName + "/v/" + metadata.latestVersion,
+                    text: 'v' + metadata.latestVersion,
+                  }`
+						}]
+					},
+					{
+						header: "Status",
+						content: {
+							view: "switch",
+							content: [
+								{
+									when: "metadata.deprecated",
+									content: `badge: { text: 'deprecated', color: "rgba(255, 0, 0, 0.35)" }`
+								},
+								{
+									when: "metadata.isLatest",
+									content: `badge: { text: 'latest', color: "rgba(120, 177, 9, 0.35)" }`
+								},
+								{ content: `badge: { text: 'outdated', color: "rgba(255, 165, 0, 0.35)" }` }
+							]
+						}
+					}
+				]
+			}]
+		},
+		"html: '<hr>'",
+		{
+			view: "block",
+			content: require_pages__common.getPackageList({
+				data: "$.currentPkg",
+				itemPkgName: "text: pkgName",
+				showCopiesBadge: false,
+				expanded: true
+			})
+		}
+	]
+});
+//#endregion

package/dist/client/prepare.js

@@ -0,0 +1,52 @@
+//#region src/client/prepare.ts
+function getDuplicateId(path) {
+	const uniqueNodeModulePath = path.split("node_modules/").pop();
+	const ids = [uniqueNodeModulePath];
+	if (uniqueNodeModulePath.startsWith("lodash.") || uniqueNodeModulePath.startsWith("lodash-es/")) {
+		const uniqueLodashPath = uniqueNodeModulePath.replace("lodash-es/", "lodash/").replace("lodash.", "lodash/").replace("/index.js", ".js");
+		ids.push(uniqueLodashPath);
+	}
+	return ids;
+}
+function prepare(input) {
+	const data = input;
+	const moduleMap = /* @__PURE__ */ new Map();
+	const duplicatesMap = /* @__PURE__ */ new Map();
+	const allLodashModules = /* @__PURE__ */ new Set();
+	data.packages.forEach((pkg) => {
+		pkg.path = pkg.absolutePath.replace(`${data.rootFolder}/`, "");
+	});
+	data.modules.forEach((m) => {
+		m.absolutePath = m.path;
+		if (m.absolutePath === data.entryPoint) m.isEntry = true;
+		m.path = m.path.replace(`${data.rootFolder}/`, "");
+		m.dependencies.forEach((d) => {
+			d.path = d.absolutePath.replace(`${data.rootFolder}/`, "");
+		});
+		m._tmp_ids = getDuplicateId(m.path);
+		m.duplicates = [];
+		m._tmp_ids.forEach((id) => {
+			if (!duplicatesMap.has(id)) duplicatesMap.set(id, []);
+			duplicatesMap.get(id).push(m);
+		});
+		if (m.path.includes("node_modules/lodash")) allLodashModules.add(m);
+		m.dependents = [];
+		moduleMap.set(m.absolutePath, m);
+		if (m.path === "__prelude__") m.source.code = m.source.code.replaceAll(";", ";\n\n").replaceAll(",", ",\n    ");
+	});
+	data.modules.forEach((m) => {
+		m._tmp_ids.forEach((id) => {
+			const duplicates = duplicatesMap.get(id);
+			if (duplicates.length > 1) m.duplicates.push(...duplicates.filter((d) => d !== m));
+		});
+		if (m.path.endsWith("node_modules/lodash/index.js")) m.duplicates.push(...allLodashModules);
+		delete m._tmp_ids;
+		m.dependencies.forEach((dependency) => {
+			const dependentModule = moduleMap.get(dependency.absolutePath);
+			if (dependentModule) dependentModule.dependents.push(m);
+		});
+	});
+	return data;
+}
+//#endregion
+module.exports = prepare;