Would it be possible to pass a sub-tree as parameter to a partial?

Apologies if this has been previously discussed or is simply unpractical to implement, but I wish there as a way to pass a sub-tree of DOM elements to a partial as a parameter.

Example:

<!-- Calling the partial -->
{>"components/my-component1" parameter1="foobar"}
    <div class="component__inner">
        <p>Hello world</p>
    </div>
{<}

<!-- Inside the partial -->
<div class="component component--{parameter1}">
    {_content}
</div>

Result:

<div class="component component--foobar">
    <div class="component__inner">
        <p>Hello world</p>
    </div>
</div>

This would allow developers to create self-contained and reusable components as Dust.js partials. You can argue that this is technically possible now, but one would have to pass any markup required by the component as a normal parameter, which can get messy very easily:

{>"components/my-component1" parameter1="foobar" content="<div class='component__inner'><p>Hello world</p></div>"}

A similar approached is used by Sass in their mixins, as developers can define normal parameters as well a special code block defined as @content.

@mixin component1($arg1, $arg) {
    .component1 {
        width: $arg1;
        height: $arg2;
        @content;
    }
}

React components also make this possible through this.props.children.

I’d love to hear your thoughts about this. Thanks in advance!

[eduardoboucas]

For anyone interested, this is possible by creating a very simple helper used to call a partial and inject its content block as a parameter:

(function (dust) {
  /**
   * @partial helper
   * Calls a partial and injects the body block as a `$content` parameter
   *
   * Example:
   *    {@partial $name="partials/form"}
   *      <input name="foo" type="text">
   *    {/partial}
   *
   * By @eduardoboucas
   * https://eduardoboucas.com/blog/2016/04/15/creating-modular-ui-components-with-dustjs.html
   */  
  dust.helpers.partial = function (chunk, context, bodies, params) {
    var newContext = {
      $content: bodies.block
    };

    return chunk.partial(params.$name, context.push(newContext), params);
  };
})(typeof exports !== 'undefined' ? module.exports = require('dustjs-linkedin') : dust);

A more detailed explanation can be found here.

[eduardoboucas]

That’d be great. Thank you!