Block form of to-elsewhere?

[yankeeinlondon]

I find myself wanting to use ember-elsewhere in a situation where I have some inline content that I want to "transport" to a sidebar. I could make that content a component but the sidebar and main content are so contextually tied I'm not really super keen on doing that.

Is it possible to have an block component version of to-elsewhere:

{{#to-elsewhere named='sidebar'}}
   lorem ipsum sidebar
{{/to-elsewhere}}

lorem ipsum main content window

[ef4]

Yes, I would like to do this. Right now it requires messing with ember internals, which would make this addon fragile.

There is definitely interest in adding a block-capture feature to Ember itself that would make this possible.

[knownasilya]

I could finally deprecate https://github.com/knownasilya/ember-named-yields if this was added.

[simonihmig]

I would really love to see this as well. It would also allow to be a real replacement for ember-wormhole (which is failing in a number of cases due of its tight coupling to private APIs) for many addons that still have to use it for things like modals.

@ef4 is there already an RFC out there that would enable this?

From my naive understanding, it is not so much related to the few named block/yield proposals, but more to being able to assign a block template to a component property (send in this case) that can be rendered somewhere else (not within the to-elsewhere), so emberjs/rfcs#203 would enable that, but seems to have been dropped.

[erichaus]

any movement on this?

[ef4]

The most relevant work is https://github.com/emberjs/rfcs/blob/master/text/0226-named-blocks.md.

The RFC is merged, and I'm pretty sure the implementation is already working in glimmer-vm. I don't know what the next step is to turn it on in ember.

[cbou]

Is there an alternative way to achieve this? ember-wormhole is not an option for me because I want to test if the a {{to-elsewhere}} is declare.

e.g.:

{{#from-elsewhere name="page-title" as |title|}}
  {{if title title model.name}}
{{/from-elsewhere}}

[erichaus]

is there any update on whether this is possible or could be added as a feature?

[knownasilya]

No movement yet. You can see if movement happens with named blocks here: emberjs/rfc-tracking#44

[ming-codes]

I think we can totally do this with AST transforms.

Transform from this.

// Component.hbs
{{#to-elsewhere named="my-right-sidebar"}}
  {{this.model}}
{{/to-elsewhere}}

To this

// Component.hbs
{{to-elsewhere named="my-right-sidebar" send=(component "Component$1" model=this.model)}}

// Component$1.hbs
{{this.model}}}

[ming-codes]

Here's a very crude POC of that https://github.com/ming-codes/ember-elsewhere-block-form

[ef4]

I think this could work, but it requires some careful handling of all the names in scope.

[ef4]

Also we need to figure out what to do if we encounter special forms like {{yield}} and {{outlet}}. I suppose they can become static errors.

[cah-brian-gantzler]

Any thought to using the now public {{in-element}} helper?

[ef4]

This addon could be refactored to use in-element, but it would need to carefully manage the timing between the two sides and only call in-element after creating a destination element for it.

from-elsewhere would render a list of elements corresponding to each block that it wants to contain. to-elsewhere would wait to hear which element is waiting for it and then render with in-element.

It all sounds like it could work and if somebody is up for trying it that would be great.