Fix emberjs/ember.js#14978

Likely related: emberjs/ember.js#14924 emberjs/ember.js#16172 emberjs/ember.js#16314 Closes #791 Co-authored-by: Michael Peirce <msp700@gmail.com>
glimmerjs · Sep 24, 2018 · 08c56fa · 08c56fa
1 parent bce0558
commit 08c56fa
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/packages/@glimmer/runtime/lib/dom/helper.ts b/packages/@glimmer/runtime/lib/dom/helper.ts
@@ -210,22 +210,15 @@ export function insertHTMLBefore(
   useless: HTMLElement,
   _parent: Simple.Element,
   _nextSibling: Option<Simple.Node>,
-  html: string
+  _html: string
 ): Bounds {
-  // tslint:disable-line
-  // TypeScript vendored an old version of the DOM spec where `insertAdjacentHTML`
-  // only exists on `HTMLElement` but not on `Element`. We actually work with the
-  // newer version of the DOM API here (and monkey-patch this method in `./compat`
-  // when we detect older browsers). This is a hack to work around this limitation.
-  let parent = _parent as HTMLElement;
-  let nextSibling = _nextSibling as Node;
+  let parent = _parent as Element;
+  let nextSibling = _nextSibling as Option<Node>;
 
   let prev = nextSibling ? nextSibling.previousSibling : parent.lastChild;
   let last: Simple.Node | null;
 
-  if (html === null || html === '') {
-    return new ConcreteBounds(parent, null, null);
-  }
+  let html = _html || '<!---->';
 
   if (nextSibling === null) {
     parent.insertAdjacentHTML('beforeend', html);

diff --git a/packages/@glimmer/runtime/lib/vm/element-builder.ts b/packages/@glimmer/runtime/lib/vm/element-builder.ts
@@ -482,7 +482,7 @@ export class SimpleBlockTracker implements Tracker {
   }
 
   finalize(stack: ElementBuilder) {
-    if (!this.first) {
+    if (this.first === null) {
       stack.appendComment('');
     }
   }

diff --git a/packages/@glimmer/runtime/test/updating-test.ts b/packages/@glimmer/runtime/test/updating-test.ts
@@ -720,61 +720,66 @@ module('[glimmer-runtime] Updating', hooks => {
     },
     {
       name: 'triple curlies',
-      template: '<div>{{{value}}}</div>',
+      template: '<div>before {{{value}}} after</div>',
       values: [
         {
           input: 'hello',
-          expected: '<div>hello</div>',
+          expected: '<div>before hello after</div>',
           description: 'plain string',
         },
         {
           input: '<b>hello</b>',
-          expected: '<div><b>hello</b></div>',
+          expected: '<div>before <b>hello</b> after</div>',
           description: 'string containing HTML',
         },
         {
           input: null,
-          expected: '<div></div>',
+          expected: '<div>before <!---> after</div>',
           description: 'null literal',
         },
         {
           input: undefined,
-          expected: '<div></div>',
+          expected: '<div>before <!---> after</div>',
           description: 'undefined literal',
         },
+        {
+          input: ' ',
+          expected: '<div>before   after</div>',
+          description: 'blank string',
+        },
         {
           input: makeSafeString('<b>hello</b>'),
-          expected: '<div><b>hello</b></div>',
+          expected: '<div>before <b>hello</b> after</div>',
           description: 'safe string containing HTML',
         },
         {
           input: makeElement('p', 'hello'),
-          expected: '<div><p>hello</p></div>',
+          expected: '<div>before <p>hello</p> after</div>',
           description: 'DOM node containing and element with text',
         },
         {
           input: makeFragment([makeElement('p', 'one'), makeElement('p', 'two')]),
-          expected: '<div><p>one</p><p>two</p></div>',
+          expected: '<div>before <p>one</p><p>two</p> after</div>',
           description: 'DOM fragment containing multiple nodes',
         },
         {
           input: 'not modified',
-          expected: '<div>not modified</div>',
+          expected: '<div>before not modified after</div>',
           description: 'plain string (not modified, first render)',
         },
         {
           input: 'not modified',
-          expected: '<div>not modified</div>',
+          expected: '<div>before not modified after</div>',
           description: 'plain string (not modified, second render)',
         },
         {
           input: 0,
-          expected: '<div>0</div>',
+          expected: '<div>before 0 after</div>',
           description: 'number literal (0)',
         },
         {
           input: true,
-          expected: '<div>true</div>',
+          expected: '<div>before true after</div>',
           description: 'boolean literal (true)',
         },
         {
@@ -783,9 +788,14 @@ module('[glimmer-runtime] Updating', hooks => {
               return 'I am an Object';
             },
           },
-          expected: '<div>I am an Object</div>',
+          expected: '<div>before I am an Object after</div>',
           description: 'object with a toString function',
         },
+        {
+          input: 'hello',
+          expected: '<div>before hello after</div>',
+          description: 'reset',
+        },
       ],
     },
   ].forEach(config => {
@@ -869,11 +879,11 @@ module('[glimmer-runtime] Updating', hooks => {
 
     render(template, input);
 
-    equalTokens(root, '<div></div>', 'Initial render');
+    equalTokens(root, '<div><!----></div>', 'Initial render');
 
     rerender();
 
-    equalTokens(root, '<div></div>', 'no change');
+    equalTokens(root, '<div><!----></div>', 'no change');
 
     input.value = '<b>Bold and spicy</b>';
     rerender();
@@ -883,7 +893,7 @@ module('[glimmer-runtime] Updating', hooks => {
     input.value = '';
     rerender();
 
-    equalTokens(root, '<div></div>', 'back to empty string');
+    equalTokens(root, '<div><!----></div>', 'back to empty string');
   });
 
   class ValueReference<T> extends ConstReference<T> {