react-native-bundle-discovery 1.0.0 → 1.0.1

package/.discoveryrc.js

@@ -14,6 +14,7 @@ module.exports = {
       path.resolve(__dirname, "pages/package.js"),
       // Custom views
       path.resolve(__dirname, "views/highcharts.css"),
+      path.resolve(__dirname, "views/prettify.js"),
       path.resolve(__dirname, "views/highcharts.js"),
       path.resolve(__dirname, "views/foamtree.js"),
     ],

package/README.md

@@ -3,7 +3,6 @@
 > [!WARNING]
 > Currently, everything is in a very early stage. The project is not yet ready for use.
 
-
 A simple package that helps developers visualize and analyze the bundle size of React Native apps.
 With this tool, you can easily explore your app's codebase, identify large or heavy packages, and inspect the structure of modules and code within your project.
 
@@ -12,6 +11,7 @@ With this tool, you can easily explore your app's codebase, identify large or he
 ### Setup:
 
 #### 1. Install
+
 ```bash
 yarn add -D react-native-bundle-discovery
 ```
@@ -23,9 +23,9 @@ yarn add -D react-native-bundle-discovery
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 +const {createSerializer} = require('react-native-bundle-discovery');
 
-+const mySerializer = createSerializer({  
++const mySerializer = createSerializer({
 +  includeCode: true, // Useful if you want to compare source/bundle code (but a report file will be larger)
-+  projectRoot: __dirname, 
++  projectRoot: __dirname,
 +   //^^^ ⚠️ WARNING: In a monorepo setup, this should point to the monorepo root,
 +   //                not the individual package directory.
 +});
@@ -63,6 +63,21 @@ npx react-native-bundle-discovery metro-stats.json
 
 ---
 
+### `createSerializer(optiosn: Options)`
+
+| Prop                   | Default value             | Description                                                                                                                              |
+| ---------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| serializer: Function   | Default serializer        | A custom serializer function. If not provided, a default serializer is used.                                                             |
+| projectRoot: string    | Required                  | The root directory of the project. ⚠️ In a monorepo setup, this should point to the monorepo root, not the individual package directory. |
+| outputJsonPath: string | `<root>/metro-stats.json` | The path where the JSON report will be saved. Defaults to `metro-stats.json` in project root.                                            |
+| includeCode: boolean   | `true`                    | Whether to include the source and output code in the JSON report.                                                                        |
+
+### Financial Contributors
+
+Become a financial contributor at [OpenCollective](https://opencollective.com/react-native-bundle-discovery) or [GitHub Sponsors](https://github.com/sponsors/retyui)
+
+### Other
+
 **Similar projects:**
 
 - https://github.com/expo/atlas
@@ -72,8 +87,7 @@ npx react-native-bundle-discovery metro-stats.json
 - https://github.com/statoscope/statoscope
 - https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
 
---- 
+**Built using [Discovery.js](https://github.com/discoveryjs/discovery):**
 
-**Built using Discovery.js:**
 - Build blocks for pages: https://discoveryjs.github.io/discovery/#views-showcase
 - Jora syntax: https://discoveryjs.github.io/jora/#article:jora-syntax-operators

package/lib/customSerializer.js

@@ -106,7 +106,7 @@ function createJsonReport({
       return acc;
     }, {}),
     rootFolder,
-    packages: toPackages(dependencies),
+    packages: toPackages(preModules).concat(toPackages(dependencies)),
     modules: preModules
       .map((m) => toModuleStruct(m, includeCode))
       .concat(dependencies.map((m) => toModuleStruct(m, includeCode))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -12,10 +12,12 @@
     "build": "npx discovery-build --config .discoveryrc.js --output build --serve-only-assets --single-file"
   },
   "dependencies": {
+    "@babel/parser": "^7.0.0",
     "@discoveryjs/cli": "2.14.2",
     "@discoveryjs/discovery": "1.0.0-beta.93",
     "chalk": "^4.1.2",
-    "highcharts": "12.2.0"
+    "highcharts": "12.2.0",
+    "prettier": "^3.5.3"
   },
   "peerDependencies": {
     "metro": "*"
@@ -35,8 +37,5 @@
     "prepare.js",
     "queryHelpers.js",
     ".discoveryrc.js"
-  ],
-  "devDependencies": {
-    "prettier": "3.5.3"
-  }
+  ]
 }

package/pages/module.js

@@ -119,11 +119,29 @@ discovery.page.define("module", {
                     view: "block",
                     className: "width-50p",
                     content: [
-                      "h5: 'Output'",
                       {
-                        view: "source",
-                        syntax: "ts",
-                        source: "=$.currentModule.output.code",
+                        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)",
+                          },
+                        ],
                       },
                     ],
                   },

package/prepare.js

@@ -66,9 +66,6 @@ function prepare(data) {
       m.source.code = m.source.code
         .replaceAll(";", ";\n\n")
         .replaceAll(",", ",\n    ");
-      m.output.code = m.output.code
-        .replaceAll(";", ";\n\n")
-        .replaceAll(",", ",\n    ");
     }
   });
 

package/queryHelpers.js

@@ -1,4 +1,24 @@
 const helpers = {
+  prettifyMap: new Map(),
+  prettifyJS(sourceStr) {
+    if (helpers.prettifyMap.has(sourceStr)) {
+      return helpers.prettifyMap.get(sourceStr);
+    }
+
+    const prettier = require("prettier/standalone");
+    const prettierPluginBabel = require("prettier/plugins/babel");
+    const prettierPluginEstree = require("prettier/plugins/estree");
+
+    return prettier
+      .format(sourceStr, {
+        parser: "babel",
+        plugins: [prettierPluginBabel, prettierPluginEstree],
+      })
+      .then((formatted) => {
+        helpers.prettifyMap.set(sourceStr, formatted);
+        return formatted;
+      });
+  },
   plural(count, [singular, plural]) {
     return count === 1 ? singular : plural;
   },

package/views/global.css

@@ -125,3 +125,9 @@ hr{
     background: red;
     opacity: 1;
 }
+.prettify-checkbox{
+    position: absolute;
+    right: 31px;
+    margin-top: -26px;
+    z-index: 1;
+}

package/views/prettify.js

@@ -0,0 +1,17 @@
+discovery.view.define(
+  "source-prettify",
+  async function renderPrettify(el, config, data, context) {
+    await this.render(
+      el,
+      this.composeConfig([
+        {
+          ...config,
+          source: await config.source,
+          view: "source",
+        },
+      ]),
+      data,
+      context,
+    );
+  },
+);