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

Customize server state script tag #6761

Closed
markbrouch opened this issue Oct 9, 2017 · 6 comments
Closed

Customize server state script tag #6761

markbrouch opened this issue Oct 9, 2017 · 6 comments

Comments

@markbrouch
Copy link
Contributor

markbrouch commented Oct 9, 2017

What problem does this feature solve?

In vue-server-renderer, the renderState() method generates a <script> tag in which the context state is injected for client consumption and hydration. Both the contextKey and windowKey are configurable via options, but there is no way to customize the <script> tag for targeting purposes.

I would like to be able to remove this <script> tag from the DOM after client hydration, but it would be very hacky to find and select this node without the ability to define an id attribute or similar on it. I am proposing a new option that will append an id attribute to this <script> tag, called scriptKey. This new scriptKey should be in the same options object that contextKey and windowKey are currently.

What does the proposed API look like?

context.renderState({
  scriptKey: 'VueState'
});

// -> <script id="VueState">window.__INITIAL_STATE__={...}</script>

so that later in the client code this is possible:

const vueTag = document.getElementById('VueState');
vueTag.parentElement.removeChild(vueTag);
@yyx990803
Copy link
Member

This is a good idea, but instead of exposing the option just for the id, why not just expose an option to make the script self-removing? I even think it should be removed by default and only turned on during development.

@markbrouch
Copy link
Contributor Author

Even better! Shall I work on a PR for that then?

@yyx990803
Copy link
Member

@markbrouch yes please!

@markbrouch
Copy link
Contributor Author

markbrouch commented Oct 10, 2017

Well, now that I think about it, this <script> tag isn't read until entry-client implementation usually, so I don't think an automatic removal is possible.

One thing we could do is provide the boolean option removeOnReplace to context.renderState() and have it append an id attribute to the <script> tag which could then be read by Vuex store.replaceState() and removed.

@yyx990803
Copy link
Member

yyx990803 commented Oct 10, 2017

The script registers the global variable window.__INITIAL_STATE__ as a permanent side effect, removing itself doesn't make that variable go away.

@markbrouch
Copy link
Contributor Author

Oh I see what you're getting at - we can have the script tag delete itself immediately since it will have already dumped __INITIAL_STATE__ into the global context.

markbrouch added a commit to markbrouch/vue that referenced this issue Oct 10, 2017
Enable intial state script to automatically remove itself from the DOM if server environment is
prod.

vuejs#6761
markbrouch added a commit to markbrouch/vue that referenced this issue Oct 10, 2017
Wrap auto-remove script in IIFE so that global scope is not polluted.

vuejs#6761
ztlevi pushed a commit to ztlevi/vue that referenced this issue Feb 14, 2018
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants