Devfront: internalisation de la librairie semantic-ui

.gitignore

@@ -52,3 +52,4 @@ js_dist
 /composer.phar
 /data
 /assets/vendor/
+/htdocs/dist

Makefile

@@ -127,6 +127,7 @@ phpstan:
 ### Compiler les assets pour la production
 assets:
 	./node_modules/.bin/webpack -p
+	php bin/console importmap:install
 
 ### Lancer le watcher pour les assets
 watch:

app/config/packages/asset_mapper.yaml

@@ -5,6 +5,8 @@ framework:
       - '%kernel.project_dir%/../assets/'
     importmap_path: '%kernel.project_dir%/../importmap.php'
     missing_import_mode: strict
+    vendor_dir: '%kernel.project_dir%/../assets/vendor'
+    public_prefix: /dist/
 
 when@prod:
   framework:

app/config/services.yml

@@ -240,3 +240,12 @@ services:
         autowire: true
         arguments:
             $transports: !tagged_iterator app.social_network.transport
+
+    asset_mapper.local_public_assets_filesystem:
+        class: AppBundle\AssetMapper\PostCompilationCopyHandler
+        autowire: true
+
+    asset_mapper.compiled_asset_mapper_config_reader:
+        class: Symfony\Component\AssetMapper\CompiledAssetMapperConfigReader
+        arguments:
+            $directory: '%kernel.project_dir%/../htdocs/dist'

htdocs/.htaccess

@@ -54,4 +54,6 @@ RewriteRule ^ask/forum/? https://event.afup.org [R=301,L]
 RewriteRule ^ask/? / [R=301,L]
 
 ## This url are handled by symfony
+RewriteCond %{ENV:APP_ENV} ^(dev|test)$
+RewriteRule (dist)/? /index.php [L] # Asset in local development
 RewriteRule (event|connect|_|association|talks|meetups|blog|admin|p|home|news|techno_watch|member|rss.xml)/? /index.php [END]

importmap.php

@@ -16,4 +16,11 @@
         'path' => './assets/app.js',
         'entrypoint' => true,
     ],
+    'semantic-ui/dist/semantic.min.css' => [
+        'version' => '2.5.0',
+        'type' => 'css'
+    ],
+    'semantic-ui/dist/semantic.min.js' => [
+        'version' => '2.5.0'
+    ],
 ];

sources/AppBundle/AssetMapper/PostCompilationCopyHandler.php

@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types=1);
+
+namespace AppBundle\AssetMapper;
+
+use Symfony\Component\AssetMapper\Compressor\CompressorInterface;
+use Symfony\Component\AssetMapper\Path\PublicAssetsFilesystemInterface;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\Filesystem\Filesystem;
+
+/**
+ * cf. https://symfony.com/doc/current/frontend/asset_mapper.html#serving-assets-in-dev-vs-prod
+ */
+class PostCompilationCopyHandler implements PublicAssetsFilesystemInterface
+{
+    private Filesystem $filesystem;
+
+    /**
+     * @param string[] $extensionsToCompress
+     */
+    public function __construct(
+        #[Autowire('%kernel.project_dir%/../htdocs')]
+        private readonly string $publicDir,
+        private readonly ?CompressorInterface $compressor = null,
+        private readonly array $extensionsToCompress = [],
+    ) {
+        $this->filesystem = new Filesystem();
+    }
+
+    public function write(string $path, string $contents): void
+    {
+        $targetPath = $this->publicDir . '/' . ltrim($path, '/');
+
+        $this->filesystem->dumpFile($targetPath, $contents);
+        $this->compress($targetPath);
+    }
+
+    public function copy(string $originPath, string $path): void
+    {
+        $targetPath = $this->publicDir . '/' . ltrim($path, '/');
+
+        $this->filesystem->copy($originPath, $targetPath, true);
+        $this->compress($targetPath);
+    }
+
+    public function getDestinationPath(): string
+    {
+        return $this->publicDir;
+    }
+
+    private function compress(string $targetPath): void
+    {
+        foreach ($this->extensionsToCompress as $ext) {
+            if (!str_ends_with($targetPath, ".$ext")) {
+                continue;
+            }
+
+            $this->compressor?->compress($targetPath);
+
+            return;
+        }
+    }
+}

templates/admin/base_with_header.html.twig

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <title>Administration AFUP</title>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
+        <link rel="stylesheet" href="{{ asset('vendor/semantic-ui/dist/semantic.min.css') }}">
         <link rel="icon" type="image/png" href="/templates/administration/images/favicon-96x96.png" sizes="96x96" />
         <link rel="icon" type="image/svg+xml" href="/templates/administration/images/favicon.svg" />
         <link rel="shortcut icon" href="/templates/administration/images/favicon.ico" />
@@ -133,7 +133,7 @@
 
             {% block javascript %}
             <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
-                <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
+                <script src="{{ asset('vendor/semantic-ui/dist/semantic.min.js') }}"></script>
 
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
             <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

templates/base.html.twig

@@ -58,6 +58,6 @@
 
         {% block footer '' %}
         {% block javascripts '' %}
-{#        {% block importmap %}{{ importmap('app') }}{% endblock %}#}
+        {% block importmap %}{{ importmap('app') }}{% endblock %}
     </body>
 </html>