bug: Props drilling coerces None values to empty strings

[Juro Oravec]

Imagine I pass a prop to a component, and that component just passes the prop through to another component. The inner component has a default specified. The outer component doesn't specify any defaults.

In this case, I would expect that, when I don't pass the prop to the outer component, then the inner component should render the default value, because it shouldn't be passed anything from its parent.

However, what I observe is that the inner component receives an empty string, and hence doesn't use the default value.

Consider this example:

page.html

<div class="layout">
	Layout!

	{% outer %}
</div>

outer.html

---
props.types = {
    'my_prop': Optional[str],
}
props.defaults = {}

print('OUTER: ', props['my_prop'])
print('OUTER_TYPE: ', type(props['my_prop']))
---

<div>
	outer!
	{% inner the_prop=my_prop %}
</div>

inner.html

---
props.types = {
    'the_prop': Optional[str],
}
props.defaults = {
	'the_prop': 'bamboozle',
}

print('INNER: ', props['the_prop'])
print('INNER_TYPE: ', type(props['the_prop']))
---

<h3>
    inner!
	{{ the_prop }}
</h3>

Since I didn't set the my_prop for outer, then I would expect that inner would render bamboozle, and hence the whole output would be:

<div class="layout">
	Layout!

	<div>
	  outer!
	  <h3>
	    inner!
	    bamboozle
	  </h3>
	</div>
</div>

However, instead the the_prop is an empty string, so I get:

<div class="layout">
	Layout!

	<div>
	  outer!
	  <h3>
	    inner!
	    
	  </h3>
	</div>
</div>

When rendered, the above prints:

OUTER:  None
OUTER_TYPE:  <class 'NoneType'>
INNER:  
INNER_TYPE:  <class 'str'>

EDIT: Added print statements.