[AssetMapper] surrounding importmap() in a block

[weaverryan]

Q	A
License	MIT
Doc issue/PR	symfony/symfony-docs#19252

If you want to have page-specific JS, you need to override {{ importmap() }} and NOT call it twice. If you override javascripts and do not call parent(), it could accidentally not include some other JS you have. So, the proposal is to wrap {{ importmap() }} in its own block so you can override it.

[github-actions]

Thanks for the PR 😍

How to test these changes in your application

1. Define the SYMFONY_ENDPOINT environment variable:

   # On Unix-like (BSD, Linux and macOS)
   export SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1268/index.json
   # On Windows
   SET SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1268/index.json

2. Install the package(s) related to this recipe:

   composer req 'symfony/flex:^1.16'
   composer req 'symfony/asset-mapper:^6.4'

3. Don't forget to unset the SYMFONY_ENDPOINT environment variable when done:

   # On Unix-like (BSD, Linux and macOS)
   unset SYMFONY_ENDPOINT
   # On Windows
   SET SYMFONY_ENDPOINT=

Diff between recipe versions

In order to help with the review stage, I'm in charge of computing the diff between the various versions of patched recipes.
I'm going keep this comment up to date with any updates of the attached patch.

symfony/asset-mapper

6.3 vs 6.4

diff --git a/symfony/asset-mapper/6.3/assets/app.js b/symfony/asset-mapper/6.4/assets/app.js
index cb0082a..e3b03ad 100644
--- a/symfony/asset-mapper/6.3/assets/app.js
+++ b/symfony/asset-mapper/6.4/assets/app.js
@@ -4,4 +4,6 @@
  * This file will be included onto the page via the importmap() Twig function,
  * which should already be in your base.html.twig.
  */
+import './styles/app.css'
+
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉')
diff --git a/symfony/asset-mapper/6.3/importmap.php b/symfony/asset-mapper/6.4/importmap.php
index 5c2c21d..9be0d4c 100644
--- a/symfony/asset-mapper/6.3/importmap.php
+++ b/symfony/asset-mapper/6.4/importmap.php
@@ -6,8 +6,8 @@
  * - "path" is a path inside the asset mapper system. Use the
  *     "debug:asset-map" command to see the full list of paths.
  *
- * - "preload" set to true for any modules that are loaded on the initial
- *     page load to help the browser download them earlier.
+ * - "entrypoint" (JavaScript only) set to true for any module that will
+ *     be used as an "entrypoint" (and passed to the importmap() Twig function).
  *
  * The "importmap:require" command can be used to add new entries to this file.
  *
@@ -15,7 +15,7 @@
  */
 return [
     'app' => [
-        'path' => 'app.js',
-        'preload' => true,
+        'path' => './assets/app.js',
+        'entrypoint' => true,
     ],
 ];
diff --git a/symfony/asset-mapper/6.3/manifest.json b/symfony/asset-mapper/6.4/manifest.json
index c6fb477..8943ae7 100644
--- a/symfony/asset-mapper/6.3/manifest.json
+++ b/symfony/asset-mapper/6.4/manifest.json
@@ -6,22 +6,16 @@
     },
     "aliases": ["asset-mapper", "importmap"],
     "gitignore": [
-        "/%PUBLIC_DIR%/assets/"
+        "/%PUBLIC_DIR%/assets/",
+        "/assets/vendor"
     ],
     "add-lines": [
         {
             "file": "templates/base.html.twig",
-            "content": "            {{ importmap() }}",
+            "content": "{% block importmap %}{{ importmap('app') }}{% endblock %}",
             "position": "after_target",
             "target": "{% block javascripts %}",
             "warn_if_missing": true
-        },
-        {
-            "file": "templates/base.html.twig",
-            "content": "            <link rel=\"stylesheet\" href=\"{{ asset('styles/app.css') }}\">",
-            "position": "after_target",
-            "target": "{% block stylesheets %}",
-            "warn_if_missing": true
         }
     ],
     "conflict": {