Merge pull request #69 from tronsha/feature/remove-attribute-if-condition-false

Add twig config block for attributes with if

Author: tronsha

src/Compiler.php

@@ -108,9 +108,7 @@ class Compiler
     /**
      * @var string[]
      */
-    protected $ifAttributes = ['checked', 'selected', 'disabled'];
-
-
+    protected $attributesWithIf = ['checked', 'selected', 'disabled'];
 
     /**
      * Compiler constructor.
@@ -161,6 +159,15 @@ public function convert(): string
 
         $twigBlocks = $this->document->getElementsByTagName('twig');
 
+        $twigConfigBlocks = $this->document->getElementsByTagName('twig-config');
+
+        if ($twigConfigBlocks->length) {
+            foreach ($twigConfigBlocks as $twigConfigBlock) {
+                /* @var DOMText $twigConfigBlock */
+                $this->handleTwigConfig(trim($twigConfigBlock->textContent));
+            }
+        }
+
         if ($scriptElement) {
             $this->registerProperties($scriptElement);
             $this->insertDefaultValues();
@@ -219,6 +226,16 @@ public function convert(): string
         return $html;
     }
 
+    private function handleTwigConfig(string $twigConfig): void
+    {
+        $config = parse_ini_string($twigConfig);
+        if ($config['attributes-with-if'] ?? false) {
+            $attributes = explode(',', $config['attributes-with-if']);
+            $attributes = array_map(function ($item) { return trim($item); }, $attributes);
+            $this->attributesWithIf = array_merge($this->attributesWithIf, $attributes);
+        }
+    }
+
     /**
      * @throws Exception
      */
@@ -528,7 +545,7 @@ private function handleAttributeBinding(DOMElement $node): void
 
             $dynamicValues = $this->handleBinding($value, $name, $node);
 
-            $addIfAroundAttribute = in_array($name, $this->ifAttributes);
+            $addIfAroundAttribute = in_array($name, $this->attributesWithIf);
 
             /* @see https://gitlab.gnome.org/GNOME/libxml2/-/blob/LIBXML2.6.32/HTMLtree.c#L657 */
             switch ($name) {
@@ -1299,8 +1316,8 @@ private function replaceAttributeWithIfConditionPlaceholders(string $html): stri
         if (preg_match_all($pattern, $html, $matches, PREG_SET_ORDER)) {
             foreach ($matches as $match) {
                 $name = $match[1];
-                $value = base64_decode($match[2]);
-                $condition = trim(str_replace(['__DOUBLE_CURLY_OPEN__', '__DOUBLE_CURLY_CLOSE__'], '', $value));
+                $value = $this->replacePlaceholders(base64_decode($match[2]));
+                $condition = trim(str_replace(['{{', '}}'], '', $value));
                 if (in_array($name, ['checked', 'selected', 'disabled'])) {
                     $value = $name;
                 }

tests/TwigConfigTest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+use Exception;
+
+class TwigConfigTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider ifProvider
+     *
+     * @param mixed $html
+     * @param mixed $expected
+     *
+     * @throws Exception
+     */
+    public function testTwigConfig($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function ifProvider()
+    {
+        return $this->loadFixturesFromDir('twig-config');
+    }
+}

tests/fixtures/twig-config/attribute-if-2.twig

@@ -0,0 +1,9 @@
+{% set count = count|default(0) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div {% if count > 5 %}foo="{{ count > 5 }}"{% endif %}>
+        Foo
+    </div>
+    <div {% if count > 5 %}bar="{{ count > 5 }}"{% endif %}>
+        Bar
+    </div>
+</div>

tests/fixtures/twig-config/attribute-if-2.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <div :foo="count > 5">
+            Foo
+        </div>
+        <div :bar="count > 5">
+            Bar
+        </div>
+    </div>
+</template>
+
+<twig-config>
+    attributes-with-if = foo,bar
+</twig-config>
+
+<script>
+    export default {
+        props: {
+            count: {
+                type: Number,
+                default: 0,
+            },
+        },
+    };
+</script>

tests/fixtures/twig-config/attribute-if.twig

@@ -0,0 +1,9 @@
+{% set count = count|default(0) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div {% if count > 5 %}foo="{{ count > 5 }}"{% endif %}>
+        Foo
+    </div>
+    <div bar="{{ count > 5 }}">
+        Bar
+    </div>
+</div>

tests/fixtures/twig-config/attribute-if.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <div :foo="count > 5">
+            Foo
+        </div>
+        <div :bar="count > 5">
+            Bar
+        </div>
+    </div>
+</template>
+
+<twig-config>
+    attributes-with-if = foo
+</twig-config>
+
+<script>
+    export default {
+        props: {
+            count: {
+                type: Number,
+                default: 0,
+            },
+        },
+    };
+</script>