Allow property passthrough

[watzon]

Feel free to retitle this if you can think of something more descriptive. Essentially it would be nice to be able to pass through properties from a parent component to a child component without having to individually pass through each one. For instance:

component Bar {
  property baz : String
  
  fun render : Html {
    <div>{ baz }</div>
  }
}

component Foo {
  fun render : Html {
    <Bar {...properties} />
  }
}

Granted this a terrible example and not showing a real world use case, but I think the {...properties} way would be one way to handle it. For a real world use case you can check out my mint-tabler library which includes 3100+ generated components which follow a common template and need to pass properties into a child component.

I would agree that this is normally an anti-pattern and can definitely be relied on the wrong way, but in certain situations (like mine), it could very well make the library considerably smaller.

[gdotdesign]

This will not be implemented for multiple reasons:

• It adds more cognitive load when reading code.
• It can break unexpectedly if the child components properties not line up with the parents (especially for components in packages where the user doesn't have control)
• Adds extra syntax, and the language is big enough as is.

For your use case I recommend putting the icons into constants and have one component which the users can put the constants in:

component Tabler.Icon {
    property scale : Number = 1
    property animation : Tabler.Animation = Tabler.Animation::None
    property speed : Tabler.Speed = Tabler.Speed::Slow
    property hover : Bool = false
    property flip : Tabler.Flip = Tabler.Flip::None
    property stroke : String = "currentColor"
    property fill : String = "none"
    property label : String = ""
    property title : String = ""

    // Required
    property icon : Html

    fun render : Html {
      <Tabler scale={scale} animation={animation} speed={speed} hover={hover} flip={flip} stroke={stroke} fill={fill} label={label} title={title}>
        icon
      </Tabler>
    }
}

module Tabler {
  const ABACUS = <svg>...</svg>
}

<Tabler.Icon icon={Tabler.ABACUS}/>

This worked great for me in other projects!