refactor(directives): remove v-text directive does not improve perfor…

…mance

valyrian.js is faster enough so the v-text directive was decreasing performance instead of make it
better

.size-snapshot.json

@@ -1,7 +1,7 @@
 {
   "dist/valyrian.min.js": {
-    "bundled": 13173,
-    "minified": 5218,
-    "gzipped": 2097
+    "bundled": 12928,
+    "minified": 5080,
+    "gzipped": 2064
   }
 }

lib/index.js

@@ -8,7 +8,6 @@ function valyrian() {
   let onbeforeupdate = 'onbeforeupdate';
   let functionstr = 'function';
   let once = 'v-once';
-  let skip = 'v-skip';
   let isArray = Array.isArray;
   let mainNode;
   let oldMainNode;
@@ -100,8 +99,7 @@ function valyrian() {
     [onbeforeupdate]: true,
     [onupdate]: true,
     [onremove]: true,
-    data: true,
-    [skip]: true
+    data: true
   };
 
   let attachedListeners = {};
@@ -232,9 +230,6 @@ function valyrian() {
 
   // eslint-disable-next-line complexity,sonarjs/cognitive-complexity
   function patch(parentNode, oldParentNode) {
-    if (parentNode.props[skip]) {
-      return;
-    }
 
     let newTree = isArray(parentNode.children) ? parentNode.children : [parentNode.children];
     let oldTree = oldParentNode.children;
@@ -250,8 +245,7 @@ function valyrian() {
       } else if (childVnode instanceof Vnode) {
         if (typeof childVnode.name !== 'string') {
           v.current.component = childVnode;
-          let viewMethod = childVnode.name.view || childVnode.name;
-          newTree.splice(i--, 1, ...[viewMethod.call(childVnode.name, childVnode.props, ...childVnode.children)]);
+          newTree.splice(i--, 1, ...[(childVnode.name.view || childVnode.name).call(childVnode.name, childVnode.props, ...childVnode.children)]);
         } else {
           childVnode.isSVG = parentNode.isSVG || childVnode.name === 'svg';
         }
@@ -410,7 +404,6 @@ function valyrian() {
   };
 
   v.directive = (directive, handler) => !v.reservedWords[directive] && (v.reservedWords[directive] = handler);
-  v.directive('v-for', (set, vnode) => vnode.children = set.map(vnode.children[0]));
 
   let hideDirective = (test) => (bool, vnode, oldnode) => {
     let value = test ? bool : !bool;
@@ -429,20 +422,14 @@ function valyrian() {
 
   v.directive('v-if', hideDirective(false));
   v.directive('v-unless', hideDirective(true));
+  v.directive('v-for', (set, vnode) => vnode.children = set.map(vnode.children[0]));
   v.directive('v-show', (bool, vnode) => vnode.dom.style.display = bool ? '' : 'none');
   v.directive('v-class', (classes, vnode) => {
     for (let name in classes) {
       vnode.dom.classList.toggle(name, classes[name]);
     }
   });
-  v.directive('v-html', (html, vnode) => {
-    vnode.dom.innerHTML = html;
-    vnode.props[skip] = true;
-  });
-  v.directive('v-text', (text, vnode) => {
-    vnode.dom.textContent = text;
-    vnode.props[skip] = true;
-  });
+  v.directive('v-html', (html, vnode) => vnode.children = v.trust(html));
 
   return v;
 }

test/directives_test.js

@@ -397,30 +397,6 @@ describe('Directives', () => {
     });
   });
 
-  /**
-   * The v-skip directive is used to prevent the patch of children vnodes but allow the patch of dom attributes
-   * Its main use will be along with other custom directives to prevent the children patch step
-   */
-  describe('v-skip', () => {
-    it('should prevent child patching step', () => {
-      let Store = {
-        id: 'example',
-        children: 'Hello world'
-      };
-
-      let Component = () => <div v-skip id={Store.id}>{Store.children}</div>;
-      let result = v.mount('body', Component);
-      expect(result).toEqual('<div id="example"></div>');
-
-      Store.id = 'example-updated';
-      Store.children = 'Hello John Doe';
-
-      let result2 = v.update();
-
-      expect(result2).toEqual('<div id="example-updated"></div>');
-    });
-  });
-
   /**
    * The v-html directive is used to direct raw html render to increase performance
    * We can use this directive to replace the v.trust use like in this test
@@ -444,16 +420,5 @@ describe('Directives', () => {
     });
   });
 
-  /**
-   * The v-text is used to update the textContent of the element to increase performance
-   */
-  describe('v-text', () => {
-    it('should handle direct text render', () => {
-      let Component = () => <div v-text="Hello world"></div>;
-      let result = v.mount('body', Component);
-      expect(result).toEqual('<div>Hello world</div>');
-    });
-  });
-
 });