The Future of Renderables, in Theory

gistfile1.php

<?php

/**
 * DISCLAIMER: This is a purely theoretical example.
 *
 * Let's render a paged list of nodes, using a component. Components
 * are common layout recipes, and we wish to provide a Theme
 * Component Library that developers can use. These are similar in
 * concept to the traditional theme functions, but should be more 
 * flexible and reusable by core and contrib. We're hoping that 
 * for most use-cases, layouts can be built via these components.
 */

/**
 * The river of news (default homepage), http://example.com/node
 */
function node_page_default() {
  // ...
  // ==============================================================
  // = Queries to get the nodes, count query, add a title, etc... =
  // ==============================================================
  // ...

  // Show the nodes our nodes as a paged_list.
  return array(
    '#component' => 'paged_list',
    '#items' => array($nodes),
    '#options' => array(
      // any sort of options that are relevant to the paged_list component.
    ),
  );
}

// ...and there would exist some plumbing that would prepare the variables
// for the Twig templates.

// So, we don't have any calls to theme(), everything is abstracted into a
// renderable and the engine does the rest of the work.

// In this way, we can (theoretically) have a pluggable theme-engine system.

?>


<!-- ======================================= -->
<!-- = Here's the most abstracted example: = -->
<!-- ======================================= -->

/**
 * @file paged-list.html.twig
 */

{{ items }}
{{ pager }}


<!-- =========================================== -->
<!-- = Or override paged-list.html.twig to be: = -->
<!-- =========================================== -->

/**
 * @file paged-list.html.twig
 */

{% for item in items %}
  {{ item }}
{% endfor %}

{{ pager.previous_link }}
{% for link in pager.links %}
  {{ link }}
{% endfor %}
{{ pager.next_link }}


<!-- =========================================== -->
<!-- = Or override paged-list.html.twig to be: = -->
<!-- =========================================== -->

{% for item in items %}
  <h2>{{ item.field_title.value }}</h2>
  <div class="content">{{ item.field_body.value }}</div>
{% endfor %}

{{ pager.previous_link }}
{% for index, link in pager.links %}
  <a href="{{ link.attributes.href }}" class="link-{{ index }}{{ link.attributes.class }}"{{ link.attributes }}>{{ link.text }}</a>
{% endfor %}
{{ pager.next_link }}