Component overrides parent data

[smoldaner]

Description:

If you pass undefined as a component attribute (required), and the component has initial data (data() { }) for this attribute, the parent context is overridden by this value.

Versions affected:

1.4.1

Platforms affected:

All

Reproduction:

See code below or this fiddle. The main ractive instance value1 data (undefined) is overridden by the components default value (42).

As Output I would expect

Value1:
Value2: Not undefined

instead of

Value1: 42
Value2: Not undefined

If the value is not undefined (value2), it works as expected

Code

const component = Ractive.extend({
  attribues: {
    required: ['value1', 'value2']
  },
  data () {
    return {
      value1: 42,
      value2: 42
    }
  }
})

const r = window.r = new Ractive({
  el: '#main',
  template: '#template',
  components: {
    component
  },
  data: {
    value1: undefined,
    value2: 'Not undefined'
  }
})

HTML

<script type="text/html" id="template">
  <h1>Value1: {{value1}}</h1>
  <h1>Value2: {{value2}}</h1>
  <component value1="{{value1}}" value2="{{value2}}"/>
</script>

<div id="main"></div>

[evs-chris]

This is slightly odd behavior, but appears to be correct according to the test suite. I think the original idea was that you're giving the component a reference to your data with the binding and if the component wants to initialize it it is free to do so. It also happens right along the js weirdness fault line of undefined. If you sub in null, which is considered to be a set value, you'll see that it doesn't get overridden by the component.

[smoldaner]

I can understand the behavior if the value is not set at all. But here it is a bit different. The property exists, only with value "undefined". E.g. Object.keys(this.data).includes('value1') returns true