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

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # react-native-bundle-discovery-ui
 
+## 2.9.0
+
+### Minor Changes
+
+- [#23](https://github.com/retyui/react-native-bundle-discovery/pull/23) [`9a7d932`](https://github.com/retyui/react-native-bundle-discovery/commit/9a7d9325d6039354ba661d68b47eef85dc8334ff) Thanks [@retyui](https://github.com/retyui)! - New `--compare <before.json>` option for the `server` and `build` commands: adds a "Compare" tab to the default page with the difference between the two reports (bundle size, modules and packages count, new duplicates and deprecated packages, package version changes, added/removed/changed modules). Uses the same comparison as `react-native-bundle-discovery-cli compare`.
+
+- [#23](https://github.com/retyui/react-native-bundle-discovery/pull/23) [`1819d53`](https://github.com/retyui/react-native-bundle-discovery/commit/1819d53c4c0b560f186c90d8cf9cfabf52d2be5e) Thanks [@retyui](https://github.com/retyui)! - Module page: the "Imported by" graph is drawn with D3 (a tree from the current module to its importers, sized by module size, with zoom/pan, hover highlighting and click to open a module). Highcharts and the vendored `vendors/` files were removed.
+
+- [#23](https://github.com/retyui/react-native-bundle-discovery/pull/23) [`6271156`](https://github.com/retyui/react-native-bundle-discovery/commit/627115602e54b474670fcaf42b1599570fc76940) Thanks [@retyui](https://github.com/retyui)! - New default "Insights" tab: bundle summary cards, heaviest packages and own modules, and the optimization recommendations of the `analyze` CLI command ranked by estimated savings (production reports only). Header badges show the share of the bundle, the treemap can be colored by package, file type or issues (duplicates / removable code), the "Duplicates" tab lists duplicate packages with possible savings, and the package page shows the shortest import chain ("Why is this in my bundle?").
+
+- [`237407e`](https://github.com/retyui/react-native-bundle-discovery/commit/237407e43ffaf3a298f86fce71ff0e3850e5015f) Thanks [@retyui](https://github.com/retyui)! - Module page: new header with package/version and status chips, stat cards (size share and rank, transform delta, lines, package share, imports, importers, duplicates) and a new Imports tab.
+
+- [#23](https://github.com/retyui/react-native-bundle-discovery/pull/23) [`2cfe22d`](https://github.com/retyui/react-native-bundle-discovery/commit/2cfe22dda8ded6fd37076aadde194a4142c46c7a) Thanks [@retyui](https://github.com/retyui)! - Package page: new header with versions, status and recommendation chips and quick links, stat cards (bundle share and rank, files, copies with possible savings, importers, publish date) and tabs for files, importers, the import chain and versions. Fixes a package page showing files of another package whose name contains the requested one (e.g. `react` and `react-native`).
+
+- [#23](https://github.com/retyui/react-native-bundle-discovery/pull/23) [`a910869`](https://github.com/retyui/react-native-bundle-discovery/commit/a910869464542f8bdfe62776ca8f608610a3a735) Thanks [@retyui](https://github.com/retyui)! - Default page: the row of badges on top is replaced with a compact report bar: platform, a warning for dev or unminified bundles (green "Production · Minified" otherwise), the total size with a "your code / node_modules" split bar, and the report build date.
+
+- [#20](https://github.com/retyui/react-native-bundle-discovery/pull/20) [`5817574`](https://github.com/retyui/react-native-bundle-discovery/commit/58175749496a860dbfa87da7fbdd7a9e8dd67844) Thanks [@retyui](https://github.com/retyui)! - Packages and Modules tabs: show the total size of filtered items and allow sorting by size, name or duplicates.
+
+### Patch Changes
+
+- [#23](https://github.com/retyui/react-native-bundle-discovery/pull/23) [`d40a350`](https://github.com/retyui/react-native-bundle-discovery/commit/d40a350eb97f2077a84c28421d2d063288167577) Thanks [@retyui](https://github.com/retyui)! - Treemap: more vivid colors with cushion shading, and sub-folders of a package get a slightly shifted hue so big packages show their structure.
+
+- [#23](https://github.com/retyui/react-native-bundle-discovery/pull/23) [`2cfe22d`](https://github.com/retyui/react-native-bundle-discovery/commit/2cfe22dda8ded6fd37076aadde194a4142c46c7a) Thanks [@retyui](https://github.com/retyui)! - Packages tab: remove the "Copy list" and "Ask ChatGPT" buttons. Packages and Modules tabs: "Sort by" is now on the left of the filter.
+
+- [`9331e2f`](https://github.com/retyui/react-native-bundle-discovery/commit/9331e2f875f4b6cdeeda4ccda2ac5bb2c03700cd) Thanks [@retyui](https://github.com/retyui)! - Packages and Modules tabs: keep the entered filter value after opening a package/module page and navigating back.
+
+## 2.8.0
+
+### Minor Changes
+
+- [`64fd3fd`](https://github.com/retyui/react-native-bundle-discovery/commit/64fd3fdb878fa539ed3c9f032588c61d301f61d1) Thanks [@retyui](https://github.com/retyui)! - Support [esbuild metafile](https://esbuild.github.io/api/#metafile) as input (e.g. from `@rnx-kit/metro-serializer-esbuild` with the `metafile` option), with module sizes after tree shaking.
+
 ## 2.7.0
 
 ### Minor Changes

package/README.md

@@ -7,237 +7,22 @@
 Visualize and analyze the JS bundle of your React Native app. Find heavy packages, duplicates and deprecated
 dependencies, inspect every module, and catch bundle size regressions in CI.
 
-<img width="800" alt="Bundle Discovery UI" src="./assets/img.png" />
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./assets/overview-dark.jpg" />
+  <img width="800" alt="Bundle Discovery UI: Treemap, Insights and Packages tabs" src="./assets/overview.jpg" />
+</picture>
 
-## Contents
+## Documentation
 
-- [Features](#features)
-- [Packages](#packages)
-- [Quick start](#quick-start)
-- [Other setups](#other-setups)
-- [Usage](#usage)
-  - [UI](#ui)
-  - [CLI](#cli)
-  - [Bundle size checks in CI](#bundle-size-checks-in-ci)
-- [API](#api)
-  - [`createSerializer`](#createserializeroptions)
-  - [`createResolveRequest`](#createresolverequestoptions)
-- [Similar projects](#similar-projects)
-- [Support the project](#support-the-project)
-- [License](#license)
+📖 **[retyui.github.io/bundle-discovery](https://retyui.github.io/bundle-discovery/)**
 
-## Features
+🚀 **[Live demo](https://retyui.github.io/bundle-discovery-demo/)**: see the UI with a real report in compare mode.
 
-- 📊 Interactive UI to explore packages, modules and their source/bundled code
-- 💡 Optimization recommendations (duplicates, deprecated / outdated / dev-only packages, and more)
-- 🔍 CLI to list the heaviest packages and modules
-- 🆚 Compare two reports and fail CI on bundle size regressions
-- 🧩 Works with Metro, [Re.Pack](./Re.Pack.md) and [React Native DevTools](./packages/rozenite-plugin/README.md) (via Rozenite)
-
-## Packages
-
-| Package                                                                  | What it does                                                                                    | Required |
-| ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------- |
-| `react-native-bundle-discovery`                                          | Generates a JSON report (`metro-stats.json`) of your bundle                                     | ✅ Yes   |
-| `react-native-bundle-discovery-ui`                                       | Shows the report in the browser                                                                 | Optional |
-| `react-native-bundle-discovery-cli`                                      | Analyzes and compares reports in the terminal / CI                                              | Optional |
-| [`react-native-bundle-discovery-rozenite-plugin`](./packages/rozenite-plugin/README.md) | Shows the UI inside [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) | Optional |
-
-## Quick start
-
-This setup is for a standard **Metro** project.
-Using Re.Pack or Rozenite? See [Other setups](#other-setups).
-
-> [!TIP]
-> **Using an AI coding agent?** Skip the manual steps below. Point your agent (Claude Code, Cursor, Codex, etc.)
-> at the [`setup-react-native-bundle-discovery`](./skills/setup-react-native-bundle-discovery/SKILL.md) skill.
-> It installs the package and sets up Metro or Re.Pack for you:
->
-> ```bash
-> npx skills add retyui/react-native-bundle-discovery
-> ```
-
-### 1. Install
-
-```bash
-yarn add -D react-native-bundle-discovery      # required: generates the report
-yarn add -D react-native-bundle-discovery-ui   # optional: browser UI
-yarn add -D react-native-bundle-discovery-cli  # optional: CLI
-```
-
-### 2. Configure Metro
-
-```diff
-// metro.config.js
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-+const { createSerializer } = require('react-native-bundle-discovery');
-
--const config = {};
-+const config = {
-+  serializer: {
-+    customSerializer: createSerializer({
-+      projectRoot: __dirname, // ⚠️ In a monorepo, use the monorepo root instead
-+    }),
-+  },
-+};
-
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
-```
-
-See all options in [`createSerializer`](#createserializeroptions).
-
-### 3. Build a release bundle
-
-```bash
-npx react-native bundle \
-  --entry-file index.js \
-  --platform ios \
-  --dev false \
-  --bundle-output ios/main.jsbundle \
-  --assets-dest ios/assets
-```
-
-This writes `metro-stats.json` to your project root.
-
-### 4. Explore the report
-
-```bash
-npx react-native-bundle-discovery-ui metro-stats.json   # open in the browser
-npx react-native-bundle-discovery-cli metro-stats.json  # get recommendations in the terminal
-```
-
-## Other setups
-
-| Setup                      | Guide                                                                                                                        |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| Re.Pack (Rspack / Webpack) | [Re.Pack.md](./Re.Pack.md)                                                                                                   |
-| React Native DevTools      | [Rozenite plugin](./packages/rozenite-plugin/README.md)                                                                                     |
-| AI coding agent            | Point your agent at the [`setup-react-native-bundle-discovery`](./skills/setup-react-native-bundle-discovery/SKILL.md) skill |
-
-## Usage
-
-### UI
-
-Requires `react-native-bundle-discovery-ui`.
-
-```bash
-# Start a local server (default port: 8079)
-npx react-native-bundle-discovery-ui metro-stats.json [--port <port>]
-
-# Build a static HTML report (default output: .bundle-discovery)
-npx react-native-bundle-discovery-ui build metro-stats.json [--output <path>]
-```
-
-### CLI
-
-Requires `react-native-bundle-discovery-cli`. Run any command with `--help` to see all options.
-
-| Command    | Description                                   |
-| ---------- | --------------------------------------------- |
-| _(none)_   | Show recommended optimizations for the bundle |
-| `packages` | List all packages in the bundle               |
-| `modules`  | List the heaviest modules                     |
-| `compare`  | Compare two reports                           |
-
-```bash
-# Recommended optimizations
-npx react-native-bundle-discovery-cli metro-stats.json
-
-# All packages
-npx react-native-bundle-discovery-cli packages metro-stats.json [--sort size|name] [--format json|table|default]
-
-# Heaviest modules (default --limit: 50, use 0 to show all)
-# --filter accepts plain text (case-insensitive) or a regexp, e.g. --filter '/\.json/i'
-npx react-native-bundle-discovery-cli modules metro-stats.json [--limit 50] [--filter <text|/regexp/>] [--sort size|name] [--format json|table|default]
-
-# Diff two reports: total size, added/removed/changed modules and packages,
-# version changes, new duplicates and new deprecated packages
-npx react-native-bundle-discovery-cli compare --before main-stats.json --after pr-stats.json [--limit 50] [--format json|markdown|default]
-```
-
-### Bundle size checks in CI
-
-`compare` exits with code `1` when any check fails:
-
-| Option               | Fails when                                                    | Example                         |
-| -------------------- | ------------------------------------------------------------- | ------------------------------- |
-| `--fail-on-increase` | The bundle grows more than the limit (bytes or % of "before") | `50KB`, `0.5MB`, `51200`, `5%`  |
-| `--max-size`         | The "after" bundle is bigger than the limit                   | `3MB`                           |
-| `--fail-on`          | New duplicate and/or deprecated packages appear               | `new-duplicates,new-deprecated` |
-
-```bash
-npx react-native-bundle-discovery-cli compare --before main-stats.json --after pr-stats.json \
-  --fail-on-increase 50KB \
-  --max-size 3MB \
-  --fail-on new-duplicates,new-deprecated
-```
-
-**GitHub Actions** works out of the box: the markdown report is added to the job summary and failed checks
-are shown as error annotations.
-
-```yaml
-- run: npx react-native-bundle-discovery-cli compare --before main-stats.json --after pr-stats.json --fail-on-increase 5%
-```
-
-To post the report as a PR comment, use `--format markdown`.
-
-## API
-
-Exported from `react-native-bundle-discovery`.
-
-### `createSerializer(options)`
-
-Creates a Metro serializer that writes the JSON report. Use it as `serializer.customSerializer` (see [Quick start](#2-configure-metro)).
-
-| Option                  | Type       | Default                          | Description                                                                               |
-| ----------------------- | ---------- | -------------------------------- | ----------------------------------------------------------------------------------------- |
-| `projectRoot`           | `string`   | **Required**                     | Project root. ⚠️ In a monorepo, use the monorepo root, not the app package directory.     |
-| `outputJsonPath`        | `string`   | `<projectRoot>/metro-stats.json` | Where to save the report.                                                                 |
-| `includeCode`           | `boolean`  | `true`                           | Include source and bundled code of each module in the report (larger file).               |
-| `includeEnvs`           | `string[]` | `[]`                             | Names of environment variables to include in the report.                                  |
-| `fetchPackagesMetadata` | `boolean`  | `true`                           | Fetch package metadata (publish date, deprecation, latest version) from the npm registry. |
-| `silent`                | `boolean`  | `false`                          | Disable log output.                                                                       |
-| `serializer`            | `Function` | Metro default serializer         | Custom serializer to wrap.                                                                |
-
-> [!WARNING]
-> With `includeCode: true` (the default) the report **contains your source code**.
-> If your code is proprietary, be careful who you share the report with.
-
-### `createResolveRequest(options)`
-
-Creates a Metro `resolveRequest` that removes unnecessary React Native modules from **release** bundles
-(dev builds are not affected). The CLI recommends these options when they apply to your bundle.
-
-| Option              | Type      | Default | Description                                                                      |
-| ------------------- | --------- | ------- | -------------------------------------------------------------------------------- |
-| `removeUTFSequence` | `boolean` | `false` | Remove the unused `react-native/Libraries/UTFSequence.js` module.                |
-| `removeNewRenderer` | `boolean` | `false` | Remove the Fabric renderer. Enable only if the New Architecture is **disabled**. |
-
-```js
-// metro.config.js
-const { createResolveRequest } = require("react-native-bundle-discovery");
-
-const config = {
-  resolver: {
-    resolveRequest: createResolveRequest({
-      removeUTFSequence: true,
-    }),
-  },
-};
-```
-
-## Similar projects
-
-- [expo-atlas](https://github.com/expo/atlas)
-- [expo-atlas-without-expo](https://github.com/v3ron/expo-atlas-without-expo)
-- [react-native-bundle-visualizer](https://github.com/callstack/react-native-bundle-visualizer)
-- [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
-- [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme)
-- [statoscope](https://github.com/statoscope/statoscope)
-
-Built with [Discovery.js](https://github.com/discoveryjs/discovery)
-([views showcase](https://discoveryjs.github.io/discovery/#views-showcase),
-[Jora syntax](https://discoveryjs.github.io/jora/#article:jora-syntax-operators)).
+- [Quick start](https://retyui.github.io/bundle-discovery/docs/getting-started/quick-start)
+- [UI](https://retyui.github.io/bundle-discovery/docs/guides/ui) and [CLI](https://retyui.github.io/bundle-discovery/docs/guides/cli)
+- [Bundle size checks in CI](https://retyui.github.io/bundle-discovery/docs/guides/ci)
+- [Re.Pack](https://retyui.github.io/bundle-discovery/docs/guides/repack), [rnx-kit](https://retyui.github.io/bundle-discovery/docs/guides/rnx-kit) and [React Native DevTools](https://retyui.github.io/bundle-discovery/docs/guides/rozenite)
+- [API](https://retyui.github.io/bundle-discovery/docs/api/create-serializer)
 
 ## Support the project