mirrors
/
flight-core
mirror of https://github.com/flightphp/core
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Support custom style/script tags in class components

Browse Source 
Allow class components to return full <style> or <script> tags from css() and js(), while preserving default wrapping for raw CSS/JS strings. Add data-provider coverage and fixtures for both custom style and custom script tag behavior.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
580-view-class-steroids
fadrian06 2 weeks ago
parent dd238319da
commit 48035d6a92
6 changed files with 102 additions and 10 deletions
Show Stats Download Patch File Download Diff File

38
flight/template/View.php
Unescape View File

@ -166,21 +166,13 @@ class View
$js = $component->js();
if ($css && !array_key_exists($template, $this->styles)) {
$view .= <<<html
<style>
$css
</style>
html;
$view .= $this->renderComponentStyle($css);
$this->styles[$template] = true;
}
if ($js && !array_key_exists($template, $this->scripts)) {
$view .= <<<html
<script>
$js
</script>
html;
$view .= $this->renderComponentScript($js);
$this->scripts[$template] = true;
}
@ -328,4 +320,30 @@ class View
return $arguments;
}
private function renderComponentStyle(string $css): string
{
if (preg_match('/^\s*<style\b[^>]*>.*<\/style>\s*$/is', $css) === 1) {
return $css;
}
return <<<html
<style>
$css
</style>
html;
}
private function renderComponentScript(string $js): string
{
if (preg_match('/^\s*<script\b[^>]*>.*<\/script>\s*$/is', $js) === 1) {
return $js;
}
return <<<html
<script>
$js
</script>
html;
}
}

22
tests/ViewTest.php
Unescape View File

@ -343,6 +343,19 @@ class ViewTest extends TestCase
</style>
html,
],
[
'page-with-class-component-with-custom-style-tag',
<<<'html'
<span class="my-class-component-with-custom-style-tag">
my-class-component-with-custom-style-tag
</span>
<style media="print" data-component="my-class-component-with-custom-style-tag">
.my-class-component-with-custom-style-tag {
color: purple;
}
</style>
html,
],
[
'page-with-class-component-with-scripts',
<<<'html'
@ -351,6 +364,15 @@ class ViewTest extends TestCase
<script>console.log('my-class-component-with-scripts')</script>
html,
],
[
'page-with-class-component-with-custom-script-tag',
<<<'html'
my-class-component-with-custom-script-tag
<script type="module" data-component="my-class-component-with-custom-script-tag">
console.log('my-class-component-with-custom-script-tag')
</script>
html,
],
[
'page-with-class-component-that-extends-another-class-component',
<<<'html'

22
tests/views/components/my-class-component-with-custom-script-tag.php
Unescape View File

@ -0,0 +1,22 @@
<?php
declare(strict_types=1);
use flight\template\Component;
return new class extends Component
{
public function html(): string
{
return 'my-class-component-with-custom-script-tag';
}
public function js(): string
{
return <<<'js'
<script type="module" data-component="my-class-component-with-custom-script-tag">
console.log('my-class-component-with-custom-script-tag')
</script>
js;
}
};

28
tests/views/components/my-class-component-with-custom-style-tag.php
Unescape View File

@ -0,0 +1,28 @@
<?php
declare(strict_types=1);
use flight\template\Component;
return new class extends Component
{
public function html(): string
{
return <<<'html'
<span class="my-class-component-with-custom-style-tag">
my-class-component-with-custom-style-tag
</span>
html;
}
public function css(): string
{
return <<<'css'
<style media="print" data-component="my-class-component-with-custom-style-tag">
.my-class-component-with-custom-style-tag {
color: purple;
}
</style>
css;
}
};

1
tests/views/pages/page-with-class-component-with-custom-script-tag.php
Unescape View File

@ -0,0 +1 @@
<f-my-class-component-with-custom-script-tag />

1
tests/views/pages/page-with-class-component-with-custom-style-tag.php
Unescape View File

@ -0,0 +1 @@
<f-my-class-component-with-custom-style-tag />
Write Preview
Loading…
Cancel
Save