Merge pull request #4 from ara-framework/fix/mount-ignoring-comments

fix: mount ignoring comments

Author: marconi1992

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hypernova-vue",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.2",
   "description": "Vue bindings for Hypernova",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/__test__/index.spec.ts

@@ -56,6 +56,23 @@ describe('mountComponent', () => {
 
     expect(node.innerHTML).toEqual('<h1>Ara Framework</h1>');
   });
+
+  test('should mount component correctly ignoring html comments', () => {
+    document.body.innerHTML = '<div id="app"><!-- Comment --><div>';
+
+    const app = Vue.extend({
+      props: ['title'],
+      render(h): VNode {
+        return h('h1', {}, this.title);
+      },
+    });
+
+    const node = document.getElementById('app');
+
+    mountComponent(app, node, { title: 'Ara Framework' });
+
+    expect(node.innerHTML).toEqual('<!-- Comment --><h1>Ara Framework</h1>');
+  });
 });
 
 describe('renderInPlaceholder', () => {

src/index.ts

@@ -26,7 +26,7 @@ export const mountComponent = (
     propsData: data,
   });
 
-  if (!node.firstChild) {
+  if (!node.childElementCount) {
     node.appendChild(document.createElement('div'));
   }