Use a custom div instead of duplicating the block

[mupkoo]

trafficstars

The idea is to have a component instead of an AST transform. This way there will be no need to have the same block twice.

Something in the lines of

import Component from '@ember/component';

export default Component.extend({
  renderInPlace: false,

  _parentElement: computed('parentElement', 'renderInPlace', function () {
    if (this.renderInPlace) {
      return this.element.querySelector('[data-render-in-place']);
    } else {
      return this.parentElement;
    }
  })
});

<div data-render-in-place></div>

{{#-in-element parentElement}}{{yield}}{{/-in-element}}

or maybe even something like. The bottom code works although I am not sure if it will cause any problems.

import Component from '@ember/component';

export default Component.extend({
  renderInPlace: false,

  _parentElement: computed('parentElement', 'renderInPlace', function () {
    if (this.renderInPlace) {
      return this.element;
    } else {
      return this.parentElement;
    }
  })
});

[cibernox]

The reason for the AST transform is that it has zero runtime cost, unlike a component. Is there a reason that magically duplicated block is a problem for you?

[mupkoo]

Sometimes the block can contain bigger templates than a single component, which in a way will increase the template size. And although this can be avoided by creating a component and using it inside the block, I can see a lot of people just putting a lot of presentation logic inside there.

I guess it is a micro optimisation - template size vs runtime cost. It was just an idea that I wanted to share.

[cibernox]

It makes sense. There is a middle ground thing we can do it would improve things in the most common use case.

The block is duplicated because of the renderInPlace option, which is often not used ({{maybe-in-element el}}) or set to a static value ({{maybe-in-element el false}}). We could make the AST detect those cases and avoid duplicating the block for those.

[mupkoo]

That is a nice idea. I can create a PR towards the end of the week.

[mupkoo]

Now when I think about it why would you use {{ maybe-in-element el false }} instead of {{ -in-element el }}

[cibernox]

None really, other than consistency. At the end, using something that starts with {{- is kind of scary, but it would be identical.

[rwjblue]

The reason for the AST transform is that it has zero runtime cost, unlike a component. Is there a reason that magically duplicated block is a problem for you?

FWIW, this not zero cost, it is double the bytes of whatever the block. I think the modern suggestion would be to make a template only component that does:

{{#if @renderInPlace}}
  {{yield}}
{{else}}
  {{#in-element @destinationElement insertBefore=null}}
    {{yield}}
  {{/in-element}}
{{/if}}