FuManchu icon indicating copy to clipboard operation
FuManchu copied to clipboard

Feature: Component-like partial templates with child content

Open Antaris opened this issue 1 year ago • 0 comments

Enable scenarios where content can be inserted into a a partial template as child content, alongside existing functionality that supports arguments and parameters.

Declaring zones in a partial template

A partial template could define a zone for child content, using the < character to indicate "insert content into this zone, named children:

<div>
  {{<children}}
</div>

You could potentially define multiple zones, maybe as a result of a conditional value

{{#if hasData}}
  {{<has_content}}
{{^}}
  {{<no_content}}
{{/if}}

Adding a partial template with child content

The current syntax to include a partial template is:

<div>
  {{>partial}}
</div>

To make it simple for the parser, extending the # block syntax might be the better way, so perhaps:

{{#>partial}}
  <!-- content here.
{{/partial}}

For a partial that supports only one zone, which could be implicitly named children:

{{#>partial}}
  My nested content here
{{/partial}}

For a partial that supports multiple zones:

{{#>partial hasData=someTruthyOrFalseyValue}}
  {{>has_content}}
    We have content!
  {{/has_content}}
  {{>no_content}}
    We have no content
  {{/no_content}}
{{/partial}}

Use cases:

Layout-type partials:

{{#>layout theme="dark"}}
  <h1>Body content here</h1>
{{/layout}}

Re-usable component-type partials:

{{#>two_column_row}}
  {{>column1}}
    <img src="..." />
  {{/column1}}
  {{>column2}}
    <h2>Column content here</h2>
  {{/column2}}
{{/two_column_row}}

Partial templates like this would still support passing in arguments, or maps:

{{#>two_column_row cssClass="image-left"}}
  {{>column1}}
    <img src="..." />
  {{/column1}}
  {{>column2}}
    <h2>Column content here</h2>
  {{/column2}}
{{/two_column_row}}

For child zones, a single > tag would be used, but only supported as a direct child of a partial with nested content?

Also, should these be named block partials? components? zoned-partials?

Antaris avatar Nov 11 '24 13:11 Antaris