diff --git a/README.md b/README.md index c87a119..3ea5a22 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Compile vue files to twig templates with PHP |Directive|Implemented| |---------|:---------:| |v-text|| -|v-html|| +|v-html|:white_check_mark:| |v-show|:white_check_mark:| |v-if|:white_check_mark:| |v-else|:white_check_mark:| @@ -17,8 +17,8 @@ Compile vue files to twig templates with PHP |v-for|:white_check_mark:| |v-on|:white_check_mark:| |v-bind|partially working| -|v-bind:style|partially working| -|v-bind:class|partially working| +|v-bind:style|:white_check_mark:| +|v-bind:class|:white_check_mark:| |v-model|| |v-pre|| |v-cloak|| diff --git a/src/Compiler.php b/src/Compiler.php index 6b8c33d..3d589dc 100644 --- a/src/Compiler.php +++ b/src/Compiler.php @@ -149,9 +149,11 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode $this->replaceShowWithIf($node); $this->handleIf($node); $this->handleFor($node); + $this->handleHtml($node); $this->stripEventHandlers($node); //$this->handleRawHtml($node, $data); $this->handleDefaultSlot($node); + $this->cleanupAttributes($node); } /* @@ -408,6 +410,15 @@ protected function handleTextNode(DOMText $node) return $node; } + private function cleanupAttributes(DOMElement $node) { + if ($node->hasAttribute('ref')) { + $node->removeAttribute('ref'); + } + if ($node->hasAttribute(':ref')) { + $node->removeAttribute(':ref'); + } + } + private function handleIf(DOMElement $node): void { if (!$node->hasAttribute('v-if') && @@ -521,6 +532,21 @@ private function handleFor(DOMElement $node) $node->removeAttribute('v-for'); } + private function handleHtml(DOMElement $node) + { + if (!$node->hasAttribute('v-html')) { + return; + } + + $html = $node->getAttribute('v-html'); + $node->removeAttribute('v-html'); + while ($node->hasChildNodes()) { + $node->removeChild($node->firstChild); + } + $node->appendChild(new DOMText('{{ ' . $html . '|raw }}')); + } + + protected function addDefaultsToVariable($varName, $string): string { if (!in_array($varName, array_keys($this->properties))) { diff --git a/tests/CleanupAttributesTest.php b/tests/CleanupAttributesTest.php new file mode 100644 index 0000000..6165daa --- /dev/null +++ b/tests/CleanupAttributesTest.php @@ -0,0 +1,19 @@ +
dummy
'; + + $expected = '
dummy
'; + + $compiler = $this->createCompiler($vueTemplate); + + $actual = $compiler->convert(); + + $this->assertEqualHtml($expected, $actual); + } +} diff --git a/tests/VueHtmlTest.php b/tests/VueHtmlTest.php new file mode 100644 index 0000000..d905896 --- /dev/null +++ b/tests/VueHtmlTest.php @@ -0,0 +1,23 @@ +createCompiler($component); + + $actual = $compiler->convert(); + + $this->assertEqualHtml($expected, $actual); + } +} diff --git a/tests/fixtures/vue-html/html.twig b/tests/fixtures/vue-html/html.twig new file mode 100644 index 0000000..56b6f9b --- /dev/null +++ b/tests/fixtures/vue-html/html.twig @@ -0,0 +1,6 @@ +{% set rawHtml = 'text' %} +
+ + {{ rawHtml|raw }} + +
diff --git a/tests/fixtures/vue-html/html.vue b/tests/fixtures/vue-html/html.vue new file mode 100644 index 0000000..b6be55d --- /dev/null +++ b/tests/fixtures/vue-html/html.vue @@ -0,0 +1,19 @@ + + + + {% set rawHtml = '<strong>text</strong>' %} + + +