Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement {{#-in-element API. #331

Merged
merged 2 commits into from
Sep 25, 2016
Merged

Implement {{#-in-element API. #331

merged 2 commits into from
Sep 25, 2016

Conversation

rwjblue
Copy link
Member

@rwjblue rwjblue commented Sep 25, 2016

This API (which is not used by Glimmer itself) is intended to allow the host environment to provide "wormhole" like behavior.

Specifically, when invoked {{#-in-element accepts an Element (that conforms to the Simple.Element interface) and renders the block provided into that element.

  • The operand (first argument) can be changed to another element and the
    contents are cleared and recreated in the new location.
  • Changing the operand to a "falsey" value, will clear the contents and
    skip rendering the block.
  • Causing the in-element block to be removed (i.e. when inside an
    {{#if) the contents that were written to the foreign element are
    cleared.

@chancancode
Copy link
Contributor

👏

this.elementStack.push(element);

this.nextSibling = null;
this.nextSiblingStack.push(null);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can make this configurable for bonus points, which would allow inserting into the middle of an element 😉

but we can do it as a follow-up.

// But how do you know?

// {{#-with-element "zomg"}} <-- you'll get a string back here, now what?
let reference = vm.frame.getOperand<Simple.Element>();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For future readers: this is unsafe but we decided to punt on error-ing since this is still experimental

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should probably remove those comments tho :P

rerender();

equalsElement(externalElement, 'div', {}, `${initialContent}[Yippie!]`);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we test setting the element to null as part of the steps here to ensure we aren't removing the initial content?

}
);

equalsElement(externalElement, 'div', {}, stripTight``);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

assert destroyed === 0

equalsElement(externalElement, 'div', {}, stripTight``);

set(view, 'showExternal', true);
rerender();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

assert destroyed === 0

@rwjblue
Copy link
Member Author

rwjblue commented Sep 25, 2016

Updated based on review feedback. Should be ready for another review...

@rwjblue rwjblue merged commit 7c4c900 into master Sep 25, 2016
@rwjblue rwjblue deleted the remote-element branch September 25, 2016 22:05
@lukemelia
Copy link

Very excited to have a supported API for wormhole and similar behavior! Thanks guys!

bantic added a commit to bustle/ember-mobiledoc-dom-renderer that referenced this pull request Oct 13, 2016
 * Fix failing tests when using ember with glimmer2.
 * Access DOM helper using a method that is safe for both pre-glimmer2 and
glimmer2.
 * Wrap the renderedMobiledoc documentFragment in a wrapper div
   (necessary for glimmer2 teardown, see
   glimmerjs/glimmer-vm#331 and
   yapplabs/ember-wormhole#66 (comment))
 * Fixes #18.
 * Update travis node version.
 * Update package keywords and description.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants