{"_attachments":{},"_id":"domrec-core","_rev":"822995-61f27759c019b40f6f4d9d42","author":"","description":"Base package for recording and replaying DOM updates on web pages","dist-tags":{"latest":"0.2.0"},"license":"ISC","maintainers":[{"name":"junker","email":"junker@ganymed.uberspace.de"}],"name":"domrec-core","readme":"# DOMRec-Core\n\nDOMRec records and replays DOM updates to make lightweight, pixel-perfect screenshots and movies. Perfect for Web application demos.\n\nThis project is only possible due to the awesome groundwork by https://github.com/rocallahan in https://github.com/Pernosco/DOMRec. See his article: [DOM Recording For Web Application Demos](https://robert.ocallahan.org/2020/11/dom-recording-for-web-application-demos.html).\n\n## Ecosystem\n\nThe ability to record the DOM of a website makes this package very flexible and allows many other possibilites. There are a few tools that already built up on this:\n\n* [Puppeteer](https://github.com/Junkern/domrec-puppeteer): Record the DOM when using puppeteer. This makes it perfect for E2E tests, as it also works in headless mode, \n* [Playwright](https://github.com/Junkern/domrec-playwright): Record the DOM when using playwright. This makes it perfect for E2E tests, as it also works in headless mode, \n* [Firefox Extension](https://github.com/Junkern/domrec-firefox-extension): A small extension which allows you to easily use `domrec-core` to record DOM changes of any website.\n\n## Installation\n\n```sh\nnpm install --save domrec-core\n# or\nyarn add domrec-core\n```\n\nYou can find the two needed files (`recording.js` and `replay.js`) inside the `dist` folder.\n\n## Usage\n\nThe code basically consists of two parts: \n\n* `Recording` the DOM\n* And `replaying` an existing record\n\n### Recording\n\nTo start a recording, you have to pass an HTML node to the `DOMRecorder` class. You can also pass `document.body` in case you want to record the whole window.\n\nExample which only records everything inside a div with the id `content`: \n\n```html\n\n\n```\n\nIn most cases you want to start recording after the `DOMContentLoaded` event has fired.\n\nEnding a recording is easy:\n\n```js\nconst contents = window.recorder.stop();\ndocument.body.textContent = JSON.stringify(contents);\n```\n\n### Replaying\n\nUse the `DOMReplayManager` to setup and init the replay of a recording. You have to pass two parameters:\n\n* first parameter: The node you want to play the recording inside\n* second parameter: A stored recording\n\n```html\n\n
\n\n```\n\nIn most cases you want to add the `demo/domrec-replay.css` file with the `addReplayStylesheet` function, otherwise it will look really bad. Try it out ;)\n\n## Demo\n\n* Download this repository\n* Install all dependencies: `npm install`\n* Build the source code: `npm run build` (in case you want to have source-maps of better debugging, use `build:dev`)\n* Open the `demo/record-demo.html` in the browser and start recording.\n* Paste the finished recording below the `//// Paste your demo data text here.` inside `demo/replay-demo.html` and simply open `demo/replay-demo.html` \n\n## Data Structures\n\nThe recording produces an object with the following properties:\n\n* `initialState`: The initial state of the DOM when starting to record\n* `actions`: The DOM changes\n* `stylesheets`: The (external) stylesheets of the website when the recording started\n* `iframeStylesheets`: Contains the URL of stylesheets of iframes encountered during recording.\n* `height`: The height of the initial root node\n* `width`: The width of the initial root node","time":{"created":"2022-01-27T10:43:37.520Z","modified":"2022-01-27T10:43:37.520Z","0.0.1":"2020-11-26T23:48:16.503Z","0.0.2":"2020-11-27T11:36:32.422Z","0.1.0":"2020-11-27T18:17:24.319Z","0.2.0":"2020-11-28T23:21:01.875Z"},"versions":{"0.0.1":{"name":"domrec-core","version":"0.0.1","description":"Base package for recording and replaying DOM updates on web pages","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack"},"repository":{"type":"git","url":"git+https://github.com/Junkern/DOMRec.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/Junkern/DOMRec/issues"},"homepage":"https://github.com/Junkern/DOMRec#readme","devDependencies":{"ts-loader":"^8.0.11","typescript":"^4.1.2","webpack":"^5.7.0","webpack-cli":"^4.2.0"},"gitHead":"9e99365e31631b3c915ab609ccdb0bce1d1da9b0","_id":"domrec-core@0.0.1","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-YKRCiV9Ggh4hVAimOAJ6PzCbM2+IbsJ2SUzuiSeRbV8luDLhBWRg94szSfEx81aGQqaKDuWE1qGdoXkcW2fndg==","shasum":"aca1120aa85738f06670f16ddc01a62ba23e3023","tarball":"https://registry.npmmirror.com/domrec-core/-/domrec-core-0.0.1.tgz","fileCount":5,"unpackedSize":139311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwD7ACRA9TVsSAnZWagAA1wEP/2o+GOer5FsfollHDCeY\nsdRmgjFhk7b1uDRmw1R1pxJi94HKwcSiVeuDbYBbtHc8i3OhbBMdRwHVoo6f\n6+ot8f2ERI940NWf5s6umotPirURuuNHwrl6kwY1et/Ab77fICWxCxNLwdGe\nkj93GSU+Tj4ut3g/ZSJKTWERKPE39LHqxA870XheahbCKXHm5BdrjApSGojh\n9HS6fbw6Ym/zdOw3itF7Fl3hGZE/W9ABOhiC6QdNE82V4vLectUXxFnVqSj6\nOpz8P5sLZD/uun8OiRlwrXYh3wORqqIjYz61zzUsgwki19MuzKC9CRvLjmn+\nZrS8REyzvlPQ5RD6Dqj634Urn/kJcUA5WO68HaZEVkAp0fY+zgUPSQVMlvgQ\nZnj93JoyuU4OXf2QnjpDiSBQJ7cWU3VjH1vQ98k6ZfYQ27W/H1fD5SVo1vr7\nAEaA7FPlb699YMk6TXpay66fVtjEyz+CLvenHpZGkM1qfbljbf+sXnFSYLrw\nij9zowM5zrsUdlkn/nrlriEkTcGoS6lbROP/lrVwUGhcp6mh/YRuNnyfmM76\nTDXMBvLn9utRsYLPOQjoukpnzAyaRhmxvanfj7rOiv+CfrJrqn6ium3KerLN\nvrJcs6nf9lW8XvYIO3TDcz5S8ddMhPAMwng04up1PyeP+6B8kSUMleYxsQ8X\nhJzy\r\n=8pl6\r\n-----END PGP SIGNATURE-----\r\n","size":45068},"_npmUser":{"name":"junker","email":"junker@ganymed.uberspace.de"},"directories":{},"maintainers":[{"name":"junker","email":"junker@ganymed.uberspace.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/domrec-core_0.0.1_1606434496340_0.7204135467956843"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-26T19:56:50.715Z"},"0.0.2":{"name":"domrec-core","version":"0.0.2","description":"Base package for recording and replaying DOM updates on web pages","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build:dev":"webpack --config webpack.dev.js"},"repository":{"type":"git","url":"git+https://github.com/Junkern/DOMRec.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/Junkern/DOMRec/issues"},"homepage":"https://github.com/Junkern/DOMRec#readme","devDependencies":{"ts-loader":"^8.0.11","typescript":"^4.1.2","webpack":"^5.7.0","webpack-cli":"^4.2.0","webpack-merge":"^5.4.0"},"gitHead":"09207ea7204dfd987891eb1fbb816337cfc46050","_id":"domrec-core@0.0.2","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-nRwfK2aZGDWbUjMbSAjCgbv8nHgcIx0ZFJiCNy7bNLYOYcfwGRlY2RbZ5BBFmo1VIsbVPiV6HGrKhftZKNw+UA==","shasum":"77be9c694ee65d01cf4ca724e55a9ee72d7eb518","tarball":"https://registry.npmmirror.com/domrec-core/-/domrec-core-0.0.2.tgz","fileCount":5,"unpackedSize":25919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwOTACRA9TVsSAnZWagAATKYP/0YOGRJqRAzdNnMqhhdA\ncAOJK7Tsj9fv4cAFgLBKTbHE7WgN8LwkFT6mGA/8CBy4N7RnrIK9HU3FUr7m\nYzOyCaPPyegK1nNJncVk1Cf9G2xCVeo7vMk8sAuDhxc8+ER3+LYc87xe3o2x\nDuYSGrNzH7s3l37VKa0lQHE8akrOiRKOjMyZhVbAbMRNGDVhQImDy2tWx5CH\nfCmzgQL39dBL5be5z6xruESFHkNEdlaIUeJ5lQmFuddEIQI3k9iMfz2blk7V\nFtX0am/VQKPlzcjzHn3oUJszgMDsVBKPxMlpKT/Xu0D4TXxQMM1fzDKU3UjH\n0Sb7OFh331SO0DuZ4DvqcxfdGBafC29J06VKExSQzfGXjxWTtV60WMC+QU/k\nO0cgio4EhifO55A+zQk6umaTXid3Q8/PKabgHU+V6gb+dzZ1b1hdXpKXHz/c\ngAxjukBD9xZJqHfJANp01ufH+GRSoUDT2xwva11dfUNWYvOIQgppe+g25Htk\n3KeOnLt79AQeL1uwMFuFPuklpGC8WMr2OTxUNiCgr7NKMnsbZMg9ED7Iga+4\n6uZeE5e4lf8hYHVu7r8aR0W1dqyNw6E6YPBisrwyv9DkhzLAmv5Z/B55xxsW\nRqZ1c7yfNOU0Ly0nEbyQogaVcWrOcWAz65RkPbsegTqCX7eVzqBuOGaiAWqb\nsbUm\r\n=11Be\r\n-----END PGP SIGNATURE-----\r\n","size":9246},"_npmUser":{"name":"junker","email":"junker@ganymed.uberspace.de"},"directories":{},"maintainers":[{"name":"junker","email":"junker@ganymed.uberspace.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/domrec-core_0.0.2_1606476992299_0.29669488818742296"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-26T19:56:51.588Z"},"0.1.0":{"name":"domrec-core","version":"0.1.0","description":"Base package for recording and replaying DOM updates on web pages","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build:dev":"webpack --config webpack.dev.js"},"repository":{"type":"git","url":"git+https://github.com/Junkern/DOMRec.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/Junkern/DOMRec/issues"},"homepage":"https://github.com/Junkern/DOMRec#readme","devDependencies":{"ts-loader":"^8.0.11","typescript":"^4.1.2","webpack":"^5.7.0","webpack-cli":"^4.2.0","webpack-merge":"^5.4.0"},"gitHead":"663c978dcd7672640dd0cc3d8ee514f8997aa66b","_id":"domrec-core@0.1.0","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-kiPF9NIm9VY9NjSgOdwxOt9xLdH7YKlWHolmA52cVDN1JRVO7xyK4MTrdbtmiuwyG85tN4pYUfJs5MPylp7Prg==","shasum":"90f1169ee115ffde866c0cb01b84fcaf0474b480","tarball":"https://registry.npmmirror.com/domrec-core/-/domrec-core-0.1.0.tgz","fileCount":12,"unpackedSize":30507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwUK0CRA9TVsSAnZWagAA+L4P/j4JOg/auXUSAE34DCVm\nz0z05o3xEfYGzBmGrLuk/io3daJmLEUGwehR+JBwmOtSnDNEh3N9/N/GoejI\nU0ktStF58tjl6HylEbP6qhRPXyUs/0lzTmw+H6uWO9JeLonhgVRkg3cm5FCw\nKjJYL3qUT1tJxNBA1rxc0TFG83YqoV6ql2AZq783kyOq/MdY0NC4qGQK/ffb\nLN9wlo/n362Smfhg09eqzNzsrI8aeLtrF2jL1Vul4eXyrFuuzutZb8B/KrXJ\nXa6lqHayQxP92pNrB+g4/WCbvOW8uyf9D4KZSbhgLbYmzujwHQGAScZVO6fG\nr3029Nue4H2s5DT7QlUaCQeByKokcEwBzYhSvD/rvn2NRFo9tkpgJ16XzBV3\nr5JSEeUWuQEYdIck6lcX73Hf8dmIhIxoYUcZ+LQcKq6s2aLpd/9Yr8Wp18QL\nAhQKUlScmRQW+suZsJN0cnuyP++q8dTzWJ/7Cj82XpBLwSOMSSgDeaCYcQ7s\nnzJO4E+PmFXxk93y0ObclFxzbZeGdGcSIjMvWt/EZbYSUeET1okWaYnGD8I2\njDRzyA44hX4zRGWd7TruZi9s/KqR2WxR4rMJ/uC7cL7TV7cu51Ryw8Tqqvvz\nZTSDZbe1WFOB8NYfqtxK4umHfUfHH8ZfcDSnrALP+rO3SI2SUKTWbRAigriB\nk9nB\r\n=x9x+\r\n-----END PGP SIGNATURE-----\r\n","size":10722},"_npmUser":{"name":"junker","email":"junker@ganymed.uberspace.de"},"directories":{},"maintainers":[{"name":"junker","email":"junker@ganymed.uberspace.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/domrec-core_0.1.0_1606501044192_0.3562924232873621"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-26T19:56:52.519Z"},"0.2.0":{"name":"domrec-core","version":"0.2.0","description":"Base package for recording and replaying DOM updates on web pages","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build:dev":"webpack --config webpack.dev.js"},"repository":{"type":"git","url":"git+https://github.com/Junkern/DOMRec.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/Junkern/DOMRec/issues"},"homepage":"https://github.com/Junkern/DOMRec#readme","devDependencies":{"ts-loader":"^8.0.11","typescript":"^4.1.2","webpack":"^5.7.0","webpack-cli":"^4.2.0","webpack-merge":"^5.4.0"},"gitHead":"77fbf039c8f692d11f598e577587e81cbf087840","_id":"domrec-core@0.2.0","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-0LcfODOwqzXMYb4m7XLjkudOsy9BCFZ0zgfmAdMoAr7e6w2Xsfjz/VZooILaK/zuhJLAtMZH0Zh9S5sCsDK0oQ==","shasum":"74bf142cc4a7663cc5ed622ff3e8fcf60d1da484","tarball":"https://registry.npmmirror.com/domrec-core/-/domrec-core-0.2.0.tgz","fileCount":5,"unpackedSize":29666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwtteCRA9TVsSAnZWagAAxdwQAKSMk1hGe+YdiEHQJX6q\nY3WT7Av8qMkI8FR1NVRW41uVKM/dJl31OWtbrqHHWltO4TwzwZmZigNwZcWU\n/jYeicI5RmCSfnJX2mMwa65QUGKSZiVBu54cu99SOsNnzVv/n4XbOe0RFn8t\n2l79PknS716znrPIiyKdJ3q0yE8KdgQ9CpjE6mMVAFnqcLemmKk20krXrt25\nGXTYIMO4lbNyArcTY7R3UBZZhqWJnA8StysXA9GI1+6EAB3ZYWDUr4VZ40h1\nEykD1MuxGWj1YPpz5Xj4Jop6NYMQFhEAJNQ8F42NU2JAtBeXu5G7GSpBX8qh\nnhxnyzXnYwFVUe3hqRX/+PdrOZbCVJ/lHC4TyYApZhoH0ag7e+ibPlTqfVvJ\nBwSZszs7GIvTEXbYO9iTpH2FElNwuNgpzYz4RTmPL6IYdQVSXyVtUVVEjjvF\njwmcngW0Sv4WG0xgbLl7W/boHQkxrl1m2agxohB+pcfy1fM6jhusJdMvD25u\nUQw1ArxL5iGc8RU/1k2fsKLYXpjWA/j5bfJKwIzvg+UAcrLnlysx4aMlt9hz\nf4/ChyyoiYMz9bEmJGiW7ITTbM61bgg2Bb2c65czamX9zc7VjvM2jbKiwgmL\nqUC7IRWjPTC8E2RNSvRFvBeORJ00QopBIeRNnMf5nDRv31EBWOnEJnmrPD3n\nFhyt\r\n=Ki2c\r\n-----END PGP SIGNATURE-----\r\n","size":10532},"_npmUser":{"name":"junker","email":"junker@ganymed.uberspace.de"},"directories":{},"maintainers":[{"name":"junker","email":"junker@ganymed.uberspace.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/domrec-core_0.2.0_1606605661626_0.7397969071941175"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-26T19:56:53.437Z"}},"_source_registry_name":"default"}