Add an Option to inject pagedjs polyfill

bin/browser.js

@@ -297,10 +297,91 @@ const callChrome = async pup => {
             await page.addStyleTag(JSON.parse(request.options.addStyleTag));
         }
 
+        if (request.options && request.options.pagedjs) {
+            await page.evaluate(() => {
+                window.PagedConfig = window.PagedConfig || {};
+                window.PagedConfig.auto = false;
+            });
+
+            await page.addScriptTag({
+				url: request.options.pagedjs
+			});
+        }
+
         if (request.options && request.options.addScriptTag) {
             await page.addScriptTag(JSON.parse(request.options.addScriptTag));
         }
 
+        if (request.options && request.options.pagedjs) {
+            await page.exposeFunction("onSize", (size) => {
+                this.emit("size", size);
+            });
+
+            await page.exposeFunction("onPage", (page) => {
+
+                this.pages.push(page);
+
+                this.emit("page", page);
+            });
+
+            await page.exposeFunction("onRendered", (msg, width, height, orientation) => {
+                this.emit("rendered", msg, width, height, orientation);
+                resolver({msg, width, height, orientation});
+            });
+
+            await page.evaluate(async () => {
+                let done;
+                window.PagedPolyfill.on("page", (page) => {
+                    const { id, width, height, startToken, endToken, breakAfter, breakBefore, position } = page;
+
+                    const mediabox = page.element.getBoundingClientRect();
+                    const cropbox = page.pagebox.getBoundingClientRect();
+
+                    function getPointsValue(value) {
+                        return (Math.round(CSS.px(value).to("pt").value * 100) / 100);
+                    }
+
+                    let boxes = {
+                        media: {
+                            width: getPointsValue(mediabox.width),
+                            height: getPointsValue(mediabox.height),
+                            x: 0,
+                            y: 0
+                        },
+                        crop: {
+                            width: getPointsValue(cropbox.width),
+                            height: getPointsValue(cropbox.height),
+                            x: getPointsValue(cropbox.x) - getPointsValue(mediabox.x),
+                            y: getPointsValue(cropbox.y) - getPointsValue(mediabox.y)
+                        }
+                    };
+
+                    window.onPage({ id, width, height, startToken, endToken, breakAfter, breakBefore, position, boxes });
+                });
+
+                window.PagedPolyfill.on("size", (size) => {
+                    window.onSize(size);
+                });
+
+                window.PagedPolyfill.on("rendered", (flow) => {
+                    let msg = "Rendering " + flow.total + " pages took " + flow.performance + " milliseconds.";
+                    window.onRendered(msg, flow.width, flow.height, flow.orientation);
+                });
+
+                if (window.PagedConfig.before) {
+                    await window.PagedConfig.before();
+                }
+
+                done = await window.PagedPolyfill.preview();
+
+                if (window.PagedConfig.after) {
+                    await window.PagedConfig.after(done);
+                }
+            })
+
+            await page.waitForSelector(".pagedjs_pages");
+        }
+
         if (request.options.delay) {
             await page.waitForTimeout(request.options.delay);
         }

docs/miscellaneous-options/use-with-pagedjs.md

@@ -0,0 +1,18 @@
+---
+title: Use paged.js 
+weight: 21
+---
+
+You can inject the paged.js polyfill library:
+
+```php
+Browsershot::url('https://example.com')
+    ->usePagedJS()
+```
+
+You can also provide a custom version of the script which will be injected as an argument:
+
+```php
+Browsershot::url('https://example.com')
+    ->usePagedJS('https://unpkg.com/[email protected]/dist/paged.polyfill.js')
+```

docs/miscellaneous-options/using-a-pipe-instead-of-a-websocket.md

@@ -1,6 +1,6 @@
 ---
 title: Using a pipe instead of a WebSocket
-weight: 21
+weight: 22
 ---
 
 If you want to connect to the browser over a pipe instead of a WebSocket, you can use:

docs/miscellaneous-options/using-cookies.md

@@ -1,6 +1,6 @@
 ---
 title: Using cookies
-weight: 22
+weight: 23
 ---
 
 You can add cookies to the request to the given url:

docs/miscellaneous-options/using-http-authentication.md

@@ -1,6 +1,6 @@
 ---
 title: Using HTTP Authentication
-weight: 23
+weight: 24
 ---
 
 You can provide credentials for HTTP authentication:

docs/miscellaneous-options/using-url-for-html-content.md

@@ -1,6 +1,6 @@
 ---
 title: Using url for html content
-weight: 24
+weight: 25
 ---
 
 Using the method *setContentUrl* you can set the base url of the request when using the *html* method. Sometimes you may have relative paths in your code. When passing a html page to puppeteer, you don't have a base url set. So any relative path present in your html content will not fetch correctly.

docs/miscellaneous-options/writing-options-to-a-file.md

@@ -1,6 +1,6 @@
 ---
 title: Writing options to a file
-weight: 25
+weight: 26
 ---
 
 When the amount of options given to puppeteer becomes too big, Browsershot will fail because of an overflow of characters in the command line.

src/Browsershot.php

@@ -632,6 +632,10 @@ public function evaluate(string $pageFunction): string
         return $this->callBrowser($command);
     }
 
+    public function usePagedJS(string $url = '//unpkg.com/pagedjs/dist/paged.polyfill.js') {
+        $this->setOption('pagedjs', $url);
+    }
+
     public function triggeredRequests(): array
     {
         $command = $this->createTriggeredRequestsListCommand();

tests/BrowsershotTest.php

@@ -1034,6 +1034,27 @@
     expect($result)->toEqual('2');
 });
 
+it('can use pagedjs', function () {
+    $command = Browsershot::url('https://example.com')
+        ->usePagedJS()
+        ->createScreenshotCommand('screenshot.png');
+
+    $this->assertEquals([
+        'url' => 'https://example.com',
+        'action' => 'screenshot',
+        'options' => [
+            'pagedjs' => '//unpkg.com/pagedjs/dist/paged.polyfill.js',
+            'path' => 'screenshot.png',
+            'viewport' => [
+                'width' => 800,
+                'height' => 600,
+            ],
+            'args' => [],
+            'type' => 'png',
+        ],
+    ], $command);
+});
+
 it('can add a timeout to puppeteer', function () {
     $command = Browsershot::url('https://example.com')
         ->timeout(123)