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/__snapshots__/document-nodejs.test.ts.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RRDocument for nodejs environment buildFromDom should create an RRDocument from a html document 1`] = `
+"-1 RRDocument
+  -2 RRDocumentType
+  -3 HTML lang=\\"en\\" 
+    -4 HEAD 
+      -5 RRText text=\\"\\\\n    \\"
+      -6 META charset=\\"UTF-8\\" 
+      -7 RRText text=\\"\\\\n    \\"
+      -8 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" 
+      -9 RRText text=\\"\\\\n    \\"
+      -10 TITLE 
+        -11 RRText text=\\"Main\\"
+      -12 RRText text=\\"\\\\n    \\"
+      -13 LINK rel=\\"stylesheet\\" href=\\"somelink\\" 
+      -14 RRText text=\\"\\\\n    \\"
+      -15 STYLE 
+        -16 RRText text=\\"\\\\n      h1 {\\\\n        color: 'black';\\\\n      }\\\\n      .blocks {\\\\n        padding: 0;\\\\n      }\\\\n      .blocks1 {\\\\n        margin: 0;\\\\n      }\\\\n      #block1 {\\\\n        width: 100px;\\\\n        height: 200px;\\\\n      }\\\\n      @import url(\\\\\\"main.css\\\\\\");\\\\n    \\"
+      -17 RRText text=\\"\\\\n  \\"
+    -18 RRText text=\\"\\\\n  \\"
+    -19 BODY 
+      -20 RRText text=\\"\\\\n    \\"
+      -21 H1 
+        -22 RRText text=\\"This is a h1 heading\\"
+      -23 RRText text=\\"\\\\n    \\"
+      -24 H1 style=\\"font-size: 16px\\" 
+        -25 RRText text=\\"This is a h1 heading with styles\\"
+      -26 RRText text=\\"\\\\n    \\"
+      -27 DIV id=\\"block1\\" class=\\"blocks blocks1\\" 
+        -28 RRText text=\\"\\\\n      \\"
+        -29 DIV id=\\"block2\\" class=\\"blocks blocks1 :hover\\" 
+          -30 RRText text=\\"\\\\n        Text 1\\\\n        \\"
+          -31 DIV id=\\"block3\\" 
+            -32 RRText text=\\"\\\\n          \\"
+            -33 P 
+              -34 RRText text=\\"This is a paragraph\\"
+            -35 RRText text=\\"\\\\n          \\"
+            -36 BUTTON 
+              -37 RRText text=\\"button1\\"
+            -38 RRText text=\\"\\\\n        \\"
+          -39 RRText text=\\"\\\\n        Text 2\\\\n      \\"
+        -40 RRText text=\\"\\\\n      \\"
+        -41 IMG src=\\"somelink\\" alt=\\"This is an image\\" 
+        -42 RRText text=\\"\\\\n    \\"
+      -43 RRText text=\\"\\\\n  \\\\n\\\\n\\"
+"
+`;