feat: add support for html comments

movahhedi · Feb 9, 2022 · b0f915a · b0f915a
1 parent 1eaae0a
commit b0f915a
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 13 deletions.
diff --git a/doc/reference.md b/doc/reference.md
@@ -60,6 +60,7 @@ First, let us talk about the various vnode types:
 | `text`    | a simple vnode representing a text node                                                |
 | `toggler` | a container node that allows switching dynamically between different type of subnodes  |
 | `html`    | represent an arbitrary html content                                                    |
+| `comment` | represent a html comment                                                               |
 
 ### Blocks
 
@@ -224,6 +225,16 @@ This should be avoided most of the time. However, it happens that we need to
 display some (hopefully safe/sanitized) html coming from the database. In that
 case, the `html` vnode type is here to perform the job.
 
+### comment
+
+One can insert a comment with the `comment` block type:
+
+```js
+// represents 3 text nodes: blackyellowred
+const tree = comment("some text");
+// will be rendered as: "<!--some text-->"
+```
+
 ## Configuration
 
 Here is a list of every configuration options in `blockdom`:

diff --git a/src/index.ts b/src/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> {

diff --git a/src/text.ts b/src/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":

diff --git a/tests/comment.test.ts b/tests/comment.test.ts
@@ -0,0 +1,26 @@
+import { comment, mount } from "../src";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+test("simple comment node", async () => {
+  const tree = comment("foo");
+  expect(tree.el).toBe(undefined);
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<!--foo-->");
+  expect(tree.el).not.toBe(undefined);
+  tree.remove();
+  expect(fixture.innerHTML).toBe("");
+});