Customize server state script tag

[markbrouch]

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]

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]

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

[yyx990803]

@markbrouch yes please!

[markbrouch]

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]

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

[markbrouch]

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.