Update for insertBefore API change as per RFC287

* enforces `insertBefore=null` as only allowed value
* Adds implementation for default replace semantics

*This is a breaking change!*

addon/components/-in-element-replace.js

@@ -0,0 +1,19 @@
+import Component from '@ember/component';
+import layout from '../templates/components/-in-element-replace';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  init() {
+    this._super(...arguments);
+    this._marker = self.document ? self.document.createTextNode('') : '';
+  },
+
+  didInsertElement() {
+    let element = this.get('node');
+    while (element.firstChild && element.firstChild !== this._marker) {
+      element.removeChild(element.firstChild);
+    }
+  }
+});

addon/templates/components/-in-element-replace.hbs

@@ -0,0 +1,2 @@
+{{! template-lint-disable no-unbound }}
+{{#-in-element this.node}}{{unbound this._marker}}{{yield}}{{/-in-element}}

app/components/-in-element-replace.js

@@ -0,0 +1 @@
+export { default } from 'ember-in-element-polyfill/components/-in-element-replace';

lib/in-element-transform.js

@@ -2,11 +2,31 @@
 
 module.exports = class InElementTransform {
   transform(ast) {
+    let b = this.syntax.builders;
+
     this.syntax.traverse(ast, {
       BlockStatement(node) {
         if (node.path.original === 'in-element') {
           node.path.original = '-in-element';
           node.path.parts = ['-in-element'];
+
+          let insertBeforeHash = node.hash.pairs.find(pair => pair.key === "insertBefore");
+          if (insertBeforeHash) {
+            if (insertBeforeHash.value.type !== "NullLiteral") {
+              throw new SyntaxError('insertBefore only takes `null` as an argument');
+            }
+
+            node.hash.pairs = node.hash.pairs.filter(hash => hash !== insertBeforeHash);
+          } else {
+            return b.block(
+              '-in-element-replace',
+              [],
+              b.hash(
+                [b.pair('node', node.params[0])]
+              ),
+              node.program
+            );
+          }
         }
       }
     });

package.json

@@ -23,15 +23,15 @@
   "dependencies": {
     "debug": "^3.1.0",
     "ember-cli-babel": "^7.1.2",
-    "ember-cli-version-checker": "^2.1.0"
+    "ember-cli-version-checker": "^2.1.0",
+    "ember-cli-htmlbars": "^3.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.6.3",
     "broccoli-asset-rev": "^2.7.0",
     "ember-cli": "~3.9.0",
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-eslint": "^4.2.3",
-    "ember-cli-htmlbars": "^3.0.0",
     "ember-cli-htmlbars-inline-precompile": "^1.0.3",
     "ember-cli-inject-live-reload": "^1.8.2",
     "ember-cli-sri": "^2.1.1",

tests/integration/in-element-test.js

@@ -6,15 +6,27 @@ import hbs from 'htmlbars-inline-precompile';
 module('Integration | in-element', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('renders into destination element', async function(assert) {
+  test('renders into destination element by replacing', async function(assert) {
     await render(hbs`
-        <div id="test-destination-element"></div>
+        <div id="test-destination-element">Dummy</div>
         {{#if ready}}
           {{#in-element destinationElement}}Some text{{/in-element}}
         {{/if}}
       `);
     this.set('destinationElement', document.querySelector('#test-destination-element'));
     this.set('ready', true);
-    assert.dom('#test-destination-element').containsText('Some text', 'The content has been rendered in the destination element');
+    assert.dom('#test-destination-element').hasText('Some text', 'The content has been rendered in the destination element');
+  });
+
+  test('renders into destination element by appending', async function(assert) {
+    await render(hbs`
+        <div id="test-destination-element">Dummy</div>
+        {{#if ready}}
+          {{#in-element destinationElement insertBefore=null}}Some text{{/in-element}}
+        {{/if}}
+      `);
+    this.set('destinationElement', document.querySelector('#test-destination-element'));
+    this.set('ready', true);
+    assert.dom('#test-destination-element').hasText('DummySome text', 'The content has been rendered in the destination element');
   });
 });