Render Outlet

[marcoroth]

API Ideas:

Current implementation

Currently the "render outlet" is just the controller element itself.

<div data-controller="list"></div>

But sometimes it might make sense have the rendered output not directly on the controller element itself.

Idea 1: HTML Custom Element

<div data-controller="list">
  <h1>List</h1>

  <p>This part of the HTML is "persistent" and doesn't get re-rendered when a value changes</p>

  <render-outlet></render-outlet>
</div>

Idea 2: Render Target

<div data-controller="list">
  <h1>List</h1>

  <p>This part of the HTML is "persistent" and doesn't get re-rendered when a value changes</p>

  <div data-list-target="render"></div>
</div>

Access children in Stimulus controller

Whatever children you pass into the render outlet are also accessible in the render function. This would give you the possibility to decide where into the markup you want to insert these children - if even.

With option two it could look like this:

<div data-controller="list">
  <render-outlet>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </render-outlet>
</div>

import { Controller } from '@hotwired/stimulus'
import { useRender, h } from 'stimulus-render'

/** @jsx h */

export default class extends Controller {
  connect () {
    useRender(this)
  }

  render () {
    return  <ul id="list">{this.children}</ul>
  }
}