[CI] Ensure JS packages (either from vendor/ or npm versions) can be installed/used inside an Encore App

.github/build-packages.php

@@ -9,12 +9,12 @@
 use Symfony\Component\Finder\Finder;
 
 $finder = (new Finder())
-    ->in([__DIR__.'/../src/*/', __DIR__.'/../src/*/src/Bridge/*/', __DIR__.'/../ux.symfony.com/'])
+    ->in([__DIR__.'/../src/*/', __DIR__.'/../src/*/src/Bridge/*/', __DIR__.'/../ux.symfony.com/', __DIR__.'/../test_apps/*/'])
     ->depth(0)
     ->name('composer.json')
 ;
 
-// 1. Find all UX packages 
+// 1. Find all UX packages
 $uxPackages = [];
 foreach ($finder as $composerFile) {
     $json = file_get_contents($composerFile->getPathname());
@@ -54,7 +54,7 @@
             $packageData[$key][$packageName] = '@dev';
         }
     }
-    
+
     if ($repositories) {
         $packageData['repositories'] = $repositories;
     }

.github/workflows/test.yaml

@@ -136,7 +136,88 @@ jobs:
                 cache: 'yarn'
                 cache-dependency-path: |
                   yarn.lock
-                  **/package.json
+                  package.json
+                  src/**/package.json
             - run: yarn --immutable
             - run: yarn playwright install
             - run: yarn test
+
+    test-app-encore-app:
+      name: "Test Apps / Encore (${{ matrix.name}})"
+      runs-on: ubuntu-latest
+      strategy:
+        fail-fast: false
+        matrix:
+          include:
+            - name: Internal, from "vendor/"
+              ux-packages-source: php-vendor
+            - name: External, from "npm add"
+              ux-packages-source: js-packages
+      steps:
+        # Setup
+        - uses: actions/checkout@v4
+
+        - run: corepack enable
+
+        - uses: actions/setup-node@v4
+          with:
+            cache: 'yarn'
+            cache-dependency-path: |
+              yarn.lock
+              package.json
+              src/**/package.json
+              test_apps/encore-app/package.json
+
+        - uses: shivammathur/setup-php@v2
+
+        - name: Install root dependencies
+          uses: ramsey/composer-install@v3
+          with:
+            working-directory: ${{ github.workspace }}
+
+        - name: Build root packages
+          run: php .github/build-packages.php
+          working-directory: ${{ github.workspace }}
+
+        - uses: ramsey/composer-install@v3
+          with:
+            dependency-versions: 'highest'
+            working-directory: test_apps/encore-app
+
+        - if: matrix.ux-packages-source == 'js-packages'
+          working-directory: test_apps/encore-app
+          run: |
+            PACKAGES_TO_INSTALL=''
+            for PACKAGE in $(cd ../..; yarn workspaces list --no-private --json); do
+              PACKAGE_DIR=../../$(echo $PACKAGE | jq -r '.location')
+              PACKAGES_TO_INSTALL="$PACKAGES_TO_INSTALL $PACKAGE_DIR"
+            done
+            echo "Installing packages: $PACKAGES_TO_INSTALL"
+            yarn add --dev $PACKAGES_TO_INSTALL
+
+        # Validations
+        - name: Ensure UX packages are installed from "${{ matrix.ux-packages-source == 'php-vendor' && 'vendor/symfony/ux-...' || '../../../src/**/assets' }}"
+          working-directory: test_apps/encore-app
+          run: |
+            for PACKAGE in $(cat package.json | jq -c '(.dependencies // {}) + (.devDependencies // {}) | to_entries[] | select(.key | startswith("@symfony/ux-")) | {name: .key, version: .value}'); do
+              PACKAGE_NAME=$(echo $PACKAGE | jq -r '.name')
+              PACKAGE_VERSION=$(echo $PACKAGE | jq -r '.version')
+
+              echo -n "Checking $PACKAGE_NAME@$PACKAGE_VERSION..."
+              if [[ $PACKAGE_VERSION == $EXPECTED_PATTERN* ]]; then
+                echo " OK"
+              else
+                echo " KO"
+                echo "The package version of $PACKAGE_NAME must starts with the pattern (e.g.: $EXPECTED_PATTERN), got $PACKAGE_VERSION instead."
+                exit 1
+              fi
+            done;
+          env:
+            EXPECTED_PATTERN: ${{ matrix.ux-packages-source == 'php-vendor' && 'file:vendor/symfony/*' || '../../src/*' }}
+
+        - name: Run Encore
+          working-directory: test_apps/encore-app
+          run: |
+            YARN_ENABLE_HARDENED_MODE=0 YARN_ENABLE_IMMUTABLE_INSTALLS=0 yarn || (echo "Unable to install Yarn dependencies" && exit 1)
+            yarn encore dev || (echo "Unable to build Encore assets (dev)" && exit 1)
+            yarn encore production || (echo "Unable to build Encore assets (production)" && exit 1)

test_apps/encore-app/.env

@@ -0,0 +1,47 @@
+# In all environments, the following files are loaded if they exist,
+# the latter taking precedence over the former:
+#
+#  * .env                contains default values for the environment variables needed by the app
+#  * .env.local          uncommitted file with local overrides
+#  * .env.$APP_ENV       committed environment-specific defaults
+#  * .env.$APP_ENV.local uncommitted environment-specific overrides
+#
+# Real environment variables win over .env files.
+#
+# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
+# https://symfony.com/doc/current/configuration/secrets.html
+#
+# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
+# https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
+
+###> symfony/framework-bundle ###
+APP_ENV=dev
+APP_SECRET=
+###< symfony/framework-bundle ###
+
+###> symfony/ux-google-map ###
+# Options available at https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Google/README.md
+#
+GOOGLE_MAPS_API_KEY="# Get your API key at https://developers.google.com/maps/documentation/javascript/get-api-key"
+UX_MAP_DSN=google://%env(GOOGLE_MAPS_API_KEY)%@default
+###< symfony/ux-google-map ###
+
+###> symfony/ux-leaflet-map ###
+# Options available at https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Leaflet/README.md
+#
+UX_MAP_DSN=leaflet://default
+###< symfony/ux-leaflet-map ###
+
+###> symfony/mercure-notifier ###
+# MERCURE_DSN=mercure://default
+###< symfony/mercure-notifier ###
+
+###> symfony/mercure-bundle ###
+# See https://symfony.com/doc/current/mercure.html#configuration
+# The URL of the Mercure hub, used by the app to publish updates (can be a local URL)
+MERCURE_URL=https://example.com/.well-known/mercure
+# The public URL of the Mercure hub, used by the browser to connect
+MERCURE_PUBLIC_URL=https://example.com/.well-known/mercure
+# The secret used to sign the JWTs
+MERCURE_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"
+###< symfony/mercure-bundle ###

test_apps/encore-app/.env.dev

@@ -0,0 +1,4 @@
+
+###> symfony/framework-bundle ###
+APP_SECRET=ccb30b91aeb20e033fe10056ae0614e9
+###< symfony/framework-bundle ###

test_apps/encore-app/.gitignore

@@ -0,0 +1,28 @@
+composer.lock
+
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+/node_modules
+yarn-error.log
+
+###> symfony/framework-bundle ###
+/.env.local
+/.env.local.php
+/.env.*.local
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

test_apps/encore-app/assets/app.js

@@ -0,0 +1,22 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+import { registerVueControllerComponents } from '@symfony/ux-vue';
+import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
+import { registerReactControllerComponents } from '@symfony/ux-react';
+import './bootstrap.js';
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.css';
+import { THIS_FIELD_IS_MISSING, trans } from './translator';
+
+registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
+registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));
+registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
+
+document.addEventListener('DOMContentLoaded', () => {
+    console.log(trans(THIS_FIELD_IS_MISSING));
+})

test_apps/encore-app/assets/bootstrap.js

@@ -0,0 +1,10 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// 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?$/
+));
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

test_apps/encore-app/assets/controllers.json

@@ -0,0 +1,123 @@
+{
+    "controllers": {
+        "@symfony/ux-autocomplete": {
+            "autocomplete": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "tom-select/dist/css/tom-select.default.css": true,
+                    "tom-select/dist/css/tom-select.bootstrap4.css": false,
+                    "tom-select/dist/css/tom-select.bootstrap5.css": false
+                }
+            }
+        },
+        "@symfony/ux-chartjs": {
+            "chart": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-cropperjs": {
+            "cropper": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "cropperjs/dist/cropper.min.css": true,
+                    "@symfony/ux-cropperjs/dist/style.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-dropzone": {
+            "dropzone": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-dropzone/dist/style.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-google-map": {
+            "map": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
+        "@symfony/ux-lazy-image": {
+            "lazy-image": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-leaflet-map": {
+            "map": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
+        "@symfony/ux-live-component": {
+            "live": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-live-component/dist/live.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-notify": {
+            "notify": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-react": {
+            "react": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-svelte": {
+            "svelte": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-swup": {
+            "swup": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-toggle-password": {
+            "toggle-password": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-toggle-password/dist/style.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager"
+            },
+            "mercure-turbo-stream": {
+                "enabled": false,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-typed": {
+            "typed": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-vue": {
+            "vue": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        }
+    },
+    "entrypoints": []
+}