Merged in feature/MAPG-180-inline-js-css-automatically (pull request #159)

Feature/MAPG-180 inline js css automatically

src/Interfaces/Response/IContent.php

@@ -4,7 +4,7 @@ interface IContent
 {
     public function &getData(): array;
 
-    public function &render(): string;
+    public function render(): void;
 
     public function getContentType(): string;
 }

src/Response/ContentBase.php

@@ -11,7 +11,7 @@ abstract class ContentBase implements IContent
         return $this->data;
     }
 
-    abstract public function &render(): string;
+    abstract public function render(): void;
 
     abstract public function getContentType(): string;
 }

src/Response/HtmlContent.php

@@ -12,7 +12,7 @@ class HtmlContent extends ContentBase
         $this->data = &$data;
     }
 
-    public function &render(): string
+    public function render(): void
     {
         if (!empty($_ENV['DEV'])) {
             $generator = new Linker($this->view);
@@ -21,14 +21,9 @@ class HtmlContent extends ContentBase
 
         extract($this->data);
 
-        ob_start();
         require ROOT . '/cache/views/' . $this->view . '.php';
-        $content = ob_get_contents();
-        ob_end_clean();
 
-        $content .= '<!-- __debug__runtime: ' . round((hrtime(true) - SCRIPT_STARTED) / 1e+6, 1) . ' -->';
+        echo '<!-- __debug__runtime: ' . round((hrtime(true) - SCRIPT_STARTED) / 1e+6, 1) . ' -->';
-
-        return $content;
     }
 
     public function getContentType(): string

src/Response/JsonContent.php

@@ -7,13 +7,11 @@ class JsonContent extends ContentBase
         $this->data = &$data;
     }
 
-    public function &render(): string
+    public function render(): void
     {
         $this->data['__debug__runtime'] = round((hrtime(true) - SCRIPT_STARTED) / 1e+6, 1);
 
-        $content = json_encode($this->data);
+        echo json_encode($this->data);
-
-        return $content;
     }
 
     public function getContentType(): string

src/View/Linker.php

@@ -2,6 +2,8 @@
 
 class Linker
 {
+    const INLINE_ASSET_LIMIT = 2000;
+
     private string $view;
 
     public function __construct(string $view)
@@ -14,7 +16,7 @@ class Linker
         $input = ROOT . '/views/' . $this->view . '.php';
 
         $temporaryFiles = [];
-        $sections = [];
+        $sections = ['externalCss' => '', 'inlineCss' => '', 'externalJs' => '', 'inlineJs' => ''];
         $extra = ['', ''];
 
         do {
@@ -23,6 +25,8 @@ class Linker
 
             $extends = $fragment->getExtends();
 
+            $this->generateAssets($fragment, $sections);
+
             $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];
@@ -100,4 +104,52 @@ class Linker
         fclose($inputFileHandle);
         fclose($outputFileHandle);
     }
+
+    private function generateAssets(ParsedFragment $fragment, array &$sections)
+    {
+        foreach ($fragment->getCss() as $cssFile) {
+            $asset = $this->parseAsset($cssFile, 'css');
+            if (isset($asset['code'])) {
+                $sections['inlineCss'] .= '<style>' . PHP_EOL;
+                $sections['inlineCss'] .= $asset['code'];
+                $sections['inlineCss'] .= '</style>' . PHP_EOL;
+            } elseif (isset($asset['file'])) {
+                $sections['externalCss'] .= '<link href="' . $asset['file'] . '" rel="stylesheet">' . PHP_EOL;
+            }
+        }
+
+        foreach ($fragment->getJs() as $jsFile) {
+            $asset = $this->parseAsset($jsFile, 'js');
+            if (isset($asset['code'])) {
+                $sections['inlineJs'] .= '<script>' . PHP_EOL;
+                $sections['inlineJs'] .= $asset['code'];
+                $sections['inlineJs'] .= '</script>' . PHP_EOL;
+            } elseif (isset($asset['file'])) {
+                $sections['externalJs'] .= '<script src="' . $asset['file'] . '"></script>' . PHP_EOL;
+            }
+        }
+    }
+
+    private function parseAsset(string $asset, string $type): array
+    {
+        $output = [];
+
+        eval('$asset = ' . $asset . ';');
+
+        if (
+            empty($_ENV['DEV']) &&
+            preg_match('/^' . $type . '\/.*/', $asset) &&
+            filesize(ROOT . '/public/static/' . $asset) < self::INLINE_ASSET_LIMIT
+        ) {
+            $output['code'] = file_get_contents(ROOT . '/public/static/' . $asset);
+        } else {
+            if (!preg_match('/^http(s)?/', $asset)) {
+                $output['file'] = $_ENV['STATIC_ROOT'] .  '/' . $asset . '?rev=' . REVISION;
+            } else {
+                $output['file'] = $asset;
+            }
+        }
+
+        return $output;
+    }
 }

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')
 
@@ -75,7 +68,7 @@ $jsFiles = [
     </div>
 @endsection
 
-@section('pagescript')
+@section('pageScript')
 <script>
     var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';
     var tileAttribution = '<?= $_ENV['LEAFLET_TILESERVER_ATTRIBUTION'] ?>';

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')
 
@@ -55,7 +48,7 @@ $jsFiles = [
     </div>
 @endsection
 
-@section('pagescript')
+@section('pageScript')
 <script>
     var mapId = <?= $mapId ?>;
     var mapBounds = <?= json_encode($bounds) ?>;

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

@@ -5,17 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><?= $_ENV['APP_NAME'] ?></title>
     <link href="<?= $_ENV['STATIC_ROOT'] ?>/css/mapguesser.css?rev=<?= REVISION ?>" rel="stylesheet">
-    <?php if (isset($cssFiles)) : ?>
+    @yields('externalCss')
-        <?php foreach ($cssFiles as $cssFile) : ?>
-            <?php
-            if (!preg_match('/^http(s)?/', $cssFile)) {
-                $cssFile = $_ENV['STATIC_ROOT'] .  '/' . $cssFile . '?rev=' . REVISION;
-            }
-            ?>
-            <link href="<?= $cssFile ?>" rel="stylesheet">
-        <?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 ?>">
@@ -50,18 +42,10 @@
             const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
         <?php endif; ?>
     </script>
-    @yields('pagescript')
+    @yields('pageScript')
     <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
-    <?php if (isset($jsFiles)) : ?>
+    @yields('externalJs')
-        <?php foreach ($jsFiles as $jsFile) : ?>
+    @yields('inlineJs')
-            <?php
-            if (!preg_match('/^http(s)?/', $jsFile)) {
-                $jsFile = $_ENV['STATIC_ROOT'] .  '/' . $jsFile . '?rev=' . REVISION;
-            }
-            ?>
-            <script src="<?= $jsFile ?>"></script>
-        <?php endforeach; ?>
-    <?php endif; ?>
     <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
         <script>
             (function () {