Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support pass all prerender-spa-plugin options #4

Closed
zheeeng opened this issue Sep 6, 2018 · 8 comments
Closed

Support pass all prerender-spa-plugin options #4

zheeeng opened this issue Sep 6, 2018 · 8 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@zheeeng
Copy link

zheeeng commented Sep 6, 2018

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

We can define more options which are feed to prerender-spa-plugin not only the renderer options in .prerender-spa.json.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Some async scripts write script tags into html and be rendered in pre-rendering. While user visit website these async scripts write twice thtese script tags. prerender-spa-plugin provides us postProcess option to cleanup the prerendered html. Need a way to configure that option.

@SolarLiner
Copy link
Owner

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.

@SolarLiner SolarLiner added the question Further information is requested label Sep 6, 2018
@zheeeng
Copy link
Author

zheeeng commented Sep 8, 2018

@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
Copy link
Owner

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
Copy link
Author

zheeeng commented Sep 9, 2018

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?

@SolarLiner SolarLiner added this to the 1.1.0 milestone Sep 24, 2018
@SolarLiner SolarLiner added enhancement New feature or request help wanted Extra attention is needed and removed question Further information is requested labels Sep 24, 2018
@SolarLiner SolarLiner modified the milestones: 1.1.0, v2.0.0 Sep 24, 2018
@SolarLiner SolarLiner added this to To do in Vue CLI Project Jan 2, 2019
@SolarLiner
Copy link
Owner

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.

Vue CLI Project automation moved this from To do to Done Jan 2, 2019
SolarLiner added a commit that referenced this issue Jan 2, 2019
Version 1.1.0

- Adds support for user post-processing of HTML after pre-rendering #4
- Bundles an `app.html` file which is not prerendered, and should be used as
 entrypoint for non-prerendered routes #14
- Support multi-page mode (by @snadn) #10 (implementation #11)
- Support non-default baseURL (by @snadn) #6 (implementation #9)
- Writes configuration using the API `extendPackage` function, which writes to
 `vue.config.js`. If found, the old configuration will be copied over and
 converted on `vue invoke` (and read, but not converted on build).
@jamiecarter7
Copy link
Contributor

jamiecarter7 commented Jan 20, 2019

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
Copy link
Owner

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
Copy link

bigsee commented Mar 27, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
Development

No branches or pull requests

4 participants