add m-html support

kbrsh · Mar 2, 2017 · 4c78c11 · 4c78c11
1 parent 9e4944e
commit 4c78c11
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 1 deletion.
diff --git a/dist/moon.js b/dist/moon.js
@@ -503,6 +503,11 @@
           addEventListeners(node, vnode, instance);
         }
 
+        // Check if innerHTML was changed, don't diff children if so
+        if (vnode.props.dom && vnode.props.dom.innerHTML) {
+          return node;
+        }
+
         // Diff Children
         var currentChildNode = node.firstChild;
         // Optimization:
@@ -1495,6 +1500,15 @@
       }
     };
 
+    specialDirectives[Moon.config.prefix + "html"] = {
+      beforeGenerate: function (value, vnode) {
+        if (!vnode.props.dom) {
+          vnode.props.dom = {};
+        }
+        vnode.props.dom.innerHTML = '"' + compileTemplate(value, true) + '"';
+      }
+    };
+
     specialDirectives[Moon.config.prefix + "text"] = {
       beforeGenerate: function (value, vnode) {
         vnode.children = [value];

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/directives/default.js b/src/directives/default.js
@@ -111,6 +111,15 @@ specialDirectives[Moon.config.prefix + "pre"] = {
   }
 }
 
+specialDirectives[Moon.config.prefix + "html"] = {
+  beforeGenerate: function(value, vnode) {
+    if(!vnode.props.dom) {
+      vnode.props.dom = {};
+    }
+    vnode.props.dom.innerHTML = `"${compileTemplate(value, true)}"`;
+  }
+}
+
 specialDirectives[Moon.config.prefix + "text"] = {
   beforeGenerate: function(value, vnode) {
     vnode.children = [value];

diff --git a/src/util/util.js b/src/util/util.js
@@ -441,6 +441,11 @@ var diff = function(node, vnode, parent, instance) {
       addEventListeners(node, vnode, instance);
     }
 
+    // Check if innerHTML was changed, don't diff children if so
+    if(vnode.props.dom && vnode.props.dom.innerHTML) {
+      return node;
+    }
+
     // Diff Children
     var currentChildNode = node.firstChild;
     // Optimization:

diff --git a/test/js/test.js b/test/js/test.js
@@ -467,6 +467,22 @@ describe("Directive", function() {
     });
   });
 
+  describe('HTML Directive', function() {
+    createTestElement("html", '<span m-html="{{html}}" id="html-directive-span"></span>');
+    var htmlApp = new Moon({
+      el: "#html",
+      data: {
+        html: "<strong>Hello Moon!</strong>"
+      }
+    });
+    it('should fill DOM with a value', function() {
+      expect(document.getElementById("html-directive-span").innerHTML).to.equal("<strong>Hello Moon!</strong>");
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('html-directive-span').getAttribute("m-html")).to.be['null'];
+    });
+  });
+
   describe('Text Directive', function() {
     createTestElement("text", '<span m-text="{{msg}}" id="text-directive-span"></span>');
     var textApp = new Moon({