rrdom (#613)

* create rrdom package

* test(rrdom): add unit tests for polyfill.ts

* fix(rrweb snapshot): type check errors

Errors are caused by the declaration similarity of @types/mocha and @types/jest if we install both of them in the whole project.

* Set tagNames to upper case by default

This mirrors the `Element.tagName` implementation:

```
For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form. For example, tagName called on a <div> element returns "DIV".
```
https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

* Add workspace file

* VSCode settings for rrdom tests

* Add basic test for RRDocument

* Only setup jest tests for rrdom

* mock Node type and Event type for nodejs environment

* test(rrdom): add snapshot for document.test.ts

* fix issue of nwsapi import and add unit tests for rrdom

* fix: querySelectorAll returns nothing when querying elements with ids and classNames

* fix: error of unit test for Event polyfill

Since Event class is built in nodejs after v15.0.0

* add a dummy implementation of canvas

* add style element support

* add unit test for style element

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

packages/rrdom/test/polyfill.test.ts

@@ -0,0 +1,83 @@
+import { RRDocument, RRNode } from '../src/document-nodejs';
+import {
+  polyfillPerformance,
+  polyfillRAF,
+  polyfillEvent,
+  polyfillNode,
+  polyfillDocument,
+} from '../src/polyfill';
+
+describe('polyfill for nodejs', () => {
+  it('should polyfill performance api', () => {
+    expect(global.performance).toBeUndefined();
+    polyfillPerformance();
+    expect(global.performance).toBeDefined();
+    expect(performance).toBeDefined();
+    expect(performance.now).toBeDefined();
+    expect(performance.now()).toBeCloseTo(
+      require('perf_hooks').performance.now(),
+      1e-10,
+    );
+  });
+
+  it('should polyfill requestAnimationFrame', () => {
+    expect(global.requestAnimationFrame).toBeUndefined();
+    expect(global.cancelAnimationFrame).toBeUndefined();
+    polyfillRAF();
+    expect(global.requestAnimationFrame).toBeDefined();
+    expect(global.cancelAnimationFrame).toBeDefined();
+    expect(requestAnimationFrame).toBeDefined();
+    expect(cancelAnimationFrame).toBeDefined();
+
+    jest.useFakeTimers();
+    const AnimationTime = 1_000; // target animation time(unit: ms)
+    const startTime = Date.now();
+    let frameCount = 0;
+    const rafCallback1 = () => {
+      const currentTime = Date.now();
+      frameCount++;
+      if (currentTime - startTime < AnimationTime) {
+        requestAnimationFrame(rafCallback1);
+      } else {
+        expect(frameCount).toBeGreaterThanOrEqual(55);
+        expect(frameCount).toBeLessThanOrEqual(65);
+      }
+    };
+    requestAnimationFrame(rafCallback1);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
+
+    let rafHandle;
+    const rafCallback2 = () => {
+      rafHandle = requestAnimationFrame(rafCallback2);
+    };
+    rafHandle = requestAnimationFrame(rafCallback2);
+
+    // If this function doesn't work, recursive function will never end.
+    cancelAnimationFrame(rafHandle);
+    jest.runAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('should polyfill Event type', () => {
+    polyfillEvent();
+    expect(global.Event).toBeDefined();
+    expect(Event).toBeDefined();
+  });
+
+  it('should polyfill Node type', () => {
+    expect(global.Node).toBeUndefined();
+    polyfillNode();
+    expect(global.Node).toBeDefined();
+    expect(Node).toBeDefined();
+    expect(Node).toEqual(RRNode);
+  });
+
+  it('should polyfill document object', () => {
+    expect(global.document).toBeUndefined();
+    polyfillDocument();
+    expect(global.document).toBeDefined();
+    expect(document).toBeDefined();
+    expect(document).toBeInstanceOf(RRDocument);
+  });
+});