Skip to content

Commit c590fda

Browse files
authored
Adding new recipes for Encore, Stimulus & AssetMapper (#1202)
* Adding new recipes for Encore, Stimulus & AssetMapper * StimulusBundle 1.0 -> 2.9 * updating namespace * moving encore recipe changes to 2.0 * conflict with older version of flex * adding ux_controller_link_tags() to recipe * adding documentation to importmap * updating message to match core * Adding ux translator * fixing translations path * Documenting the new add-lines configurator * Fixing translator initial version * shorten to just var * remove ux alias - there is no one package to install UX packages currently * fixing wrong package name
1 parent 6d4e120 commit c590fda

File tree

29 files changed

+459
-1
lines changed

29 files changed

+459
-1
lines changed

README.rst

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,44 @@ colors`_ are supported too:
313313
314314
* <fg=blue>Read</> the documentation at <comment>https://symfony.com/doc</>
315315
316+
``add-lines`` Configurator
317+
~~~~~~~~~~~~~~~~~~~~~~~~~~
318+
319+
If no other configurators can meet your needs, the ``add-lines`` configurator
320+
can add entire lines to files, either at the top, bottom or after a target:
321+
322+
.. code-block:: json
323+
324+
"add-lines": [
325+
{
326+
"file": "webpack.config.js",
327+
"content": "\nenables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)\n .enableStimulusBridge('./assets/controllers.json')",
328+
"position": "after_target",
329+
"target": ".splitEntryChunks()"
330+
},
331+
{
332+
"file": "assets/app.js",
333+
"content": "import './bootstrap.js';",
334+
"position": "top",
335+
"warn_if_missing": true
336+
},
337+
{
338+
"file": "assets/translator.js",
339+
"content": "export * from '../var/translations';",
340+
"position": "bottom",
341+
"requires": "symfony/webpack-encore-bundle"
342+
}
343+
]
344+
345+
Each item needs ``file``, ``content`` and ``position``, which can be
346+
``top``, ``bottom`` or ``after_target``. If ``after_target`` is used, a
347+
``target`` must also be specified, which is a string that will be searched for
348+
in the file.
349+
350+
If ``warn_if_missing`` is set to ``true``, a warning will be shown to the
351+
user if the ``file`` or ``target`` isn't found. If ``requires`` is set, the
352+
rule will only be applied if the given package is installed.
353+
316354
Validation
317355
----------
318356

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/*
2+
* Welcome to your app's main JavaScript file!
3+
*
4+
* This file will be included onto the page via the importmap() Twig function,
5+
* which should already be in your base.html.twig.
6+
*/
7+
console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉')
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background-color: skyblue;
3+
}
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
framework:
2+
asset_mapper:
3+
# The paths to make available to the asset mapper.
4+
paths:
5+
- assets/
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?php
2+
3+
/**
4+
* Returns the import map for this application.
5+
*
6+
* - "path" is a path inside the asset mapper system. Use the
7+
* "debug:asset-map" command to see the full list of paths.
8+
*
9+
* - "preload" set to true for any modules that are loaded on the initial
10+
* page load to help the browser download them earlier.
11+
*
12+
* The "importmap:require" command can be used to add new entries to this file.
13+
*
14+
* This file has been auto-generated by the importmap commands.
15+
*/
16+
return [
17+
'app' => [
18+
'path' => 'app.js',
19+
'preload' => true,
20+
],
21+
];
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"copy-from-recipe": {
3+
"assets/": "assets/",
4+
"config/": "%CONFIG_DIR%/",
5+
"importmap.php": "importmap.php"
6+
},
7+
"aliases": ["asset-mapper", "importmap"],
8+
"gitignore": [
9+
"/%PUBLIC_DIR%/assets/"
10+
],
11+
"add-lines": [
12+
{
13+
"file": "templates/base.html.twig",
14+
"content": " {{ importmap() }}",
15+
"position": "after_target",
16+
"target": "{% block javascripts %}",
17+
"warn_if_missing": true
18+
},
19+
{
20+
"file": "templates/base.html.twig",
21+
"content": " <link rel=\"stylesheet\" href=\"{{ asset('styles/app.css') }}\">",
22+
"position": "after_target",
23+
"target": "{% block stylesheets %}",
24+
"warn_if_missing": true
25+
}
26+
],
27+
"conflict": {
28+
"symfony/framework-bundle": "<6.3",
29+
"symfony/twig-bundle": "<6.3",
30+
"symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
31+
}
32+
}
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// register any custom, 3rd party controllers here
2+
// app.register('some_controller_name', SomeImportedController);
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"controllers": [],
3+
"entrypoints": []
4+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
3+
/*
4+
* This is an example Stimulus controller!
5+
*
6+
* Any element with a data-controller="hello" attribute will cause
7+
* this controller to be executed. The name "hello" comes from the filename:
8+
* hello_controller.js -> "hello"
9+
*
10+
* Delete this file or adapt it for your use!
11+
*/
12+
export default class extends Controller {
13+
connect() {
14+
this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
15+
}
16+
}
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"bundles": {
3+
"Symfony\\UX\\StimulusBundle\\StimulusBundle": ["all"]
4+
},
5+
"copy-from-recipe": {
6+
"assets/": "assets/"
7+
},
8+
"aliases": ["stimulus", "stimulus-bundle"],
9+
"conflict": {
10+
"symfony/webpack-encore-bundle": "<2.0",
11+
"symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
12+
},
13+
"add-lines": [
14+
{
15+
"file": "webpack.config.js",
16+
"content": "\n // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)\n .enableStimulusBridge('./assets/controllers.json')",
17+
"position": "after_target",
18+
"target": ".splitEntryChunks()"
19+
},
20+
{
21+
"file": "assets/app.js",
22+
"content": "import './bootstrap.js';",
23+
"position": "top",
24+
"warn_if_missing": true
25+
},
26+
{
27+
"file": "assets/bootstrap.js",
28+
"content": "import { startStimulusApp } from '@symfony/stimulus-bridge';\n\n// Registers Stimulus controllers from controllers.json and in the controllers/ directory\nexport const app = startStimulusApp(require.context(\n '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',\n true,\n /\\.[jt]sx?$/\n));",
29+
"position": "top",
30+
"requires": "symfony/webpack-encore-bundle"
31+
},
32+
{
33+
"file": "assets/bootstrap.js",
34+
"content": "import { startStimulusApp } from '@symfony/stimulus-bundle';\n\nconst app = startStimulusApp();",
35+
"position": "top",
36+
"requires": "symfony/asset-mapper"
37+
},
38+
{
39+
"file": "templates/base.html.twig",
40+
"content": " {{ ux_controller_link_tags() }}",
41+
"position": "after_target",
42+
"target": "{% block stylesheets %}",
43+
"warn_if_missing": true
44+
}
45+
]
46+
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
twig:
2+
default_path: '%kernel.project_dir%/templates'
3+
4+
when@test:
5+
twig:
6+
strict_variables: true

symfony/twig-bundle/6.3/manifest.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"bundles": {
3+
"Symfony\\Bundle\\TwigBundle\\TwigBundle": ["all"]
4+
},
5+
"copy-from-recipe": {
6+
"config/": "%CONFIG_DIR%/",
7+
"templates/": "templates/"
8+
},
9+
"conflict": {
10+
"symfony/framework-bundle": "<5.3"
11+
}
12+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>{% block title %}Welcome!{% endblock %}</title>
6+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
7+
{% block stylesheets %}
8+
{% endblock %}
9+
10+
{% block javascripts %}
11+
{% endblock %}
12+
</head>
13+
<body>
14+
{% block body %}{% endblock %}
15+
</body>
16+
</html>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
2+
/*
3+
* This file is part of the Symfony UX Translator package.
4+
*
5+
* If folder "../var/translations" does not exist, or some translations are missing,
6+
* you must warmup your Symfony cache to refresh JavaScript translations.
7+
*
8+
* If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
9+
*/
10+
11+
setLocaleFallbacks(localeFallbacks);
12+
13+
export { trans };
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
ux_translator:
2+
# The directory where the JavaScript translations are dumped
3+
dump_directory: '%kernel.project_dir%/var/translations'
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"bundles": {
3+
"Symfony\\UX\\Translator\\UxTranslatorBundle": ["all"]
4+
},
5+
"conflict": {
6+
"symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
7+
},
8+
"copy-from-recipe": {
9+
"assets/": "assets/",
10+
"config/": "%CONFIG_DIR%/",
11+
"var/": "var/"
12+
},
13+
"add-lines": [
14+
{
15+
"file": "assets/translator.js",
16+
"content": "import { localeFallbacks } from '../var/translations/configuration';",
17+
"position": "top",
18+
"requires": "symfony/webpack-encore-bundle"
19+
},
20+
{
21+
"file": "assets/translator.js",
22+
"content": "import { localeFallbacks } from '@app/translations/configuration';",
23+
"position": "top",
24+
"requires": "symfony/asset-mapper"
25+
},
26+
{
27+
"file": "assets/translator.js",
28+
"content": "export * from '../var/translations';",
29+
"position": "bottom",
30+
"requires": "symfony/webpack-encore-bundle"
31+
},
32+
{
33+
"file": "assets/translator.js",
34+
"content": "export * from '@app/translations';",
35+
"position": "bottom",
36+
"requires": "symfony/asset-mapper"
37+
}
38+
]
39+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const localeFallbacks = {};
2+
3+
console.log('Run bin/console cache:warmup to generate the translation files.');
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('Run bin/console cache:warmup to generate the translation files.');

symfony/webpack-encore-bundle/1.10/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"package.json": "package.json",
99
"webpack.config.js": "webpack.config.js"
1010
},
11-
"aliases": ["ux", "encore", "webpack", "webpack-encore"],
11+
"aliases": ["encore", "webpack", "webpack-encore"],
1212
"gitignore": [
1313
"/node_modules/",
1414
"/%PUBLIC_DIR%/build/",
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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+
8+
// any CSS you import will output into a single css file (app.css in this case)
9+
import './styles/app.css';
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background-color: lightgray;
3+
}
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
webpack_encore:
2+
# The path where Encore is building the assets - i.e. Encore.setOutputPath()
3+
output_path: '%kernel.project_dir%/public/build'
4+
# If multiple builds are defined (as shown below), you can disable the default build:
5+
# output_path: false
6+
7+
# Set attributes that will be rendered on all script and link tags
8+
script_attributes:
9+
defer: true
10+
# Uncomment (also under link_attributes) if using Turbo Drive
11+
# https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
12+
# 'data-turbo-track': reload
13+
# link_attributes:
14+
# Uncomment if using Turbo Drive
15+
# 'data-turbo-track': reload
16+
17+
# If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
18+
# crossorigin: 'anonymous'
19+
20+
# Preload all rendered script and link tags automatically via the HTTP/2 Link header
21+
# preload: true
22+
23+
# Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
24+
# strict_mode: false
25+
26+
# If you have multiple builds:
27+
# builds:
28+
# frontend: '%kernel.project_dir%/public/frontend/build'
29+
30+
# pass the build name as the 3rd argument to the Twig functions
31+
# {{ encore_entry_script_tags('entry1', null, 'frontend') }}
32+
33+
framework:
34+
assets:
35+
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
36+
37+
#when@prod:
38+
# webpack_encore:
39+
# # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
40+
# # Available in version 1.2
41+
# cache: true
42+
43+
#when@test:
44+
# webpack_encore:
45+
# strict_mode: false
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"bundles": {
3+
"Symfony\\WebpackEncoreBundle\\WebpackEncoreBundle": ["all"]
4+
},
5+
"copy-from-recipe": {
6+
"assets/": "assets/",
7+
"config/": "%CONFIG_DIR%/",
8+
"package.json": "package.json",
9+
"webpack.config.js": "webpack.config.js"
10+
},
11+
"aliases": ["ux", "encore", "webpack", "webpack-encore"],
12+
"gitignore": [
13+
"/node_modules/",
14+
"/%PUBLIC_DIR%/build/",
15+
"npm-debug.log",
16+
"yarn-error.log"
17+
],
18+
"conflict": {
19+
"symfony/framework-bundle": "<5.4",
20+
"symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
21+
},
22+
"add-lines": [
23+
{
24+
"file": "templates/base.html.twig",
25+
"content": " {{ encore_entry_script_tags('app') }}",
26+
"position": "after_target",
27+
"target": "{% block javascripts %}",
28+
"warn_if_missing": true
29+
},
30+
{
31+
"file": "templates/base.html.twig",
32+
"content": " {{ encore_entry_link_tags('app') }}",
33+
"position": "after_target",
34+
"target": "{% block stylesheets %}",
35+
"warn_if_missing": true
36+
}
37+
]
38+
}

0 commit comments

Comments
 (0)