Support pass all prerender-spa-plugin options about vue-cli-plugin-prerender-spa

[SolarLiner]

I'll add the ability to specify a file to run during post-processing in the configuration. It will execute the default export of that file.

[SolarLiner]

I am a bit against exposing the complete configuration to the file as it would effectively defeat the purpose of having a Vue CLI plugin in the first place, and introduce a lot of edge use cases that I'm not going to offer support for.

Regarding your particular use-case of cleaning HTML of mutated DOM outside of Vue, you could mitigate the behavior two ways:

• Check in your code to see if pre-rendering or if being live. The plugin injects the __PRERENDER_INJECTED property into window when pre-rendering. By checking its existence you can prevent those scripts from running when pre-rendering.
• If you have write access to those scripts, prevent the duplication by first checking for the DOM elements before adding them. This is actually preferred as the scripts will also fail elsewhere than when pre-rendering, as there might be other cases where they will be loaded a second time.

Another option would be to provide a collection of post-processing functions to run on demand. But that would most likely increase the number of options and I am not in favor of that.

The last resort option would be a sort of "mega post-processing" function that automatically runs cleanup procedures when detecting issues with the HTML - but I don't know how feasible that would be.

[zheeeng]

@SolarLiner I tried to add conditions on judging execute async scripts by detecting window['__PRERENDER_INJECTED'], but fails. After reading the implementation of vue-cli-plugin-rerender-spa I found that the inject option and injectProperty doesn't pass down to rerender-spa-plugin.

Can we add more pass-down options in .prerender-spa.json?

[SolarLiner]

The prerender-spa-plugin does inject the object already by default. Furthermore, there's a custom object that is merged with the CLI plugin configuration and then passed to the renderer. In the configuration file, it's the "customRendererConfig" option.

I do realize now that you need the ìnjectobject if you actually want the plugin to inject the property intowindow`. I'll go provide a default one, but it's already configurable in the current state of things.

[zheeeng]

Thx for your replying, I missed the customRendererConfig option. I get works done.

I just read a post: https://markus.oberlehner.net/blog/how-to-pre-render-vue-powered-websites-with-webpack/. I found that postProcess feature of prerender-spa-plugin would be useful in some cases. For instance, adding defer to script tag.

At present .prerender-spa.json only support json format, we can't use fuction type customRendererConfig. May we consider adding another valid config file .prerender-sparc?

[jamiecarter7]

Took me a while to work out how to use this.

Might be worth adding something to the instructions page.

For those looking to inject a value into the renderer I did it as follows:
*inside your prerenderSpa: {}

customRendererConfig: {
  injectProperty: "__PRERENDER_INJECTED",
  inject: {
    test: "hi"
  }
},

data can be found at window.__PRERENDER_INJECTED
The above data would be window.__PRERENDER_INJECTED.test > "hi"

[SolarLiner]

The docs do say that customRendererConfig is passed to the renderer, so the Prerender Spa Plugins docs should be followed.

I can however still add something in the README.

[bigsee]

@SolarLiner thank you for the work to add the postProcess option - super helpful, as is the plugin in general! 😀