Merge pull request #291 from pixeleye-io/upgrading-rrweb-snapshot

Upgrading rrweb snapshot
pixeleye-io · May 22, 2024 · bd89dbb · bd89dbb
2 parents b7f52dc + 7758352
commit bd89dbb
Show file tree

Hide file tree

Showing 19 changed files with 100 additions and 293 deletions.
diff --git a/.changeset/heavy-eggs-dream.md b/.changeset/heavy-eggs-dream.md
diff --git a/.changeset/moody-cameras-talk.md b/.changeset/moody-cameras-talk.md
diff --git a/.changeset/pre.json b/.changeset/pre.json
diff --git a/.changeset/shaggy-snakes-punch.md b/.changeset/shaggy-snakes-punch.md
@@ -0,0 +1,10 @@
+---
+"@pixeleye/cli-capture": minor
+"@pixeleye/cli-booth": minor
+"pixeleye": minor
+"@pixeleye/playwright": minor
+"@pixeleye/puppeteer": minor
+"@pixeleye/cypress": minor
+---
+
+Adding support for HTML canvas elements
diff --git a/configs/esbuild/index.js b/configs/esbuild/index.js
@@ -2,7 +2,6 @@ import * as esbuild from "esbuild";
 
 
 const forceExternal = [
-  "jsdom",
   "playwright-core",
   "playwright-core/lib/server"
 ]
@@ -30,7 +29,7 @@ export function build(entryPoints, outdir, banner = {}, formats = ["cjs", "esm"]
       minify: false,
       platform: "node",
       target: "node20",
-      external: devBuild ? ["jsdom", "playwright-core", "rrweb-snapshot/dist/rrweb-snapshot.min.js"] : [],
+      external: devBuild ? ["playwright-core", "rrweb-snapshot/dist/rrweb-snapshot.min.js"] : [],
       outdir,
       format,
       outExtension: {

diff --git a/integrations/cli/cli-booth/package.json b/integrations/cli/cli-booth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pixeleye/cli-booth",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "private": false,
   "license": "AGPL-3.0",
   "main": "./src/index.ts",

diff --git a/integrations/cli/cli-booth/src/server.ts b/integrations/cli/cli-booth/src/server.ts
@@ -3,11 +3,7 @@ import bodyParser from "body-parser";
 import { Build } from "@pixeleye/api";
 import { getEnvConfig } from "@pixeleye/cli-config";
 import { QueuedSnap, handleQueue, queue } from "./snapshotQueue";
-import {
-  CaptureScreenshotData,
-  getBrowser,
-  getBuildContent,
-} from "@pixeleye/cli-capture";
+import { CaptureScreenshotData, getBrowser } from "@pixeleye/cli-capture";
 import { createBus } from "./bus";
 import { API, uploadSnapshots } from "@pixeleye/cli-api";
 import { serializedNodeWithId } from "rrweb-snapshot";
@@ -86,10 +82,6 @@ export function startServer(options: BoothServerOptions) {
     app.post("/snapshot", (req, res) => {
       const body = req.body as SnapshotRequest;
 
-      body.content = body.serializedDom
-        ? getBuildContent(body.serializedDom)
-        : undefined;
-
       body.devices.forEach((device) => {
         queue.add(async () =>
           handleQueue({

diff --git a/integrations/cli/cli-booth/tsconfig.json b/integrations/cli/cli-booth/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "@pixeleye/tsconfig/node.json",
   "include": ["."],
+  "compilerOptions": {
+    "lib": ["dom"]
+  },
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/integrations/cli/cli-capture/package.json b/integrations/cli/cli-capture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pixeleye/cli-capture",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": false,
   "license": "AGPL-3.0",
   "main": "./src/index.ts",
@@ -35,10 +35,8 @@
   "dependencies": {
     "@pixeleye/cli-devices": "workspace:*",
     "@pixeleye/cli-logger": "workspace:*",
-    "@types/jsdom": "^21.1.6",
-    "jsdom": "^24.0.0",
+    "rrweb-snapshot": "2.0.0-alpha.13",
     "object-hash": "^3.0.0",
-    "playwright-core": "^1.43.0",
-    "rrweb-snapshot": "2.0.0-alpha.13"
+    "playwright-core": "^1.43.0"
   }
 }
diff --git a/integrations/cli/cli-capture/src/capture.ts b/integrations/cli/cli-capture/src/capture.ts
@@ -1,15 +1,22 @@
-import {
-  createCache,
-  createMirror,
-  rebuild,
-  serializedNodeWithId,
-} from "rrweb-snapshot";
+import rrweb, { serializedNodeWithId } from "rrweb-snapshot";
 import { getPage } from "./browsers";
 import { DeviceDescriptor } from "@pixeleye/cli-devices";
 import { SnapshotDefinition, defaultConfig } from "@pixeleye/cli-config";
-import { JSDOM } from "jsdom";
 import { logger } from "@pixeleye/cli-logger";
 import { Page } from "playwright-core";
+import { createRequire } from "module";
+
+let rrwebScript: string | undefined;
+try {
+  rrwebScript = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
+} catch {
+  const require = createRequire(import.meta.url);
+  rrwebScript = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
+}
+
+type RRWeb = typeof rrweb;
+
+const blankPage = "<!DOCTYPE html><html><head></head><body></body></html>";
 
 type Only<T, U> = {
   [P in keyof T]: T[P];
@@ -30,16 +37,7 @@ export type CaptureScreenshotData<
 > = T extends string | number | symbol
   ? Omit<CaptureScreenshotConfigOptions, T>
   : CaptureScreenshotConfigOptions &
-      Either<{ url: string }, { content: string }>;
-
-export function getBuildContent(serializedDom: serializedNodeWithId): string {
-  const doc = new JSDOM().window.document;
-  const cache = createCache();
-  const mirror = createMirror();
-  rebuild(serializedDom, { doc, cache, mirror });
-
-  return `<!DOCTYPE html>${doc.documentElement.outerHTML}`;
-}
+      Either<{ url: string }, { serializedDom: serializedNodeWithId }>;
 
 const retries = 3;
 
@@ -80,10 +78,25 @@ async function internalCaptureScreenshot(
     await page.goto(data.url, {
       timeout: 60_000,
     });
-  } else if (data.content) {
-    await page.setContent(data.content, {
-      timeout: 60_000,
+  } else if (data.serializedDom) {
+    await page.setContent(blankPage);
+
+    await (page as Page).addScriptTag({
+      path: rrwebScript,
     });
+
+    await page.evaluate((serializedDom) => {
+      const r: RRWeb = (window as any).rrwebSnapshot;
+
+      const cache = r.createCache();
+      const mirror = r.createMirror();
+
+      r.rebuild(serializedDom, {
+        doc: document,
+        cache,
+        mirror,
+      });
+    }, data.serializedDom);
   } else {
     await page.close();
     throw new Error("No url or serializedDom provided");

diff --git a/integrations/cli/cli-capture/tsconfig.json b/integrations/cli/cli-capture/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "@pixeleye/tsconfig/node.json",
   "include": ["."],
+  "compilerOptions": {
+    "lib": ["dom"]
+  },
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/integrations/cli/pixeleye/tsconfig.json b/integrations/cli/pixeleye/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "@pixeleye/tsconfig/node.json",
   "include": ["."],
+  "compilerOptions": {
+    "lib": ["es2021", "dom"]
+  },
   "exclude": ["dist", "bin", "build", "node_modules"]
 }
diff --git a/integrations/cypress/src/snapshot.ts b/integrations/cypress/src/snapshot.ts
@@ -37,6 +37,7 @@ export const pixeleyeSnapshot = (options: Options) => {
     const serializedDom = domSnapshot(doc, {
       recordCanvas: true,
       inlineImages: true,
+      inlineStylesheet: true,
     });
     if (!serializedDom) {
       throw new Error("Failed to serialize DOM");

diff --git a/integrations/cypress/tsconfig.json b/integrations/cypress/tsconfig.json
@@ -3,6 +3,7 @@
   "include": ["."],
   "compilerOptions": {
     "types": ["cypress"],
+    "lib": ["dom"]
   },
-  "exclude": ["dist", "build", "node_modules"],
+  "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/integrations/playwright/src/snapshot.ts b/integrations/playwright/src/snapshot.ts
@@ -7,16 +7,18 @@ import {
   SnapshotRequest,
 } from "@pixeleye/cli-booth";
 import { createRequire } from "node:module";
-import { snapshot as rrwebSnapshotFn } from "rrweb-snapshot";
+import rrweb from "rrweb-snapshot";
 
-let rrwebSnapshot: string | undefined;
+let rrwebScript: string | undefined;
 try {
-  rrwebSnapshot = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
+  rrwebScript = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
 } catch {
   const require = createRequire(import.meta.url);
-  rrwebSnapshot = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
+  rrwebScript = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
 }
 
+type RRWeb = typeof rrweb;
+
 export interface Options {
   name: string;
   fullPage?: boolean;
@@ -57,20 +59,19 @@ export async function pixeleyeSnapshot(page: Page, options: Options) {
       : undefined;
 
   await (page as Page).addScriptTag({
-    path: rrwebSnapshot,
+    path: rrwebScript,
   });
 
   if (options.waitForSelector)
     await page.waitForSelector(options.waitForSelector);
 
   const domSnapshot = await (page as Page).evaluate(() => {
-    return ((rrwebSnapshot as any).snapshot as typeof rrwebSnapshotFn)(
-      document,
-      {
-        recordCanvas: true,
-        inlineImages: true,
-      }
-    );
+    const r: RRWeb = (window as any).rrwebSnapshot;
+    return r.snapshot(document, {
+      recordCanvas: true,
+      inlineImages: true,
+      inlineStylesheet: true,
+    });
   });
 
   if (!domSnapshot) {

diff --git a/integrations/playwright/tsconfig.json b/integrations/playwright/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "@pixeleye/tsconfig/node.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "lib": ["dom"]
+  },
+  "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/integrations/puppeteer/src/snapshot.ts b/integrations/puppeteer/src/snapshot.ts
@@ -9,6 +9,17 @@ import {
 } from "@pixeleye/cli-booth";
 import { createRequire } from "node:module";
 import { snapshot as rrwebSnapshotFn } from "rrweb-snapshot";
+import rrweb from "rrweb-snapshot";
+
+type RRWeb = typeof rrweb;
+
+let rrwebScript: string | undefined;
+try {
+  rrwebScript = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
+} catch {
+  const require = createRequire(import.meta.url);
+  rrwebScript = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
+}
 
 export interface Options {
   fullPage?: boolean;
@@ -22,14 +33,6 @@ export interface Options {
   wait?: number;
 }
 
-let rrwebSnapshot: string | undefined;
-try {
-  rrwebSnapshot = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
-} catch {
-  const require = createRequire(import.meta.url);
-  rrwebSnapshot = require.resolve("rrweb-snapshot/dist/rrweb-snapshot.min.js");
-}
-
 export async function pixeleyeSnapshot(
   page: Page | PageCore,
   options: Options
@@ -60,17 +63,17 @@ export async function pixeleyeSnapshot(
       : undefined;
 
   await (page as Page).addScriptTag({
-    path: rrwebSnapshot,
+    path: rrwebScript,
   });
 
   const domSnapshot = await (page as Page).evaluate(() => {
-    return ((rrwebSnapshot as any).snapshot as typeof rrwebSnapshotFn)(
-      document,
-      {
-        recordCanvas: true,
-        inlineImages: true,
-      }
-    );
+    const r: RRWeb = (window as any).rrwebSnapshot;
+
+    return r.snapshot(document, {
+      recordCanvas: true,
+      inlineImages: true,
+      inlineStylesheet: true,
+    });
   });
 
   if (!domSnapshot) {

diff --git a/integrations/puppeteer/tsconfig.json b/integrations/puppeteer/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "@pixeleye/tsconfig/node.json",
   "include": ["."],
+  "compilerOptions": {
+    "lib": ["dom"]
+  },
   "exclude": ["dist", "build", "node_modules"]
 }