@d-zero/archaeologist 1.0.0-alpha.3 → 1.0.1

package/README.md

@@ -31,4 +31,65 @@ https://example.com/c
 https://example.com/xyz/001
 ```
 
+上記のサンプルファイルの場合、以下のURLが比較されます。
+
+| 比較元                        | 比較対象                            |
+| ----------------------------- | ----------------------------------- |
+| `https://example.com`         | `https://stage.example.com`         |
+| `https://example.com/a`       | `https://stage.example.com/a`       |
+| `https://example.com/b`       | `https://stage.example.com/b`       |
+| `https://example.com/c`       | `https://stage.example.com/c`       |
+| `https://example.com/xyz/001` | `https://stage.example.com/xyz/001` |
+
 実行した結果は`.archaeologist`ディレクトリに保存されます。
+
+## ページフック
+
+[Frontmatter](https://jekyllrb.com/docs/front-matter/)の`hooks`に配列としてスクリプトファイルのパスを渡すと、ページを開いた後（厳密にはPuppetterの`waitUntil: 'networkidle0'`のタイミング直後）にそれらのスクリプトを実行します。スクリプトは配列の順番通りに逐次実行されます。
+
+```txt
+---
+comparisonHost: https://stage.example.com
+hooks:
+  - ./hook1.cjs
+  - ./hook2.mjs
+---
+
+https://example.com
+https://example.com/a
+︙
+```
+
+フックスクリプトは、以下のようにエクスポートされた関数を持つモジュールとして定義します。
+
+```js
+/**
+ * @type {import('@d-zero/archaeologist').PageHook}
+ */
+export default async function (page, { name, width, resolution, log }) {
+	// 非同期処理可能
+	// page: PuppeteerのPageオブジェクト
+	// name: サイズ名（'desktop' | 'mobile'）
+	// width: ウィンドウ幅
+	// resolution: 解像度
+	// log: ロガー
+
+	// ログイン処理の例
+	log('login');
+	await page.type('#username', 'user');
+	await page.type('#password', 'pass');
+	await page.click('button[type="submit"]');
+	await page.waitForNavigation();
+	log('login done');
+}
+```
+
+例のように、ページにログインする処理をフックスクリプトに記述することで、ユーザー認証が必要なページのスクリーンショットを撮影することができます。
+
+## 認証
+
+### Basic認証
+
+Basic認証が必要なページの場合はURLにユーザー名とパスワードを含めます。
+
+例: `https://user:pass@example.com`

package/dist/analyze.d.ts

@@ -1,2 +1,3 @@
 import type { Result, URLPair } from './types.js';
-export declare function analyze(list: readonly URLPair[]): Promise<Result[]>;
+import type { PageHook } from '@d-zero/puppeteer-screenshot';
+export declare function analyze(list: readonly URLPair[], hooks: readonly PageHook[]): 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) {
+export async function analyze(list, hooks) {
     const urlInfo = analyzeUrlList(list);
     const useOldMode = urlInfo.hasAuth && urlInfo.hasNoSSL;
     const browser = await puppeteer.launch({
@@ -35,7 +35,7 @@ export async function analyze(list) {
         return async () => {
             const dataPair = [];
             for (const url of urlPair) {
-                const data = await getData(page, url, (phase, data) => {
+                const data = await getData(page, url, hooks, (phase, data) => {
                     const outputUrl = c.gray(url);
                     const sizeName = label(data.name);
                     switch (phase) {
@@ -49,6 +49,11 @@ export async function analyze(list) {
                             update(`%braille% ${outputUrl} ${sizeName}: %earth% ${type === 'open' ? 'Open' : 'Reload'} page`);
                             break;
                         }
+                        case 'hook': {
+                            const { message } = data;
+                            update(`%braille% ${outputUrl} ${sizeName}: ${message}`);
+                            break;
+                        }
                         case 'scroll': {
                             update(`%braille% ${outputUrl} ${sizeName}: %propeller% Scroll the page`);
                             break;

package/dist/archaeologist.d.ts

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

package/dist/archaeologist.js

@@ -1,8 +1,8 @@
 import c from 'ansi-colors';
 import { analyze } from './analyze.js';
 import { label, score } from './output-utils.js';
-export async function archaeologist(list) {
-    const results = await analyze(list);
+export async function archaeologist(list, pageHooks) {
+    const results = await analyze(list, pageHooks ?? []);
     const output = [];
     for (const result of results) {
         output.push(c.gray(`${result.target.join(' vs ')}`));

package/dist/cli.js

@@ -1,28 +1,15 @@
 #!/usr/bin/env node
-import fs from 'node:fs/promises';
-import { toList } from '@d-zero/readtext/list';
-import fm from 'front-matter';
 import minimist from 'minimist';
 import { archaeologist } from './archaeologist.js';
+import { readConfig } from './read-config.js';
 const cli = minimist(process.argv.slice(2), {
     alias: {
         f: 'listfile',
     },
 });
 if (cli.listfile) {
-    const fileContent = await fs.readFile(cli.listfile, 'utf8');
-    const content = 
-    // @ts-ignore
-    fm(fileContent);
-    const urlList = toList(content.body);
-    const pairList = urlList.map((urlStr) => {
-        const url = new URL(urlStr);
-        return [
-            url.toString(),
-            `${content.attributes.comparisonHost}${url.pathname}${url.search}`,
-        ];
-    });
-    await archaeologist(pairList);
+    const { pairList, pageHooks } = await readConfig(cli.listfile);
+    await archaeologist(pairList, pageHooks);
     process.exit(0);
 }
 process.stdout.write('Usage: archaeologist -f <listfile>\n');

package/dist/get-data.d.ts

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

package/dist/get-data.js

@@ -1,6 +1,6 @@
 import { distill } from '@d-zero/html-distiller';
 import { screenshot } from '@d-zero/puppeteer-screenshot';
-export async function getData(page, url, listener) {
+export async function getData(page, url, hooks, listener) {
     const screenshots = await screenshot(page, url, {
         sizes: {
             desktop: {
@@ -11,6 +11,7 @@ export async function getData(page, url, listener) {
                 resolution: 2,
             },
         },
+        hooks,
         listener,
     });
     const html = await page.content();

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { archaeologist } from './archaeologist.js';
+export * from './types.js';

package/dist/index.js

@@ -1 +1,2 @@
 export { archaeologist } from './archaeologist.js';
+export * from './types.js';

package/dist/read-config.d.ts

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

package/dist/read-config.js

@@ -0,0 +1,23 @@
+import fs from 'node:fs/promises';
+import { toList } from '@d-zero/readtext/list';
+import fm from 'front-matter';
+import { readHooks } from './read-hooks.js';
+export async function readConfig(filePath) {
+    const fileContent = await fs.readFile(filePath, 'utf8');
+    const content = 
+    // @ts-ignore
+    fm(fileContent);
+    const urlList = toList(content.body);
+    const pairList = urlList.map((urlStr) => {
+        const url = new URL(urlStr);
+        return [
+            url.toString(),
+            `${content.attributes.comparisonHost}${url.pathname}${url.search}`,
+        ];
+    });
+    const pageHooks = await readHooks(content.attributes?.hooks ?? [], filePath);
+    return {
+        pairList,
+        pageHooks,
+    };
+}

package/dist/read-hooks.d.ts

@@ -0,0 +1,2 @@
+import type { PageHook } from '@d-zero/puppeteer-screenshot';
+export declare function readHooks(hooks: readonly string[], listfile: string): Promise<PageHook[]>;

package/dist/read-hooks.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+export async function readHooks(hooks, listfile) {
+    const listfileDir = path.dirname(listfile);
+    const pageHooks = await Promise.all(hooks.map(async (hook) => {
+        const hookAbsPath = path.isAbsolute(hook) ? hook : path.resolve(listfileDir, hook);
+        const { default: mod } = await import(hookAbsPath).catch((error) => {
+            if (error instanceof Error &&
+                'code' in error &&
+                error.code === 'ERR_MODULE_NOT_FOUND') {
+                throw new Error(`Hook: ${hook} not found`, { cause: error });
+            }
+            throw error;
+        });
+        if (typeof mod !== 'function') {
+            throw new TypeError(`Hook ${hook} is not a function`);
+        }
+        return mod;
+    }));
+    return pageHooks;
+}

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+export type { PageHook } from '@d-zero/puppeteer-screenshot';
 import type { Screenshot } from '@d-zero/puppeteer-screenshot';
 export type PageData = {
     url: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/archaeologist",
-	"version": "1.0.0-alpha.3",
+	"version": "1.0.1",
 	"description": "Uncover visual and HTML differences in web pages with precision",
 	"author": "D-ZERO",
 	"license": "MIT",
@@ -26,10 +26,10 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
-		"@d-zero/dealer": "^1.0.0-alpha.2",
-		"@d-zero/html-distiller": "^1.0.0-alpha.2",
-		"@d-zero/puppeteer-screenshot": "^1.0.0-alpha.3",
-		"@d-zero/readtext": "^1.0.0-alpha.2",
+		"@d-zero/dealer": "1.0.0",
+		"@d-zero/html-distiller": "1.0.0",
+		"@d-zero/puppeteer-screenshot": "1.0.1",
+		"@d-zero/readtext": "1.0.1",
 		"ansi-colors": "4.1.3",
 		"diff": "5.2.0",
 		"front-matter": "4.0.2",
@@ -37,13 +37,13 @@
 		"minimist": "1.2.8",
 		"pixelmatch": "5.3.0",
 		"pngjs": "7.0.0",
-		"puppeteer": "22.6.5"
+		"puppeteer": "22.8.2"
 	},
 	"devDependencies": {
-		"@types/diff": "5.0.9",
+		"@types/diff": "5.2.1",
 		"@types/pixelmatch": "5.2.6",
-		"@types/pngjs": "6.0.4",
-		"puppeteer": "22.6.5"
+		"@types/pngjs": "6.0.5",
+		"puppeteer": "22.8.2"
 	},
-	"gitHead": "3544423004c3ee923790f78657a78dfc3c88771d"
+	"gitHead": "426ceebc46f7497a32da6f82677e518efa18245d"
 }