Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions examples/bundlesize/bundlesize.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @ts-check
/** @type {import('@node-cli/bundlesize').BundlesizeConfig} */
export default {
$schema:
"https://cdn.jsdelivr.net/npm/@node-cli/bundlesize/schemas/bundlesize.config.schema.json",
report: {
// header: "## My custom header",
// footer: (limitReached, diff) =>
Expand Down
38 changes: 25 additions & 13 deletions packages/bundlesize/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,16 @@

A configuration file must be provided via the `-c` parameter.

### JSON Schema Support
### Type-Safe Configuration

For IDE autocompletion and validation, you can add a `$schema` property to your configuration file:
For IDE autocompletion and validation, you can use either JSDoc type hints or the `defineConfig` helper function.

#### Using JSDoc (recommended for JavaScript configs)

```js
// @ts-check
/** @type {import('@node-cli/bundlesize').BundlesizeConfig} */
export default {
$schema:
"https://cdn.jsdelivr.net/npm/@node-cli/bundlesize/schemas/bundlesize.config.schema.json",
sizes: [
{
path: "dist/bundle.js",
Expand All @@ -31,19 +33,29 @@ export default {
};
```

This provides:
#### Using defineConfig helper

- Autocompletion for configuration options
- Inline documentation for each property
- Validation of configuration values

**Note**: For a specific version of the schema, use:
```js
// @ts-check
import { defineConfig } from "@node-cli/bundlesize";

```
https://cdn.jsdelivr.net/npm/@node-cli/bundlesize@VERSION/schemas/bundlesize.config.schema.json
export default defineConfig({
sizes: [
{
path: "dist/bundle.js",
limit: "10 kB"
}
]
});
```

### Configuration Options
Both approaches provide:

- Autocompletion for configuration options
- Inline documentation for each property
- Type validation in your IDE

**Note**: The `// @ts-check` comment enables TypeScript checking for the file, which is required for validation errors to appear.

### Configuration Options

Expand Down
4 changes: 2 additions & 2 deletions packages/bundlesize/bundlesize.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @ts-check
/** @type {import('./src/config.ts').BundlesizeConfig} */
export default {
$schema:
"https://cdn.jsdelivr.net/npm/@node-cli/bundlesize/schemas/bundlesize.config.schema.json",
sizes: [
{
path: "dist/bundlesize.js",
Expand Down
8 changes: 6 additions & 2 deletions packages/bundlesize/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@
"description": "Simple CLI tool that checks file(s) size and report if limits have been reached",
"type": "module",
"types": "./dist/index.d.ts",
"exports": "./dist/bundlesize.js",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/config.js"
}
},
"bin": "dist/bundlesize.js",
"files": [
"dist",
"schemas",
"README.md"
],
"node": ">=18",
Expand Down
151 changes: 0 additions & 151 deletions packages/bundlesize/schemas/bundlesize.config.schema.json

This file was deleted.

111 changes: 111 additions & 0 deletions packages/bundlesize/src/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import type { FooterProperties } from "./utilities.js";

/**
* Configuration for a single file size entry.
*/
export interface SizeEntry {
/**
* Path to the file to check. Supports glob patterns.
* Special placeholders:
* - `<hash>`: matches content hashes (e.g., `bundle-<hash>.js`)
* - `<semver>`: matches semantic versions (e.g., `lib-<semver>.js`)
*/
path: string;
/**
* Maximum allowed size for the file (gzipped).
* Format: number followed by unit (B, kB, KB, MB, GB, TB, PB)
* @example "10 kB", "1.5 MB", "500 B"
*/
limit: string;
/**
* Optional alias for the file in reports.
* Useful for giving meaningful names to files with hash patterns.
*/
alias?: string;
}

/**
* Configuration for a header entry (group separator in reports).
*/
export interface HeaderEntry {
/**
* Header text to display as a group separator in reports.
*/
header: string;
}

/**
* Column definition for the report table.
*/
export interface ColumnDefinition {
[key: string]: string;
}

/**
* Configuration for generating comparison reports.
*/
export interface ReportConfiguration {
/**
* Path to the current stats JSON file (relative to config file).
*/
current: string;
/**
* Path to the previous stats JSON file for comparison (relative to config file).
*/
previous: string;
/**
* Custom header text for the report.
* @default "## Bundle Size"
*/
header?: string;
/**
* Custom footer function for the report.
* Receives an object with limitReached, overallDiff, and totalGzipSize.
*/
footer?: (args: FooterProperties) => string;
/**
* Column definitions for the report table.
* @default [{ status: "Status" }, { file: "File" }, { size: "Size (Gzip)" }, { limits: "Limits" }]
*/
columns?: ColumnDefinition[];
/**
* Minimum gzip size change in bytes to consider as a change.
* Changes below this threshold are treated as no change.
* @default 0
*/
threshold?: number;
}

/**
* Bundlesize configuration object.
*/
export interface BundlesizeConfig {
/**
* Array of file size entries to check.
* Each entry can be either a SizeEntry (file to check) or HeaderEntry (group separator).
*/
sizes?: (SizeEntry | HeaderEntry)[];
/**
* Configuration for generating comparison reports.
*/
report?: ReportConfiguration;
}

/**
* Helper function to define bundlesize configuration with full type support.
* Provides IntelliSense and type checking for configuration files.
*
* @example
* ```js
* import { defineConfig } from "@node-cli/bundlesize";
*
* export default defineConfig({
* sizes: [
* { path: "dist/bundle.js", limit: "10 kB" }
* ]
* });
* ```
*/
export function defineConfig(config: BundlesizeConfig): BundlesizeConfig {
return config;
}