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+
}

0 commit comments

Comments
 (0)