Scully: add flash-prevention to docs (Web plugins)

[jorgeucano]

🗄️ Docs report

Description

https://www.npmjs.com/package/scully-plugin-flash-prevention

🔬 Minimal Reproduction

What's the affected URL?**

Reproduction Steps**

Expected vs Actual Behavior**

📷Screenshot

🔥 Exception or Error

🌍 Your Environment

Browser info

Anything else relevant?

[puku0x]

Isn't it @scullyio/scully-plugin-flash-prevention?
https://www.npmjs.com/package/@scullyio/scully-plugin-flash-prevention

[yringler]

Does that plugin still work? I'm having issues with it.
And the docs are in JS...
And there's no postRenderers property on the ScullyConfig type...

I tried adding it in plugins, but also no dice.
I also tried using the postRenderers prop of RouteConfig

_Edit_
Works with

const { getFlashPreventionPlugin } = require('@scullyio/scully-plugin-flash-prevention');

export const config:ScullyConfig = {
  defaultPostRenderers: [getFlashPreventionPlugin()],

I hadn't thought that I actually needed to do require, import doesn't seem to work 🤷

_Edit_
I switched to transferstate, awesome! Not going back.

[Splaktar]

I'm seeing the same issues as @yringler. Following the existing docs results in

---------
 We encountered an error executing the config file. "./scully.xlts.dev.config.ts"
 Check the error below, and try again later
--------- 
Error: Cannot find module 'scully-plugin-flash-prevention'
Require stack:
- /Users/splaktar/Git/xlts/xlts.dev/scully.xlts.dev.config.js

[Splaktar]

@yringler there were some docs to help with this confusion, but they got lost in a refactor (details https://github.com/scullyio/scully/pull/507#issuecomment-850931982). You can find it here: https://github.com/scullyio/scully/blob/567726247436c78e367804cff1dedd218cf4fa18/plugins/scully-plugin-flash-prevention/README.md. The key piece is that you shouldn't use defaultPostRenderers, but instead the postRenderers field of a route definition like this:

  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      postRenderers: [getFlashPreventionPlugin()],
      slug: {
        folder: './blog',
      },
    },
  },

Then importing TS style also works fine

import { getFlashPreventionPlugin } from '@scullyio/scully-plugin-flash-prevention';

It's just that the docs use the out of date package name currently.

One other issue that I ran into was that I got a .js file of my scully.app.config.ts file created with the old, wrong package name. Then everything I tried wasn't working because that .js file was still there and I wasn't rebuilding it. I removed it and everything worked fine. Oh and this plugin did indeed solve my flash issues, which is great!

Update: I ended up having to use getFlashPreventionPlugin() in defaultPostRenderers for my app since I was having flash on page other than the blog. This worked and removed flash from all pages (previously only the index.html didn't flash).