Prevent exporting textnodes with `null`. Closes #5229

src/dom_components/model/Component.ts

@@ -170,6 +170,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return this.get('traits')!;
   }
 
+  get content() {
+    return this.get('content') ?? '';
+  }
+
   /**
    * Hook method, called once the model is created
    */
@@ -1587,7 +1591,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
 
   __innerHTML(opts: ToHTMLOptions = {}) {
     const cmps = this.components();
-    return !cmps.length ? this.get('content') : cmps.map(c => c.toHTML(opts)).join('');
+    return !cmps.length ? this.content : cmps.map(c => c.toHTML(opts)).join('');
   }
 
   /**

src/dom_components/model/ComponentComment.ts

@@ -7,7 +7,7 @@ export default class ComponentComment extends ComponentTextNode {
   }
 
   toHTML() {
-    return `<!--${this.get('content')}-->`;
+    return `<!--${this.content}-->`;
   }
 
   static isComponent(el: HTMLElement) {
@@ -15,18 +15,8 @@ export default class ComponentComment extends ComponentTextNode {
       return {
         tagName: 'NULL',
         type: 'comment',
-        content: el.textContent,
+        content: el.textContent ?? '',
       };
     }
   }
 }
-
-// ComponentComment.isComponent = el => {
-//   if (el.nodeType == 8) {
-//     return {
-//       tagName: 'NULL',
-//       type: 'comment',
-//       content: el.textContent,
-//     };
-//   }
-// };

src/dom_components/model/ComponentTextNode.ts

@@ -15,8 +15,8 @@ export default class ComponentTextNode extends Component {
   }
 
   toHTML() {
+    const { content } = this;
     const parent = this.parent();
-    const content = this.get('content')!;
     return parent?.is('script') ? content : this.__escapeContent(content);
   }
 
@@ -28,7 +28,7 @@ export default class ComponentTextNode extends Component {
     if (el.nodeType === 3) {
       return {
         type: 'textnode',
-        content: el.textContent,
+        content: el.textContent ?? '',
       };
     }
   }

src/dom_components/view/ComponentCommentView.ts

@@ -2,6 +2,6 @@ import ComponentTextNodeView from './ComponentTextNodeView';
 
 export default class ComponentCommentView extends ComponentTextNodeView {
   _createElement() {
-    return document.createComment(this.model.get('content')!) as Text;
+    return document.createComment(this.model.content) as Text;
   }
 }

src/dom_components/view/ComponentTextNodeView.ts

@@ -21,7 +21,7 @@ export default class ComponentTextNodeView extends ComponentView {
   render() {
     const { model, el } = this;
     if (model.opt.temporary) return this;
-    el.textContent = model.get('content')!;
+    el.textContent = model.content;
     return this;
   }
 }

src/dom_components/view/ComponentTextView.ts

@@ -187,7 +187,7 @@ export default class ComponentTextView extends ComponentView {
         cmps.forEach(cmp => {
           if (cmp === textModel) {
             const type = 'textnode';
-            const cnt = cmp.get('content') || '';
+            const cnt = cmp.content;
             newCmps.push({ type, content: cnt.slice(0, offset) });
             newCmps.push(content);
             newCmps.push({ type, content: cnt.slice(offset) });

src/dom_components/view/ComponentView.ts

@@ -355,7 +355,7 @@ Component> {
    * @private
    * */
   updateContent() {
-    const content = this.model.get('content')!;
+    const { content } = this.model;
     const hasComps = this.model.components().length;
     this.getChildrenContainer().innerHTML = hasComps ? '' : content;
   }