Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add dark theme #643

Closed
wants to merge 2 commits into from
Closed

feat: Add dark theme #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b6395bc
Add dark theme
dsshard Oct 21, 2024
346aa34
Return package-lock.json
dsshard Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,21 +53,22 @@ And it also shows their gzipped sizes!
new BundleAnalyzerPlugin(options?: object)
```

|Name|Type|Description|
|:--:|:--:|:----------|
|**`analyzerMode`**|One of: `server`, `static`, `json`, `disabled`|Default: `server`. In `server` mode analyzer will start HTTP server to show bundle report. In `static` mode single HTML file with bundle report will be generated. In `json` mode single JSON file with bundle report will be generated. In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`. |
|**`analyzerHost`**|`{String}`|Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server.|
|**`analyzerPort`**|`{Number}` or `auto`|Default: `8888`. Port that will be used in `server` mode to start HTTP server. If `analyzerPort` is `auto`, the operating system will assign an arbitrary unused port |
|**`analyzerUrl`**|`{Function}` called with `{ listenHost: string, listenHost: string, boundAddress: server.address}`. [server.address comes from Node.js](https://nodejs.org/api/net.html#serveraddress)| Default: `http://${listenHost}:${boundAddress.port}`. The URL printed to console with server mode.|
|**`reportFilename`**|`{String}`|Default: `report.html`. Path to bundle report file that will be generated in `static` mode. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).|
|**`reportTitle`**|`{String\|function}`|Default: function that returns pretty printed current date and time. Content of the HTML `title` element; or a function of the form `() => string` that provides the content.|
|**`defaultSizes`**|One of: `stat`, `parsed`, `gzip`|Default: `parsed`. Module sizes to show in report by default. [Size definitions](#size-definitions) section describes what these values mean.|
|**`openAnalyzer`**|`{Boolean}`|Default: `true`. Automatically open report in default browser.|
|**`generateStatsFile`**|`{Boolean}`|Default: `false`. If `true`, webpack stats JSON file will be generated in bundle output directory|
|**`statsFilename`**|`{String}`|Default: `stats.json`. Name of webpack stats JSON file that will be generated if `generateStatsFile` is `true`. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).|
|**`statsOptions`**|`null` or `{Object}`|Default: `null`. Options for `stats.toJson()` method. For example you can exclude sources of your modules from stats file with `source: false` option. [See more options here](https://webpack.js.org/configuration/stats/). |
|**`excludeAssets`**|`{null\|pattern\|pattern[]}` where `pattern` equals to `{String\|RegExp\|function}`|Default: `null`. Patterns that will be used to match against asset names to exclude them from the report. If pattern is a string it will be converted to RegExp via `new RegExp(str)`. If pattern is a function it should have the following signature `(assetName: string) => boolean` and should return `true` to *exclude* matching asset. If multiple patterns are provided asset should match at least one of them to be excluded. |
|**`logLevel`**|One of: `info`, `warn`, `error`, `silent`|Default: `info`. Used to control how much details the plugin outputs.|
| Name | Type | Description |
|:-----------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **`analyzerMode`** | One of: `server`, `static`, `json`, `disabled` | Default: `server`. In `server` mode analyzer will start HTTP server to show bundle report. In `static` mode single HTML file with bundle report will be generated. In `json` mode single JSON file with bundle report will be generated. In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`. |
| **`analyzerHost`** | `{String}` | Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server. |
| **`analyzerPort`** | `{Number}` or `auto` | Default: `8888`. Port that will be used in `server` mode to start HTTP server. If `analyzerPort` is `auto`, the operating system will assign an arbitrary unused port |
| **`analyzerUrl`** | `{Function}` called with `{ listenHost: string, listenHost: string, boundAddress: server.address}`. [server.address comes from Node.js](https://nodejs.org/api/net.html#serveraddress) | Default: `http://${listenHost}:${boundAddress.port}`. The URL printed to console with server mode. |
| **`reportFilename`** | `{String}` | Default: `report.html`. Path to bundle report file that will be generated in `static` mode. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config). |
| **`reportTitle`** | `{String\|function}` | Default: function that returns pretty printed current date and time. Content of the HTML `title` element; or a function of the form `() => string` that provides the content. |
| **`defaultSizes`** | One of: `stat`, `parsed`, `gzip` | Default: `parsed`. Module sizes to show in report by default. [Size definitions](#size-definitions) section describes what these values mean. |
| **`openAnalyzer`** | `{Boolean}` | Default: `true`. Automatically open report in default browser. |
| **`generateStatsFile`** | `{Boolean}` | Default: `false`. If `true`, webpack stats JSON file will be generated in bundle output directory |
| **`statsFilename`** | `{String}` | Default: `stats.json`. Name of webpack stats JSON file that will be generated if `generateStatsFile` is `true`. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config). |
| **`statsOptions`** | `null` or `{Object}` | Default: `null`. Options for `stats.toJson()` method. For example you can exclude sources of your modules from stats file with `source: false` option. [See more options here](https://webpack.js.org/configuration/stats/). |
| **`excludeAssets`** | `{null\|pattern\|pattern[]}` where `pattern` equals to `{String\|RegExp\|function}` | Default: `null`. Patterns that will be used to match against asset names to exclude them from the report. If pattern is a string it will be converted to RegExp via `new RegExp(str)`. If pattern is a function it should have the following signature `(assetName: string) => boolean` and should return `true` to *exclude* matching asset. If multiple patterns are provided asset should match at least one of them to be excluded. |
| **`theme`** | `{dark\| light}` | Default: `light`. Theme for the open window, dark or light (default: light) |
| **`logLevel`** | One of: `info`, `warn`, `error`, `silent` | Default: `info`. Used to control how much details the plugin outputs. |

<h2 align="center">Usage (as a CLI utility)</h2>

Expand Down Expand Up @@ -123,6 +124,7 @@ Directory containing all generated bundles.
-s, --default-sizes <type> Module sizes to show in treemap by default.
Possible values: stat, parsed, gzip (default: parsed)
-O, --no-open Don't open report in default browser automatically.
-T, --theme Theme for the open window, dark or light (default: light)
-e, --exclude <regexp> Assets that should be excluded from the report.
Can be specified multiple times.
-l, --log-level <level> Log level.
Expand Down
7 changes: 5 additions & 2 deletions src/BundleAnalyzerPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ class BundleAnalyzerPlugin {
// deprecated
startAnalyzer: true,
analyzerUrl: utils.defaultAnalyzerUrl,
theme: 'light',
...opts,
analyzerPort: 'analyzerPort' in opts ? (opts.analyzerPort === 'auto' ? 0 : opts.analyzerPort) : 8888
};
Expand Down Expand Up @@ -109,7 +110,8 @@ class BundleAnalyzerPlugin {
logger: this.logger,
defaultSizes: this.opts.defaultSizes,
excludeAssets: this.opts.excludeAssets,
analyzerUrl: this.opts.analyzerUrl
analyzerUrl: this.opts.analyzerUrl,
theme: this.opts.theme
});
}
}
Expand All @@ -131,7 +133,8 @@ class BundleAnalyzerPlugin {
bundleDir: this.getBundleDirFromCompiler(),
logger: this.logger,
defaultSizes: this.opts.defaultSizes,
excludeAssets: this.opts.excludeAssets
excludeAssets: this.opts.excludeAssets,
theme: this.opts.theme
});
}

Expand Down
15 changes: 12 additions & 3 deletions src/bin/analyzer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,12 @@ const program = commander
br(`Possible values: ${[...Logger.levels].join(', ')}`),
Logger.defaultLevel
)
.option(
'-T, --theme <theme>',
'Theme.' +
br('Possible values: dark, light'),
'light'
)
.parse(process.argv);

let [bundleStatsFile, bundleDir] = program.args;
Expand All @@ -86,7 +92,8 @@ let {
defaultSizes,
logLevel,
open: openBrowser,
exclude: excludeAssets
exclude: excludeAssets,
theme
} = program.opts();
const logger = new Logger(logLevel);

Expand Down Expand Up @@ -125,7 +132,8 @@ async function parseAndAnalyse(bundleStatsFile) {
bundleDir,
excludeAssets,
logger: new Logger(logLevel),
analyzerUrl: utils.defaultAnalyzerUrl
analyzerUrl: utils.defaultAnalyzerUrl,
theme
});
} else if (mode === 'static') {
viewer.generateReport(bundleStats, {
Expand All @@ -135,7 +143,8 @@ async function parseAndAnalyse(bundleStatsFile) {
defaultSizes,
bundleDir,
excludeAssets,
logger: new Logger(logLevel)
logger: new Logger(logLevel),
theme
});
} else if (mode === 'json') {
viewer.generateJSONReport(bundleStats, {
Expand Down
4 changes: 2 additions & 2 deletions src/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function getScript(filename, mode) {
}
}

function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSizes, mode} = {}) {
function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSizes, mode, theme} = {}) {
return html`<!DOCTYPE html>
<html>
<head>
Expand All @@ -54,7 +54,7 @@ function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSi
${getScript('viewer.js', mode)}
</head>

<body>
<body${theme === 'dark' && ' style="background: black"'}>
<div id="app"></div>
<script>
window.chartData = ${escapeJson(chartData)};
Expand Down
12 changes: 8 additions & 4 deletions src/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ async function startServer(bundleStats, opts) {
defaultSizes = 'parsed',
excludeAssets = null,
reportTitle,
analyzerUrl
analyzerUrl,
theme = 'light'
} = opts || {};

const analyzerOpts = {logger, excludeAssets};
Expand All @@ -63,7 +64,8 @@ async function startServer(bundleStats, opts) {
chartData,
entrypoints,
defaultSizes,
enableWebSocket: true
enableWebSocket: true,
theme
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
Expand Down Expand Up @@ -136,7 +138,8 @@ async function generateReport(bundleStats, opts) {
bundleDir = null,
logger = new Logger(),
defaultSizes = 'parsed',
excludeAssets = null
excludeAssets = null,
theme = 'light'
} = opts || {};

const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
Expand All @@ -150,7 +153,8 @@ async function generateReport(bundleStats, opts) {
chartData,
entrypoints,
defaultSizes,
enableWebSocket: false
enableWebSocket: false,
theme
});
const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);

Expand Down