Lookup of non server rendered data

[kaleidawave]

(not really a issue but something tools that explicitly send down the entire state as an object don't encounter)

So given this template:

<template>
    <div #if="someX">
        <h1>{someY}</h1>
    </div>
</template>

If the template is rendered with the state of someX === false the h1 below will not be rendered and sent to the client. This is a little bit of a problem as if this.data.someY is called it will be null but when the server rendered it may have had a value.

Two fixes for if it is important that someY needs to be accessed at runtime:

1: Use $hidden:

<template>
    <div $hidden="someX">
        <h1>{someY}</h1>
    </div>
</template>

This will still be sent to the client and accessible from the DOM but have the effect of not being visible by the user. It someX is very likely to change at runtime this is a good way to go as it can be instantly revealed rather than the tree being generated on the client. However if someX is hardly ever changed or never changed and the tree under it is large it will end up with a lot of extraneous html.

2: Put the value elsewhere:

<template>
    <div $data-some-y="someY"></div>
    <div $hidden="someX">
        <h1>{someY}</h1>
    </div>
</template>

This way someY is still sent to the client un conditionally. Bad if someX is often truthy and someY is sent twice, especially is someY is large.