@d-zero/replicator 0.3.0 → 0.5.0

package/README.md

@@ -1,36 +1,80 @@
-# @d-zero/replicator
+# `@d-zero/replicator`
 
-Replicate web pages with all their resources to local directories
+ウェブページとそのリソースをレスポンシブ画像対応でローカルディレクトリに複製するツールです。
 
-## Installation
+## インストール
 
 ```bash
 npm install @d-zero/replicator
 ```
 
-## Usage
+## 使い方
 
 ### CLI
 
 ```bash
-npx @d-zero/replicator <url> -o <output-directory>
+npx @d-zero/replicator <url> -o <output-directory> [options]
 ```
 
-### Programmatic
+#### オプション
+
+- `-o, --output <dir>`: 出力ディレクトリ（必須）
+- `-t, --timeout <ms>`: リクエストタイムアウト（ミリ秒、デフォルト: 30000）
+- `-d, --devices <devices>`: デバイスプリセット（カンマ区切り、デフォルト: desktop-compact,mobile）
+- `-v, --verbose`: 詳細ログモード
+
+#### 利用可能なデバイスプリセット
+
+- `desktop`: 1400px幅
+- `tablet`: 768px幅
+- `mobile`: 375px幅（2倍解像度）
+- `desktop-hd`: 1920px幅
+- `desktop-compact`: 1280px幅
+- `mobile-large`: 414px幅（3倍解像度）
+- `mobile-small`: 320px幅（2倍解像度）
+
+#### 使用例
+
+```bash
+# デフォルトデバイス（desktop-compact, mobile）
+npx @d-zero/replicator https://example.com -o ./output
+
+# カスタムデバイス指定
+npx @d-zero/replicator https://example.com -o ./output --devices desktop,tablet,mobile
+
+# タイムアウト指定
+npx @d-zero/replicator https://example.com -o ./output --timeout 60000
+```
+
+### プログラマティック使用
 
 ```typescript
 import { replicate } from '@d-zero/replicator';
 
+// デフォルトデバイス
 await replicate('https://example.com', './output');
+
+// カスタムデバイス
+await replicate('https://example.com', './output', {
+	devices: {
+		desktop: { width: 1400 },
+		mobile: { width: 375, resolution: 2 },
+	},
+	timeout: 30000,
+	verbose: true,
+});
 ```
 
-## Features
+## 機能
 
-- Download HTML pages preserving directory structure
-- Fetch all related resources (CSS, JS, images, etc.)
-- Maintain relative links between resources
-- Support for same-host resources only
-- Preserve original file extensions and paths
+- **レスポンシブ画像対応**: 複数のデバイス幅で`<picture>`要素やメディアクエリのリソースを取得
+- **遅延読み込み対応**: ページを自動スクロールして`loading=lazy`や`IntersectionObserver`ベースのコンテンツを取得
+- **マルチデバイスシミュレーション**: 様々なデバイス幅と解像度をシミュレートして包括的なリソース取得を実現
+- HTMLページのディレクトリ構造を保持してダウンロード
+- 関連するすべてのリソース（CSS、JS、画像など）を取得
+- リソース間の相対リンクを維持
+- 同一ホストのリソースのみサポート
+- 元のファイル拡張子とパスを保持
 
 ## License
 

package/dist/cli.js

@@ -1,15 +1,36 @@
 #!/usr/bin/env node
-import { createCLI, parseCommonOptions } from '@d-zero/cli-core';
+import { createCLI, parseCommonOptions, parseList } from '@d-zero/cli-core';
+import { parseDevicesOption } from '@d-zero/puppeteer-page-scan';
 import { replicate } from './index.js';
 const { options, args } = createCLI({
     aliases: {
         o: 'output',
         v: 'verbose',
+        t: 'timeout',
+        d: 'devices',
     },
-    usage: ['Usage: replicator <url> -o <output-directory> [--verbose]'],
+    usage: [
+        'Usage: replicator <url> -o <output-directory> [options]',
+        '',
+        'Options:',
+        '  -o, --output <dir>        Output directory (required)',
+        '  -t, --timeout <ms>        Request timeout in milliseconds (default: 30000)',
+        '  -d, --devices <devices>   Device presets (comma-separated, default: desktop-compact,mobile)',
+        '  -v, --verbose             Enable verbose logging',
+        '',
+        'Available device presets:',
+        '  desktop, tablet, mobile, desktop-hd, desktop-compact, mobile-large, mobile-small',
+        '',
+        'Examples:',
+        '  replicator https://example.com -o ./output',
+        '  replicator https://example.com -o ./output --devices desktop,tablet',
+        '  replicator https://example.com -o ./output --timeout 60000',
+    ],
     parseArgs: (cli) => ({
         ...parseCommonOptions(cli),
         output: cli.output,
+        timeout: cli.timeout ? Number(cli.timeout) : undefined,
+        devices: cli.devices,
     }),
     validateArgs: (options, cli) => {
         return !!(cli._.length > 0 && options.output);
@@ -23,8 +44,12 @@ if (!url || typeof url !== 'string') {
     process.exit(1);
 }
 try {
+    const deviceNames = options.devices ? parseList(options.devices) : undefined;
+    const devices = parseDevicesOption(deviceNames);
     await replicate(url, outputDir, {
         verbose: options.verbose ?? false,
+        timeout: options.timeout,
+        devices,
     });
     // eslint-disable-next-line no-console
     console.log(`✅ Successfully replicated ${url} to ${outputDir}`);

package/dist/index.js

@@ -1,7 +1,7 @@
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
 import { URL } from 'node:url';
-import { beforePageScan } from '@d-zero/puppeteer-page-scan';
+import { beforePageScan, devicePresets } from '@d-zero/puppeteer-page-scan';
 import { launch } from 'puppeteer';
 /**
  *
@@ -10,12 +10,12 @@ import { launch } from 'puppeteer';
  * @param options
  */
 export async function replicate(url, outputDir, options = {}) {
-    const { verbose = false, timeout = 30_000, sizes } = options;
+    const { verbose = false, timeout = 30_000, devices } = options;
     const defaultSizes = {
-        desktop: { width: 1280 },
-        mobile: { width: 375, resolution: 2 },
+        'desktop-compact': devicePresets['desktop-compact'],
+        mobile: devicePresets.mobile,
     };
-    const targetSizes = sizes ?? defaultSizes;
+    const targetSizes = devices ?? defaultSizes;
     const log = (message) => {
         if (verbose) {
             // eslint-disable-next-line no-console
@@ -35,7 +35,6 @@ export async function replicate(url, outputDir, options = {}) {
     progress(`🌐 Launching browser...`);
     const browser = await launch({
         headless: true,
-        timeout,
     });
     try {
         // Process each device size
@@ -105,7 +104,7 @@ export async function replicate(url, outputDir, options = {}) {
  * @param options.progress
  */
 async function processPageForSize(page, url, baseUrl, resources, options) {
-    const { sizeName, width, resolution, log, progress } = options;
+    const { sizeName, width, resolution, timeout, log, progress } = options;
     const requestPromises = [];
     // Set up resource detection
     page.on('request', (request) => {
@@ -161,6 +160,7 @@ async function processPageForSize(page, url, baseUrl, resources, options) {
         name: sizeName,
         width,
         resolution,
+        timeout,
         listener: (phase, data) => {
             switch (phase) {
                 case 'setViewport': {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/replicator",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"description": "Replicate web pages with all their resources to local directories",
 	"author": "D-ZERO",
 	"license": "MIT",
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"@d-zero/cli-core": "1.1.1",
-		"@d-zero/puppeteer-page-scan": "4.0.4",
-		"@d-zero/puppeteer-scroll": "3.0.5",
+		"@d-zero/puppeteer-page-scan": "4.2.0",
+		"@d-zero/puppeteer-scroll": "3.0.6",
 		"@d-zero/shared": "0.9.2",
 		"ansi-colors": "4.1.3",
 		"minimist": "1.2.8",
-		"puppeteer": "24.17.1"
+		"puppeteer": "24.18.0"
 	},
 	"devDependencies": {
 		"@types/minimist": "1.2.5"
 	},
-	"gitHead": "6fa0fd190c54351762a70039cd8dfcafc51caa0b"
+	"gitHead": "00ab4d99dc17e8f09f1a84e3a02f702629b642fc"
 }