Use non-forked rrweb

__playwright-tests__/archiving-assets.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '../src';
 
 test('asset paths', async ({ page }) => {
-  await page.goto('/asset-paths');
+  await page.goto('/asset-paths/');
 });

__playwright-tests__/fixtures/asset-paths.html

@@ -18,6 +18,7 @@
       <div><img src="/img?url=fixtures/pink.png"/></div>
       <div><img src="/img"/></div>
       <div><img src="/img/another"/></div>
+      <div><img src="relative/purple.png"/></div>
       <div><img src="/blahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahbblahblahblahblahblahblahblahblahblahblahb"></div>
       <div><img src="https://www.chromatic.com/emails/icon-chroma-64x64.png?test=query"/></div>
       <div class="with-background-img"></div>

__playwright-tests__/server.js

@@ -59,6 +59,10 @@ app.get('/img/another', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/pink.png'));
 });
 
+app.get('/asset-paths/relative/purple.png', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/purple.png'));
+});
+
 app.get('/background-img.png', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/purple.png'));
 });

package.json

@@ -48,7 +48,6 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@chromaui/archive-storybook": "^0.0.15",
-    "@chromaui/test-archiver": "^0.0.32",
     "@jest/types": "^27.0.6",
     "@playwright/test": "^1.39.0",
     "@storybook/addon-essentials": "^7.5.2",
@@ -97,10 +96,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@chromaui/rrweb-snapshot": "2.0.0-alpha.7-noAbsolute.2",
     "@segment/analytics-node": "^1.1.0",
     "fs-extra": "^11.1.1",
     "mime": "^3.0.0",
+    "rrweb-snapshot": "^2.0.0-alpha.4",
     "ts-dedent": "^2.2.0"
   },
   "peerDependencies": {

src/cypress-api/commands.ts

@@ -1,10 +1,10 @@
-import { snapshot } from '@chromaui/rrweb-snapshot';
-import type { elementNode } from '@chromaui/rrweb-snapshot';
+import { snapshot } from 'rrweb-snapshot';
+import type { elementNode } from 'rrweb-snapshot';
 // @ts-expect-error will fix when Cypress has its own package
 Cypress.Commands.add('takeChromaticArchive', () => {
   cy.document().then((doc) => {
     // here, handle the source map
-    const manualSnapshot = snapshot(doc, { noAbsolute: true });
+    const manualSnapshot = snapshot(doc);
     // reassign manualSnapshots so it includes this new snapshot
     cy.get('@manualSnapshots')
       // @ts-expect-error will fix when Cypress has its own package

src/cypress-api/index.ts

@@ -1,4 +1,4 @@
-import type { elementNode } from '@chromaui/rrweb-snapshot';
+import type { elementNode } from 'rrweb-snapshot';
 import { writeTestResult } from '../write-archive';
 import type { ChromaticStorybookParameters } from '../types';
 import type { ResourceArchive } from '../resource-archive';

src/cypress-api/support.ts

@@ -1,4 +1,4 @@
-import { snapshot } from '@chromaui/rrweb-snapshot';
+import { snapshot } from 'rrweb-snapshot';
 import type { ResourceArchive } from '../resource-archive';
 import './commands';
 
@@ -55,7 +55,7 @@ const completeArchive = () => {
   cy.get('@archive').then((archive) => {
     // can we be sure this always fires after all the requests are back?
     cy.document().then((doc) => {
-      const snap = snapshot(doc, { noAbsolute: true });
+      const snap = snapshot(doc);
       // @ts-expect-error will fix when Cypress has its own package
       cy.get('@manualSnapshots').then((manualSnapshots = []) => {
         // pass the snapshot to the server to write to disk

src/playwright-api/takeArchive.ts

@@ -1,15 +1,12 @@
 import type { Page, TestInfo } from '@playwright/test';
 import { readFileSync } from 'fs';
-import type { elementNode } from '@chromaui/rrweb-snapshot';
+import type { elementNode } from 'rrweb-snapshot';
 
 import dedent from 'ts-dedent';
 
 import { logger } from '../utils/logger';
 
-const rrweb = readFileSync(
-  require.resolve('@chromaui/rrweb-snapshot/dist/rrweb-snapshot.js'),
-  'utf8'
-);
+const rrweb = readFileSync(require.resolve('rrweb-snapshot/dist/rrweb-snapshot.js'), 'utf8');
 
 export const contentType = 'application/rrweb.snapshot+json';
 
@@ -39,7 +36,7 @@ async function takeArchive(
   // Serialize and capture the DOM
   const domSnapshot: elementNode = await page.evaluate(dedent`
     ${rrweb};
-    rrwebSnapshot.snapshot(document, { noAbsolute: true });
+    rrwebSnapshot.snapshot(document);
   `);
 
   testInfo.attach(name, { contentType, body: JSON.stringify(domSnapshot) });

src/write-archive/archive-file.test.ts

@@ -78,7 +78,7 @@ describe('ArchiveFile', () => {
       archiveFile.toFileSystemPath();
       const originalSrc = archiveFile.originalSrc();
 
-      expect(originalSrc).toEqual('/some/directory/ok?src=some-other-url');
+      expect(originalSrc).toEqual('http://localhost:333/some/directory/ok?src=some-other-url');
     });
   });
 });

src/write-archive/archive-file.ts

@@ -30,8 +30,7 @@ export class ArchiveFile {
   }
 
   originalSrc() {
-    // Assets that we capture will be stripped of the domain in the source
-    return `${this.url.pathname}${this.url.search}`;
+    return this.url.toString();
   }
 
   toFileSystemPath() {

src/write-archive/dom-snapshot.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-param-reassign */
-import type { serializedNodeWithId } from '@chromaui/rrweb-snapshot';
-import { NodeType } from '@chromaui/rrweb-snapshot';
+import type { serializedNodeWithId } from 'rrweb-snapshot';
+import { NodeType } from 'rrweb-snapshot';
 
 // Matches `url(...)` function in CSS text, excluding data URLs
 const CSS_URL_REGEX = /url\((?!['"]?(?:data):)['"]?([^'")]*)['"]?\)/gi;

src/write-archive/index.test.ts

@@ -1,7 +1,7 @@
 import fs from 'fs-extra';
 import { resolve } from 'path';
 import type { TestInfo } from '@playwright/test';
-import { NodeType } from '@chromaui/rrweb-snapshot';
+import { NodeType } from 'rrweb-snapshot';
 import { writeTestResult } from '.';
 
 jest.mock('fs-extra');
@@ -11,13 +11,13 @@ const snapshotJson = {
     {
       type: NodeType.Element,
       attributes: {
-        src: '/home/',
+        src: 'http://localhost:3000/home/',
       },
     },
     {
       type: NodeType.Element,
       attributes: {
-        src: '/img?src=some-path',
+        src: 'http://localhost:3000/img?src=some-path',
       },
     },
   ],

yarn.lock

@@ -2052,17 +2052,6 @@
   resolved "https://registry.npmjs.org/@chromaui/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.7-noAbsolute.2.tgz"
   integrity sha512-vOVSOgfNyxomxm6ENMqm1C4rLkLLOlyEyhR5J2SKBALuFfuJHjhIqNLSOgqVRO9J3++AUOCktknyJ/F+mSvEfA==
 
-"@chromaui/test-archiver@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@chromaui/test-archiver/-/test-archiver-0.0.32.tgz#6e0560b39108581b9d3d55d3f5e462350b3cda9c"
-  integrity sha512-O6le42KqoliioAQG2RY+XhrwSttwnYHV2lIk3TNKJ1l9sTjQT5AUAZJ6N4CkUAsU8TVtX8wEDUY0mrNL00M/DQ==
-  dependencies:
-    "@chromaui/rrweb-snapshot" "2.0.0-alpha.7-noAbsolute.2"
-    "@segment/analytics-node" "^1.1.0"
-    fs-extra "^11.1.1"
-    mime "^3.0.0"
-    ts-dedent "^2.2.0"
-
 "@colors/[email protected]":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -11571,6 +11560,11 @@ rollup@^3.2.5:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rrweb-snapshot@^2.0.0-alpha.4:
+  version "2.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.4.tgz#2801bf5946177b9d685a01661a62d9d2e958f174"
+  integrity sha512-KQ2OtPpXO5jLYqg1OnXS/Hf+EzqnZyP5A+XPqBCjYpj3XIje/Od4gdUwjbFo3cVuWq5Cw5Y1d3/xwgIS7/XpQQ==
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"