Skip to content

Commit 48035d6

Browse files
fadrian06Copilot
fadrian06
and
Copilot
committed
Support custom style/script tags in class components
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>
1 parent dd23831 commit 48035d6

6 files changed

Lines changed: 102 additions & 10 deletions

‎flight/template/View.php‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -166,21 +166,13 @@ public function fetch(string $file, ?array $data = null): string
166166
$js = $component->js();
167167

168168
if ($css && !array_key_exists($template, $this->styles)) {
169-
$view .= <<<html
170-
<style>
171-
$css
172-
</style>
173-
html;
169+
$view .= $this->renderComponentStyle($css);
174170

175171
$this->styles[$template] = true;
176172
}
177173

178174
if ($js && !array_key_exists($template, $this->scripts)) {
179-
$view .= <<<html
180-
<script>
181-
$js
182-
</script>
183-
html;
175+
$view .= $this->renderComponentScript($js);
184176

185177
$this->scripts[$template] = true;
186178
}
@@ -328,4 +320,30 @@ private function getCallableArguments(callable $component, ?array $data): array
328320

329321
return $arguments;
330322
}
323+
324+
private function renderComponentStyle(string $css): string
325+
{
326+
if (preg_match('/^\s*<style\b[^>]*>.*<\/style>\s*$/is', $css) === 1) {
327+
return $css;
328+
}
329+
330+
return <<<html
331+
<style>
332+
$css
333+
</style>
334+
html;
335+
}
336+
337+
private function renderComponentScript(string $js): string
338+
{
339+
if (preg_match('/^\s*<script\b[^>]*>.*<\/script>\s*$/is', $js) === 1) {
340+
return $js;
341+
}
342+
343+
return <<<html
344+
<script>
345+
$js
346+
</script>
347+
html;
348+
}
331349
}

‎tests/ViewTest.php‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,19 @@ class-component-with-props: Astronaut Victoria
343343
</style>
344344
html,
345345
],
346+
[
347+
'page-with-class-component-with-custom-style-tag',
348+
<<<'html'
349+
<span class="my-class-component-with-custom-style-tag">
350+
my-class-component-with-custom-style-tag
351+
</span>
352+
<style media="print" data-component="my-class-component-with-custom-style-tag">
353+
.my-class-component-with-custom-style-tag {
354+
color: purple;
355+
}
356+
</style>
357+
html,
358+
],
346359
[
347360
'page-with-class-component-with-scripts',
348361
<<<'html'
@@ -351,6 +364,15 @@ class-component-with-props: Astronaut Victoria
351364
<script>console.log('my-class-component-with-scripts')</script>
352365
html,
353366
],
367+
[
368+
'page-with-class-component-with-custom-script-tag',
369+
<<<'html'
370+
my-class-component-with-custom-script-tag
371+
<script type="module" data-component="my-class-component-with-custom-script-tag">
372+
console.log('my-class-component-with-custom-script-tag')
373+
</script>
374+
html,
375+
],
354376
[
355377
'page-with-class-component-that-extends-another-class-component',
356378
<<<'html'

‎tests/views/components/my-class-component-with-custom-script-tag.php‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
use flight\template\Component;
6+
7+
return new class extends Component
8+
{
9+
public function html(): string
10+
{
11+
return 'my-class-component-with-custom-script-tag';
12+
}
13+
14+
public function js(): string
15+
{
16+
return <<<'js'
17+
<script type="module" data-component="my-class-component-with-custom-script-tag">
18+
console.log('my-class-component-with-custom-script-tag')
19+
</script>
20+
js;
21+
}
22+
};

‎tests/views/components/my-class-component-with-custom-style-tag.php‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
use flight\template\Component;
6+
7+
return new class extends Component
8+
{
9+
public function html(): string
10+
{
11+
return <<<'html'
12+
<span class="my-class-component-with-custom-style-tag">
13+
my-class-component-with-custom-style-tag
14+
</span>
15+
html;
16+
}
17+
18+
public function css(): string
19+
{
20+
return <<<'css'
21+
<style media="print" data-component="my-class-component-with-custom-style-tag">
22+
.my-class-component-with-custom-style-tag {
23+
color: purple;
24+
}
25+
</style>
26+
css;
27+
}
28+
};

‎tests/views/pages/page-with-class-component-with-custom-script-tag.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<f-my-class-component-with-custom-script-tag />

‎tests/views/pages/page-with-class-component-with-custom-style-tag.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<f-my-class-component-with-custom-style-tag />

0 commit comments

Comments
 (0)