Add AssetPathExtractor

- AssetPathExtractor reads the generated public/build/index.html to enable the twig template to refer to the generated asset files
- adjusted the production build for angular to use outputHashing and generate source maps

apps/client/project.json

@@ -42,7 +42,9 @@
               "maximumWarning": "4kb",
               "maximumError": "9kb"
             }
-          ]
+          ],
+          "outputHashing": "bundles",
+          "sourceMap": true
         },
         "development": {
           "buildOptimizer": false,

config/packages/twig.yaml

@@ -1,6 +1,10 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
 
+    globals:
+      asset_path_extractor: '@App\Service\AssetPathExtractor'
+
 when@test:
     twig:
         strict_variables: true
+

config/services.yaml

@@ -28,3 +28,7 @@ services:
       tags:
         - { name: doctrine.event_subscriber }
 
+    App\Service\AssetPathExtractor:
+      arguments:
+        $indexPath: '%kernel.project_dir%/public/build/index.html'
+        $buildDir: './build/'

src/Service/AssetPathExtractor.php

@@ -0,0 +1,50 @@
+<?php declare(strict_types=1);
+
+namespace App\Service;
+
+use Psr\Log\LoggerInterface;
+
+class AssetPathExtractor
+{
+    private array $javascriptFiles = [];
+    private array $cssFiles = [];
+
+    public function __construct(string $indexPath, string $buildDir, LoggerInterface $logger)
+    {
+        $content = file_get_contents($indexPath);
+        preg_match_all('/<script src="(.+?)" type="module"><\/script>/', $content, $matches);
+        foreach ($matches[1] as $path) {
+            $baseName = $this->extractBaseName($path, 'js');
+            $this->javascriptFiles[$baseName] = $buildDir . $path;
+        }
+
+        preg_match_all('/<link rel="stylesheet" href="(.+?)">/', $content, $matches);
+        foreach ($matches[1] as $path) {
+            $baseName = $this->extractBaseName($path, 'css');
+            $this->cssFiles[$baseName] = $buildDir . $path;
+        }
+    }
+
+    /**
+     * Returns the base name without the hash which is used for production builds
+     */
+    private function extractBaseName(string $path, string $suffix): string
+    {
+        // Assuming file names are in the format 'name.hash.js'
+        if (preg_match('/(?<basename>[^"]*?)(?<hash>\.[a-f0-9]*)?\.' . $suffix . '/', $path, $matches)) {
+            return $matches[1];
+        }
+
+        return basename($path, '.' . $suffix); // Fallback for non-hashed file names
+    }
+
+    public function getScriptPath(string $name): ?string
+    {
+        return $this->javascriptFiles[$name] ?? null;
+    }
+
+    public function getCssPath(string $name): ?string
+    {
+        return $this->cssFiles[$name] ?? null;
+    }
+}

templates/home/index.html.twig

@@ -1,16 +1,25 @@
 {% extends 'base.html.twig' %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" href="./build/styles.css"></head>
+    {% set styles = asset_path_extractor.getCssPath('styles') %}
+    <link rel="stylesheet" href="{{ styles }}"></head>
 {% endblock %}
 
 {% block javascripts %}
-    <script src="./build/runtime.js" type="module"></script>
-    <script src="./build/polyfills.js" type="module"></script>
-    <script src="./build/vendor.js" type="module"></script>
-    <script src="./build/main.js" type="module"></script></body>
+    {% set runtime = asset_path_extractor.getScriptPath('runtime') %}
+    {% set polyfills = asset_path_extractor.getScriptPath('polyfills') %}
+    {% set vendor = asset_path_extractor.getScriptPath('vendor') %} {# If vendor.js exists #}
+    {% set main = asset_path_extractor.getScriptPath('main') %}
+
+    <script src="{{ runtime }}" type="module"></script>
+    <script src="{{ polyfills }}" type="module"></script>
+    {% if vendor %}
+        <script src="{{ vendor }}" type="module"></script>
+    {% endif %}
+    <script src="{{ main }}" type="module"></script>
 {% endblock %}
 
+
 {% block body %}
         <money-sprouts-root></money-sprouts-root>
 {% endblock %}