Add data support

Author: tronsha

src/Compiler.php

@@ -171,6 +171,7 @@ public function convert(): string
         if ($scriptElement) {
             $this->registerProperties($scriptElement);
             $this->insertDefaultValues();
+            $this->registerData($scriptElement);
         }
 
         if ($twigBlocks->length) {
@@ -467,6 +468,15 @@ public function registerProperties(DOMElement $scriptElement): void
         }
     }
 
+    public function registerData(DOMElement $scriptElement): void
+    {
+        if ($scriptElement->hasAttribute('lang') && $scriptElement->getAttribute('lang') === 'ts') {
+            // TypeScript
+        } else {
+            // JavaScript
+        }
+    }
+
     /**
      * @throws Exception
      */

tests/DataTest.php

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

tests/fixtures/data/data-typescript.twig

@@ -0,0 +1,2 @@
+{% set bar = bar|default('baz') %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}"> Hello World! </div>

tests/fixtures/data/data-typescript.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        Hello World!
+    </div>
+</template>
+
+<script lang="ts">
+    import { Vue, Component, Prop } from 'vue-property-decorator';
+
+    @Component()
+    export default class Foo extends Vue {
+
+        @Prop({ type: String, default: 'baz' }) readonly bar!: string;
+
+        private myNumber = 1;
+
+        private myString = 'foo';
+
+        private myArray: ['a', 'b', 'c'];
+
+        private myObject: { a: 'x', b: 'y', c: 'z' };
+    };
+</script>

tests/fixtures/data/data.twig

@@ -0,0 +1,2 @@
+{% set bar = bar|default('baz') %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}"> Hello World! </div>

tests/fixtures/data/data.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        Hello World!
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Foo',
+        props: {
+            bar: {
+                type: String,
+                default: 'baz',
+            },
+        },
+        data() {
+            return {
+                myNumber: 1,
+                myString: 'foo',
+                myArray: [
+                    'a',
+                    'b',
+                    'c',
+                ],
+                myObject: {
+                    a: 'x',
+                    b: 'y',
+                    c: 'z',
+                },
+                calculatedNumber: this.myString.length + 1,
+            };
+        },
+    };
+</script>