fix styles and scripts duplication

580-view-class-steroids
fadrian06 2 weeks ago
parent 8c88b9d94a
commit 7acf6c00b9

@ -149,20 +149,27 @@ class View
$css = $component->css(); $css = $component->css();
$js = $component->js(); $js = $component->js();
if ($css) { static $styles = [];
static $scripts = [];
if ($css && !array_key_exists($template, $styles)) {
$view .= <<<html $view .= <<<html
<style> <style>
$css $css
</style> </style>
html; html;
$styles[$template] = true;
} }
if ($js) { if ($js && !array_key_exists($template, $scripts)) {
$view .= <<<html $view .= <<<html
<script> <script>
$js $js
</script> </script>
html; html;
$scripts[$template] = true;
} }
ob_end_clean(); ob_end_clean();
@ -206,7 +213,13 @@ class View
} }
$component = $this->fetch("$this->componentsPath/$component", $props); $component = $this->fetch("$this->componentsPath/$component", $props);
$view = str_replace($tag, $component, $view); $tagPosition = strpos($view, $tag);
if ($tagPosition === false) {
continue;
}
$view = substr_replace($view, $component, $tagPosition, strlen($tag));
} }
return $view; return $view;

@ -266,123 +266,142 @@ class ViewTest extends TestCase
public static function pagesDataProvider(): array public static function pagesDataProvider(): array
{ {
return [ return [
// [
// 'page-with-component-with-old-syntax',
// <<<'html'
// my-component
// html,
// ],
// [
// 'page-with-component-with-new-syntax',
// <<<'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,
// ],
// [
// 'page-with-class-component-that-extends-another-class-component',
// <<<'html'
// another-class-component extended by my-class-component-that-extends-another-class-component
// html,
// ],
// [
// 'page-with-component-with-one-prop',
// <<<'html'
// <html>
// <body>
// <h1>Hello, James</h1>
// </body>
// </html>
// html,
// ['name' => 'James'],
// ],
// [
// 'page-with-component-with-one-prop',
// <<<'html'
// <html>
// <body>
// <h1>Hello, Victoria</h1>
// </body>
// </html>
// html,
// ['name' => 'Victoria'],
// ],
// [
// 'page-with-component-with-two-props',
// <<<'html'
// <html>
// <body>
// <h1>Hello, Astronaut Victoria</h1>
// </body>
// </html>
// html,
// ['name' => 'Victoria', 'occupation' => 'Astronaut'],
// ],
// [
// 'page-with-three-different-components',
// <<<'html'
// my-component
// my-functional-component
// my-class-component
// html,
// ],
// [
// 'page-with-component-with-prop-which-value-contains-spaces-and-numbers',
// <<<'html'
// <h1>Hello, Constantine 1st the Great</h1>
// html,
// ['name' => 'Constantine 1st the Great'],
// ],
[ [
'page-with-component-with-old-syntax', 'page-two-same-components-with-one-style-and-script-tag',
<<<'html'
my-component
html,
],
[
'page-with-component-with-new-syntax',
<<<'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' <<<'html'
<span class="my-class-component-with-styles"> <span class="my-class-component-with-styles">
my-class-component-with-styles my-class-component-with-styles
</span> </span>
<style> <style>
.my-class-component-with-styles { .my-class-component-with-styles {
color: red; color: red;
} }
</style> </style>
html, <span class="my-class-component-with-styles">
], my-class-component-with-styles
[ </span>
'page-with-class-component-with-scripts',
<<<'html'
my-class-component-with-scripts my-class-component-with-scripts
<script>console.log('my-class-component-with-scripts')</script> <script>console.log('my-class-component-with-scripts')</script>
html, my-class-component-with-scripts
], html,
[
'page-with-class-component-that-extends-another-class-component',
<<<'html'
another-class-component extended by my-class-component-that-extends-another-class-component
html,
],
[
'page-with-component-with-one-prop',
<<<'html'
<html>
<body>
<h1>Hello, James</h1>
</body>
</html>
html,
['name' => 'James'],
],
[
'page-with-component-with-one-prop',
<<<'html'
<html>
<body>
<h1>Hello, Victoria</h1>
</body>
</html>
html,
['name' => 'Victoria'],
],
[
'page-with-component-with-two-props',
<<<'html'
<html>
<body>
<h1>Hello, Astronaut Victoria</h1>
</body>
</html>
html,
['name' => 'Victoria', 'occupation' => 'Astronaut'],
],
[
'page-with-three-different-components',
<<<'html'
my-component
my-functional-component
my-class-component
html,
],
[
'page-with-component-with-prop-which-value-contains-spaces-and-numbers',
<<<'html'
<h1>Hello, Constantine 1st the Great</h1>
html,
['name' => 'Constantine 1st the Great'],
], ],
]; ];
} }

@ -0,0 +1,5 @@
<f-my-class-component-with-styles />
<f-my-class-component-with-styles />
<f-my-class-component-with-scripts />
<f-my-class-component-with-scripts />
Loading…
Cancel
Save