Merge pull request #3 from chromaui/andrew/ap-4984-create-changes-to-…

…support-constructed-stylesheets Support constructed stylesheets in shadow DOM instances
chromaui · Sep 25, 2024 · 5024d35 · 5024d35
2 parents a78e272 + f695df0
commit 5024d35
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 13 deletions.
diff --git 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
@@ -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,15 +12,15 @@
     "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"
   },
   "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": "[email protected]",
   "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
@@ -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
@@ -1008,7 +1008,10 @@ export function serializeNodeWithId(
     id = genId();
   }
 
-  const serializedNode = Object.assign(_serializedNode, { id });
+  const serializedNode: serializedNode & {
+    id: number;
+    chromaticAdoptedStylesheets?: Array<string | null>;
+  } = 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
@@ -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
@@ -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,