feature symfony#1449 [WIP] Upgrading to AssetMapper 6.4 (weaverryan)

This PR was squashed before being merged into the main branch.

Discussion
----------

[WIP] Upgrading to AssetMapper 6.4

Hi!

This converts from Encore to AssetMapper 6.4 (and also upgrading to Symfony 6.4 in general). This was the final product of a live stream walking through this process - https://www.youtube.com/watch?v=pyj1hvhcxGc

There are still some TODOs to finish. The biggest is the first, as Sass is quite embedded in there.

- [X] ~~A) convert Sass->CSS (not a requirement for AssetMapper, but Javier & I talked about this). Then remove SassBundle & bootstrap in `composer.json`. Probably many Sass variables should be converted to CSS variables. See symfony#1450 and symfony#1452~~. Much of this was done, Sass kept just for Bootstrap.
- [X] ~~B) In `assets/app.js`, I should just be able to import from the individual `bootstrap` package instead of requiring each part~~ It's fine how it is. When we upgrade, perhaps we could look at it then.
- [X] C) commit `public/assets/` or `assets/vendor/` so the code works after clone with ZERO other commands. Else, the user will need to run `importmap:install`.
- [x] D) update `devcontainer.json`
- [x] E) fix the `admin` entrypoint & layout

It's a busy month! If anyone is interested in trying to fix any of the above points, just let me know here or on Slack. I'd be more than happy to coach someone through them.

Cheers!

Commits
-------

634f238 [WIP] Upgrading to AssetMapper 6.4

Author: javiereguiluz

.devcontainer/devcontainer.json

@@ -5,16 +5,13 @@
     "ghcr.io/shyim/devcontainers-features/php:0": {
       "version": "8.1"
     },
-    "ghcr.io/devcontainers/features/node:1": {
-      "version": "lts"
-    }
   },
   "updateContentCommand": {
     "composer install": ["composer", "install"],
-    "yarn": ["yarn"]
+    "importmap:install": ["symfony", "console", "importmap:install"]
   },
   "postAttachCommand": {
     "server": "symfony server:start",
-    "yarn": ["yarn", "watch"]
+    "sass build": ["symfony", "console", "sass:build", "-w"]
   }
 }

.github/workflows/tests.yaml

@@ -61,6 +61,9 @@ jobs:
             - name: "Install dependencies"
               run: composer install --ansi --no-interaction --no-progress
 
+            - name: "Build Sass"
+              run: php bin/console sass:build
+
             - name: "Install PHPUnit"
               run: vendor/bin/simple-phpunit install
 

.gitignore

@@ -17,8 +17,8 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
-###> symfony/webpack-encore-bundle ###
-/node_modules/
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor
+###< symfony/asset-mapper ###

.php-cs-fixer.dist.php

@@ -18,6 +18,7 @@
     // exclude files generated by Symfony Flex recipes
     ->notPath('bin/console')
     ->notPath('public/index.php')
+    ->notPath('importmap.php')
 ;
 
 return (new PhpCsFixer\Config())

assets/admin.js

@@ -1,7 +1,10 @@
-import './styles/admin.scss';
+import './styles/admin.css';
 import 'typeahead.js';
 import Bloodhound from "bloodhound-js";
+import './js/jquery_global.js';
+import $ from 'jquery';
 import 'bootstrap-tagsinput';
+import './styles/bootstrap-tagsinput.css';
 
 $(function() {
     // Bootstrap-tagsinput initialization

assets/app.js

@@ -1,4 +1,8 @@
 import './styles/app.scss';
+import '@fortawesome/fontawesome-free/css/all.css';
+import '@fortawesome/fontawesome-free/css/v4-shims.css';
+import 'highlight.js/styles/github-dark-dimmed.css';
+import 'lato-font/css/lato-font.css';
 
 // loads the Bootstrap plugins
 import 'bootstrap/js/dist/alert';
@@ -15,6 +19,6 @@ import './js/highlight.js';
 import './js/doclinks.js';
 
 // start the Stimulus application
-import './bootstrap';
+import './bootstrap.js';
 
-import './js/flatpicker';
+import './js/flatpicker.js';

assets/bootstrap.js

@@ -1,11 +1,6 @@
-import { startStimulusApp } from '@symfony/stimulus-bridge';
+import { startStimulusApp } from '@symfony/stimulus-bundle';
 
-// Registers Stimulus controllers from controllers.json and in the controllers/ directory
-export const app = startStimulusApp(require.context(
-    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
-    true,
-    /\.[jt]sx?$/
-));
+const app = startStimulusApp();
 
 // register any custom, 3rd party controllers here
 // app.register('some_controller_name', SomeImportedController);

assets/js/flatpicker.js

@@ -1,5 +1,5 @@
 import 'flatpickr';
-import 'flatpickr/dist/flatpickr.css';
+import 'flatpickr/dist/flatpickr.min.css';
 import l10n from "flatpickr/dist/l10n";
 
 flatpickr.defaultConfig.animate = window.navigator.userAgent.indexOf('MSIE') === -1;

assets/js/jquery_global.js

@@ -0,0 +1,5 @@
+// bootstrap-tagsinput is old and requires a global jQuery object
+// this is done in a separate file so it will fully run before the rest
+// of the code (i.e. the code that imports bootstrap-tagsinput)
+import $ from 'jquery';
+window.jQuery = $;

assets/styles/_variables.scss

@@ -3,10 +3,6 @@
 // see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
 $web-font-path: 'data:text/css;base64,';
 
-// Make sure the bootstrap-sass and lato fonts are resolved correctly
-//$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-$lato-font-path: '~lato-font/fonts';
-
 $font-default: 19px;
 
 $font-heading: 2.5rem;
@@ -27,4 +23,4 @@ $btn-padding-x: 10px;
 $btn-padding-y-sm: 9px;
 $btn-padding-x-sm: 6px;
 
-@import "~bootswatch/dist/flatly/variables";
+@import "./bootswatch/variables";