diff --git a/README.md b/README.md index e73c2a8768..09c935efbe 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,16 @@ rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web. +## Publishing @chromaui/rrweb-snapshot + +Chromatic maintains this fork of `rrweb-io/rrweb` solely to publish a version of `rrweb-snapshot` that supports constructable stylesheets for Chromatic e2e capture purposes. + +To distinguish Chromatic-specific builds from those coming from rrweb-io, a `-noAbsolute` label is appended to the end of the package version. If more than one Chromatic build is produced based off of the same rrweb-io version, a number is appended to the end of that label (e.g. `2.0.0-alpha.17-noAbsolute.1`). + +1. In `packages/rrweb-snapshot/package.json`, set the appropriate `-noAbsolute.X` version +2. CD to `packages/rrweb-snapshot` +3. Run `npm publish` + ## Guide [**📚 Read the rrweb guide here. 📚**](./guide.md) diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json index 70d5a104a0..ba88380970 100644 --- a/packages/rrweb-snapshot/package.json +++ b/packages/rrweb-snapshot/package.json @@ -1,6 +1,6 @@ { - "name": "rrweb-snapshot", - "version": "2.0.0-alpha.17", + "name": "@chromaui/rrweb-snapshot", + "version": "2.0.0-alpha.17-noAbsolute", "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer", "scripts": { "prepare": "npm run prepack", @@ -12,7 +12,7 @@ "test:update": "yarn build && vitest run --update", "bench": "vite build && vitest bench", "dev": "vite build --watch", - "build": "yarn turbo prepublish -F rrweb-snapshot", + "build": "yarn turbo prepublish -F @chromaui/rrweb-snapshot", "check-types": "tsc --noEmit", "prepublish": "yarn check-types && vite build", "lint": "yarn eslint src" @@ -20,7 +20,7 @@ "type": "module", "repository": { "type": "git", - "url": "git+https://github.com/rrweb-io/rrweb.git" + "url": "git+https://github.com/chromaui/rrweb.git" }, "keywords": [ "rrweb", @@ -50,9 +50,9 @@ "author": "yanzhen@smartx.com", "license": "MIT", "bugs": { - "url": "https://github.com/rrweb-io/rrweb/issues" + "url": "https://github.com/chromaui/rrweb/issues" }, - "homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot#readme", + "homepage": "https://github.com/chromaui/rrweb/tree/master/packages/rrweb-snapshot#readme", "devDependencies": { "@rrweb/utils": "^2.0.0-alpha.17", "@types/jsdom": "^20.0.0", diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index d79c8f8716..dabfb487ae 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -152,7 +152,7 @@ export function buildStyleNode( } function buildNode( - n: serializedNodeWithId, + n: serializedNodeWithId & { chromaticAdoptedStylesheets?: string[] }, options: { doc: Document; hackCss: boolean; @@ -380,6 +380,13 @@ function buildNode( */ if (!node.shadowRoot) { node.attachShadow({ mode: 'open' }); + n.chromaticAdoptedStylesheets?.forEach( + (chromaticAdoptedStylesheet) => { + const styleSheet = new CSSStyleSheet(); + styleSheet.replaceSync(chromaticAdoptedStylesheet); + node.shadowRoot?.adoptedStyleSheets.push(styleSheet); + }, + ); } else { while (node.shadowRoot.firstChild) { node.shadowRoot.removeChild(node.shadowRoot.firstChild); diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index cd3d7189b7..0c210cff42 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -1008,7 +1008,10 @@ export function serializeNodeWithId( id = genId(); } - const serializedNode = Object.assign(_serializedNode, { id }); + const serializedNode: serializedNode & { + id: number; + chromaticAdoptedStylesheets?: Array; + } = Object.assign(_serializedNode, { id }); // add IGNORED_NODE to mirror to track nextSiblings mirror.add(n, serializedNode); @@ -1025,8 +1028,15 @@ export function serializeNodeWithId( // this property was not needed in replay side delete serializedNode.needBlock; const shadowRootEl = dom.shadowRoot(n); - if (shadowRootEl && isNativeShadowDom(shadowRootEl)) + if (shadowRootEl && isNativeShadowDom(shadowRootEl)) { serializedNode.isShadowHost = true; + if (shadowRootEl.adoptedStyleSheets.length > 0) { + serializedNode.chromaticAdoptedStylesheets = + shadowRootEl.adoptedStyleSheets.map((stylesheet) => + stringifyStylesheet(stylesheet), + ); + } + } } if ( (serializedNode.type === NodeType.Document || diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 3feae589f6..16cfdddfb6 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -349,6 +349,8 @@ export default class MutationBuffer { onStylesheetLoad: (link, childSn) => { this.stylesheetManager.attachLinkElement(link, childSn); }, + // @ts-expect-error cssCaptured isn't specified as an accepted property, + // but we didn't touch anything near here, so ignoring for now cssCaptured, }); if (sn) { diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap index c1db08aea0..81351d6a4a 100644 --- a/packages/rrweb/test/__snapshots__/record.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap @@ -628,7 +628,10 @@ exports[`record > captures adopted stylesheets in nested shadow doms and iframes \\"childNodes\\": [], \\"rootId\\": 29, \\"id\\": 33, - \\"isShadowHost\\": true + \\"isShadowHost\\": true, + \\"chromaticAdoptedStylesheets\\": [ + \\"div { font-size: large; }\\" + ] } ], \\"rootId\\": 29, @@ -849,7 +852,11 @@ exports[`record > captures adopted stylesheets in shadow doms and iframe 1`] = ` } ], \\"id\\": 10, - \\"isShadowHost\\": true + \\"isShadowHost\\": true, + \\"chromaticAdoptedStylesheets\\": [ + \\"div { color: yellow; }h2 { color: orange; }h3 { font-size: larger; }\\", + \\"span { color: red; }\\" + ] }, { \\"type\\": 3, @@ -1204,7 +1211,10 @@ exports[`record > captures adopted stylesheets of shadow doms in checkout full s } ], \\"id\\": 7, - \\"isShadowHost\\": true + \\"isShadowHost\\": true, + \\"chromaticAdoptedStylesheets\\": [ + \\"h1 { color: blue; }\\" + ] }, { \\"type\\": 3, @@ -1304,7 +1314,10 @@ exports[`record > captures adopted stylesheets of shadow doms in checkout full s } ], \\"id\\": 7, - \\"isShadowHost\\": true + \\"isShadowHost\\": true, + \\"chromaticAdoptedStylesheets\\": [ + \\"h1 { color: blue; }\\" + ] }, { \\"type\\": 3,