Replace JS toolchain by asset-mapper when testing ux-turbo

Author: nicolas-grekas

.github/workflows/test-turbo.yml

@@ -65,8 +65,6 @@ jobs:
             - name: Checkout
               uses: actions/checkout@v4
 
-            - run: corepack enable
-
             - name: Setup PHP
               uses: shivammathur/setup-php@v2
               with:
@@ -81,25 +79,9 @@ jobs:
                 working-directory: src/Turbo
                 dependency-versions: ${{ matrix.dependency-version }}
 
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-
-            - uses: actions/cache@v4
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
-
             - name: Install JavaScript dependencies
               working-directory: src/Turbo/tests/app
-              run: touch yarn.lock && yarn install --mode update-lockfile && yarn install
-
-            - name: Build JavaScript
-              working-directory: src/Turbo/tests/app
-              run: yarn build
+              run: php public/index.php importmap:install
 
             - name: Create DB
               working-directory: src/Turbo/tests/app

src/Turbo/.gitignore

@@ -5,8 +5,7 @@
 /composer.lock
 /phpunit.xml
 /vendor/
-/tests/app/var
+/tests/app/assets/vendor/
+/tests/app/var/
 /tests/app/public/build/
 node_modules/
-package-lock.json
-yarn.lock

src/Turbo/composer.json

@@ -41,6 +41,7 @@
         "doctrine/doctrine-bundle": "^2.4.3",
         "doctrine/orm": "^2.8 | 3.0",
         "phpstan/phpstan": "^1.10",
+        "symfony/asset-mapper": "^6.4|^7.0",
         "symfony/debug-bundle": "^5.4|^6.0|^7.0",
         "symfony/form": "^5.4|^6.0|^7.0",
         "symfony/framework-bundle": "^5.4|^6.0|^7.0",

src/Turbo/tests/app/Kernel.php

@@ -67,10 +67,13 @@ protected function configureContainer(ContainerConfigurator $container): void
     {
         $container->extension('framework', [
             'secret' => 'ChangeMe',
-            'test' => 'test' === ($_SERVER['APP_ENV'] ?? 'dev'),
+            'test' => 'test' === $this->environment,
             'router' => [
                 'utf8' => true,
             ],
+            'asset_mapper' => [
+                'paths' => ['assets/']
+            ],
             'profiler' => [
                 'only_exceptions' => false,
             ],

src/Turbo/tests/app/assets/controllers.json

@@ -0,0 +1,5 @@
+{
+    "controllers": {
+    },
+    "entrypoints": []
+}

src/Turbo/tests/app/assets/controllers/.gitignore

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * Returns the importmap for this application.
+ *
+ * - "path" is a path inside the asset mapper system. Use the
+ *     "debug:asset-map" command to see the full list of paths.
+ *
+ * - "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.
+ */
+return [
+    'app' => [
+        'path' => './assets/app.js',
+        'entrypoint' => true,
+    ],
+    '@hotwired/stimulus' => [
+        'version' => '3.2.2',
+    ],
+    '@symfony/stimulus-bundle' => [
+        'path' => '../../vendor/symfony/stimulus-bundle/assets/dist/loader.js',
+    ],
+    '@symfony/ux-turbo/dist/turbo_stream_controller' => [
+        'path' => '../../assets/dist/turbo_stream_controller.js'
+    ],
+    '@hotwired/turbo' => [
+        'version' => '7.3.0',
+    ],
+];

src/Turbo/tests/app/importmap.php

@@ -4,7 +4,9 @@
         <meta charset="UTF-8">
         <title>Symfony UX Turbo</title>
         {% block stylesheets %}{% endblock %}
-        {{ encore_entry_script_tags('app') }}
+        {% block javascripts %}
+            {% block importmap %}{{ importmap('app') }}{% endblock %}
+        {% endblock %}
     </head>
     <body>
         <nav id="navigation">