[IMP] add support for top level comments

src/app/template_set.ts

@@ -1,9 +1,9 @@
-import { createBlock, html, list, multi, text, toggler } from "../blockdom";
+import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
 import { compile, Template } from "../compiler";
 import { component } from "../component/component_node";
 import { UTILS } from "./template_helpers";
 
-const bdom = { text, createBlock, list, multi, html, toggler, component };
+const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
 
 export const globalTemplates: { [key: string]: string | Node } = {};
 

src/blockdom/index.ts

@@ -4,7 +4,7 @@ export { toggler } from "./toggler";
 export { createBlock } from "./block_compiler";
 export { list } from "./list";
 export { multi } from "./multi";
-export { text } from "./text";
+export { text, comment } from "./text";
 export { html } from "./html";
 
 export interface VNode<T = any> {

src/blockdom/text.ts

@@ -8,18 +8,17 @@ const nodeInsertBefore = nodeProto.insertBefore;
 const characterDataSetData = getDescriptor(characterDataProto, "data").set!;
 const nodeRemoveChild = nodeProto.removeChild;
 
-class VText {
+abstract class VSimpleNode {
   text: string;
   parentEl?: HTMLElement | undefined;
-  el?: Text;
+  el?: any;
 
   constructor(text: string) {
     this.text = text;
   }
 
-  mount(parent: HTMLElement, afterNode: Node | null) {
+  mountNode(node: Node, parent: HTMLElement, afterNode: Node | null) {
     this.parentEl = parent;
-    const node = document.createTextNode(toText(this.text));
     nodeInsertBefore.call(parent, node, afterNode);
     this.el = node;
   }
@@ -29,14 +28,6 @@ class VText {
     nodeInsertBefore.call(this.parentEl, this.el!, target);
   }
 
-  patch(other: VText) {
-    const text2 = other.text;
-    if (this.text !== text2) {
-      characterDataSetData.call(this.el!, toText(text2));
-      this.text = text2;
-    }
-  }
-
   beforeRemove() {}
 
   remove() {
@@ -52,10 +43,36 @@ class VText {
   }
 }
 
+class VText extends VSimpleNode {
+  mount(parent: HTMLElement, afterNode: Node | null) {
+    this.mountNode(document.createTextNode(toText(this.text)), parent, afterNode);
+  }
+
+  patch(other: VText) {
+    const text2 = other.text;
+    if (this.text !== text2) {
+      characterDataSetData.call(this.el!, toText(text2));
+      this.text = text2;
+    }
+  }
+}
+
+class VComment extends VSimpleNode {
+  mount(parent: HTMLElement, afterNode: Node | null) {
+    this.mountNode(document.createComment(toText(this.text)), parent, afterNode);
+  }
+
+  patch() {}
+}
+
 export function text(str: string): VNode<VText> {
   return new VText(str);
 }
 
+export function comment(str: string): VNode<VComment> {
+  return new VComment(str);
+}
+
 export function toText(value: any): string {
   switch (typeof value) {
     case "string":

src/compiler/code_generator.ts

@@ -21,7 +21,7 @@ import {
   ASTType,
 } from "./parser";
 
-type BlockType = "block" | "text" | "multi" | "list" | "html";
+type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
 
 export interface Config {
   translateFn?: (s: string) => string;
@@ -227,7 +227,7 @@ export class CodeGenerator {
 
     // define blocks and utility functions
     let mainCode = [
-      `  let { text, createBlock, list, multi, html, toggler, component } = bdom;`,
+      `  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
       `let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;`,
     ];
     if (this.templateName) {
@@ -443,13 +443,14 @@ export class CodeGenerator {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     if (isNewBlock) {
-      block = this.createBlock(block, "block", ctx);
-      this.blocks.push(block);
-    }
-    const text = xmlDoc.createComment(ast.value);
-    block!.insert(text);
-    if (isNewBlock) {
-      this.insertBlock("", block!, ctx);
+      block = this.createBlock(block, "comment", ctx);
+      this.insertBlock(`comment(\`${ast.value}\`)`, block, {
+        ...ctx,
+        forceNewBlock: forceNewBlock && !block,
+      });
+    } else {
+      const text = xmlDoc.createComment(ast.value);
+      block!.insert(text);
     }
   }
 

src/index.ts

@@ -9,6 +9,7 @@ import {
   remove,
   text,
   toggler,
+  comment,
 } from "./blockdom";
 import { mainEventHandler } from "./component/handler";
 
@@ -28,6 +29,7 @@ export const blockDom = {
   toggler,
   createBlock,
   html,
+  comment,
 };
 
 import type { AppConfig } from "./app/app";