[WIP] Upgrading to AssetMapper 6.4

Author: weaverryan

.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";