react-native-bundle-discovery-ui 2.7.0 → 2.9.0

package/dist/client/pages/module.js

@@ -1,311 +1,4 @@
-const require_pages__common = require("./_common.js");
+const require_pages__module = require("./_module.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())
-            `,
-            }),
-          },
-        ],
-      },
-    },
-  ],
-});
+discovery.page.define("module", require_pages__module.getModulePage());
 //#endregion

package/dist/client/pages/moduleDiff.js

@@ -0,0 +1,76 @@
+const require_pages__module = require("./_module.js");
+//#region src/client/pages/moduleDiff.ts
+discovery.page.define(
+  "module-diff",
+  require_pages__module.getModulePage({
+    codeTabText: "Diff",
+    extraData: "before: $.comparison.beforeModules[#.id],",
+    codeContent: {
+      view: "switch",
+      content: [
+        {
+          when: "not before",
+          content: {
+            view: "alert-warning",
+            data: "'This module was not changed compared with the \"before\" report'",
+          },
+        },
+        {
+          content: {
+            view: "hstack",
+            className: "flex-no-wrap",
+            content: [
+              {
+                view: "block",
+                when: "not isImageOrFontAsset",
+                className: "width-50p",
+                content: [
+                  {
+                    view: "h5",
+                    className: "mo-pane-title",
+                    content: "text: 'Source diff'",
+                  },
+                  {
+                    view: "code-diff",
+                    data: "{ before: before.source, after: currentModule.source.code }",
+                  },
+                ],
+              },
+              {
+                view: "block",
+                className: (data) =>
+                  data.isImageOrFontAsset ? "" : "width-50p",
+                content: [
+                  {
+                    view: "h5",
+                    className: "mo-pane-title",
+                    content: "text: 'Output diff'",
+                  },
+                  {
+                    view: "context",
+                    modifiers: [
+                      {
+                        view: "checkbox",
+                        name: "prettify",
+                        checked: true,
+                        className: "prettify-checkbox",
+                        content: 'text:"Prettify"',
+                      },
+                    ],
+                    content: {
+                      view: "code-diff",
+                      data: `#.prettify
+                        ? { before: before.output.prettifyJS(), after: currentModule.output.code.prettifyJS() }
+                        : { before: before.output, after: currentModule.output.code }`,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  }),
+);
+//#endregion