@d-zero/puppeteer-screenshot 1.0.0-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 D-ZERO Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# `@d-zero/puppeteer-screenshot`
+
+Puppeteerでスクリーンショットを撮るためのユーティリティです。
+
+## インストール
+
+```sh
+yarn install @d-zero/puppeteer-screenshot
+```
+
+## 使い方
+
+```ts
+import { screenshot } from '@d-zero/puppeteer-screenshot';
+
+const browser = await puppeteer.launch();
+const page = await browser.newPage();
+
+const result = await screenshot(page, 'https://example.com', {
+	sizes: {
+		desktop: { width: 1400 },
+		mobile: { width: 375, resolution: 2 },
+	},
+	listener: (phase, data) => {
+		console.log(phase, data);
+	},
+});
+```

package/dist/get-binary.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" resolution-mode="require"/>
+import type { Page } from 'puppeteer';
+export declare function getBinary(page: Page): Promise<Buffer>;

package/dist/get-binary.js

@@ -0,0 +1,8 @@
+export async function getBinary(page) {
+    const buffer = await page.screenshot({
+        fullPage: true,
+        type: 'png',
+        encoding: 'binary',
+    });
+    return buffer;
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1 @@
+export { screenshot } from './screenshot.js';

package/dist/screenshot.d.ts

@@ -0,0 +1,18 @@
+import type { Listener, Screenshot, Sizes } from './types.js';
+import type { Page } from 'puppeteer';
+type Options = {
+    sizes?: Sizes;
+    listener?: Listener;
+};
+/**
+ * Takes screenshots of a web page at different sizes and resolutions.
+ *
+ * @param page - The Puppeteer page object.
+ * @param url - The URL of the web page to take screenshots of.
+ * @param options - Optional settings for the screenshot process.
+ * @param options.sizes - The sizes and resolutions to take screenshots at (default: desktop, tablet, mobile).
+ * @param options.listener - A function that listens to the different phases of the screenshot process.
+ * @returns A promise that resolves to an object containing the screenshots.
+ */
+export declare function screenshot(page: Page, url: string, options?: Options): Promise<Record<string, Screenshot>>;
+export {};

package/dist/screenshot.js

@@ -0,0 +1,47 @@
+import { scrollAllOver } from '@d-zero/puppeteer-scroll';
+import { getBinary } from './get-binary.js';
+const defaultSizes = {
+    desktop: { width: 1400 },
+    tablet: { width: 768 },
+    mobile: { width: 375, resolution: 2 },
+};
+/**
+ * Takes screenshots of a web page at different sizes and resolutions.
+ *
+ * @param page - The Puppeteer page object.
+ * @param url - The URL of the web page to take screenshots of.
+ * @param options - Optional settings for the screenshot process.
+ * @param options.sizes - The sizes and resolutions to take screenshots at (default: desktop, tablet, mobile).
+ * @param options.listener - A function that listens to the different phases of the screenshot process.
+ * @returns A promise that resolves to an object containing the screenshots.
+ */
+export async function screenshot(page, url, options) {
+    const sizes = options?.sizes ?? defaultSizes;
+    const listener = options?.listener;
+    const result = {};
+    for (const [name, { width, resolution }] of Object.entries(sizes)) {
+        listener?.('setViewport', { name, width, resolution });
+        await page.setViewport({
+            width,
+            height: 
+            // Landscape or portrait
+            width > 1000 ? Math.floor(width * 0.75) : Math.floor(width * 1.5),
+            deviceScaleFactor: resolution ?? 1,
+        });
+        if (page.url() === url) {
+            listener?.('load', { name, type: 'reaload' });
+            await page.reload({ waitUntil: 'networkidle0' });
+        }
+        else {
+            listener?.('load', { name, type: 'open' });
+            await page.goto(url, { waitUntil: 'networkidle0' });
+        }
+        listener?.('scroll', { name });
+        await scrollAllOver(page);
+        listener?.('screenshotStart', { name });
+        const binary = await getBinary(page);
+        listener?.('screenshotEnd', { name, binary });
+        result[name] = { binary, width, resolution };
+    }
+    return result;
+}

package/dist/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="node" resolution-mode="require"/>
+export type Sizes = Record<string, Size>;
+export type Size = {
+    width: number;
+    resolution?: number;
+};
+export type Screenshot = {
+    binary: Buffer;
+} & Size;
+export type Phase = {
+    setViewport: {
+        name: string;
+        width: number;
+        resolution?: number;
+    };
+    load: {
+        name: string;
+        type: 'open' | 'reaload';
+    };
+    scroll: {
+        name: string;
+    };
+    screenshotStart: {
+        name: string;
+    };
+    screenshotEnd: {
+        name: string;
+        binary: Buffer;
+    };
+};
+export type Listener = (phase: keyof Phase, data: Phase[keyof Phase]) => void;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@d-zero/puppeteer-screenshot",
+	"version": "1.0.0-alpha.2",
+	"description": "Screenshot utility for puppeteer",
+	"author": "D-ZERO",
+	"license": "MIT",
+	"private": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc",
+		"clean": "tsc --build --clean"
+	},
+	"dependencies": {
+		"@d-zero/puppeteer-scroll": "^1.0.0-alpha.2"
+	},
+	"devDependencies": {
+		"puppeteer": "22.6.4"
+	},
+	"gitHead": "802df4fdb85892c8fab3bf1b376755e25ca2ca47"
+}