phug-php / phug

Phug - The Pug Template Engine for PHP
https://phug.selfbuild.fr
MIT License
62 stars 3 forks source link

Attribute interpolation doesn't seem to work #54

Closed windware-ono closed 4 years ago

windware-ono commented 4 years ago

I've tried the example in the doc but it didn't seem to work.

https://www.phug-lang.com/#attribute-interpolation

PHP (Tried 7.1 and 7.4)

<?php
require('vendor/autoload.php');

$pug = new \Pug\Pug();
print $pug->renderFile('test.pug');

composer.json

{
    "require" : {
        "pug-php/pug" : "^3.0"
    }
}

versions

js-phpize/js-phpize                     2.6.0
js-phpize/js-phpize-phug                2.2.0
js-transformer/js-transformer           1.0.0
phug/js-transformer-filter              1.2.0
phug/phug                               1.4.0
pug-php/pug                             3.3.1

test.pug

- $btnType = 'info'
- $btnSize = 'lg'
button(type="button" class="btn btn-$btnType btn-$btnSize")
- $btn = (object) ['size' => 'lg']
button(type="button" class="btn btn-{$btn->size}")

Result

<button type="button" class="btn btn-$btnType btn-$btnSize"></button><button type="button" class="btn btn-{$btn-&gt;size}"></button>
windware-ono commented 4 years ago

If I switch the 'engine' option in the doc to 'Pug-php' or 'Tale-pug', the demo also breaks. Am I using pug-php in the wrong way?

kylekatarnls commented 4 years ago

This example uses PHP-style expression.

Using Pug\Pug class you're by default using JS-style expressions: https://en.phug-lang.com/#use-javascript-expressions

For attributes, I recommend simple concatenation:

- btnType = 'info'
- btnSize = 'lg'
button(type="button" class="btn btn-" + btnType + " btn-" + btnSize)
- btn = {size: 'lg'}
button(type="button" class="btn btn-" + btn.size)
kylekatarnls commented 4 years ago

Note: ideally we should support the backtick like in Pugjs:

button(type="button" class=`btn btn-${btn.size}`)

It could be an improvement for jsphpize, but it's not yet supported.

kylekatarnls commented 4 years ago

Back-ticks and its interpolation are now supported by js-phpize: You can run composer update then now use:

- btnType = 'info'
- btnSize = 'lg'
button(type="button" class=`btn btn-${btnType} btn-${btnType}`)
- btn = {size: 'lg'}
button(type="button" class=`btn btn-${btn.size}`)

It can even support complex expressions, escaped characters, nested braces: https://github.com/pug-php/js-phpize/blob/master/examples/interpolation.js

windware-ono commented 4 years ago

Thank you! It works great.