Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initial shadow DOM support #1572

Closed
wants to merge 3 commits into from
Closed

Initial shadow DOM support #1572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a78e272
Merge pull request #1 from chromaui/steven/upgrade-rrweb
skitterm Sep 12, 2024
24c93f6
Initial shadow DOM support
andrewortwein Sep 23, 2024
3e8743f
Support multiple constructable stylesheets per shadow DOM element
andrewortwein Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions packages/rrweb-snapshot/src/rebuild.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,17 @@ function buildNode(
*/
if (!node.shadowRoot) {
node.attachShadow({ mode: 'open' });
// @ts-expect-error TODO
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
n.chromaticAdoptedStylesheets.forEach(
// @ts-expect-error TODO
(chromaticAdoptedStylesheet) => {
const styleSheet = new CSSStyleSheet();
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
styleSheet.replaceSync(chromaticAdoptedStylesheet);
node.shadowRoot?.adoptedStyleSheets.push(styleSheet);
},
);
} else {
while (node.shadowRoot.firstChild) {
node.shadowRoot.removeChild(node.shadowRoot.firstChild);
Expand Down Expand Up @@ -443,6 +454,18 @@ export function buildNodeWithSN(
if (!node) {
return null;
}
// // @ts-expect-error TODO
// if (n.chromaticAdoptedStylesheets) {
// // @ts-expect-error TODO
// // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
// n.chromaticAdoptedStylesheets.forEach((sheet) => {
// const styleSheet = new CSSStyleSheet();
// // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
// styleSheet.replaceSync(sheet);
// // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
// doc.adoptedStyleSheets.push(styleSheet);
// });
// }
// If the snapshot is created by checkout, the rootId doesn't change but the iframe's document can be changed automatically when a new iframe element is created.
if (n.rootId && (mirror.getNode(n.rootId) as Document) !== doc) {
mirror.replace(n.rootId, doc);
Expand Down
30 changes: 29 additions & 1 deletion packages/rrweb-snapshot/src/snapshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@
// should warn? maybe a text node isn't attached to a parent node yet?
return false;
} else {
el = dom.parentElement(node)!;

Check warning on line 283 in packages/rrweb-snapshot/src/snapshot.ts

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L283 

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
}
try {
if (typeof maskTextClass === 'string') {
Expand Down Expand Up @@ -700,10 +700,10 @@
const recordInlineImage = () => {
image.removeEventListener('load', recordInlineImage);
try {
canvasService!.width = image.naturalWidth;

Check warning on line 703 in packages/rrweb-snapshot/src/snapshot.ts

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L703 

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
canvasService!.height = image.naturalHeight;

Check warning on line 704 in packages/rrweb-snapshot/src/snapshot.ts

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L704 

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
canvasCtx!.drawImage(image, 0, 0);

Check warning on line 705 in packages/rrweb-snapshot/src/snapshot.ts

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L705 

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
attributes.rr_dataURL = canvasService!.toDataURL(

Check warning on line 706 in packages/rrweb-snapshot/src/snapshot.ts

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L706 

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
dataURLOptions.type,
dataURLOptions.quality,
);
Expand Down Expand Up @@ -1020,13 +1020,41 @@
onSerialize(n);
}
let recordChild = !skipChild;
// @ts-expect-error TODO
if (n.adoptedStyleSheets) {
// @ts-expect-error TODO
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
serializedNode.chromaticAdoptedStylesheets =
// @ts-expect-error TODO
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
n.adoptedStyleSheets.map(
// @ts-expect-error TODO
(sheet) =>
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
Array.from(sheet.cssRules)
// @ts-expect-error TODO
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
.map((rule) => rule.cssText)
.join(' '),
);
}
if (serializedNode.type === NodeType.Element) {
recordChild = recordChild && !serializedNode.needBlock;
// 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) {
// @ts-expect-error TODO
serializedNode.chromaticAdoptedStylesheets =
shadowRootEl.adoptedStyleSheets.map((sheet) =>
Array.from(sheet.cssRules)
.map((rule) => rule.cssText)
.join(' '),
);
}
}
}
if (
(serializedNode.type === NodeType.Document ||
Expand Down
Loading