New feature: Explicit attributes declaration of child components

[ShiMeiWo]

In the current template syntax, a value is passed from a parent component to a child component using :bind , etc., but it is difficult to quickly see the name of the attribute that the child component accepts. Therefore, using the fact that the NueJS template syntax is based on the ES6 class, I would like to propose the following writing style:

<div @name="media-object" class="{ type }">
  <img src="{ img }">
  <aside>
    <h3>{ #title }</h3>
    <p>{ #format(desc) }</p>
  </aside>

  <!-- instance variables and methods -->
  <script>
    // attributes received from the parent are declared as public fields.
    // they serve the purpose of self-documentation, viewing the attributes as the API of the component.
    // default values are optional.
    type
    img = './noImage.png'
    desc = ''

    // instance variables are declared as private fields
    #title = 'Default title'

    // called when the component is created
    constructor(data) {
    }

    // also, instance methods are declared as private members
    #format(value) {
    }
  </script>

</div>

I would appreciate your opinion. Thanks!

[JensRoland]

I think this is a great suggestion - apart from the 'optional default values' bit, which makes the declaration statements look like expressions. In this case I would prefer the more verbose type = null or type = undefined.

[tipiirai]

Makes sense. I think Nue should support this. ie the instance variables get overridden by the given attributes. But I feel this is more like a best practise and not a requirement.