3. Add {% section %} tag to determine empty-ness of a region without rendering twice (placeholder case)

Brainstorming:

So overall it seems even with the new section tag, the biggest problem is that a non-JS solution can only work in isolation of ESI.

And unlike in core where a late middleware could check empty-ness, ESI would need to rely on purely Javascript, which the biggest advantage of it is, that it does not need that.

However usually it is only a section that we worry about and I wondered if not the best thing would be if that if we detect placeholders in a section that should be conditionally shown based on empty-ness, is to placeholder the whole section instead.

That would be less ideal than just placeholdering the relevant block, but it would allow the simple visibility rule to work perfectly.

Also it would mean that the rendering would just work perfectly, because recursive placeholders are always directly replaced.

In theory even a list of lazy builders would still be effectively cacheable in dynamic page cache as it all could still be rendered independently and also cached independently.

The effect of BigPipe and ESI of course would be less, but those concerned with that could ensure with visibility conditions that the section never contains placeholders and hence this is never a problem.

Especially for BigPipe though placeholdering the whole section might create layout problems ... :/ (as it has the opposite problem)

Thinking of this some more:

- ESI in Varnish can only work with a fixed layout. That is nothing new and nothing we need to solve here. A JS enhancement to hide the section once the page is loaded is nice though.

- BigPipe really wants a fixed layout, too.

--

Outside of those two late placeholdering technologies themers want their section to be shown or not shown. This needs to happen after dynamic page cache OR an internal ESI like cache, so preferably in a middleware using very little CPU.

A markup that would allow that is:

<!-- SECTION 'content.sidebar_first' -->
  <div class="sidebar-first" data-drupal-section-emtpty="content.sidebar_first">
<!-- INNER_SECTION 'content.sidebar_first' -->
  <span>I have content</span>
<!-- INNER_SECTION 'content.sidebar_first' -->
  </div>
<!-- SECTION 'content.sidebar_first' -->

<!-- SECTION 'content.sidebar_first' -->
  <div class="sidebar-first" data-drupal-section-empty="content.sidebar_first">
<!-- INNER_SECTION 'content.sidebar_first' --><!-- INNER_SECTION 'content.sidebar_first' -->
  </div>
<!-- SECTION 'content.sidebar_first' -->

So by searching for <!-- INNER_SECTION '$var' --> from attached drupalSettings we could easily check if the section is empty or not and also remove all the <!-- SECTION tags again and just leave the data attributes.

So markup would look for BigPipe after the middleware / response subscriber like:

  <div class="sidebar-first" data-drupal-section-empty="content.sidebar_first">
    <span data-bigpipe-placeholder-id="[hash]"></span>
  </div>

And attachBehaviors() could every time check for data-section-empty elements in the parents (or whole document for context=document).

So that would work as well and hide the section as soon as possible (also for ESI users with JS enabled).

If users truly need empty markup, they would need to use   with a CSS styled width of "0" or a non-visible UTF-8 character - though that is more easily possible to achieve, but a slight BC break.