10000 Adding docs for Stimulus, Turbo & Symfony UX · symfony/symfony-docs@4c5ed02 · GitHub
[go: up one dir, main page]
Skip to content

Commit 4c5ed02

Browse files
weaverryanjaviereguiluz
weaverryan
authored and
javiereguiluz
committed
Adding docs for Stimulus, Turbo & Symfony UX
1 parent 582525f commit 4c5ed02

File tree

6 files changed

+202
-75
lines changed

6 files changed

+202
-75
lines changed

‎.github/workflows/ci.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ jobs:
118118

119119
- name: Install dependencies
120120
if: ${{ steps.find-files.outputs.files }}
121-
run: composer create-project symfony-tools/code-block-checker _checker
121+
run: composer create-project symfony-tools/code-block-checker:@dev _checker
122122

123123
- name: Install test application
124124
if: ${{ steps.find-files.outputs.files }}

‎_build/redirection_map

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -513,6 +513,7 @@
513513
/components/stopwatch https://github.com/symfony/stopwatch
514514
/service_container/3.3-di-changes https://symfony.com/doc/3.4/service_container/3.3-di-changes.html
515515
/frontend/encore/shared-entry /frontend/encore/split-chunks
516+
/frontend/encore/page-specific-assets /frontend/encore/simple-example#page-specific-javascript-or-css
516517
/testing/functional_tests_assertions /testing#testing-application-assertions
517518
/components https://symfony.com/components
518519
/components/index https://symfony.com/components

‎frontend.rst

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Getting Started
4040
...............
4141

4242
* :doc:`Installation </frontend/encore/installation>`
43-
* :doc:`First Example </frontend/encore/simple-example>`
43+
* :doc:`Using Webpack Encore </frontend/encore/simple-example>`
4444

4545
Adding more Features
4646
....................
@@ -67,7 +67,6 @@ Guides
6767
......
6868

6969
* :doc:`Using Bootstrap CSS & JS </frontend/encore/bootstrap>`
70-
* :doc:`Creating Page-Specific CSS/JS </frontend/encore/page-specific-assets>`
7170
* :doc:`jQuery and Legacy Applications </frontend/encore/legacy-applications>`
7271
* :doc:`Passing Information from Twig to JavaScript </frontend/encore/server-data>`
7372
* :doc:`webpack-dev-server and Hot Module Replacement (HMR) </frontend/encore/dev-server>`

‎frontend/encore/installation.rst

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,13 @@ is the main config file for both Webpack and Webpack Encore:
8282
/*
8383
* ENTRY CONFIG
8484
*
85-
* Add 1 entry for each "page" of your app
86-
* (including one that's included on every page - e.g. "app")
87-
*
8885
* Each entry will result in one JavaScript file (e.g. app.js)
8986
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
9087
*/
9188
.addEntry('app', './assets/app.js')
92-
//.addEntry('page1', './assets/page1.js')
93-
//.addEntry('page2', './assets/page2.js')
89+
90+
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
91+
.enableStimulusBridge('./assets/controllers.json')
9492
9593
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
9694
.splitEntryChunks()
@@ -112,6 +110,10 @@ is the main config file for both Webpack and Webpack Encore:
112110
// enables hashed filenames (e.g. app.abc123.css)
113111
.enableVersioning(Encore.isProduction())
114112
113+
.configureBabel((config) => {
114+
config.plugins.push('@babel/plugin-proposal-class-properties');
115+
})
116+
115117
// enables @babel/preset-env polyfills
116118
.configureBabelPresetEnv((config) => {
117119
config.useBuiltIns = 'usage';
@@ -124,16 +126,15 @@ is the main config file for both Webpack and Webpack Encore:
124126
// uncomment if you use TypeScript
125127
//.enableTypeScriptLoader()
126128
129+
// uncomment if you use React
130+
//.enableReactPreset()
131+
127132
// uncomment to get integrity="..." attributes on your script & link tags
128133
// requires WebpackEncoreBundle 1.4 or higher
129134
//.enableIntegrityHashes(Encore.isProduction())
130135
131136
// uncomment if you're having problems with a jQuery plugin
132137
//.autoProvidejQuery()
133-
134-
// uncomment if you use API Platform Admin (composer require api-admin)
135-
//.enableReactPreset()
136-
//.addEntry('admin', './assets/admin.js')
137138
;
138139
139140
module.exports = Encore.getWebpackConfig();
@@ -154,10 +155,8 @@ Next, open the new ``assets/app.js`` file which contains some JavaScript code
154155
// any CSS you import will output into a single css file (app.css in this case)
155156
import './styles/app.css';
156157
157-
// Need jQuery? Install it with "yarn add jquery"(or "npm install jquery"), then uncomment to import it.
158-
// import $ from 'jquery';
159-
160-
console.log('Hello Webpack Encore! Edit me in assets/app.js');
158+
// start the Stimulus application
159+
import './bootstrap';
161160
162161
And the new ``assets/styles/app.css`` file:
163162

@@ -168,7 +167,37 @@ And the new ``assets/styles/app.css`` file:
168167
background-color: lightgray;
169168
}
170169
170+You should also add an ``assets/bootstrap.js`` file, which initializes Stimulus:
171+
a system that you'll learn about soon:
172+
173+
.. code-block:: javascript
174+
175+
// assets/bootstrap.js
176+
import { startStimulusApp } from '@symfony/stimulus-bridge';
177+
178+
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
179 D8ED +
export const app = startStimulusApp(require.context(
180+
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
181+
true,
182+
/\.(j|t)sx?$/
183+
));
184+
185+
// register any custom, 3rd party controllers here
186+
// app.register('some_controller_name', SomeImportedController);
187+
188+
And finally, create an ``assets/controllers.json`` file, which also fits into
189+
the Stimulus system:
190+
191+
```json
192+
{
193+
"controllers": [],
194+
"entrypoints": []
195+
}
196+
```
197+
171198
You'll customize and learn more about these files in :doc:`/frontend/encore/simple-example`.
199+
When you execute Encore, it will ask you to install a few more dependencies based
200+
on which features of Encore you have enabled.
172201

173202
.. caution::
174203

‎frontend/encore/page-specific-assets.rst

Lines changed: 0 additions & 27 deletions
This file was deleted.

0 commit comments

Comments
 (0)
0