{"_id":"@scullyio/scully-plugin-flash-prevention","_rev":"171-aee59f0d6fc8c98d6a205dca48316d38","name":"@scullyio/scully-plugin-flash-prevention","dist-tags":{"latest":"2.1.41","develop":"2.1.0-BETA.20211222124715888","next":"3.0.0-beta.1"},"versions":{"1.0.0-beta.0":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.0.0-beta.0","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","jsdom":"^16.2.2","rxjs":"^6.5.5","chalk":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.0"},"peerDependencies":{"@scullyio/scully":"*"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.0.0-beta.0","_nodeVersion":"13.14.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-h9QAxwaTwlevRD/G7qUAz4BASpVZ1GA+YahCvoXMzWv01AwNrQtPK0hwpqZ2ivSzFkKGblCGDBAwwwnCoKDHLQ==","shasum":"7631f2b54c4a5a44a3a819b158fe94a9d6e7036f","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.0.0-beta.0.tgz","fileCount":8,"unpackedSize":13791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEZuuCRA9TVsSAnZWagAA2DEP+wWs5vVPy1OHdA4/757u\nFchwRNYSL6gdrifcvAuM1NRP3G4wIfSCcBRk9jJ58xB07ZvUQduALbEvhnbu\nwIc7uua9Gv0+/J188XRB/0M4Fk0G4L6AgehWq50hdKb3CyBiMaxD+fbu0mks\nDt6SOnX6lptOiU1lH34O6YtRMbGFc6xily3IgCEK8xTUJcE+R0RVF3t9x5PJ\nIa/r/dh6Sy8Dq1zeO7av+x3oOdUIX2lsW7pfys7S7lJhPkSQ67npkt5EgnDP\njyZQ2ixzQNiAafISBuDinNlaA0GAvqJkKxlX7HJvjdQ/ZRN0ygvztCaEEp9a\nMXj+uq+DZFyI6OZSnzzUisWMeT7qgQrMvQsYEsRYBuHGsx613u9tkT3U4oYY\nCKxRSvozmu3hh/2yukbG0rm2b686B79rGZq7wbaHPBgKCzpXP2LURoVu4LD7\nUx0/b0UFP8V2pe7gRE8VZBFioV9OHXGFQMZFTXw1wqxeaKhc0m6p5FS9Hf+L\nj4braph56kDhhD9MwYIvgCpjIg1o3ibWj4vielJzPiJLEIM7SzXqwKR8V3RJ\nXGQPXebGrBY70mikyGZ3j5wEh84Xb8cBFBLbQv6O+Lhc5pihgwXjF+EKdTMJ\noczhLSVkAoEHLSBp8TtmkoUFGfijV/nTOcYXATJsrIPWFjCZLZBIWtMo46f4\nyktM\r\n=riks\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAo6bcq/xw5gw5yVHSrXHIhwOijSKJPX7Rg27UE+X/o5AiBke8bnyrie1EofrK7nTHbdy5F2vgnMcE8VWlDdK8xHxw=="}]},"maintainers":[{"name":"villanuevand","email":"andresvillanuevab@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"aaronfrost","email":"aaronfrost@gmail.com"}],"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.0.0-beta.0_1594989486233_0.9162673259702447"},"_hasShrinkwrap":false},"1.0.0":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.0.0","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"1.21.0","jsdom":"^16.4.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.0.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ZQliCDd1iu0zu9/ugPVBTMG7+s8qqoZ8sTva/j1zOp2wzwAHBfjQXnLg9PKHG6Dl7W+yfPD5PwbWPkCqCvlGNA==","shasum":"baff5b91fa16026b689c2dc4efdcbc408773b0c4","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.0.0.tgz","fileCount":8,"unpackedSize":14258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaheuCRA9TVsSAnZWagAA3EIP+wV2u6vA+Rs0MNHERSby\n/HDIhuRwWx2PpmgKbM/0y5S3sQqNrdRWHtSLiop3KmFEL9zXF3yVAM8DSSQc\n0mTSPV453qw+ycE141dYcoAFlMTk4/pBpdZNGIiU0KZ0Rk0Teo5Qw4FEfyAI\nRpuOsBcyTLExd1+7Afhi+07kd2S7H/XPANEuEbpxqElZ8KZZ9y+GqQp2K4mH\nvIY5OnDogiZwKt5epd7oLD8ARv1kcg76XoBYrIDs5pDYxxtQymBtRD2Gq7ot\n+4UchdhQds64kr04CmDxA0i46UYL/QujoaKJDDx82mFNWZUT0olz+JYPoXQX\n9rJpi/e+CC7ZK6HsCtIMU/pgIoFVVfS5H8GGhwR++58gELMRAT9COHHd+bGk\nmXWrGnqPEiRwcEoDIBQ4Anza+aRBFofNZf3ibWuDTgmQNM5dqCW/TC/RuG/c\nBlJ1qlNcriOmr1kbWkaQB1XETrieQhjltJsZlqd/EAMMaGcPzjaY3v3U0rZg\nByghursZdftAaFys8ucidTAYDMRzzmgf6iCxYD9hz3LhrLiqCNO+FXoxZTrb\nMamdmO8M3qnyeNkKiKE0HQEZEjRu/YulJmiKxGcy6RVga5DgfkuvehbV44Zy\ne42H6xe9W698plOq81eCZaWPnQmK0p7PBAhybrmVRQI7vS4pZWCCvuDQy6fR\njsos\r\n=6Q6B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxxkmWEMESMzAiQD5fus6IJ0Wc6cM9x2KW2jyXFQmGvAiEApmk3q+3yTEC72p4SDA3s3y9vYDPplntn3CMNqWldP5s="}]},"maintainers":[{"name":"villanuevand","email":"andresvillanuevab@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"aaronfrost","email":"aaronfrost@gmail.com"}],"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.0.0_1600788398137_0.7212580826012913"},"_hasShrinkwrap":false},"1.0.0-BETA.143109":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.0.0-BETA.143109","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"1.21.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.0.0-BETA.143109","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-l0F7AJO9Jp0VNbBgO/iXFQcd9L5bGVsUl2F3k9p6SzSDAW4JxL5+gYo5TmLhHHO3U/NWpnJR2zX72NpoZXMH2w==","shasum":"7566b8d0724be83d4301c8ce8b09a523c0b06bcd","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.0.0-BETA.143109.tgz","fileCount":8,"unpackedSize":14358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHAUyCRA9TVsSAnZWagAAEgwQAICnWBLd+oZ2oWmYmZth\nINKNv+SqtFC0yNUbcYqKfqGPdPsd3fUhM/mzTwhUtt3+DJ8dmyMZ8sAf0cMY\nd+188lwahFvbAsHVsYeyxnLlaJxJkHz77rnm2Lp/eA/+9w7a1eU6lxegIoev\nAfhtHAHXb6QnW061P2JaMp7v41FgC68Ct8mVIipD+vuxw77PX4bWngkqDN8h\nrJICbeFEvJ2rLRsRSG9IjAw6u49I6TNW9pXkZHQA5uB8QLaPd28Vy4tFpVIL\nv81R1921Oy9k9qg4XvKrTWaYrXUPpKnQDJVr9IHAzlxtXFNe5vfzFDgGn10Z\nz6KTTEi8YYjEY8iCcPMa8UeqWU+wFwh1oRcBJ0/aW8AVlneUH2MBPdeSkp76\nlI8Pu9VeuUiHJNo4G3eW0BPK/27GULIiECuNnKTo6DIAjlVbCz6UAlMbbRGy\nhym2BrySPsmxEP4UNtG5ZgIY1CWc/w2Vdvnat5L9fy8txUJ0noxYzpI2Emjm\ng3ieb7MhZDX2dGVTFN2d5v6+w1uoC48ZbusOPewhnWtd/1aW9eyN4ps5kygc\nJewcq7JPeBCtJMhWk1f6TYV9/uRXkx08vSPqXQQFvUsPIf80iHI2jr8Xo2Dn\ntGoYhTj2lPKEZ5BIF9oMzNIkN7mcX2JGUq0KLbYP9H7lwlJXREpOvxWON68Z\nDfYD\r\n=gzZL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5k3PQwP7Ebf9kKV5QH77VMqf2g8zJy8Z4Tn2v3ouNpgIgGTecPlr+52Q957LbMgNZln/YoEAST8u5gl03M8pJY1M="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.0.0-BETA.143109_1612449074123_0.4934665437287462"},"_hasShrinkwrap":false},"1.0.0-BETA.150646":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.0.0-BETA.150646","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"1.21.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.0.0-BETA.150646","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-jVJOKwYI543h1dQmT5pv0ZnRdJ6YM8u6IRUEHWmY5WuoIeqd3HTpCFV8R8pownsaIrXbFTMkMwQE2M3OBMDMPA==","shasum":"f4c845e6bd58c4b49caace075a35c27545e7dca8","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.0.0-BETA.150646.tgz","fileCount":8,"unpackedSize":14358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHA2QCRA9TVsSAnZWagAAbQMP/2qnwMAQnEedX8XqtECN\nctH7HRoYBmNAvjwEPi3ewoYwFJxzYvGWEAnXOCqyXlIwu3+t2rLkw7HepB8J\no9EFLZpuLQIC1dMpHWXj07dOVnOH+4GevoRjpl/wLYFVtzZW0bD56rxURE8j\nwOAiQbMS0Mb4ygL9g2q1wY19/Wd/AeKUTS6HTU98zv3/t0haB2yOCEFTOJdy\nhjwIC3bvA0fgyRcEMjmDZSpOwTGGYJUatvvMtBPtPumCmaD5B5Muu/9K+ahK\nBEOWKkQfQylAWNX5fPJi1HL3r8JX9MEMh71fTQJSUoPmUe/sonSSZZGf/PiF\n6AiLBf1ObNsC4GJxiLBkbAuCGGV6XNC7IdxhVmjJ/KqYYKpsFG0uCxx682y5\n5Ow4H4FE4XTEZXc16slo4s+rmmji0UpYx3ZanE6QX6Z4mYEZTTXVt6B4Ym1E\n33lMV65DQk0DYm/wqO/rrZgMoKO9p5IHTS6jExumcBqIn/mNi/8tTFTt9EWm\nibcOJZH1qAqTnb9T4MQjTyikY7/cHVZWtzD9uhmdXZWJKUJ6dgGj5c0cMAif\nwfB9uF+eX38xiAXgAdR3HUNtFMcKTLRLmE1IzcsuDRQ7m4W0f0yj4lxbrt2f\nOhV1msDHTvSjWQaScsJ2IPlXrCyAxmoz3Su0xsf7R+QLv9/i139C4RieEn3y\nVPxx\r\n=nJ03\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOFJ2xQu9jX/ppokCPejx9S5NyzujwyubPi9xfOWVQ6AiEAtPHedh2Nfl4zlWJ/Ih2EQXL4lRy41k3sQBHrFlMYc8I="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.0.0-BETA.150646_1612451215639_0.9794128302692329"},"_hasShrinkwrap":false},"1.0.0-BETA.120021":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.0.0-BETA.120021","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"1.21.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.0.0-BETA.120021","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-nmJM/VAJRq4GW2Ugvx30V41k5EhN3q4xq53BQfcKJMwESvu+u9SiE2x4PicQgmq4YNm8zFZwboZrsmw151YPFA==","shasum":"f37d7aeb95398ff3e0090628fcf6b15b4103df50","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.0.0-BETA.120021.tgz","fileCount":8,"unpackedSize":14364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJ79ZCRA9TVsSAnZWagAAQG0P/1nMV+UhIjbpuUMQWyt+\nNJMSPSjvHSLgQiSTUIfyE2cNUOx7fNO5IHOC5hOmUBACGkTqIPVLjX7YZNDi\n6reqGGcMk2XccC9T2ei25WsANKXyV9vXZmGvpXJ1WT98cq49do6Q/rNprKFs\n5MGbeX+5Q/mHnG294PchWiVlWXk2DIAlKM9NkerpGCL/b7nHZDHQxZM0qRTN\nLVz+BgolWq7fUWEZGoEta58YDBJXlGww4xW0kmggLtxej/I4ag/VECFw53f1\nt/bR47zmGChi0JOa9lsniLhMUgNN2trJ+iKFgETYxw5mGkVvScdYxZ3oW+xZ\nBoIciKKYDZjPEcESHhgdpH7h6wD7xWxozdBx2wITyDWHIzfVBGLrj4epZ+dy\noAGGTPQnXplHJakEyn11TtsppNlMqSuZTL/YMnAjn3CKMlQAcpUwM6QKPjte\n5rbKz+RGv0D8bRr1t+mv+TI8u+U6Qg8zcIJvxT4cw74UQTjhGsE/11v47qU6\nZZ9riaPckWCPH0yvegDpJODq5uCTweVirifGGhQNm20G/K5rpqy1EGoVakpF\n263Qh48qk7cTlB713A9leFTpu7mtSVf6GkClKZDAR/+ltSu7eHF6KI5uMvBo\nPcoIGQJmq7NAErSCudV42T7ABcEhS/oaNZsGBwyEFuK17jMqO5A02+kusWPD\nz7Pa\r\n=aCiR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+4b9cE/lBGVvrM5BrBmHUwZFs2UEQyl0Lo44lf6v2YAiBN71IYZobL3QZWSjoi8xzKUz+g5eEDDFqbBtyOkXkiHQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.0.0-BETA.120021_1613217625504_0.8453522136553304"},"_hasShrinkwrap":false},"1.0.0-BETA.93934":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.0.0-BETA.93934","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"1.21.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.0.0-BETA.93934","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-wyNzM4uK/AlnWHQ2qPmiKs7ZzhWFWid0sDHJqm28Sblz1cTchGKQiAracU5tLSTAFHqXtauWRCLtbrdkuN887g==","shasum":"e4edb30acea082c53d36f7c995ad5991b215442d","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.0.0-BETA.93934.tgz","fileCount":8,"unpackedSize":14371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgK5LhCRA9TVsSAnZWagAAjLcP/1tFkrWSm5I+rlm0HDk3\nYtHFpawM3+G6V9KbiwlEFwPSmoEKopsGOe1T8ok9KPXnKlwHaREMQJ3dKsNg\n5Le76S7QYl6BegdMZseZZ8J1x4nvCbJWx2f9E2c1mVETF79Be3CQgXXWe44x\nICxoBHt6/lbXkYlX56LhxClsJD/Ii8gwUIYD0bUac524AdqyiQuVL0V4p8h0\nj8vQCVdmxpHJsatdZtBiYid+ype3p6TRBRmecZ9/Sye5ZnGsR4wNVLkDGb6M\n2gC3sxWLURyd18rOYjZvOxSd9MmVL8IUTup2xJ2rF/zr9M4GBn/jfxP+/fTz\n6Wns6Z6ucP6uV5t4T/BJtBDE8hM4y7xyAOES4GbOern2KEk5d7yvrtUsZnQ+\n1fzDPJwAYbQaMXf47zOjUYMq7Y4cQL96WLnx72u+D9+H1MGzhGkJgErdSy5U\nFXC+2DsoobUFSCQ+ZdmbRvo0rBTMosNDyA89nNN/mZ9T6fJh02708d2Bbnte\nEV85VYIlAx99hdI1CwkDkI1VxjXQ+ueTP4/4rRptDAdOWjNjYxPAfff2+xtI\n0hBbeGU6+KbBtdFXh02fjmOvhOKqDRf24axr7SK8Z22A9+VI84ZOX0G+aKlu\np8ME5IFyznMOJjiHwL2flPahL1LYrSnoxMGuLu6X0kXmIUONzsYM/xmcAPhS\n3vuZ\r\n=aNIc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA73aSvOahxfcGNvTatbwFOUT8zTEYGJ/caaTBwh0KT5AiEAyaWTc67zEbjNdP2KrgsQVFAoCtGO0Nkb1bVhs8kxUH4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.0.0-BETA.93934_1613468384527_0.5548285628208609"},"_hasShrinkwrap":false},"1.1.0":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.0","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"1.21.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.0","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-UltRrIXBYobGQNtrpqjZQ2862QjQKuxyLTrnm5fRN3eIeF23WFIWT6YjFp/2DBR2y5mRiXyKkPJ3049yo1s8TA==","shasum":"1c5303f9dc0874903f789e8a6fbafe46a6f69e00","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.0.tgz","fileCount":8,"unpackedSize":14359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM8DQCRA9TVsSAnZWagAA0t8P/i8RvYGUgNv54oeIEhSc\nPx5Vx/idmDwnU+BMoG+I+EKT6Mu5YWkcxjE4I15w0mGHG69J6xgsmjZqLeo+\nXnmlpiv4C8P+A7+CORD2IaccVp5ys2IrHnukENMN34tI7N7Iv1a8qZZc/GaG\n4cMHhw0kZVnr32ytuiWjPhF9Lb3NDSpxfPy3z06fyY7HLALH30GpZodFxWJw\nm7oWh2V0U1DljS+M9FNc6BV+zV5GTbBJTDrEqjiVaPMjGjp5iTF2KAGOMhPf\nLjoMPpp/oYJJiqVgH59cKe/xC8R6Gn4IXAwdsr6wS7Q4KcmbS4utHxAoYjoN\nRohZV1Go0XIbBbj3TZQWkDn0u7JaeRUFGLgNt87laccGuEN4iSOgTMmfdweo\nbv7xW2IdABXYSmRk4ioq32UKpn7G3O5IXkW4OLKPgmyH5insixzukr5WUzMv\nn8WqsKUbYS4ENRWLAK6dFEIXN7lTzkQN8wJp9+wrqG9akpcvdp/d9x/EGoan\n4dLWlnPdvBioP2rw91nfh2i8Ws5+0crkVp9wrvcj6C6QzyYIX224lo5zLPWc\nDSj+x+ljC4s6ejl0UNHF9jsrg3L9pstX95Wmo/O65sh0uP0UHwRJWkMKlgF/\nCl22JxWNOxogoimEyyYJMJbpuQbF1mtFwjgLorEYENbA5KL5wvub6lFi/dsw\nBt/i\r\n=oO6q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0RhoBjM77HSSgFfxvz8EASJIsiuHrF5wy7cHiT1QzgQIhAJFq76A+vLCU8t4ncyQ++EAXi34EhguP4l9iAhA52yIa"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.0_1614004432086_0.8689046897163542"},"_hasShrinkwrap":false},"1.1.0-BETA.82744":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.0-BETA.82744","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.0-BETA.82744","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-u3D7yL1hIXj658kJcQjXZ2Q0KargGN5lZTBV9xlyW1Fn0APMgYp8azepABeI6OG8NWZrsVNdm/f1i212UXr1zA==","shasum":"3c6a84b4d48bb177cec6996978ff964a6ce4aa8c","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.0-BETA.82744.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPzpxCRA9TVsSAnZWagAA4H4QAJvaWrztMLF82Fwzzfzk\nCe4nna98/9kGFvIBaP4fyVU62FhKRysHKF3pX9efuTFCO/GwDAqyneZStX5R\nFu5CYOQ7gKKOSij+JXl24MJ5g8Q3Lgyfw3kSlHOvVhX3BEr34BPYmarwHFr6\n0f80PPMxkKbeKOlebw+cpTV+K5mmHnuDYhpq9PZHerqG6C+ZIKesFhKnLHqR\n8B1Bs4dbJ5q6znBWLM3fQVUndHMIeUr0rILBOJY8Sf+yKgoypWEc0IEtth8a\nrBVawQdGh63jAQo5RmWRNU3j/MH0XkewRnnSL+rqh0yBzX5nYbpP/+dJKAuG\nOzeLRqZacH705vunxNgezsUrNkZsBqIIaV9au0oC+zjI0N9LvoMSOENaYsjD\n4lFNK1we74pk3BJM53XfRW1M1OK8/wxCxuyky7UQJvWc1tVXatP7ehcwH4M1\nSthr86hfjyFW65qyWWB8v2/s8G05zTdokTkLr2iVrcKaYZ8ssAQRZxPrRkkj\ndPCwJzWE/RjffH/p3QH7slsOzGY3k7gyx4G/Dyk3NBU5zvHV+DtAvft8D6gF\nlr44zNcW5yRe0xCSfKFNL1ivkKx/O8bmHSreHU07/wkndJJWJfPpsd8f5QP0\nS1CpQUHFaTrXvzI2/Go9ekHO2SlA12rhr0dzu23QbjbiQO8pxP3k8ggpUMPh\nBJ+0\r\n=vVaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjUEDzS3FZkf7tyU4iQRvwpi7s9GNWyp3rSyWB8+xL7AiEA+/zT2XB1PW/fNsOieYd6/2k9lSGPB97U9U7vAf6PgyY="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.0-BETA.82744_1614756464937_0.4250852453530869"},"_hasShrinkwrap":false},"1.1.1":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-HjlAzslRyxB5WkQEyswcdrSTjKvoeVr9zt28SK6XphwyNkbgNVzvHzYd5WNVF3RW8N/UOgVcnvNxC4jPPUlZgw==","shasum":"bb782a86b0533ef262cd4d2100e55af08d583b50","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1.tgz","fileCount":8,"unpackedSize":14360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZGpuCRA9TVsSAnZWagAAdU4P/04EESpr1rV9eAaiHLuK\nWJ9pyy/wBzM0Rr3uwzo0xqyKyDybQo/qv/eh0IMncIcezAVKDFNGSLuG9BJF\nSNkbRu06bsGXrUoIbgztQKuhKbOmTLb/tqw2SN3E1zkPxbRikf10aySctbe1\nlkEOUOTWtDT++5W5z5dNmK9xfRM7bAuT3+7Ilwb67Tcrh2m5SAUyvq4ppSUE\nSl3nXHs4wfsWYbFBZE38C7YqUhQvTwGG3a200UVV0h7atwTnybepACTTeXFM\ngx5GiZzj4w28Hwr/48Qi+ih2TquMDfnsLCFKjuDMs+vSxt4FI+R9uMdh+uI2\nntbHQwLeYYBUVpPHAxRH2xtbr/cvKzZg5BFHyunbVEAjRFDMVFZ7Yduqj9zB\nU7PK2JC3Ra2VQeLjoA5pYeSn48HKLT+F7LjVDjBxBjSHzBUflPjeeJ7TaKcp\nWO3XVjmrggOXE7zeFTHu80PTCsXXHMT5UKMeQux0cuAWSjlQO++l9bC8rGYc\nHe87MPm/aMfSdbaNw4MLeFwKn1lPP0GapKZxzSO2McofHlDZkgPc8BgH5dTZ\nTZWScYSOMiyTApVKs/cdthKl05LxpqupT9YXbX9+5bvY3gPqCovYGjir8q8n\nwJVc5gf7oD4UekkxI6+DnYrlzokietT9ltmp+nkQZTSaAmuznuTXkZFGSQ+Q\nWQcy\r\n=eq4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrlXKxI5pcs59IAGiIvUPRi5QJ3sny0382iveIDEHsFAiEA9q6wH6QrWXGVowSKypDqDn7usUsnp/CnVRn378zr/XU="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1_1617193581660_0.8392039923245802"},"_hasShrinkwrap":false},"1.1.1-BETA.123900":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.123900","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.123900","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-mXVPfuDPQftqenCMwnLXoRDXKHvYQu4vdj41ELWufTVzsU9YT4ugABgefX+JRet4sQoJHCUlyfonLxgeQcY6CA==","shasum":"3eba5de02709cc6bd3238b135070d30363facb61","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.123900.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZG1rCRA9TVsSAnZWagAAxrgP+gK6vIalev5tIt5DWGg4\nKVaLAt+yQfB1zIOaRU6JDxgGocZJ4TIuZ84q6ieSAzhX9B3pNOfqI43B+J5/\nWEwqj4ZCiOgkTj93NEYr2wg0+XQPLltez7EUIcxOsLh7PfYN8ZCOS3JBFTLk\nnTs/ClIsQUI+rtF8CSnC7OLzknAcSoVrI5sxYcuQLoVHPSKuQapydVFjBzka\niUuAoxy6LdjBMsSLvnaxa/PuTtewQrlQTOAVmILYgj6jsEGkOvWFuZaggURH\nNu3p+Z21WN8kbv/GjAgR89inkd85onyCgopsiLoJetWxA0WSiEsQAXufXDde\nJ74KF0aI3v4J6k4usPEM/5u/547ORXrvK4BapVMRRLNhpu/GO/FDjTNzZ30R\ntiTpqfjL+YWRQK08q5kXqLbVbfFRwLibO8NscwaM6EKa/E6hpkjMZrPgm273\n7W2DL+YxUyXBF/zNtBPjx7NdwkxNcPVg8gqvZX1DddyBu+HIA/Q7x/5qWljS\nwuRW93Sz5jNL52ezbhyZKAeg3x3cAh9czMu4IjxT+SDzTmxv6/Yi9pYMq67q\nHZPhLKQ6zHTW6iqvuADw1MJ8G1mfZR1PHW2s3i/zGlhA2QTTMiQRTMd8uo/K\n+/bRPZDQY1f6CsvRpK2RiALpqJr3YazXhVm3gBp/RL6DEDjonKkYBt/kw2wC\nJgeq\r\n=6aae\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2PNluD8KgtMotoLwjS/bYUapxSm2SfOjkvgEAQTL2mAiEA6Ye7E/GbFRB0MiXYXOwhgMOvvMnzv5iAR9WpKCRpX1U="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.123900_1617194347172_0.5884858546275848"},"_hasShrinkwrap":false},"1.1.1-BETA.110800":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.110800","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.110800","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-SOizGBdW5A9HI4KgUY+n7ZqNzAzInPxIGXhNZp4hOQX1PdlflYjHfWvxNCRTwJaxQxQBI5y8o9dHRJeqUFqtgQ==","shasum":"704521be053dd21bc5fa2c222632e96f2b11e8cf","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.110800.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgau+aCRA9TVsSAnZWagAAScMQAJX94AiZVMoGBkeIv76Q\nb5R/2JN3JKrxuCE5QSrBhk0nxdvyzEEDRmsYaBJkFT6UstyRF21PjQqgK4w+\n2evqJnQM/V0DhEz7AbwKHr1lZ/+Gkpj0CfhQN3obzdduu36/EQlGH9l/2JZK\nTOBpdmUd0i8zDGnJedfu93Y0UvCjQXr5dCqjg8nRlIYHlDWWNYL/r31LlkfC\nhlfRjjhJ2Vl69ymJ0JruoSIy9O5AwLWCU+9n40I6/UxzCtLOrRudMsWsi8d4\no43126YzRRa8RMLtcxTHVEwIcu5GJVSFiY1dNc+RhK4kSu2uo47RdS0aVY2e\ndg5t7WD+C6Bg8qzizVES9KHxgI+oCaUr4SjtzJM4QnGfhqhR2bRA0UxPLc8J\nF7xhaoXRM02HA38YEB9Cwwsw3ZI0g7XffmttUhuonSlgEt2vcdLEjw36Bcwe\n40GUXFC6lY6kQrJV5xjRuXTtAMQ0Mgrk55j3+d++77BezLGmadlJYlemMao9\n/Lizob3kWo19MWgAr0lDfCKIPJVuL5qrg2KtlQ0rhegsGyDPKrtq5iLZ2ic4\nho2B2Isy/TRiBdJYBmtmTxwSt5nuHoQ4unPo4R0YtjYHZEoALG5O0tX12SnS\ne/f8G368xjYB7YWNdoSSDTYMd1Oxpu+rcXMUILEMswvU4CpdiJF5UNptvY6J\nrBmf\r\n=7vO/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQyLeeZy64bM2tdpNTUNXWXSwJsgsjC6kZEUFKYcUbTAiBxGxlr+MSDqaUbU/1BzM/w7ABU+GUp17cWYf/i06xU1Q=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.110800_1617620890277_0.5327530885071436"},"_hasShrinkwrap":false},"1.1.1-BETA.110813":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.110813","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.110813","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JCa/dUUCSimXtXD9sHPnEP6wSnvDWN2/74F4OOdGb7Zku18vhC8VdOPNPKKvR/ZiJisbV3Wv/llHB55AUdJExQ==","shasum":"6d5e29bcce90d528899840ec730c30c2df846ddb","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.110813.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgau+jCRA9TVsSAnZWagAAu2EP/3ulT8r+d5ruvskjwFJw\nCAXj/jln59NRoV2P0kgbfh8vTP6N1JRnJzDGv2FMHPj/X+f3zoIad5/5ULkX\nID6XQXB2g5vQqBYM43sI2fFtDgoZtAHXGvGhYJoGiIu+pKjajbDDNFI/wKei\n7AShaCGiwNEm+fONDQyhf7+Z9nAJKZ+eOqlv/kzbgNZFGJxze6V/ARfKRh1K\nJvqo7Z5db1yV0UisCP/YOQpbo24gLfteWBkQofRWByfCUgK3fVz+DR8ovMjg\nJ9JVVQOPxujufrIk11F2i1RjoeLCDq3UaX4/FIXu3Jic1Ah+5owjaVQk/bEd\ntCAj7lQOJnBlaL0f1pg2shSjqFtrYgwSSkgHqLjLemdb3LDrTk1Rvl+nnBak\n2Dbp0okYDqq7HF5KbnZWB1+RxwJSgCozvXyQ71XD5Q3hqRTukQ3rFxxKmnFr\nZv0aDQncRgXBOBgMRZFJWPPnDz/iSjm4gV9cFDNBRa2QK9NZR2PXXZVl2WDz\nSXZORUeMaKgTtcCvE0HztQgkShhXNFJkSqxpfqdaw1n/CCHfwcJi8VLvegQu\nmSFJ6jZhbnX/vnARYp1Wi5RyHBPJzP4HT+mLVQoUx6xAMhErsCK2kH3OmP6L\nZMGHJMUlF0Ht+Af3gAOL+06BDmOZYx+cx3LHZLUk8UtRVrhUIbVnmbLDNCvr\nMlr8\r\n=tCP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPsnehnbzaRKCsuvikDc+DWTnDfKTnSNwycC/NjoUNxwIhAOEW+YdLsdCpbNE3/fHxz0GWBPrtR8Dwff25Fa5ifh/9"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.110813_1617620899107_0.07485332185721183"},"_hasShrinkwrap":false},"1.1.1-BETA.142926":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.142926","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.142926","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sH5ln0tJJDnOIusuQLH9LyNlTr4Vkl6VZe298Y0hRFabmbzA5um7cR39+L6toIDbkUYRosCwvg+PfRxEhEqJAA==","shasum":"4ec721af706493bfa70a5830f5dffc66bf30858c","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.142926.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbcHMCRA9TVsSAnZWagAAiLQP/AwVjvw51PF812FRitmg\noEk1X+SPhm1eEIQE5D1purjFtEM+vHYDqhK0xWT0c6lEK8K3hm6+od726mYo\n1BNXtyn355pQgzsymBNz0VPT7y5I/qQ0+/B06lJA0BO0m52zSnj46dMmI/Ig\niASWgUidY7+37vrcg9VwNAWdbA4YRV/5BT70qaIRovAnWRKSzkkTGyZytgql\nh5gIGpXaGygk7VRmJWVbdMXceVlRs+s0hr20PRnQbpBqdpmPzcsOIFBJF4YN\nuA4arJVH3YxaGormjEgYA5H5aVrDpYW4FHdi6XOpjsQXbflFKCWmE1wRn9wq\nKMxTt60JmpMBHxqAlVm04zjOhH4Z2j5bv8MZWt+Tj4bvmwgLkhuX3td3GpIF\nwYqhlTW/XkiBc4Xx1RFgH6ovDWHPeHZ4e4YRqlJLyo3y2q0yOKPJZmXezrJV\nkyYZhwyv7HQRET8Lk50eOvYTa89uabu1xmkcd7GaqSEtDWdAK+bNB2LnBxDT\nyduDDsP9BUMPYlUxGQALJxHQm/GkwvLj8owDcG6PipWntKj1OgDLiiYV178g\nw3bkfodTCneXvAefGe0SJF4UFgdCD+4Xo4tJYeLZqiAe8RmMBxY1jy1p4HMF\nILzKnW5uvC6AkLq4WjKMW66yZGiA9uFJlxDWTiI2xh46HhEzRj0wGVmmIHpg\ndhQY\r\n=SiU5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUyIWPS9DEb2WjvZfSN549rwBEEOmiflThMGfZL4DYtAiEAgImw4nDhujIhDRn5ZYsVWMOvVV+tFXv0w7F9uPSu018="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.142926_1617805771926_0.9680515842521396"},"_hasShrinkwrap":false},"1.1.1-BETA.152513":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.152513","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.152513","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-xlxlT5ziPhRNlJpN9NITDauRB7g/4sY7cM/jY1e00tUWiHOuciIGk3GbyKdOChcBx8MvVIOxm+drHaYLdAVidA==","shasum":"9c966990ebf4c9bd73c71b5ed938f721aa7c5e67","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.152513.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfaDfCRA9TVsSAnZWagAA8qwP/1RU6gj42rv4Usu7EIDU\nrq4oBxsh2UN9X2uYCYYTFdBNkXT9Fv9FTeD/uRiwlL1lAXcs/Ab3dMCsUQ/c\n+iLkEK4Rpl+U4n439R8wUDWkOGEIM4SUpnR2EcUl8faSjifvdX3QNdm6L7Vy\nCFLfuFFc2agQeVi+SWWaiV6CQlu64/gTS2AQGhX0r4GxCZtUbnBEYerh26v8\nh+doMLWOU3qNHR7gN61Vh9t65hUMbrmU631TnJSHY8puK48rUDnm2GgyXFXc\nSIuyxgyvaGsGqm1nWQBULwSxZ0u3hsphetly7Ou6thwNM27UGnOoK0bXaNRQ\nwJtsMB5nhWtLxCCNV2FLC1IHTxVRY92UJ3Xo9+TCT384qjIMYrdEWMtVFAxg\nJUM0feq1livi6nIP2JvN1No/mUQqh6DI2ZRHBAP7Mc25PGNmy+wZBoiVJ79s\nxyMTqzS550vn9LTgmM6zxXRkT0klkVHoL5s0B8+pomTq0S9usWtLr9Usg1OM\nVppikA+bBQT1THrZuSnN7vPqZgur5j8yc32uPJ5Bl5ycXekCH7Wq11WFP7GM\n6OytdI2LIcrXk7XmFZ29gwFdJcIxfzOrtWRIPZA78ovufZYfLMsjE+gyhXr3\nr1j8OKZctMtbDistz5M65pu7JcIcIjgVgNXyORHUugZXXfVw1sDuG700FXHk\nXs59\r\n=1gKa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4xurAKU4KCDRPh44Ln1n/+lvCUx3mnDA2VmkpwthnFAiA8+2q7eF9X15JlbmHUWVxtyvii4MpoKteRtf1qC4+sVQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.152513_1618845919032_0.7304565134019769"},"_hasShrinkwrap":false},"1.1.1-BETA.81821":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.81821","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.81821","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-xWC9RqR6GLwTKyZKvMUZd0/nYSd/KIaA9UcGDTdVPWRZ+CeqIW+d1xk3cIiC3r3Lfjh9jpWCbHTFL88Z2Jw1CQ==","shasum":"e20da10c8fa5d2aa27e74e03bacb2a0650c95aa9","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.81821.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf9/VCRA9TVsSAnZWagAAePsQAJEHtb5G5vuEF5euVbBw\ny3IC6mSY+OI9IsSnKJy6ht4BNY/yTIRkOczhgpIDG44clixmNJ6/Dl9zN8hM\nH7VIr2LSgp0Tds3MqnZdYUMfm98ZJSNHsbbd+QXBiIMLyQju7wAUgxWV1Boy\n60ZUYqqRC66XDna/n/Wy8wE8wHL0zAuMHBo0Wmq0a0kEABuvs/IpoJcQm2m/\nzUigC+WTJxFv41xHGN65UTFZkOMgdMRocU0i7hrndaDLVjPMUIPdQd/emuoo\ncoXmMJ2BtUafhGXCJXtnsdA2OBCta/xhVlYE1iMz6tqfsUNe1hb8dsn/29Gd\nKItZyx3hlqu9nnmm0HkfpZvRWzag/EZvv0DpSNYCyphNrYUQ7EfuRbjEr/Xv\nCssbiV/qWE3ToeplUns2uEBXwX2etbVI4ql2qN97jIdQr7KGx+0fnoV+dw5D\nQw5xa8+kRxtRx6IDvUSZdXWH9z3oE5YhqCqnG0xMHlJejD4FNENVIvKZ2kMx\n8i7u1cFGYd9chYBsn27kiEwaJM6R7xXPRBq2Ug58+bknpIMihOglwwEJByQh\nCXIIuF2SGwZJFXXiCsm6Dmo/HebGBevimL1DY0FdwCC1x/amPFULtEAb0krP\nRHW9ZK0DbsHsaE834DICLrOh8ROA3G5uz59li+tlTLCScv10WBD3BGiv1LU+\nDudS\r\n=rWrn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1D0kkTKIvr/iqvhn2ZZofjmPcOJ6Ev4fhLNkzD0uYWQIhAOd73AQGkmm6qgNhcPNAsos9pEbvICkexJKQtmY35tbs"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.81821_1618993109184_0.947107228490665"},"_hasShrinkwrap":false},"1.1.1-BETA.83250":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.83250","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.83250","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-ewZhnp1Ys/PHswQHYSXnwyvWPzy7zHPVjugj3t6Tr3KW3OzZz3L8Kr3Yq8aH9dAKe5W14UVGObMh/l0ED18Y1A==","shasum":"7e2c5aabde1f429ec224ce55766414cef0ff2c0d","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.83250.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf+M6CRA9TVsSAnZWagAAXH0QAI7ysM8Qc1VpinUT6mOA\nmRfsZzKq17CyExAtIdToc0YBpwCJbhNIsz2Xib/o+8fgFhMgP4pJBnjq7PAb\nrCdCaDmKZQ8IXUwNBG4HCKtmasAT8mYhAsZJ1b6RyT8G/7utdNPafn+mu+Xd\nO4IXxsJNQZ3ahKgUWyChxx+YXqXawhLonJk9BAvrQUKE5q3bot9rtXunBr9C\n0bcMQZLz2U2Vg5RDm2iLaLsbrnL8l0VJdmH/8TPKx9tacKE42gnMKUAgo64J\nK0u3wyesYhVY/65Co5Htn/QcNykB6/nQziERXF3jBKe0PlPTj9hMJR0HpFtO\ngSjLcpYjr5iIniNDdIjNsIma8+fXlNBZesBtCS5kNknK3sw7FAiDHB7ZxU1y\nKIPV64XOgO4GDY+DuhBp0SgZ56wBh6G66wAXLue3rdRIzmKAkd6KDvX/ys75\nv35sd3RGjqVRhMzD5RtY8dSoluqssUTPGjo70RpxgTn28X6kByhkOIAKDQjW\nKSTifCQhDV07wDSDPkv+G0296RPdX55x5evQICZ8Eksw8ZEWFpDpMnYn9VPl\nwAdSaNkXAjORHyrTHfhGDtX5Ri2tSGDm0bVX/apkdWutVHL3UgeyeAkXLQqF\n7p0jn2u15FfZrkqwNKfJqUGRPIQDC9iEiucDGsNVVpelsKlRH3HXdUC0jWB9\nJVzL\r\n=zo5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNhVBGr4bgHQ/mdbiQUYEvr+WQPhgietawn+GS7PWOQAiADAo9Wm1R7aXG03b/+rop1KVYX/9BU/L669QwypMSfJA=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.83250_1618993977897_0.13959052532677685"},"_hasShrinkwrap":false},"1.1.1-BETA.85130":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.85130","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.85130","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-e8lcKdhPaPmIMsWU7KA/oUbrUjUBYf9FQXVLyxjs5JaXnvtQnV/Cl0IkwxTW9QnHPLrlfO7WU188nugocMh3rA==","shasum":"35889b167cc46a9d2e2f246dc63042ff697c6c25","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.85130.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf+eYCRA9TVsSAnZWagAAXrAP/2G6ks2PNNVFRBeKdz7h\nGbxcjGtqeSijv2cJ5PakF9du0oRF0PSAvMOvluLIlmz7V7vWEd709BWjwenz\nymrx0EBQ6NWCO+/w7HYmZfJu80bwFJDfwh36wXtNWQHIQdmnFDHGrYDjl8xD\nI0wzX47zYNpXmMVWoaas6UZOvpl7iU1I8eD2Xt8+ty4G8AUQGe895LcL0oHS\n90e0clouDyTZliZtByB36nTEvJfgTQ2Y09rVtuGST6zYnkD8hA0FJlpxUW6x\nJv2Nl/ZZX5zLtGfsWKC0I40Rvz32EWiel926nswPCCI8AcbWRIWfM48eJn/5\nMt1y2nxhXNp0/L+FdOCWqUrre73B6ey7dq8Ii8UkSHdTf0c55lwhhbB8ZS1A\nj11vsSkONY7J8HNKxqhZjOJ4M+6H4hyppUZTFLOHliUsUnVspWP5KhvDoJkb\nlsnXQbuQKIHLBjMI9Ijmh7Pf01AuLIfErXViSEAIS/ZVDv05zE0QS+RRNpCo\nZ2AJdLurE5i+PCzFQR0l/P0s/8lXb9iCU7P8uZicYsTlXK1iI90HcLM6nrbA\nedGuPOIGH+74lcY9yfTomcc9pc06PXsdrystq4POUYCCgSZyv6/HQ8b8zCG3\n3yIy8hmRZkKU84bTPxjFJ/dHNkv/KIA2v+8vGvfpRKJu1NVvb+gRxSi3HGiC\nVbea\r\n=2BWq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyGHnN80iHEmmRe6P4263mcaprVK4njUSKZW1B8GhudgIgSHrcRrw4SuhYrwGIBsgkK5TbzyYmC7uuLzbSPwE+h7Y="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.85130_1618995095814_0.7134032388671154"},"_hasShrinkwrap":false},"1.1.1-BETA.94615":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.94615","main":"index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.0","rxjs":"^6.6.2","@sentry/node":"^5.20.1","os":"^0.1.1","js-yaml":"^3.14.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.3.1"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.94615","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-bksIRAxq8tNYxZy5+VSEEN/87iXEkPSYQ+W1h3HX6gvgK8GzmgM3nuKMTr9XENkNWcQylW5rVbtPe/iPCJD5GA==","shasum":"ea86c69d58ca4b7be544946df85464986d78fdb8","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.94615.tgz","fileCount":8,"unpackedSize":14372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggUXsCRA9TVsSAnZWagAArXgQAJ1Ukl9AIwxVUFcvj2ku\nDUroHMnb3fSvxy/ysW7PtAYkb99FMCib46iy618S1h/YWTsTUHN0MD/OXDed\n6VrraKqyfbElA7fgh1VhxZSDT/VTIVqMKq1fwU24+OH26WLMiT/aD1w22w/A\nh2+DoAR120J8XSK2bhYYhe1XRgjGGoDfS3thJpi3gY/JMFCpR80AB1dFovNO\nQrmFBDje2I/g9KYJoreSiIqnfWsM/ReMF8TJngdsds3bm4OwR6nVY15IH+qZ\nRPygFEHrTCvhpkNSTkCG2uJqPDJyUYcCmAXUSaX3X88YcvjGU3fUkXZaP5VC\nrOXjK3kEQ0IOzka62Bcg8AwUuSHyA8u9I1+H+0BR5LX5SbeDnZcZt4UJ8D4/\nfkhgCekegwM2RSlJBVfLVxvH5G5visy2/ojekw86zkAhbBmVqbNY0o+gzCFG\nUz8NIadJUQlr5w8vcq3theVDnAgV8RMRn2qVAxGp1C3rdRe4vDoBZqodAI5L\ngWz4iua6zYhkjhT32MaRUZghqgpNcjBGA+P6wYkvt8hHdO8ExNk02NP9UGs+\nZ0Q4XjzOMujKXtOopkiLcCmk/nrf5zcdDRn9mRcxFt58wfiBVWezfFv1unUL\nH5liELJ2YVheiEeDIsIWXaFbsPPu2B14ZyXOsyH6LaGdYxBI0DHZDYRDZSlR\nU5vd\r\n=QKE8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCTbFg3O1YMHvevppZmK/wb+6cpPyFKztQvNaHE50bwwIhAP4OuwbDw0HI2jAC2t4yyTM8gtqzcbDF0newM/cLFsRQ"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.94615_1619084780512_0.029246508921446868"},"_hasShrinkwrap":false},"1.1.1-BETA.113446":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.113446","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^7.0.1","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.113446","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-sm0gOiAXBX+1VPvgNSx7FYwKRNaYWG38L5fVQjUNqTslWGJRL3hF1y8gvQMVyVCa0hY19nneLyG/IgY5J6wt/g==","shasum":"9ef7797ec7b289c6ac29d91a5c4a4ae69dc26dc6","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.113446.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnmBbCRA9TVsSAnZWagAAZs4P/0WTvoCRyXNKQStExM5k\n5rcgFxthe9uwXAcqZUZjO5Pke9kArmS54gA1jpSoFNmMKWF7a78oY9GAYkDS\n1pBAr26GDuOEMc9wKd1Jn1QBuN3N516p+DsslohEO5/mIFLfImtGamEdjx3Z\nwOROUotHbExeKy6dHkxRI1B/W5os2z1jnS0KkAr8NxtMD556sWKAwdk/HGz2\nl9E+jyhFAtXuOdAUrSNqxEUuXSMd47qKM6ayiWW46FyXNjfdk9C1uv+eS1uB\nGW1586TsPLEKD09kK6D1wY5VofNdCfA11RIm+MdYQDkMnjDKKt/JsGEUl20n\neloO18hwjVkgDD0oUApnIPhlx9FLeX2qf6iZfumKJT/qpwzOt/1Vy13f0sf/\n009K7pKNli0GjpEc/dT0AgJKCxPAu3XDbKKmRLgrMEuyEFREGu3MLfwg79pY\nCQeUJZpaeYP3iwtyV4zY1N8gl3KZ/JcSTjKY3n9akK4JCXji1NVtVHaT45Ev\nM7E9ZM0Hwvovmo9jtx/8RdaAAXHN0BlJ8NdYRoC54q3n2X+p9ke9+GNy7Zg2\nwGwXL6e0KBzGva/tjLi++d+Od7laofaLN7WKm9SK1pbQYoYlFjM/5H8YU0dB\n/XAyDiPPmwVELQ+FenvZTa+j1K7Hk5J5JJF69J0mYu8egujgFriaw0GdQazD\n1WKz\r\n=cElN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYQ5kb+lws/iMBwqv7mZxfJ2QjxPO8xTG6V+tatvl47AiBHISh09iVCgj5jVhQyipWEgVITAwsrk+ZPFbhY+k2yTQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.113446_1620992091525_0.5029721870355244"},"_hasShrinkwrap":false},"1.1.1-BETA.120838":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.120838","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^7.0.1","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.120838","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-KvNK9Jn1L01vZjkws8cKgS49+s2fAshoA3W3263QJH1CAHxoSpo3+WFC7xa3Dj5vtrSw/HPpiFO5WLxfYav+cw==","shasum":"1445551ba1f10f952098aa2f4e9ad47513b0abb8","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.120838.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnmhMCRA9TVsSAnZWagAA+kEQAIjHPjZJms6dgef1qXcS\nvuUM8wSXwa8Xs+3Mgt8QHMN0MfLs8xkEOkKmHMCdZrYw0uH9xKZ1SfTwa4UQ\nD2vnVk1EvsL6Xz8wO4Dgtsgc2n7I6s2HYBJNlZb3LrFzcrV4yYpEj++hpLaj\nwDWMtT/R1AQDQQX8jZki1g3HPttSTDLXcvrRQiJSt/tHGl+pZ75F9LS/TbkM\nBdbq7muSBsSFh1I3T5OwRbQv/yjpQtgmnl3Wy4Xs/nMBabALzfH0yEn5m6PS\nUtkKgeClcO58zj6t3m2TdgMZumRoZ8TX9UCJkIEjoYBP1oziis/5XBUzmy3D\njHk6nVQ9kvgb3YYsYNhXhycchmSMzFK41bgyCps0aBoVwdOORl6btSb32v8x\nPZTwd2MXSGKVWFkZ/Ua8EiUAq3EkzVJvxmSRlu4Qll5LpP54AjZmFSOHxvE+\nN1iDACIfgXOGEd0IRc/nZXxAzwRGkwf4WpAhzxKdj4BZiMC5YvV8xfoNk5KD\neJXcmpP+rTgopVf+pKn+eDpjhCSE5cVGWKeXE41ZWbmHBAvPmAkaGnWEEl0O\n7xRiK70bF2P8H7ofXchyKMQZDpDhzx/ib6+RLFjPrh0fVKB0dRXXWAJb0rOh\nhtFvEdekjuv1rhQ4a+wSN26ud0MYU16/A/iGiF+kSJlu8Ng8xLH6apFXCwbZ\n4Gq8\r\n=tvfg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGa1BHqsanjiP7puKWpzv7eRCVeFYOPsNnYY+VwlX2OvAiAenpaDGVM54wQFPxTJDY3RWE9fSgPGYEbzH6f0li+f/g=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.120838_1620994124474_0.12587440979721287"},"_hasShrinkwrap":false},"1.1.1-BETA.125539":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.125539","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.125539","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-cK5AjTzggG9EyPnlnFqoW2PMORfELc8cikA+CdtNEPNUnz8aBViVQSgtBfML84jevJH3Mr9Y1+P9QIFyTqCciQ==","shasum":"0fb0e95348266de4b3bb860e0118d60b7884b84a","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.125539.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnnNRCRA9TVsSAnZWagAAq7MP/jXkssKK0dUALA6vS/Z6\nJ80ZVFojLnBnEBY2tgVhHtGLYL+CSSMgavmIjvnsWaScsVMRVmYjoxDTVeFo\ni4Q4GSymBAGg4RtJTiGKunoDYHah+VLbcEdIHi2kC+nCfubNxouhMCbS+qko\niUAeurW3CitGXuls3rWn51B+I3ha1+DQ0KO89qUdKV2BF9zKNo6YKaJ3usWw\nkMidf9Ihmd+AZq69fmXCae/GLBzCgc8xxhgg5163SkzXA3fh8GZkQQZDulS1\nmIZEnc30xZ0QaCVKwPpg3Zg/980DAfJDVc33TGcRmVvc1yxxXV8CAwF3kV/s\nd5Yfu0767JUcoSRCMaRmCh0s1G91R34yTOojuMWu5k1XXmfIMllpMi/YQ78E\nbVS9Mjph1HPTyFBrUc+veGYxj0fEZNClL3V/TwWeJd6RDXTnZkix5ksMPyyk\nPUitcqexW+XOUGTdXH2cRYJPwpsxVPT62lmod01EhBRubG0ZhFCZ5silEIKK\nOg8VPNCloJYn3QPXeC5gRUWwhcyS5XckdGEl3X9Sz3f7e59ZTeF0AKOGZEys\nY4XR5Na9+ENC8nKR+1+y2Sticq73jPTOl1ev3ikWBfHujAWl3qhcFMBENoG7\n13TIjRcUFfHiBFYHqqpnxJm8FmdQCtGmjMBX528f6mJtmp/oNWnoWjsmfHlk\n3IVl\r\n=zWFu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwCZSKTow5NcvtkLNg3ZUGB6cbsuNt+/SOF3b+9C5KyQIgMxWdDh5qjXlYcFvNhcACzgigLP9ppnyjnY5V8xQsd2E="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.125539_1620996945001_0.1080497173171675"},"_hasShrinkwrap":false},"1.1.1-BETA.55746":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.55746","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.55746","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-k1ingKOi+q1d/dXDYzOJq8KK49rof/aPGNt3axSiAaAdeX4hLgSemB63Ky1vRl9uD/tkisxJMkooaSv79F+HTw==","shasum":"abd7f9999cd8e1d72b359aba24e9a8d9d75221fe","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.55746.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgogXfCRA9TVsSAnZWagAAmuoP/iCiZszA5z9ZWVvagV1x\nTdFtmlMzvqPLRju9ViDB2bcTpo+VeWP5W0jv2ZqdMj8esuzwiVHAwIzPqnDe\nExMaM5Whs2hFJfALIhYesHhKrIL0yVh33Z5rC7siyG+PnEMHWcVnuol/Egoi\nih6vqsTRnuIJyISkE7nfjSw4qifM7JDpfAjVU9FXC9wO6np5iCQa/1xlYmzi\ny+XUxKn8JJP8/asTKnRe8jjQFLev2vjlUltmjz2udzRP0BMQVMc9x024hcyl\n3k/vmgNrTSkFdjnx+YzKrQvxswk+LyVN+88TBQ+ofAHIHOS/oC1zLG4e6oMB\nDw1b2UeRekb4+T+8FLienUtw35BROroPvPGifV1OKCRibtbBWjXGw/1Ryemq\nAnb8TSTz/iFoTJKapswxugnzLTVM5IsSU9tEQa49XEeixl4XfhrOG6RZ0b5a\nBxfSrdodCkEYdg/NMK7TaurHakEki12BtDD//Qsz4PEDTkGt2VMcxq8yX2TZ\nnMQJKqF95t9TZpVtBb5Cj8CCE4HeGbyQ2859uYK9HfB81UraHUWFVzByFqgN\n7rekQ/xJ4K7YFZI5QiS5CrganPtlbVDnKog8++XDqe2KhuePyluf7pwoce0+\nkDAEaW7XXO4omrLibu3dFbEUl5dDtgtrVyBpi1hoZgDt656JIxtH9sxOp4JK\nu4D2\r\n=Cau2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQkRInxe4hr8Llq10tISNvopwU800SOcAlKwLf5OQNygIgKHbsR43UKEa2riiOI/88MJc66yrhun/89BUEhep7RwM="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.55746_1621231071086_0.009139138942834357"},"_hasShrinkwrap":false},"1.1.1-BETA.61716":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.61716","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.61716","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-O+WGij7EeUTGLONQHAZK5BmD3Mwx4POywRb3ig1PnFjkwnMwQjzS180nfNUb/vf3ZWcDaO8A/UEq1Uo4gokb+A==","shasum":"5b5e1cc5f6ca11865b2027c87df2f5469505396b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.61716.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgogpxCRA9TVsSAnZWagAA7MgP/RyHpc8b1pNHlk/q9Ars\nMHKr1qfApfejUQrsp6Tv8eR9XzFm4pXFb3h8Rca9XvreEfF/TiSAnmp+dXiD\nyRM7eBK5cyHFyFOlqjxulNTrFJ6Sq84uOgZc9HHEl1ropG7YxC0ppuB+txeP\nkVBw5vnhsbv7+g3marva+FrihA1HFoig3axh7LkT5KkK/6CVxpGJtxMOC+Re\n4bSeWMH4GtOF8P7c/LByIhZIuwOCkMEplo5J6/JKI4JVTls/jBg0zeFZmnd9\nbqzZcFxZ+oNC+YhIPEsWFsuJpA8uxDq8aJb6d0vXt1DUlpFIL+SWjZEFCqa8\n7Vzvc1FyUR5IDl4+He2yQDINl6BMUMthMgSp8IndbWkZwkO4ra0yPZZBoBkr\ngx3mAygrp98gFxvEP6RezbHkVkqDMZT0ikI+ASVfGiY8XwkM41BFvPR9qJql\nGZ8luA2AkSSnwo7NjyfoO9I1IpJm4Y4F1WQE+5y5BIUPOqQzBL6m3KGqhU77\n6R8LebbH/C7awHgZWqNmQe9GieL3v4E1n3mBu1W3TngIgzyLIUrZy/0yRKsB\nb3HjZt81T6+VhZFxkSgPgvuicMslyrJ+E927CZ4davPU9yqZN2dagSg6C0HU\nLtPIiymY6FgbtczNRtyUibKakIzuLvUi1Z1X3Cw8bxe5Kml0D13LVrtJi2nl\nixnc\r\n=DBqC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0n77Ndmu/RWVq0Qsf/vweI7IhkUusmGUuyVFMSz1rEgIhAJ64FI+zkASWu5bB0/pf5PFW/gdXHOpw1BQCePDazerC"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.61716_1621232241453_0.8930359155199268"},"_hasShrinkwrap":false},"1.1.1-BETA.61837":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.61837","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.61837","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-ZzmifyfSx4ErP2YZDtjFp4iOvUgAMrdUtgH4BrE0r+hYWrqGTNW7qO7xL+yhs4INsdtIqM1kqlX3Qgt9a5xD2Q==","shasum":"2a20f38036705c6dbb19d231f10d5a8a76bbcb2b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.61837.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgogrBCRA9TVsSAnZWagAAFawP/iOKh1U0aHxBJhIQmU6H\nTFcRnnfAC2Nr0jt6zrSA3mWGSGR9iWMAvony7naMze0xQemwgrRZJ6UIwQla\n6FdytufD+mjAQF34BN5WnoZ+JVdkHeOfQaCAYmYgC/xbkq8/d2NT5+IxxPes\nX9sGT4G4GiODBj1+NRv3bvOii0jMq74wRWgX4GPUtfyQpBsN/M+hIMKQ1yFY\nVQ2ZVHLfxlfsItc4egB5pNEMaeh/KYsnN9b4RwaUK43c9koVX1X4OuTH2pTE\nBQxzp5HXHQGD1cuC6bKJxQd9JQL1zzki4+10DiBREkDTDzauJ42XJdeXwrOL\nT9yymRjltNKvU05VKJFAr14lBqqNLILexP6vs1Rq6gAbqyo+gxkNyZM8cv/i\nyuNZty0EgZ8mh6UIeaJAb3lZFBoGnZmZlLOHe8m8xmLE6Mg09Xl+/nfuLdSs\nuT2qY2/gk9Eh9pI0O21HTJ7Xi/765qCjOdtsfCOoj8FKct60ayOvkb4Yab5n\n1Dn89EllFRT8AoDC19cQHguMHBkans4twMu6XVKn9UBnUiY3vZVX6ZXZfKCk\nGmNbk1YwExLJ2EVM2V4AJ2o/YnMejIQI2L3/ThsyPCTN94VadQ1TUIgIcDgj\n5p4j15nUAWSykHCKjuMOyYeC92UUbcGBN1bzirwcC/wOYZCmnfQjrV7vrrxD\npEGb\r\n=TYH7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFX19z9p9//9aM1wbtaoUsLtL/J4WsgrDOp2vJ7hlNrnAiEAj+YV96fnk9ryo5C0Od55qJrdmbulOVcrGKIrY1phZZk="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.61837_1621232321445_0.0540771974663361"},"_hasShrinkwrap":false},"1.1.1-BETA.62854":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.62854","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.62854","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-0URcDzy8NEw9XN6t9LkIA/04yxPkUmEH1KnaiAgFn4nOd6h+BuoRRJb3kj1GOTJxHCAB9HescWrxZARpeaq3ZQ==","shasum":"df90fc67644b874718f6b44f1abe4415fb24d02e","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.62854.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgog0qCRA9TVsSAnZWagAA1dAQAKQ2Q5wYbdAUV4s0FJyM\ntmadgKxqIE/dcj1nEuyEwRQMAtaFPOrvxT50/M7gjzkPFMUap+Tnv4badsMG\ncV4uEEA8P6TIfB5pLAnWpqHyOkBktynVHXwfd0/18Tm/yCPg7ijxcOiK45yI\nNfwoxXypAqz8F+czacz0DOheUM6JT2bDUDXQFedZrDcWoCtdntq6Zf31bJEt\nXFKzjXPTWiHTpfyZXESPzsMNmzuou+Ud2aqxBO7mC5YLlwk70aronn3ydkfh\nO31GZFVzUKdH1PtDjZ1CkGd8C07mAP6lY5Amsa+ty6iE5b7MNGdn6LHFcHcb\np0gmi6J56yyPq4mcPz74TzMuje0wJjEnkW7v+AI10TJejXnlalIyEY6wq1e0\nyOZ9iA1I/dauEq7G7i+6JXdhdxATRR3DmHWBkz6EPu5pHz9XqvG3Ef8LF1p6\n3too2m1aJtzrScfTejL70fG/vzen2fUP7D8nLC31KAuU8BtFc7DBIlDDiyqi\nIzpnSolQoMML37AM8hpLDSh6N1NvzlCrfxQteMvnPJ8sc2qifCwD4rfHmPmg\nMMR+MBYrfDxRtwGdYlfaxGI/o5xIM+1mnDRt6XG1WzoBKvlxP9nKmriaBEgW\nE1H+LzFns22IRejAX/DYWtOqLfC6JdoC2uV6vNL9k6qXHF/Rgid7CpIGq2FD\nTXD5\r\n=CRHY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtVUoQmqtg3ia9wh44053P+CzTVmKWtGZCMZSXCUa2+wIhANKZmLHPoKIwQstwLrrHM+Lxni3Y+Soq5dp9RpNl3qKN"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.62854_1621232938503_0.4930836488685053"},"_hasShrinkwrap":false},"1.1.1-BETA.162204":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.162204","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.162204","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-7EAMwvo6BlLas+x+oRAs6x3ohLo5tLpB4FcZQnvM0cq+Pe+mGJkfif7qm1Plc30ZawTSh5jqWfDZyZz6t4lQow==","shasum":"07b6ca7b845defcf4744a058fd2dcb2983d678e9","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.162204.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8cyCRA9TVsSAnZWagAADCcP/2huiZC7ClujybxicmmB\n96xshTzMZRJaH+43kxCo2mFMcO42rjBP+DkyM7Mv1Tr0HSi8AYf8bVX5gmmd\n48UfYm62aJdIPdOPdBYG3fZcJ/e1sTACv4hHD1ldH0c+qRwiYXNj48vFrjtr\nvM1BtIz6qb1vignAaE/Rb4EXOEmH7v7Stv666R+C6YJNvZtwb4+6m0zAk9xK\n/sw350KvbYSQ0Rgcr8MrYO4fbOovMQBNznQMB3P3Adqy1VacNKlAdA4PtY2Z\nsCXVsMXZVkeD+vAAu4UOhRKCiipsnBfxfEB5R79APBL3BInYAa6vsgd1CmxG\nLM/tbi7iZ2QgEAx+j+zSDzm6X2SlgSXVHJIGQUyVtZl/jwCRDdddgrMKTxA3\n7jwKG09C8ZYLgnYJqojNTBjjc0RCUhs8aQcxnTtXR68/3c3zeKjQVWgG74ey\nqB/Akn/dXP2JDndKiWnxgbhJIyr3oFcN+53LQqwXXwE6mxwwvyBcXRxP3uiM\noR3nmke0vdQuiLKenGC9KiMBlSONBBGS2Io3qH8N8lDPsNN3s5koSc8Zm3oA\ndSan5WM0Rp/CcliQO+pmd/sNv67/3RdepYSerVCvFYEuzDySamgkWIbf2wgX\ncC5+ZFGcxLfeofpQNkqbhC3nmwkh5FLVP/DrFj9s5lk/nT6MqWA7RgeP/oeS\no179\r\n=Q9Os\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdX6tRAU2QK3v2piH+ORLxsAzonAyFqkq03sIKRAsf4AiEAoX2pTLK5LF5gGT7qA3/MHoqRNwuHm3tF37ke0nd+G9Q="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.162204_1622132529949_0.43158741877848805"},"_hasShrinkwrap":false},"1.1.1-BETA.163207":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.163207","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.163207","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-5TTF1GU3nXRCgWwEFnRUqG+ra+ZOV3+A9EFTGqgFym8nhcJekaAqQ3YECxAADZ2ZMAztoeJ/lwqHBrUIVsMaBA==","shasum":"b73b1dab94d1fe32145100fd243a227b41ed9844","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.163207.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8mMCRA9TVsSAnZWagAAsdMP/R+D98zfZT/C4QG15dMb\nwQUSBirFYT3fCYnHHXSRsokzAj3mKMgkQVAqdp0YR0Ze8frgsjGNYOkuQL6z\nEjEozV793AOjgjFyHLlWU4dCnN8b2kBH6vg5XSnqK4GQrjJEjKAPZzpiVbKg\nbc4VDH/boXMcplx78ohRnLhuEEPfOeImSpskw4lHa6Ay5c6cXE7g1uWnqYae\ndW+VBN+Yf5OlEf3HN3WGIz7HQg5x9zMq+l3c+nll+2Hd053qnxEHEK4ZElo6\njzhd3iQevSqxmrOmdNkvLeULCqCjZRogfI8hX33K8tgbGF2h043VNijk4h+I\nvrC2q70k0CeIY9YPT/UIFiRoavqEcGihy1CDnOJRuXD9K+auXbiAt4zAjxMe\nfxS73Z+a1Kas1FubEA4uvW0H9jZHmNwJqyozFwUhRy+1eb8OU9HpoIb/Vhiz\nFROYSgDuxB52Njwo/P5w2dqGRXfJtmbJmIyrS1EeWD+VhKhSDFpjBcVSgCsq\n1k2jdMMMPHqMmulJHqwfqDJoQJL/sld5EF2dtCu6u/b1vwBQ1qLHwNaIvJie\nRzhQkgwkeZZtMzDsgF+3mZalFER3N8wRsRmk+wYFWCRXqOYulGdqFfLUhg67\n8cgztRRO0SVIfflHbjGco7vffEDZl73Q5ZcSZh1MT+etByBQdKCT2DsZ7vvk\nCrri\r\n=dOKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8atBtTZZ1zyLZLGPCJ3wqPIWZZ5EdEBvOq0gtBHnf6AiAbR53eaSEQZxwsMCafBJHABaVBfMHO90E0L9O5qv6Esg=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.163207_1622133131739_0.8363146731544335"},"_hasShrinkwrap":false},"1.1.1-BETA.60027":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.60027","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.60027","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-lMLXV5nnhSatS3k07bfrf5N1nBJ1GhikcGyHY6HXA+7aIswjLCVLmyzGqmtSvLqjFeRlM042SxXTdduVS6laXw==","shasum":"fd6b06c50b22c368a72d00261cc76b81d1fe70ab","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.60027.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsIcBCRA9TVsSAnZWagAApRQQAKF6sCMGbjsPl4U9lb7o\nOiK0EdhWs5S/m1LvFnMCd71x6Q2YWDCpAeeQVEqmF0I40d/8pcEjGrluC2Vt\nwh7ztdD1l2qYCDZ7BzO1PHkuydDVSBoapSX4CGMiiC+OoeeD6EdC2yR0z9EE\n6EzFLNGr6IXCfupcBqC/kAv/FOQJ/hgpoGlW1FERViD5at4wYirzfUma3Iey\neeoySwlFrl5q8QirJw4XbQMkT6gdJfycN2tGHgqGguA/kIQaKq0lpx9jQ3x3\nZp5jtiNQNdwUE/8UjvhrSPLouqxAmgl0gyGp2IDMM3UE8QH4dBY9FMfU2Wl9\neUEtZid4tfdSFJtz2/ooj+AhKyCDVgqAteGHE//TkSJUOOn6sIPQ/xhn3zd3\nizewzM4Vf2iuc4iREvtraS0j9WyIxCipUlgdAoYB2R6w8NwXb4fTVUD35aDF\nGTiscubWupBDyTBbEideexqJSThBTq5EN1BenIiOY+iSGk6kaO+0J5gYS822\nDmJ6vdwT+P1PWvIOZhwt2upbU/hr2G59oMFobrsS6cpvP+kmZC9iQpcZ4F9L\nG++5vlAoUCUz6S7GUvpYo1eEmK28pdstJPLbmetitWug7SHktq4l2MHTXuzy\nCpoNWkvlIge42yAKKnlpKNgDdMYHOHOHP3Pi/UQhzS4o5aEZfG8sSAyiaHU5\nYZiD\r\n=wCvX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBothWgle5C9oZ/IEregaqlaAL26OUiEWNrk+2hG2HUSAiEA2UcGudsuUukscVTtIHPruMye2Pdw24fjxGDUiyD8dso="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.60027_1622181632698_0.0600352702893483"},"_hasShrinkwrap":false},"1.1.1-BETA.63028":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.63028","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.63028","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-GYGHpiGSOR5bKMi0phoO5jWAzQgTxEftCkbFjnAIoDeie19PTt2mRPXtFZ80C06A2Rz3WS2+LmaJ7ErsgZGDRg==","shasum":"ef0c66353094e10100d1c5f5b4dec219c82527b0","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.63028.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsI4JCRA9TVsSAnZWagAAzLIQAIU3LtaZIu8nkc4VCEYH\n907ETbdrZKHDNWTPlyndSOTbdy4XNpC6+QZIrSiyu4GS2LXzJWcWh3wzIS/A\n9m2V7AB1CwcPYeLU2ZEp7kRS+rMuVR+uHVIckVxnZ9kBvhLoAspU049K2Z3L\nLkcyuOJmqOEuZixZOx5Mu96ajbIa0PNlubVZe6vOrJJ61DewDB+f4JNEIcq2\nHYi49sokZ8uz717gwffP8igky+KGji4NA7oIPQsI44y/OEbJjXkYF4L8eqnb\nGakM6QzwmuSMln+mkXxutyuqjHqrh36loUEi65i05GJeFwHyNGfcq0JMxHa1\n7MKuIHHR4Nkq+GiAKPEl75C6ijeIKcIaXWkOYIr0IE9Q+nYOsQwyyKHop+dW\nIZv3vA1anAXCt3zVfKI3fJfmv3Ev/PLjhHvCSa6j3EyWAEvNvIOUutfsyPw8\n5AK8fQWtQDpp2kwHhY4Kb5Cz1JXuG+XeTeimCXimsUisZKCWWHX+ljpMYHvR\nD0PQTmrdax0Jc2mCFzn+8Gt1zr/BesP4moKNWSbYQV1eACHV2VdsgkUj9Ni2\nNmEkSj6fNwmsYUkaXAsdrw8M0CMF4gk3oC8u0kXsjy97ZLUjSc0qqWDfPd/i\n7f4a/ZkTru8s4lPSeacPE6tf+gROxri0AhEBjEiW+AWU16d/m60pV5ZbilJ3\nPv1z\r\n=MW5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhgvjFLLhTrzcdCArAOOo0wXLUFdozvHy5Rw9SHHr6+QIhAJVJ8AG1M1W2V8ZCyK6NCZYJlhc9px7JQvQxZ28T69sV"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.63028_1622183432644_0.4288957343316451"},"_hasShrinkwrap":false},"1.1.1-BETA.63419":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.63419","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.63419","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-IkQnPh8Vny0BvvrVEEST0J/G/jhRy1ixz9sYUCZQQGEuwFNXfR/Nv9lTJR3VYNEXmUQZ9hv8pMKjj8hvNd9gFw==","shasum":"dd7c1845a1575c6505d94d231833156e4e5d26f0","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.63419.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsI7xCRA9TVsSAnZWagAAAowQAIObplUNZFY8tG3sbOdn\nZwer1M24Sat8SDpGVlPgTT31v8u0vj25ZVdX5itRsmv1KF4UHHRvwVW3GW84\n57RzdXlh3hR5cnDVvYoqzKKJr3fzlvCo1lMcrQzySoZanCdEkElPdynfVZlG\nU2l2TtYbPc9JOjgmWNuYXxI4cWKKCUeidpMpo0wJgSInI+FKV4pVA/3pmsV1\n7SsJJ6MReSO3GErialY2xHCGNE2GYbe0u8gZQej90YlsHapqko17+vabCOGX\n13vQJx6a+hVCYlEkcY9j3d5+/nzuang4G068fCoZfHAhdN06uOXcMLq8tQwD\n9CdveXwFeswZFxpx5vC4PGgA9HTAxd8bzMMN0v3j30mxpwdnZZTW4XULUadV\n+nlgw/X/efm/K0H75BZsM7to0eWoQW54Lu+SG13Z0Lm/dltQglKDsMHNneuX\n9F3blVWij2f6xaO49NTN+Aiy2294oR4GdZxx4b/G5jKFCPygH5ievEwEjcZU\n9CksFDE2ppOmNiLgascfJZ5kDK+A2xFQqUHbUxd1lGPxagzmF3OcV2iQoqcp\nPyArcksHXeNnYI64H3V1m4+GazGtfGbEHdn3azNFsgX/CL1n4Jd1kodAP09M\nCj0SH+b3OVa4jaNo4IAaz7VHLe5ijnruHLt4ZZA16vSx3YNuC3+4/9B50iFl\njH7F\r\n=NnNq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMaZGvkY21qvFvGK82WlR3XnkMRdl+LiwcSqLQ7+Qu1wIgQlU/1U7huZf17x494VSYo+DJRE/cqV0YEIM5C8DqGsE="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.63419_1622183665440_0.3765745562775624"},"_hasShrinkwrap":false},"1.1.1-BETA.65336":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.65336","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.65336","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-9Rt/fSP/9r++HvIwuT70f2zwQI/yCZ4JVXwHmY/+c0lW7pu6/SGbdH90Fb3bQea4mBmmtyDgVDLT43J6VFvcgA==","shasum":"a2bc5b93e7fc6a6749eab6f6d1bff65db5fe7787","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.65336.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsJN1CRA9TVsSAnZWagAAMvsQAJ0DMDcQywygQxc1hoJY\ntmBBWT4sXOlIO9Q+4KEzlgy7m3dmM0Q+F2R3P5IGUk0rDHjeK1JBS3uwltrr\niJ5h+v5ZDipiKk+oGTI7Sc0Sqwh06HXUWWr1vY0DXJOw3xNJZj09448R9BYh\nG5h4KLTvZwPNSueGuUIBceqR/48pngc8MzwEnxdARbCp5vELCDm6c9KrAuGy\ny/9AfsAGjN+7oU/A+9hQaF9FAnmJdCmppkphPH1kIAO28ebpFTalErc9cTIc\n86RIZB2QpYbeYbT4Cnm5UoD2cqBC3pcInJn+eNMZnPlERoHWC4ocNxlGiFnj\n7vtpNhAqLRKkN3RO9HFwiVpC62PL826ecx4JqnQCAc0ymGQWcf+znFTtt3+g\n5mEeoXSYpHWeOQ0l0FcBnPAWRJQVjMOqwO1oOS5K38iRhacNdNQTmOqLgyln\nTnscjpgIN2xKio5bkBMfuylkDQRzQW0gb+uhe1ZI+qZmQKnyzJ2SaYKMjgRQ\nvK6XaBJapmjAO91guG+VsRMV9eavVfFTCmkKUEjLL8JPyDLqGbf1ZfqWbFBh\nhLtIfwbNSjrRXvZ9++OVIawM3W74c+2fjS92mk3MVlja79+blu0+a07XO+ir\nPXRyjGf5Ls6oP9S2oppWAk4uNItIrJ6UBc1DZ8VA/m7QMdvMY07OafZDowFR\niIHr\r\n=v7eQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSXCgfj71pVJ3ztVSkJ6ZnsL1EnfUII8qxpsziW+iXzgIgIjcU817LaLWwoUj/B4wClbXhNpo8eEUm3R45RpWXPFE="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.65336_1622184821510_0.9834421529523225"},"_hasShrinkwrap":false},"1.1.1-BETA.70346":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.70346","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^3.14.1","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.70346","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-0vfXblO4qlfqO/VtdGr6vBq0AH/Yfmc4rynlVYHMgygMEi2ZYTskfQLkqvsN8ZKYE22QRFsNZOCSb9atws1Mow==","shasum":"9affdd678384b18530b1e1f91ed55e71c9b116c1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.70346.tgz","fileCount":8,"unpackedSize":14379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsJXXCRA9TVsSAnZWagAAqWcP/A4jYx0SysodQsj0LjWh\nk6NHb9XXasuJX766469jaloFuiUQxD+TumLl5AmzaqjILjRXRsCgrgtVtotY\n3aR14r3A/e8LNr7oMZcFJsKQ63NoyShlq2ZP8ET4oyzqI2Y4NybcEQFFldsf\nWMiP3BAmkS4gisTtpzYD5QHSvQ0uo9D0VQLGUuVIe4gg3W8SdldaAEgM0rTi\nLy64K55Kc8WnKJhimqG3Jn4D7fLqYX55r/AFs4qC+hrV3vWo3xp1nM6obh0A\nc74hTQJoXssv93MWl+KmrJ/PrcUNxNRyUvUoZdBgCjPFlx61M2cKJgmVXapC\nxBkpNIdms+iubxN3eIFO0IoRaX5/rAESlFK4BjGA+Aa8zFQfMgI+5egvsn+p\nWVuAM8jcpNS3qvZOzl8OLXzCoLnxVk7lqgkUqPuc4wwndcaAUirgNy6jYlHi\n/D3kKtcbafbrEHvDn0cMtuCfKylo2bD6qThH3PRRbT+WmI5F6YPBd7b0gWDG\ngji/X2tr2qAIiUUSSDUk40rPhIJiUnbXFFXPku/1y5S+WEgei8NTNXNVQ8cn\n8R/l/etmtF02HuiBOCL5RIcfzc0fCvW59sdlgejp8eZ+gq1nx+0hu45UefH+\nTSHQDHupztzWtUQxEiWaX4VTpt8KUjxTVVnLDj4MJoL1/TgO4D7tJgdw754P\nO2QO\r\n=DkME\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsd/kySWiMGuBFK8/TJzzovokMUay2gu/Gkm2Qs0JnTAIgCJNq1zfVEGdExQmXOqWAQuOAIEWSdPwYX+VPiLZcKmk="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.70346_1622185431233_0.8584963006950859"},"_hasShrinkwrap":false},"1.1.1-BETA.65756":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.65756","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.65756","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-V3XTpWIw1MjFvm2IysUdwJ5I0JTPCengx2pHTj/84DlpVYkY2Qm2BezhENiYuamcI/69uFBOiRIj4siLNp9c+g==","shasum":"d5b09c6fc1b444d12e707a6df849ca88f489c3da","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.65756.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgseX6CRA9TVsSAnZWagAAz3sQAIo8ix6Y6WVwsCOnZsr8\n0ZNxQmGs8HKtLMCIGdgiGOGx0duXRqR/Wveyd6/xK5IrjlXMwuCcvN3Pezii\nimLmxBAEe6kBEcHkf+nQl2E5XEvD7utc4SO0LoxuHx8+Lq1ZCpFWAqdRpfnf\nk2kKS/oKS4fTQmZGupfay90wDoiid1n3lbx3sjInL+kBiM7Kv/QkYhYpEPG1\nFJ9icjC7mwQIfgdRZYXkmbJnADjdd9ngS5Hl4ify2bDA+e/G9nXN9M6dlzbq\nNCRW2BiTI6kG2noplvll1Hg1eKfndLWLDAP6km3OV42lPoyCqGjd7C+qm6Ew\nZILBjeuZrkif9eEjbTyNTZ3WDqkyrn9TU9CoK98Od2tIvH1f8oNI6j2MPltr\nKW/rBj01bfMtwbv5JamyqEoI3t2pU/uKMeaR7TWSCCsJvF76z+nM2fucARzn\nEtxHir+s8WoQ8C3SWAgUGtPmCSrTdqMqICP4jwIe8/KvGKtwSOe49VvhFulF\nQ8tAy8vV76JnWu/Frghe5y5NKBIu4OwS0pVeiPhpiPV75UfYIBpdSKNrUKHi\nT5y1VcAApAz56TXXFAoyn11ee0GsqqpX4cppu5QrQ/cMsiR5kiLCU8u3z7Qv\nI+ipMWrjSsuzGiLkT88GWVNheCrh67KBr7UNR+KxxGC40kIm2Bn+kqMygL4+\nN1XY\r\n=VAFZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxwmqP7cKQdZQ+NGUzHBz2WgEJE0lo+YZl3g4Z9+v87wIhALag6ebBrhCjqRYK5sVqHgFKUNJxc0npfx7bXVIc7hb0"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.65756_1622271481832_0.316146321189678"},"_hasShrinkwrap":false},"1.1.1-BETA.71002":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.71002","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.71002","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-sBl0H/EuRKCNUi6Bln/or7lXHjh9qLm74giGa1OYOGq9wixIzpn5XY+CcpK9DlpHMlLS8GHjoEEc+BPJgLxYPA==","shasum":"2764b68f17dcc6490cce49db77483e62cde559a2","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.71002.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsejPCRA9TVsSAnZWagAA8GgP/RGV73QzgCtcyHo2HEU5\nMtAwCukTphHyHQlsHt8rmMbz3b3PTBSgPA4tUsft9v6Y99EdH7SduM/9EAFK\ncD2PuHXfC6rXUrqKuZZpjaLnaT/HsOuvxSQu665TiP1nMFxYzITxWQ8fVjB7\n//Xn+0IUapTIF45TlaHLgO2yHpj/Xvg1tXneAd0890o3hfMTn2oSGZs5IOzW\n+ai22+9Ff+1ssQC1Mn7oAwwkWL94nviU4+ialL0AV0/03AO4My7Hh3YwClff\nPFyYVv4AssRkm5VViWY8UtH+y1g0b0EUVMeGXopnLwenkgYy+lUos1pzFA5K\nOOeqYStyVWWdt813fEXnnZdCCMWo6XtO7Xr+UyyiQ0SYv+a90+g4pGD2mgJv\n2elNO4ovFLIVojkp6P7+5kdzP9/7Uzzo6ztTyo86Ow7vd3trGYJYcYTVcdr2\nOAdLEJCfWRQnCdyd1tz5QziOiYNs57gJRs42HO9OmDxhglvzTG3xYBsqu80u\nA3RGiYhPtFlRwbXz3Wh6WO0hxYfCvwJNoJBdtByA8bOzDG1cQI2FouV+X4Wx\ntwiC8Kz8BGAQ7SQziGs44+i6Dj7HSR3QypL4tUQ8e+Z4CVuX5YkaflKtsCjP\noHgoSAKPsHP1NwfzFUVqn1mtCaRpEgBGxB8mIdNjyZx8LUDAmexLhFM9vD9o\nJNxW\r\n=UJYo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcCeUlI/q9jGSbdiVTHArJCXdewQuypiY7dQtyE4pwIAiAYhuIwc5vjp2tHBbXFG4YYxnK0oGTk9/za7MQye/fqeg=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.71002_1622272207599_0.8731881827149273"},"_hasShrinkwrap":false},"1.1.1-BETA.73135":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.73135","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.73135","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-3rUPsTJRREibogn7NdG8m2OIHRi8pCZZq8ifi/6HSUVpWMNf7AgFgeGEWYjpxCVTcLLEeUTzDeu/62DqIPIxSA==","shasum":"b7cefe963c0356182a32311a076f10260f9266c6","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.73135.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgse3cCRA9TVsSAnZWagAAPKIP/jBmvQmJQ8JmNjC94XQO\n1iq5oB78HCMAD1r5LIzkdCKIF2KJS+LV3XbttKDLFpwUQe8BPJmghrhwgFez\nMLz1XV6WxTNwhWI/AOQ/FK7qh8UWPG1Uc8kuap5ABgeLb7tjTuoRiJAP8ffD\n+EuUQ5Fs0Zat+3fpDfBkAgnZw8sh1cJo28+ejKjw9TMAQsUUpktl3cJ/pnUp\nESHe/g+NX9XmnzXZQ0KLZkcatfAWfSBRlRyy1O5Ff2Z8CPXE5sjvMxmgtvfP\nBl1NRdBasZRiDKd4I0k9bnPxuqFGscpOBu4P1k0P/D8RPNQ+vKXVzAqy3Vsa\nFxUqab6KXQtNSwf4Z29WhWdkasF9rQQsOXlY+3sgwcJV1/vdARnLNLas7blK\nzJBm3Kwu+KRLiZIHfIWmgRjoS9Lta3JMfZsZjN/BnFEmFYySc/EUgqmHvR18\nsLbV7kiALDAmYnVBgJqKZ6ehjQO6pp7ITyq2npMNNqUQYvesWt5vHiinGnWg\nwSQNFnbJ0b8t7Y/C+7mYPsaT1lVcKMmW3e6Fyq8GPkxflFEmECv/57HFdGev\nhm/DkIVkW4t3/SZ+U+bQHmB/0gXxboqm1yAw7p+YudXWgUG3IhOEKea2qMhN\nNbeWVASU4Ztpsr/hiWscWKGSfnQV2o1rK9V5cWZhYIceTK6MsNNh5vsiV3Jy\n9Zop\r\n=TDFZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWF2tP9kg58VCOYlH+MkuCZgwr//JBx5qDlM8r4ByKZAiBdKGMqrOvE1DuDNLCxE5ZpBv4v5NEmYv6metWCU9dWMg=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.73135_1622273500371_0.12272997535803176"},"_hasShrinkwrap":false},"1.1.1-BETA.70116":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.70116","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.70116","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Xo5692yBgtf0O/ybM+B7Fv2iCWgCUXhEw2MjOp1T4MKovKsYnyu/B5zUnR8AStoTUF1DQFgaAJawgyEIqij6ag==","shasum":"fa3aa99cdaaaa1d41e2ffae7d9f998d59ca6cabe","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.70116.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtInCCRA9TVsSAnZWagAA5DcP/1BfEqOffIXEhOq7yaLw\nSkHsHzRJs0wqrZF7W++UdHXxsqmTKHNcmE3jjMS2ZAymZgj9TWjW8fZ2TjnT\nguGi9CwEVJ1wBlSlJZr9woHaJM0cjJx8W6JAryYx6+UATVBKDLdpPa3iNtYy\nspbNNUT8DIRiWp7PN7gwnx8zXAe1XwX7LkhSAXVAb6pz35cr5XGBaZIYp5pL\ntB2xV3Jrtb5lhE/EcOb+6MBd76iyrO2opxSWXvAVP6L+egr/aEShlBerHyAq\ncCbeiTzGODCFlyeRsj16IR913e0Wo0S0SYsYdtKVVsMPy8egQ/4evPtedGaQ\ne4SIcau0hOyW4wgEakhK5cj1PKQchSGLIRJim3OwLGgHS41vpKk9dM/CuurP\nau7DkYAB62j9fHgHZiMFDR2ggBppBiEOGtZ5T5M8h3o/kMcwp5DFlAT7II2F\nkkfch/0nz8LsbiQaMepZgEf3eCqeHouEbOTFoCiClfytnio/BHhXXc89tGHj\nGPe6je0stA7dONkLHD14eTY885D+gEJKK0dvsn1SkblV5RudH/VDtgyXeupQ\npWjUc7Y+voxi8VtW7nC+nkEMaRSCogURkDNSaGz+zd3wSQkk3iXP1dCK+g0F\nvk3H03zYT40kl70PMYaZnAWDY8cz4o3xi1TLCMbf7ojVNYbB5ULT1JJJSbvu\nU0rR\r\n=fqNq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4VYvpOhNnSfx5PO0pIMDy0EdXCkZdz3Pz4JiPf/4mcQIgF6opsiIorUHz5TFex7AzSOYL5ort9NQnK9mKjHZ0dR8="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.70116_1622444482178_0.18427677729110403"},"_hasShrinkwrap":false},"1.1.1-BETA.72956":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.72956","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.72956","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-SGCJ5toDMkIYnDwg6623781oK/utNMaUD4rq/EfUQka1kKTqSl2bIv3H4PsWjxlROhCSR1aoP20Tv43aw8n79A==","shasum":"8822833f60f14d20ce28c28749a24be6dd179c5b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.72956.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJB6CRA9TVsSAnZWagAArpwP/inaiyP7pDbFzKXCGLed\nC/vKB7dloczOvph0J1n8wWPdt/O/8EBPGrcLbp4tRzYvzbW1xxBAnAq1MFsv\nUl6LgaCjiVSMFkPuRchRTcSMNJ8OW9KY2Dv05lqIPeb7zZxmsjkMk4P6ySNv\n3+7l3JXxZwQwgJeV90W1tPklzdlmcfbenMv7PITSAXdEyalT1cuIm9ZPsyBn\nP1b7uFBxVmTkabb7YrzBRfk0JPnC4wa8CIY+0D4F2klZfNj6wjkGox+LR9fg\n9Lt4fIi6A5vFcTy54QhQ9CYqsfxrbtN7YW/IoFWLPYmE1saPoJwVJPQHnUWC\nUgVdLm+4w8WFkB208ybSBMcdgXGsRhYRc8YbaIkjmS3IhcuRkefA6olwXDPL\nIbqS1xxxdNglY0pEa/Zl8I1YZibKdCrAvR8wHB70psSSqKzIQ6EzWG2GT7fG\nXVVf+ZTv9wHS2NrJctSAmLKvO4fmpkX4eIzuzFSh+mXY/WkaytGzBdbr7+da\n5mK5pewfvEf8eDdKPq7T6dKW+C/fXlkRe/8jdsmCliOQhGTJDZag8ikpAapz\nbfwpiJc4DgWj0vzJgLbBWJeLe+5IBg0BQc+oabUwavfhwxOLJ3vqlgCGqa0m\nQnLD2C/uDpWkQvVh8Wwxicyn1BQKsx19jUyGR+L4U8nVy3lGUZFrKk0Uf+4S\nAq2y\r\n=gNAq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsz8cKksWG3eB55nd3P+vuRfyxWo3AQ+HYoNn8hWghyAiEA1GTUaCqExECuM45/v6rv72d3EtjqJL4OEBAO307VNDI="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.72956_1622446202397_0.38858983041374984"},"_hasShrinkwrap":false},"1.1.1-BETA.74556":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.74556","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.74556","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-pffDYs9pqPcpXLArNHjBeP5hvaw7K5X9mOJAbPSOVVzeadRP+qfUaSiSe3PBN4yAqXgGLicHjPQ7w50IWRnWYA==","shasum":"c6e68535489e8c45d9ee580b62de62ef539455e0","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.74556.tgz","fileCount":8,"unpackedSize":17241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJQ5CRA9TVsSAnZWagAA99EP/0jgrgY7g7N9F0UXCJ4A\nw7GmT/hJAorwJGELOy1QcF+tYGxkLRaaFQghnCoi8c1LlC8he9DyvScr1STv\naxAfZv0TYldkO145JHHlWJi50SdsoVFiXm0QMRNxY2r6Eqfq4c84eip+y606\nFEtPFMz7rRxEejaTKOUm866mEwHFi34GCIpaX9f1vHy/SB4bQXqn30PHy/aY\n8kqCpt6htnKmADTcu/nNmGDsYW2lDusMxStcf6XmnC11GKy70O3AN6Z+51mm\nbLQ4sbBC9OgXEJxXjTznYLeArWVvgfPlAxvSzeJef/WptF52xaq29eyn4R5x\n0AfsFzmWH2AuhAVGnJoLMS4i7EmSxIzi4XeAkPKqM1Pr4rUtiH6locFF2S1h\ned6KhTRxJQZgjzEah88vIQ+8AQyMvY4KdMHovH8ELFoJhj/zbCsu2z/AgeWE\nZGkpja3CekI+3r+/fhTqsO8hAZKYoWAqThDd/d7B5oN7WNrMrXm19oi7REN2\n1QIxtO9r1cP7HvvopsI7fX+I95W7bJ2S/WwuoC2qDZU4lsPyRI2Sq+rmiKSw\nyPrRam05EBviPvY2wVLPZDYjF6Yi33BDP2ItdehyFV3WSUOnjbmApAXebhma\nVKc0V3as07i/W7ZSKmeccO9sVJIuDI06HKns1iezmr32/tcdWRhLacaY/bhl\nwxLX\r\n=4DVG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtp0Ybn90Aze2wwvhCrXACXbanADLJ1Pn30sxRcuWMNAiATtBmU6gAGgvLtnajefOXUbIxZqxUWAGvbuWVfUjE1iQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.74556_1622447161231_0.8591635167167986"},"_hasShrinkwrap":false},"1.1.1-BETA.74622":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.74622","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.74622","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-otYxjs8oENCqTLdamcN9ST/Z2xc+41wk6XlIvxZULmHIz2mli/MyX0tTrMbN/p+H3Hh16vNOAMs5oc+JF57q5A==","shasum":"541c4a6aabc6c9c63635f9d3977d207cefb16c7f","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.74622.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJRUCRA9TVsSAnZWagAAP1sP/2MARORJIG05/tT/gigi\n5qHs7RspCuYNP+fqhyovrZR8WjktgEA+/179ieNA0TDDt8F1UeYP2oZoTo5R\nK2Qexgvp/tH12xm9ov+dMMEuna9bpJOPNmZc57p57Vri7uklDBYUVMHFouXE\n88fb5kUaOpJHyxXjwVxS8UtAhdUAvbR3RNd2W8H/CcH0EcNmYjaaOPGEOCTh\nxAUTYuM1pyqO8JlQs4jGYEHoXei13/qbLGxpe0584v3XyxSgI/qA9K3PYd0K\nOXcmB7CwbT2OKc2XcT2wC6tmNCZilnr6PeMad8pyJY8NvZsbKUFCDLvpbQZW\nQWt5WOEYh9hvP11eAcd0iFEtdO73drGObTlJ4UnmYePOKOSTUpmErKVY0jn1\n2vbnTRj6BL6Q0Gf9zinF1VRbtM7R0Hht/ptLkJ/Ct3bzkeDdhkAribegIzUI\ngpKHQXPo9iflMgqY+MIE4f7I8E8GQc0wkdCpV0WRexpIwUAcTGMXyXkl4f6m\nr+kcC0FPgJtzLeNbjg30zrgfylZhVlRSMuw2VOFdSTpyTFOLeTZK3KO2+B1q\ncP13COPY8kYvGW4vNNW7UYg2vDeNlyuxY9cZ58K25h9AurXZ7oEUIaozDJ7S\neSFfvdhmYHe+0oeio9cTqmmYJrPNdMRoButrUQwhRZKuXd/pIzFAjngGRCt4\nizkp\r\n=x2Eb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRZvm70m2q1bL3rUfqfsuokBwz9PNZy3NDFPFZ951ClAiEA+xPK1ZCQG6uiH8d6u1jH6AQIOYKXxoIdQwhz5btLE8Y="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.74622_1622447188289_0.005582479280366925"},"_hasShrinkwrap":false},"1.1.1-BETA.80334":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.80334","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.80334","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-pPvRY/njimiyjSjicOYlStbi8e5ejCEx0X095JEeBpV43RXp1d38YlZNr/nAIEBZZgILnCDzUXR+HXI/kRebHg==","shasum":"4f5212808d64bf590d7bf6436a9be0abafb2e041","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.80334.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJhcCRA9TVsSAnZWagAAMz8P/2R+ZWCYKl6EPDwbParM\nlnYWrO1I6AKKtl00uz0ZJo80dc5q3wPhtGRjxWzTet9IQz9s3SlZSEMskUx5\nCmamPWGzUZA6mk0IkV8/8GlTf8Q/hVDZl2dyVTmoO/io8Zr70SUm0fiO6Y+v\n8eHrxp1jub3kIht7C9MU9n4QQqeV2AQH9h4BXJic6sElsY0SQwG1b2AIlrFX\nR+KwhbCAoVIihLjWGtgTx+b1SA1UEJ2b01isMYMOIr5o+0UTO9Xmzk0brtCv\nUN70xChiRMYXJ/5oOaOFThm86ZuNp5pW1oA+vnsd0p92KTMFqoWCnbQrtyq/\ntiX4xDRhVSM90KJT/dSE23drBb7K246d1EyK4DCKW03EX1uNORvntiKbkQBl\naLkEdrHZY2GcwVBO3pediJXf0VMA6HdJNjiXUDx/DyvxnKwqDAckFJBnlFE1\nkvzOVnS2Mk6nV55u1ayLm1qnbMSOI932NMKjAi05zbWRFNNtmlA85FpXk4jI\nBPPFDCOGXYHQ8Hv5+NRM4tBiKWimddSKzS1io3ezf7Ts06yOHdUiTCdDy533\nL6OsyPprXPvGYgynVIyy48F6q5wopEW8NcDDkJGVnvcYCYm9P7aOcA8ZlQYh\nIP77ryvz+OCoRo9aFpqME0wAMtFbRW0Wx853K9JdD71guENrIZCypMPqgdX/\n7dTk\r\n=I1yP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrDQ+ENXCWXX7dnlsFn1/g7i8GplcjyIlL1SQSk1SEqgIgFjx74P6Dr/mBdcz+PFaHe5sxBp3zuTamPV/TV449qbM="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.80334_1622448220511_0.6566463608315398"},"_hasShrinkwrap":false},"1.1.1-BETA.81321":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.81321","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.81321","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-E2B+hIQ6dOpHBRDkmOl6a+20yRElW7hG8aLFVY9dm/psTclKWrcpnx561GPUcqxyH0vePd8uHhQkIGxP+YhI0Q==","shasum":"750a3f12808a0b743156c112bffab6d828e1f2e5","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.81321.tgz","fileCount":8,"unpackedSize":17241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJqnCRA9TVsSAnZWagAA5pEQAJH5+/8figXvfgbwBCr0\n7ocjJhxM2m6xi8MX6XBCVAKdTLacoV4+DlVFJ/rj58e5V36zQzadohVKGBck\nAVgIIYjl+Y/mPGfAcpIkSHY0HvChpoZ28cdcpIbYzAnYA2yOT7otBqLYMpCI\nBolRMNg8DLPBF9xQy9YfYWKEqsHM3ePR0sxxwIpdqStzKv4sG5J97AiJFiuG\ndoFrIRJf1b3TzBjfb6GWXq/WQAOC+IcND4PIKuUa/W9p1lwW80PsJWEumJgc\npVH1Mj7qj46qDNM267Lv6A7oDGe8SBqy5m4lAgOhZXCR6pxzb0H0qn7swOa2\nl5rShG82BrcVBThmqW5PYwRs254anYkVGoY+1gU0yv69TW41dyguBY+OFXVn\nIwL0Q3+D3Kb8/O675tsvWSDXCf8QTylO2RU1hPyT2Q9LVo4jVf6ckAZThWA7\nxLDKOa0LFPIOc8SSb3J4e6aBg0w5dTZqH26wh2ElZiTkJnSTKcHd+os6DNZQ\noFpFhIiPKQ24EnXQYJhdS68Ygw6V3A0LYYvJ0mGk3TrtUiI/7roC/swbFuWh\nxJnmeGio55q+hMWqDMxOH+q6lna0kwAynWJ2JBYXzvQL9ax7nqIDMaBXXYy2\naYx3f2DiVBVCjnKhtD/9QXLhnY5ib0kkGMKHwCqD97jB7+yEFNHoxl0tWBq/\nbqqd\r\n=rZTB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkHEd64Ai+MGwxgSNmTU/Dm0d2A/OOD8SAZxwlb8p2UQIgSujq6PWZtKjQ0MvcCvVaSjpiJ3nrx42+5I+fN6pjTa4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.81321_1622448806751_0.1374298147096089"},"_hasShrinkwrap":false},"1.1.1-BETA.81429":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.81429","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.81429","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-RDk2488MHSwUMjLrkylj32kFI2yJkuu0oq5rstD4hsq6HxCgZKFnDb2CHgIdgeqiNb+htVQ2OfdCNoNkE6yOGg==","shasum":"8137ee80dbdce5c14dbbef114a41b1606002e721","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.81429.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJrqCRA9TVsSAnZWagAAPb4QAJSPeo+NfWDWUyqDQ9hX\nd742LZt8ZRmXjYbYXVW0McmkIrxORBkkqQiXJ50JbqS4dUhQwGZe4sAxWoT6\nfwRzD0+SHCoLj4QtSDXFDlxZTp/CspTKUAZX60S2nMk+HvzjzF4ks6kkzL5j\nNSOu5oVEnXfL1QON+ODPGVL5QjqK112v8Tt0qt/kHm91w/wgrIkDFxXtX1Zm\n3UWhFnQGS+L7LcBhGbHdoYSuRCIdO43aFW4UnY8DA1RmiMKt3pvGRHV79Y+j\nX9Fx9oDqYs4o2gqZGmp77Su0EoOgdb96mHjv6h2mRl0+3pU69b5hAFLG3UoN\n3jDDQrnQexSqdMlBt7vBp7AQ+rEKYPH9mBHuWY1HrWuSjhE8kLwM3cJn7dqP\nmgBkvDxuwk0KmsnORQqrk477ZZOZC2raRY5zCP7UxrjrSyolU5H/ZqRP/xUu\nxy3iz8yubb1BHS8WrTAePVxcUrjfEae+vkZMgBNXg0sF4HWp3B58fiC8amsM\nycQlnp0VMyaxAuZ4CkvvSxtZmR/uvTPGVAy8kh8wQqsIM5GKWMq8y39PZUe1\nFVGMNYCax47xeXdTk9OLBh3quZlk/KVaM49wAZYNHXnlPqmPZStBSq/4EUqh\nreX5UtL52xsbB/eMTEbS7ospBhUULt6tMj+2797ZjbE62qd6EeUzsQfz2ulP\nPnYS\r\n=a+d4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhvzL2HrmNV0q0AjCFYO1RAlTx7hKd58/Zmvq+KuVshgIhANxlbi6Pu/sodYwdQ+DZ7entAqDJQQWNt17i409COijd"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.81429_1622448874577_0.8998205842691651"},"_hasShrinkwrap":false},"1.1.1-BETA.83815":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.83815","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.83815","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-/Hn3qJrnsfcSJVTbiK9LOjdQn/EN9AbV+gJjelnggqZDXkcxc5UwwVbqqwQmf3NLf0/Er8I7AgiS3XiHSvc0LA==","shasum":"d49047cb5857588dca406d46cf25fb2b511ce578","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.83815.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtKB9CRA9TVsSAnZWagAAVQkP/21AVVRkz8+ZZUM1w9cU\nmMcKPDw2057Zkgtzb0ty5epNE9hnuG1zOwNBlMEk0/FNKo72cZHd+0IL91hU\nhYL4wOJXYGdb1C2IBBpzxq/8GXOPTkBhdv4g3clZlwEU0dEJoa/vafN5Ngrn\nGZLvzix0OWlVrqxy5+cbUsPJzib0vydiiD7pbn8yYTzT7BmIM+1fYZ2X+bMe\noVlfjmJ4/QmrVS+gozKtqwgnCv4azTiGKyijSzwqJXYJyVW3s3NpOfleiw/A\ngSHne6EbkqnisThU+Ul+4FB/WrkdvgnZE3rkHNd24GBVGk1Biq21+/QthDs9\nYXhvNgirxbN6xoI4AUopf3wD61O6UZmzxX2CMKKDaw6Jp7IiQBp7t0XidFxW\nu3V7/877zh7jECWG4flWyH0Q0fOt0G+L8aPyH+DRyu7US3hsb+p5H6ptKvua\nfVf/XE6Kv7q2sHaeaHm+qiR6dFqjFDTz6kDXzYo8ajlVirQkKXlZtjh4xne1\nIet+1oFkudzM62XuLga5sgY7v8Ifpwz9518zUyu3ifjIq+UepnOPcBjtHRXg\nd5Wuks1WGBHuxEsC6Hcj3YGelXwtvI2PSUmDDsDQ7mYUeFe2j0fzGcdw8gxg\nAWqBge5w+3E6SQfnC+qBY2DomhxFYLpOFvwePlrFuFv7p4SlHD29zIvN0qjy\nFNUb\r\n=3Q/B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCNqCNJOL9L5L1jNlvvR7HK72lD+KC7vTYcP31LQP/jAiBcUJCyHMNHUUS04Ee2+hyAHdNffKt510+wxbOyqFE/PA=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.83815_1622450300923_0.49852717315006156"},"_hasShrinkwrap":false},"1.1.1-BETA.85725":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.85725","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.85725","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-1NoSsrbMyJpSsYMOxQ1LOKtxutl6BIEPvbNuY9tDyDw2iHEEsEnM1EmtWg5zey3JDEvmhWtLutaj3R4sC8b5Rw==","shasum":"fe0a99197cf5ce1cbb635ac0afd87c57a16fd6d2","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.85725.tgz","fileCount":8,"unpackedSize":17241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtKT8CRA9TVsSAnZWagAAorQP/jUVTT9zswdOeI6ZBL/2\novv7oEG8f3SWgvWONA3aJFEUXgnfYMIWF4HHfNi8veZih/08Ho1M8swSIl03\nIlsV3r/YTHzlJOGeUZ+wY8HgtJxpQ7zi+x98eOX2zu2ij+szX6eU1Zdkmwlp\nXW7l9jxKetg19YWZtPf6ztqw7uIGRX55HBVV+scA1FhA7cY/utP+pNtVnswX\n1fg7pxdbAwLMXIrThaA+jhz09N9+vjr4iTvmIBcLCF3I4fwl/lrtjrCi+k+S\n+AW2+/sDSDD2wwRtB/juy4Du0Inc7UCrNgSuE6enTdAO7ZP7DC9ieisswfLX\nMGiwYVxoP7J2cdhuUgs8rqhW/yrtzqqXDY4+zKP6pAnvYS9y0/FuQ00ZZWPN\n0kzdmBdWYJA93YJw0+bglc4XMaxuLDcsyW2S8lSw63/AVXmsEvSDhPGWXV3f\n/gyEi11qr05u6G+rk+skqmMvdwGjHv3mn2QgHQbF1J9Juky4kUxlajeob9zO\n8jCtXmAqJGoUslH/BEaqMN7Z7sloJ2VbQlASB3uwuGGOEHsz0XrpUbFznuiV\nqGuakUmyXcn3h8mWmKyzMwhyDh4covW0HIHW6J36cFLzCYgopin2Ubg1BRA7\nuSv0Dm0ku7HQcGGstj0U1ZRLsoiYj700pJvuhvZ663JXyy0FD0HwdLsoPifT\n6eAF\r\n=uE4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2Afjmjkqg3+dsH0eAkKpUY8DpG5rnEqMHR4u7kZUrSwIhAOVUzk9Vy3HwJTDHQDRwD6mHEaO/K6bBD8PPWh5E5CdL"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.85725_1622451451849_0.6288589401156592"},"_hasShrinkwrap":false},"1.1.1-BETA.92551":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.92551","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.92551","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-1buCOLW52KjAawDVXNe3+629qAGvrct38YvuEzQQPELHjSn7hPgmsqEnImqZHpMGphUDh/sakm4O5RTrvrb59Q==","shasum":"452365e29c3d3e2bf3c7352cc527bd09192caa23","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.92551.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtKukCRA9TVsSAnZWagAAfdgQAIvbJDTvXcddf/omABou\nD2WD641PQba0o1hckhF9nxOnEsTEbuzYHA7OZcJhMJ40NE40AM11PDUM9r22\nPe8EHO1ZctcHUq7yzpz+Xc+0uoKq3l23eiQQ5CGf2i4CZl2gLkzoYAtbUXwf\nNNLm+UdEIu7jTc6qe2xaW43P79lCAgf7hDkdrnWBQkTSB7n2xPhD1gBta3qS\nqUcFAaiV55Zak+81aaT9Q03OoIZ2YJVpVOnCRZs3YiVsdowJw2WlSdg0ZwsP\nDjbs6gskI3GVvizSnW9J6j4KD5aBDprj3xp0eqgrOs1pNgJ1RWEmZaXObmBC\nl5cH7yW//pojb++0MK92ZSjNawL/xoUCe7cUn5TTqurMfcUIBpw//TcfnhXr\nnM1mgf/+/qe2i3p2Y9mbXUcwDGSAMG8s7DlWyt/6T19i3HJchJmWajhwibQq\nNkJuIPg1/dbYNEsMQmV5rg+VFbu307VBRlFIrr8C5sqEVqUPho97iyU+gKja\nfQJpTQQkXFikTzsoIrS3Ic89O3EFeZhIiK3507Pj4Ffo5lkA315K6UU+qvvp\ndAy0pu2/fQ2i/Vy3Kco55Q0h5/mnKpNWo66YRfJz0IH4eOfuqYshsgsZ1Jsz\noPhnn4Dy36ec0FUVUHXaUofS/wlxuxMehCCROVx+1QmHZ0c9MKvzLq/1fNqa\nR4k0\r\n=gpzD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd2KQIE/O4M+uwr/Jl2f8VTyUUvfvIZizkBP8XGWPakgIhAL0ZP7sEjk3ioWtBZXzy6rRrD8pRqA+ImJrqVaRmixR5"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.92551_1622453156040_0.08048975272992553"},"_hasShrinkwrap":false},"1.1.1-BETA.92614":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.92614","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.92614","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-sdB8Ltx8EHLz1wSEqSvCQgKhQE00nCMPxb9qPaAoUFLxth2MXVTnzzOCeaZoddVdejKLLezkoOGP+N5nyHEeuw==","shasum":"c90226d1c2d64f8a8d9c4e92c74f623cd455a44e","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.92614.tgz","fileCount":8,"unpackedSize":17241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtKu7CRA9TVsSAnZWagAAVwwP/jE8gtPJWX/hhk0W0rBa\nlOZlMjDovgIV2tP31Mg2fKk3WJtBkRMcMoRDoPpBoR88uM8NPkN4ffo9iyr2\ndtM95vvFVyBiMow2nD2r7Rbs4k6nrmDWHS29VpFQK0bmCkUeF2TTWvy9pyVj\nOmQ5pIJ2YooXS6U/1ptjsUr0T2wgTnA1E2IRBvwNhXCgZHUJi6zbVoaWsyJt\nyr0QWmReBy3t7K7DAxBTdFK2jriD5NxUaLh8JYnpeODRcNg7gHHga0dbDuOt\nRSxJYGTHQm1sMU+rhhh4ja8IgxiO2J4IPPHrxSMq7LMkL+8c5ac1PEC+TUar\ndU/uqSwyBFXPK3LEmQDemp+s5GUoMIkcpT/kPwHKEnNGMzDhFSxX1jNk7wCw\ndJTR/LX7fjx7cZLw+OcAB97phI+YRlzMRTu7/LzC+AaHu8u5YY0ZYK4UAXDD\nuCF0I14q0K0fU5Wq3zAwOLeuuWp4PTVNQAwX+EG+PamD8pDsIeOBEihuNnwV\nT1ZPQvvenu0Diwqb2/lyq7wLAuG02Avbc88EvkFOF2wM9vDe5S4gtOj6+MRW\n+h2+vvGtAHglcQiNsx6artP4ngF51U14YG71dwNMRRwQrhMMgUlA0ty6lPYv\np6O7zpLdVGraNcqhiSqIH7NFBPqRXQE2V4yvihhaMxgblNRiyfLHTDI71mEM\ncQ9B\r\n=5mtb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTppuhue8eSuBp8xdOf9Esp5WSYl0keuVxa4WydlnyNAiAW0/M8YxU4AZnyEmF/IzTxQzNobbGmt0QjWQvFT0S/WA=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.92614_1622453179260_0.8805142490513487"},"_hasShrinkwrap":false},"1.1.1-BETA.94934":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.94934","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config`:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to your `scully.config.postRenderers`\nexports.config = {\n  ...\n  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.94934","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-On6jQ8+bCZ8P5ppI4Xeh3/v7Mnt6BE2Qygfzox6HIOLnutm30MbrSN3W7oU6OSZjiwZsfJ9pYn4De/mHQDxenA==","shasum":"779b5e3d96ad529161e914d50ee2347c156ebaaa","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.94934.tgz","fileCount":8,"unpackedSize":14378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtLEzCRA9TVsSAnZWagAANMQQAI1mJ31Cv0H3oF45H3vI\n9UO+mxLjz1u6V1AYdB4Z+h6mq9xkwM1S3/hb17Dv9sXfHHtviwy0YRwPfLSR\np0mVdpadlTFJ0IpAsBRu6+TnDeQFtVGJA/0xhWcvOaVnkVg9qOSpvUBGd4vk\nENu/ZZ6KJSoooRFgIo6r9cVv2UdmTlNXof1jq8OOe81RHZH4qC9fnydyjQ9g\n/2WrxLYVXJB0KEgbsH1JxpXzl0L+6rJVdkXcyuhwcK/CVS4nGd/GOu2L2l/A\nGD35cQ1JDCKPsMfnQ2R6G2vDRC6bd9WXgNLDiTcoHrEs/7KlhWmPO/U4vBV2\nAIiN1wWtajE1+lxlTQjSoVdQ91HfbGREqhO69WTVg5FCfYox0O360/a4lFIt\nfPkhb8Soj7f2v1ld9jUkQz8jTPRaNPwGioiVTZ2fq+sthRLVeFIwwjffzcUr\nDaFB0g5KA9io0Rn51zEOJX1swIlbJqFLktaQWE52igYadjMxlJTW4qDBJIhR\n4MpsoMkthjlsOshoCYxJvQ7ei04tskgXlRYpSUPUURuOye+Uf1rLpci0sLT7\nZMTz84P1gqJsEwozWQqEUlKnJwjuGRa2m4OiPEa1rkOia7sQiuScQtrh4K1M\nZtBD080F4eDXGOOCHmrmPWe9mlc8n3WUUgSU3g27KFvzkSAY9Hc543+SjuVy\nESDd\r\n=I1ZE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOoC368w7hGDzhySUbKKh/1p0RTjQV17BQ7Xd9uczPTwIgAWaIO/Nlrw/QpLgHTCuzoR7CyZ2hcCKmNRKGDdnC7OQ="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.94934_1622454579543_0.884037493533385"},"_hasShrinkwrap":false},"1.1.1-BETA.100209":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.100209","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.100209","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-RFkKdagO6iKNOBFM+ZjG4Uqq4/2R3EQZvEiQGtpYvRhxspgUTFAwtp7P07wIukcVXaib0Qgfhr6RjMUrYru6xw==","shasum":"67e789fd458bb063672a326fd3ab23e3fca89be0","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.100209.tgz","fileCount":8,"unpackedSize":17241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtLQmCRA9TVsSAnZWagAA7m0P/Rq7uw807sQ9REF6HCRP\nYWfNmxqhjgTYyH3P0ACPX4AGEWxKOc5ZOoNKC0hxec0+nkVLiuMeAMpNZfnT\n7REw//SmK667JVldxd6L7QqoIcNms9PhHC6ozqexrJeaKejTsaYBLXiZwfg8\ndc2UgU7bdNCipIGgJbJnriChC/2M2XLpFrXbrd1X1ARKol18D09or2U53Umc\n1Au/GYO1ViH8P+CQNqvgrcgAhka6u3E6+yT1Bpoa5hkBXsUt9zFupyPz9dRt\nyGw5UPSyLAZxh8V95wLPQgnz3QZv0Ro7nlDf7laln1Vwg/+PUkGDZhgze5DS\n9DPUWIUifZ7IGV95WTrbkpkOcLEAVWHYdeSX9fow3sLvyB+L4cYUI8Rj2gpL\niNMfk0Lzx7u+W/M6/6ZuelSfj4fQ9gQWZ/qIjK3HY3l2uZWa4+vya4/32ONw\n9WiaSMNfSMvLIm6f2/U9yqrinpx/DHllmOVoP9U10nG/tPXAHKDtm+n3uYEH\nGG/RsH0xqJ+my2w2iyMBFPGLNe71bZNOXCmiV8SZneNQLOAiA4uT7jzwHXvN\nPZmqNgzafzRY2FDdmVnkZYTnPMSdxb3dkXhdJSCRfBbmLXobBz+guKgKX8Pq\nOlKS/AS04apmSXGo+dUpvDqPeU4MzHBhHzgnYEnn92dtwMkQ92mUUldMHh1i\nF6Qg\r\n=LhOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdddGPkVSAKzW/wyg79Zl/kSU9mVZPfubzqaTqpJEapQIhAMizrIjB9CZfNE5TtBnKehuaZSGY+I3DTuLW/SdnwQ6S"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.100209_1622455334479_0.2273144795902613"},"_hasShrinkwrap":false},"1.1.1-BETA.102348":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.102348","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.102348","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-2pCwMdLSG6NeD1TuqzIZKNCQ+Rmrp1qyX9pq9ZOntW6mqdlrbSs9y7vD4ouI2LHolrtI4YQYR+vf12SQWBysTw==","shasum":"7bc7e69c6137393e0dde011b05357b5718bb8f19","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.102348.tgz","fileCount":8,"unpackedSize":17241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtLk6CRA9TVsSAnZWagAAbqQP/20ap/sGZAIzg2/0TFtx\neqgqZZOzn6uHo1xiHC7z6D11antuRGbdTMpp4CGGjwn11r5yKehJwuPQOp0E\nNA0L7FPVwSF3xziy5vSHLIUjbOyf5RUUuLYAi0pwrJP5hIfDwLb7Xr9G7S1y\nuVFD5UKLlSL+J//N7rizcW+55immPPOXI7hlvEAJ7frjKuQL2L6sn0PKiASY\n3H/BThE6U0ENDu5tqB6csxcPvfX/PK8VdDn1X39kDyFdTUuSY3V4qMiBhT7H\nGqnDUyyugGpLeEv4p6E3sOw2T791AQBlZLbZ+0AF4al8zYRYW6Bawd34tvsS\nb2MN3GzDV5yYKH5lzaYwQOSOclfZpEa9fOC6W/ND/5aJ/hV2w+CmHgg9oUvp\nzZQYNhmejRWLdK5L8h/r9h4OqnuEKIsVv+DooapR6fm7FhQSdClrQJmz3q4n\n33+ilMvhE8Y+dmJgyZzTErBFtpS1HnSGgsmXzXSDGlGQc9SDOjAyFDvCmEbA\nto9aCRkg5SFosPwMZ7++rEhdKjilB52ieTj71O8pzXirTa+haiAMSsVcaUYX\nfNaP479RbiShKzoJ044qxOzNlwiOleEFciwu03szU163/P2eMu8YdP6g0q/q\ncqy4k9UM5QJufqffqeen0nscK0kkTz65cwwOq3sgm/FONYhGJhFXWWeTk+OT\nyOvR\r\n=afXC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxDKV61lAqqt24+sp3AT1nFAESkFBf2D/GHTi0V9SHoAIhAL/4S/9b3M6UmPPKwNszTfjZTVx2B0mcmdyxirxN6OPn"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.102348_1622456633945_0.3097080879418328"},"_hasShrinkwrap":false},"1.1.1-BETA.140239":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.140239","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.23.0","puppeteer":"^5.5.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.4.5"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.140239","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-+N/GAlkzOrE8UDKxauX8qIHD4ySiyqXreU+UPp44hs+xbQD6yESS3G+L2Y8E2XcJuH1447hAxk9RrSmqgMGNWw==","shasum":"ba8df25260c1b4ba53d80d3d7b950e23773330a0","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.140239.tgz","fileCount":8,"unpackedSize":17241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtOyHCRA9TVsSAnZWagAA4dgP/2+NpSOU/vJkzZl8K2/p\nZ3hlHQRN2RaNlC7N9OUrTOsANTNjUsHf1HYZMapw494zriQQi9PwIBvcCM/2\nXLpiLQMefUCeXskYORuZzRhK1Er3CQ/mRFzZUEHREC+mcYchB+lU9HhVRAn/\nW+5kbm4D6WUphH4hAlEicAmdaAJ5FCGIqgo91180IPOLY24dwWHOwZqy7erQ\nAMxLT1Se8qlMzo485Ek/wcTuQWo+uMzDz5YtHffPv5VWiASTy697CZWXj7Y0\nzQ5O7/a88zGpg5w1p4UpSoXHpk+p7TW/KoQrJ1E2Eg3j7XcJWQG4FRD/lx/5\n7GtRnW0akJxb2mSU5TsNB7BKk1hP4cc/YlseOFBx8W5nmZ6TqYgAN1JWlIig\nUvUAr0uQd4u+w6Q0T5Er8I0Zzoo6CnFDV37xpzPP6owH3FFuYsLTmnZw0F8q\nILJuUbmUaBc7kD/zCrIEG+8EIAqDJiPz7fCxxJvSjDjRWU2W/nTeDyKL41uZ\nW0gV2XSPUz02umsFKbbXixhZ1hljiiCpJhlfiJdGCEktux7HVsRajQjI+yjv\nzFuhRLGCfzAjOoGUoo5IjRG1gQ0UcnBIJKFoCeCavb+xHb7n0kbzs9YldxBm\nUA1eAaRdpurT+GZ2icBFH2kAUFqreR8GPHArTLTHStxneRD5BtVfAHQcWtde\nEb5I\r\n=6/5i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw2ZTmE5EfBXYBRV4PnuPAQjj+wfCY1GuW92CYXGnJaAIhAPw0SNlX6IT5/f4eIkenyJwCJX9uQgBFGV1SdNRv3JN1"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.140239_1622469766772_0.17532621395653747"},"_hasShrinkwrap":false},"1.1.1-BETA.44311":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.44311","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.24.1","puppeteer":"^10.2.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.5.3"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.44311","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-tJCCaSC8U8r/0n3kE8zQGNxkmTeZhvanF+rHctlfvez5tvFxMpMRjueYDgk/aVbG4EJDIlJ6zEMgjjkWOmYyZg==","shasum":"fc04ab5835aa730bb94c17a42001df86d77157d7","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.44311.tgz","fileCount":8,"unpackedSize":17242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEgPkCRA9TVsSAnZWagAAE9YP/ij/SSaq0JVK+UtoKsYd\n8ZsmjLZA3WvlIyBhYYhrbXPHkfleRyr8FiflXw6DXvPuXEdtlJIvcvoqilr4\nEBPlc4YiTxR0ccjRO+Jb1WE0iMmjJaqbIzJSO8L3c7nkoUQIRA3a1Sj4vfxE\nin0dTV9ledg9gVQhW3bQmQJEmhv7WBipvEHgqZdwb8VnZbJ/yu8nV6fQRl2V\nJ2rB4tEovuGxXgEvNZu4aWSrWiW68Thpt4YblrKeVf6B8sRODsxtS9lYnacj\n4UPd1wH02dfrHGQXqtcH6REy4g+FRDSsULaQoRAHd1r0kJKBXhkEdEEZogE+\nPMtARKtpx4fEMMquJ4b/W+JC2AEn1+P4mXTxABbynTigFLI/LB17qik4Wruq\nSP9njk+YQAcb2zeKLY47ip5uQeBw5c5AlbjFlIewpcYJamQI6/qxloAyJw8+\nDTnoUNeqX+Of3uHoc1z1eww+5PRnj3GOyNV+x/h2R4Q7dj/rgyzXhRuH+psH\nrTrVGQu7wN2tOnNn8PhXVqFwaGcO7gH5YdrawZWYps2UmzSSWN2aH/iIqoE3\n54JmEO4zY2DZpMyfm6qdSXQypyOaTwvFzgMN8jD82bjyi/UWLXBe4pwASmcR\nmIG6BRnbP7cd+a4lkTiXo/yfb1nDEh7qPiy3eNsKMoxM6jm4wIX61wQJvrpd\nAAkT\r\n=Ej+p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBuj0pf+UUFQpw89v+rglazcdo3AneqEL4f85CrlYzB7AiEA3VuhmSmov/4Yz6lkz5W6YiyYcBBqWIltyH7kzh5PnJA="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.44311_1628570596765_0.03523599951406986"},"_hasShrinkwrap":false},"1.1.1-BETA.62759":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.62759","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.24.1","puppeteer":"^10.2.0","chalk":"^4.1.1","rxjs":"^6.6.7","@sentry/node":"^6.3.6","os":"^0.1.1","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^7.5.3"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.62759","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-Ayw+b033u+ocAo7+V2+b8kysJp688UxekfBOQAD8vqT5zWZFZvrnxMhqHuL5BpJBR00TNJknoq/FrxndIz59yA==","shasum":"e17e0e960b87e9d2ab64c4ead0ecb84475283b7a","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.62759.tgz","fileCount":8,"unpackedSize":17242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEhx0CRA9TVsSAnZWagAAG6MP/iGaRN50QSB7nkLL4vlC\nqj77i/6Slqyf9zysL2Gj04TOL5rC5VtfUYUz56kWh1NRhG8q/VhL9gGAkXxm\ntB/10tWWsPZOwosdzN7Y8pR52zaqKlMLzgZJkClolFLqFLsQPghAdesVUmfs\nggjTne4kSZnXMBIEPJZqynKEW3fzkPrKazlUsgH2BXrMsgrenL94tht0gUhQ\nRMRTKzgjbKXH2J/Y6uw1Qy321vw87nVJWl2djwDhCTbULYceZGp5AvhcF/nz\nePe2J79NCIMD4auVMgZdp9YnbZAoScNjU8+W61p8tLdqlZn2mknVIpVIhACg\nUd4yx2YubQjm2w0CTUyifUDsYGhRpBNy2ikqazDJ4pggcYYZ3UzBsRwKKptN\n8vqjem40M7kpdv1cSH3IwDuo5gDGag/v/xKeV5vMresL8cMtkYRqcpdmOfRy\nmY31YpqgACz+DD9ZYoRU4id+OUWvGpjuBNFJw+V5en1IlsEmiJlcS8jEaIy8\n5TcUK99PR6se4EkFY2d3qUMByEmEc7qdirAV1hPbNp6iw2Ugw2+cOoeOQwTC\nA4GQeGLtZMaePu9sudiQ+zMFLQoHCtohg420nwN1DfUhbudx2XPibWzPhndi\nnmiRQUhd0FRGA7jQVg9gMuSTtZldX+CcoOsB/b+21Sp5vC0sJJ5d17EpXXzO\n05Vr\r\n=wB8W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDntb1fVK4tLVK6QrHGYxATjqRwt+oy4pbUWkzhhsyGigIfGlbs0o8UZbDgoUZ2Fg5bfst3YPKfj0Ixm8hX+eVd0w=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.62759_1628576884660_0.9534058448070191"},"_hasShrinkwrap":false},"1.1.1-BETA.105415":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.105415","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.105415","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-5PDlyx5mYWFDAJT6yIMy7uVteLjbn5e4C5dIOLV5tG/ix+ZiSz5cGR3Lge677hDM4rBSxWj4gVnjMVwuy8WelQ==","shasum":"9db3c8236f64de5ea02bd4c9aa46c32a0dd74568","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.105415.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGsw/Li1M9bmjldvOqAGrovvVBHqozHjcZUnfOkNPhOSAiEApQDFjmcgbwXF7rXEAlLYN4asvFZ4lq4uXfIWOh94SPg="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.105415_1632135261379_0.0634682405290592"},"_hasShrinkwrap":false},"1.1.1-BETA.110102":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.110102","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.110102","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-nXv/ucrDN6fu+oaoK7WiHhL+pcqqZqG9qdR0xO45Hile4gt4TIYlhJnhoY43AKdWh0gcZAUv37IOjs2GOuzRGQ==","shasum":"522b7033c1bc8d2e0684d25e88e9c7303c8254d1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.110102.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID06m28ox7Ock0kUclfhemm67x7uRTxePxWCKWtPvkdxAiAmR2T9Xr1P1Yhjmy9rG2BjmQdEHtWnhCMzXS/7HH99Hw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.110102_1632135668614_0.21901183079245223"},"_hasShrinkwrap":false},"1.1.1-BETA.113744":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.113744","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.113744","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-3XmNyqQPn6bn/r252+vLwxi3OloUr93sF+J/lv/PRWDCL+QrMxNYonw1GPGkAQwuoDHOBNe/skxaHbZcUwn1YQ==","shasum":"0fde9b70d60499a4e299cfa8aad7f50011d8c33c","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.113744.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZpINyE/z9I4kyGiVLoeMO7khSsDmdeA0OvpZDMgT8WAiBxeP/8BdsSJ6ZgSeRBHsX4fjf7h/g3BQAcBCoYi2RNfg=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.113744_1632137868990_0.4605704423958661"},"_hasShrinkwrap":false},"1.1.1-BETA.121023":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.121023","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.121023","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-B9Ua50fISOrnZpciqe7hbXl+zSFEhZ+3bgt2Ou17nDUUnQLeZvvXWBogTYTr3XwxvTxDXeEtBXCDYk6AFMzSsg==","shasum":"20401e1c217d94c285611684e64e34ff2ffc8e4b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.121023.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCroLMBFVgbj0qbcSPK3/xdOK3o4Vg3NjQ3G+8U0S67swIhANsIZHmI5cJUoyQgK93G6KXKO7n4soMwOaeTdQaQASpl"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.121023_1632139828025_0.6086119579035252"},"_hasShrinkwrap":false},"1.1.1-BETA.124628":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.124628","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.124628","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-dpbfuG1cpWJYqudHXsJCddHJCRnM0b0sAlkHlj543JO/sq0j31R8nwcyWFr9ajOEy1zAoRG/2DoPa8Lwg0i7+Q==","shasum":"53d44ebf7ecde2d520d1302e3db46ac84e1b07b3","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.124628.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFRcv8Q+Fdt8z4oB94fh+/Kl4uES0kzmzpXscI++mZnAiEAy7vyH9//InVWfaPLAUCq2hIpOmRlUSRXaYLBB16r0bk="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.124628_1632141993984_0.26729810653023867"},"_hasShrinkwrap":false},"1.1.1-BETA.160336":{"name":"@scullyio/scully-plugin-flash-prevention","version":"1.1.1-BETA.160336","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@1.1.1-BETA.160336","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-02saQXaER+crHjPuVNjAqRbYAmf9nnTZc5iWvomySOWFtcOKJdX8VHs6esBCw5AKIMwQ0SJ+rKLDM70Nv0PFhA==","shasum":"74882e1f90df273237cf90342d2811931e699244","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-1.1.1-BETA.160336.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEx0EQKo/whfCyLInF/vZXawnbp0GSAwW6NZ9v9eB3i9AiEA/bRENIwVoDki/C0/LhVQX8LujuOLv4Vh7wiQaAdT3RI="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_1.1.1-BETA.160336_1632153823256_0.27907630068953937"},"_hasShrinkwrap":false},"2.0.0":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-VGmf9/2Sj2f7cRMdhBT5KTZbQ0OTQESkSLX0BtoHhgQszoJ0V6bErupYVQSctm53z2uIoJX+TsWEMIvL3TNmag==","shasum":"5c172b97e39647f56970717834c4bbaa6307c9fe","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0.tgz","fileCount":8,"unpackedSize":17231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3kZE/dXETtJoH4Aji1rFqOIRExoNFiEQBIp6/ZF475AiAXiDn6a74rxBjbGo/iGTezaZHjNzR9l1HCvGb/3cQBvA=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0_1632401745725_0.6304179449029734"},"_hasShrinkwrap":false},"2.0.0-BETA.131530":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.131530","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.131530","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tSWs1YY2qoCsATsBOY/Ml8mIoDK2y2tTJxiNq9xhLIJNgzEOOeNcbSJqFhNVP4K3lNtLudKQ8yss4aImV6OC3w==","shasum":"78b01444b5e85460629a1ed2cf6137c32fb9c9bf","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.131530.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICH7fZ4eZRGrzG7FzLOfLHBZ0zZmgO6RqPDzW1q8pW2SAiEAxAEP5/5xDpIZUBdwuAxzdRjxBUVT/xfP7ZR7foVxLIs="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.131530_1632402936877_0.19199538212143508"},"_hasShrinkwrap":false},"2.0.0-BETA.131855":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.131855","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.131855","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-0fdUSlVJfeFZ4nuYPw7P3857TDzZCDglF3ShciOEK4w/ocWkGJPC4JxsnTlS4UOC7Q3xxT9fUd5jlmv+7x0h+g==","shasum":"7387f5e0062a703fb151d2e7bbccbbc705a723b2","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.131855.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAK/KEA3XZKRz23AZXkPHUtWZ0f9SNRimSntXrb98hBXAiEAgUYZBUSjPAvyIDK6yAlQhFRtbw62WjkOId/1122VQ2w="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.131855_1632403142082_0.42708725032768946"},"_hasShrinkwrap":false},"2.0.0-BETA.60231":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.60231","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.60231","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-uKSINeMZykY2ucJBF6FtdJEtgStQ5xI2dCpI2sHqQFifOkDanAu6NdBEn+7E9JZskdbt7khO1HCRQr8v3PUQeg==","shasum":"7db496d06d8ecf60e084d0a619e79f21a16c30ff","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.60231.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsnYLpkt5ZtD2GtoHVn6vK6xQMi0xt23HyVBfpckwaAAIhAK+MvL6t+gprfhSffqD5eXIHKOO7yKf642ZDfcnWoQ65"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.60231_1632463356677_0.5924808658241485"},"_hasShrinkwrap":false},"2.0.0-BETA.63716":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.63716","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.63716","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-sY077Wj4c9UoSlAHuTNIJJil9FSnO04qDaU62+cO3Ayq+z+zxmxLGjobsPgMK+Tk/pEtD4mgrvpoD19HaoUgdg==","shasum":"216af1552cd40862f6a15ff0a8070894226fe85c","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.63716.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuWoXDFeakNXgEB0CZ5MX2SlI8iVbDntqRIAXWbAq08QIhAJHWlxWTTelvwbWMeOV1QWpYneKXr3KxJIXkF6neYZoe"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.63716_1632465442585_0.24362350473942573"},"_hasShrinkwrap":false},"2.0.0-BETA.70300":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.70300","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.70300","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-haqJ/ZZYkVx/2xEECxPNPWKphpbh1nuVh6UQniOZ44T6uYc/se2bBJwNCqZVfOA9Z/soTXwLpooafWMvv+YVPw==","shasum":"d08ca61ef6e971dd53803131ff201d1ccf12c919","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.70300.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnzDPOVH8f2DE+YwyfmhxlP0doho8/EFb0dB1tWzRkjAiAnRt6Qvif0hnpV5Cj+UTARlfaSRNJl21cxYP74NxXmBQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.70300_1632466985880_0.040790455946965176"},"_hasShrinkwrap":false},"2.0.0-BETA.71202":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.71202","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.71202","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Ah5mxWny05ar6AA3KMPYUlp5mrEWf0DSdBqf3fAUic9NinJOKBcqLKKnUcCsq1FgDvVv8lHrs1mybQ3S8pjM6w==","shasum":"11cfa3c2da74a61357dfdb7833a796212d5f359e","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.71202.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJYbsA+2xrqvDz2LstorHP581iLsmO9o7Wn3CDGuLCZAiB5ByUd1TE5+sEEyW2A3qRAY4dAF8J9RH2SeIw88wykVg=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.71202_1632467528262_0.8398017098149864"},"_hasShrinkwrap":false},"2.0.0-BETA.72556":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.72556","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.72556","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-OZXhMpPn3BF34PyntjR4bc1Ky/6McAqwkEf3FpYzbNIAf3eyI70oBAzdyhfCxPERMYsiw3I0o1SgAGQ/7NnXZA==","shasum":"2ad961cf5b6baf582d2aa85cb32627a5f317cdd3","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.72556.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGr8nHf6Pv/SNTOtTWx6lJVvVgDG0dnAeWiFv0TkzumdAiEAjqB3OUUxBT+uuBeD5u9HoMDxrDZ0PxrhhWPQIqR9wew="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.72556_1632468361876_0.5708448692618449"},"_hasShrinkwrap":false},"2.0.0-BETA.91342":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.91342","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.91342","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-LMfE/qT366QRCP7/lmwEczAxyJt7VzZv+7LSFUE5mJ6ilX24nmiOnYjZLSZHf8pLowCMtZ6Lw9DoujeKY7JC1Q==","shasum":"b8206db6ce624b123a0080e9c1e242deca982036","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.91342.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxzLdOiucblpHMxnY5NZpiux/xSKMi0obghvhv9FFDgAiAK8T2r8+8lecHPscGcE0aUj4z1/cTEekiRgYIhoUQNfw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.91342_1632474827644_0.1950710525124133"},"_hasShrinkwrap":false},"2.0.0-BETA.165902":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.165902","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nconst { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.165902","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-X/QnAFlzdCv5QNnBWPdC1Zaf0Cqm3emmmBcZ5wBlq/6LV3z4FeEi4KlwpkrTPYu3LJBime6XwYhYpUI5GZpHVw==","shasum":"9c039de09018b4f2108e474552530b5219a791cf","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.165902.tgz","fileCount":8,"unpackedSize":17243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCB/nCNJNZ8lXKeyaT3Q9NkmFsNuk3VbnKyJUNnGPuogIgEEfYNLxeFtGqiPhs2coCCNnv6asGj4v1FPr6fJptahM="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.165902_1633366748801_0.7543904772272938"},"_hasShrinkwrap":false},"2.0.0-BETA.80110":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.80110","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.80110","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-39it9O/9cBBRu9dazoONGqMrDoCtBxr6FUJEfzmk2GdAGG8sWYxgfxpp2DcpjHX+H1HMVotdhFxviza8SvvR6g==","shasum":"2818a5d4131108b0e65d133898d2f820dcb2bfbf","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.80110.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8qjZvlTcO42BxqZQb2wTEwvtawSkLVa+pJeo29A+V6AIgerb+Y4iCnqW+zCtKKz7wlHOGbO+ogS731LENGlsdNJo="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.80110_1633420875909_0.09168118205356435"},"_hasShrinkwrap":false},"2.0.0-BETA.84430":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.84430","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.84430","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-I64xMEHWOCA3RCQQnSzyA0p/1wsofwT6yWze3Uzc+TDxY01qBo8wrlD2IScYcdT/qyi0/fTABRZaWOplMlAxJQ==","shasum":"cef6b8d3294732d310b1d5d5a95c445ce82d1e2f","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.84430.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFSvN6my3KYdJ32qkXIyWTdYWczay+F05qd1WnqBg6IgIgTbDF+dbjw6Gp0DWQDTsfBQyXHIlFREcvjvE44oSE+M4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.84430_1633423476396_0.49605626649696055"},"_hasShrinkwrap":false},"2.0.0-BETA.152213":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.152213","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.152213","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-yvPsEEIT9UVt7unB8WziLgXzG8LwqTpZWFb4ATd1jrIz8ZeFCDPjYnxoghT3HUd+WxLMm58ZGc5K0LfsvzQMDg==","shasum":"3b5f529e6174356ec79485fdfce5f83dfdb1ebe5","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.152213.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADzk0dlkqCxT1NI/3GAt/9TyBKl/nPQ2iSxnobheUx6AiEAqPys73B9JB9jyxYECSFB9w5ZOrV0czaqjAUx332PeUQ="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.152213_1633447339055_0.9425510730773157"},"_hasShrinkwrap":false},"2.0.0-BETA.72406":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.72406","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.72406","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-60OwwCayrYGkUrl22rsDglnhjZrrfIAtGJqqmPjNhZDpFRiJuMpek76jIrX9O53T99uYmYY0AGELE2o4x0AjIA==","shasum":"15ee9a71a1c7afd57c3cef546df990547d5b1ce1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.72406.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGA6eWhUuKT84/e0xMxISz0EX1nqmLnc+h8qBcp9oRlwAiEAgo5NrZ8bAJjETO5dh3B1yCp3fVmP4wTkYkdXTAwFr70="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.72406_1633505055179_0.7530114861177211"},"_hasShrinkwrap":false},"2.0.0-BETA.175711":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.175711","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.175711","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-lSqiVJs8VI2HImDGDCBTym/ykiP1oJ00M/5BP9Vd7wpngpccBLVjcSe1EBNQEET/hIAXCpgjwI3jweeLoeVLag==","shasum":"65421bc5d3ae4aa58f8441cf57baa5b567de0a30","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.175711.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDz/f8oflsbJdC2RUd4Mf4CbUtJuMtZGVRmwB5eUSjijAiEAhXxJxpJyK1flcjTCFuxPnA40Hb8vyrklb+07erNSPT4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.175711_1633543037520_0.9869529660257401"},"_hasShrinkwrap":false},"2.0.0-BETA.62933":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.62933","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.62933","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-xzi5z/a1oLecKd1agHNg5zVkmoSrCAc43A3AR9jIzfINM/62eqm4zw4kzpFuayycZ2oGr7o0ZRfCzsryGT98hw==","shasum":"40f6ef5df9c7a5149ed3fdb259f29d46d15a647f","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.62933.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRpLaC+PUTZjDCzWG7riIUyd1cwKKrxIQfDglI3NED9AIhAOYhz3n31IfOOmO7UgYpQ2iMuvOk/wi6SyFnjUjLSPUd"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.62933_1634192978651_0.9561854955646514"},"_hasShrinkwrap":false},"2.0.0-BETA.91017":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.91017","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.91017","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-/9SmsxetxzHoZp6j5Vztmz6zYFzEXTRzlzkY9WQ4lz6qkOobYAUgw48Ll/aDbzP2P2W4ny//USO8/QbR0/U7/g==","shasum":"ca03d0280a6b82a39326396e80e323b9fb37cc77","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.91017.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5/iSEDBB8ZT27Hh1I1S77iy3IG1p8SOxcwNo3i/j+0wIgSgePalIt1ru0FRXzqB26kzrctnAg99vWP2kLQe61MVk="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.91017_1634202621819_0.19533900668255422"},"_hasShrinkwrap":false},"2.0.0-BETA.54936":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.54936","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.54936","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-4yKih/JbIys5UCH001FLLzqakKMd4UdyylwnPWuTsu/0QLLNPVcl0/St+/vAKPuzJfSI9Gj0JR0NcarmV1pSNQ==","shasum":"971cad4ae628f2c3c22ec057aaedae791dafca92","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.54936.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpoKnC6jEye/MaxhVIyuci5GIu5UrGAcPYZijKHWEg+QIgT+jwZ9V+G5TOMj2D4n2/vgFSWeEZDBTupHVYETcg/h8="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.54936_1634708982950_0.9828607944620467"},"_hasShrinkwrap":false},"2.0.0-BETA.144641":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.144641","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.144641","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-jSgRcoL6U0yTZtx9O0G6baMECOgiDFZM88ORccVYSPZRvj8oQkvFWOHoQUWVqWTl9ncVn1uyfwQupdBok+4zQQ==","shasum":"5d832c343156bdcbfdadc0a522f079d11e42e952","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.144641.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEXylZGoTLkqyzMxQHIrrwHjn9RMMxmC/wzExNJW2MNAiEAwQxvVsUMNlNHxNzJMQ0g5wyJG+7iU08dO4POZdZ2LiY="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.144641_1635778006539_0.5673880212476303"},"_hasShrinkwrap":false},"2.0.0-BETA.73219":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.73219","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.73219","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-T2VUM3V16VHRJK/dqOeCtezA/Q2RgCgksmVNBQjfVPW+dQUMbdoNWWPvatOJO5dTGc1PoKObKXIS/EYX1FnejQ==","shasum":"e751fe4c39f74048743451309d7fd0e3616415b5","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.73219.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH6DJKzjCMHcskMKZae+qbwTNXc5BYv2fDAYwhuMkmESAiAQ5oC8n3K5y2jfq8ca6m84RExudZengs/hf8rYiGZisw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.73219_1636011148298_0.9864083929758283"},"_hasShrinkwrap":false},"2.0.0-BETA.155850":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.155850","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.155850","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-FiDZQ077Zca15AaHJ4Tm4ax2AVDproklEVGA6bZaBWE0Fq/tEo6QZZPLyBNdgWWbp1JQU7lqlkmrscot+H6Q5Q==","shasum":"e37528d05571c33fac66c8bba0a3831a831435e6","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.155850.tgz","fileCount":8,"unpackedSize":17351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPP9BIyX6TIej/nh+DaAcyiGhM3O1nfdzuRNzv4h7CxQIhALXg3ySsp2vuUVhl25IP71w4v1rKBDR4pd2l/KNDQYgN"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.155850_1636041534778_0.40375420016100727"},"_hasShrinkwrap":false},"2.0.0-BETA.145526":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.145526","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.145526","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-aOng5MkVEbUFu8jCtZRmVsI+AxtIRFVHS3bWArX8Gf4fNoB8KIcZPJrj4AKJLpHbVq6tZOnA4aCDrUblDfRk6Q==","shasum":"f08254e63a75b4446df97679ed9f05a2af6040b4","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.145526.tgz","fileCount":11,"unpackedSize":17968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXgHe9DtrKSX0l3MRfKZhfjmoa27iqw2fnhiT8yMMTKAiBuGdNdMJXq6VtnQa6U4NZ3tidnvKYR/usRuOzzLH1Vpw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.145526_1636210543533_0.3267109187510815"},"_hasShrinkwrap":false},"2.0.0-BETA.101943":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.101943","main":"./src/index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-flash-prevention"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.101943","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-VMVGPedbOtnkPXDv94GQ3LMCuogMpdSoxIokLs3n2DyAtlepYuOTDJNwdvxIbF6YH+EQGYCGa7LUdbp9jHqA0Q==","shasum":"01c0bd63e2d132076caecf29141e081c326fe501","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.101943.tgz","fileCount":11,"unpackedSize":17968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgaGvXVNtc57r/be2UAmVfMHZNTdsN0EQtI+Z854LR3AiAaZpLr3z7r2bxqGquDtdWYFyrRglzJ+5Gox0BI0WmycQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.101943_1636280388263_0.705192225844157"},"_hasShrinkwrap":false},"2.0.0-BETA.141026":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.141026","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"a006858dfb0bc86662d75ecdf126d5b03b7a9506","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.141026","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eIPnL3qc30Jbon7MgY+jHUWiEiPdCmFud4J+t7IuLfXfrAz6DfMSxEoq58APa4SaFTwr8TXxtqoW/CxmZV7Wbg==","shasum":"02815e3e8d6c7593edbbaf995faf2b509f5c212b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.141026.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFSeG9pW9O5Tx8Gg5MTItRTx01ce9row29IpP5nNT1jGAiAuq9Myq3Yhpdp6oGKrukSzdkmub5X9+YQxL+1aU0V6+g=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.141026_1636639831372_0.8734610178142301"},"_hasShrinkwrap":false},"2.0.0-BETA.143029":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.143029","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"e064fe5709a6b09d884a30a05500fb311ae7a816","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.143029","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-efahJ9sqq09uzafb9TxshORMx6SYOySYM9k9Q2/K9lHL45AdJiA0zsFN9LYaSv9IqYDC55klsLyoXxAys8CjlQ==","shasum":"4810812da574cb6aea4b7aa4a281c16f21ef7c61","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.143029.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6vMvlW3/DbrZJTsbpvDliR2SVSYliZZ02cD1aoqidiAiEAstgvLbsL3ViL/YYX14KHB94d+wainiWu9vaN37SC1bQ="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.143029_1636641032899_0.46367418438971875"},"_hasShrinkwrap":false},"2.0.0-BETA.145311":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.145311","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"653d233b291fa8c44e109e11f3ac5eabaf78da0a","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.145311","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-e5Hrs09N9qLoIR31Nlcq2m6pmJ3bnmZZu4wtRLaXf0cv0Kp7/z7+yXx/1tcsiHCKUrMo6wUbvJcZ79vRAvZqdw==","shasum":"f5c0d64ac147dd51fa1397f159d7fb623b3d8da1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.145311.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYpxZDd3T0DjUI+UZxY2XvNUB5y03ziZGaEqVSRE+9ZAiEAnNriy+Pmmm0Fw8LY85OvWAuCB634AYu3a3iBeJ92iy4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.145311_1636642395680_0.27241619614621526"},"_hasShrinkwrap":false},"2.0.0-BETA.150212":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.150212","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"ea274c497db9cf815b2df9a2e85c92e87547b3b5","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.150212","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OwTqUbANQ0jCnji83xNV6S+LY8arrWrIdg7Q2UEkmA1emLJA7j3cTkg+R5xp7rZZ821dgHMynvJWEy6mMNosxQ==","shasum":"54b8c89a0d4ff17dd24cc2689e1df2b8931a661a","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.150212.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsfTr6O7JVH4ChY1lw3ZmBpq1ru0zHdAmFbppqRr1gGAiAVuiulb6FejKlwLYYgSFm3MMG/J/hjXLmPDzc7VKewgw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.150212_1636642936473_0.07500179457858791"},"_hasShrinkwrap":false},"2.0.0-BETA.33130":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.33130","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"45854a591b42c34f114790fa8b54d1583f143f05","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.33130","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eWAcxXk/zmSSVhsfuV+w6uDDiWUjIoVJNHPKNAyURE4d2SyfqfxVMB236cYyar/kx4PuMvjuiwFXe3QiEkZ6lw==","shasum":"af85c1d8ed33876fe7588723414094b2c44f55ac","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.33130.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBqfjDu1HXSHb3hTM+vq29KBK+yWCtqMaD1gx6pU0d5AIgcxLSpJD9O4KfLtP8750N5VGE00nJTKd6pA1TrdEJvaE="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.33130_1636687893632_0.8105602491705226"},"_hasShrinkwrap":false},"2.0.0-BETA.63423":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.63423","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"d95ce5407274068479d7e0b26baad9a21ce97431","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.63423","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-X0xfsJnbnjvQHJa3FzHOPemji9Qjh15sGQf4elnKW9HIl5qsrcSzK7ZJEWBKq9yhubOeTncd5ws3q936eKfd1A==","shasum":"49520f64635381e5231f7423fc08fcff33855ab7","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.63423.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6oUviH/Ti8boT6f0p3Ilvlw5sLUHpI3U3GrV4o6QduAiEAnBeDLWVYY9+BpnbiK10PaQTL8gKITcqPxDr/QU95uNo="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.63423_1636698867035_0.5881611144363774"},"_hasShrinkwrap":false},"2.0.0-BETA.70529":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.0-BETA.70529","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"c26bf70bb2e8c73934fa791ee919438d146ac301","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.0-BETA.70529","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-YG82mhAWuB68K4P0O0bSZ+d7rCV6W7Hp7e1miC5goOylqMfUBaAhQoULcZRTdj6rpqe2IVShXoM05HlLmkGOEQ==","shasum":"6baf77c316fa9566f43f52f99d3c84ac563532b4","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.0-BETA.70529.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyBygB6SHrbtpTHDrcLueFXBgy2agBrYDaALpQhuV34gIhAJrvpyXtljx+QvFFf5fu/ERWKOwAj9QZGEKHc5vd04AV"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.0-BETA.70529_1636700733373_0.6204151684192047"},"_hasShrinkwrap":false},"2.0.1":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"c26bf70bb2e8c73934fa791ee919438d146ac301","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-mKFRh5lUzQVDh1ugNr+fyrYP2QoIt3S6viaBe2eT9JrmY5yv2iPEGf4ghBqNmApGpxmfdPviR0Ongu8/0STDlw==","shasum":"d434505b02813a4710a3772385d6f029eac30243","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1.tgz","fileCount":11,"unpackedSize":18113,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxe+u51qGLQcmxtBOAlEuyPSHsrxT+te5kNMD3Z+6fUAIhAI36+sI5Zqnedexa1NppdqmwscR8Xp97HAyxcaayPHV4"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1_1636708130896_0.5723661397675974"},"_hasShrinkwrap":false},"2.0.1-BETA.92613":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.92613","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"1b1880711e65605a7af5595406411907700f52d2","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.92613","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/dyM9v3c0MHYtNYZmUyIUzeW0KADgKsG4bgFrIMAFjKGacuT/rsUUjL1qS3mpc/iOQ7UrGfsyG7Cb95O+WdIhA==","shasum":"4d63308e5aad2619aecc3468d17c31305889e06b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.92613.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEamBZJiGzP5R/RiiHysphlLUkOhVRuIQL6IyYwdehKAAiEAnBX5+5W4CDwloh2za2IPyHcE8kr7js4GQuY7DL/qOrA="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.92613_1636709177546_0.3658482628358364"},"_hasShrinkwrap":false},"2.0.1-BETA.94902":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.94902","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"50e3ff576bb63d835b2f6a0549795ec20c4a3125","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.94902","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-yAZ7AKRMp7jdSSztxe0dkT49/Ur3fwYAZ5xCylCu9tmku9XT/BHATwn57cL1hdVBcz0uKLS7qiS0Ino59f36JA==","shasum":"dea433d8353c96a9037a5d7de7ba33647dfc5753","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.94902.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4WrfB12TZfvlpAUsmItPsAE2zWvtaD3RI8Ne/R6peCAiEAtU2qOOHX5Prr0csfIn0T6Y4Vl+DStxkxAV1K6U+eC7Y="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.94902_1636710546334_0.8497809113514536"},"_hasShrinkwrap":false},"2.0.1-BETA.94105":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.94105","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"f93b78ae09b89862e9ba89d96fd0eb7d7bb0ca6e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.94105","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-dvNgje2GKX0XU5+2Ie1Ox9LEOVu8SeV+gh0UBuMYSAMNO+vwyd5sq6UxTKOjcaKQA2of/4bm6JZ5q8Bd1Y+uvg==","shasum":"b76015d96034a5219ed0192e782fe4e6a6590ec5","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.94105.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF53dqGZVEArDeUQpo7ViTQfpyKG4VizVduBMXwloQ2qAiEA3aJ/mW4Y61aF3dini+uGAscBq47mHA3t4fnoaQQFKow="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.94105_1636969269665_0.4774910108751944"},"_hasShrinkwrap":false},"2.0.1-BETA.133103":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.133103","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"63654d80965447f526af9b9ba32835d9487adb17","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.133103","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-AGX1KGTv2TPkV58ctb6wLndAzHEyJIwOw1GJmFhu1wGhJCscCyR3xB8lboVUqMXcUmBOT3W+QQT9qT8KDYsSeg==","shasum":"9ed4c7e5374f1e1b552c6c40bd4dafcc28f10fa3","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.133103.tgz","fileCount":11,"unpackedSize":18125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWMmyOV0Fmu0d6dpN2KG/3F8yn6unmyfgW8fTqB0JupgIhAMwHsD4QjmckL5pe2QjN9rKzSRE5A64JVRVZfVUaeaxx"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.133103_1636983068113_0.9332673142327454"},"_hasShrinkwrap":false},"2.0.1-BETA.181935":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.181935","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"64eb7ebc845def06ae77acbdef5fa430d57430d7","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.181935","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-d4UCGVOGldaMKz41lY+3U/FZjfELfnLTqWy3zfgcZ/NQwg8/+Z+Hp2IKnfDRnWve7VVvOw68rp/vKjJnlWQQPw==","shasum":"e367b6334c819f2dcaf19c9b29ddf395c765fe7d","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.181935.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhkqS8CRA9TVsSAnZWagAARv8QAJreAxOVXOLi9txogIGw\nQmvzecCE1spzvQf2wqr/WXmIpvSzlumRrBiBYEtVzWL0xUyOu2jK03NA/JJt\nQuaYmhO+pmbobM4Kby6ixq/0EOBEX13w4NmhLT3UtOBVP0IEhWTe9l6puduk\nbb/R3T6YwFp86tTH87ecuSSMSNWQsHxEv8bzgomE0vbv7k3TeaPuxY16bKfe\nCuY0PxpDQ/EPdaA+vQe5X6v8Y3MC/01gU3KfvcaFNsz5LMzydcrEUkgvPtvz\nkgdLWkIK22QeX1nI7brC/pLMc/kDwKuDRFVMi+kbveI7oLyijPE3fG6p32Bo\njG44lKfLTcnhA11Ez9LOtv3+MkVv5ahmSfquY302tOUAuYeaJA2+pGzJ/neS\nEUeDNUYWtzao7Xqm7il6pXv+kh67gLFfE1hKqLljb4ci+R6JAy+LRhk3G3R8\n0ufwP5RZQmKq5kRycvdWaeKKUZ6n5adaVYn+1TYb8GEn8LwIEr+40evkZYDY\nkV8kSOnuGh0EDDyPEONcUSEBG30yhFfk3V8xcLWZvHHGsD6nbNOAqDau4h0t\nMSy5LMzKEL2yI5s3JPFBN4UVNi3ei9vqC4svT3do+8CLEKYJMnco3eKzIkNg\nB1fFYccPwQ4fvCPR8gCZohtj2TfIOGcj6L2riIEypK9tDuKku1l5ge09Og5I\nCuxx\r\n=YTrr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbYHjRLyirVBkddjBAZx3AsnKRPD7Rw58rBAcjim1e3QIhANdtMKRsD6YFikiqTEA6rukJzL13hqNoFCabojMvxmDv"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.181935_1637000380044_0.4466335406134536"},"_hasShrinkwrap":false},"2.0.1-BETA.122536":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.122536","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"602153b0459dd93c82815f7c25759d549e522287","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.122536","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-jdvvwpP5i4muWh/ugERkLyITESPvjA2P8m16hbDQ2Oy7ioVvx4YEKITS+zzhFHhmO2xq5SFxVX4jq+BaIalOeQ==","shasum":"7ce299816d4b5f5c40e7f6f3fc7ecc81f51d3f26","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.122536.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk6NDCRA9TVsSAnZWagAAIJ0QAJDXnHzEH/IOR/AQkncN\ntZz6ZI/PdHISuw+Rh5f7C+rPv6ueswBu1YdYfLpAYwR13ZrSQF0nIFKIoL4L\nzRtCZLZN7r41a2A+TQ9DvXQehOWRmSRZATexPL8faHAiEO1RcVaTdwZn/wBx\nG8LUIPAsThQGZz14JeX9yiu5MJtUU7Pe6I5oN0hu5pfZRG4gWt5LcnBL2ElD\n3u4kNjpi353IzuefhHdBKsATVqCL9ZO56uh/HycpA4bEhRhO6qVRXQ0SMy93\nashpwA4j77UDa3RJgHdx37LwjoZ67SQUJ7KbabNNo1vpdDCEgUzpEOrzQ9uu\nUis505QHMBQKOCdipVtAOhLgKgaZi0mBl951s1T0yaAuhxYJsXQoIZwzTeaS\nMW/RLY8D1a8y6GC3cReJyuCwzyGylbUADY/cAXEgIWkauwDIuOBmzpNQ0YEc\nDZ6JrVKtvu60OkpACEZm1zIaPJGxXP+RP2LjgL1zI2qfV5T3GQV04udHW7Pz\nOVB1r2t3fea/EkQUBHWdPJGKahDa3TPS8PFb159sjqSVNMHf9+IOegx16jJi\nPy0yED7YF9HjEmX0pF2DIQbE52aCrmpj+mYcFPcAsz0rZKQwasOp0OoXqiTY\nfTXD4dwop4ls1INcMIvVSYMGwzRLAApEKnZky3qy18kpdFqE9tW+4kA+7Yzv\no6fx\r\n=FQsH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXBJh5pL2hsl510IfNpO/aMqn3mDT+ow33k9JKyC1rSwIhAL8BOgBJIhSop1FgSZgBIrVCTqv6InA32p+VaDhX200L"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.122536_1637065539712_0.3681327078570189"},"_hasShrinkwrap":false},"2.0.1-BETA.130724":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.130724","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"f9d62640d050babbd4d68207c9cf5e2c4977aa6a","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.130724","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-jetzSByvunrbIVTMGaV/FOx757axK1DFu5QBNwLmlUlo63dq/TSZT8vxFLwbv6rVt1yeDKskaU5V7zhx65uk/w==","shasum":"5438fcb2cff0b530222d009a24403bc8e8febd99","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.130724.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk60RCRA9TVsSAnZWagAAOO0P/1WAoc8MC+3e9dfxumq2\nWmL2yemkftbiTRSBYrROIohAymaNwnFKkFoxBE4Fe24e5qDuOOtPtVqSA6Bn\nCbYkafP5CZkIVlbdLqzhT5YZ4jKPR2/anfS0qNFr5Jz6ELkmOoTtsZscdJ+X\noZhbSDyf0Pg9ps0H/ITNjUwxRswBfXWaTghKqkF/A5lmkEKUW+Cc1z7I2sSE\nN1lKxkX5p6t11UtDvGa5KbKN5atGrDgkWfJ73ab33zzZsZwqZALkmtJCaBvh\nur/R1OytIAA2gLSrvllTYswh9BVVkE+gvA2FRduiKNizS9MeKZYGGVX8X1H9\n7qx+fS4nxTDZr4kW9zFUNGX0vHPlwKKx95a8DNikEPYz5jYNx++NI8TyU8Hz\n4w6a9wy3j4i55YVhfCGdPxmpgt/pI5TnXFk5qVkJfNfjJQXSuhg5eAVoPpyG\nqmQspU2G1XtaxtYGUS/ajPGH1wuXopZDQiwsAE9SAEkA6eLVRci9sfOclG+J\noQIlzioKMjKYo/cMTH7m3ju1yXoOjOeAfq5t4hbP7nwbSqFBpOwZQWs1CByU\nN27h+x20MWhTioDrKQc2+nPZO1dGXJ+KKBn+gCeEeKVZX9SEHFHokavvq/k6\nsrO70EEry4ohegNF7TLnQeStz/xayQo2qmqz8kSbVV7PYgGKNpYKMX7oSgyz\nCERo\r\n=sixi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmOkgCmk6erQa6SGRwqs6ZAh9sNf6wgRMq88DSiM0+TAiEA5qEkFKItwYA1/4SgjpdHMPCqbC55k7pKUIgt/ceX7X4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.130724_1637068049689_0.1297944519887282"},"_hasShrinkwrap":false},"2.0.1-BETA.131106":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.131106","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"2bb0174c68737e0022e363857cb5ec09ab97c105","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.131106","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-nnqIxmbR2z8OAnnrR9zl382IWn55OK5AAOO9w4l9L5eCX9RdPA1s03Spks+MtQqD+wYj56MEVCRcoHW+AE8wwg==","shasum":"d98b771e9a712e9fc96efee739460f3dd8ad5673","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.131106.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk63wCRA9TVsSAnZWagAAAAMP/3Hu6IDs7K61UiKqjyOH\nbkpPD5SwLMZ+9pu2BIcEjaHQCqU2h7nq2zZIcbsVApN0eB+bag4THpyRcbT0\naaJLMndSMSoLxpm1T1ea3pBPQtpl6mnW4y7svpeotQgotciDpD4tedJYa0w3\ndguwLhWUXOIz2lVdff8LRoKAxRf88IAzUUU6ytY4mUHLatepudkRFEoI1G/+\nnCxVI4GH/wg6Y8K581xFo4zZq/4dX2SjFj8G19+o0GAEs03ASF7B3zv613/i\njLHEF0KGhAdoa3eLEFcaRURFqcLRTc9HHuzY/wYHe94WGRfhP3xEFTL0Uc9o\nZROGHrIj1sSXpfjglqmG7ZJK+knbLPsxp3pz3+j4ujsjiy5VjxD4eK19BNAx\njrOIYtecJUFVhaMIDHRsFnX2kbo2RDyLHgoiixgKCadGYQPWcV/xgikFOpJw\nOAQRx+pQ+z5pE5JWEtumPDEFJkJQnAWIX99uyLjWVGhWVw3tEyD1+OkZIVjj\ntNgh+UGwISmpKgCjLgOADlZYkgJYFA7XgdQrKCl3io+FMNa9YS8B3YjVt+gq\n/Jo1IV7VHTk2X5Ctsczi2EZluGNjtejyHHA3UaK0+rSuJGy+w7qPxzfetys6\nobvJ9qUBE8uy7zuC+Ad4l1FBghe0IFKHaQI48KztHaGoEni7E6J9oIhH37HK\nXPgN\r\n=LiaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEX6oloRuyErfux+BQb2CsKbH5mEIwX630EqEgVT3Z52AiEAhcKN42THThcN4ilMZUBcqwjVKkMm//wR40rqH/aie1s="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.131106_1637068272369_0.4681155878595451"},"_hasShrinkwrap":false},"2.0.1-BETA.132851":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.132851","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","rxjs":"^7.3.0","@sentry/node":"^6.12.0","os":"^0.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"0af7c825b49cbca03971b4cc2893dd50eb17c6d1","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.132851","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7FiE4QwGUiI5p3jskMHzKZEhy1QlNlQ8tDxJ3dXErNtpv03WicdAVmQFnd+PiStn/ZBYkx2MpeN9LWXNL3Jj2g==","shasum":"34771dc1e3bd9d663722eed2121579aa78fe2542","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.132851.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk7IYCRA9TVsSAnZWagAALPcP/0qBH2Okom3sTn3qkXAy\nJ1Pv7ancq/g1hcHF7QP5VGIf/LfIJN16nmSel8XEbYIBRTwsXWPjfdVgE/K0\nskFvIm8hfz0S2kMz2XaUrW8s547cyXiGBkjPgzlMvyfkP59+/yhF5t1C1yHH\nicXEDFU+sRNyoRWW30Nmx46PHB86sXrLNRw8+Ni08Q7shzmearE7EuFwcEzh\nLFFQmfzy7496sUDsSzgV3+X1yOMMK6K8di4cdj2BdT6laiB3hpvRBLC3nGnh\n3ctG5hL4RW0xiU1wehydGZ5Ojrsss016ayhcephINtYD6843cEeEt0ohYWg9\n9TRCRm9pi6NrgqGI9HAvfp3W8+ymynBE9g22GHP/Q3PzA3cNDKc9jGwMt+XX\ntUwswvMcBdidFLOBe7p5aA7MwXLzxSwWzsWLldhvxKdWBiYVtuRieKp+p5MW\nDV4F3kdZy6gMNeWD9ZGTFQtdqiXTk77hlfxutriJODhIwGWXf3Au8AeIk+lY\nZmnTSHYG6qJ0+d2EZkrdJYRx/m27J4ZHLGiDY5gjT6QAAXd/LfrLgp/b+KvQ\nO0DSQv8ccsSkzFgTVLj9yPqGgENk8MCTvTeUDE/9pwTEd3shudPnXb2ZnrCu\nFf7C+NIjJO23+XjaW95nu3vV8/pu7fA+QBTu6zH4qh4rRoJJeaWumxxBfir4\nc4Oo\r\n=omhB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUZoFa8+3a+QiUFbMwbSlI2PMlo4ctq8EISBcFJlWIkwIhAJmp2rkZah6qO1/Ks1j32rYhN9lPr6l5OXD0xj2HwHUY"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.132851_1637069336234_0.3650145142228296"},"_hasShrinkwrap":false},"2.0.1-BETA.143130":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.143130","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"001666dd146ec6d9cbfdd822474ddde89d40d1d8","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.143130","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Ml5r4s14PkK/6XXn9TvJfeoTWSh8J14AXbV1r8XBayXLuHQfhQGcPNFDLBKQ0ty/0l2PFGQFuaaeH8fAsmayZw==","shasum":"a6d96ac6b7f42cec680ff576d7e923142a32d9ea","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.143130.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl7VHCRA9TVsSAnZWagAAAOsQAIL5uuOLuzL6qvtUj6a9\nN/9wZMajdtn+6F/ayygz2v/F3eT3jHk+z3VIZg79mxX/dJGDFQW6v0avVTI0\nUlfcolpRU+8mM3rsZXA6DQDK94WW4J0Gk4c1eeNYQG+H2o6oojOYxmzPpd2D\nrs6j08sK0gPUVJ1XnSGMhi+UyfIJa8BXCimbN7+VBKHswYfj09xdHTlwBzEJ\na3P42cK/vvFJ2Dm1bjVNvZoW1bqWg4RpQsaaP4PPWkyRRdBTEETlLjnDxFKO\n45EVno3N1vbuPaRuiTYJiKZQVt3M751YkSuNLhznbj+MpuE258WzWM89G9AV\nYcuTGkRhHpy8qzhsF4YChGBGaAiyXxk9h+q7JYoXxuRDO9BeC0k/U7uUabAv\nr19jA7VNPsiaPLpHkuwkk6c+MMvtaKqDpP7lfodKzT5APAOAuQEzLv4SKq7f\nkQ3ePExXENmum9JsotzLKLxO6/hHLOW/PLtG+xE9oudvXNGXsaeCAy798y/q\nzJUhlbNs2hfU20xnrd8yRBE8WrTrscfVznKRDW8U7I9OAVQfJrWfFw0HeDW6\nmT+3B3egqFTmsa6syo/4YYqpvojrj7+Q+fnX8rvEKlLjuHvHI6xHBqFIqsoM\n6Dlb2GQxQVmgpHRIT6rJOFRs/Ka7Ik9K828rkjiyQgiTo4JPT6TtB6xDZopW\nKmHE\r\n=m/3S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWGxbUV1UI+nR7GV2+hAHEHh98at3EA32IhiiO9NmOsgIgPvt6wCF6E+XLX0l7Vf/lv1fKewVDRBPO2969+eDAwp4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.143130_1637332294880_0.0981641171872012"},"_hasShrinkwrap":false},"2.0.1-BETA.55609":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.55609","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"51133aa4d820fd602b290df52e9571e59db9ddad","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.55609","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ccIWE/wTA6tq1DNnVSLEqYfXr0pt5eeh9rW1wqaZ0PwQlXeXpo6OR+U/SwRY/BuECrK5gwcZm1pox40gfou+pw==","shasum":"fc7eca0ee8d8384ba67d2aef5291524d025144c5","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.55609.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmI39CRA9TVsSAnZWagAAmYcQAKCDoT0OaxUdP0d0UQNO\ncsex6W38gwBCWA9rpWbOZHWTvOJXNUfegaosNEc6M0Djh9WgEM0PXdBjqf3t\nWd9gas5xqgt9qbpodHCWSWAKaghcH2BykHvS42RbHZGBfwoqs0A+qqxQZLpF\nVJxmxprm897xyljwR6JTEabj4RyQzEhdYKVtSDjoid1Tus26RvoPuinXZEEy\nTs0Sd6I72ivqBTfHYGsIMf69SNq3YXBEU+/PnKi6QbSD0WaiPzLQuuuzXilZ\njXNqFvHmLiELCFqOIToCdb0x5IQUxZfJ+IYuNr6PKrY2dh17OCu0QqXhv21+\nKKG188XsgN1RYECRKb6QcyOdrXo+nMB9xDhyc2i4sgDuxcZtKZv51cmCE+zq\nV9fxk9D60M/f4U8yFs13C/KdZdK1aw3tqlP9dGIJDTKgTHzz0bwu7eKsnW3m\nAZQOyqXfFjt1InPjN6ElhElxtBM0dtGB+6cFW+HUReRFXYJhJPO0mgqkc7gz\nNTXxYLjoRJplc9yA2p/wWRYmJALoxjm51A/JH2IT8uslcDomnNdQK4d2JIRA\n6WvJbbcM1sItGQ2Pk5cyE4p6XtSPxRwW4mhD3BGbCLkoKanP3Z3KhGef56A1\nivvdgwMhjcSjjQgaE88yWkIfpyc1zuS4EpH+R6kQRGSMILvjY4u8HqnMrr1C\nrVy+\r\n=BprN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhkfXySEskHbWNHXQlz9znUlRdUzhoKOhaZHznFUDiuAIgBSWV/3UckL9PEyUolOUV90dcgyqkRQcVHiQXz+VIOQs="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.55609_1637387773657_0.09795196561642361"},"_hasShrinkwrap":false},"2.0.1-BETA.64704":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.64704","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"01a57ba76608c52478d6227b76d8c7ede8b0c1a4","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.64704","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-qxP5751CaH2/Io7yuvFGS8+I676nOmHhbuFmgZVB6vy4erdhs4vs4CrXVtrZ9+C/IbcuR8aM/sP6zF3BosF4DQ==","shasum":"fe596b7d61a1850d0f5f503f62f87a5918dc3496","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.64704.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmJntCRA9TVsSAnZWagAADlgP/i/9IMhMm5+RNpAvvy68\neqU3/HjcEtxdKwXD/blUF3d37Zb0hSmDcurMjnOSYmBDB8MOb8MaxWJJrqR2\nXLQ5DmvWOWtYMdkJAhsvYumHfByVm6xR/1NbP6Dx4smCEX1xaEYDwhKArbCs\nfWNC1ctCEUgkr5nI7U2M8Lxi2vgsOlCachpJYHeG/onbTkODkxkZZDR6xnrM\npaoRPs4/1m7X3gXM7Vkz3V2nZKlnAAe3EimT2vWdNSTSWvvyq3GbT2ri/6ym\nJ24pS5CBPraSZm3obakWiL3CCkckCp+zQWNHbjoS6BRv4tezbbvv9MeGDu2Z\nz5w3NerHE8ONdXrS19gduh1HFTi7i8ji3uFN6/Qc5nLn189P5U8DqHHn1ygS\nQxc+J4ATHhsInwGH1gvUsVBMzUV6NKvxOUiU0aclUAGOXtigXWxiXVUVie/f\noUiGuRhVhlUss48PMX+grbqkiCQeb43ekLOhrZ8CqlFvqRTPp7TXHxIT7TGV\nP0KoEvdZHQnRVJasjjc+xZDGh1MyEfp57ILkaA9ziWDPP3en28TwTGFk7qX/\njYkyq7uMI4mPoQrIUS+Ti0X5YKioNIJ9Q0SOnRkRwq+NkprKYlNNYaHzDT0Y\nKcXrWfmt48N7lW3b09d7IIOsJrW70lmrIaDQD7JzNZMSoE0LrqdKCcxdlR9J\nY47s\r\n=oK06\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2E0cnZj6rk4/pyAmmEog5SSLf5R/aGAtYi2P7ANyoIwIgfHsTAJvLInSfkdEQ49OOI7FOgWvT8tMAsm/HJpQjews="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.64704_1637390829632_0.5463537422756124"},"_hasShrinkwrap":false},"2.0.1-BETA.84818":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.84818","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"8f3970b9705e57cd1b79fd98479aa40afc2b466c","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.84818","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-6H5bkqF7wl7EigQbkP9/2BwzRu81mdbz7QbWs/SrXgJoj63NmKzd3jPFnNmgcEGnxPOrcky2pwODzx6vuyILxA==","shasum":"ed3fb85ce97b0e523856294eea0aea6d1ffcd4cb","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.84818.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmgfXCRA9TVsSAnZWagAAVn0P/3TBDbays+exOHz0Hs24\nRdZVqWsUV+tb2xiHhhBUAzc4EXepIQ5S4lZJhCBgMwViHZQymHmrdrdShhYz\nRKRceVOPbwqhd1iKeQa5ruDpAeCeBHNsZE58aBZnMvirA40DHm0YuvWXVrLe\neKOkKtspWckxx1XUdzYSRJgkFIENYoXru99JMBoz2pzdNWgGcoFAONY+keBr\nnb/pqngnPg2bqdB0HSlIHoRxuFzujhWgt5/YKO4Cod9FtLZZ/Zf93lPFQKha\nqeM+QYrGPE9zHfRoc+EwcitJQP8OhoY65Vrw+3XTsKOKsBWwHP5j84wk9i/u\nQPrCrCS02VQfcScMelkMBAZuiyyMmp8n6ZF3Pk6EDQNANfbbxT5RFD1SqepA\n62GDl4KZNDJRNjwDECaaqBhiymqKus6ODaOv1p2/znhloKF1MRTnErn0AozM\nbEESvi3d3b+OkzreCkzhYISUUPtbShAa+hh1V/I9BenWY0lT/+38I9ztZge0\n88Uw0dpIMxLBEycHx9GYLxwzXIYgpokiJUjHV4hkNW4L+iKiKFKkhudiVCb5\nM/rKtnsx4ThcEPj9+7V6mUGCMy9KgkxQq1gBPbiUER6fwzCvTsJjHGQ4c2C6\nxuaAFQmx2Sz4eMgyYZCEc/TWxFuLcrOv5qJUEAhu6CSyjhbsytD3WL43MdLh\nk9WT\r\n=mWsa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6/2LTf/yXldp5KywaTjW7ut68qotpnoDzU/CAfcYWfAIhAOiBki8b+p1s2cscjUr3Vxja8Bb3pfq1Ui+v2rKq9qwR"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.84818_1637484503319_0.3320599987617354"},"_hasShrinkwrap":false},"2.0.1-BETA.95848":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.95848","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"0ff2f48fef5e34bbbac3e219af22315dae110011","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.95848","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-gFZNB940GDO7U5bUIc0KUXs0kfWUm1oD7sUss4osdqb7zCSOHAJo/zAPRf+6uPQP3t0yKT/IkFs2TAJqDUyJpQ==","shasum":"997dadfdb43542a92675e59c72076925c813b989","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.95848.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm2neCRA9TVsSAnZWagAAipEP/00ody/ZSsM+HZSfbCpi\na45vWCFp8qj8I2qlfZfFnwsnjPMLuZ396qSdxK15E+krOqQjNJ/9HfTcpIX3\nn67RPS0j4tG7O8m8Yjr8NrfkyI9JOvCnU6mGkPSUE7tahVetpO0xmXg2hIs6\npqoiGQ4VjkZCtQSXtPCzVudMLMZE6xlbpnhUh+jIfTyxI1XLcd1lzYco74ZR\nSARNIklTl8aKgOuXYKEPIvzCjjzLpZ7OGOBY9a1/z3fJ+Y3pfteFksLBTqk3\nGGC0HvrkknIRajnQaoETt2LIwR5j4KqjGkPXEV4VBXIiCpuK5TJLGfSdfxV8\n3wacOMmNAM0mxlQq1AovUfh3F7dXxyVHeYL26eSTC06pPOuwLNIm8T8sIB6f\n+gFyEjGnt0/bEIIECWl2YhzSzh6Umvc5hOVAGG1WfOEJNCsZ3guyMCg2zbT5\n05VISPmF1LF7OvdIHbsjNT+BY5nUXmNf0jhH+Zw+fXet/D98CkjCIrsnpHAc\noadhKtV+ndQ6+dcXnS7gcIyRrMSj0IFNBXb47pV3o5wTAGOYTQlgCNlSktiP\n61hP0Wf8b7/UF//4obGUMKE9qpUEfVP1bM6nhLoQmrNmbgRbexLQPVsRxAzY\ngs1X46Q05oN3qVm1DHGvtL2XjvHMgDapCLLCY0LdK8rdoFlmT1bJMD6wL6m1\nqRRw\r\n=iXxb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvyzTBUvpwu+ebTjIg8nr/DPuXWYJl7VFOuuv1tRQRRAiEA1rwmer9rPDX0grpPhX2vNuRkEl3XuqptukEQEXrZONc="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.95848_1637575134741_0.3169193729658826"},"_hasShrinkwrap":false},"2.0.1-BETA.102331":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.102331","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"3c9fe9aa6572362770b579decffe9a7e0aba5d41","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.102331","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-H0AIQZiwXns+mS7HXvccvINU/kD0Y4JYG+xYLWftjrUMYZMKd/aZr+HyCa6U/Wy9d79iJVP5aAkvTZ5fttZ3wQ==","shasum":"a36ff932c481d1cb7830106fadd14d69690d5313","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.102331.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm2+pCRA9TVsSAnZWagAAaikP/R8sqA39/hX2hTOOsvrb\nxE12+MqYlcJ88aR82ZkoheItUoI0fTP+0nRkZIXTDmdaQZqvWZujFU7oEc7h\ntBNB6LCbvjz4O8YTqz+7OuXpEjGccvm+sKgiPAvJjz9klLstmtbmc1nY26Kk\nA2PXnHV+w2FCCK5ubNouwjO8bPaxoGD187nZ77wxuKI2NNx4VrvPBL7WIJEg\nfsoMF99PWGIeEaQ/So9f7dWKRu4dx+htlDHg940lbniaZZCyCJFhpfkGIAAA\n8MgLG90C2W2jxyXqzgChMP2IlzlzPVjU4d6xg4tbiibicpHBCNEsIf4OpF/d\nkJQSEd8AgnSkaBxQKPex+gyB+e1azHO50kDBk7xwgXFHw7CtQyq0gWEUdv6l\nnitPZCpDhSw6xZyfK8cT/XeAISY3qvbAbo/vLrFF94GoQaTDpBByEsqL6K8v\ndemnrpWQ40rjzfw5ra8uHkB5cvJQiFf/kIuVEKfEY6ZHsQOHsnGB4qBjnihD\nz3WLwp3GXeNxxzvi/J7enRkLezQanReUnicuMbDi0VR5AJ/nG797FSgW94dR\nkDsfqyoVkdSTw3zI60lXVD8+OYLMJejAphWLdjbB6JZ82S6iZ0VSjHodVbsR\npzA8nXkE5xpLvb8gf24RNsuPFUfcrcmAnVI2tANPspd1IGoqfq267S4yGbEX\nCaQH\r\n=Ubu0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKHCpIVaa16QrXfx1OQEiL0GI07q4U/XOfRib6JEoRCgIgEXeRopRXbJT4FS95+Ue3xkYTkgtDhV/sXYKPGrUbfYc="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.102331_1637576616996_0.6488142198358005"},"_hasShrinkwrap":false},"2.0.1-BETA.102701":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.102701","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"3ade21f38b88cf9024757a7f8c75b408b8d24f0e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.102701","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ig/yHIsgZEDRGfOAO52W5ycBXVmfjaA4cFRty7iAPoiVWmgQ2LZrRGQ74fHSYPArDSuuR/BxRzk39+0VtD1DOw==","shasum":"ac8848bada645223952763b751bfc93a706f2563","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.102701.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm3B6CRA9TVsSAnZWagAA+NwP/3o+Gj9aSYWl2jCgJ9EK\nH61RJSki9mjDnZqCbpOeiJMCGUlPOxte4ZWldAUM9sFMVL1lKXQDXqXz9CPX\nR7mmlo8+XpK+WYlL+DPp8uOIJwO+fjVRgKvB+GhjXDwPD50uVK4f0BIZ81Pf\n0DgpK+Wngbe0IS+n3If6UTWrCSRwXd7eN6w3q5a8qSalAQElLfxcnTePyPnf\nlK+8XdzEVYsyqNxxO2DSFl4k/9B0goQS3XqDC9zLP1bMNWVEHSr2hKYlZMF1\n8nqnwSPrwEJXTxzeHyqta0HQ23OAP7yVea9LZfUAywm5VgZP94LXLK4tPEHH\nFm2hnkyAFV7g3R6xRW0jfgRl6y0viZG2ndFwqMEuj/fFtK4CGGu/Lia7hQ20\n2r8MDcIWHyTh4N/z6wU1tECee9VkU3ZqIGxZtMkMaQY9PHR7PyYdA8zFQuzs\nVSUNpcMiO+L54WH1+3DZpzxzZiYzvelvcRvHYpJ95E+vJxeTEDnWCVr2MoMm\nJUMwex1+ODe08VVph+wuxQHA/jyVA/3PpkPLw7nBafw+ZHYgiaLlKhuK6jFi\njcrhsTsk7lJzzLZLd7Y6pNfEzfA9GYNWhktB6i5wwVy4+w90sRxcBIcPRJI7\nYK6BfjrAOQTtINLKn5RB9fFNapTVbUNyZSB2YzSdqUzZK1fDqHl1KkTB68st\n2Cep\r\n=BuD+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAiPSvrI7U/BHt2zWvjuLzN1iKG8O6fBYPu+3LvzicmzAiEA9zM4sS57rgVEV9nQ0oN6LD8gGI+NT2UXs83pU11t4B4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.102701_1637576825951_0.1073887672439271"},"_hasShrinkwrap":false},"2.0.1-BETA.113332":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.113332","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"0965f4fe3a9fbaceb0d9a8d229bbbe33317ed3d6","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.113332","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-//XeKQzwr+4zY3T8Ebts5tkkuGR2DOFIQ0Kwwa0Em4e4lomhz3l60mBT6mbcXppoA+V5ek3IZfcWmKTfA7WDKA==","shasum":"c50aad41dce223f09d6b58ce5f2b8b30c812053e","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.113332.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm4ASCRA9TVsSAnZWagAAQVkP/j4AH/W6I4X1JTFWW/s2\nVnCHpZNNncnHbjDk0pm2V6q5yqCnej25vRNpdngHdU3PJHxIwST0BcTgYjcR\not6OA1aaiq1MDyBGqOGfrlI9vruZN27zBVlQ70hnAIWrt4ubxiaEu6bT8I6J\neSb6GZHJVcHbYzKXGMtjcF1XPJ7kXve8L6NhqNOtGuV5ITdSKyXIK17ZNxuA\nLeMOKpGWzQT8c2iCoR7YoeJ100ip8c9TgBujLJSM57oVu7CgEFBpG1xigiSe\nCLICpUI/rBj+0xgEhh81dOkj2Rw7KzC6HeRcqSkcQRnhv7pPEOFWcyCalWeN\n5FWL9ibaII0mpT0TOx5S9MVqcygYx0kgcOVTua7L+XOwGv4Z0jfMHJczeCIB\nlCckTGZWnd273U3REm5WYSb2IXC9WFHo3+CzfCk2hKr06g7Qe+qXRJiXu27E\n6ICJNTDMmrd5OTRCL2vM3LZHP0sTxrun2z0zgmuS6FtOEDi6QlpnIO6UPDfH\ncjifBvxVdlzEyV5SwSGX8kGPYpwb3m5bTClayVg8okr0pxtoC7liufP4kZpN\n7QelEBVGiWZe5xbi8vC9fNWlk/pBStVhwJKeXtJRjTASapKooFJSsTt40eiT\nRnfu6ZwHvNsjTBxVI8fM0hGIfLRfgKR79SNiXBxmTB8WLlEb4A2x3vwArYpW\nbYX4\r\n=n3nC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADbeZBTd1qZUMH87Hk69vBbrXMwfaZyYSMo51upeuPOAiEAuDUKRnPc1MDDbK//GbJoHEsMimnYZPruBUA+Y7j1OoI="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.113332_1637580818097_0.6519094541246884"},"_hasShrinkwrap":false},"2.0.1-BETA.115847":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.115847","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"05c1cfab95422ef56e3c47bae517e22352040ed5","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.115847","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-S0WZpSwrSlDmtSdLJdps797+KK9h2fk0oj2N3gIkgQsTDws2U1Jf8uN94NOc3Kv8eJt0B9wQG5j82rDDs66m3A==","shasum":"2ef1fc1e487ffc47140235d3eb68920e86cb1ff6","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.115847.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm4X8CRA9TVsSAnZWagAAKUoP/2PW/AzCK5GSReHP01+l\naNA3MrACjw4Aj/mpK9E+f6jz1kMt4WdxKy7d8EVBlH8o275LnL5Xu6c7mmOV\nAUyxI6EI3kQYtXAqQpHp41OIs/qzYZHVjg3f/mpe2Lw2ykXlNR6rmodWBBEs\n5+mM7bxVSZIbF+G9KAflIy/PA+ZPrOgKY9SUAnkSwXWtaDFZiQFebeWVgOfU\nHCfY9eBkCBOMOjkR3IZmjaKE5GsPHiWBw23xEaEeyK8fy8/aF4b8al34MfWU\nbHIblyUrUKG7Qw1lCJybiMegqJxw4166GEQcouQbYMTyE+rqwKjyXQFGc0Vb\nLkH6SqSpsLmnEMHaG5X9vHMDOZEBu0xOr5S9TVXa7YMBXALaqqCuK7H0WbAp\nH1FvGNRhRwqZqbBwk6X7btkwHVQ+ht8tuMGuCeUQz3xPRDqM9t6rIxr4KXe4\ndL/WH2YD5a6PfW04doZjJtZiJWiQiUdLOZp1rDYkZIHgXceEQ+bsGU/jw2Ql\nyz6/HTw01Icn9rzfcKypsmZ56LY0Wb9dkaEPG1P4mQws19pOSRVzVD1P26Sy\nO1+H+12yAYCXaq7MT5XPQjp7ANrDVwB4GnwU/j741dq7qZEdjytwERplxsdw\nhNI+XAIO/Lx8e5tqU0rHQsOOdfm6gJSFlpFQx6RYOMxIZmgwXxVMRzBz+32Y\nsbHd\r\n=Ax11\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjjISluOLLYBaLCgrpLOjrj6XLdpb5LNDLUpTLqV68rAIhAPA0YwGe5WFY5wcJVvB6VehMdzCMychPs+QfJv9OLGp9"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.115847_1637582332313_0.05800616573550821"},"_hasShrinkwrap":false},"2.0.1-BETA.120148":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.120148","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"69592f67a51423d3c4ee52c8d024bc0ab8505454","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.120148","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3z0c7AuT10lZf0sRqZW1FzlgYBWN5iteCuJSqTQmNWguLlpTJTAGJaaB+WQcCdarwEXJsf7t8S6WrhBD2RUoHA==","shasum":"3300761c92befff8a79c85a125e91ab2854857de","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.120148.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm4axCRA9TVsSAnZWagAA/bgP/0oDrswJceEpYuPdoiMS\nLXlFar5UXljjQhjsQcU/jM6ygjg8uTOPrtfXE1kcfFXK+BJdL8ui39YdpRbW\nRX+uHkfB0x8oAJscCqx/6WIL+HIihWnVkgEt0HXH9xMSIC27cxEp4mR6Or3j\nRkVX7v6ehosiZz7CnX+sd0ub42jEaSwIBcz7Pe4bmpPICsV1u2+S0+3HVk/P\n1RpccvH695h9Td8NSBNTw3dUSGKwytFieGTXKot6mcBF7Kscq6WWfz9ruuat\nPOZlHIpRUNFm3q6B2YVHx7d7aD+5qeZcTCIBbdExZw6PTiEajr1TdP9Ofq9p\nkKMeW4QiahQ1vh2VjBn1OpVBvirzM0xdv2pIQ4ed82id2fP6xCzRa9p6k7Up\niB1zZiuWjpZFX1vA726BX1ctWhqEy+4C5c/VcjgGp2LlfVpCQBdvBCOMoaRV\neqvQ0yN/UnkEPcPYWXxo84uMJbAvUxlXKsA+y35TaBLWVq58aNlMa1zt+VyB\nJf2slZ7XRnXPGoRyAb8Yd8JR4aKJ6+cORM70AMEBz3vmQQPf6UAb1I0/OEf/\nK/WN2HnToWdMKG3vNBYN/UqyTSCnOCR694qXPn3OBIwd8N4moSRyWKksAo3r\nV4nvs7yIzI8ygZlFySOVTUDuyk1vELrhu0Pguwqkcnu+63DVzadkhawKRSkH\nL2rx\r\n=XERK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrPRnU71wzEzNR2A85S8cPE3m82tk0ZL5T5ppvuAeNjgIgUtsl1nvALPvBjxSiq8nBvV5/XguYjd0isAKhchzJD/c="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.120148_1637582512853_0.2300564746516136"},"_hasShrinkwrap":false},"2.0.1-BETA.120227":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.120227","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"2a6c58f2ab58af71253ac609e5095e6df18d1d58","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.120227","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-dIfF1LkOc0I6K2XEk5NbpStD89B6ErgPsUcZ/k5kYYLfLQCqSFhduChA1elfeOkLP0den7K5FkLVfA/r/C7Wyw==","shasum":"803dd922ac0c8c22a3cb48fb4102fd8912d781c5","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.120227.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm4bgCRA9TVsSAnZWagAApskP/32W0O+39GXRtKguV6X5\nY706DPEJxnQb3n/B+k+NdDuvjCcwIfIskyMInqu/G/BGg+NUga20Bp19+P44\nle6eo1Tw/TygMNg1xJkFmqDsCfiKrVuCbdFUJFTvGcIA+Ik6LuYsMUXd/sqc\nCsL7l1NWG62+HVPrPBw1hOEqg20M0HMz29tK3Y5G7iDWE298XdeKa4R/nQxf\nyaezoBiEn3luiyxF7swBS9ufQppQEz9uW6+jkvNtRc+5Byv/J0cti0IQYP85\n6oyLOKbY/UFdx0I0CHe/AqSd/VnhMbIMrfwhv+V7eGWCHfjqoy8z8goHceYs\nEecPPmJehVNb5wsr61ttrCQ5Hpxu4Dds5tZApqVY+JrEMnRSaynvKVIJ7Q2b\nn7aeAwX8goq1UlneJvN6JogPR9c7tOo3HdQqD5KLqDvCGsqWRwbqYRpVSV2Z\nFfPexs4XbrUzQla1JABn8BFd0FzW0eoDzpfLkTVM1wYlIvPFjx2ojl3X7TRL\n6TpEG7Y4hAa31JCExWPe838IzK3rQd01kTPvdqr6wnDuQubpH0+zjQZYtiyE\nUwp7n0bbHIYYyOGN2Tmba/Iu0+QrrD9Dmdn8KwhhXIo0eTTAcgpJwka532F8\nCouDblduVSi7T31SrAO84eABw9RUzzoonwdh0+/HsNxjU2OggIGkLI+IuBwg\nnjLr\r\n=BpH/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBst99Pdmubb2EOFQucu9FoJDcZvj8HK2SQRW2xPjaLaAiEA+2bgDMuV62E0KePiEfqPAoRga6Pi+AXRR6CZWCwtLXY="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.120227_1637582552600_0.12524191853034217"},"_hasShrinkwrap":false},"2.0.1-BETA.121229":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.121229","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"f361e218f047a573bc4db552e5c19f867c734896","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.121229","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Dq0eo9AFsrCAwzva0Rtez3/N2CG6MYqFMzYHtnBRN45BpmadyekfR7NdZpy52Cm+N9zUYuHt99SmK/GFgLeDBA==","shasum":"5e5db3f4acef3e793db721e82f061fedda946162","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.121229.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm4kyCRA9TVsSAnZWagAAZjAQAIsgT6eweDOVxRL7Bd2x\neW1XIa3k+zLUo8E+BD5CJgrELEu967G+nxPmGsF+bDh/pX5BTlAvs4qnujL1\nTGgJU3MN1IywTY1CmgQKfDaw7tQMvZ/6ZMCDDP8fqKG3AKGon1FEq0m8SkGm\no+Jw8QXoNCaBufIZHx+WY1IFSO3rY0ls2INiLFPbKEHctUz0fhGQQzN9iy7V\nPlYsphHdYapOF5IQPobUww6R4rcpG7Plhy3AduoxBXehRYrmaqlNArAjZ4m0\nt2pYVClE5iFZ4j0Nc47oM/PPlNC4M25uJkgRAYXJgKPEaseudnZaLwWLj9mF\n8KEiqp9+8NLhS89/tunBIRofq7Tt0PEajz2tO8Y9rR2YjZg9a9clzmc056VT\nMMmim7tNaNhMBKxTFLExHpjEPJeUYMGBZrRJBVvvhFZ/hdx6amYzeBSqKAJv\nDbtuEFyUIPhcD14kJPEX0FMM6PWDQrflPsqSb5qXlDiiaIeOa/bBNDq2+zG+\nDEKEB8mUbE3GUZkDv710tURVZxOpZBzT3eGYsjSp4ymQVjYcOMChkj5ajJAq\nrLMvksKHYbeRr1NoMclhIbM1vde1iiYLfyqUvDx2B+q1UGZ0WZt2AtEJKx//\nGCdi9Vp8Tx70PK879NG9bM8uZQkwosRhUbMqvPj8jsv0J0BAikj5xDEptAbj\nuwGP\r\n=6HbX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2f6l99LLexmJTYBZSEJ+dq2sXxiB4j3WMgZfTVBQKTAIgZPU9UbESK9mzeDWkz1wvCZcihAA9EwsrR0yv/zPRXMQ="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.121229_1637583154543_0.27464655413136807"},"_hasShrinkwrap":false},"2.0.1-BETA.144113":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.144113","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"7955a8c9550eee63adc10afdf2baeb5f2dff4c55","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.144113","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-EqGMub3TGl8JmMhtIZWhXH3xGFF+DUBvLe1E9RPpY69Fqw+Q0fdSS40KY9ZrTEazAcVSzLg7pxwD5h0B0CE7NA==","shasum":"bd10226bfdc32de200d116ff897d7454b8181002","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.144113.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm6wOCRA9TVsSAnZWagAAyIMP/3+X9LXs6hSLQsHHaeTe\nD2KoVLPjvn/sC9SLaObGiXgoTqDlcasxifJQ5+V2dwz2brT6YKTY1w60MZXa\njI4PRJM8vFsTdtA6kghYnLV5b7pACbXzKhlezAlHdb9OiivahJQLt47SfN2/\nu2QkiMco9OA+M2fsv8GPgxTOy9GyqLcUbNLRTp4rBbqMd6tklCosTF17Ai3p\nWzfCZXYOZ89PbsZovW1zVzC9HfxZQLrAhF2fYTOL+AqKv0XZWX0WSjVmmITQ\ncsMecZK3UCB0ZUmpbyOaRDp5bk3ZBvRYj0tdu0QfAsmNHHwt+n1xphtxyuyW\nC98WCSC/1qQ+jcnIeV9OQERQ2rqzJ6p3cX7bldDk2UgeIycsKmy5+UBOkAO4\nprjr4MUBU8Cw3C5tDI6R6VzI2pd7057mBZ8SCYfcFmwf1tR4nqHgy6A5JO5Q\n5Nh1+3JuYAGBA1J/9N6DiB3FlJG/vT3jwXUGaZo7454XkbY6STS1maDs612z\nuvP3XupLNLLgD3KtVWYpP+qqsx4amqlCUOwr6VBIXlWZf3RVX/qp/Nkn3K/m\nioIcHjphLmZlz5qTcH6wBRgS62QbzU+eDjK25GFEfi4MrPL77tYpp4yAk7qn\nfY5GYOKa8zyMoLoLwpJOXn7wxy07rE+4yrimrSBd4xuc30bpqz3OjC3PMNsS\nLbQS\r\n=ULqt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD20hw0ktwDblh77cQ6kXS0GnSqs5rLG7Mi19L20xoJPwIhAP6R8rwSSbSYQwGLcY7UG9mSijVKnGZMzBUxiIvS+yes"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.144113_1637592078566_0.5897659618424533"},"_hasShrinkwrap":false},"2.0.1-BETA.102506":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.102506","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"d8dbbb9e1777df8e3645d7887c481eb7659fdaae","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.102506","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-CDPVBv06sEeEy2xjLAqDItJNfZCFqG0hu1ihh5Z8mhleZfq84iAY2J4BPBlQ3TIhJdD8H9MssFhu76kCzVRbVg==","shasum":"83956fdaa56b91eba9c9269f4584761816348f83","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.102506.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnMGHCRA9TVsSAnZWagAARJgP/0rnBDP9TYcYLhuftfa7\nwYuGfBT2PJBWFDzlIJDiwRqvQYcrL9N7iLb15eP2SED6FW0nOeKTa1Zh5/ro\nyjUgBJ/4RgdfWrT2pCokzHPny2hQLDJ3j32Em+xsovY9f42kUNCt4Q4pUnlc\nCvMYoVenUR/9QwZXjkFYNmKhLcKC6y5burvL2IX+s+f9ep2Cg3Vzls0+Rl3H\nmU+OVQH0F5frO2N+SISG60GA8Swt1rKhQxRQVfQgx8rW4+48Qep77afjj/P9\neBoqMdjeVsQqC1SJ4okw6K1T1SkP2YjXK8fDvolBzkeugM+b/OQAYYRCw6mK\nJGq/Db0u9FzFKJyXvppiFU1QjcmAJpxfDhzCKaUxz1a2pUgeukUlbqaYD9VW\nnClss+IVTPVjhLLNZafbFnf3lVrSUwin95TQ8RTngzrn87zsPbRtwIa/hsdr\n4FOBKZGVXaZlvu9xvPzjxAfCSWq0JoekYlgKELSQFanKxdQeKEtO10cN9NEE\nnfLoxIp9KYPeXrZEeZR0FMPc4+R1QemC46v5WTdrpDVMigM8Mtb8mOlEXuOL\nJlkmNFe2yzjPO4GlTyp2uio/5l/iCpUQE7P1m42hb8DCvul7Rme6Dgb2/2y/\nguXhsO1HNNj3IaIFMitPJBj1wHGeQsjIvI3PuqBjngNFRDlS38ocg+uJAAY/\niWIM\r\n=0/I6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaggL4QC+1D0omQqgcmfQsE7B2277lLUIHUWp3TIdjCAiEA5WPECxEIuWt/MfuooCEIHO4OsWOc8/3qtS91DQuPhvo="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.102506_1637663111143_0.5436316353756612"},"_hasShrinkwrap":false},"2.0.1-BETA.102858":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.102858","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"f4b33ae919b8bb967b3f55435cd0a8f8f8872a14","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.102858","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OKcKXquhPz+CPlLvNRc1J6xf8kjikdoUXIRMb8V9krDFxykcSskp0uVUYb0xv4c4ldND04d6vq+LtCZWFPUaeA==","shasum":"6d3ec2fdfd5e71d80c5736cf5bfe615eb76e6977","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.102858.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnMJ4CRA9TVsSAnZWagAAZkwQAJGaQiRaY93BrGTY5SB1\neSgVEnCiO/T0mo+GFY0WksbxSv84uEDBSNCN4vhC/pG4iI3MsUVqwubk9w7Z\nnDrUHlt9jxIy1VSidYpntzr4Ifjzs1bbMjaelEM5I6WewSzS2fc11mGTHzYG\nLK00oMeVxaAVjuHpKIL+CczDLhyRVTGcqMq9Ddux3PtMDk3o3xnmwfbR8MQ7\nARX5dYFwRJC5Jo6T7/7Um7+igZsZP621BYq69sYw7W04ZpPQKQty0lWQVJXn\nNc9N1kgriujB9RfxrEapi+KbblPQNpUjPja7V/Wnb57b9jvy381VcDgksG9Y\nX/bBpE1PAl/TyK7reatGdS3a2F2Dxs4IXNbaYXINYq/o2IK5ft6Sg89neNCC\nV8/NQ8m+WwGKbz4fQ2enK/d1DkgnDBzdeO78cuAe+dhd4mAg6ZZdOe+wSun/\ncEh/ZTkI2TbpSNgfHU4FxFVEt5akM+b6cBJhTbKTefhuReJJnyQA9qG+BHAY\nQ6CbZWfHfo+Oa9pe1htbwlV+xvi3d0D1Zm4eWqYglaUGpOu7Hyaz6B0rfer7\nivgRiY+qlhhAo/3w4ueELvMgzIS0U7G12PdIsSOSDEu2pJzuGQuS7xr44TiL\nq+NNutmkRx4lF5uiJoLwLMjmkGTIFB0eU5wltBRdM+C15slXGJeLh03Q6iMQ\nMVUP\r\n=Kc/Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtssV+3q/Z2w5EmptgGQFPTEgt1t4j29J7KoNSmNxdpAIgCG4mHZqNQHRelpaODp8Pwb1Qua+BaEPgzzxDlKYCEqA="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.102858_1637663345052_0.5667935238579704"},"_hasShrinkwrap":false},"2.0.1-BETA.103052":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.103052","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"5d3a85875c5cc3f9737182163a3a95c0f176230e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.103052","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-BnvlMrEjcnOE/AOD2n2KDFmtISp5+tl5Oykap683quIc3gakDQETz9pxsY50xEc8DmuDrbn5wAN9sVehETDLoA==","shasum":"150ee156c2706e233db44597c523bcfe1934f93b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.103052.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnMLhCRA9TVsSAnZWagAAzUAP/2i8JNE6nHVum5quoijD\nsRzk8lXh9L6eoiNlvus4mk5H4Dj2m1m64QX9V6g8wiGHGJZ0YW6TfD0hg9Fp\nxNPl0uIXDR8/tO6b+Blg8g4AhzknqkqCyqHyHBE5W3QHiHwY4tBljUBk9G7B\nFAWacXczoh45Mmg/uU8TchhHl39xkK6sYi1c2JBULRYvx3D/A4vHlYcnL2Zm\nE1glFUgrHrohFIdOH14HaBiF2KO+E05rjhQV4K7OYDABjRMygAVNqTXU8B3f\nytTP5S6uUMOgenKksjCLPyO6LAssZUKcIZFzaYllHDequaf37393Yj+l53cA\nxmPKMo19Qs08d6dCbm4/FVSI4cwWcexedL49mWqB1LH/ONtsS8HisF2iKAwC\nwgF7mnxUlp/GAdFpHcDmftBGbgSKkvZfxj8rj/Q2KUGndX/XLN9WgsRyVTri\nx8O1g6svP8K+PlKgESjObLsbrvW1rd64hs8zw23fNbeUYAEUl/bWIXP7f+n3\nE1g5dZ0uXz33lgx9tPqFOybSYoNBmpg+wmbycqqUUHr8VgGgEm4qCzoBGtOx\nWIuKLi8xcogqP/fWISMElQNMq8/OrBOIPxiS5kEQYRqLfRVmZeZ9OfvwvEsY\n3vt11R8q+3DWUjeeFJ1KSn43B7TDmAXiMFytphjTVvUmxc+0DIZ6Nn6N+Ezh\nUsiN\r\n=Cxxi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4yOvV4+UzFF2Id21YRmHT4p+KHd8mlY3nVgdnt4iRlwIhAK+vk+/BRMTE4jAeAotMe5gphXCfEXPpggatHYcRjPcF"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.103052_1637663457219_0.19724070334132815"},"_hasShrinkwrap":false},"2.0.1-BETA.104022":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.104022","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"ef45d3e21c5ff7bdf31d09d0c490982216b6f434","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.104022","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-BBuD27WjPf1/mlCSF4n7n0yCPuGGLiypSSxqwYA0sQRc9S59oZOjjaXlySGyykqXABlhgzZ6icfj/h/L7zapCg==","shasum":"a5c11a3ef477b8980c355af42e4f0014e01e9694","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.104022.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnMUbCRA9TVsSAnZWagAAQ4AP/i+ySCEQUFx/1XZig0J3\n8YN0smsstD1dylApW47SkuImeS/NYW7FN6V2dMiEj/XIgzNHfJZxFa9qIu0w\nEnS3OQydCSR6tqYauNM7JAoy2ySLE17/wr4usN8+QpCPfjdFEQzfqh88Frqf\nsI0eJftNuXiaYbv1Uwk9CRrXn0nE9D3C68fVhwCSqMDF8pZ44vjTHptt95Wf\nzLweiZTrzlovPzjxJwCeIbfL8ofuQbcEMi4NWImmRRNbB7Zl3U4zY2kU7Ry0\ns+rDZvi0SuQq+IhMBleheR4e2ZNq7OShfphIF2NQ7laTRiMYDtWu8Bzf27tU\nWDn1ZbXd9zfe6qZ+zqLSna+skph62pgkNFYlztNMy9J4nlL059uxUuvP8A2H\nwjOA3go9Yg8stjsVVXZ12FjkMS7uikYQU0/zWaY6EgkJcOq8M86FNhi67WaA\nC0cWkHblkvJBzZyrhqVGwMYTUcYD2ceITkFRnlZVhVHDMOMZikKqlNWPblbt\nREFxldl3+dQwE6dnNlQpxD02UNio7RQ8fjSw6ou2dvkrtLBYXtEg9/xAqFoi\n1FBTHT52yrDdrO+zFpE/TenrmFs+AczOFiI4sKQ/yino/uZlqfdVivwbj4il\nOBvxoIfBwPjhaIp/3DdTcPZNgfr5uk+B/uHXbD/n89NHLCLJKOn4qZZ6OIDk\nm5RZ\r\n=ksT8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyMliocPPuA0t3JkSd5Mb/FJhgCW3T5vqxyfdE7NxfcAIhANLSoFuRqkTrudfOSzkkCGp7N8WNs9ErvdNGQvIu+Tn6"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.104022_1637664026874_0.9336999411886484"},"_hasShrinkwrap":false},"2.0.1-BETA.124341":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.124341","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"bde25c10deea0b01e138cf91bc56844775f8acb4","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.124341","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/PomtQ64AqFk66ZOy8HW2oJrXdLV0Gv9Dynh+yTwAj5cQiWzq/C0wCWxPS0xtHpTg2U8pQoBtrN2qWp2CjaboA==","shasum":"b9cefc5b98d16a3c150558fd6d2130b7580a156f","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.124341.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnOIBCRA9TVsSAnZWagAAKsUP/i0QuMtQvzg7vkorL6Z4\nqjFue3ualn0FsnxukPqKlBZM9WgcMkuR85bRCyeBCNXOe+PkMepLkUmyntkz\n5EoSpzVDL4UdaFX5Co9Z9aZ6FT5fC6LXxb3C+Jq0ad4r22D0+uyWBQty/8Q/\nv2Dg6FgmO/sotGkdvIPFz/TNxwcpanZoHgVB/zEU3XHmdc+JTOig0d4214qC\n0ARarzbmUlbwKAmWbLIbvqVdK8IrCjdzos6U9LoMj6wNQ7V7rEqnc+LMPILg\nm+o5aKFdyllTZtX3wA0JGkrNaBcILX2wHhAeMTgYJfVi+7TD9m4DNZ5e3731\nWxiidSxVuNoVwE3fdxHwYnnDdcF638vtPl9WpTgKkgBOwVHwB4QTkcNAisyX\n1gy/CABUT4uts/QwNDhBjcd/vRDY/ySueAcbwQCsw+OohUqWvCF805w9Ap5p\nPIvwRjKF8WeumD4fm279e6eVKOm9oVNgAai6XjzGt6Bx7bsYoPKoEuRt9qtB\nINASxCxcVJWbULRZXt8woN5Fm6GBXQld5ZJ6g2IW1LzOW5SfOp1ZJGp3dmEr\n4mDNhxw5dFjmH92DXmWKeFeeLJt6/9ozqr+oxor9IUKQv96rjjLOoAA3z6uF\nhKW46kMdJC4KLxppeyTy8hA5FCLr6XtURzXtysWigGbhKCUburYwmplnio3h\nI8iT\r\n=Fo6i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCv6+Z+/CZ1wLmeTstFeBjr/7xQ/kmKlrdAENj5oeoiEQIhAM7ntgFuFIc+e+X+YhtV10Nd0EsgWYMJIJykXBdeWRz8"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.124341_1637671425857_0.834808333247794"},"_hasShrinkwrap":false},"2.0.1-BETA.192254":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.192254","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"369883844b22a291eee6dccbbe78c2093b265f7a","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.192254","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-kGdbVlzyx0rTlIvQiD5Sq3rmlosJme5wZg2mSxupE22b/VqyXavJyk5DWuXkXPJG138ETfGLRW8uq3CRn0f3yg==","shasum":"65c4b634ccb9d0639487f16a4c59865556582f53","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.192254.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhooWTCRA9TVsSAnZWagAAc5wP/RMxpc1npejmDp+qVlWi\n7tIJfqc1Ma7d8S7+fofp7i6MA5wy5ynNE9mA4RbcpO/3i78E9mr12aKAj29f\n2hER9bb2cujpriIjbI6VdAfLveCX06JcDW95Tgakr6cMIGt8nlOO9YNxpIpK\nPu+lpBPhgVyBRmV+VMm4kGoyRMQbe/PsXbItJhRZvBwhf2q3kkZozAvYO+oQ\nL539MVGWEudYbEo6RayO86U7/0+RL+kOAWfDpHZ0ggCTVcah84NCNVCFiDDH\n5ocsO1GLoYPiNZF3y+d1KJrzP4r9uPb7bojfRTx7fCB2Z+2UPYIC7zceHVrZ\nBAwAEhv+uvshfS1FS8jUoj9Uf9z2s/hkrEPQjfIZ/V9cAPd53rgS2/+iPRuY\nIJYZn+GkyP82wLA3wDDzBvWbqLV4wzVBKkTzDxwPGziYOi4dmqVjk4zqjmrf\nWqASsVCWiNwvIE/y2rswre8tsheeyzu7RCxPHhuPgDBzwDWc5eVyOgH08s/+\nJVHUV43dytnPM1aLmHcmwtnYlYM4ls4zkLd2ZVxlsRuUkbWWQUCFTtEjwTWG\nMqqGKWDngb+JhUU50dOQTT07s2QLAAgYySk5VCvDq4K7W85hdJAu4j84QqW1\nTI+3BQOwQ+sLEXds7eHUl1t0jiMFIuw5i9QsQtreKYyjpodcPzgfFtVJbcrO\no2lj\r\n=5C88\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoEig3V7iV1A+UzFhqZT1ORYGvdRpBikgMPqnnP3kUkAiATzZGKmW4vTqgRW5N8jBXAvhdpSQlEKvf6/4oBUz5zgw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.192254_1638040979178_0.09428954823543512"},"_hasShrinkwrap":false},"2.0.1-BETA.122159":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.122159","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"6f9aa7f4c38f96b65042fa3ea46143c1194f3411","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.122159","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-gvnT9dEiC0WY4IJIIzOvu7XDa/mwxWHfRqCqL8oL2ttppZVgGPMNlCdI0zfOIPObW/+lN3nnCtWxtruhNKeaJQ==","shasum":"7f1b2666fa980746eeb181557e9710ad8df41a16","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.122159.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJho3RwCRA9TVsSAnZWagAALGUP/RVL5PTJxbUdUcsefCVJ\nl5+yIonIJop6qAkZ220RwtOremlJx/i3EMKk2S+xT8+1Q3DXda+vakBM/Bbi\nWvAI3OQvzzIS9vFM66jhMc58NZ4HlUhwm4xP99eUgeXLLyWvPqsANM/Kq/nx\nYoik+ftAHVOX/lOt4X67oXvV+af1UZr3N2RHHIdv75FU27uNv0buc6r3HYJA\nLxVR0QIWPUYD+cUWAUAJ3Q4cPgNul6PDNqajdYJmN5ZxyyQoMAwogtzBfcE/\nPxmO9Pm35ld/wiKRusta7V3tgwnsX2WjC5Bby1PY+dH6kfGp4yLDBM6zKXIs\nhy9CoLvUMmblyKAAZ96nePMHtaIRWQzKIlHVbqZvqq1XFEpbRyI5JI3lUyyD\nmDGf93oLKUid8Umbv4HnGr64XnC1z9owbbZoJLXBJUiEhAYmbVu4DbvqQWnx\nGxvStj6qm++McB8KLzL1D8aTWQV6KXn7hl/gKLhWH7FtF3owsRf/OEx/8j5d\ndyh33YQh/CJkjT8BCXpA7QQXYOwehoav2MVa8aOPKprWtJTMonfOessyZXF3\nBJ2Ai+IS4wEBVTvo28+Wzufpd5FioMbS4s2fjEDsozwg3hs9h6vfwtnptPb9\nEWmoZjicHNlDa/sLoAOVffcmH1axm6QAFVfNg4+QRH2R5Jni5HC/GVAGH+pB\ns+n0\r\n=/alT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDVpINDMoZX+jflq3rtZ/R1M5i2BAovWHS2Y39JOXlT3AiEA7UY1wMEP6mHej6ecxY8oahkTjKSF7cf7owHD4zRFpNs="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.122159_1638102128231_0.966207271386667"},"_hasShrinkwrap":false},"2.0.1-BETA.153133":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.153133","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"0abdeb986d017a3410f9839b9859f7d33f3ade28","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.153133","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-aEZbj8/BObqPvpxCy9nrAw29jRTzl7TkyJj5xQCGK91Nn5kvIYuoy391HCCqxDjWW/7tQQRLphTiQUJ4NvBodg==","shasum":"f39f91f5531563b18945f11196cb0ddc776e31f6","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.153133.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpPJbCRA9TVsSAnZWagAAZM0P/2o3ddwUwER3RPhoIaut\ncGa8UlsT05IU79vk5m6N0Wls4ML1ZeanV4dx8wgedVuzKolVT/jWgmQ5v6Q0\nDkVIckGwWiQU4I3eCVHFle1lCj2hFFsREi19D1oMfqpuk6z0/K1sjTt5NRLB\ngFs0HPd7D/Lm5+kKVwrWu0J+tVLVtuUy+aoObwetVcgGpvQqmYHjZ49YJwVL\nVzu9efVWafWWtbrnZUulNpAZzqwNEwNB3I+csNRPqSFKDOLTROyoAW/06k+q\njMhPC1N8YumXAA8i46lL+KFiaqrbp4ce4MJqs6s0/MqR0SHG29dMJPTkGw21\nBbRMmJp3qC3pPJFfFgAFSXno86OY3vz43q1+WvkNITMhFx+xZzKhBQfMFF6D\nwNtmT6wSn/7bDzbPSqMqO7rYBigbQTC2twKECyGg0DC/zDSeSdveFzOAFU61\nqUErmfumDWtsoKTLwF9me4FPyiXms6hwZuv12diNu6PmJcan5qVwTHoFDrln\naoy7RMGVGFdLJG0aoHeEZFr9aOqGRcsJrACxg6lasz33YmM/8TWLdSwXPafo\nb+uHh3ZPWjqhwPALTj2Qz1gh6EZoXH86Ce5H6koSptngK0CvbpJmDYXfAa+9\nDV5c1WOhE/pg+GPobbboJFh8ZGuYdICb+uc+v0NzFkUh+udWKCr51afDNt9Q\niync\r\n=gQSm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrBcN9qMf/OiQXk4K2HftTs0UIPMPHmYEczH8mXZ2HEAiACYSC/b3EtvfUwXcotgqyxBrpnCbMQo0BJG+Iw5zARMA=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.153133_1638199898944_0.2803561770185956"},"_hasShrinkwrap":false},"2.0.1-BETA.153745":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.153745","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"0fe3e32dd38415b1eab7aa5bf604ee40f6373cc2","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.153745","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OAEC3I9yXeUm2o2BANXw6XtP5gB3IC6ywR9FZ/iYNjNomiYZYIDImBNgqbtC8sXE1Ez62lswmuAYgIOds/KanA==","shasum":"5ffeaf101327f68cc28ed37d801599dda59a455a","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.153745.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpPPPCRA9TVsSAnZWagAAAAoP/R8DDSWmBDLdSbgohn6u\nHhJjxrwJl3a+iQeVhRYQNFw3+B0Xb2MTtMEaHDdjFFqzapvFC6iDpHTCNSzf\n0nt98sm3mhj+ZohCy8z4gd5fatlvofagA3Wfv9Bh5xWosFej9xe80uk9iiyX\n40ZBceY9EtT9qKH3g8ZwIIfuuLV9Jw5Hpqin9hCH9Okdjzx7cVWt18oTsze+\nnOU/DvS+vOpqdRb0X5EykEC0786R62Um3DOiCN+arJUF+jkIsucNSy4wtPgu\neRHeR9ep7gX1BLTjhl1CMcNu57YKe4jNUnjAmVoLLXCS88ivquB8dHDCVP8A\nq1SDz4sAxL2qJCO9zxgQrmG+Xf097AYyCQ1aR12H/OHxpLv0WG3vfZkhPrIx\n7jZchsk3Jejus2lf46kn/G59ZRxOkf/x+JOswRgtXr3vyypfQZ0SLaVxJruu\nswc0Kp5uw1BNX6Whh6MvpQIqw5sAlxQcJqE0N+xtJuVaShzAxt9iDzJbtAtp\nxol80anWYlXDJn5uiozYX/qXuAWb//AMkQfjiJZvtwSplNAjVNltfprd/l+v\nAjjVy71chk4T6diOeft6B/4aCToxP1+2845DMen7FD0dWyJo3KMjfS/tPgpU\nPEmPUCxJkhiywOuxCPSHqpJ0hf/qmtDFYU3QPi97HmWnsSio1PDNBXmLJIcA\na3DM\r\n=MQSf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFSPhZgRLiGXjyknuxDiE+/t/81UQHUYKxU7q/PgeK0tAiBpRixBx2U3H8apRez4uRNHofOFd7hYylRMsgX1oLflSw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.153745_1638200271516_0.3183612048342159"},"_hasShrinkwrap":false},"2.0.1-BETA.161855":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.161855","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"a2975d84590d177b7e44706a57e4087198a2089e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.161855","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-CSCBqtVF3rCt+faXDI9lN1x5g0xyO8TU6sN17wFIXyP3nU3Gr6JaM/0xuQRKbhNCHxozDjDzHHmxKYLNcALJ7A==","shasum":"a968eb8f310155c0f389862c37c719e3936ad734","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.161855.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpP1zCRA9TVsSAnZWagAAkJUP/3XJVXSC0lAF1HBPSWpH\nFu5fgoHRojv4dy5bSp8LGRYQPnrYZ01X99W/vJyfWYvKLDmPGzLE2RsfLplL\np00Twu+zjX4ItHXavBss/WMwOkVNMZEtlSTH+rvNRpbDal7khHVXt8Vszn3Q\nXyrNwyR9WCbZMbybLqOVLgB6kRhdTrdQuwH6fsuNcHhN8ndcMxsG+dWlJgJj\nxMr7OxKShYTnn4lbjnaovHN9nkk/W5SY8jAOdOs7OZ+jP+8/Pv/2xE0LpnIH\ncg7WiB2B/hN2z82250J5aS4mwvasEVF+9WayDMEfhTrd1QSAjzO9W3Lqkaq0\nPLJ6/osqTUQjwpkAiA68K3xrdAJxqLT5q5Os8zevjo29s7RCaNITEQpwnhnH\niWE5p6nxjgJ5bMeDPyRrfO9CwPVu8T9seyrwEEn011s8WEV7nACJH/W4M3rL\ndKuv5a2yX9+zkPQwCBVk4Tu4nZxmKJpGmYpweXm7U+2Qt+6ECLasrw1ypGOK\nqV3cJ7EU2iild8m7XBNQ/BTfGvnF/OFmIIHv9i+gSQRXxdnw4rSGdfb3e7gc\nhfjQOC1B7nywrEDZyAujLxhCoVurST/NH2NRzHyiciXrRFO2aXkDGRMbT+7m\nbnw/83Nq3p1sbX6qiQ2H1MfV+uzmsFBv/0RGV2UkQuP4nE/oGUe8BM11Cbph\nMNX2\r\n=3Byl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYokBNAH27PLnXvfpfCDfZUZXw86h5AVDUJ333kV8J9QIhAMEfInV3FHvqn59MNazFBcrwSAkpiDTcNZyCU4QUwe2J"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.161855_1638202739660_0.279078128836012"},"_hasShrinkwrap":false},"2.0.1-BETA.92113":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.92113","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"596fab0bd674f2471413ff81ca7f7cbee21c921a","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.92113","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-oxvK3Sm15cRMtRx82UBpMzjtqZlBU+qwBfpGiulFneICSIjm/FcTsehn8YkoBK2IDzt6fkPumqSX281smG+LLw==","shasum":"a9f18588f925f93e807199ddc7be3a89c88eb8ca","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.92113.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqeGNCRA9TVsSAnZWagAAJh0P/30L3yyzAw23+sDQ6BSP\nqsIEpFKnK63SyCfcgtsKNXYKF84YXBLhO2Vc24iIGd0oKLIxiXdqFxyDbmDt\nJ+66Z01VIUdxVq0+YsZrPIR1HEXaJrUeBrlKAFJ47iRJcfhTg2GYdQ/6uYjh\nCOTf3OUjDXVnQlDTZ8NLdnzV5667y5GMKQumeYwwF2hC9gAtTlJHUjBwCR1T\nID2Ns0Voq55ED3gSmerkaz33rmDYKZDmcMgN4ljGB/f5M6WzC5hi3nqEVHbK\n/MUGt8woNZTxOJFaKN1avyHlxj7/cN1eDlPfVa4mjK4/2T8N2am/OAFyxu7s\nNc0iUutUP28BnMHBX9IbOri00PM6iWY871N7Y7J8EPj8OmOUEm5vIqZipHwW\n+NoDbdWgkANz7CMBUZ7WmPfl0IcO1K0Bc4vEiwkItwRPD9QkMWTlNAg4dZxp\nm2+oajAkER3nzlHqv+y8eLJj2GaX7HAZ8stpwGxnC0f0DTEEiYqL+KxkZKlI\nhkEcq/JZc8cCckVchM5R01f1+MTlDXj/wATZaDSV8Z/bT1Lzirh92LFS8GQn\ncdbRZhvo67bXZqQckkOZwy/snwWdG4ymuU47LTwOXQYS8RU3sueEV9q9FGeQ\nj6ZQRjkW6VO66Ts2J7SWFq5WaJYrdNk9yQrQPdO1JAB/oVIqYCzQxsjccYgH\nUqjC\r\n=bdMM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJYZZSTUVBNO8W6shXmxwH7RWsm/u4MqoVwIH139aYagIhAL9sEZli5pr8/ZjbVIk2rAHoyTWJ24F95ys3rT+Jza/0"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.92113_1638523277616_0.997625257429513"},"_hasShrinkwrap":false},"2.0.1-BETA.102553":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.102553","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"9b3405be37fa847b6506f57c4eb714d933e3e114","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.102553","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-GFx4QUCU9P1X71/mKIfzFXqcB9Bi8mrBmbOE3UJ2rXJ+cctHcEjbnFJT04KnprW1yU4NJrQE/Fga2sih3cwv7Q==","shasum":"aded3b363fd1b6d6d9fde445a2703c8505850222","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.102553.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqfC2CRA9TVsSAnZWagAAScgP+QCgpvm84TmsFXVkrrP0\nAmSpMDgU09346ji3yyDmGwHjT9VbaQwEiXNi/99FN7DDbL2hVQFEOAL2b10w\nATTt+7z281vbUUdh2NgrWbaM+ezo3uBS9yFkA3/226SO2H05G7B5tBZCwUnj\nCqotR+GHwY0asRrd+2C2utfDq1XtgEiW+GxTfKfzVtuRLSaTPNVsN02za6Ut\n1QoYl/8gMXI5R6r4o/uofoDNilwUN2Wb7mXXivoCvVLG9q2vwvbJarYzx4tz\nSaMmM9OgTNPft2d2h/88lvEIyZzyxVdK/SvelkCr1Mg+2vbWJGhunq2rcSap\n6JwQjTma9UFuESp5264k8cwbePsznqjqR/qL2E/TZBjSafI93HDZvbK0Ux23\nWYafULiBmApeljDbpsZWUvrkpb93sjQlDO2TddZg5DKwREvL6duYdNk5yvaP\nkFr+FVrofxuLWKq5IUS7uq4yKbJlCSawZRuWhM5O5NR8Oory/hR27U24h2pm\nDrJLPeB0EL9EgPJ3q/UGSZ8yPTQlXBhgKtfunFvyWUC0/rqB7xYvQKwvPmB8\nM3mkWXVH5DFoqn1g138XROihwcNJfusgnZTUrSTJ5nQ1v+Mw4Ewz+v7fopa6\n50Vo6QrntWgQMhbcD5rDBOGwKV9C8SaAB+EUQe+nbfgu49HFYTPwapELwLsw\nL6A8\r\n=FApF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEtuhujbDPCAN3x2dUYnEGSmD3xTKCy/m4zxvjwmibK7AiEA6csTZHI/OttClmUvx0zzv+4pQylxgt9JMHaGO3aeEdE="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.102553_1638527158200_0.49817183919196384"},"_hasShrinkwrap":false},"2.0.1-BETA.80451":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.80451","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"a5758afb52d0cfc7e6373d69c13593bb32dc576c","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.80451","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-4/DC5hBCgrC/KQQV9zGYiO9twP9SR6nsGR+sJjVaKvvgz6lETFzImTUM/Z2zbGfH4+G2l+xjqDl+PBihZpRl2Q==","shasum":"8ce8cace582a393aaaadbf394b073f6bc4acb0a6","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.80451.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrxWoCRA9TVsSAnZWagAAuuoQAIbtL8+BFZTUSCUW4S7V\nSIhlzcJMFZF/8wV30vnwWHX8gdm/Ayb/LBSbFlhdEbLARt57bSSrVj/fv+5m\nU0WMqxHAAw+To6lxq7GqPAfXIkb00Q72GHeiuLO789i4F4BHOee4ZALL9lga\n1no86ri/4BDCf6UJwR9MzVdp7Bi3v6vKBCz8Ff5p6E+px1g57AdGZAwR+3Zx\nQ8D6kbWFkAZOXjM7GS5xmDvJ/MIsrMqInKn4HJPCf2gvU4PSTNPSCZf2585K\nGnNHii6l4UcPNMzEREO1RkDPlOiODAw739uiIEu5RL+MD8rSPyEIgVWwkvrj\nvDg65DidPrErxawTojZ+IweCgoUKVW/F93K9edR+DQc8aI4TtjzZfQ+rYQda\nq8x8ItJq40hPNqHo+lBYzcYto8BEbSha5Nk9E2PHhpo+gIFhX0dbJeAS/uHj\nFM0c1OiZudHVgl0TGxvWJ75hIUOJMsT9NGNMnK2oXe1xWRB0yrDTulBZqI4a\nuEkGRAMI/Ynu2v2ro00Fw5w/dLfrP5wHOPEdqQSR619cWGKGbMadPeXUA/VK\n51K743463gc/aX20q01SCQWKdJVeujkfpB79tu0hfIAcASMHIpyFhbRSBrz6\nhk/n7ahqwO4PR6eaYqm+RuA9ZRmq8144uydhB+FiTXtj3jZpGmJmoxxmdxkw\n4G+B\r\n=xPsw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWgCczziCMfUaxP7C/wgCoZHh1ljLquf58dw/89mRTzAiEAgLFstONS+5B9HZKDf0lPOfh8jBYKICesk262rIWocJs="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.80451_1638864296581_0.503493044118444"},"_hasShrinkwrap":false},"2.0.1-BETA.125719":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.125719","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"69eb9cec8a0e307c90bd0ea238c6ac3a1cde8b6a","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.125719","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-XQvn7X0hUXq2+zZYjIENHhRFLqNZeJw8d7aTO4YkPiVaScmK/G/ENcUa5VramMLlAXmmPkqNxbidQ6m0zCYA+w==","shasum":"3d7f7c84c7ee0a15178049448a60372f88495c43","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.125719.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs060CRA9TVsSAnZWagAAN5cQAKGQb9s7d9jZACgc8YA0\nLwq9Nx3JS9lBrYLt3lhHVJxYgIynxvEg95Af15DG6djKwcUStRFiP4uh38hA\nPEhq48y2TV4ecKAYizn/1+yJgeaeabLMUMPXiS4yrqLhu/RrZ3xk/iVQ7pDX\nqEb9+Dnp7UsmHGWkHm3uwZhqK8gk5mTm8UOBw3qjykzzGbhdxqyVPUswPgEP\ntaNGPHgzbGDqg7jjppakgVRXfeRxxtx/O+UAByoV14xJdgVM2Ot6sdzRybU4\n5FcltdHLS4WG7wrQjBxbLfySzJldnzLkItzgR9r7Pk5lXcTOy9aSDr/8tN5E\n184Ais6FXBv204mLzxSV5YRtNPOW89yCpAyn8q/xljsdAH64ZsQ+N1hEhEz9\njMMEaG3TdLLN8MzTg1wiPvVqjjTTMl0+difCZvr9osG/nxFfdoDzr9I97pYb\nrQnMgguLpsbJzJAS80DNN3mvtZkTQkHQiXm5SJ3/dBDVR3Pa7BwSjpem1vmr\nPISJvYXmRoJ1j/fAAERXrsFja8z0Bdqia1hxIA9Xgmdwv+5tsPNu0qEK8ASP\nX9m1u2NQwspPL7X7Y3uv2CTMP7JlEgFLN9VJ7XDI3iw3FDDV8vRxcPvjsGXk\n31naI8Jd4+NKO23kmQikgHiB89m63l05TEDv3yGddgHlfwaj0iArwONHQLCz\nLfH2\r\n=OlTW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBtbJhbc2KSnlWOHXfHLH/lQERrwDqOqURIJTeo9FOVAiEA7cbJIAf1FKggElio9h9b+8gNTxd6e01BUz0f3TV7lsQ="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.125719_1639141044341_0.5893715924487903"},"_hasShrinkwrap":false},"2.0.1-BETA.134826":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.134826","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"800e1fe9c060c8371f5737f0e7408eb48f46980c","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.134826","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-+O27XXN2K3jbyV1ROEmI2dtVwI7o+inHFH4KZhkYhC0f1D3TyHV/xpzezWwSn4cFKVI2+xzSDZe9l1uO1zymkQ==","shasum":"42708d1c469ea5907132619f3ef14673f0c4810c","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.134826.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtKwuCRA9TVsSAnZWagAAUWkP/1VLsE0zUTup5O2RTyMg\ncxEBMwl9te980sTRTAW+qJ5Ks8UQMj5ToZpUpV5Klnf20UZQc6NlDojEmhzC\nWLMfU+mkEwOUcuP+M1QwyZJXgJeySZrzY+2Dp/pWi/OAX1Yieef0RN7f3g5x\nhMYER2RSkcIsslVDJpGDl1bZKvztUP55fC8ZKJYT0oTYcvLNfJd1V16SAzr5\n/xYx8XNpjdUBnPd5zK0ZbkSqawANtWdd2Z4Ragn8zCVIeEgUVzioLe7TRzNM\nqCa1dMq3a5hnN2v+gIP6WFz0XpSFvCAth0jnWYz6pmo1o/xMYEDKTOCVAc84\nTCmbtrzLt6I40IjnApV9t7dFClRAmwtiZw3QpsIdWXLBOP0HecCGAfb7k19q\nAwGoymMVLtbr7fNOfvIO/RSWc2ZXdKhC3yn5meVswY29+8cuHxYxI0w6fWuy\nx5ZJGLgzqqMQaZ0ptJUTXtqbomfbG874OTHFBdHJcIro13GIbzpHskRQFORZ\ndqicSiLko5FQG34JW0Hz2cmXqa0csQqdMWxVBi98wWupQny4yIdt5HSflX0s\nru/Z0ZQ1B4LC6SDqxiootxDvK12MVxQy4oSHbIMMp47QF2oKDn7h8mJKIRNp\nhEoM6AiScRyvzQ1qCDKzpEg8Eq7Tk0lUashNHpLFXLlC7vABpumcxAI477lI\nHhI0\r\n=7qBO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIm6v0GtRF7uBw/W/EQAC2ztcMYtU1n6XYVQpCDWF3FAIgQbFc8/sgcCdyAGtLBzqR2BQRpN/taJGLpu9kIM/Yut4="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.134826_1639230510846_0.6999549460334917"},"_hasShrinkwrap":false},"2.0.1-BETA.104118":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.104118","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"a02797c76544ef7cbba4527be047a8ece8017920","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.104118","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xhkpPKADXF9RVjPHu7K75D0AnQQpt5QUqeX+SuR5KjqLt3JpO/PGbBP3yWGj/Ny1kEz0vyzBiFcXdMTbUbXIfw==","shasum":"c1ddee9ae427f45721bdb00d549c8f7d21e177bc","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.104118.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtdHTCRA9TVsSAnZWagAAUtEP/iTned9gV0QKrF8e4lxp\nqQcb6L3D98Dub+ZIiSs+kS/Okaxgut/uQN+XFSmtSvobwNQM/S4q03HiHOCi\nyiH31fqgOKbUUl/UmvQtdsMsFELKjrClkLzikX2cO1oXpTLuaRbIlLg9apVO\nY47KWDmg4Si0Cv+VGsA/WAKklNLhFoY03U1MEu9+RslfRDL0GHcrxno3ibYD\ndCffmwwjM+wxJkj775Vaux+7KkYmmcQhF0ZB3LEZ6QAbb2DM9jaQLk5qN7Qd\ngAfd5jbxMSzBzCNDD23WHtEzEgpMmSDemRQDN0v+ZN/zR2k0h2QQwu91lJuc\nEu03WsFTqzcceJ03DF93zMSbNdSpB/mbBVDZiy6WZtJfcfR00lL1FYTKhE6e\ny1KR68ORi8eCyD1PM+WZCqAQ6bJCDMJQ9R0SJ5+7kwSxNpLCrwZltvZP5blZ\ndAbeh0ZU8nX5xCoyY6+u3Btfb56hsImYAFsb16Esor01hH1tc1fcZCUOyJPY\nnd4R+vViLJCdMOFPwIDlyE+Wttm2DmCJVmDn8Yj+7hylY90aU2B6uKZHk9Dk\n7PVGIDjVyzzCVXUOAtfyTT51C81Ce1HnsoNaDQijo0fa0JtFRXH+FqVSzuXj\n8zJWZ6OlQOeUI7bOY6fHuqMDqJXs6EppYpWNHaMyEiv213gq4UKVotCWPTqh\nMMxo\r\n=ndrt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjnFJjRQWhvkNx+zoV0Q/Npj23dyAAIRaa3NIahKF6uwIgbB8q2bsf6rbbzwCs6nJDq2PuAajkeqolyUIKOlFKIHY="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.104118_1639305683441_0.27030898035675177"},"_hasShrinkwrap":false},"2.0.1-BETA.111110":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.111110","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"b9037e7b5e5fb57fc0a7ef4c14f22858d97ea655","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.111110","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-JHxCwah83QAGvT+WDcp/yFXu+PReJAKzBEmHOPhXYq/I7BtmkZEXVIGU33XFXgEzmF42xa+QNta7digwA7UmEg==","shasum":"ff0f38820f75b5fc3363c3db8382d4dacd977405","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.111110.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtdjTCRA9TVsSAnZWagAASWcP/01w3d+lcrde0V7uIN+Y\n/GkH4t/IrUuYbH7c+hzse0O6XJaeS2qfUDMvbYxcnGgumoFXflP6pDSq+VZm\nPN8vDveB1cyUNrdeQsG3vPpNWIQbAL7F+j1FWvT6i9hgqG2CKelv2QJuRcrP\njWhMWVyGCpCwg+HtJ23+izjqEWLeai5dYNJB59NS7hXt6i9yJp1mflramiU0\n9Ahe2JVbS08W3AY7c7WYiEfcACDlGBp2+9N/R7hIpXjG1tQx5bLHL8nHxvJw\n0XDflxDV1MYB5j1jWDlhgw9VYIoe5n0xBtpqAuVObl7x7tKvl8TJJy6z+vka\nlGVCGDq6MYfqbqO3cFHc1rihc6Ib/Lj7aS3fDor5R6E5AHgcTA3VlV5dJNMG\n0g73AyxtMPvgbEJNrPWDASfwDfsp3/w7goH9cfen2jL76362hTDjr6iQ5DX+\n3M2F6NmZYPeCaJlkp6CC+FrIcXSJqsOELN4oQ3BEjrOZc+yUJzL36/CcCizI\ndZ6HaTOUuNb5sngfbgUHAdGQyO+1yA+6Rp2U8CQYwPcrU5UQKehYT9812E/5\nPAFOM6O7rHwUZbvoZ8q1HMTZYbH6gZRFtuukRsG0+3yUYkL28tcSZ6Gk3l24\n8MWSi21htem9cA16ZpjKdI3crxVNQzKmqicbBjasJIRoT6kJp7+Da0WdZz2i\nYnia\r\n=594s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/2tb2iM49/03HWZMFDVhgYL6EcseGkStt/4Xm9fbCgAiEA/SjC7/sJbAjsYHU/48PGTZXYQC3udkFmAETCVgQLg1c="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.111110_1639307475583_0.1482462035565748"},"_hasShrinkwrap":false},"2.0.1-BETA.112050":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.112050","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"3da8a744bb5f208808209f23872fa8afbb5fc205","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.112050","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ChZkOUAEbyTAhTfoFzkOGqMxOpSD5KmBh3e7QYIjfykIOWhmvnDRm1cYLizL5nwZMd5cd0neaZQ30GZjaICXNw==","shasum":"210aeabd977561c6d21c98a1f26ef54cb00fc94d","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.112050.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtdsXCRA9TVsSAnZWagAAwvYP/js6dqT4QjpiT5CRZOIf\ns/gx8vT1ghYdnmSDDqNbz0vU4Sk1ZbVZNoM8K1NvuRdNqcIPZTVwnUD0R0Qx\nm2DA6bZ3a2HKWNQ3sksAgi8BngHWS4nK/j1aJDQImv5SVRfrOt+PyZFSeauD\nSnlK8tSGbilFOYbONcCAqTztVDx9rpPwJ3NfhBLlnioZwD+25fJnDpHDgxg2\nIIwLjVxBevYcVh0lCrgYvwB5svf+Y9CixfoS9pKIUjxcqJ3rRkCEIDq3Q6ws\ncl61pMxr348db6AEJ/kGUihzYmAgni2lXqIkondotN9Qckc//e5HdXb+M1Tp\nA3fRbciv7vajrLz1TjvSWzaj0SVYFcoeRT2qGLjVT9255gVq/DlH87OlW0r5\n3xu3ogNdL+I29ayVBzzTAaP0EpyTlngiYZtn3Fqj7LO78LHRXG3/fmjZGA12\nUqdRb+4ATO9k/w+CAgCwjaQs8HbJ47sRU9snfBjPs3l9oj3Uz1mHM7Yvz5K7\nftVo+8EwLcKB3ByFHXbgRAf1eHPlk4ItK1VnMeP4ts9sOLxoOnAFUSYVqxBB\njETmdmF0xoIC67dCsxvJSeg1BEHZQcMnfBLO/RxXqPOsX2jzqmGTjDF49KvG\nno4075wzGj12r315wvG8GrqTWGlYeWRkMUjbNgcivgUEH3hepjIsDzRMv22d\nJ0dJ\r\n=Hwwv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHuIzOqU3y1LmlAakSPlxT+LHHqtCnITniI85W8ch4AwIgednDvD+4BoRoMaH2BhITe4nzQa805Y+HSazxG28QyB8="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.112050_1639308055023_0.9151727525366062"},"_hasShrinkwrap":false},"2.0.1-BETA.113624":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.113624","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"f35879190fc8f1f9fba272cb9e62d4167deb7525","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.113624","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hNPMWJG00X5hut++XBa4ojS/NDz9OZgc/gonbq4a1O7GZ3UfeGvsU/u9HM3TtfbihuxDxirgqMsB/KtUsLKGoA==","shasum":"3138035bddfaf7df8a4233d9e98f987c333abe7e","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.113624.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtd69CRA9TVsSAnZWagAAoSwP/jbDxVc+futponlaeHy0\nKikm+j5bbX6oL+QNl9MXo7f2OT5cx4EcZCR95V7cRgCAk/KYKL/6XCDQq3Qd\nJmDfG34hVjPictdOMMBP24iA7xUnjyxj/JPvbvXp+Z+0OluVyVcD/OvBM3Z1\nW4gzOR86mxzpO2JMik94B98X5Hgc8HMUcSJDjXfdbvKKvEsLV2WOFCiEHqHD\nPSpX6wkhrMbiVhoMxO3+R5LeVOEAJgmYT7XoN2CrupK+2CdrJhSbNLfxvz0u\nBSeiSeyAoKsd9BnK1VuRytFYL7VAjS5cNxHzja6zNVzzqcd4yHRB6sapKdPA\ntgKYAVW0QZwCRFweOI2x9uVFZs+C7Bj4QnuHsVBS1XGRja+OsXekJbXI5DUi\nIflvwpfA5JwVJ9Cv8rXLyQ4oWKjfW37g4xnJ25ne/8Ydw24R5JXFWH+Tlu2L\nGQDxIRxFSpiFAVtJ3Niv1+4MmPmYjo/QsVvKQF45Q6Dc8IV0qjwX7dohQkb5\njVGm1TgVmSU6dm1qAlaP9vRzc4eAIVLCbXhEnL4sp+e1Y0UVO/gZo/3ev8PU\n8Se9rWdP+FzflgnRz6SCvj6CKVuqCZcP1QowwcUwDZLurSBCOC+e8NlVTloD\nHIoJVpGxlBuMND1EtSmgsJrhtdEDuS6agNuW0cWjhmE2OT4jFKXkbgjW6dDV\n5KSE\r\n=SFQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8xtmEQvp0WhwjifoQW4HU7PsSeCw3YY1WkT5qLlsjCAiAKpKGmEMKxHhm5pp3JVn5K4yMIMvdWg/y/JgsyiQ4PIQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.113624_1639308988957_0.6775062027771537"},"_hasShrinkwrap":false},"2.0.1-BETA.145033":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.145033","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"c08979e5ffaf3ee1bf35eedb44fc4f859f72412f","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.145033","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-MTEO0UYUAy6FdEZclD9d9zJjx8P8unGHsGNjEGFEamko1TlpfrzzRPuMa/DRr01mGyFo3dj+X4y2P1pnPwBMzw==","shasum":"a39c4a4f6ded32f59a89c28ccf3890a362c86b02","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.145033.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtgw9CRA9TVsSAnZWagAAmdQP/1augdznZeSCqDTU9j91\n0+FecZB6qZEBhkTJSPcHazD9lpvGdIxR7el/VTZ3qF722IaTjFkndfkU454s\nIxGsmuvCuoMXDquGFnohal7e05pSuykHWZvZvC1FkXKVcgOqGeYFJlnluThh\nZJjiPx1kVpZTdE2IMmvrSWFrypZmAD77Gh4FNM25E+/Q/2Ix8k2ZuEVc0F9U\n3LtQ3o1zqzFhE5FPw2ZZ21VGRnAdVn8YqemRkBAz70EXSmk4oRYO3gR7H7DM\nlb6EXv9DLKu/oZNQJT6J/NqxUg/dApGnC3RF7/mbpqu0O9+o/GEG4edAwSFW\ndiXRXYsIFynGHq8lFgGy2BkRAT7dXCn5DNyToXzF85Fl2Tbg7HFbDxh4VVAs\nLy2/o7YJji9beyQ3gj4b60X1j8zgaJkdU+9iPqlxjLiTlF/0q4kJ2uQ95a3v\nFYzBnx7LjjKUWNJFHfvE9qvZlMBjNaK3m4vRBOD1nbA1nmvFElJxwv1mKheV\nyrbenv7eOL1TC3bLlHcrjHCPUyl23F7QmXKNREDVrIyTqc4854iwjdjxUF4a\n906bbohLnQap8ABfJMEhfzMDtKz4aEHPwZ45leL6m3SXZ/ZGDXvOqhDl0r/C\nS3ACdbUcvSwns/EdXFYsObLN4tP3wPYWQg3GeS5JKqRyrOpviagskpPbSVtz\nHkFd\r\n=qYTl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAB5uqdfLg3LQ7IQLZr401SPmciBt8Zu7m9xhaRj/iHAiAmFIPnA4mkAjUkBsKUi/8n3xGlpIYVmUGIzoaUv/MaGw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.145033_1639320637120_0.5034071403179603"},"_hasShrinkwrap":false},"2.0.1-BETA.113116":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.113116","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"f78b9867888f59da9560191f5086a4f815774b82","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.113116","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7mw9VGVT9X8M3xn4tGKoaMH8EPO6c2ySMrH0gwnsncQCrsAThSAVWrv6QiWJ10E+Uq6HMTYH+VPIH7+wbtP2RQ==","shasum":"c5bac75de7ece5fa0a5f526464b04d97930ac5a2","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.113116.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhty8ICRA9TVsSAnZWagAAUI8P/A8M1yOzjCmHkNR7lGGh\n/GRkUjnhXeBInxCWaR2LRyZ/95Toy6iZcYwlEL59sVXfuyNtBEJBu/qtqZFy\nhDdrsqW64GyhHtoSzevEAxmpOTiz6JOI+iAtrTzxlbYjD08wnGuuhYOFzxgc\nyLUXcB30j6krV70fpvZpwjPuPJ/sAGLn6PLS72htFAdrgke2QJJlyQL6/qh5\nKxgEhPEDUOQG1fFAytaBeLT/LMsptW6dt2zdZZnu+0qKBgwINJSd6G/DZ7to\noYrBdYt83Qu23dPrHHo4QpxnxnQ1XzALchBtZZSPgbRnff6ERhNOdMyhCXSv\nfeZCUxKoroKhxUB1wvni5FqjkK33FeT3dXJLGSlhPQk1h7Wcy3u4aSwXe08o\ndsth0PWAV53a0/LxQ7OLah1niXbK8VErFRDrnXMT/XQIu8kYXM4OcEXw3cs6\ngrqlu9NvrphGO03CM7moejaLxzHiLd8cI0RiPK4ZPGRbir8zEEv3GG1GyJsc\neJDko5MMd9VOWBENPmn8x1u/oFg9zyIaKqV/uXFDqaUl7u+vkg2b5OL8fMeQ\nSggXLr+7SBlD8bZEks2Winp1QEbC24ypIjY7dfvzQvMlKErs634S4emRbgH9\n/CkWQXcd/6mM3ObTIYpjiGqL0j5QSRyiRfn32FXHELXOliHR2FetgvKJTTC8\nrgEq\r\n=1msu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmRGwgtnLB4wvgOYZA/Jr/r/uabebLBTvOe9BkFsba2AiEA3U9xbQZcnCJvnV6a3jnZW6cD4VGqmKL9/4pngrrB2jk="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.113116_1639395080831_0.30646242495785136"},"_hasShrinkwrap":false},"2.0.1-BETA.114714":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.114714","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"4bd997697cb77deba3b0b298381b2fb0dd143bcf","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.114714","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-KSzxkdPrB5Cp/Fy7XwBOyUMpljGMa+s8t9hxv7XinuTOGyjKTiWo2bytggVugwM92Z9q5kyVoIAGEz1hpDVugQ==","shasum":"7918f324112c83c9cefa4cadae563361208ad391","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.114714.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtzLHCRA9TVsSAnZWagAAnl8QAJN/RrzKYSFONoVkLijK\nOqN2bjGPZWY8q2tMIpFmrutXM/RnLm7Q6mttdpxcxjxp/MmLiXSD2DtlvPP1\nuWOIueSQ85j5cJyMclnGqq2wv9VJvtFQLYDz8m9TEcgwG9KPL9g4JYECYj+6\n3Fe2baVpP/MEEnW0IsHrBdAf3uaUrJ3R5Z/tKm3UJPv48RUuFrzpzBEYa6pS\nbcVea5eqQUBTN/KIzUs4N19oCNUqPypRT0ZvhjMYXVJwvvKkUsNRoRgKte0P\nkun4Ebk4SrFXN/odxP+PfzhIF6tjFlP+L7KAXly6V/hjh4BdzDuYgqLNUzIC\n4DKyYkgqHRmv9g9yftxmRtpBeYtX6CpM/XIT2Xqx4m80ltCsWNEhGhrqJP9X\noED5h/Is3aY0xLRCZPmzdfFDq/WSbEYVTD7iHXe0nozcKuxwbRVV5tIvf5Ms\nWCBDFIe5ZuyCMgf6rTiDck0QJ768FXY49i3c44k+8Ev8V2McDfjTYlS5aPM/\n8oFyztk+EjIGxHO2rz4H2XhvUXEZ2nVrz+WXmJncLgS24saxsy6ja5o7a6u3\nLERLpkcTSC6XmwWDo3B3Zbiyv+gR5+3nQVybLvOf2NcK5IHWvo1FINWmj459\ngl1DTJXMAZP2D0oDw31E53kajHUM6XymKDt8ZAdlLl1g49I6TrTWvSdPUQKA\nzvl0\r\n=Ksw/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+hPvyy0RobICyQ7f8gD7bfZmq1zvw7dE1Bqdkb6X/YAiEAoClhyyvOkLJJ9ap7GjBEkok2/NDzl82GqaX1LFgNBBk="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.114714_1639396039198_0.2261920328211695"},"_hasShrinkwrap":false},"2.0.1-BETA.121338":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.121338","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"2b8e0a23cf17de578b5f7b2eb2eceec6e5c5c7c0","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.121338","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VcZHntAS19lyuvWR+1gGdNtubTJOjFn8My0cZx2IKJV6jblUfzIjFc7XdvYUZN/4z3V3z7fREmKS0qgU0p37YA==","shasum":"15cbb7bd292b73ef3aba680971d1b68c3a1873e7","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.121338.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtzj2CRA9TVsSAnZWagAAd/UQAInC6NxtkeIjs7pdf/2d\nQpUQ5JeMEP8Evih3iqov+bZ973XctvThWgTHSwZk5zUDzmVI73hkv05vDyZg\noYvb+NrlpJwMw6HY+5wcPQc4GjGHHRrCli0vNfeorhrjs/Uak4we062n9RQM\nhacCht2eCvblzONozxF1HxEcZ3hSasUDTOl5lsLvgoQvIFSuy0j+WSkJtllF\nHS+Ly0womyAKSUIy8p33DAywHD2rnO+JsStnKhEEjLZJa32kLtoeTPH1iVh+\nKu3CMdTU119oqIb2bIe9ctJ0V3f4pjx74fqWnAGX74PHmZDauWDqcTecx2dd\nsbe1I0hyC89/lCejcM7TwV/UFABN9FaFDLJURVfINxIN5j86r321PKObhGEM\nkFnzhqdGN4bhyeoNUxR2iMAUHBufh7BmRHZGzirh7gxXA06CiwnL4OdIOMhL\nh+h3Z89FtbWdxKBBVujclmVp9JTUv1KXQ0WxJ6F00i4aEQ+Z+kdopcPhj7na\nsF+0QuUbwwJrXwgSrsdVRsVfwTZWiwjt2+zImvq2N5O1tE8K3ku8mSOxBCjp\nBvf2bKT28AZFJP0Ns0u7VO4zI81LpHxXhKwkV3yD/UA+9LZcxuggDqKpBtoP\nDz/ctbDo4nsoK30oFiOEA36bwUt4houwtSd420Kj7SWlBp1irZDvMRR5/UVN\ncLjf\r\n=jlX+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCo2T7a7FFBJWhkU48qttKKCcn/FFFMjh9ODPNSk0dDAiEAqgpMZadaHTA3cH0bg+DBJ8J7DTgt15r02E668Ug5e2o="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.121338_1639397622609_0.39441716152833983"},"_hasShrinkwrap":false},"2.0.1-BETA.123408":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.123408","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"4a073ec91bb31cf77587a52259fa53ef9a5e8dcd","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.123408","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xNe3P3L71VqVCG1LxjWTHCCYq2lHo0wRgXRGA0ssr88/CfGUriAqUThXnSj39+isGK5g5DK1mKi6f3ZVAtnRLw==","shasum":"022e0eb4454b2215518b58dfb4a96b53089820a3","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.123408.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtz3FCRA9TVsSAnZWagAAmi4QAIsFr5DuZii86ikf9bys\nfLkI+46tkHSARcwVe20tO3RqIxtLgJD0aTdG3Gu/RIKtgYridYx9Wt0oMV8/\nuVPAQMtl/1SYPiJ8ywghdyhPiZ3neyDWuyWfnlvqIn6/KBNTyIim8q6pmljQ\n4uVIm3B6v84m8DGTzBUXB19M4SRU182WNlna9JsgqxyXj7eIVNFwOjQHtQbW\nU93g4ljkUYmXybe8rzG8m9uU/YbyGnW62WrZaBuEQ9n7kQlqCnIjD/M/iyRD\nTD9EckS6+eCA1i1hszWYFvl7Dy+7ch2AkxOrWAYCw9mxZc8hyxKNIfQiSfUm\nlUYxEGjHl8k3Mfn6mHZwfixzekM88jY55r3Z8NgF1EiHJD0Pr4F+ptC8562m\nmGamGMcTqJrFXbEGTorB4K99Ck8Tew6zhRAAk/6ZN+swEFD0vjoGQ1S30TmZ\njioGaDgRQj1afxSSmXms2C0R5zleGplhc/wugdBWhuO0B40E9kHGzykRrdWl\nnggbnmou6BogYA6mCQ36N9f3fmaYeuRQV5fFk/3z32ekbtFMSLzBNnrd4jVP\nplXvADwX/ybJHHAR0W4U2mAe3wZcTWZjV4V/huU0LDnJwCyHqSS2Nr9re6Zk\ngofKqrQUpJSWf8Rd0C8u1tduq9i0qVeF2IHUDKKa8RzsC9rWvKvsNKCp63Wc\nQc2L\r\n=16O5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZFQOoB9ur9D+v5dtkrK0C84FKkMAm6HHbQUQ6UNutcAiEA90dU7deHVy+8s15mQZFK+XQfqy0z7y9+THOJDxiLTHU="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.123408_1639398853600_0.6654984769050061"},"_hasShrinkwrap":false},"2.0.1-BETA.130515":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.130515","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"e038e098e28e946370e945cf419fd770b92a642e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.130515","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-lU9y1jPlVG6c2FAPY0kyh8TV1TLm1bjxKSBhiR/akiyRnKandhrQEghX29Fpb8jjAYKKos5indTQG5wSTLkLJA==","shasum":"c950424c5a4c08a342959d3d56ae058837147e5e","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.130515.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht0UQCRA9TVsSAnZWagAASc0P/2F9nWarTzJaq3liy0hG\nG0px8IBxxW4GFMUpmkpeRTYYVqHQ3j7YCjOYaprTa4XE6X1RHNxAe0IeTqlB\nsJ+ghtg3MOy4TwOx/hoM05En7AUtVbvXinZpFUKtMZbZMJDSmkTFCzjmJaFf\nex/azo2Gy/RX6kxDG+7QW64kD1NAA7a8FVv5yQZ0gVNKlwF00auAFgXwafZI\nIIZa9RJhT/myx7DOOTgYzfmIWn2PlL7rvhza/Ggi7KxE4EOeqaDuepkOh3ZZ\nQLFL0uVNfzFh4TPrqTagNSmnLFAISSOVecCQR3Txcs+ZMdbazuigq0euzAos\nHyblOeFWp48MZV24Q6TjcpzPvVKE2xEAstLdqBBIX+UqKOsh/Ld3SPDAfVV8\nO4tFkpCopwAyBwdbNg0lhDjt+bDYkyyqcy5iRnW02vNt54pBCd9c5q5fv0rw\nadpO16RfTqYfhNZO78/Ry1yZmnfJDrTAc0NHisdyDSFP/ntdzedDK4D+BY1m\n9V0OLguVf0I7+89vS3+z87mDZHIpQFEYxiF6ezVo5r6y5dbSUJ5kLRGDFgBz\nxdsn+E+yZN0uoNBGnrPi9xIy0UlG4Rp5xtcypqhwIBvn6GA3XZJIojA2flDd\nUrYoY/6eL+ATD3hqgH8drGIZBL2Hooqcb8hpFsv+LLSwbAzuKDyBp7wulCuA\n4uom\r\n=V6qO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6mATtZephpPxbbmnZ5OLZ3KClw1cxiBsoj+WbBlv0jQIgBNgZQBNu0OYvfoT/K+m+9kpies+jYclIAXRi/PfYHqY="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.130515_1639400719988_0.3250531176237519"},"_hasShrinkwrap":false},"2.0.1-BETA.135609":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.135609","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"2abbd84d4dc809d79d84545fad28a68a16cfa2cb","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.135609","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7QAvFrrmSiQ5cLwjVwub3AgP8nVPDJPxn1jCe6DXT4ihKR+GYPp1/7xfixEWOpX72x3VkXk1em49FGtP9VGKzg==","shasum":"b47dd649a47b5c71ff931dd977827b2f3db012ca","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.135609.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht1D9CRA9TVsSAnZWagAAb1oP/1c1XAmE3or4+aEfGgn4\n1CXSRSX5fT+f28zRuAd5tbQK7Z46JNvRuXus8HtqdrlBdhWEvtMu//gjMBgB\ngOWmMDNl68jlMqDKBkC/RD7pjDxjf9i0d08334eyGpD5ltnnqSFru0jgocPv\n0e3BwGD/kf/L5xRNYdFI2+mfKEgT4h8LbhNWJIpowFjriFFdmkvfP1hVuO3D\nwtQn2qMgwkdcA9ujAOCpHtCao/0gkeViOVUZGQhOD5+5wVGO5LX8RqBES88G\nWSRenbYWelYTn4c+xaXwyPoeu2eQQjIx5gAPYGlmkTS9kRKcv0md4GqZiKcf\nXgB3cEUATT5iv4ihAZlvT9Q8LHNqfM621Yt0Mr9bq4IaGPETetZYEKB1W9g2\n8CLGX5L00XUE9Zm/D+NYAcAYN3cBlBEHHTs1x1QZftBSuoBdRIuC9ypYcvvP\nq/fWsJ1orxdTw0IidoD7MtYmF0wqfc7XDbT4RwSehpca0nQS0i7U2Wn9EtXc\ndJKbfor6ITNa3GiYk7lGuiOYzsWkgpZ1HyhkCZOzrkVsEwFLWo8PQpS8iP2L\nUZD8QOFcC/szOwAsdvlRmLJEcA0FLmIoh4fIz6doS/uIFEPhk1rHGLacUk49\n0JOCqI+wjjZQstqFlhFJo8xVPiPKpXU+BEwZ05KgI5beSvHN0KX0GrOHPz7e\nUZ6y\r\n=ME3B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2N035YaorboUSsdgAhw/YZBvSi+FBcNsJmsbqZxkmGwIhAJzPCWUTUohwCIgSvLPOk3vw8hylJEjNMu7oSuZCFDpU"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.135609_1639403773826_0.6997487783341543"},"_hasShrinkwrap":false},"2.0.1-BETA.161531":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.161531","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"961988702b406e3eb29efb0583d1828674d5a4ef","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.161531","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ITN3olw0vK0/Y1XZaUovqzfIQ53rKW5lqHC69crXkqYZlhV+qQPdrbxjXEPixg0p1XyVFky2KXO1zoJxOKPE7w==","shasum":"061241b078513d315c559b2ec048bb42c3509670","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.161531.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht3GoCRA9TVsSAnZWagAAHjIP/jtjtmnrIcqglF8oRDIP\n90Hae7FHQycb2Wb3J7qIxq5LW2IYsV++mlsDC0c0LTui/2Rn/KdS9qEuaG9N\nhHEA9BaafCyrGe235umSZZLnTYbCeYLtqhqSP1KoC6H1ZvDlX1xOw2lQS4t/\npy+bR7OXuPjLYMTwnz78dPgnuVatyz3aVnka0CQPZQ8IHNuIEbFtQ+24wGn2\nXIskShecZKFoQuPMB/0g5nLtrSh7kNM5gnoZjRKN3ZkrA7fCHIZMSWWlOa14\nqm16SGYBPu+bIqTbdBbgo9MCye7ROVcFCtFNz7ZDJnwB0qD9ukWauybaZL2N\nX/+CbH0GiMKALdfKH3vkrhtqySNQ0BRAU8Hjvrrr3BxmKMw622PlLxSXzyBq\n0JW9EjQA/uHzcF/0SA1SBJewGxHv1UZWCixX/9N3sMtFJlYYh+ATmwMrGNfU\nvp0p6O0m7JGPD5NAmZsjO3gq1GJCOVELLL/kXIOlXfuPDO6dkHNkMAb6Z/9a\nLph9BfeWvu0fgjR4Ph+wzX5dVXmnNLyG/6Khv5tzNZWvaxNHUisEUcWOFwIq\nz9xHA15VNcQr3PGGRbsuRZRrY27hcUX7AdMme3MPRdwziHkDltOsdFErjokp\nj6WggficQ35ytRJl+1wm74VEwx54clRUNAvMY9vFJFmLnuRqnNZLXaWbtmmz\nokFR\r\n=S2Xf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTW8ZPjrJiVG7TNU20ivwkur6/iRkeWBKwkCTMILZBIAiEA9TkBVJc4vTdfjh7VT5RxJRoVXTAKktoWuPxCny9t7IY="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.161531_1639412136106_0.7330485370547211"},"_hasShrinkwrap":false},"2.0.1-BETA.60859":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.60859","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"dc6c59511627696f4cd5eb6d25b0f86464848f37","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.60859","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-XzmhhW+pi3OqgORvi9/Wq+SDwiGpg0HAb1u+r3oU6/fwflR5OiGcSr2OJcXUhYldb3F7+hva6Hv4W08GjuOikQ==","shasum":"48ca4ec34f7d66d0126a877af1abb76b24d2ad19","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.60859.tgz","fileCount":11,"unpackedSize":18125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuDUACRA9TVsSAnZWagAA1uoQAIjlDr5X2PE26om1Wdm6\nCaB2U3o5XqF/Dc9WtqD4dJL/V57S5j+0Ybb2N+FxjpmTti3p7jZVWL5RvJ+J\nL9j2xhtPnHk70tqOBlEsKYjEhsMqNoewKIRGQlCieC0ycsoF87e676J/RfLa\nEPkNkXb3YkBQ74XFkW+6Hl28lniHD9yzD9hbn5jeRGvHQMv/5L7RDDvHtQei\nAmS35NRTBgEET8PM8L+NqQyCypjc/Y6LWV2fUMax5D7xl0ynbyInsvKM9/iF\nl7gBb3jhPqnwf+9IxBVZsLbwk0JaSiaN7TnI9W8zDdfB4vpioRNNJTG4D7dg\nOuuhozot1/vW/zKrRO+iSOjjJxow8ELkDRnFr3pvbiPT5QtHjvluRTMzWO7Z\nk7l4v7Nj59iU88ZuozV1JgmhStGcsv2SDw3PpJWICleFSKPL2U6DpktDAhyt\nFLuB8njhkN71GgxfOC0FtRjKdQqQe0ZSW0FiiUSVEbH/T75sr3dElyUWyniY\nhPT9/eYWNGZpYho243NHbM4dc2DfV2PwXrUcanVpnjqsMcariLJbhYD0C1Au\niQg3jvLAAe34QZdn9uTa+nvlcOoE6+MwcUnL9gAp4PK/5kN83CW2oJjrLWuD\nyqpaJNQkd/zmkzRtoHCY2TAljoSJhaRpsfDOdp7OZ9bqrPruxfEpb7gBVGd8\nZN50\r\n=PDce\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEU/ChaSLe5JjAebkGOHnrDnTCL1ZDnzmtBWeKRbv3WQIgKs5YX1D4Xyy1jpnhW59Pv1NKACziARcGbaqIKpIAH30="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.60859_1639462144217_0.8952911242354997"},"_hasShrinkwrap":false},"2.0.1-BETA.100111":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.100111","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"0ab6e5849d6a182e4e486b9a3a4b8ef3c9e90b58","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.100111","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-1vDKtWSDSufBb7AFR6XXiCkehtbVZAxRgovWpHS3wGrJ6osmiJHKeDujwslP4L0MKo4Sp15u0T6rxkpLH7AimQ==","shasum":"59f42f382375c5447aa930b3325a44344508aeca","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.100111.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvF/sCRA9TVsSAnZWagAAYQsP/38NQwEoWbs0lsXw9v47\nz7lCOfy94ZJmughtGaPBCrKIRYy++Yn9J2r9m20WeLo0ghVfG9q8NO/R/9v7\nshvdGfJ8de3/ifd3lxDq3kRSgydwxUuCLBYnHipdShfF94MchNzu+m7DARJp\n5ltIjknncMpFYT0wKFTjXSBugsqgcEclOHUTRsqRawyC5RxG57/k5ij6BUM8\nuEfD6fIBQ+DZ/PLuCtbuXLS/L4EVZevNz6Qj5M84XADfJDpG2qYkg/ELLJi+\nNQB7ttPIT+nWztwzVyjt3CTtL8ciOzQmq2NNCYYAgSJnmdlisKIYRxdfjGw2\nmVR86yBJ32Npb8Ar71WMPs2ZEJ5NuJ3Y7092SOuglEosdd6VyUCtwiytPIQ7\nMQ0jkTMwPACBTXu6q4wf2kF3l0FqyCKz9YkUzUuM1rUKKiwZ229Abj9lunVl\nh05SWhCn5D4eX7MCqJdNiBt6SsQvo1JPH9QFoN6ljAEQ5WyVyq1TXJHfz0sB\nC5yoh5mY8Mdr4AfKLAMiJl/wDC05UDa5+O1xY+G3amymqzDvFsCRIgnVysnY\n88vZb27H7B7E/Gj58YAxR8muM5byxv+U5oE7swvJ32IBhARWtJIqKBbjKE8k\nZC/3VNqgcO08e4wIf7qExOOqzG6KKXx+ZFoSq1pmBhcSdzwaDTZbA3Bq3Idi\nsEw7\r\n=lm+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcQVFS+hNak/jXQDgj6C7YLB5n/ZTKY1XV+I44Z2XUhAiB6pocLE6iSeGXICZ8Qy5x/9vnUqJOlwnALDx00FzbGFg=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.100111_1639735276356_0.3288573433107367"},"_hasShrinkwrap":false},"2.0.1-BETA.124214":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.0.1-BETA.124214","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"8ba22d34ea76058f6a78e8056d3bcb86a8c462aa","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.0.1-BETA.124214","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-BXVpF1mlyCbZJJCrzeNx99gs93c5rtK8lO7CKF4BbpWN7OG3H6BpwIth9/stZMA5Uw1srUHVJAGPjXABpLJaZw==","shasum":"d71a7a6eecb5c50283afd4f4ca602b2ad8aa3ff2","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.0.1-BETA.124214.tgz","fileCount":11,"unpackedSize":17452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvIWrCRA9TVsSAnZWagAA/t8P/RDFAgqkXt2bEZ9eqxVt\nutNMwFwXklpsKKrNpsKcpq62Q8IYck63Bw0WjssTu6Ay4HGMd+csXXWCFuJf\nkOwUcnVGIqlpr+lBuWS4uZCjIUM9S2rw4NtM9j513xaKWIFLbT2KmMXJfEr+\n8e9GP/OLqe7P+z5SUrSqTF5DRdx3Qp7ZIqGjGHOHPiEWja+SSIq6FdNVk3Zk\n7jnuVtkFY4DzOAQXpbFZFF8RpR4rTt9/5iAeXLfDaDk1QpcWa4voJj/Oyaiz\n9TYFm0FM/dHr+HEFv21dbsIPXs13kBaCMHW2Obvla4V7v6DFDOSXG5AOhEQ+\ng9ATc2CMF38FOe3UcscnDJ/QJhVt0Kqlann82fv2gOBDwheBYvo0JAIEmxmd\n9LlLFoXvpAj9sD8EKDff2kdyVoQwaUIAAz0ieW/yTqeom0/HUFv7fEB1/E5S\nd93E73yru1sWa6B+wIRQY8yFChAyU3M1pCuj0sT3fVuN6nsQdpOEc1MBMrgG\nryo/fQ8pX4xX3U2jB4inpHyIYpORTmRZtQFy3h5IWRbl/OG90PCtNo1giNtk\n8dGuEWgRiOW6FUBfKkLMwpGWWd/FzEEjInQvcuLgfoz9G89gWGjJKJY4PCKi\nlHqBd6ef7RRdRiZTjw83eRU6GqKdiuczih1QeYD7GHuJB7K1c1/IgKwn2BNr\nEQU2\r\n=lLlK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEE/DPH/p6AEq7H2K6ejzXffrD1QFZZ3EuUPK61SpRTwIhAP5AC1nM2rgiMoRpk/90MjfbdUHnwKfiRKWAiu3oMxaf"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.0.1-BETA.124214_1639744939730_0.948696083638054"},"_hasShrinkwrap":false},"2.1.0-BETA.20211221084215277":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.0-BETA.20211221084215277","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","chalk":"^4.1.2","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"bcd4cb4a442b3407071b3a638f45649452753921","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.0-BETA.20211221084215277","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OuGv3nAMFFX1Qo7tAXa4hjrXUlfTxez5udJghZJpR1ZHK5drTQs6VT+cqQSIp25cGHccNrCLbc3eO/ANvIme2Q==","shasum":"b1097bdfdc8e8fbaf775675c935efd22f1a707f2","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.0-BETA.20211221084215277.tgz","fileCount":11,"unpackedSize":18136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwZNoCRA9TVsSAnZWagAAROAP/0Tcf0LECwbd4kCSNqkD\nlRH/ZQHZnJg8oaWus/hyH8KcZpwwf4p/hmKxuhZs4PRTYvIU7sjKlP8sKQfD\nE1riJWVsn709Yw3s9xdDW7bxgYBhweCKwYvLEZW9O94h8iuvtTOkOcPFpW2O\nCo18iYKiy17M58kP75MkfCUdIUhf2VEiVKLd8TUXZDE8sGYfrjeV+aUzS0O7\noXN3w1fGbZ5tsdWCYqCpFgQ+STykJi/4zdWSTMbwH45pnGbjDGurrZ0epSoA\n6wEKEVjg25YHnNFfpilCEUOmoVNsdChBiDJz9co5+DNII/bc4vPP+PhDree0\n0hiXcuEGxxqhVSSrM4nOxuN2A2etr+CJ574De4451sudYotbewxhsYneQslv\n8xGImOos8zMUcKZxQVEaac4GBgxWARZhkKtnVtiYiI+tvuX2ykneHF9e0ZHw\njjcuAk3UpwdNX7O+RVkmt5UXmKFhsqFHL5NNIOcrrTxfmwX5xsCJXMBvysS4\n7R+AXPjBIhr1f7Ers6YwS+Y/jj9AeUCpfRDlLaxwj37ucAtu3uQtjetli01I\nwZLaryGolznOEKES9xnTrFBahAywlLoTycJvB5FRxmqb+dTE/qnpsNcImYzr\nwhFyeyyBbSZGSP7un1aMX8iqjC1d/VsizzlFNlsLG3W4RbN1htMgUBQsTpcN\nBCRU\r\n=ovHZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1zfgka8bcvYQ9lP48ZfPW9LsKWHlERS5t/1JLNk4d7AiEAluqmX9vX3OompfzhodoSPq7tAo7dRQwvcbNPTV8+n8k="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.0-BETA.20211221084215277_1640076136143_0.3863079315201614"},"_hasShrinkwrap":false},"2.1.0-BETA.20211222124715888":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.0-BETA.20211222124715888","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^12.0.1","yaml":"^2.0.0-9","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/compiler":"13.0.2","@angular/platform-server":"13.0.2","@angular/common":"13.0.2","@angular/core":"13.0.2","zone.js":"0.11.4","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"305ef69ba2696ea5a3b417150ae06141e25f2b20","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.0-BETA.20211222124715888","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-vYk/mShuj5m/4amOBMNkfVWasfclwkuIfYRK3RwnZ9HWF3NH5yN1newceiE8YxRQCNnmogk7v5rxh5h2H3Za2Q==","shasum":"4360ad5e91b62faaeed25a412c3714be9d6d2140","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.0-BETA.20211222124715888.tgz","fileCount":11,"unpackedSize":17463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwx5YCRA9TVsSAnZWagAAhG4P/0UpgnFz59Zkj1yQjJyK\nJqI7HLs0ZuEUm4At8ugDaf/wUUqpBk9N13jBIlt9TABNMYZicx9g4CsDAu6y\nTKNVXsbfc6IssF/lC13wdyhZRgNo8H9wpARP713cz95iU6BHaU70C0YAYEdp\n4iVA6DnQygPBoo0xCCV/r/5tZ8EvI0x1oNuXsP9ssRbIWdPunC4gVFKTVaO4\nVHsRgzF3X2+ZWu+9gQnlnbrw6YVMcXoQnZnAP276L2k47NqeIFkEBiADD4Ca\n12y6ESS98rhlPyWYtDjrQLkSL6WSOPi9Fvd5fIciUVRROHHFJOlXgeYRilWo\naBAfmem0NmWMGnxjlMhWDd45wzh7kVd1xn6/LOow3Ol/31vPGDwqXJGiTloG\nvRg5nStNYrXJAol3efWnZNnFUbFRwm+qJE5mEFUoKGsmgXGhQ/wAHFhVFMw4\nLnfsKe0FU/VocVgcRnDeJB1NDHNbn4X65Km8bvDaURYodHAK+DrLtgjbOmvT\nIH231gfxgvbEPfenYvBAaSnYZwqR34q0UsLTrYJgYmkjbwdLc43UyOzNEWy9\nx36OZoNFIhL3IGYrMAFlNkvPh6c7VhHRBrYez3Jjeyuy8rckMxWusEMnjnTq\nT3Wz7qTXxgzWle2x7H1z30wkQYZFqeF3Kdxvax7zPEKoSqMCVvfUFVh1D9m5\ntrBE\r\n=vYMV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAP3tHJY8BJxNL9jgiuNOIIJmx8Sdt0evKhEVc3DAnnPAiA8GukYqv9aFo0RHV/tSoRhrRXUW9Dupv2X+xSwJzHcEA=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.0-BETA.20211222124715888_1640177240136_0.7183864260147059"},"_hasShrinkwrap":false},"2.1.0":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.0","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"d0737a6cd66cf8af18f464b4dd683d590dd6b28c","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.0","_nodeVersion":"16.13.1","_npmVersion":"8.3.0","dist":{"integrity":"sha512-emcILeqJEBUEiQCrBwmHl0qoRWIOH+9nn7yA9GbmNvsQSVAxw8nRMZQ6SH2hinTXU9Y1cXIvAkHGE66Hl9TPEw==","shasum":"2c1483ed214a70cd37ab8a06960537e827209113","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.0.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0sIOCRA9TVsSAnZWagAA6CoP/RyYDX69mYwj5YQtskDv\n8XU37olySbf4BxYPlhU5Ggr8F7aj/dPNIkbxRhMdA5Bg/3YkPmZXVBRnd6WN\nz/CgHLevzOwZ9khMpWfXg6Iz97q4yB3W5AtQ7IRdyU47STQZeXc2bl+x1JPk\nHCnmAVZrD4l/mBzzCuyipFukngm9cYm8Y6w/snbA2zv1k/WIlrjocv+HN8Xm\nlxE7SPcfpXrjSgnVSiIXWpm+W5fLYEujp1zcL6JvUFpUoLmmDvCShbjnyxNN\n237486ABbRUIcXlCzv2HFieRO7ShtGUts9c3R7pQye0P4z9DhOOGlVBq53K7\nHD15ownTKlgxd9LYh2AVplnLmHL3lg3cPQwKfFTJK8WjwnOVVIw2OGMDQPAR\nrof+kJraf4rk6kZXbI5++MrG9u+/x5XZ7cJGfDYhjhiBSAZZLmGpSIuhi5pg\nQb3EEVLEWnx2v0oIgI6g2+JKzFN1LpsJVZj3mkhpirUb3lW3YbxbaxRyAnhj\noTYQnFHF3SI11kF1qfKv1Pww9+rFwSVip4730z62NMKIwevHB7vOP72z4oIh\ned+o5Xgo6b2XK1AUpwD3t6UgXFnBe5aoVM4nOhXHoqpUdXOrRpQUxi8bkUib\nRmtamUwSyEY6OurRG6HjMgNxlWmo8SC3U2aBSaNB1DWRcgDCMaU9x2PCB4Bn\niCZt\r\n=hSus\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNMnlOz3s7vIvq/6U410ywsZHzp77iF4JRWlc2kpJn4gIgSeLgKuqPjWgkkLtKqmUMh45f5A7V1AoFxPvR61SlOGU="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.0_1641202189945_0.6713287468727802"},"_hasShrinkwrap":false},"2.1.1":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.1","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"17e6bbb1f177178016bcf19c138c8d1fb01d15ae","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-DvufCQApUU1mO4EjT0YTAa+HaETnajeZzT5rKANOj0Ph6aBROLBPJqL7MJoFgY1hw7o5b52+Ya6NnHBhbCHwXg==","shasum":"c2b1da072b43dc9875e5a00957eccfcdeb60bfa5","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.1.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1/lWCRA9TVsSAnZWagAAZIkP+wUKU5VsIlLyj4zv8Pyy\nlEukSBw+xb+IbzYLDsa3ND+n9+lz4hMwS4mOTOGK2qkRkmYIXWxQDbCzLkve\nwC0IQ7rjW/pjH0x32SXpAgxYrSweKLqZ+BeVefgxlEb3ycmEBoaTZu0GXne8\ncsrQo+acaoTwpJzp3g7DSc7SE3QHazbCy3K+h7oXnsi862I+U8YPpol7FAd8\nFD5lL1vUc9GolevVzhD7Cg7xfTR25KAg54L96ZcgnhcWPzAkupSJyK5HPj4A\nxTlEYfYJHRc8M2fIVYy5/o32UkwSsAi1uIP4Vd3WOlCY+eIxC0z9LDkOrc8i\ny3910uxnlahu49bSkujSuqtSVi20TPdgLo1boMUPZ9MxlMd8RcwsfncMJD2N\n34YEEQdFzzxVdnjldbS/z8GYvIw9FLQxnSKS7lYC7kd8NgzEAiRTSq3Mptig\naNkPUPLN7t6a7dc2tttjt72q02QfmamvwUfSUYkNn6xo09WD3PhVmBQKOCbn\nVO5uLdNbKp2Sj9PZkrEVBBLRx/0ZVCDENKz2CMWJMQnSsCXsSlGDTFYaKJd5\n9lcd2ltrQ1iBdKm/oPUlQLPUJBCR4/MEAquU8LqoeL3r/4OAJr+qseZbH/FH\nEwhCwJp2XFXscznI34+aq50NMHxOvXfp9B5J7UZBtHIT6cqA5+ghMsKa+ja7\nsMQ2\r\n=Sn/t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC0bZYxodmmoQnvDwxm8f/J+hPBjUgiFROswfoIWhacQIgET6FbA2inxPLxwqO1+r5sku7LH7I9oavTxwpQWuPxPY="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.1_1641544021976_0.2817156268080474"},"_hasShrinkwrap":false},"2.1.2":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.2","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"bc11bf56c6f42785b37be42620fc4532b7e2f1f7","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-H7EWCyZ1hYD7iRBaIRg8ApQ5HgOEQ6DDbabFPtHLd0/FiBDpaew4IJFlGKsjLZlmCksDOeGwXX0fC0H9K+s3pQ==","shasum":"ffee7c32cca33e7a0387e799b17cd50c879d9867","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.2.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2FLsCRA9TVsSAnZWagAAee4P/jS3CBdrZNbwVn0JA55a\nHkgoYlY8Z7I+GxQmK6B6sbCcK72Lge14rU7/tr1W16YOqW+I6GcAQvCvKiCv\n0Ty/qWgKXmAQyl+/Y/jOVA/Bb8aAt1YXjn02DDejTLdSZCP5tvD2lRRbhf3f\n2Kau+BXGUQ9JtNXmd20SnWnJHTq/G1+Tak991PrH4lJJINJaw8a6Xe/eReKJ\njpaNUEw1b/pJm06h9/LY+aDxh5UrrwEynYr5EQ0Hgwv8GPCiJBoQbCA5DJvl\n+374ZsbDhf78xfLqyFTiMkP4iugbu1xobfnHJN3/mQOIP6ZdV09CZ1vvzteY\nRbny9dXypQG79q9MWNqpTah4CH1qSP+KDYwriCDztDc+IblDPMMeumTsA0uH\n6Tv1p8g1Z0zHOdsH8KULP25Qg45Nd87QKoAdMfgZ/vyfSGumD3Q7DcrXNlmC\nkKZ5RAxuKfPERRqFE5uFK76/X16b9spMEH0ebMHsh3zTclEUAe01SkHJfpEy\nnRr73ynT9HhxUWIqtqKekStQMUYlwCwOVoo9KwHUU8/muD8KI4y2mNqNz4Mq\nS6rJveilbeeasRv4pZIvFvZ2G/t4oN4w1sbkx10FiSJtwkZdMdagBSP5QXzo\n+81de5hEASQxAc6u3ktCVAHxPTYqfukG54FsEDD+I2Nv2HGZ40ihiq1kwKPj\ns1sL\r\n=ooGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH0uinSFYUl+qQwMvruKPULT8pmVv2xq6yjE1x0C+dBQIhAJ0xIUtvU9ocRy4tVOl3E4gzCcyV22110orKqExIr404"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.2_1641566956829_0.5369162483618632"},"_hasShrinkwrap":false},"2.1.3":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.3","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"f52f87ad437f9d0e60dcac525b05a2632ae0143d","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.3","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-2dUdPqdYEIlCcgVRqxahBdxDxVflvBvuOvDHJSiPTiLXbH8Pf2cmZBoh8HdNmPmSQX/3HjivE9QC3Xlt0J/CyA==","shasum":"f2ea02c4324a456c78e51da5099e06beaca0667a","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.3.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2TFMCRA9TVsSAnZWagAA/pUP/1Ng+bl9kt43vTdLXCqN\nlg9t8rOhyQmj62ujAhAZKDz2y5dNz+COhvQ+jah6a65+4BrT0aLQA5kfbsgK\ndPk6Xxssqx79CkQeSWP0T52kXIyKsVmrFyiCgnVFXrjKr1MD1X2HQATsXEn/\nEoq9pa72DpRBSYVz8tyV+ZRhzK+l8yNaFfCz5bcbxA+NNQAzmrOWGreZjUPg\nwbjqwyXm4XzGuLRzpvWAT+zINp85FF0C7l9a8WsFarv5hvgzlIApW6KqUUaq\nXX6PyLYuYu9KyoTzVrzqb8oM0B+V5azF0eAoM0qDhP96OJdBQOMJtWSC1D3L\ney3dkpjInR0+8tpKNITSVZyOgRn8aQMmsmFgIL8quPgf/5FZQF4M6sWLN4LY\nCUapEFBodhrMpCO3Fe2EGxR0UFTRq7OPvH3HLpocRqdnxb+DMIerjYqX5rA7\nxRJQkMIkUtWOJphfvCsiZ+Wi47HmOrQBJNCQU3aTE6Jf1GbQv7oLA1jzTxmQ\n3fAt9d0QW6KaBhkJoOvjpgzP4TPlVQYVh7cmX4bM4WDEFXGa/De/8V2lYnBB\nOqDKz9NnZoiPVhkA4/9hFbd4Tgf5GLP6lOc0iBwAcAtzZ54P1X1ACsPbWMW2\nyq2eGQ5PU/VSm71OP6eR/uwcL+NJfkaKT3eeafWQqbeTRWvh7eW3OFmdSsXX\nMEKo\r\n=0+FU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRStLzk4AuEFciC09vFTg5Xa9Adt3MWrNpAS/TDEOv2AIgbi7Y1y2IVzVfWv/LPq2dag7/kHmOl/xCgaGcIssXy7I="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.3_1641623884345_0.3210779075747485"},"_hasShrinkwrap":false},"2.1.4":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.4","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"dc0ae5d0db220a41c90808c69d968f8357e27ace","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.4","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-H0SREgkTbO0F/M/40FM/MtmHBmOaeBitHBjxrlPQurlM2v/T+h32xCetuoB2UhSzMwHgTCEw4NPpS8Vpjn2+1w==","shasum":"bc0f775f152a19acb44e058f52bb0dc35f4ea8a1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.4.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3aReCRA9TVsSAnZWagAAQzwP/1suTSDfPiMMwunSETjT\n/htT6WNrq/J8zhyxGKIU7owfCHi+okAPs4wXRofwPVR4Lj9vgMrSWAog8kyk\nIYg76JENG349K/THCiYloYK7S9pq51zrcrs8PjRaI92yNSj0BhFQFsyWCxVV\n4LF/pMYeypHwSJn86XDmbZZqtKn+hVgTWpqL/uonsmJ9RsdCAeNSTES1qcid\nsm01rj4BjwzTI9TLah30Ccn38g142vOb4bghJLVMKu28hLixNPf6A0aMRsZC\ngF+iJJK72YkT4hKp66FLSv0P+sSXUOlGg2wb1uLq/zr2kSdJMeRstiGpeVTl\n+GnLKyHWwnbAA4yX8EAA9ca05uyXwoY9dySG2+4XSQwLYJV04eJFmuHTrJbs\nRXGIH6U9SLF/rmZnesF6zsWWsHNTKThUK3gCaTwa2Hdf1tX59rEGm0/QsuT2\nS+AXcl+TuveOHZ9MWcZvIQyvLhQk3BVYW6jDkXJVz1cx91jOIUfD45WDk5tf\nCLL1gjiSzQHwaTaVO4ZC1J1FEJlqRu1FHPW2URrl02xEstcNWJZfi4gIoNdR\nhM9pI4MtDIqWlt9zVIftdAGgTqjhUXebMmSyof1dHBoUGzdSsncD5cyfgb6H\njh4xq0Dkl8IeIiCv4IgF07188pj6Ycg3yOoIFFm2ppg6pBTG9/8aaPWS43fa\n914G\r\n=VQT9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGH4Y6+/Tf+1NlxnsvMoYXGSbhG1psg/fKmcZrfj+usFAiEA2VvWvOPaOqmcFcnyCi6GF9s0gheUHV89p1pzc5BccTc="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.4_1641915486316_0.4041968458922742"},"_hasShrinkwrap":false},"2.1.5":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.5","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"18e949f5e7f10abb48f1a8942bdf228a82f8b976","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.5","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5vDJ95VoIED9I9RfMiJRrxlxJDiTEYFZ8WdbwMvh29nQX+37Rge/fFQBIVmY4kb144CpkgHev8/oIUPZMLXL4A==","shasum":"1096e433b2b7abc2f036452b563c8a77f9c001c3","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.5.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3duaCRA9TVsSAnZWagAAcY8P/iDgKPD5cApO2BamdM+e\nijW0QJ2yr5G/yBHB5tkBQsWsQ0UXYBMzEcmLEjWDx1ZZviO84V7IjsAH3nfx\n0bJGUZZgShEfoMAWT5WxEiDlkOBnY2PiO4aY6ZSWHvGD2j/wxe3ijLoitT5Z\nbYQSYLDeSlYn9sxQMF4cIZV1RwhwPXwbc0FZCVhS5ebNHn+ZZy1X6691xxby\nZUTQ6FGsNuZvBFZxvdDQuiFP9+d+RelpZPvjafmw9aQhmzAEp03myLLFPedH\nmKo+IzWLYt/GglkVYu9wD5T/SsVNbzAJk0+29IYbGjSwj2+cK9Dx0fZ5PLZh\n/JpD48Vi1DzLxortBLCRs8YtlYKNNwJB4gQ/XV70vcZHsNeYjdryQJOZHT2k\naCDrZwsiUIKD/ohe4RUC9lvrw3IG+BBxoS8ACAk/cksu2RbkqIZptg9ETcHT\nEEmJuJolXA1xS5q50iHs0TlAeyDzhCe+pDhB/FD+bKBiaPS25uCYxMLIxarR\nfo6qhtWAglyzTtTo1P3lPL/l7NYINC05vygGzUhMKylYwEOwLcB4NCQlLHcc\nymbCikL+yxMBte/9vTUEbY6NKPQJcN1iSy5h8xEP2DbxnZeggtf3QH16dnS5\nWBYLnYQfdVXgOme2aUysAErZKfvObqjSLVdrBl/v9K9HSN00+Amk+AUhAbTv\nByZe\r\n=jiEv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGcDmagpNt28vbJ84oKiaaYALF33TB+hRweDXSVaMERAiEAtqHBM8HEQSMRupcARanyRhq7B9fR20h3TifQ/REW0YI="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.5_1641929626611_0.6547493374842335"},"_hasShrinkwrap":false},"3.0.0-beta.0":{"name":"@scullyio/scully-plugin-flash-prevention","version":"3.0.0-beta.0","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","@sentry/node":"^6.12.0","asciidoctor":"^2.2.5","chalk":"^4.1.2","compression":"^1.7.4","cors":"^2.8.5","express":"4.17.1","ws":"^8.2.2","yaml":"^2.0.0-9","rxjs":"^7.3.0","@types/compression":"^1.7.2","@types/cors":"^2.8.12","@types/ws":"^7.4.7","@angular/compiler":"13.1.1","@angular/platform-server":"13.1.1","@angular/common":"13.1.1","@angular/core":"13.1.1","prismjs":"^1.25.0","puppeteer":"^12.0.1","os":"^0.1.2","zone.js":"0.11.4"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"06ca569c24a9ccd620fff1fc2ccb40de2e9d5dde","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@3.0.0-beta.0","_nodeVersion":"16.13.1","_npmVersion":"8.3.0","dist":{"integrity":"sha512-JvqUqY6gr9V0XxCbqoxWkFq3G4Pwg/BEzFEYXAJAxju3fMSIxE5ABdj4xONEad4zCqLYWaeN83FIV+7uzlqOwA==","shasum":"4aed815f6ee3ba00587ed31b462f3aed7dc255a0","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-3.0.0-beta.0.tgz","fileCount":11,"unpackedSize":17541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh39+ACRA9TVsSAnZWagAACNIP/R8vtpRhDCC+DMQwglD/\nQJ/SZim5dOezTijFlVc+mo6kMV8hCxk2vOT7x1al0foYXDBAGe1iRqrcAqVB\nEVKRzZJeN/6JgFV3t/CgPVvawj+SlzCOw5HJZKjUmD17XS8n4vLvcVXPw/wm\nsRB3FVtv5INPCnNbBJPgj5B6vcwyqaSF5AxaIfQS5PDafVQHDkO1S76tSfPY\nUCHZNXSVcifYqMu1FggfvEHMMCGIJKv/BfJa372y16i/MkMte4q5y4WCXAfW\nWgpESuY2kOJbw83qxSnrW6t9XoCeZIzynSFGl53W4W2i9niG/2u5NuuJ4IbN\n8psA9zFUAhRuL4RdXBHtH9S2n1gG0sGH7vH7vdNPpqkhnzM8W2F+YtqxF8sE\nnYxS20Xu//0SgLAXIYoyixEKmvlHYsFAz05Whp32UgP5GxAsTPHa8aGKsppz\nvdtdTaEwnJtn9oXZpjtNaTJWw6OgRIyrK+fNE1EjR6SUQW50MBjJenvwW6hW\n5r4rCSWV5MXazxzqg0/LFcMuOZkaK34Zk5kwZRJP8KGANU7eJawSW6KjDCyi\nu5CsHuTNv+/esrHQsSVTYJ1g/8yMLfLwOJMH5YO9Sdt0clR5M7HhpdUnHl5M\nl/9L+zV4F2MqeeX04XvKph77dr+0vFEreZ9f8b652T6hdRRZ7tpPKFHfMGpj\nYs2N\r\n=6/Un\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDdW/0T4xei+UdjOpJ6WAMGlj4qAvduneGIgrHYCuc0AiA0ozP4wC0syx3+DjNH8zYVsbI/XgVSAwXh1qMW2M30HQ=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_3.0.0-beta.0_1642061696276_0.4463023779929669"},"_hasShrinkwrap":false},"2.1.8":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.8","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"38cf11106be3424e5596af8b1cd89716a745199e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.8","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-NsEbfkzx7EWflCOlNR8MhqjbTjbt+rnh/WoO2ZYhA1MmMLiRdSl+lkCK0Rhc5hQtu52BiYQnvADgw4IpZ+C9GA==","shasum":"7ef4deb6bd612bdb35dd100c20c38f9138a7e146","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.8.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5nHoCRA9TVsSAnZWagAAmjEP/jtWOwFuOMqZJ9NqNMzK\n13A4ZSd47MS7Sja+t8QxgvfoLP0lHfirVXdHbE7mZ4NhcFhRSYn90DFcusuX\niA1R4svdqCx1W/KQf29iUWqjzDnllm96t+L6haueeWDpVpeqAEMQuCsVay4c\npMAMCTBUd7mkpLZ1zv7xkTjcJ3QjGSPe0s6aZ8yfMU+r0iEJypJ1/tgqRjCD\nahyf5NNpvARfYG8e4PjTeZZWziWHDryi0a0Ug5cXYut3El/2d2gGKaoJvr+4\nnTXIllNIN0wy64AZ4ZKUWuRtpxmVnxyA4rNz8dgxfIi/VvAt21bNBCoGqwDF\nAAfeJ2oBxNm9/vYXWaq0v9aDDo1+5EUxzo7Ju49ZlrCCeh0dRuD3zZP9rPD9\nlFp+CdusWtJY86QSUVjUCx6+K9bOmdpxdUIe8582voW5uT/gKP4TXL2y3xf7\nqW4PODqYEApnGqLyOIsW0IsEn+l4mKPTG1A2WFkxoo/pJyvctmfKPAZDKjZ0\nSDozwkKZQt9Tka6C37P1e6RS/rZjksfaWytENTylXU/co+p0P4+vxmIl7nx5\nuLSiLHSnU6t3iEpjIEcmKVu3XL2VEzG7g6yxvUqMbVAInDg5wy1yUgdxDtxi\n+4yJ02sBH86fpsgUdMnrZFCHGobfmQGjguUL72ica6zkQu8dKlw7CXCi1wKW\nCTjb\r\n=CQjs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWocat4SKazCSxtTJFM5Z2E7YX8Bd+uLBEvZpS2mFLRAiEAlrMUnHTe8HF1lUkvGXujLap0Vjyz9L3piBVfsoimN5o="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.8_1642492392753_0.34951804702867895"},"_hasShrinkwrap":false},"2.1.9":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.9","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"2b222f3278b7b6f4efd11d1b79361960769e6e6b","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.9","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-51AdP1fQPrn8+93goClvSDG4Mn5T3DAN23NJa1yuhZhHGBpl85QHFQPGZIzdQqPL2UOWfAKC1TIEaGMJhIw5tQ==","shasum":"4923f5125d2bd1b68eadd987cb667c5b1eb7352c","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.9.tgz","fileCount":11,"unpackedSize":18114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6EfaCRA9TVsSAnZWagAAT7kQAJq89eyoozrUQNhgLR3G\n6b029S7GDKap6JdxHA8ZL1+xk44iWiD5D8TC5RiCxgtg7ZK0OCH7RXn73Zh3\n8oKOU2epyahXwfZxG3Ebmjh+1R7upybYS8Qn/u6+dT8d2tSUA2HOjCu33l3Y\n5LFYbfDGRYV6Uvokb6EUTV1TM46RP2AEqWoIICZg6q7bBV9auoyWCjaEuAJV\nK/11xuHqZmWCwy9NEMVz24wl3/t/8vtaJ1Ryg5DVr74vr4FhZ1tA8Is5pwqw\nd0IdvT+kefbXd9RVPgQ7bfifhkkrmzY5kmjQ/j4crQaPzsu1TGZAt4zPRDZ+\nezsblmmJEKVCl2/Q5nypzTEX90BcHcmzXy1tA+723VLqwRzwN3P1VmYP8ZdF\ni0syXRa8o/K25TGOX9zq5ZL6es28K/yK2HJShwCKrdU97NXA3a0QDkEb+vwH\nX0Tl+8Di7+cMkGFcKzzwf0SX1rTDfiv4+Dt6+eWyGePv+spZcvaGbAqaOCjg\ndOkhW0letGxRiILRuwCVN93UnBDcFWB3bRUfOeoKkpaSf1x2YTyQrS8hX8H1\n+ufGTvpRbeAYVJDF0JlnnEVol2KJULdup+eoHzALk4dWHyK0geZXO4nLBEb8\noizNFxU9VF/eJxfVaxz71yQi9PPVAhYW5P+lacpHbRDSzyvHtOtGwagABr1q\ntc4R\r\n=ZK1r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYCVyw6g17CnJxQ6Rm1gM6trh7SL8PJjh67usc3XE7+QIgLWqvFQh8z+xVQDu5V8vZ6AD9YWgQmBqdNa/J3gtzGgc="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.9_1642612697884_0.5341373127650946"},"_hasShrinkwrap":false},"2.1.10":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.10","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"713dcc81aa250cfd5ed2b93af97395d452919028","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.10","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-mZDgn9OZEDJehteUkyxFJKfG6MKDpm3f3UtdengWyymxFOf2j0v/2UJH6i1Xk8162L+wVwn8HHKo5K8MUQv4wQ==","shasum":"a4656ba0cd56787b302cba2d955a093812d617df","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.10.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9+9gCRA9TVsSAnZWagAAukMP/RfKzwqVk30/QqK/lre/\n6Cdr7aZiBAPirRisJupqVdxVKH5ccQ6B4vYafgSEKakwnS+LrJtNT/XjNOEO\nCUwChlu9lneaVzQsgO2mZz6n0e1LPeiZfdCopBATXxI0lsdiDLoZJF1Jhfqe\nS4V16FruyrgiUhtAgOecB4zmw7qFoFnwfZndN8pklfrnUr1rYcvNi3Svi3eb\naRp1+eOiyzxg36dJstE4O4rhwRYZvI/JTnw0uXbPL/5wYSaSOSNdOONHb0BV\nYElQwB9mM4Bgx/wRL9BiEurXBOhriVyp1IiGytbSq3rwYz2XbOn2Ko2PgujX\nWcfkvEFtqbROaKeK1ryYOtAIoJgSKZNeSMnlcmU/rCwhQww1TqXIibdjawA4\nuo12HV8E+gB4FCV992NHdKdb7EUDzpP1RNrtqZCJ6v/VV/C39WzNj83Gxz0G\nUSyvxi1rvhSsATUIOKohMqounYT4ZiXJY4S2fok6vjvgAIGFa5f0tYuVWf71\nhNXiAsnNFxZ++YNhP3W08/kUX1JnvP4ikMoJcyO43Rh4amax+euIA42nlYRs\nEog2VOkh2V14xPccCrCWyFCH96X7MokFHmqK0Z3mjmlf0lL1/Hd7KVpCSawF\nENCCAe3o3BOxwgmKxD62acgDe221t3zIH/SX+4ZOsVq4Qa91g8QcKv8IPvg6\nVoH+\r\n=0+oX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH18YzayfzBwoTPoaAIIOd7bv0OYgsGIs0X77p+1bV1RAiEA6RrPozAyIOtMqERy9OMhtvmW1tDWdEgvtQrm4H9oLFo="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.10_1643638623948_0.7371468548970446"},"_hasShrinkwrap":false},"2.1.11":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.11","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"d6e6378043fce7b4d3f1a7ff06e38fbf2fe88b8f","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.11","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-S6Dxbhh9frTSg/5nmUsfXQKKJL0DRaeGJ2d5VKdrIxhR9oam4KBRxohP0V0DDPg0my1dOaQ54J+TiBXmmeD9hw==","shasum":"93bd5febe3b219812ffb3279f680489da391872a","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.11.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+6B9CRA9TVsSAnZWagAAdFoQAJaWPAdgsytvUuHWdTqO\nN3Xg4CDp+eBEN0cLIoy+fte7cFm9gXc8z9jTTdyMRfhutwGKV8w9UnZdTwNr\ny2jy2y+XV/vBXBeUz1+O17XE0dIoQ5wQ7T15PhxNkn5x0L6fJV2APERktSzK\n9uzgiC4xhkdpIk4Y0FRkhapqrV9sqTV8lZBwyolAXb+8H4THDHQg3eXrzLkr\n3GWOCYak1uyNVGUemFt4cV45BoVN3CGnsf84xu36EniWDmhnslm+6XSmL0wh\nHZbt1+f5ZS3+PPD9nVnabw2yNd3b8Z1la/MGiH3NV9+ba5R9BCeptRimQpYd\nHA5krA1b7xl0PDoNpAwQCVoqzefOORD1QrQrMqCrWb5wimirNlIRBN50pcy3\nYj68IrzZw6N+QuRR8Xfp7jrstyzPhozyQfQ0m32+9krEhpgDi2z9Rf9tSH3i\nbEHeDQ9WvN6B2biPs3fXtOiSJ83JbLZ6goaJH/az0L9HGw7KH7steWxF8EaM\nRtX/OoQBzvJDmBPBf6psTiJwr+ZHHgSPtICmIJA+MgTDvZLmrfit7HqDBA1K\nTMRhW5qWsHQ5oYQ1nwNZ3OAuEEot0Vgi4frylOXZVNmQ+GtKYN2UKyeIwfVL\nohRdyfgnJyLoYP4PI6dyeQE5IEW7GKWOvPCO8mzip3ENg6Jx0IUR4JLtu8j5\njP8d\r\n=n4rl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyoiL3r78m3MgPfylc28G3eEHKwcVIUTRxIzoLveNScwIgRnRRND9bwlY6YGs72DkEScw5xQ9u9GmUlbFnT2sd8S0="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.11_1643880573842_0.38472612933879957"},"_hasShrinkwrap":false},"2.1.12":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.12","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"a3a2d06a8a120150e1cc5cd96c61abff3740fa94","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.12","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-tiYW+JkVId5md8dGEAtKYrR3oU6si6FppKXqjNqVFOvUEIB3QcCXLX1TRvLdtA3sK0bDAOUsuwM1ZAj26eOdog==","shasum":"468e8b115e1626119f4f7feae255275ed2de65e1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.12.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA4OXCRA9TVsSAnZWagAARDkP/i20PiofUYUth+f1RL2P\n2f78Wa6adRRG0ldL1uevQSqsfoAk06umlcmSb2ukRdtYKGg08JC3XdZY0IzC\nuoERNtG0NWYZUrLxoj4m3e+u5zDK0HLXYJMiDQ9W7Oy70ugvOfegcgHmD30W\ntEM1HbbicZ9kJp9+mtO+gQhuZzvVjLhLz5oynfX/SniMPbQlxQWwaH8+jdZz\nPlPdi9m8hbxunek6ToVpw8IwlFMfhYyDCQbv7IXqBTPBYg7JkdF/b79gbMPM\nY0Er617faPieJm70tYi/gLibKvf72R43tM2VcupxPUqfZatPlVytbDEQcHsS\nBaBtmHSWKkAjzENoWTBuTSXUIkouH8JFElKJ1Vytc2ONWxyJ3P4rf35+JvnJ\noSB0kdwk3vOtd00WUoTdoZPOmqRLmIw8KOz9hP9BClKtX6mG8F2N+QQHTXUi\nIhDn3i/0iDAAS66Ya2nHDFDivcvt8jp2xgGWXzQwrFdHJbwtv0bXqt20XI/a\nQQs5X9WRqjpHVzjIVniB4xKc8vmNP1BUW6c92prca98uwwl2EXqRnP0YEG9/\niE9mpQghStOTPPQStVT1v1ykH8Fpc2A7YfW0EZXYP/xtlUqlaUUNKNVRHLs0\n7WU+y9lHg1LkZ7ehcjrw3rQXp2fNBnrC6bVviGLX46rQWzuzalQfcHnj7bkI\nbuTE\r\n=Lg3H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCw/nzp2ejxcOxKqIv78J+/jm0Iot8r4jY8rIHgZSwHHgIgXteiIhZ86K1TBTzUuCSKNNxYV2zabZwgoCyoVmiXx9E="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.12_1644397463365_0.2759434569511099"},"_hasShrinkwrap":false},"2.1.13":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.13","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"855a418057bc21a0af2a6e38cf38ebba46300417","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.13","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-M1yembaRdkE1PjoT2iS0T3L9z0IK/akmkK34J4ZIJ3AKOU/2uo+/ptp1+/F6PLJWgB1Hq1ttYyDIaSoeG6y06w==","shasum":"e55ca184ac05d28c773f9d43315b6332445c0126","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.13.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL1LCRA9TVsSAnZWagAAc6AP/ReL0YwuQgM98uw/PSkq\nUfTvY8hUuvM9xDPZmEGxIxwCUCg7WrJb2EzaSqrH6Cr595tip97qzSOOcHxr\ngPzVzS0jalB12KMxBxK+4Bd4pd/HcnaZYQiK5Xk/jhFn/s42tBQ3MN7vzGak\nNXz7wmbiTpgW/Ar1Ly/6M8kxmCOBAlqD7v+03TYKaEX0X8HWdrtFvs2kCqEj\nop7lEPqui9v2TtWL/tlPOjFs5JkAU8ZTAkIUL9kvX7KCdlpKXRdqQnsiGQOP\ntsij9BkhfDXYxZNbpT3ACWomegh4TJgfwFAyYgLoysLHPLQbmWcM30pc+VM5\n+n4l4OsVEmrNUzhH6AVV2LaqlKmBAb4mmoG84UlWn10/oLs2gfKqi2GNMUfa\ngIF7I2GRzOEn8DCMM8hz0dF++Qx4lLfyinTQfv4DKBiYXfOe2xzwQ/L/B4p1\nc5eU5NStj/OSAE15+l2O2yqB4iBGPKl6EsP94/ZoKb4VOXbHzEA0KVoBv6UP\nHCG1eSHy9LBc8eMYyApPGe1NBMGSsgJXZG0CdUO3L5qKTT8/EtUWSAKLKsEK\nnFGV6O7G2mC/O30ODbpJlCO1kocXAZp1B9WniW7W2lngqyGDo3+BDEshy+Eq\n3JKDtSGNCU5o94TUV9dzrVjEzWe0SSCcCB9b+eYP6pGKceHF4V8VveRFXAzj\nfhZJ\r\n=oCxN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCccq3PQy6nSoe/pIhnkG7RM+/vgLAzGgpgwrRvtFNt/wIgMJ6rlfU8yNb4YXHMtq0DX5kH0HMFVBaRym/AjTEY2aM="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.13_1645002059607_0.937737972402422"},"_hasShrinkwrap":false},"2.1.14":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.14","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"9aaabf12a248d121b6fdf1acab21ff380c89a2db","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.14","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-K5yngkwA5GNXmERwpFinbrtvILELewZ/1H4INMihu93YrSaYqVw4C1N2u1aHrT6qXbRLxxxJ9ozQKAnhtcGTlQ==","shasum":"b0755aa2245df875118405058d2bd0a224e57cb1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.14.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2wIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLjg/9HwR5CddWvpYZXMTkTDg394ndPIrEpOz8buq7nOYRjCejXa5a\r\ne+lYDtzEAdbt+GoDkFE1aGhlCfO51raWTTMnsnidT6jZDYw4bpDho6hRUyaY\r\nWS6DabdAXI0Co0r5Jp+UagV/DG10qflB8j0UUBOmkmAcWPDtxvJuzLhZuOWh\r\nm7Y9SZ71I2prH3V/fs+4wYig1BWdK6gKAok1hxfDxDBqt1czfWQ9vyoRIzpJ\r\nTAW6G4KTNcQSjmlbWGBK9bxZRQ7+AiXjIj230ZZxYuoVd8EPzJ9E1RvkClOj\r\ngmZ9burigKEBualSm12JqVt4bY1l5i85bhvIdBySIkW2AaWNp5CjSxypqN9G\r\nvMwJZC4rAAy88yj6XSS5e2hepGSvFTHR9ujS2Fos8YmLdpMhRU+1foklmRdY\r\nSrtrYYuKlLd2DKRjmBwDdNV8OrafVXFvafMwJclsFOWdwvh1TdQc407/jqpC\r\n5cTVSmNegfpDkuMHDe4ajX/Z2ThS2C+L1dit9FN00Ub++zuu5dDGX1mNM81w\r\nE/wUt/7ChzwgqkmNB0pLHfeK1ZJNefDF6TntI+79JeNyVq2aR28DuD0znYGz\r\nIAuMfJru3YQk0+UAm1LU5mHYi1VgVagV8NX6O1LRNpexsrBL9QDzrx82KJwX\r\n0LIGbckQa5S/wWgkB3BF1Tonch32BOpNcNc=\r\n=2TA6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCPO0Kdha0xOQPunolrUd/AiCwSoGdEi97ucewzq1LQAIgWyqmcutpvTEkXMgW7o5u02JdmpSg1H5nYAR3he0Rnzo="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.14_1645177864723_0.004966414660336982"},"_hasShrinkwrap":false},"2.1.16":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.16","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.25.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"7132a1ec4a834b4d5735fb78f67d45487445a62f","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.16","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-5E+Z7Xk/1zalMBOpAz+KN7gONbXVoUlEYrxoltoloFWDfFlPTZ33/TDGGV5+UXNJ1IKdyuW22UKBaLaYhgM82Q==","shasum":"ce47e6bdeb96c02c6c04ad3cc868869b17340740","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.16.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF24fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3GBAAksjYAKv7Pikm1wrQKXmIZcn+yE6m+FHkq4ARj2LLUO7wquMX\r\ne0TAq0DVp2xCd4a1WHRKUA3XWo4KF271+VFYXLYeqAPZoeA2Bil1ax101AaK\r\nlwMYTSzr8/HCybB/mJpev9c7+aSPRjlEENBa7PWh9GKpdbWPUQultDpjyZCu\r\nGy6fSpl9d26ZzXe7/r+sukOtdbhiFaxf8MGLDaiml+KXxGlFHJ2DGeApLa+d\r\nUdaRnoa4YPneDAMcPnmPdfSjx68Rco8eZxU8DTPyiPD3WShAgVUW45Z1udzz\r\npDBqpVTrIDoeKCKptkIe713ejdtopPsG7LYlw/aP54x5gmjN18YCtOzlPZiv\r\nDxG/pft7jmdC0YstxBeEi8rnOkx8irEzSAfBu2pL44/1AzhhN2reRZzcYq4N\r\nwFtwS666NHpuFiPOAKwAjqGQsOvbB3J0Jx+HVbhoDTON2f0TMi9TKdrI+0HN\r\nbvW3kJ3cM2dAm5Vd4L1jkyfkfC+uKQgFgmoEaABevvjF0xHYpRIMyM0TVnLc\r\ndTPYSNlyBBg32eJaHRWyJIT+StLWj2/FxTixLQ+kns46ZKotLbQ5meOLj+Pj\r\n5uk/tDiQc6UErqp5aBnBJZnkWTjrYlkk3dJpnTnW4rOIbSiz+dShs/LH8lGX\r\nMdXKzrCTRrZZiYlNIdjFUiH7ziRqSyQMvtw=\r\n=LJ2o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKYAYSZ+CDSwftlfPTu+5CMuvr75LTjCQFl0hI68M/1wIgCcj3x9RHvtQQxwTIHRjlSwLNH916xdmXPY0+TqsIaUA="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.16_1645702687806_0.27682254403367823"},"_hasShrinkwrap":false},"2.1.18":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.18","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^10.2.0","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.3.0","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.1","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.2.2"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"68869ce87e32a23cbb6ba93547d72f2cc43d6621","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.18","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-68Mv9lbkiAve/i41+SRQgDJrVrYRgvrh3RciiRP4M6Tf8ZixLTY85gKpVlst7XKzJmI4wJAI6vrV8L6I8zkOYg==","shasum":"4d126fe2deba52fe52d792c773ea0b2afc9de605","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.18.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGkhtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcbw/9HTneEupqBn+d/MhCS/5W81cb11lcwWMn4Q/fKjjQqHr3ckPp\r\ndNuqCYcLtDCPrJ2nuL62xBGPGU1Lc2oOCWUSA544ysp2ZQmDoKQ+oZTjc3lr\r\n4aWKTX1KFDNO6jdJSAzwX9g1fzO6C4a7PwmaHMOXFRX/Xk+55wTgLShTamqd\r\nMBeM3C8nyacXhEHhpEjKze9NB2SbmFCXGsKJkkR0YittYb7l2KiZI7YdakPa\r\nEXCYtdoWgfbSqBzF48ePo7ob7ZCz7MWY7ab6KMVr1Gv/LrY8me6Qck9jYGZZ\r\nFeKvpeLQmqyRWSgZyC5oK43JeZHjSoSV6LskUP4miIsctGzWWUx/B++6hV9S\r\nc8IeXX6pgA1LJqjdfRHjWRO0S0D4qMTq7IN+rVE8YSsCKibTbWan2WfCtR9U\r\nCp/Mf8xLAv2zXzC+Qb24SrXj3wfOdomhXJnbhG4bvU9bpHKjQFX0A9p+lCTl\r\nUTMKhWMgCgT+5PHByoo13NF9MFshvidRLXjmRpNJMh/w9FxDVIiijhBtf6S6\r\npdLumyaW22YFLVDQKU3SqCIAq0+iQhaLnmZW3wqWBdegrxt3px2z69e2GKl8\r\nHf7RTnv3KIbfYo/dt4ce3R9y1x3xIujdx4O9SnqSRodrw3dwyL1/d5mW2jFa\r\nDKOxFGF34ElRp6bGDqMWakkVQjDcrlauhkA=\r\n=0ahk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9I5wRA7Fiq37AANBpr97WOJo2WEwMJOrUQnDSdbz9sAiEAnKtJrbnoaGgF5MSGFOgcq2lR6HWew6VKp0Wi+JYL014="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.18_1645889645261_0.6532936786987118"},"_hasShrinkwrap":false},"2.1.19":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.19","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"b41ab9e7fe7223e17a52c205e2ddd91d47708d8e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.19","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-UFTfjWADHBp1xw30ewRWB38GUQcemukrsZ3TQXply6Ov2zEKVL3nON+ChxAWCdvGLzfCEZtxCpZG0sceykmI5Q==","shasum":"32ecb202719b966cf456d17e092dacb917382be9","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.19.tgz","fileCount":11,"unpackedSize":18115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjIWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjCA/7Bv1UUA95nRKGcGu7mV+R+qepgC8fGokXhrxXZJTTqngjwl2U\r\nHmZJiyGsq4ybShbdWLSiyp6eEEhGlZuqMHCbsQ3N6hhsYL+WmdhmYjKwQvi9\r\nBSZXHewPwSZJSItKZnMK5XvP68jINfkcBiQwCO1Hn5Z3FjG4j1RJ0MbbKMAd\r\nJuRvCyZLb00DcG2qFi6el/pfldYX4wTowFmLLvu1qUC9PoWJ+yiD+rlScKAA\r\nG6jIpC7+JR3kv3ezlkUQI3XLEiUVL/EkKVyJOCH/MKTlF5GA+BvWD8uiDmum\r\njqvt3NEDZQL/b3aPFFiw5ejK8Wi9JtNyAMyzBrTDslQBxQJlP3hdLp1pp9P6\r\n2kyLdO1INREhBLocKk0w1a9asiAZnjnO9FU+kyugIkXI+vuv33DNxKtu73o3\r\nFwZHPOAliIZEZe4F9+0DfcgGU4YnPnNZLGWNUh2RfHgNDrRD2/3UYSgODGmc\r\nBgeHq33XuacesTzNfYuKVwRptsXK2xFR1Pk9Gds8we9ylHc3MSJvAJgX0sZT\r\n1nL1yPL3xJMFQvA9Iog4hliVV0gAcDl6KZ9Z7dgzAPvVPxuuGeP9afgpxXiA\r\ngAmJPZlRS3Az1RmLe+/ZsG/qn1SXGaeKLwO6+Ly+tFDKcIfY3O8Zdq38tYW1\r\n38S9Vp5SjCWC3WlrtzS9g9ti/Jh4TdByMnw=\r\n=AmcM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4o2gi+BIUUKB1IgO5xs8+CJcrgKiHX4ob74fxDD+98AiB/ZjEHpIdhvMRU8jNEdENOOWg9w+JaKpwnneU7WCW6DA=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.19_1646146070221_0.3447162820480334"},"_hasShrinkwrap":false},"2.1.20":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.20","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"f2c50b479c5995913c3045b3982ab0c0df4a32cb","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.20","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-H58HsZrmwR468ifwoijmEsR/C08YdQL5v+0/HqENWgQVu5OvCqwvHJKNwuxNTtJhGXoTqPExezes/S3xBJWvUQ==","shasum":"8aee1c18af8609c9cc18abfdd836a63ec53a155f","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.20.tgz","fileCount":11,"unpackedSize":18143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjycACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ2RAAn0pFKk0519b9os6iG0w8bDoHSXkBjCejTOLYkKlBGjPBgqBs\r\nmkRm6aiYXOKoHGMJqvPmFol+oOywtsvkOpxbz3RawPAtlDDkRyTnBiAWMM0g\r\nQZadzBaUefzgaDDrUcdg2+GgCjCnkNlUKa96hPbSkPfST4+GfRC4iYWt5Dni\r\nEhjPLL8FFXMKb5E/w9vFjr6U6yJc5PJNj5GC+r2UJph0YzCHOCxOqjWoQp4j\r\nwrdBUm7bTd5b/yrKWDgNXIEd9m8gOVnL08mJIAulHGbOqyeY6NYetSnzWhfA\r\nXUOCI6vSBW4neFuOktFXiUHGM+qec16vjNkZOPgOP1d00OzInIjYqipkOB2b\r\nWshtWoZbgrxyoj3gMzM5kAgd7Cg5ietPWks8v4dvxmS5oCYx6SVPYf+bQ3Xi\r\n44YCIEKKWk25wxCldCM+jZvCE6KfsviQYlkM4yfgqNrUhDeWijWvlQv5HCfl\r\nIMaJi9nnuVa99nSCOUfmsGm9G+zdMoJG5YggJoGi1eCnWcvm5RsxQN7uxavr\r\nISxjIpfnVgup2G1PeOSXsq2BSg47gX8WTA/ccIWz0YBYY/URq80Gmd3UStNt\r\nf+0xqG+cwJ1/ySZ5Lh2WEy0TayH786+BWAph7w9zP1BsC3gtM+p1zFCe4ylc\r\nwMxzOoGHpXhrEtHXzhh2zr7IbzVJsm1vD5A=\r\n=nDyD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD43FzOfK6FTE96PKaKt0ApzMawU6EwlB6C4jfkB82t9wIhAPiN8FPzp6Ou5mHYzBA83YAIpdpC3DHFAlgTrnaezJFg"}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.20_1646148764269_0.69636436069266"},"_hasShrinkwrap":false},"2.1.21":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.21","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"a8e6548bba183a8cf182fd937b67d3acfb1f1d96","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.21","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-FMqSS32rDTozWguckrsf9CKUlbK0nHVnZ7nIFeeLZP5FmHW4RtQOTIB29F2KPD/kCiuCOkWUhe9M8pK5kfHnAw==","shasum":"b156c0ed8c87193e714965168bd7d9bc3ec3c379","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.21.tgz","fileCount":11,"unpackedSize":18143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHykQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4/w/+IDwGo9ZKdGlTKjo1U/ErZUu1QpubJuge8CsD46vC+RFB0Rl0\r\n8vUNLsXbFtHg/a+rcfvneMmjPoqHv3pmhiXspLojxxpXiBbQ37jegDSvttxg\r\n18eoXVOqT2Uj8zwRMZvO6GBHh9QJQAI414I6PmLa/bFue3c6IDSTydI+AtIQ\r\nmOl6zAHFHbKrFo21qL0lBZrVPmZRIh2xBiGwuRk2T0Su5TeNaa5JmrUQdfXh\r\nmEIHldHMk086AogSNvBVFTBLavpIZ2pil8glSmdZ8f8ijYIE9GkarhrjyPUb\r\nPcrUkKpWPS11LMAI0AiE5nY5yO4+sv6h91h4t3x+DF4DiV2P3/M4qN5g9Tzk\r\neyMNy2CmNNlQUKqfGpX9jU3K7iy2T/U7ozLLsfEI1+fvj3RsBMkSinZXJeob\r\nmQ6zlGPzS0TK8jyyKsScDSq/FteOSMjlhI8hcRJCheV4wRsnCO1Wq5sQCuld\r\nZxUzUfmFuKqVDu6sOcHRKHZChlEbIL2z6o6QQbQ2Hpo8fQplU8ezgqVF94nZ\r\nBr8runVdI/YxkOJF/qwtAjybSk6ZwKjFodlkP67/Hv4sqgGTuU++t4h700i5\r\naF9xrnASC1o95ZDTTYWUv6C6rF/9JVKa2g8QiJEzbjkU07NHfZVVx6DcJ2fa\r\nPSb9+1tABfjzBgFb5DTszGrRXaoZbc6thBU=\r\n=unEY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYoVn0Uvd6h+mG361rX96tGC58CRpQuji3kllRoRzVDAiBv+jjNJ2ugXBI21M5eIXtAXoVEijLxrlt94+m4G17S2w=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.21_1646209296140_0.7794963448481094"},"_hasShrinkwrap":false},"2.1.24":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.24","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"6e891cf01ef14b8d5118ad0ebb962eeb06412ea2","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.24","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-SPdGxQmATb0/J+KF+SLwZWT7PmZGxfkiPm+HvD441MYceLgYzJZOfTiQwsTb9k0IkvkXi/ini7dC7XI1R+bynA==","shasum":"4c85d57ca094bb17665fdfac0d3e7762eb5f97a6","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.24.tgz","fileCount":11,"unpackedSize":18168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKw58ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqgBAAi719aZKv9jcR6VdhMvERXlJfsRPHyK2fvUNASILM5Vq/8Wiv\r\nHaBwdtesn9Pt3uxugmhExnzjXH11IdrVUm0bNqxJUJLnBEdY/gAPXUvBJEF9\r\n3cxo29REcK3QiZXmsBlLcT8sS5h7y4dTKbc6U95/b44h0dQriaEOZ/Bpxwbz\r\n/hbfxKaBmCZRQb4QBCfFebfxQbED2W+MACF1LmNSg7gwQ/GGa8kJnMcFdZIU\r\nz2LBES5DVBkR23vTHEOYBRAfZjTYqxXLiLq6MgrMOasE6xZla27kiq5rEqQL\r\n9GGzph08AgjYT/YVdu0DK0xDdns2nQTRMMp4phEZvYmjGL9OvFLdG0aaT6Ya\r\n5q1NGBEc0/EwqZfV/27V/S4x8lY9yJnv/WhPvBObLp3GKJ8AoMXMcyX+Rlfk\r\n1vPS3BHKM1MlICj8prGqs22IsCuOdO6Zsm4x5bM/0r9pFFMvE+EwqQG9wFhN\r\nFFJi0DVT1RkLiU7Do9YeN5aFH2Zh1xQktWeRNufh0Wxnlw3HbOryOCKo7oag\r\n5wCRiik7bFkroH8n95nuCGivMz86uAFkidP+umeDayqHwZ716GJxscdUwr9C\r\nd8iA/I+ToNGO8/9pt4OwurqT54JIblmeyouIkFWckE1mliRQxGpJ90WUkicw\r\nz/TOJ+0I2pGXxcNdS2thEtbgTE/tk0pLmAo=\r\n=2RgP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTjTRXoRF8Qpb3I8EiQy7yWOpheHQqD0Lax2Hh/+1z+AiEAvuZi07/sXaQcSn5oSMsnpGxo+08K62X6fTZctwCcxto="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.24_1646988924657_0.6792535084664366"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"@scullyio/scully-plugin-flash-prevention","version":"3.0.0-beta.1","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^1.13.0"},"peerDependencies":{"@scullyio/scully":"*","@sentry/node":"^6.18.0","asciidoctor":"^2.2.6","chalk":"^4.1.2","compression":"^1.7.4","cors":"^2.8.5","express":"4.17.2","prismjs":"^1.27.0","rxjs":"^7.3.0","ws":"^8.2.2","yaml":"^2.0.0-9","@angular/compiler":"13.2.2","@angular/platform-server":"13.2.2","@angular/common":"13.2.2","@angular/core":"13.2.2","puppeteer":"^12.0.1","os":"^0.1.2","zone.js":"0.11.4"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"type":"module","keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\"> // The entire content of your app here </app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\"> // The entire content of your app here </app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n  - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({ appRootSelector: 'scully-app' });\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({ appLoadedClass: 'fploaded' });\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({ mockAttributesBlacklist: ['foo'] });\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({ appRootAttributesBlacklist: ['foo'] });\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","gitHead":"2e986f86bc83e3d6a4e4d82e9c89826c26e16127","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@3.0.0-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.5.3","dist":{"integrity":"sha512-MD2Env0YhhdhV/Bu7HmF3V/SB7nOanM9G00zebF1O7x0W+3ncVBktEC079KjqbFFNueRD55KhXBqHGfJDM/xPw==","shasum":"aab9fec4a403676066f81efb190a6f4c5a8ed92f","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-3.0.0-beta.1.tgz","fileCount":11,"unpackedSize":17441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKyRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMzA//bH9W4bsZZbIqmdBDt3Ul5BZ0Itx/F2NnpyV0FQXzXZjqCLok\r\nWjZbsPmDZKtPhmUB2tnAdMzozbcya4uNTqj6AdOOczM/uutobL8QYKA+Aa+G\r\njzBl7LFIU9/i9quLr1L2Fd29DLtI+1wtMiWOv9tLxniBaUFUtxTKtRFbD8kO\r\nZwFaDgQeOyQSP7gWpGgog89jJ3hMX29Ty9i94hQYu3qGo1k5LLrCNsyq+X/3\r\ntmL8VLtrI809X2LrHN9vYcGLsyTUNS1Azu/6sdJV6O1UunrA/Ax8s4jzhpBu\r\n3ANe+nU2CEq1hpYcQuevsFe2aTs+/qYOoERoQH6UHka+1Qc2AVHUqb1x5fFV\r\n1Jm3kBTrk42Ibmn8CUnhkI9FjzDMeogODOCWRHxrtgo+8vf1VIOUUW/vRe3h\r\nbe/7optV9X9vryOx8eX1x3RIUAGWqQfZNoFMXDtB3juy1XdBp5FjUViP3pYn\r\n53rGM9ZIO2zm+u/rLPpU34fJ9EpV/51bii2ECT5DtOzS+Aeo8xkaLQvMPqDv\r\nk71x9r397q1Ea9gTsW2AC56CRdNkjwVlVecnp/q09RDZLN2Obz71IqFuYo4/\r\nZQOPwHcns5tYL2z3GHED1Y5UNR0burnR/vGR6zHykiIBXxPfnpyTtxqESywv\r\n1NA9uUpcLSlw7gAyjoBqNNBf7MIOOeZecxY=\r\n=Vvyb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIaPqwVTr3vfQwaFQRyoPxeLjO9n5Tlw3Nw87O+Ehi6AiEA8ermsvp9Uejg6ziqC7mPgtpNIHvAFFvOXwF8DJjaXbs="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_3.0.0-beta.1_1646994531387_0.8696661220879731"},"_hasShrinkwrap":false},"2.1.25":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.25","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"f6a2485368ed212d3cde9f133329084d01dde89a","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.25","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-o3OdwrYZL++ANh+DaI+WnYtNSoZryIACGeVVfkoN9vHoqq0hpePT6+2MvOyVjv/FZf9n5Wp8z/r65P5kEG0vCQ==","shasum":"624ec0b3f530935ee3d9afb3db9d0762bd4c1db1","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.25.tgz","fileCount":11,"unpackedSize":18168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLHztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4fA//UUWn+Q11lf2iYVWBYIJb6vInkYo1kPW+u+yQrqQaQGaIXSLy\r\nXZ/9f3pyNZlsAB+rbWy0h0l/8dfZZOOAARK+2DUUW+dx6CiToJLirN2sdl/W\r\nwW0c9MFvFtWEnJj2+fHHkhDwU8gtg05myEfQJwYTpxqaPIUDISdXaP9tdzVq\r\n+qUvcZ2BGdiImfXbX+XgBlPV2aDstbL4BbjS//93+mYIPhwU8j3NlBERqM1U\r\n8iEfBKhC4g74FutYkfRIB+bHWUYAK0wBt+7rUxk1STdRxoP1FTQXU5h8eu2m\r\nhwxHfevtoRGUBUSpq3UgbK4+2bOXGXsbb72DPquOwRrfMc0ov/b/BvxlJsZo\r\nudJr6Ia1CYjMTq521vKkf0k/M3XnQZC5tvOBDkZ4L9eWiBVrO3t0f3cRAQvG\r\nwknPk0ESZN/VUKHgaiQt1rDMVVF0rwuZimWXCiCAv8w8ttg5MYbfTUy3WEHc\r\nYlXXmFUsilxdygt8+jAWIgd72/4B1KzQ4Sa06oyX7ZTlbPiFwBPqc7iTfQ57\r\nS1lQ7L2anHlEAORN8O2rFxlZABgXEPgKMrjWiAhHKZNKnvGcJyVuxpoIQVTC\r\nyWQr+tJSA4TvIaOKRVDy0XgcMqJx8AYaZCRt6a8AIJjBCOo7RQyOwuylgJfm\r\niOxi3pTMVRx1y5jN8SlD/MjE85m34wLJbmE=\r\n=5/wV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDifafNkDVhjChESDr4l1bvnB9GOyaEvhOlXM5QfTGC0AiAO2IYA78Vxs6eIiy0JzWZYuRLo2UGLxWRObi9hDhqNDw=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.25_1647082733021_0.7894158864801735"},"_hasShrinkwrap":false},"2.1.26":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.26","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"9d1843d4ee92d9259a269b1b09ddc984ac5cd6cd","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.26","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-JvShZwxEDfrfWNTOGqiXCsT7jo7uy/00fhrJDNNctqrolZTdsn5YIJILiV2Nxi13DJINNFsY/U+qcpUaIG5/jQ==","shasum":"bb473c24125efb4a0e598f1d872e9c423402fa98","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.26.tgz","fileCount":11,"unpackedSize":18168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMO5lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjxQ//b/D7socaZlPQR9sUwRvY6YTfpsTuqL+HU01FpIQlI6CIq9V+\r\neWu2+I1VJSyG3XZBzhcdibq248/LaLZkx3TJ/p71GH69BTgaVHopb0oCti4D\r\nDQtdH1snDymjeL8cEk56in2aN2xXETt2kbNVXGWJuoCjPH7Rl77D7MEg5RK7\r\nnCTjtUH5mzu/lyejH8MzubpRUJSobwxP2suKQGP1Cs4D8bVbPAcaFaiDys7v\r\nXH6uaNDu85x0GlLrQIir5vtaEioRylfRZIXiYFjOgmfqkjaDrQ+kOSlqyTf2\r\nzJ3HWunjivhEY49m7xR/UJgpx1640xIoFIkM931AEsgXSHbf3r3eCjcfNR0I\r\nogmRRFsUd5J8TUYXZ6dbfLvVv4dxcjerBMUEf8uRiyv8OT5NSIRqDbSsAwEK\r\nXjO8iVC20arnNMh+Zwz21q6sKaeSB0SGoLx7+DBsCyCQUmj+PQxvF8+nQo0D\r\n5gboZ3nS8tapDkBjwfigXE8opcYbkyCNDZRu0xpQMby4g/S8OhZEa+amVoHu\r\nY8uhYdSby3/jVFI/FYnaQpdFF/WnXh5vnDsvM1yR5VJmqMDj4/pk84XDJ7at\r\ndGsB/jnaxhCQU912CS9zEQBFGsUTEJz4U0ivsQaRSVUt2/AgiIrlIXhao2nY\r\nD/4CYWJUS1jzv+Oa0h76yg3KRD7EQRGRGd4=\r\n=Nw0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClvCug0GYffZgzibqrFechlZhCCiW5NSc59pr+9y8h3gIgM0ay48eehq3N8jg5dFtngfZdi9aOBEn1sPCLVyfzA2A="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.26_1647373925321_0.4130384216728844"},"_hasShrinkwrap":false},"2.1.28":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.28","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"02885f60161fa23d787f0ee4d126284f34cebe04","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.28","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-ASAcmlI/Bu4uGXK6NMzKHi+wLvZdDYGY4xWioDBdS6Ne4jf3mNLGloF/EH9gSTwuGSpybRGJDQg5YBYuXHCRyw==","shasum":"ce6b4c0893ce8a36e648c31b116ddb72ac69b5fe","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.28.tgz","fileCount":11,"unpackedSize":18168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPZACACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofhA/+IFV4UKgEJkItI4PESzWqOU/OFoLo9wwGQ/wbxHiX433/aSqt\r\n31GEZCiJnhujIDiNXEZ7X10N8ErxDJtWu4hwJrVaot3FzEjNzGNhMsha7Mca\r\nIdUy9sXSpNdwVJ2TiUJ8Ua7llFKacjWYMSmCXrqb7NJfCqTyyhcaHMzE6g3D\r\nwpjHARmKYYX5irR8Bd5PCmAX9olTEasLg7D4TBo28qdH6hHX25N579hzbKC4\r\nVQZAQcOqGJFhDkdg4UxmvIJIQeHPQdFLE9Q67k5vhjYbdocKeirC6YlBQjw1\r\nKQrAGHEL59KHBZ+iBu+BwiDDCUmkYOD1f4jNP5Ks8Wx/8uSrYX4Yc7SWPkd4\r\nIdEpnLtCk6+A+A5yJCadTeuyTxPJXMhKUTOOAYZgOc72kilVKIkBH5sBSwUt\r\n8/yvqwb2RUx3Jd5PGScS3eWzOtAyCM9tkmdXw/7+Cqp1emlsmDTwMhsyaKip\r\nMVFaLKfyg11P4pOCaBUQxug7feiXFOnyaj0z8ai8fXfqpPgMCQnIX8mGUeCy\r\n8fPydAkeLv3XkQq+F8S+EshzpOkmhhCNesVGRsZM+62/PMWxvUqyfmxhLNzl\r\nacSbERfrEWnaZG0+zBfuVKSSQecXSXeazr7+xK9qhTFDv7Od4nYUG4Zpd1Uf\r\nUTk67F6TE4YJLD+hMF43EeNvc9QzZ5nJZFM=\r\n=K7KU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9Hj0o7wivo1D6dKdI80u887webF1/AOpSbcMoOr9bYAiAGBZyXBWSihGzSPq8SjsajEDz4YHj1qrGxZD4zN436ow=="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.28_1648201730250_0.7779021236725912"},"_hasShrinkwrap":false},"2.1.29":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.29","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"^12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"04d36b9689420d916a82feb9cff630e5bd60d760","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.29","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-HWomGlv7FO4Cmth9Yqk7ETpd83AFJc3z7ahxtympFGv+EZWbRr/fs4dkUi153anQta8Yurf4wReasDGak9MDug==","shasum":"c5d0766aa5240557d1a403d192e0bdfe8aca7ec2","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.29.tgz","fileCount":11,"unpackedSize":18168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQZXCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP4A//YY+jal7dcIXWBZKJDwFRxaLoXa0UUKumhpvx3AcRlM0Vnt+T\r\nCPk0tLBcNT5FZKZXRgS/1WRBufTybc40XI+AsNvuPNEP4yB6xOKHPGV86jfV\r\nQE+P2MjAPUf2Lge4QXnrZzIlVbXpISBhDllDWygl7PdkR2UsGu7J8fLIkFEL\r\nea+bQA2fE7qu2o2NDUtf62lh0TeHXIrI1bgb7IfBScEdAzZmwtEdXDifC0dB\r\nZVHNhsPXrjYwCsmJ6+yw2aefZHRGF6zA7n96/PME09Uc6uXiFVwpR+iFqDFp\r\nbm9/T6vNmqzdGxeTgBW/hnVhHh79gvUEuLLhTgssq2zf3OT4YnKfZQSuXVox\r\nCxl720YgnOb3j7s4FtvQHhgFygYFPGO6xeMiHONcxgSDalhiyoB83tTJS1Wc\r\n9yBUr5fnqAdbc8XOSats7eVE9uBCKvIaufOT19zD9avK9gkJIMjLyH5xTzfm\r\nyORNSkpv96/HLTL7fBHy57gEgQhexs+nAz6L6aFs0d8qSZ8FvQbn+/Z8Nf8g\r\nVTgsbpcdtvGNvG+myqHen6Q12RGHXFPygrpvZQMoIvEb1P+pZw9mZUljJLbh\r\nfX4njKhZ0Tn4XS9RmwsB3eQR5V81gfhZrvK07y7VLGuKTkbaMkRx0WBJ2RN3\r\nojx92hB6Vqfn08N5SctswgTdRZ8sYwaCwz0=\r\n=Q/0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTw/iJs60iO7Whj991SidKjRQPnMjxPn0aq2yqX/Y/EQIgGJtMRztlLdyvCX0PAX4uZOmW82G3f68NXJl+M2ZZITQ="}]},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.29_1648465346299_0.2843490676273972"},"_hasShrinkwrap":false},"2.1.32":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.32","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"bff21b422e0b4653a4021106b9dbd947f42436ab","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.32","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-FNgZYFPm0X4KWbJDTG44IsalWnmraxWgG7/GCyeu3H5DVui81uDPQm7pldvasVE4/h3iebmw4rUznJqQ82k44Q==","shasum":"067adf39c763879add332aa2206d48fd44c41106","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.32.tgz","fileCount":11,"unpackedSize":18167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ3fyeIErDtj01kK60hQrYQrV2D8ukWSn42ORCh/II/AIhAONKvvKoqyFmn9M4wP0GGjKkn9a846SoQb2KUi4xf04o"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX6tjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqc/BAAou2cpWo645UNtwXaTJWoqSok/KscKnX4QbjP4jgNP5B1Z4hZ\r\njPkcwk+qozRybx18MvtG0BNG6j4MfCBLLE7R8pDrVi84k+e09lHoBuv4O0mt\r\nKtQ/Ysby0kvYr8FwWnP2eeBMo7UqAGdnatf0XrrAGdLNouXVr1B38PBQ/Q2J\r\nytqMbVZrNXxYxzjdZgCPhqk5BeP9N3KhSoYkVwTPI83NNZQnn/rp7IH5hiuH\r\nMxw7Ew5JK/5b+JrGdpBsJIqE+4yVP52s5oFjdverPLx5pEQ8EtjwiRMkRe7A\r\noXOHCaIIm75RU1VYO96hkeBcx5gdlvH8Z3JZ/K0U8KlTEACtZndrA0E0Vmw8\r\nqVp+0ZSq/RO4aHcnjCThAzWIfv7K9G2n7h9fxrAkRZcaszNnKsx44Pz/AXE6\r\nTcwQ//DK4JVvfk3IKJRzLy5lNP6NBkabSgbgEbCjibYyOa+XgfkbNktPdiC7\r\nKRLbv3PjdBhKK+v92Vykzf2MHPOktUpvarqYuSnAMehZ95595rDEdW/Bq9TI\r\nfajlx1KrFcg47U3b2c24jd8YHhhRzFsfCSznzbb3xH2v3k96pj3lee80UOSi\r\ntgwJUS3dBz90ofFChAOVPG1WyRuR9bKgQkr4PmzQzQSgSXFXH6whlQOUxGDu\r\nvtaID5ILgK8U4Kp3Fy+5zRDvnvPNgwslz94=\r\n=7RrS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.32_1650436962872_0.7537001988368375"},"_hasShrinkwrap":false},"2.1.36":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.36","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"df2dd8c7d7ab27638972ea1b45ac69fe8a30741e","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.36","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ER1Uu4aoQXjvhyPHyrFbvIBzDuS+VCLDyk4a7BpB32POTrtTxearTvVk+9uo9ubhFb3UWLK3jtpQIQqIuKVCSw==","shasum":"d211847ccb7214b8b7a8c44e80afc80d8c365f3b","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.36.tgz","fileCount":11,"unpackedSize":18167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRVIeO906bQywWBahRlx0fCadS/+UofVydOSBebjSl9gIgZeayqHHltOVC490zgpB18ZBCAoXQVUN5KkKptNSBVeM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip0N5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ3g/9GNwuxQIeG3N/4xILu1spA5mG6EmMd+1LMc6ickzd5muHCKPb\r\nrrsmNVY+QtsydbDJ0ztrwAtCgabcSVfztlWdQ4qsi1UOPK4ElPsbCSMAuoGb\r\neZkS2iBPzHXo4w72KftIMojxFZ8QrLqs30wTe+CKsF0gVzNZIRyWnUCHPIFj\r\nF3+MGa1irHV7jkMv+4CA5pCoswJoy6Ztp6dwCW4pbtQPNqY+RxyivBTG94eN\r\nVKEKnhfJZm1njja4P+Ag/OONdEAQK8xk9WnVSrtDnb/Y4yolIE8SvHMxt/vq\r\nu+yUkczX1F3IIt095J+89cQ5rufa9Ed8qwH6aCO4W2dw69z8rLjhEjmS1fDu\r\nKCDMgTUpG0UyNpuoCYuzUs60nxx+qohiuop0YSINqrf/iDfkP4pfkx7Jwq1M\r\nTKOq5ynK6BvIRz3m6/eNNlfEKAlk17VINN2VouIxhW1EWXE4UK2EqxUgGPGD\r\nT+97cvbRXxLA/gv731/4JE3K6tiVMiWn3vPSpXizP/U0fmQoXGPDmk603KyA\r\nqU3d2h7RFrW0eHrstcOhkX5SdUBybPizujm3+1pbDLw77Z/NN+cmpdrtdoWV\r\npV5hokuLU+pkWoKFQOXMA+NCtfq1gj8qPqICIUc6f4ZmY61oTRtJaXA3jfvo\r\nPy5QQpoJ3Bcw7BgcvQCz4HR+Opnsnu6xH/I=\r\n=h8Oq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.36_1655128953575_0.36558982035345067"},"_hasShrinkwrap":false},"2.1.41":{"name":"@scullyio/scully-plugin-flash-prevention","version":"2.1.41","main":"./index.js","contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"dependencies":{"tslib":"^2.3.1","asciidoctor":"^2.2.5","prismjs":"^1.27.0","puppeteer":"^13.4.1","@sentry/node":"^6.12.0","os":"^0.1.2","chokidar":"^3.5.3","rxjs":"^7.5.4","chalk":"^4.1.2","@angular/platform-server":"12.2.6","@angular/common":"12.2.6","@angular/core":"12.2.6","zone.js":"0.11.4","js-yaml":"^4.1.0","selfsigned":"^2.0.0","express":"4.17.3","compression":"^1.7.4","cors":"^2.8.5","ws":"^8.5.0"},"peerDependencies":{"@scullyio/scully":"*"},"repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"keywords":["angular","scully","seo","scully-plugin","plugin"],"typings":"./index.d.ts","gitHead":"602414f5760afac723ba1bcd1e57fc21040249d3","description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","bugs":{"url":"https://github.com/scullyio/scully/issues"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","_id":"@scullyio/scully-plugin-flash-prevention@2.1.41","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-EO4VmVUYMaQIFHofdGvq1+Nnd7d2pvgvvzmDwu69+R0po30GVDea4uwkYsG7B1qgU23zlPwWyj2ZXlrxHKfSPA==","shasum":"845aae9f8dd1fd2661033968c17be1b622298f27","tarball":"https://registry.npmjs.org/@scullyio/scully-plugin-flash-prevention/-/scully-plugin-flash-prevention-2.1.41.tgz","fileCount":11,"unpackedSize":18167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjI1Pjyp1lm32RzGdFQl4KlL7i4VcYnQephQKFN1+PNwIhANW3P3U4C/k4uS8jQgOTz5z3AFpShp70gkf/UgK0JhbG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKxDDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKehAAo+j7WfLihhzyH0CgLTnFYxqEf7GXI1IXQLuuEqVzOu79XTps\r\nhLeG12GVLp40eys4izd0rYKR3q5rZNw3TeryuR54NJqqymfEftweXnzVtXOe\r\nKvJsue1VT6QmvKDthx1kV6iI5Lvm2cp6CHEBJiehYCp7rQ6cOVG+7rTYgLIf\r\n20F26n5IfdmSviQe2SEzH8FZcqBdDMSdrIM781A76FqOqpUDCaV39UlEwMzi\r\nWdFtl31UjJYG4bD+4fP0CEdaddJhqZByl1cJnWiHAnFgd76gpKOdU2jSfUS9\r\nhrGqec7Xa8lw7+yDE7TvIkzYaiTAhPdbU/EftDl5eOMVOR3W0kBKJLqjl2bY\r\nEAXNyD44WyrKyRP9xGaKdbLB4M/xHvzDm4sla3Em7VpZvjJK1RJBydeHZELp\r\nfXZAunKjQ9vJHGMYns7aG8Da8VOzRj2Sg1a4ioQUkEFVHxuj/4ljX2RNPaaM\r\nS2WNBufb0wOd6kqyAT2z/wj73h3hWvAGkYuYRRhiH/2+LlaAlKyfPewx3O2N\r\n7agFO8EIN/G2oIYeq4jNKwfZ1S+7cjB8HD49JhJL+Y/otUD2DPLI9k7YHOPZ\r\n/8qjG94Z6Nd4gUG1hP3P8LTr6KohqftZgY04AFXDuw9TbdA7Se7v+7In79f4\r\nWAw4PWbeQzhWijbwoz6dr2JYyVy+9XIU5Y8=\r\n=+aPB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sanderelias","email":"sanderelias@gmail.com"},"directories":{},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scully-plugin-flash-prevention_2.1.41_1663766723353_0.05902266498535513"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-17T12:38:05.999Z","1.0.0-beta.0":"2020-07-17T12:38:06.446Z","modified":"2022-09-21T13:25:23.707Z","1.0.0":"2020-09-22T15:26:38.239Z","1.0.0-BETA.143109":"2021-02-04T14:31:14.291Z","1.0.0-BETA.150646":"2021-02-04T15:06:55.772Z","1.0.0-BETA.120021":"2021-02-13T12:00:25.630Z","1.0.0-BETA.93934":"2021-02-16T09:39:44.813Z","1.1.0":"2021-02-22T14:33:52.277Z","1.1.0-BETA.82744":"2021-03-03T07:27:45.134Z","1.1.1":"2021-03-31T12:26:21.898Z","1.1.1-BETA.123900":"2021-03-31T12:39:07.375Z","1.1.1-BETA.110800":"2021-04-05T11:08:10.402Z","1.1.1-BETA.110813":"2021-04-05T11:08:19.245Z","1.1.1-BETA.142926":"2021-04-07T14:29:32.091Z","1.1.1-BETA.152513":"2021-04-19T15:25:19.158Z","1.1.1-BETA.81821":"2021-04-21T08:18:29.321Z","1.1.1-BETA.83250":"2021-04-21T08:32:58.044Z","1.1.1-BETA.85130":"2021-04-21T08:51:35.921Z","1.1.1-BETA.94615":"2021-04-22T09:46:20.621Z","1.1.1-BETA.113446":"2021-05-14T11:34:51.672Z","1.1.1-BETA.120838":"2021-05-14T12:08:44.643Z","1.1.1-BETA.125539":"2021-05-14T12:55:45.148Z","1.1.1-BETA.55746":"2021-05-17T05:57:51.217Z","1.1.1-BETA.61716":"2021-05-17T06:17:21.575Z","1.1.1-BETA.61837":"2021-05-17T06:18:41.629Z","1.1.1-BETA.62854":"2021-05-17T06:28:58.614Z","1.1.1-BETA.162204":"2021-05-27T16:22:10.057Z","1.1.1-BETA.163207":"2021-05-27T16:32:11.928Z","1.1.1-BETA.60027":"2021-05-28T06:00:32.810Z","1.1.1-BETA.63028":"2021-05-28T06:30:33.006Z","1.1.1-BETA.63419":"2021-05-28T06:34:25.559Z","1.1.1-BETA.65336":"2021-05-28T06:53:41.666Z","1.1.1-BETA.70346":"2021-05-28T07:03:51.405Z","1.1.1-BETA.65756":"2021-05-29T06:58:01.985Z","1.1.1-BETA.71002":"2021-05-29T07:10:07.745Z","1.1.1-BETA.73135":"2021-05-29T07:31:40.498Z","1.1.1-BETA.70116":"2021-05-31T07:01:22.341Z","1.1.1-BETA.72956":"2021-05-31T07:30:02.549Z","1.1.1-BETA.74556":"2021-05-31T07:46:01.348Z","1.1.1-BETA.74622":"2021-05-31T07:46:28.418Z","1.1.1-BETA.80334":"2021-05-31T08:03:40.614Z","1.1.1-BETA.81321":"2021-05-31T08:13:26.908Z","1.1.1-BETA.81429":"2021-05-31T08:14:34.710Z","1.1.1-BETA.83815":"2021-05-31T08:38:21.045Z","1.1.1-BETA.85725":"2021-05-31T08:57:31.957Z","1.1.1-BETA.92551":"2021-05-31T09:25:56.177Z","1.1.1-BETA.92614":"2021-05-31T09:26:19.370Z","1.1.1-BETA.94934":"2021-05-31T09:49:39.686Z","1.1.1-BETA.100209":"2021-05-31T10:02:14.620Z","1.1.1-BETA.102348":"2021-05-31T10:23:54.115Z","1.1.1-BETA.140239":"2021-05-31T14:02:46.929Z","1.1.1-BETA.44311":"2021-08-10T04:43:16.927Z","1.1.1-BETA.62759":"2021-08-10T06:28:04.838Z","1.1.1-BETA.105415":"2021-09-20T10:54:21.538Z","1.1.1-BETA.110102":"2021-09-20T11:01:08.830Z","1.1.1-BETA.113744":"2021-09-20T11:37:49.156Z","1.1.1-BETA.121023":"2021-09-20T12:10:28.246Z","1.1.1-BETA.124628":"2021-09-20T12:46:34.164Z","1.1.1-BETA.160336":"2021-09-20T16:03:43.376Z","2.0.0":"2021-09-23T12:55:45.860Z","2.0.0-BETA.131530":"2021-09-23T13:15:37.012Z","2.0.0-BETA.131855":"2021-09-23T13:19:02.182Z","2.0.0-BETA.60231":"2021-09-24T06:02:36.810Z","2.0.0-BETA.63716":"2021-09-24T06:37:22.785Z","2.0.0-BETA.70300":"2021-09-24T07:03:06.200Z","2.0.0-BETA.71202":"2021-09-24T07:12:08.426Z","2.0.0-BETA.72556":"2021-09-24T07:26:02.038Z","2.0.0-BETA.91342":"2021-09-24T09:13:47.831Z","2.0.0-BETA.165902":"2021-10-04T16:59:08.959Z","2.0.0-BETA.80110":"2021-10-05T08:01:16.052Z","2.0.0-BETA.84430":"2021-10-05T08:44:36.575Z","2.0.0-BETA.152213":"2021-10-05T15:22:19.178Z","2.0.0-BETA.72406":"2021-10-06T07:24:15.311Z","2.0.0-BETA.175711":"2021-10-06T17:57:17.655Z","2.0.0-BETA.62933":"2021-10-14T06:29:38.791Z","2.0.0-BETA.91017":"2021-10-14T09:10:21.972Z","2.0.0-BETA.54936":"2021-10-20T05:49:43.102Z","2.0.0-BETA.144641":"2021-11-01T14:46:46.647Z","2.0.0-BETA.73219":"2021-11-04T07:32:28.471Z","2.0.0-BETA.155850":"2021-11-04T15:58:54.954Z","2.0.0-BETA.145526":"2021-11-06T14:55:43.654Z","2.0.0-BETA.101943":"2021-11-07T10:19:48.405Z","2.0.0-BETA.141026":"2021-11-11T14:10:31.529Z","2.0.0-BETA.143029":"2021-11-11T14:30:33.026Z","2.0.0-BETA.145311":"2021-11-11T14:53:15.817Z","2.0.0-BETA.150212":"2021-11-11T15:02:16.572Z","2.0.0-BETA.33130":"2021-11-12T03:31:33.810Z","2.0.0-BETA.63423":"2021-11-12T06:34:27.237Z","2.0.0-BETA.70529":"2021-11-12T07:05:33.510Z","2.0.1":"2021-11-12T09:08:51.055Z","2.0.1-BETA.92613":"2021-11-12T09:26:17.649Z","2.0.1-BETA.94902":"2021-11-12T09:49:06.476Z","2.0.1-BETA.94105":"2021-11-15T09:41:09.808Z","2.0.1-BETA.133103":"2021-11-15T13:31:08.415Z","2.0.1-BETA.181935":"2021-11-15T18:19:40.224Z","2.0.1-BETA.122536":"2021-11-16T12:25:39.886Z","2.0.1-BETA.130724":"2021-11-16T13:07:29.844Z","2.0.1-BETA.131106":"2021-11-16T13:11:12.565Z","2.0.1-BETA.132851":"2021-11-16T13:28:56.374Z","2.0.1-BETA.143130":"2021-11-19T14:31:35.067Z","2.0.1-BETA.55609":"2021-11-20T05:56:13.863Z","2.0.1-BETA.64704":"2021-11-20T06:47:09.778Z","2.0.1-BETA.84818":"2021-11-21T08:48:23.484Z","2.0.1-BETA.95848":"2021-11-22T09:58:54.904Z","2.0.1-BETA.102331":"2021-11-22T10:23:37.133Z","2.0.1-BETA.102701":"2021-11-22T10:27:06.101Z","2.0.1-BETA.113332":"2021-11-22T11:33:38.281Z","2.0.1-BETA.115847":"2021-11-22T11:58:52.470Z","2.0.1-BETA.120148":"2021-11-22T12:01:53.021Z","2.0.1-BETA.120227":"2021-11-22T12:02:40.648Z","2.0.1-BETA.121229":"2021-11-22T12:12:34.690Z","2.0.1-BETA.144113":"2021-11-22T14:41:18.725Z","2.0.1-BETA.102506":"2021-11-23T10:25:11.317Z","2.0.1-BETA.102858":"2021-11-23T10:29:12.112Z","2.0.1-BETA.103052":"2021-11-23T10:30:57.347Z","2.0.1-BETA.104022":"2021-11-23T10:40:27.022Z","2.0.1-BETA.124341":"2021-11-23T12:43:45.979Z","2.0.1-BETA.192254":"2021-11-27T19:22:59.337Z","2.0.1-BETA.122159":"2021-11-28T12:22:08.400Z","2.0.1-BETA.153133":"2021-11-29T15:31:39.134Z","2.0.1-BETA.153745":"2021-11-29T15:37:51.645Z","2.0.1-BETA.161855":"2021-11-29T16:18:59.784Z","2.0.1-BETA.92113":"2021-12-03T09:21:17.769Z","2.0.1-BETA.102553":"2021-12-03T10:25:58.369Z","2.0.1-BETA.80451":"2021-12-07T08:04:56.753Z","2.0.1-BETA.125719":"2021-12-10T12:57:24.502Z","2.0.1-BETA.134826":"2021-12-11T13:48:30.988Z","2.0.1-BETA.104118":"2021-12-12T10:41:23.851Z","2.0.1-BETA.111110":"2021-12-12T11:11:15.738Z","2.0.1-BETA.112050":"2021-12-12T11:20:55.172Z","2.0.1-BETA.113624":"2021-12-12T11:36:29.127Z","2.0.1-BETA.145033":"2021-12-12T14:50:37.266Z","2.0.1-BETA.113116":"2021-12-13T11:31:20.975Z","2.0.1-BETA.114714":"2021-12-13T11:47:19.379Z","2.0.1-BETA.121338":"2021-12-13T12:13:42.722Z","2.0.1-BETA.123408":"2021-12-13T12:34:13.745Z","2.0.1-BETA.130515":"2021-12-13T13:05:20.095Z","2.0.1-BETA.135609":"2021-12-13T13:56:13.966Z","2.0.1-BETA.161531":"2021-12-13T16:15:36.230Z","2.0.1-BETA.60859":"2021-12-14T06:09:04.351Z","2.0.1-BETA.100111":"2021-12-17T10:01:16.506Z","2.0.1-BETA.124214":"2021-12-17T12:42:19.865Z","2.1.0-BETA.20211221084215277":"2021-12-21T08:42:16.276Z","2.1.0-BETA.20211222124715888":"2021-12-22T12:47:20.265Z","2.1.0":"2022-01-03T09:29:50.114Z","2.1.1":"2022-01-07T08:27:02.110Z","2.1.2":"2022-01-07T14:49:16.972Z","2.1.3":"2022-01-08T06:38:04.469Z","2.1.4":"2022-01-11T15:38:06.515Z","2.1.5":"2022-01-11T19:33:46.738Z","3.0.0-beta.0":"2022-01-13T08:14:56.474Z","2.1.8":"2022-01-18T07:53:12.888Z","2.1.9":"2022-01-19T17:18:18.068Z","2.1.10":"2022-01-31T14:17:04.090Z","2.1.11":"2022-02-03T09:29:33.994Z","2.1.12":"2022-02-09T09:04:23.721Z","2.1.13":"2022-02-16T09:00:59.728Z","2.1.14":"2022-02-18T09:51:04.858Z","2.1.16":"2022-02-24T11:38:07.937Z","2.1.18":"2022-02-26T15:34:05.401Z","2.1.19":"2022-03-01T14:47:50.332Z","2.1.20":"2022-03-01T15:32:44.409Z","2.1.21":"2022-03-02T08:21:36.264Z","2.1.24":"2022-03-11T08:55:24.804Z","3.0.0-beta.1":"2022-03-11T10:28:51.561Z","2.1.25":"2022-03-12T10:58:53.378Z","2.1.26":"2022-03-15T19:52:05.679Z","2.1.28":"2022-03-25T09:48:50.441Z","2.1.29":"2022-03-28T11:02:26.441Z","2.1.32":"2022-04-20T06:42:43.108Z","2.1.36":"2022-06-13T14:02:33.711Z","2.1.41":"2022-09-21T13:25:23.486Z"},"maintainers":[{"name":"aaronfrost","email":"aaronfrost@gmail.com"},{"name":"jorgeucano","email":"jorgeucano@gmail.com"},{"name":"sanderelias","email":"sanderelias@gmail.com"},{"name":"villanuevand","email":"andresvillanuevab@gmail.com"}],"description":"The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.","keywords":["angular","scully","seo","scully-plugin","plugin"],"contributors":[{"name":"Aaron Frost","email":"aaronfrost@gmail.com"}],"readme":"# ScullyPluginFlashPrevention\n\nThe `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your\napp may be experiencing once you add Scully to your project.\n\nAfter adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is\nimmediately available. After appearing instantly, the JavaScript and CSS files will download and\nthen your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may\ndisappear for a moment, and then once the app is ready, the view will re-appear. This\ndisappearing-then-appearing is very normal for apps that are pre-rendered on a server. This\nproject is to prevent that.\n\nThis project shows the pre-rendered copy of your app until your app is fully render and the\nflash is over. It then shows your app and deletes the copy.\n\n### How it works\n\nBefore this plugin, you app would pre-render and then save to file, like this:\n\n```html\n<app-root _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root>\n```\n\nAfter this plugin, you will see the following in your pre-rendered template:\n\n```html\n<app-root class=\"my-class\"></app-root>\n<app-root-scully _nghost-abc=\"\" ng-version=\"9.0.1\" class=\"my-class\">\n  // The entire content of your app here\n</app-root-scully>\n```\n\nThis `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being\nrendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your\napp has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed\nfrom the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added\nduring the Scully build that looks like the following:\n\n```css\nbody:not(.loaded) app-root {\n  display: none;\n}\nbody.loaded app-root-scully {\n  display: inherit;\n}\n```\n\nOnce the app has been fully loaded, the `loaded` class is added to the `<body>` tag.\n\nAnd that's how it all works!!!\n\n## Getting Started\n\n### 1. Install the plugin:\n\n```bash\nnpm install -D @scullyio/scully-plugin-flash-prevention\n```\n\n### 2. Use the plugin:\n\nAdd the postRenderer to your `scully.config` route:\n\n```javascript\n// Add this line to your imports\nimport  { getFlashPreventionPlugin }  from '@scullyio/scully-plugin-flash-prevention';\n\n// Add the following to specific routes via the `postRenderers` property\nexports.config = {\n  '/users/:userId': {\n      ...\n      postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],\n      ...\n  }\n  ...\n}\n```\n\nYou only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other\nthan `app-root`. It is defaulted to `app-root`.\n\nUpdate `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.\n\n```typescript\nScullyLibModule.forRoot({\n  useTransferState: true,\n  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`\n});\n```\n\nApply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your\n`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means\nthat you need to possibly move any styles that apply to the `app-root` specifically, and put them\nin a location where you can also make those styles apply to `app-root-scully` as well. See here:\n\n```css\n// BEFORE\napp-root {\n  ... some styles;\n}\n\n// AFTER\napp-root,\napp-root-scully {\n  ... some styles;\n}\n```\n\nThat's all it takes to get set up.\n\n## Options\n\nThis plugin has a series of options you can pass it when you call `getFlashPreventionPlugin(<OPTIONS HERE>)`.\nHere is a description of those options.\n\n- [ScullyPluginFlashPrevention](#scullypluginflashprevention)\n    - [How it works](#how-it-works)\n  - [Getting Started](#getting-started)\n    - [1. Install the plugin:](#1-install-the-plugin)\n    - [2. Use the plugin:](#2-use-the-plugin)\n  - [Options](#options)\n    - [appRootSelector](#approotselector)\n    - [appLoadedClass](#apploadedclass)\n    - [mockAttributesBlacklist](#mockattributesblacklist)\n    - [appRootAttributesBlacklist](#approotattributesblacklist)\n\n### appRootSelector\n\nIf you `AppComponent` has a selector that isn't `app-root`, you can use this option to pass your app's custom\n`app-root` selector. If your `AppComponent` use the selector `scully-app`, you would do pass that as an arg to\nthe `getFlashPreventionPlugin` function:\n\n```javascript\ngetFlashPreventionPlugin({appRootSelector: 'scully-app'});\n```\n\n### appLoadedClass\n\nOnce you app loads, this plugin will add the class `loaded` to the body of your app. If you need to use a different\nclass (besides the default `loaded`) you can pass that class name in here. If you want to use the class `fploaded`\ndo the following:\n\n```javascript\ngetFlashPreventionPlugin({appLoadedClass: 'fploaded'});\n```\n\n### mockAttributesBlacklist\n\nThis plugin makes a copy of your `app-root` and calls it `app-root-scully`. It leaves all of the original\nattributes from `app-root` on the copy. If your `app-root` has an attribute `foo` with the value of `\"bar\"`\nthen your mock app root (`app-root-scully`) will also get that attribute.\n\nIf you want to make sure that the mock element doesn't get certain attributes, you can use this blacklist\nto remove certain attributes from the mock element. Example: if the original `app-root` had `foo=\"bar\"` as an\nattribute, and you want to exclude that on the mock copy of it, you would do the following:\n\n```javascript\ngetFlashPreventionPlugin({mockAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root-scully`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n\n### appRootAttributesBlacklist\n\nThis plugin can remove attributes from the pre-rendered version of your `app-root`. If your `app-root` had\nthe attribute `foo=\"bar\"` you can use this blacklist to remove attributes from the source `app-root`.\n\n```javascript\ngetFlashPreventionPlugin({appRootAttributesBlacklist: ['foo']});\n```\n\nThis would remove the `foo` attribute from `app-root`. This looks to see if the attr `startsWith` the\nblacklisted item you passed. This means if you pass `foo`, and the attribute is `foobar=\"baz\"` it will remove\nthe `foobar` attribute as it starts with `foo`.\n","readmeFilename":"README.md","repository":{"type":"GIT","url":"git+https://github.com/scullyio/scully.git#main"},"homepage":"https://github.com/scullyio/scully/tree/main#readme","bugs":{"url":"https://github.com/scullyio/scully/issues"}}