Upgrade to Symfony 6.4 & Asset Mapper (#2)

To experiment with asset mapper & stenope, according to
StenopePHP/Stenope#173 issue.

Also, this will be the future of assets handling with Symfony, no more
bundler implied :
symfony/demo#1449 (comment)

.eslintignore

@@ -0,0 +1 @@
+/assets/vendor/

.eslintrc.json

@@ -7,7 +7,6 @@
         "eslint:recommended",
         "plugin:json/recommended"
     ],
-    "parser": "babel-eslint",
     "parserOptions": {
         "ecmaVersion": 2017,
         "sourceType": "module"

.github/workflows/deploy.yaml

@@ -17,11 +17,6 @@ jobs:
       - name: 'Checkout'
         uses: actions/checkout@v3
 
-      - name: 'Setup node'
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-
       - name: 'Setup PHP'
         uses: shivammathur/setup-php@v2
         with:
@@ -45,40 +40,34 @@ jobs:
           path: public/resized
           key: resized-images-${{ secrets.CACHE_VERSION }}
 
-      - name: 'Cache NPM dependencies'
-        uses: actions/cache@v2
-        with:
-          path: ~/.npm
-          key: node-${{ hashFiles('package-lock.json') }}
-
       - name: 'Install dependencies'
         run: |
           echo "::group::composer install"
             composer install --no-progress --ansi
           echo "::endgroup::"
 
-          echo "::group::npm install"
-            npm install --color=always --no-progress --no-audit
+          echo "::group::importmap install"
+            symfony console importmap:install --ansi
           echo "::endgroup::"
 
       - name: 'Warmup'
         run: |
           echo "::group::warmup production env"
-            npx encore production --color
             bin/console cache:clear --ansi
             bin/console cache:warmup --ansi
+            bin/console sass:build --ansi
+            bin/console asset-map:compile --ansi
           echo "::endgroup::"
         env:
-          NODE_ENV: production
           APP_ENV: prod
-          WEBPACK_PUBLIC_PATH: /${{ github.event.repository.name }}/build
 
       - name: 'Build static site'
         run: bin/console stenope:build --no-interaction -vvv --ansi
         env:
           APP_ENV: prod
           # Replace with your GH Pages URL:
           ROUTER_DEFAULT_URI: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}
+          APP_BASE_PATH: /${{ github.event.repository.name }}
 
       # https://github.com/marketplace/actions/deploy-to-github-pages
       - name: '🚀 Deploy'

.github/workflows/tests.yaml

@@ -47,12 +47,6 @@ jobs:
           path: public/resized
           key: resized-images-tests-${{ secrets.CACHE_VERSION }}
 
-      - name: 'Cache blurhash images'
-        uses: actions/cache@v2
-        with:
-          path: var/cache/pools/app
-          key: resized-blurhash-tests-${{ secrets.CACHE_VERSION }}
-
       - name: 'Install dependencies'
         id: deps
         run: |
@@ -68,6 +62,10 @@ jobs:
             npm install --color=always --no-progress --no-audit
           echo "::endgroup::"
 
+          echo "::group::importmap install"
+            symfony console importmap:install --ansi
+          echo "::endgroup::"
+
       - name: 'Warmup'
         run: |
           bin/console cache:clear --ansi --no-warmup
@@ -108,7 +106,8 @@ jobs:
 
       - name: 'Check build static'
         run: |
-          npx encore production --color
+          bin/console sass:build --ansi
+          bin/console asset-map:compile --ansi
           bin/console stenope:build --no-interaction -vvv --ansi
         env:
           APP_ENV: prod

.gitignore

@@ -1,4 +1,3 @@
-
 ###> symfony/framework-bundle ###
 /.env.local
 /.env.local.php
@@ -13,14 +12,6 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
-
-###> symfony/webpack-encore-bundle ###
-/node_modules/
-/public/build/
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###
-
 /build/
 
 ###> friendsofphp/php-cs-fixer ###
@@ -31,3 +22,14 @@ yarn-error.log
 ###> glide ###
 /public/resized
 ###< glide ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor
+###< symfony/asset-mapper ###
+
+/node_modules/
+
+###> phpstan/phpstan ###
+phpstan.neon
+###< phpstan/phpstan ###

.php-cs-fixer.dist.php

@@ -4,6 +4,7 @@
     ->in(__DIR__)
     ->exclude('var')
     ->exclude('node_modules')
+    ->notPath('importmap.php')
 ;
 
 return (new PhpCsFixer\Config())

Makefile

@@ -9,76 +9,80 @@ include ./.make/help.mk
 ###########
 
 ## Install dependencies
-install: install.composer install.npm
+install: install.composer install.npm install.assets
 
 install.composer:
 	symfony composer install
 
 install.npm:
 	npm install
 
+install.assets:
+	symfony console importmap:install
+
 ## Update dependencies
-update: update.composer update.npm
+update: update.composer
 
 update.composer:
 	symfony composer update
 
-update.npm:
-	npm update
-
 ###############
 # Development #
 ###############
 
 ## Dev - Start the whole application for development purposes (local only)
-serve:
+serve: clear.assets
 	# https://www.npmjs.com/package/concurrently
-	npx concurrently "make serve.php" "make serve.assets" --names="Symfony,Webpack" --prefix=name --kill-others --kill-others-on-fail
+	npx concurrently "make serve.php" "make serve.assets" --names="Symfony,Assets" --prefix=name --kill-others --kill-others-on-fail
 
 ## Dev - Start Symfony server
 serve.php:
 	symfony server:start --no-tls
 
-## Dev - Start webpack dev server with HMR (Hot reload)
+## Dev - Build Saas files
 serve.assets:
-	npx encore dev-server --mode=development
+	symfony console sass:build --watch
 
-## Dev - Watch assets
-watch.assets:
-	npm run watch
+## Clear - Clear the assets
+clear.assets:
+	rm -rf public/assets
 
 ## Clear - Clear the build dir and assets
-clear.build:
-	rm -rf build public/build
+clear.build: clear.assets
+	rm -rf build
 
 ## Clear - Clear resized images cache
 clear.images:
 	rm -rf public/resized
 
+## Clear - Clear symfony cache
+clear.cache:
+	symfony console cache:clear
+
 #########
 # Build #
 #########
 
 ## Build - Build assets
+build.assets: export APP_ENV = prod
 build.assets:
-	npm run build
+	symfony console sass:build
+	symfony console asset-map:compile
 
 ## Build - Build static site
 build.content: export APP_ENV = prod
-build.content:
-	rm -rf public/resized
-	symfony console cache:clear
+build.content: clear.images clear.cache
 	symfony console stenope:build
 
 ## Build - Build static site without resizing images, for moar speed
 build.content.without-images: export APP_ENV = prod
 build.content.without-images: export GLIDE_PRE_GENERATE_CACHE = 0
-build.content.without-images:
-	symfony console cache:clear
+build.content.without-images: clear.cache
 	symfony console stenope:build
 
 ## Build - Build static site with assets
-build.static: build.assets build.content
+build.static: export APP_ENV = prod
+build.static: clear.cache build.assets build.content
 
 ## Serve - Serve the static version
 serve.static:
@@ -131,10 +135,10 @@ lint.phpstan@integration:
 	symfony php vendor/bin/phpstan --no-progress --no-interaction analyse
 
 lint.eslint:
-	npx eslint assets/js --ext .js,.json --fix
+	npx eslint assets --ext .js,.json --fix
 
 lint.eslint@integration:
-	npx eslint assets/js --ext .js,.json
+	npx eslint assets --ext .js,.json
 
 ########
 # Test #

assets/app.js

@@ -0,0 +1,2 @@
+// start the Stimulus application
+import './bootstrap.js';

assets/bootstrap.js

@@ -0,0 +1,3 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+startStimulusApp();

assets/styles/app.scss

@@ -0,0 +1,9 @@
+// Remove the skeleton CSS
+@import "skeleton-theme";
+
+// and write your own CSS here
+
+// Make the mini Sf toolbar more visible on white background
+.sf-minitoolbar {
+  background-color: #8d8d8d !important;
+}

bin/phpunit

@@ -6,9 +6,13 @@ if (!ini_get('date.timezone')) {
 }
 
 if (is_file(dirname(__DIR__).'/vendor/phpunit/phpunit/phpunit')) {
-    define('PHPUNIT_COMPOSER_INSTALL', dirname(__DIR__).'/vendor/autoload.php');
-    require PHPUNIT_COMPOSER_INSTALL;
-    PHPUnit\TextUI\Command::main();
+    if (PHP_VERSION_ID >= 80000) {
+        require dirname(__DIR__).'/vendor/phpunit/phpunit/phpunit';
+    } else {
+        define('PHPUNIT_COMPOSER_INSTALL', dirname(__DIR__).'/vendor/autoload.php');
+        require PHPUNIT_COMPOSER_INSTALL;
+        PHPUnit\TextUI\Command::main();
+    }
 } else {
     if (!is_file(dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php')) {
         echo "Unable to find the `simple-phpunit.php` script in `vendor/symfony/phpunit-bridge/bin/`.\n";