Skip to content

Commit 0c66d96

Browse files
KocalKocal
committed
minor #2613 [CI] Ensure JS packages (either from vendor/ or npm versions) can be installed/used inside an Encore App (Kocal)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [CI] Ensure JS packages (either from `vendor/` or npm versions) can be installed/used inside an Encore App | Q | A | ------------- | --- | Bug fix? | no | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Issues | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> Follow #2612 This PR add a new E2E test to ensure, inside a Symfony app, that our JS packages (either from `vendor/symfony/ux-*` or from standalone ones from `src/*/assets`/npm) are usable inside a real application using a `package.json` and Encore. Commits ------- 2a65cb2 [CI] Add "test-app-encore-app" job, to ensure that JS packages are usable from `vendor/symfony/*` or from standalone JS packages 3720ba6 Update build-packages.php to cover `test_apps/*/` c7debbf [TestApps] Introduce an EncoreApp with all UX PHP and JS packages required
2 parents b536b09 + 2a65cb2 commit 0c66d96

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+9777
-4
lines changed

‎.github/build-packages.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
use Symfony\Component\Finder\Finder;
1010

1111
$finder = (new Finder())
12-
->in([__DIR__.'/../src/*/', __DIR__.'/../src/*/src/Bridge/*/', __DIR__.'/../ux.symfony.com/'])
12+
->in([__DIR__.'/../src/*/', __DIR__.'/../src/*/src/Bridge/*/', __DIR__.'/../ux.symfony.com/', __DIR__.'/../test_apps/*/'])
1313
->depth(0)
1414
->name('composer.json')
1515
;
1616

17-
// 1. Find all UX packages
17+
// 1. Find all UX packages
1818
$uxPackages = [];
1919
foreach ($finder as $composerFile) {
2020
$json = file_get_contents($composerFile->getPathname());
@@ -54,7 +54,7 @@
5454
$packageData[$key][$packageName] = '@dev';
5555
}
5656
}
57-
57+
5858
if ($repositories) {
5959
$packageData['repositories'] = $repositories;
6060
}

‎.github/workflows/test.yaml‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,88 @@ jobs:
136136
cache: 'yarn'
137137
cache-dependency-path: |
138138
yarn.lock
139-
**/package.json
139+
package.json
140+
src/**/package.json
140141
- run: yarn --immutable
141142
- run: yarn playwright install
142143
- run: yarn test
144+
145+
test-app-encore-app:
146+
name: "Test Apps / Encore (${{ matrix.name}})"
147+
runs-on: ubuntu-latest
148+
strategy:
149+
fail-fast: false
150+
matrix:
151+
include:
152+
- name: Internal, from "vendor/"
153+
ux-packages-source: php-vendor
154+
- name: External, from "npm add"
155+
ux-packages-source: js-packages
156+
steps:
157+
# Setup
158+
- uses: actions/checkout@v4
159+
160+
- run: corepack enable
161+
162+
- uses: actions/setup-node@v4
163+
with:
164+
cache: 'yarn'
165+
cache-dependency-path: |
166+
yarn.lock
167+
package.json
168+
src/**/package.json
169+
test_apps/encore-app/package.json
170+
171+
- uses: shivammathur/setup-php@v2
172+
173+
- name: Install root dependencies
174+
uses: ramsey/composer-install@v3
175+
with:
176+
working-directory: ${{ github.workspace }}
177+
178+
- name: Build root packages
179+
run: php .github/build-packages.php
180+
working-directory: ${{ github.workspace }}
181+
182+
- uses: ramsey/composer-install@v3
183+
with:
184+
dependency-versions: 'highest'
185+
working-directory: test_apps/encore-app
186+
187+
- if: matrix.ux-packages-source == 'js-packages'
188+
working-directory: test_apps/encore-app
189+
run: |
190+
PACKAGES_TO_INSTALL=''
191+
for PACKAGE in $(cd ../..; yarn workspaces list --no-private --json); do
192+
PACKAGE_DIR=../../$(echo $PACKAGE | jq -r '.location')
193+
PACKAGES_TO_INSTALL="$PACKAGES_TO_INSTALL $PACKAGE_DIR"
194+
done
195+
echo "Installing packages: $PACKAGES_TO_INSTALL"
196+
yarn add --dev $PACKAGES_TO_INSTALL
197+
198+
# Validations
199+
- name: Ensure UX packages are installed from "${{ matrix.ux-packages-source == 'php-vendor' && 'vendor/symfony/ux-...' || '../../../src/**/assets' }}"
200+
working-directory: test_apps/encore-app
201+
run: |
202+
for PACKAGE in $(cat package.json | jq -c '(.dependencies // {}) + (.devDependencies // {}) | to_entries[] | select(.key | startswith("@symfony/ux-")) | {name: .key, version: .value}'); do
203+
PACKAGE_NAME=$(echo $PACKAGE | jq -r '.name')
204+
PACKAGE_VERSION=$(echo $PACKAGE | jq -r '.version')
205+
206+
echo -n "Checking $PACKAGE_NAME@$PACKAGE_VERSION..."
207+
if [[ $PACKAGE_VERSION == $EXPECTED_PATTERN* ]]; then
208+
echo " OK"
209+
else
210+
echo " KO"
211+
echo "The package version of $PACKAGE_NAME must starts with the pattern (e.g.: $EXPECTED_PATTERN), got $PACKAGE_VERSION instead."
212+
exit 1
213+
fi
214+
done;
215+
env:
216+
EXPECTED_PATTERN: ${{ matrix.ux-packages-source == 'php-vendor' && 'file:vendor/symfony/*' || '../../src/*' }}
217+
218+
- name: Run Encore
219+
working-directory: test_apps/encore-app
220+
run: |
221+
YARN_ENABLE_HARDENED_MODE=0 YARN_ENABLE_IMMUTABLE_INSTALLS=0 yarn || (echo "Unable to install Yarn dependencies" && exit 1)
222+
yarn encore dev || (echo "Unable to build Encore assets (dev)" && exit 1)
223+
yarn encore production || (echo "Unable to build Encore assets (production)" && exit 1)

‎test_apps/encore-app/.env‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# In all environments, the following files are loaded if they exist,
2+
# the latter taking precedence over the former:
3+
#
4+
# * .env contains default values for the environment variables needed by the app
5+
# * .env.local uncommitted file with local overrides
6+
# * .env.$APP_ENV committed environment-specific defaults
7+
# * .env.$APP_ENV.local uncommitted environment-specific overrides
8+
#
9+
# Real environment variables win over .env files.
10+
#
11+
# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
12+
# https://symfony.com/doc/current/configuration/secrets.html
13+
#
14+
# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
15+
# https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
16+
17+
###> symfony/framework-bundle ###
18+
APP_ENV=dev
19+
APP_SECRET=
20+
###< symfony/framework-bundle ###
21+
22+
###> symfony/ux-google-map ###
23+
# Options available at https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Google/README.md
24+
#
25+
GOOGLE_MAPS_API_KEY="# Get your API key at https://developers.google.com/maps/documentation/javascript/get-api-key"
26+
UX_MAP_DSN=google://%env(GOOGLE_MAPS_API_KEY)%@default
27+
###< symfony/ux-google-map ###
28+
29+
###> symfony/ux-leaflet-map ###
30+
# Options available at https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Leaflet/README.md
31+
#
32+
UX_MAP_DSN=leaflet://default
33+
###< symfony/ux-leaflet-map ###
34+
35+
###> symfony/mercure-notifier ###
36+
# MERCURE_DSN=mercure://default
37+
###< symfony/mercure-notifier ###
38+
39+
###> symfony/mercure-bundle ###
40+
# See https://symfony.com/doc/current/mercure.html#configuration
41+
# The URL of the Mercure hub, used by the app to publish updates (can be a local URL)
42+
MERCURE_URL=https://example.com/.well-known/mercure
43+
# The public URL of the Mercure hub, used by the browser to connect
44+
MERCURE_PUBLIC_URL=https://example.com/.well-known/mercure
45+
# The secret used to sign the JWTs
46+
MERCURE_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"
47+
###< symfony/mercure-bundle ###

‎test_apps/encore-app/.env.dev‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
###> symfony/framework-bundle ###
3+
APP_SECRET=ccb30b91aeb20e033fe10056ae0614e9
4+
###< symfony/framework-bundle ###

‎test_apps/encore-app/.gitignore‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
composer.lock
2+
3+
.yarn/*
4+
!.yarn/cache
5+
!.yarn/patches
6+
!.yarn/plugins
7+
!.yarn/releases
8+
!.yarn/sdks
9+
!.yarn/versions
10+
/node_modules
11+
yarn-error.log
12+
13+
###> symfony/framework-bundle ###
14+
/.env.local
15+
/.env.local.php
16+
/.env.*.local
17+
/config/secrets/prod/prod.decrypt.private.php
18+
/public/bundles/
19+
/var/
20+
/vendor/
21+
###< symfony/framework-bundle ###
22+
23+
###> symfony/webpack-encore-bundle ###
24+
/node_modules/
25+
/public/build/
26+
npm-debug.log
27+
yarn-error.log
28+
###< symfony/webpack-encore-bundle ###

‎test_apps/encore-app/assets/app.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Welcome to your app's main JavaScript file!
3+
*
4+
* We recommend including the built version of this JavaScript file
5+
* (and its CSS file) in your base layout (base.html.twig).
6+
*/
7+
import { registerVueControllerComponents } from '@symfony/ux-vue';
8+
import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
9+
import { registerReactControllerComponents } from '@symfony/ux-react';
10+
import './bootstrap.js';
11+
12+
// any CSS you import will output into a single css file (app.css in this case)
13+
import './styles/app.css';
14+
import { THIS_FIELD_IS_MISSING, trans } from './translator';
15+
16+
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
17+
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));
18+
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
19+
20+
document.addEventListener('DOMContentLoaded', () => {
21+
console.log(trans(THIS_FIELD_IS_MISSING));
22+
})

‎test_apps/encore-app/assets/bootstrap.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { startStimulusApp } from '@symfony/stimulus-bridge';
2+
3+
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
4+
export const app = startStimulusApp(require.context(
5+
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
6+
true,
7+
/\.[jt]sx?$/
8+
));
9+
// register any custom, 3rd party controllers here
10+
// app.register('some_controller_name', SomeImportedController);

‎test_apps/encore-app/assets/controllers.json‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
{
2+
"controllers": {
3+
"@symfony/ux-autocomplete": {
4+
"autocomplete": {
5+
"enabled": true,
6+
"fetch": "eager",
7+
"autoimport": {
8+
"tom-select/dist/css/tom-select.default.css": true,
9+
"tom-select/dist/css/tom-select.bootstrap4.css": false,
10+
"tom-select/dist/css/tom-select.bootstrap5.css": false
11+
}
12+
}
13+
},
14+
"@symfony/ux-chartjs": {
15+
"chart": {
16+
"enabled": true,
17+
"fetch": "eager"
18+
}
19+
},
20+
"@symfony/ux-cropperjs": {
21+
"cropper": {
22+
"enabled": true,
23+
"fetch": "eager",
24+
"autoimport": {
25+
"cropperjs/dist/cropper.min.css": true,
26+
"@symfony/ux-cropperjs/dist/style.min.css": true
27+
}
28+
}
29+
},
30+
"@symfony/ux-dropzone": {
31+
"dropzone": {
32+
"enabled": true,
33+
"fetch": "eager",
34+
"autoimport": {
35+
"@symfony/ux-dropzone/dist/style.min.css": true
36+
}
37+
}
38+
},
39+
"@symfony/ux-google-map": {
40+
"map": {
41+
"enabled": true,
42+
"fetch": "lazy"
43+
}
44+
},
45+
"@symfony/ux-lazy-image": {
46+
"lazy-image": {
47+
"enabled": true,
48+
"fetch": "eager"
49+
}
50+
},
51+
"@symfony/ux-leaflet-map": {
52+
"map": {
53+
"enabled": true,
54+
"fetch": "lazy"
55+
}
56+
},
57+
"@symfony/ux-live-component": {
58+
"live": {
59+
"enabled": true,
60+
"fetch": "eager",
61+
"autoimport": {
62+
"@symfony/ux-live-component/dist/live.min.css": true
63+
}
64+
}
65+
},
66+
"@symfony/ux-notify": {
67+
"notify": {
68+
"enabled": true,
69+
"fetch": "eager"
70+
}
71+
},
72+
"@symfony/ux-react": {
73+
"react": {
74+
"enabled": true,
75+
"fetch": "eager"
76+
}
77+
},
78+
"@symfony/ux-svelte": {
79+
"svelte": {
80+
"enabled": true,
81+
"fetch": "eager"
82+
}
83+
},
84+
"@symfony/ux-swup": {
85+
"swup": {
86+
"enabled": true,
87+
"fetch": "eager"
88+
}
89+
},
90+
"@symfony/ux-toggle-password": {
91+
"toggle-password": {
92+
"enabled": true,
93+
"fetch": "eager",
94+
"autoimport": {
95+
"@symfony/ux-toggle-password/dist/style.min.css": true
96+
}
97+
}
98+
},
99+
"@symfony/ux-turbo": {
100+
"turbo-core": {
101+
"enabled": true,
102+
"fetch": "eager"
103+
},
104+
"mercure-turbo-stream": {
105+
"enabled": false,
106+
"fetch": "eager"
107+
}
108+
},
109+
"@symfony/ux-typed": {
110+
"typed": {
111+
"enabled": true,
112+
"fetch": "eager"
113+
}
114+
},
115+
"@symfony/ux-vue": {
116+
"vue": {
117+
"enabled": true,
118+
"fetch": "eager"
119+
}
120+
}
121+
},
122+
"entrypoints": []
123+
}

0 commit comments

Comments
 (0)