Add `x-if` directive

dist/alpine.js

@@ -982,6 +982,14 @@ function () {
 
             break;
 
+          case 'if':
+            var _this2$evaluateReturn5 = _this2.evaluateReturnExpression(expression),
+                output = _this2$evaluateReturn5.output;
+
+            _this2.updatePresence(el, output);
+
+            break;
+
           case 'cloak':
             el.removeAttribute('x-cloak');
             break;
@@ -1090,6 +1098,19 @@ function () {
 
               break;
 
+            case 'if':
+              var _self$evaluateReturnE5 = self.evaluateReturnExpression(expression),
+                  output = _self$evaluateReturnE5.output,
+                  deps = _self$evaluateReturnE5.deps;
+
+              if (self.concernedData.filter(function (i) {
+                return deps.includes(i);
+              }).length > 0) {
+                self.updatePresence(el, output);
+              }
+
+              break;
+
             default:
               break;
           }
@@ -1227,6 +1248,20 @@ function () {
         }
       }
     }
+  }, {
+    key: "updatePresence",
+    value: function updatePresence(el, expressionResult) {
+      if (el.nodeName.toLowerCase() !== 'template') console.warn("Alpine: [x-if] directive should only be added to <template> tags.");
+      var elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true;
+
+      if (expressionResult && !elementHasAlreadyBeenAdded) {
+        var clone = document.importNode(el.content, true);
+        el.parentElement.insertBefore(clone, el.nextElementSibling);
+        el.nextElementSibling.__x_inserted_me = true;
+      } else if (!expressionResult && elementHasAlreadyBeenAdded) {
+        el.nextElementSibling.remove();
+      }
+    }
   }, {
     key: "updateAttributeValue",
     value: function updateAttributeValue(el, attrName, value) {
@@ -1505,12 +1540,12 @@ function saferEvalNoReturn(expression, dataContext) {
   return new Function(['$data'].concat(_toConsumableArray(Object.keys(additionalHelperVariables))), "with($data) { ".concat(expression, " }")).apply(void 0, [dataContext].concat(_toConsumableArray(Object.values(additionalHelperVariables))));
 }
 function isXAttr(attr) {
-  var xAttrRE = /x-(on|bind|data|text|model|show|cloak|ref)/;
+  var xAttrRE = /x-(on|bind|data|text|model|if|show|cloak|ref)/;
   return xAttrRE.test(attr.name);
 }
 function getXAttrs(el, type) {
   return Array.from(el.attributes).filter(isXAttr).map(function (attr) {
-    var typeMatch = attr.name.match(/x-(on|bind|data|text|model|show|cloak|ref)/);
+    var typeMatch = attr.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/);
     var valueMatch = attr.name.match(/:([a-zA-Z\-]+)/);
     var modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
     return {

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/alpine.min.js": "/alpine.min.js?id=7adbda4e32b0fe66797a",
-    "/alpine.js": "/alpine.js?id=6aaefe3b77e1795daab9"
+    "/alpine.min.js": "/alpine.min.js?id=72e352caf8d480b65f28",
+    "/alpine.js": "/alpine.js?id=ccedd9639efb0707dde5"
 }

src/component.js

@@ -91,6 +91,11 @@ export default class Component {
                     this.updateVisibility(el, output)
                     break;
 
+                case 'if':
+                    var { output } = this.evaluateReturnExpression(expression)
+                    this.updatePresence(el, output)
+                    break;
+
                 case 'cloak':
                     el.removeAttribute('x-cloak')
                     break;
@@ -173,6 +178,14 @@ export default class Component {
                         }
                         break;
 
+                    case 'if':
+                        var { output, deps } = self.evaluateReturnExpression(expression)
+
+                        if (self.concernedData.filter(i => deps.includes(i)).length > 0) {
+                            self.updatePresence(el, output)
+                        }
+                        break;
+
                     default:
                         break;
                 }
@@ -307,6 +320,22 @@ export default class Component {
         }
     }
 
+    updatePresence(el, expressionResult) {
+        if (el.nodeName.toLowerCase() !== 'template') console.warn(`Alpine: [x-if] directive should only be added to <template> tags.`)
+
+        const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true
+
+        if (expressionResult && ! elementHasAlreadyBeenAdded) {
+            const clone = document.importNode(el.content, true);
+
+            el.parentElement.insertBefore(clone, el.nextElementSibling)
+
+            el.nextElementSibling.__x_inserted_me = true
+        } else if (! expressionResult && elementHasAlreadyBeenAdded) {
+            el.nextElementSibling.remove()
+        }
+    }
+
     updateAttributeValue(el, attrName, value) {
         if (attrName === 'value') {
             if (el.type === 'radio') {

src/utils.js

@@ -62,7 +62,7 @@ export function saferEvalNoReturn(expression, dataContext, additionalHelperVaria
 }
 
 export function isXAttr(attr) {
-    const xAttrRE = /x-(on|bind|data|text|model|show|cloak|ref)/
+    const xAttrRE = /x-(on|bind|data|text|model|if|show|cloak|ref)/
 
     return xAttrRE.test(attr.name)
 }
@@ -71,7 +71,7 @@ export function getXAttrs(el, type) {
     return Array.from(el.attributes)
         .filter(isXAttr)
         .map(attr => {
-            const typeMatch = attr.name.match(/x-(on|bind|data|text|model|show|cloak|ref)/)
+            const typeMatch = attr.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/)
             const valueMatch = attr.name.match(/:([a-zA-Z\-]+)/)
             const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []