2. renders self close functional and class components

580-view-class-steroids
fadrian06 1 day ago
parent a94431ae05
commit 50c23de325

@ -11,5 +11,5 @@ insert_final_newline = true
[*.md] [*.md]
indent_size = 2 indent_size = 2
[tests/views/*] [tests/views/**/*]
insert_final_newline = false insert_final_newline = false

@ -0,0 +1,20 @@
<?php
declare(strict_types=1);
namespace flight\template;
abstract class Component
{
abstract public function html(): string;
public function css(): string
{
return '';
}
public function js(): string
{
return '';
}
}

@ -121,8 +121,42 @@ class View
} }
ob_start(); ob_start();
include $template; $component = include $template;
$view = ob_get_clean();
switch (true) {
case is_callable($component):
$view = $component();
ob_end_clean();
break;
case $component instanceof Component:
$view = $component->html();
$css = $component->css();
$js = $component->js();
if ($css) {
$view .= <<<html
<style>
$css
</style>
html;
}
if ($js) {
$view .= <<<html
<script>
$js
</script>
html;
}
ob_end_clean();
break;
default:
$view = ob_get_clean();
}
preg_match('/<f-(?<component>[a-z-]+)\s*\/>/', $view, $matches); preg_match('/<f-(?<component>[a-z-]+)\s*\/>/', $view, $matches);
if ($matches) { if ($matches) {

@ -239,24 +239,82 @@ class ViewTest extends TestCase
{ {
$view = new View(__DIR__ . '/views'); $view = new View(__DIR__ . '/views');
$view->preserveVars = false; $view->preserveVars = false;
$actual = $view->fetch($page); $actual = $view->fetch("pages/$page");
self::assertSame(self::removeLineEndings($expected), self::removeLineEndings($actual)); self::assertSame(
self::removeIndentation(self::removeLineEndings($expected)),
self::removeIndentation(self::removeLineEndings($actual)),
);
} }
public static function pagesDataProvider(): array public static function pagesDataProvider(): array
{ {
return [ return [
['pages/page-with-component-with-old-syntax', <<<'html' [
<body> 'page-with-component-with-old-syntax',
value <<<'html'
</body> my-component
html], html,
['pages/page-with-component-with-new-syntax', <<<'html' ],
<body> [
value 'page-with-component-with-new-syntax',
</body> <<<'html'
html], my-component
html,
],
[
'page-with-component-with-subcomponent',
<<<'html'
<div>
my-component-with-subcomponent
subcomponent
</div>
html,
],
[
'page-with-multiple-components',
<<<'html'
<ul>
<li>my-component</li>
<li>my-component</li>
</ul>
html,
],
[
'page-with-functional-component',
<<<'html'
my-functional-component
html,
],
[
'page-with-class-component',
<<<'html'
my-class-component
html,
],
[
'page-with-class-component-with-styles',
<<<'html'
<span class="my-class-component-with-styles">
my-class-component-with-styles
</span>
<style>
.my-class-component-with-styles {
color: red;
}
</style>
html,
],
[
'page-with-class-component-with-scripts',
<<<'html'
my-class-component-with-scripts
<script>console.log('my-class-component-with-scripts')</script>
html,
],
]; ];
} }
@ -264,4 +322,9 @@ class ViewTest extends TestCase
{ {
return str_replace(["\r", "\n"], '', $subject); return str_replace(["\r", "\n"], '', $subject);
} }
private static function removeIndentation(string $subject): string
{
return str_replace(' ', '', $subject);
}
} }

@ -0,0 +1,24 @@
<?php
declare(strict_types=1);
use flight\template\Component;
return new class extends Component
{
#[Override]
public function html(): string
{
return <<<'html'
my-class-component-with-scripts
html;
}
#[Override]
public function js(): string
{
return <<<'js'
console.log('my-class-component-with-scripts')
js;
}
};

@ -0,0 +1,28 @@
<?php
declare(strict_types=1);
use flight\template\Component;
return new class extends Component
{
#[Override]
public function html(): string
{
return <<<'html'
<span class="my-class-component-with-styles">
my-class-component-with-styles
</span>
html;
}
#[Override]
public function css(): string
{
return <<<'css'
.my-class-component-with-styles {
color: red;
}
css;
}
};

@ -0,0 +1,16 @@
<?php
declare(strict_types=1);
use flight\template\Component;
return new class extends Component
{
#[Override]
public function html(): string
{
return <<<'html'
my-class-component
html;
}
};

@ -0,0 +1,4 @@
<div>
my-component-with-subcomponent
<f-subcomponent />
</div>

@ -0,0 +1,7 @@
<?php
declare(strict_types=1);
return fn (): string => <<<'html'
my-functional-component
html;

@ -0,0 +1 @@
<f-my-class-component-with-scripts />

@ -0,0 +1 @@
<f-my-class-component-with-styles />

@ -1,3 +1 @@
<body> <f-my-component />
<f-my-component />
</body>

@ -1,3 +1 @@
<body> <?php $this->render('components/my-component') ?>
<?php $this->render('components/my-component') ?>
</body>

@ -0,0 +1 @@
<f-my-component-with-subcomponent />

@ -0,0 +1,7 @@
<ul>
<?php for ($i = 1; $i <= 2; ++$i) : ?>
<li>
<f-my-component />
</li>
<?php endfor ?>
</ul>
Loading…
Cancel
Save