paneon / php-vue-to-twig

Compile vue files to twig templates with PHP

php-vue-to-twig

Compile vue files to twig templates with PHP

Directives

Directive	Implemented
v-text	✅
v-html	✅
v-show	✅
v-if	✅
v-else	✅
v-else-if	✅
v-for	✅
v-on	✅
v-bind	partially working
v-bind:style	✅
v-bind:class	✅
v-model	partially working
v-pre	✅
v-cloak	✅
v-once	✅

Other Functionalities

Functionality	Implemented
Slots	partially working
Components	✅
Filters

Limitations

It's difficult to interpret JavaScript language features and translate them into twig.

For example, string concatenation within attribute binding is not currently working properly: 🚫

This example works:

<template>
    <div :style="'fontSize: ' + (size + 10) + 'px'"></div> 
</template>

<script>
export default {
  props: {
    size: {
      type: number,
      required: true,
    },
  },
};
</script>

<div style="{{ 'fontSize: ' ~ (size + 10) ~ 'px' }};"></div>

But this example doesn't work correct:

<template>
    <div :style="'fontSize: ' + (foo.size + 10) + 'px'"></div> 
</template>

<script>
export default {
  props: {
    foo: {
      type: object,
      required: true,
    },
  },
};
</script>

<div style="{{ 'fontSize: ' ~ (foo.size ~ 10) ~ 'px' }};"></div>

php-vue-to-twig's Issues

Handle multiple attributes of same name

A node can have bound and normal attributes:

<div :class="`${isMobile ? 'small-6' : ''}`" class="product product-tile-wrapper">

The compiler should not overwrite one of these, but rather append all properties of the same name when building the replacement string.

Running on VUE 3

Can somebody tell me if php-vue-to-twig is compatible with the new version of Vue, and how I can test the library after having installed it locally on my project in the composer?

Thank you in advance!!

scssphp should be updated to a maintained version

This package currently locks the 1.4.0 release of scssphp. The latest version is 1.9.0 (with 1.10.0 being in progress). It would be great to use the latest version.

Disclaimer: I don't use this package. I'm one of the scssphp maintainers, and I found this package when investigating why some older versions of scssphp were still seeing a non-negligeable amount of installs in the stats.

Class-bindings fail for included child-components

It seems as though the compiler lacks support for class-bindings that need to be passed to included
components.

Input component ProductColumn.vue:

<template>
  <div :class="{'product-column__tiles--large' : isSingleProductTile}"
          class="product-column__tiles">
    <ProductTile class="product-column__tile"
                 :class="{'product-column__tile--large' : isSingleProductTile }" />
  </div>
</template>

Input component ProductTile.vue:

<template>
  <div class="homepage-product-tile">
  </div>
</template>

These are compiled into:

ProductColumn.html.twig

{# This file was automatically generated by the vue-to-twig command #}
  <div class="product-column__tiles {{ isSingleProductTile ? ' ' }}">
      {% include "partials/components/ProductTile.html.twig" with
        {
          'class': "product-column__tile",
          'class': {'product-column__tile--large' : isSingleProductTile }
        } %}
    {% endfor %}
  </div>

ProductTile.html.twig

<div class="homepage-product-tile {{ class|default('') }}">
</div>

The Twig-runtime fails at the first line in ProductTile.html.twig with the error:

An exception has been thrown during the rendering of a template ("Notice: Array to string conversion").

Notice two things:
1) in ProductColumn.html.twig, the compiled class-binding is

class="product-column__tiles {{ isSingleProductTile ? ' ' }}"

but should be:

class="product-column__tiles {{ isSingleProductTile ? 'product-column__tiles--large' }}"

... or similar; it shouldn't include the empty string when the condition is met.

Split out into #49

2. in ProductColumn.html.twig, the with render-context lists two items with key 'class'; instead, they should be merged into one single property.

@Prop syntax sometimes kills the generated twig template

While a Prop in this syntax works perfectly:
@Prop({ type: String, default: 'foo' }) readonly test!: string;

A prop with this syntax fails to compile valid twig code:

@Prop({ default: '' }) readonly propReadOnly!: string;
@Prop({ default: '' }) propPresent!: number;

It will compile to something like this:

{% set propPresent = propPresent|default('' }) readonly propReadOnly!: string; @Prop({ default: ') %}

Allow using child components

Spaces in v-if are broken

Having a vue component with this code in the template:

<img :src="isBool ? varA : varB.c">

Will result in this broken twig after compilation:

<img src="{{isBool%20?%20varA%20:%20varB.c}}">

Expected result:

<img src="{{isBool ? varA : varB.c}}">

Class bindings are incomplete if a space follows the classname

Vue has class-bindings of the form :class="{'foo' : bar}", which will emit the class "foo" if bar evaluates to true.
The compiler currently only handles these bindings if the classname is not followed by a space.
So this works:

:class="{'foo': bar}"

... but this doesn't (whitespace-character included for visibility):

:class="{'foo'␣: bar}"

and results in

class="{{ bar ? ' ' }}"

Compilation breaks when the style block has an unresolved @import

This vue code

<template>
<div>
  <div class="foo">
    foo
  </div>
</div>
</template>

<style lang="scss">
  @import "./file";

  .foo {
    color: red;
    &__bar {
      color: blue;
    }
    &__baz {
      color: $color;
    }
  }
</style>

<script>
    export default {
    }
</script>

Causes this error during execution:
ScssPhp\ScssPhp\Exception\CompilerException : ./file file not found for @import: line: 2, column: 3

Handle template strings

The compiler should be able to handle "simple" template strings, e.g.

:style="`fill:${color};`"

In this case, it could be translated to a simple string concatenation:

style="{{ "fill: " ~ color }}"