@d-zero/archaeologist 1.0.2 → 1.1.0

package/README.md

@@ -12,11 +12,19 @@
 ## CLI
 
 ```sh
-npx @d-zero/archaeologist -f <filepath>
+npx @d-zero/archaeologist -f <filepath> [--limit <number>] [--debug]
 ```
 
 URLリストを持つファイルを指定して実行します。
 
+### オプション
+
+- `-f, --file <filepath>`: URLリストを持つファイルのパス（必須）
+- `--limit <number>`: 並列実行数の上限（デフォルト: 10）
+- `--debug`: デバッグモード（デフォルト: false）
+
+### ファイルフォーマット
+
 ファイルの先頭には比較対象のホストを指定します。[Frontmatter](https://jekyllrb.com/docs/front-matter/)形式で`comparisonHost`に指定します。
 
 ```txt

package/dist/analyze.d.ts

@@ -1,3 +1,9 @@
 import type { Result, URLPair } from './types.js';
 import type { PageHook } from '@d-zero/puppeteer-screenshot';
-export declare function analyze(list: readonly URLPair[], hooks: readonly PageHook[]): Promise<Result[]>;
+export interface AnalyzeOptions {
+    readonly hooks: readonly PageHook[];
+    readonly htmlDiffOnly?: boolean;
+    readonly limit?: number;
+    readonly debug?: boolean;
+}
+export declare function analyze(list: readonly URLPair[], options?: AnalyzeOptions): Promise<Result[]>;

package/dist/analyze.js

@@ -8,7 +8,7 @@ import { diffImages } from './diff-images.js';
 import { diffTree } from './diff-tree.js';
 import { getData } from './get-data.js';
 import { label, score } from './output-utils.js';
-export async function analyze(list, hooks) {
+export async function analyze(list, options) {
     const urlInfo = analyzeUrlList(list);
     const useOldMode = urlInfo.hasAuth && urlInfo.hasNoSSL;
     const browser = await puppeteer.launch({
@@ -35,7 +35,9 @@ export async function analyze(list, hooks) {
         return async () => {
             const dataPair = [];
             for (const url of urlPair) {
-                const data = await getData(page, url, hooks, (phase, data) => {
+                const data = await getData(page, url, {
+                    ...options,
+                }, (phase, data) => {
                     const outputUrl = c.gray(url);
                     const sizeName = label(data.name);
                     switch (phase) {
@@ -102,33 +104,41 @@ export async function analyze(list, hooks) {
                         }
                     }
                 });
-                update(`%braille% ${outputUrl} ${sizeName}: 🧩 Matches ${score(imageDiff.matches, 0.9)}`);
-                await delay(1500);
-                await writeFile(path.resolve(dir, `${id}_a.png`), imageDiff.images.a);
-                await writeFile(path.resolve(dir, `${id}_b.png`), imageDiff.images.b);
-                const outFilePath = path.resolve(dir, `${id}_diff.png`);
-                update(`%braille% ${outputUrl} ${sizeName}: 📊 Save diff image to ${path.relative(dir, outFilePath)}`);
-                await writeFile(outFilePath, imageDiff.images.diff);
+                let image = null;
+                if (imageDiff) {
+                    update(`%braille% ${outputUrl} ${sizeName}: 🧩 Matches ${score(imageDiff.matches, 0.9)}`);
+                    await delay(1500);
+                    await writeFile(path.resolve(dir, `${id}_a.png`), imageDiff.images.a);
+                    await writeFile(path.resolve(dir, `${id}_b.png`), imageDiff.images.b);
+                    const outFilePath = path.resolve(dir, `${id}_diff.png`);
+                    update(`%braille% ${outputUrl} ${sizeName}: 📊 Save diff image to ${path.relative(dir, outFilePath)}`);
+                    await writeFile(outFilePath, imageDiff.images.diff);
+                    image = {
+                        matches: imageDiff.matches,
+                        file: outFilePath,
+                    };
+                }
+                const htmlDiff = diffTree(a.url, b.url, screenshotA.domTree, screenshotB.domTree);
+                const outFilePath = path.resolve(dir, `${id}_html.diff`);
+                await writeFile(outFilePath, htmlDiff.result, { encoding: 'utf8' });
                 screenshotResult[name] = {
-                    matches: imageDiff.matches,
-                    file: outFilePath,
+                    image,
+                    dom: {
+                        matches: htmlDiff.matches,
+                        diff: htmlDiff.changed ? htmlDiff.result : null,
+                        file: outFilePath,
+                    },
                 };
             }
-            const htmlDiff = diffTree(a.serializedHtml, b.serializedHtml);
-            const outFilePath = path.resolve(dir, `${index}_html.diff`);
-            await writeFile(outFilePath, htmlDiff.result, { encoding: 'utf8' });
             const result = {
                 target: [a.url, b.url],
                 screenshots: screenshotResult,
-                html: {
-                    matches: htmlDiff.matches,
-                    diff: htmlDiff.changed ? htmlDiff.result : null,
-                    file: outFilePath,
-                },
             };
             results.push(result);
         };
     }, {
+        limit: options?.limit,
+        debug: options?.debug,
         header(_, done, total) {
             return `${c.bold.magenta('🕵️  Archaeologist')} ${done}/${total}`;
         },

package/dist/archaeologist.d.ts

@@ -1,3 +1,5 @@
+import type { AnalyzeOptions } from './analyze.js';
 import type { URLPair } from './types.js';
-import type { PageHook } from '@d-zero/puppeteer-screenshot';
-export declare function archaeologist(list: readonly URLPair[], pageHooks?: readonly PageHook[]): Promise<void>;
+export interface ArchaeologistOptions extends AnalyzeOptions {
+}
+export declare function archaeologist(list: readonly URLPair[], options?: ArchaeologistOptions): Promise<void>;

package/dist/archaeologist.js

@@ -1,15 +1,18 @@
 import c from 'ansi-colors';
 import { analyze } from './analyze.js';
 import { label, score } from './output-utils.js';
-export async function archaeologist(list, pageHooks) {
-    const results = await analyze(list, pageHooks ?? []);
+export async function archaeologist(list, options) {
+    const results = await analyze(list, options);
     const output = [];
     for (const result of results) {
         output.push(c.gray(`${result.target.join(' vs ')}`));
-        for (const [sizeName, { matches, file }] of Object.entries(result.screenshots)) {
-            output.push(`  ${label(sizeName)} ${score(matches, 0.9)} ${file}`);
+        for (const [sizeName, { image, dom }] of Object.entries(result.screenshots)) {
+            if (image) {
+                const { matches, file } = image;
+                output.push(`  ${label(sizeName)} ${score(matches, 0.9)} ${file}`);
+            }
+            output.push(`  ${label('HTML', c.bgBlueBright)}: ${score(dom.matches, 0.995)} ${dom.file}`);
         }
-        output.push(`  ${label('HTML', c.bgBlueBright)}: ${score(result.html.matches, 0.995)} ${result.html.file}`);
     }
     process.stdout.write(output.join('\n') + '\n');
 }

package/dist/cli.js

@@ -8,9 +8,14 @@ const cli = minimist(process.argv.slice(2), {
     },
 });
 if (cli.listfile) {
-    const { pairList, pageHooks } = await readConfig(cli.listfile);
-    await archaeologist(pairList, pageHooks);
+    const { pairList, hooks } = await readConfig(cli.listfile);
+    await archaeologist(pairList, {
+        hooks,
+        limit: cli.limit ? Number.parseInt(cli.limit) : undefined,
+        debug: !!cli.debug,
+        htmlDiffOnly: !!cli.htmlDiffOnly,
+    });
     process.exit(0);
 }
-process.stdout.write('Usage: archaeologist -f <listfile>\n');
+process.stdout.write('Usage: archaeologist -f <listfile> [--limit <number>]');
 process.exit(1);

package/dist/diff-images.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" resolution-mode="require"/>
 import type { Screenshot } from '@d-zero/puppeteer-screenshot';
 export type DiffImagesPhase = {
     create: {
@@ -24,5 +23,5 @@ export declare function diffImages(dataA: Screenshot, dataB: Screenshot, listene
         b: Buffer;
         diff: Buffer;
     };
-}>;
+} | null>;
 export {};

package/dist/diff-images.js

@@ -2,6 +2,9 @@ import Jimp from 'jimp';
 import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
 export async function diffImages(dataA, dataB, listener) {
+    if (!dataA.binary || !dataB.binary) {
+        return null;
+    }
     listener('create', { a: dataA.binary, b: dataB.binary });
     const imgA = PNG.sync.read(dataA.binary);
     const imgB = PNG.sync.read(dataB.binary);

package/dist/diff-tree.d.ts

@@ -1,7 +1,6 @@
-export declare function diffTree(dataA: string, dataB: string): {
+export declare function diffTree(urlA: string, urlB: string, dataA: string, dataB: string): {
     changed: boolean;
     maxLine: number;
-    changedLines: number;
     matches: number;
     result: string;
 };

package/dist/diff-tree.js

@@ -1,32 +1,18 @@
-import { diffLines } from 'diff';
-export function diffTree(dataA, dataB) {
-    const changes = diffLines(dataA, dataB);
+import { createTwoFilesPatch } from 'diff';
+import parse from 'parse-diff';
+export function diffTree(urlA, urlB, dataA, dataB) {
+    const result = createTwoFilesPatch(urlA, urlB, dataA, dataB);
+    const info = parse(result)[0];
+    if (!info) {
+        throw new Error('Failed to parse diff');
+    }
     const lineA = dataA.split('\n').length;
     const lineB = dataB.split('\n').length;
     const maxLine = Math.max(lineA, lineB);
-    let changedLines = 0;
-    const result = changes
-        .map((change) => {
-        if (change.added) {
-            changedLines++;
-            return `+${change.value}`;
-        }
-        if (change.removed) {
-            changedLines++;
-            return `-${change.value}`;
-        }
-        return change.value
-            .split('\n')
-            .map((line) => (line.trim() ? ` ${line}` : line))
-            .join('\n');
-    })
-        .filter(Boolean)
-        .join('');
     return {
-        changed: changedLines > 0,
+        changed: dataA !== dataB,
         maxLine,
-        changedLines,
-        matches: 1 - changedLines / maxLine,
+        matches: 1 - Math.abs((info.additions - info.deletions) / maxLine),
         result,
     };
 }

package/dist/get-data.d.ts

@@ -1,4 +1,8 @@
 import type { PageData } from './types.js';
 import type { Listener, PageHook } from '@d-zero/puppeteer-screenshot';
 import type { Page } from 'puppeteer';
-export declare function getData(page: Page, url: string, hooks: readonly PageHook[], listener: Listener): Promise<PageData>;
+export interface GetDataOptions {
+    readonly hooks?: readonly PageHook[];
+    readonly htmlDiffOnly?: boolean;
+}
+export declare function getData(page: Page, url: string, options: GetDataOptions, listener: Listener): Promise<PageData>;

package/dist/get-data.js

@@ -1,6 +1,7 @@
 import { distill } from '@d-zero/html-distiller';
 import { screenshot } from '@d-zero/puppeteer-screenshot';
-export async function getData(page, url, hooks, listener) {
+export async function getData(page, url, options, listener) {
+    const htmlDiffOnly = options.htmlDiffOnly ?? false;
     const screenshots = await screenshot(page, url, {
         sizes: {
             desktop: {
@@ -11,15 +12,16 @@ export async function getData(page, url, hooks, listener) {
                 resolution: 2,
             },
         },
-        hooks,
+        hooks: options?.hooks ?? [],
         listener,
+        domOnly: htmlDiffOnly,
     });
-    const html = await page.content();
-    const serializedHtmlTree = distill(html).tree;
-    const serializedHtml = JSON.stringify(serializedHtmlTree, null, 2);
-    return {
-        url,
-        serializedHtml,
-        screenshots,
-    };
+    const data = { url, screenshots: {} };
+    for (const [sizeName, screenshot] of Object.entries(screenshots)) {
+        data.screenshots[sizeName] = {
+            ...screenshot,
+            domTree: JSON.stringify(distill(screenshot.dom).tree, null, 2),
+        };
+    }
+    return data;
 }

package/dist/read-config.d.ts

@@ -1,4 +1,4 @@
 export declare function readConfig(filePath: string): Promise<{
     pairList: [string, string][];
-    pageHooks: import("@d-zero/puppeteer-screenshot").PageHook[];
+    hooks: import("@d-zero/puppeteer-screenshot").PageHook[];
 }>;

package/dist/read-config.js

@@ -15,9 +15,9 @@ export async function readConfig(filePath) {
             `${content.attributes.comparisonHost}${url.pathname}${url.search}`,
         ];
     });
-    const pageHooks = await readHooks(content.attributes?.hooks ?? [], filePath);
+    const hooks = await readHooks(content.attributes?.hooks ?? [], filePath);
     return {
         pairList,
-        pageHooks,
+        hooks,
     };
 }

package/dist/types.d.ts

@@ -2,19 +2,25 @@ export type { PageHook } from '@d-zero/puppeteer-screenshot';
 import type { Screenshot } from '@d-zero/puppeteer-screenshot';
 export type PageData = {
     url: string;
-    serializedHtml: string;
-    screenshots: Record<string, Screenshot>;
+    screenshots: Record<string, Screenshot & {
+        domTree: string;
+    }>;
 };
 export type URLPair = readonly [urlA: string, urlB: string];
 export type Result = {
     target: [urlA: string, urlB: string];
-    screenshots: Record<string, {
-        matches: number;
-        file: string;
-    }>;
-    html: {
-        matches: number;
-        diff: string | null;
-        file: string;
-    };
+    screenshots: Record<string, MediaResult>;
+};
+export type MediaResult = {
+    image: ImageResult | null;
+    dom: DOMResult;
+};
+export type ImageResult = {
+    matches: number;
+    file: string;
+};
+export type DOMResult = {
+    matches: number;
+    diff: string | null;
+    file: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/archaeologist",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"description": "Uncover visual and HTML differences in web pages with precision",
 	"author": "D-ZERO",
 	"license": "MIT",
@@ -26,24 +26,25 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
-		"@d-zero/dealer": "1.0.1",
+		"@d-zero/dealer": "1.0.2",
 		"@d-zero/html-distiller": "1.0.0",
-		"@d-zero/puppeteer-screenshot": "1.0.2",
-		"@d-zero/readtext": "1.0.1",
+		"@d-zero/puppeteer-screenshot": "1.1.0",
+		"@d-zero/readtext": "1.0.3",
 		"ansi-colors": "4.1.3",
 		"diff": "5.2.0",
 		"front-matter": "4.0.2",
 		"jimp": "0.22.12",
 		"minimist": "1.2.8",
+		"parse-diff": "0.11.1",
 		"pixelmatch": "5.3.0",
 		"pngjs": "7.0.0",
-		"puppeteer": "22.9.0"
+		"puppeteer": "22.12.0"
 	},
 	"devDependencies": {
 		"@types/diff": "5.2.1",
 		"@types/pixelmatch": "5.2.6",
 		"@types/pngjs": "6.0.5",
-		"puppeteer": "22.9.0"
+		"puppeteer": "22.12.0"
 	},
-	"gitHead": "acfefd8b20364c2aec1998517fc0b190fdc3b404"
+	"gitHead": "9b4c167933f33237bb688e4835f17b499dc4c48d"
 }