@d-zero/archaeologist 3.3.2 → 3.4.0

package/README.md

@@ -26,6 +26,7 @@ URLリストを持つファイルを指定して実行します。
 - `-i, --ignore <selector>`: 無視するCSSセレクター
 - `-d, --devices <devices>`: デバイスプリセット（カンマ区切り、デフォルト: desktop-compact,mobile）
 - `--freeze <filepath>`: フリーズモード用ファイルパス
+- `--combined`: 環境AとBのスクリーンショットを左右に並べた合成画像を出力
 - `--limit <number>`: 並列実行数の上限（デフォルト: 10）
 - `--debug`: デバッグモード（デフォルト: false）
 - `--verbose`: 詳細ログモード（デフォルト: false）
@@ -49,6 +50,9 @@ npx @d-zero/archaeologist -f urls.txt
 # カスタムデバイス指定
 npx @d-zero/archaeologist -f urls.txt --devices desktop,tablet,mobile
 
+# 合成画像を出力（2つの環境のスクリーンショットを左右に並べて表示）
+npx @d-zero/archaeologist -f urls.txt --combined
+
 # フリーズモード（参照用スクリーンショット作成）
 npx @d-zero/archaeologist --freeze urls.txt
 ```

package/dist/analyze-child-process.d.ts

@@ -9,4 +9,5 @@ export type ChildProcessParams = {
     ignore?: string;
     devices?: readonly string[];
     hooks?: readonly PageHook[];
+    combined?: boolean;
 };

package/dist/analyze-child-process.js

@@ -3,6 +3,7 @@ import path from 'node:path';
 import { createChildProcess } from '@d-zero/puppeteer-dealer';
 import { delay } from '@d-zero/shared/delay';
 import c from 'ansi-colors';
+import { combineImages } from './modules/combine-images.js';
 import { diffImages } from './modules/diff-images.js';
 import { diffText } from './modules/diff-text.js';
 import { diffTree } from './modules/diff-tree.js';
@@ -10,7 +11,7 @@ import { getData } from './modules/get-data.js';
 import { normalizeTextDocument } from './modules/normalize-text-document.js';
 import { score } from './utils.js';
 createChildProcess((param) => {
-    const { list, dir, types = ['image', 'dom', 'text'], selector, ignore, devices, } = param;
+    const { list, dir, types = ['image', 'dom', 'text'], selector, ignore, devices, combined = false, } = param;
     return {
         async eachPage({ page, url: urlA, index }, logger) {
             const urlPair = list.find(([url]) => url === urlA);
@@ -68,6 +69,13 @@ createChildProcess((param) => {
                         const outFilePath = path.resolve(dir, `${id}_diff.png`);
                         logger(`${sizeName} ${outputUrl} 📊 Save diff image to ${path.relative(dir, outFilePath)}`);
                         await writeFile(outFilePath, imageDiff.images.diff);
+                        // 合成画像を出力
+                        if (combined) {
+                            const combinedImage = await combineImages(imageDiff.images.a, imageDiff.images.b);
+                            const combinedFilePath = path.resolve(dir, `${id}_combined.png`);
+                            logger(`${sizeName} ${outputUrl} 🖼️ Save combined image to ${path.relative(dir, combinedFilePath)}`);
+                            await writeFile(combinedFilePath, combinedImage);
+                        }
                         image = {
                             matches: imageDiff.matches,
                             file: outFilePath,

package/dist/analyze-main-process.js

@@ -28,6 +28,7 @@ export async function analyze(list, options) {
             ignore: options?.ignore,
             devices: options?.devices,
             hooks: options?.hooks ?? [],
+            combined: options?.combined,
         }, {
             ...options,
             headless: useOldMode ? 'shell' : true,

package/dist/cli.js

@@ -21,6 +21,7 @@ const { options, hasConfigFile } = createCLI({
         '\t-s, --selector <selector> CSS selector for specific elements',
         '\t-i, --ignore <ignore>     CSS selector for elements to ignore',
         '\t--freeze <file>           Freeze mode: capture reference screenshots',
+        '\t--combined                Output side-by-side combined images (environment A and B)',
         '\t--limit <number>          Limit concurrent processes',
         '\t--interval <ms>           Interval between parallel executions (default: none)',
         '\t                          Format: number or "min-max" for random range',
@@ -33,6 +34,7 @@ const { options, hasConfigFile } = createCLI({
         'Examples:',
         '\tarchaeologist -f urls.txt',
         '\tarchaeologist -f urls.txt --devices desktop,mobile',
+        '\tarchaeologist -f urls.txt --combined',
         '\tarchaeologist --freeze urls.txt',
     ],
     parseArgs: (cli) => ({
@@ -45,6 +47,7 @@ const { options, hasConfigFile } = createCLI({
         devices: cli.devices ??
             // Alias for devices
             cli.device,
+        combined: cli.combined,
     }),
     validateArgs: (options) => {
         return !!(options.listfile?.length || options.freeze?.length);
@@ -58,6 +61,7 @@ if (hasConfigFile) {
         selector: options.selector,
         ignore: options.ignore,
         devices: options.devices ? parseList(options.devices) : undefined,
+        combined: options.combined,
         limit: options.limit,
         debug: options.debug,
         verbose: options.verbose,

package/dist/modules/combine-images.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 2枚の画像を左右に並べて合成する
+ * @param imageA 環境Aの画像バッファ
+ * @param imageB 環境Bの画像バッファ
+ * @returns 合成された画像のバッファ
+ */
+export declare function combineImages(imageA: Buffer, imageB: Buffer): Promise<Buffer>;

package/dist/modules/combine-images.js

@@ -0,0 +1,26 @@
+import { Jimp, JimpMime } from 'jimp';
+/**
+ * 2枚の画像を左右に並べて合成する
+ * @param imageA 環境Aの画像バッファ
+ * @param imageB 環境Bの画像バッファ
+ * @returns 合成された画像のバッファ
+ */
+export async function combineImages(imageA, imageB) {
+    const imgA = await Jimp.read(imageA);
+    const imgB = await Jimp.read(imageB);
+    const padding = 20;
+    const widthA = imgA.width;
+    const heightA = imgA.height;
+    const widthB = imgB.width;
+    const heightB = imgB.height;
+    const combinedWidth = padding + widthA + padding + widthB + padding;
+    const combinedHeight = padding + Math.max(heightA, heightB) + padding;
+    const combined = new Jimp({
+        width: combinedWidth,
+        height: combinedHeight,
+        color: 0xff_ff_ff_ff,
+    });
+    combined.composite(imgA, padding, padding);
+    combined.composite(imgB, padding + widthA + padding, padding);
+    return combined.getBuffer(JimpMime.png);
+}

package/dist/types.d.ts

@@ -37,6 +37,7 @@ export interface AnalyzeOptions extends GeneralOptions {
     readonly selector?: string;
     readonly ignore?: string;
     readonly devices?: readonly string[];
+    readonly combined?: boolean;
 }
 export interface FreezeOptions extends GeneralOptions {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/archaeologist",
-	"version": "3.3.2",
+	"version": "3.4.0",
 	"description": "Uncover visual and HTML differences in web pages with precision",
 	"author": "D-ZERO",
 	"license": "MIT",
@@ -24,14 +24,14 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
-		"@d-zero/cli-core": "1.2.2",
+		"@d-zero/cli-core": "1.2.3",
 		"@d-zero/fs": "0.2.2",
 		"@d-zero/html-distiller": "2.0.1",
-		"@d-zero/puppeteer-dealer": "0.5.12",
-		"@d-zero/puppeteer-page-scan": "4.2.8",
-		"@d-zero/puppeteer-screenshot": "3.2.8",
-		"@d-zero/readtext": "1.1.12",
-		"@d-zero/shared": "0.15.0",
+		"@d-zero/puppeteer-dealer": "0.6.1",
+		"@d-zero/puppeteer-page-scan": "4.3.1",
+		"@d-zero/puppeteer-screenshot": "3.2.10",
+		"@d-zero/readtext": "1.1.13",
+		"@d-zero/shared": "0.15.1",
 		"ansi-colors": "4.1.3",
 		"diff": "8.0.2",
 		"front-matter": "4.0.2",
@@ -41,7 +41,7 @@
 		"parse-diff": "0.11.1",
 		"pixelmatch": "7.1.0",
 		"pngjs": "7.0.0",
-		"puppeteer": "24.27.0",
+		"puppeteer": "24.31.0",
 		"strip-ansi": "7.1.2"
 	},
 	"devDependencies": {
@@ -49,5 +49,5 @@
 		"@types/pixelmatch": "5.2.6",
 		"@types/pngjs": "6.0.5"
 	},
-	"gitHead": "858864f8e57494a5a872431e1d772e18e4cc843a"
+	"gitHead": "9ed6da4277cf2f9d771df2a07e146fce6c7d4f3f"
 }