@rsbuild/plugin-image-compress 1.0.0-alpha.9 → 1.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+Copyright (c) 2024 Rspack Contrib
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,78 @@
-<p align="center">
-  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+# @rsbuild/plugin-image-compress
+
+An Rsbuild plugin to compress images via [@napi-rs/image](https://www.npmjs.com/package/@napi-rs/image) and [SVGO](https://www.npmjs.com/package/svgo).
+
+With the image compression plugin, image assets used in the project can be compressed to reduce the output size without affecting the visual appearance of the image.
+
+<p>
+  <a href="https://npmjs.com/package/@rsbuild/plugin-image-compress">
+   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-image-compress?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
 </p>
 
-# Rsbuild
+## Usage
+
+Install:
+
+```bash
+npm add @rsbuild/plugin-image-compress -D
+```
+
+Add plugin to your `rsbuild.config.ts`:
+
+```ts
+// rsbuild.config.ts
+import { pluginImageCompress } from "@rsbuild/plugin-image-compress";
+
+export default {
+  plugins: [pluginImageCompress()],
+};
+```
+
+## Options
+
+The plugin accepts an array of compressor configuration options, each of which can be either a string or an object. The string can be the name of a built-in compressor and its default configuration enabled.
+Or use the object format configuration and specify the compressor in the `use` field. The remaining fields of the object will be used as compressor configuration options.
+
+By default, the plugin will enable `jpeg`, `png`, `ico` image compressors, which are equivalent to the following two examples:
+
+```js
+pluginImageCompress(["jpeg", "png", "ico"]);
+```
+
+```js
+pluginImageCompress([{ use: "jpeg" }, { use: "png" }, { use: "ico" }]);
+```
+
+The default configuration can be overridden by specifying a configuration option.
+For example, to allow the jpeg compressor to recognize new extension name and to set the quality of the png compressor.
+
+```js
+pluginImageCompress([
+  { use: "jpeg", test: /\.(?:jpg|jpeg|jpe)$/ },
+  { use: "png", minQuality: 50 },
+  "ico",
+]);
+```
+
+The default `png` compressor is lossy.
+If you want to replace it with a lossless compressor, you can use the following configuration.
 
-The Rspack-based build tool. It's fast, out-of-the-box and extensible.
+```js
+pluginImageCompress(["jpeg", "pngLossless", "ico"]);
+```
 
-## Documentation
+The list of configuration options will eventually be converted to the corresponding bundler loader configuration, so compressors follow the same bottom-to-top matching rule.
 
-https://rsbuild.dev/
+For example, the `png` compressor will take precedence over the `pngLossless` compressor for the following configuration:
 
-## Contributing
+```js
+pluginImageCompress(["jpeg", "pngLossless", "ico", "png"]);
+```
 
-Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+For more information on compressors, please visit [@napi-rs/image](https://image.napi.rs/docs).
 
 ## License
 
-Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
+[MIT](./LICENSE).

package/dist/index.cjs

@@ -5,7 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,10 +26,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // src/index.ts
 var src_exports = {};
@@ -40,7 +35,7 @@ __export(src_exports, {
   pluginImageCompress: () => pluginImageCompress
 });
 module.exports = __toCommonJS(src_exports);
-var import_node_assert2 = __toESM(require("assert"));
+var import_node_assert2 = __toESM(require("assert"), 1);
 
 // src/minimizer.ts
 var import_node_buffer2 = require("buffer");
@@ -48,7 +43,7 @@ var import_node_buffer2 = require("buffer");
 // src/shared/codecs.ts
 var import_node_buffer = require("buffer");
 var import_image = require("@napi-rs/image");
-var import_svgo = __toESM(require("svgo"));
+var import_svgo = __toESM(require("svgo"), 1);
 var jpegCodec = {
   handler(buf, options) {
     return (0, import_image.compressJpeg)(buf, options);
@@ -103,8 +98,7 @@ var codecs_default = codecs;
 var IMAGE_MINIMIZER_PLUGIN_NAME = "@rsbuild/plugin-image-compress/minimizer";
 var ImageMinimizerPlugin = class {
   constructor(options) {
-    __publicField(this, "name", IMAGE_MINIMIZER_PLUGIN_NAME);
-    __publicField(this, "options");
+    this.name = IMAGE_MINIMIZER_PLUGIN_NAME;
     this.options = options;
   }
   async optimize(compiler, compilation, assets) {
@@ -134,7 +128,11 @@ ${cause.message}` : cause.message;
       if (info?.minimized || !matchObject(opts, fileName)) {
         return;
       }
-      const { source: inputSource } = compilation.getAsset(name);
+      const asset = compilation.getAsset(name);
+      if (!asset) {
+        return;
+      }
+      const { source: inputSource } = asset;
       const eTag = cache.getLazyHashedEtag(inputSource);
       const cacheItem = cache.getItemCache(name, eTag);
       let result = await cacheItem.getPromise();
@@ -176,7 +174,7 @@ ${cause.message}` : cause.message;
 };
 
 // src/shared/utils.ts
-var import_node_assert = __toESM(require("assert"));
+var import_node_assert = __toESM(require("assert"), 1);
 var withDefaultOptions = (opt) => {
   const options = typeof opt === "string" ? { use: opt } : opt;
   const { defaultOptions } = codecs_default[options.use];

package/dist/index.d.cts

@@ -0,0 +1,38 @@
+import { RsbuildPlugin } from '@rsbuild/core';
+import { JpegCompressOptions, PngQuantOptions, PNGLosslessOptions } from '@napi-rs/image';
+import { Config } from 'svgo';
+
+type OneOrMany<T> = T | T[];
+interface CodecBaseOptions {
+    jpeg: JpegCompressOptions;
+    png: PngQuantOptions;
+    pngLossless: PNGLosslessOptions;
+    ico: Record<string, unknown>;
+    svg: Config;
+}
+interface BaseCompressOptions<T extends Codecs> {
+    use: T;
+    test?: OneOrMany<RegExp>;
+    include?: OneOrMany<RegExp>;
+    exclude?: OneOrMany<RegExp>;
+}
+type FinalOptionCollection = {
+    [K in Codecs]: BaseCompressOptions<K> & CodecBaseOptions[K];
+};
+type Codecs = keyof CodecBaseOptions;
+type OptionCollection = {
+    [K in Codecs]: K | FinalOptionCollection[K];
+};
+type Options = OptionCollection[Codecs];
+
+type PluginImageCompressOptions = Options[];
+declare const DEFAULT_OPTIONS: Codecs[];
+interface IPluginImageCompress {
+    (...options: Options[]): RsbuildPlugin;
+    (options: Options[]): RsbuildPlugin;
+}
+declare const PLUGIN_IMAGE_COMPRESS_NAME = "rsbuild:image-compress";
+/** Options enable by default: {@link DEFAULT_OPTIONS} */
+declare const pluginImageCompress: IPluginImageCompress;
+
+export { DEFAULT_OPTIONS, type IPluginImageCompress, PLUGIN_IMAGE_COMPRESS_NAME, type PluginImageCompressOptions, pluginImageCompress };

package/dist/index.d.ts

@@ -1,11 +1,38 @@
-import type { RsbuildPlugin } from '@rsbuild/core';
-import type { Codecs, Options } from './types';
-export type PluginImageCompressOptions = Options[];
-export declare const DEFAULT_OPTIONS: Codecs[];
-export interface IPluginImageCompress {
+import { RsbuildPlugin } from '@rsbuild/core';
+import { JpegCompressOptions, PngQuantOptions, PNGLosslessOptions } from '@napi-rs/image';
+import { Config } from 'svgo';
+
+type OneOrMany<T> = T | T[];
+interface CodecBaseOptions {
+    jpeg: JpegCompressOptions;
+    png: PngQuantOptions;
+    pngLossless: PNGLosslessOptions;
+    ico: Record<string, unknown>;
+    svg: Config;
+}
+interface BaseCompressOptions<T extends Codecs> {
+    use: T;
+    test?: OneOrMany<RegExp>;
+    include?: OneOrMany<RegExp>;
+    exclude?: OneOrMany<RegExp>;
+}
+type FinalOptionCollection = {
+    [K in Codecs]: BaseCompressOptions<K> & CodecBaseOptions[K];
+};
+type Codecs = keyof CodecBaseOptions;
+type OptionCollection = {
+    [K in Codecs]: K | FinalOptionCollection[K];
+};
+type Options = OptionCollection[Codecs];
+
+type PluginImageCompressOptions = Options[];
+declare const DEFAULT_OPTIONS: Codecs[];
+interface IPluginImageCompress {
     (...options: Options[]): RsbuildPlugin;
     (options: Options[]): RsbuildPlugin;
 }
-export declare const PLUGIN_IMAGE_COMPRESS_NAME = "rsbuild:image-compress";
+declare const PLUGIN_IMAGE_COMPRESS_NAME = "rsbuild:image-compress";
 /** Options enable by default: {@link DEFAULT_OPTIONS} */
-export declare const pluginImageCompress: IPluginImageCompress;
+declare const pluginImageCompress: IPluginImageCompress;
+
+export { DEFAULT_OPTIONS, type IPluginImageCompress, PLUGIN_IMAGE_COMPRESS_NAME, type PluginImageCompressOptions, pluginImageCompress };

package/dist/index.js

@@ -1,25 +1,11 @@
-import { createRequire } from 'module';
-var require = createRequire(import.meta['url']);
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.54.6_eslint@9.6.0_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js
-import { fileURLToPath } from "url";
-import path from "path";
-
 // src/index.ts
-import assert2 from "assert";
+import assert2 from "node:assert";
 
 // src/minimizer.ts
-import { Buffer as Buffer3 } from "buffer";
+import { Buffer as Buffer2 } from "node:buffer";
 
 // src/shared/codecs.ts
-import { Buffer as Buffer2 } from "buffer";
+import { Buffer } from "node:buffer";
 import {
   Transformer,
   compressJpeg,
@@ -62,7 +48,7 @@ var icoCodec = {
 var svgCodec = {
   async handler(buf, options) {
     const result = svgo.optimize(buf.toString(), options);
-    return Buffer2.from(result.data);
+    return Buffer.from(result.data);
   },
   defaultOptions: {
     test: /\.svg$/
@@ -81,8 +67,7 @@ var codecs_default = codecs;
 var IMAGE_MINIMIZER_PLUGIN_NAME = "@rsbuild/plugin-image-compress/minimizer";
 var ImageMinimizerPlugin = class {
   constructor(options) {
-    __publicField(this, "name", IMAGE_MINIMIZER_PLUGIN_NAME);
-    __publicField(this, "options");
+    this.name = IMAGE_MINIMIZER_PLUGIN_NAME;
     this.options = options;
   }
   async optimize(compiler, compilation, assets) {
@@ -112,14 +97,18 @@ ${cause.message}` : cause.message;
       if (info?.minimized || !matchObject(opts, fileName)) {
         return;
       }
-      const { source: inputSource } = compilation.getAsset(name);
+      const asset = compilation.getAsset(name);
+      if (!asset) {
+        return;
+      }
+      const { source: inputSource } = asset;
       const eTag = cache.getLazyHashedEtag(inputSource);
       const cacheItem = cache.getItemCache(name, eTag);
       let result = await cacheItem.getPromise();
       try {
         if (!result) {
           const input = inputSource.source();
-          const buf = await codec.handler(Buffer3.from(input), opts);
+          const buf = await codec.handler(Buffer2.from(input), opts);
           result = { source: new RawSource(buf) };
           await cacheItem.storePromise(result);
         }
@@ -154,7 +143,7 @@ ${cause.message}` : cause.message;
 };
 
 // src/shared/utils.ts
-import assert from "assert";
+import assert from "node:assert";
 var withDefaultOptions = (opt) => {
   const options = typeof opt === "string" ? { use: opt } : opt;
   const { defaultOptions } = codecs_default[options.use];

package/package.json

@@ -1,13 +1,7 @@
 {
   "name": "@rsbuild/plugin-image-compress",
-  "version": "1.0.0-alpha.9",
-  "description": "Image compress plugin for Rsbuild",
-  "homepage": "https://rsbuild.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/web-infra-dev/rsbuild",
-    "directory": "packages/plugin-image-compress"
-  },
+  "version": "1.0.1",
+  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-image-compress",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -17,30 +11,52 @@
       "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --no-errors-on-unmatched"
+    ]
+  },
   "dependencies": {
     "@napi-rs/image": "^1.9.2",
     "svgo": "^3.3.2"
   },
   "devDependencies": {
-    "@types/node": "18.x",
-    "typescript": "^5.5.2",
-    "@rsbuild/core": "1.0.0-alpha.9"
+    "@biomejs/biome": "^1.8.3",
+    "@playwright/test": "^1.44.1",
+    "@rsbuild/core": "1.0.0-alpha.9",
+    "@types/node": "^20.14.1",
+    "nano-staged": "^0.8.0",
+    "playwright": "^1.44.1",
+    "simple-git-hooks": "^2.11.1",
+    "tsup": "^8.0.2",
+    "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^1.0.0-alpha.9"
+    "@rsbuild/core": "1.x"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public",
-    "provenance": true,
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "modern build",
-    "dev": "modern build --watch"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check .",
+    "lint:write": "biome check . --write",
+    "test": "playwright test"
   }
 }

package/dist/minimizer.d.ts

@@ -1,13 +0,0 @@
-import type { Rspack } from '@rsbuild/core';
-import type { FinalOptions } from './types';
-export declare const IMAGE_MINIMIZER_PLUGIN_NAME: "@rsbuild/plugin-image-compress/minimizer";
-export interface MinimizedResult {
-    source: Rspack.sources.RawSource;
-}
-export declare class ImageMinimizerPlugin {
-    name: string;
-    options: FinalOptions;
-    constructor(options: FinalOptions);
-    optimize(compiler: Rspack.Compiler, compilation: Rspack.Compilation, assets: Record<string, Rspack.sources.Source>): Promise<void>;
-    apply(compiler: Rspack.Compiler): void;
-}

package/dist/shared/codecs.d.ts

@@ -1,8 +0,0 @@
-import type { Codec, Codecs } from '../types';
-export declare const jpegCodec: Codec<'jpeg'>;
-export declare const pngCodec: Codec<'png'>;
-export declare const pngLosslessCodec: Codec<'pngLossless'>;
-export declare const icoCodec: Codec<'ico'>;
-export declare const svgCodec: Codec<'svg'>;
-declare const codecs: Record<Codecs, Codec<any>>;
-export default codecs;

package/dist/shared/utils.d.ts

@@ -1,2 +0,0 @@
-import type { FinalOptions, Options } from '../types';
-export declare const withDefaultOptions: (opt: Options) => FinalOptions;

package/dist/types/index.d.ts

@@ -1,33 +0,0 @@
-import type { Buffer } from 'node:buffer';
-import type { JpegCompressOptions, PNGLosslessOptions, PngQuantOptions } from '@napi-rs/image';
-import type { Config as SvgoConfig } from 'svgo';
-export type OneOrMany<T> = T | T[];
-export interface WebpTransformOptions {
-    quality?: number;
-}
-export interface CodecBaseOptions {
-    jpeg: JpegCompressOptions;
-    png: PngQuantOptions;
-    pngLossless: PNGLosslessOptions;
-    ico: Record<string, unknown>;
-    svg: SvgoConfig;
-}
-export interface BaseCompressOptions<T extends Codecs> {
-    use: T;
-    test?: OneOrMany<RegExp>;
-    include?: OneOrMany<RegExp>;
-    exclude?: OneOrMany<RegExp>;
-}
-export type FinalOptionCollection = {
-    [K in Codecs]: BaseCompressOptions<K> & CodecBaseOptions[K];
-};
-export type FinalOptions = FinalOptionCollection[Codecs];
-export interface Codec<T extends Codecs> {
-    handler: (buf: Buffer, options: CodecBaseOptions[T]) => Promise<Buffer>;
-    defaultOptions: Omit<FinalOptionCollection[T], 'use'>;
-}
-export type Codecs = keyof CodecBaseOptions;
-export type OptionCollection = {
-    [K in Codecs]: K | FinalOptionCollection[K];
-};
-export type Options = OptionCollection[Codecs];