MAPG-180 declare CSS and JS files

src/View/Linker.php

@@ -14,6 +14,8 @@ class Linker
         $input = ROOT . '/views/' . $this->view . '.php';
 
         $temporaryFiles = [];
+        $css = [];
+        $js = [];
         $sections = [];
         $extra = ['', ''];
 
@@ -23,12 +25,14 @@ class Linker
 
             $extends = $fragment->getExtends();
 
+            $css = array_merge($css, $fragment->getCss());
+            $js = array_merge($js, $fragment->getJs());
             $sections = array_merge($sections, $fragment->getSections()); //TODO: detect if section defined multiple times
             $extra[0] = $fragment->getExtra()[0] . $extra[0];
             $extra[1] = $extra[1] . $fragment->getExtra()[1];
 
             if ($extends === null) {
-                $this->writeFinal($extra, $input, ROOT . '/cache/views/' . $this->view . '.php');
+                $this->writeFinal($css, $js, $extra, $input, ROOT . '/cache/views/' . $this->view . '.php');
                 break;
             }
 
@@ -74,7 +78,7 @@ class Linker
         fclose($outputFileHandle);
     }
 
-    private function writeFinal(array $extra, string $file, string $output): void
+    private function writeFinal(array $css, array $js, array $extra, string $file, string $output): void
     {
         $dirname = pathinfo($output, PATHINFO_DIRNAME);
         if (!is_dir($dirname)) {
@@ -91,6 +95,22 @@ class Linker
             throw new \Exception('Cannot open file ' . $output . 'for writing.');
         }
 
+        if (count($css) > 0) {
+            fwrite($outputFileHandle, '<?php' . PHP_EOL . '$cssFiles = [];' . PHP_EOL);
+            foreach ($css as $cssFile) {
+                fwrite($outputFileHandle, '$cssFiles[] = ' . $cssFile . ';' . PHP_EOL);
+            }
+            fwrite($outputFileHandle, '?>' . PHP_EOL);
+        }
+
+        if (count($js) > 0) {
+            fwrite($outputFileHandle, '<?php' . PHP_EOL . '$jsFiles = [];' . PHP_EOL);
+            foreach ($js as $jsFile) {
+                fwrite($outputFileHandle, '$jsFiles[] = ' . $jsFile . ';' . PHP_EOL);
+            }
+            fwrite($outputFileHandle, '?>' . PHP_EOL);
+        }
+
         fwrite($outputFileHandle, $extra[0]);
         while (($line = fgets($inputFileHandle)) !== false) {
             fwrite($outputFileHandle, $line);

src/View/ParsedFragment.php

@@ -4,13 +4,19 @@ class ParsedFragment
 {
     private ?string $extends;
 
+    private array $css;
+
+    private array $js;
+
     private array $sections;
 
     private array $extra;
 
-    public function __construct(?string $extends, array $sections, array $extra)
+    public function __construct(?string $extends, array $css, array $js, array $sections, array $extra)
     {
         $this->extends = $extends;
+        $this->css = $css;
+        $this->js = $js;
         $this->sections = $sections;
         $this->extra = $extra;
     }
@@ -20,6 +26,16 @@ class ParsedFragment
         return $this->extends;
     }
 
+    public function getCss(): array
+    {
+        return $this->css;
+    }
+
+    public function getJs(): array
+    {
+        return $this->js;
+    }
+
     public function getSections(): array
     {
         return $this->sections;

src/View/Parser.php

@@ -11,11 +11,12 @@ class Parser
 
     public function parse(): ParsedFragment
     {
-
         $sectionOpen = null;
         $extraOpen = false;
 
         $extends = null;
+        $js = [];
+        $css = [];
         $sections = [];
         $extra = ['', ''];
 
@@ -28,6 +29,18 @@ class Parser
         while (($line = fgets($fileHandle)) !== false) {
             ++$lineNumber;
 
+            if (($cssMatched = $this->matchCss($line)) !== null) {
+                $css[] = $cssMatched;
+
+                continue;
+            }
+
+            if (($jsMatched = $this->matchJs($line)) !== null) {
+                $js[] = $jsMatched;
+
+                continue;
+            }
+
             if (($extendsMatched = $this->matchExtends($line)) !== null) {
                 if ($extends !== null) {
                     throw new \Exception('Error in file ' . $this->file . ' in line ' . $lineNumber . ' - There is already an \'@extends\' declared.');
@@ -90,7 +103,25 @@ class Parser
 
         fclose($fileHandle);
 
-        return new ParsedFragment($extends, $sections, $extra);
+        return new ParsedFragment($extends, $css, $js, $sections, $extra);
+    }
+
+    private function matchCss(string $line): ?string
+    {
+        if (preg_match('/^\s*@css\((.*)\)\s*$/', $line, $matches)) {
+            return $matches[1];
+        }
+
+        return null;
+    }
+
+    private function matchJs(string $line): ?string
+    {
+        if (preg_match('/^\s*@js\((.*)\)\s*$/', $line, $matches)) {
+            return $matches[1];
+        }
+
+        return null;
     }
 
     private function matchExtends(string $line): ?string

views/admin/map_editor.php

@@ -1,19 +1,12 @@
-@extra
+@css('node_modules/leaflet/dist/leaflet.css')
-<?php
+@css('css/map_editor.css')
-$cssFiles = [
+@css('node_modules/leaflet.markercluster/dist/MarkerCluster.css')
-    'node_modules/leaflet/dist/leaflet.css',
+@css('node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css')
-    'css/map_editor.css',
+
-    'node_modules/leaflet.markercluster/dist/MarkerCluster.css',
+@js('node_modules/leaflet/dist/leaflet.js')
-    'node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css'
+@js('node_modules/leaflet.markercluster/dist/leaflet.markercluster.js')
-];
+@js('https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'])
-$jsFiles = [
+@js('js/map_editor.js')
-    'node_modules/leaflet/dist/leaflet.js',
-    'node_modules/leaflet.markercluster/dist/leaflet.markercluster.js',
-    'https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'],
-    'js/map_editor.js',
-];
-?>
-@endextra
 
 @extends('templates/layout_full')
 

views/game.php

@@ -1,14 +1,7 @@
-@extra
+@css('css/game.css')
-<?php
+
-$cssFiles = [
+@js('https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'])
-    'css/game.css'
+@js('js/game.js')
-];
-$jsFiles = [
-    'https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'],
-    'js/game.js',
-];
-?>
-@endextra
 
 @extends('templates/layout_full')
 

views/login/google_signup.php

@@ -1,10 +1,4 @@
-@extra
+@js('js/login/google_signup.js')
-<?php
-$jsFiles = [
-    'js/login/google_signup.js',
-];
-?>
-@endextra
 
 @extends('templates/layout_normal')
 

views/login/signup.php

@@ -1,10 +1,4 @@
-@extra
+@js('js/login/signup.js')
-<?php
-$jsFiles = [
-    'js/login/signup.js',
-];
-?>
-@endextra
 
 @extends('templates/layout_normal')
 

views/maps.php

@@ -1,16 +1,7 @@
-@extra
+@css('css/maps.css')
-<?php
+@js('js/maps.js')
-$cssFiles = [
+TODO: condition!
-    'css/maps.css'
+@js('js/maps_admin.js')
-];
-$jsFiles = [
-    'js/maps.js',
-];
-if ($isAdmin) {
-    $jsFiles[] = 'js/maps_admin.js';
-}
-?>
-@endextra
 
 @extends('templates/layout_normal')
 

views/templates/mapguesser.php

@@ -16,6 +16,7 @@
         <?php endforeach; ?>
     <?php endif; ?>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    @yields('inlineCss')
     <link rel="icon" type="image/png" sizes="192x192" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/192x192.png?rev=<?= REVISION ?>">
     <link rel="icon" type="image/png" sizes="96x96" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/96x96.png?rev=<?= REVISION ?>">
     <link rel="icon" type="image/png" sizes="32x32" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/32x32.png?rev=<?= REVISION ?>">
@@ -62,6 +63,7 @@
             <script src="<?= $jsFile ?>"></script>
         <?php endforeach; ?>
     <?php endif; ?>
+    @yields('inlineJs')
     <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
         <script>
             (function () {