rum-recorder: import rrweb-snapshot code

LICENSE-3rdparty.csv

@@ -2,8 +2,8 @@ Component,Origin,License,Copyright
 require,tslib,Apache-2.0,Copyright Microsoft Corporation
 file,pako,MIT,(C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin 
 file,rrweb,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
+file,rrweb-snapshot,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb-snapshot/graphs/contributors) and SmartX Inc.
 file,tracekit,MIT,Copyright 2013 Onur Can Cakmak and all TraceKit contributors
-prod,rrweb-snapshot,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb-snapshot/graphs/contributors) and SmartX Inc.
 dev,@types/connect-busboy,MIT,Copyright Microsoft Corporation
 dev,@types/cors,MIT,Copyright Microsoft Corporation
 dev,@types/express,MIT,Copyright Microsoft Corporation

packages/rum-recorder/package.json

@@ -14,7 +14,6 @@
   "dependencies": {
     "@datadog/browser-core": "2.4.0",
     "@datadog/browser-rum-core": "2.4.0",
-    "rrweb-snapshot": "1.0.1",
     "tslib": "^1.10.0"
   },
   "repository": {

packages/rum-recorder/src/domain/rrweb-snapshot/index.ts

@@ -0,0 +1,4 @@
+import { serializeNodeWithId, transformAttribute, IGNORED_NODE, snapshot } from './snapshot'
+export * from './types'
+
+export { snapshot, serializeNodeWithId, transformAttribute, IGNORED_NODE }

packages/rum-recorder/src/domain/rrweb-snapshot/snapshot.spec.ts

@@ -0,0 +1,75 @@
+/* eslint-disable max-len */
+import { absoluteToStylesheet } from './snapshot'
+
+describe('absolute url to stylesheet', () => {
+  const href = 'http://localhost/css/style.css'
+
+  it('can handle relative path', () => {
+    expect(absoluteToStylesheet('url(a.jpg)', href)).toEqual(`url(http://localhost/css/a.jpg)`)
+  })
+
+  it('can handle same level path', () => {
+    expect(absoluteToStylesheet('url("./a.jpg")', href)).toEqual(`url("http://localhost/css/a.jpg")`)
+  })
+
+  it('can handle parent level path', () => {
+    expect(absoluteToStylesheet('url("../a.jpg")', href)).toEqual(`url("http://localhost/a.jpg")`)
+  })
+
+  it('can handle absolute path', () => {
+    expect(absoluteToStylesheet('url("/a.jpg")', href)).toEqual(`url("http://localhost/a.jpg")`)
+  })
+
+  it('can handle external path', () => {
+    expect(absoluteToStylesheet('url("http://localhost/a.jpg")', href)).toEqual(`url("http://localhost/a.jpg")`)
+  })
+
+  it('can handle single quote path', () => {
+    expect(absoluteToStylesheet(`url('./a.jpg')`, href)).toEqual(`url('http://localhost/css/a.jpg')`)
+  })
+
+  it('can handle no quote path', () => {
+    expect(absoluteToStylesheet('url(./a.jpg)', href)).toEqual(`url(http://localhost/css/a.jpg)`)
+  })
+
+  it('can handle multiple no quote paths', () => {
+    expect(
+      absoluteToStylesheet(
+        'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
+        href
+      )
+    ).toEqual(
+      `background-image: url(http://localhost/css/images/b.jpg);` +
+        `background: #aabbcc url(http://localhost/css/images/a.jpg) 50% 50% repeat;`
+    )
+  })
+
+  it('can handle data url image', () => {
+    expect(absoluteToStylesheet('url(data:image/gif;base64,ABC)', href)).toEqual('url(data:image/gif;base64,ABC)')
+    expect(absoluteToStylesheet('url(data:application/font-woff;base64,d09GMgABAAAAAAm)', href)).toEqual(
+      'url(data:application/font-woff;base64,d09GMgABAAAAAAm)'
+    )
+  })
+
+  it('preserves quotes around inline svgs with spaces', () => {
+    expect(
+      absoluteToStylesheet(
+        "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
+        href
+      )
+    ).toEqual(
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")"
+    )
+    expect(
+      absoluteToStylesheet(
+        'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
+        href
+      )
+    ).toEqual(
+      'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')'
+    )
+  })
+  it('can handle empty path', () => {
+    expect(absoluteToStylesheet(`url('')`, href)).toEqual(`url('')`)
+  })
+})