Volt Version
1.6.1
Laravel Version
11.36,1
PHP Version
8.3.6
Database Driver & Version
No response
Description
If the PHP opening or closing tags appear in a string in the template then the template is rendered incorrectly. This stems from a naive regex in the ExtractTemplate precompiler class on line 51
|
$template = trim(preg_replace('/<\?php\s*(.*?)\s*\?>/s', '', $template)); |
Steps To Reproduce
The following simple Volt component demonstrates the issue.
<?php
use function Livewire\Volt\{state};
state(
title: 'Exmple of ?> causing problems',
message: 'PHP starts with <?php and ends with ?>',
);
?>
<x-layouts.app>
@volt
<div>
<h1>{{ $title }}</h1>
<p>{{ $message }}</p>
</div>
@endvolt
</x-layouts.app>There is nothing special in the layout component
<!DOCTYPE html>
<html>
<head>
<title>Volt App</title>
</head>
<body>
{{ $slot }}
</body>
</html>This gives the following output (note the extract of PHP code that has been rendered as part of the template)
causing problems',
message: 'PHP starts with ',
);
?>
<!DOCTYPE html>
<html>
<head>
<title>Volt App</title>
<!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style>
</head>
<body>
<div wire:snapshot="{"data":{"title":"Exmple of ?> causing problems","message":"PHP starts with <?php and ends with ?>"},"memo":{"id":"oXiRLjallSrQA1IiUhzv","name":"volt-anonymous-fragment-eyJuYW1lIjoidm9sdC1hbm9ueW1vdXMtZnJhZ21lbnQtNzI1NzhjZjIzMmQ5NTQwYTkxYzkwZTIxNWI3NmVlZWMiLCJwYXRoIjoicmVzb3VyY2VzXC92aWV3c1wvcGFnZXNcL2V4YW1wbGUuYmxhZGUucGhwIn0=","path":"example","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"173f579b1442267838c7d014c1a23f7073d6f0133e57bf58e11e805427d1c1b8"}" wire:effects="[]" wire:id="oXiRLjallSrQA1IiUhzv">
<h1>Exmple of ?> causing problems</h1>
<p>PHP starts with <?php and ends with ?></p>
</div>
<!-- Livewire Scripts -->
<script src="[/livewire/livewire.js?id=02b08710](https://livewire.projects.test/livewire/livewire.js?id=02b08710)" data-csrf="80ALUp1mlTldYlewWeaiBgmmEYC2kdNE4IY5kTxx" data-update-uri="/livewire/update" data-navigate-once="true"></script>
</body>
</html>
Volt Version
1.6.1
Laravel Version
11.36,1
PHP Version
8.3.6
Database Driver & Version
No response
Description
If the PHP opening or closing tags appear in a string in the template then the template is rendered incorrectly. This stems from a naive regex in the
ExtractTemplateprecompiler class on line 51volt/src/Precompilers/ExtractTemplate.php
Line 51 in 39e225e
Steps To Reproduce
The following simple Volt component demonstrates the issue.
There is nothing special in the layout component
This gives the following output (note the extract of PHP code that has been rendered as part of the template)
causing problems', message: 'PHP starts with ', ); ?> <!DOCTYPE html> <html> <head> <title>Volt App</title> <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style> </head> <body> <div wire:snapshot="{"data":{"title":"Exmple of ?> causing problems","message":"PHP starts with <?php and ends with ?>"},"memo":{"id":"oXiRLjallSrQA1IiUhzv","name":"volt-anonymous-fragment-eyJuYW1lIjoidm9sdC1hbm9ueW1vdXMtZnJhZ21lbnQtNzI1NzhjZjIzMmQ5NTQwYTkxYzkwZTIxNWI3NmVlZWMiLCJwYXRoIjoicmVzb3VyY2VzXC92aWV3c1wvcGFnZXNcL2V4YW1wbGUuYmxhZGUucGhwIn0=","path":"example","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"173f579b1442267838c7d014c1a23f7073d6f0133e57bf58e11e805427d1c1b8"}" wire:effects="[]" wire:id="oXiRLjallSrQA1IiUhzv"> <h1>Exmple of ?> causing problems</h1> <p>PHP starts with <?php and ends with ?></p> </div> <!-- Livewire Scripts --> <script src="[/livewire/livewire.js?id=02b08710](https://livewire.projects.test/livewire/livewire.js?id=02b08710)" data-csrf="80ALUp1mlTldYlewWeaiBgmmEYC2kdNE4IY5kTxx" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>