diff --git a/symfony/webpack-encore-bundle/1.0/assets/app.js b/symfony/webpack-encore-bundle/1.0/assets/app.js index fe9696ec..bb0a6aa1 100644 --- a/symfony/webpack-encore-bundle/1.0/assets/app.js +++ b/symfony/webpack-encore-bundle/1.0/assets/app.js @@ -8,7 +8,5 @@ // any CSS you import will output into a single css file (app.css in this case) import './styles/app.css'; -// Need jQuery? Install it with "yarn add jquery", then uncomment to import it. -// import $ from 'jquery'; - -console.log('Hello Webpack Encore! Edit me in assets/app.js'); +// start the Stimulus application +import './bootstrap'; diff --git a/symfony/webpack-encore-bundle/1.0/assets/bootstrap.js b/symfony/webpack-encore-bundle/1.0/assets/bootstrap.js new file mode 100644 index 00000000..9792e6ab --- /dev/null +++ b/symfony/webpack-encore-bundle/1.0/assets/bootstrap.js @@ -0,0 +1,5 @@ +import { startStimulusApp } from '@symfony/stimulus-bridge'; +import '@symfony/autoimport'; + +// Registers Stimulus controllers from controllers.json and in the controllers/ directory +export const app = startStimulusApp(require.context('./controllers', true, /\.(j|t)sx?$/)); diff --git a/symfony/webpack-encore-bundle/1.0/assets/controllers.json b/symfony/webpack-encore-bundle/1.0/assets/controllers.json new file mode 100644 index 00000000..a1c6e90c --- /dev/null +++ b/symfony/webpack-encore-bundle/1.0/assets/controllers.json @@ -0,0 +1,4 @@ +{ + "controllers": [], + "entrypoints": [] +} diff --git a/symfony/webpack-encore-bundle/1.0/assets/controllers/hello_controller.js b/symfony/webpack-encore-bundle/1.0/assets/controllers/hello_controller.js new file mode 100644 index 00000000..8c79f65a --- /dev/null +++ b/symfony/webpack-encore-bundle/1.0/assets/controllers/hello_controller.js @@ -0,0 +1,16 @@ +import { Controller } from 'stimulus'; + +/* + * This is an example Stimulus controller! + * + * Any element with a data-controller="hello" attribute will cause + * this controller to be executed. The name "hello" comes from the filename: + * hello_controller.js -> "hello" + * + * Delete this file or adapt it for your use! + */ +export default class extends Controller { + connect() { + this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js'; + } +} diff --git a/symfony/webpack-encore-bundle/1.0/package.json b/symfony/webpack-encore-bundle/1.0/package.json index f2159a67..2adb3f61 100644 --- a/symfony/webpack-encore-bundle/1.0/package.json +++ b/symfony/webpack-encore-bundle/1.0/package.json @@ -1,7 +1,9 @@ { "devDependencies": { - "@symfony/webpack-encore": "^0.31.0", + "@symfony/stimulus-bridge": "^1.0.0", + "@symfony/webpack-encore": "^0.32.0", "core-js": "^3.0.0", + "stimulus": "^1.1.1", "regenerator-runtime": "^0.13.2", "webpack-notifier": "^1.6.0" }, diff --git a/symfony/webpack-encore-bundle/1.0/webpack.config.js b/symfony/webpack-encore-bundle/1.0/webpack.config.js index 3cedc377..fbd2bb71 100644 --- a/symfony/webpack-encore-bundle/1.0/webpack.config.js +++ b/symfony/webpack-encore-bundle/1.0/webpack.config.js @@ -17,15 +17,13 @@ Encore /* * ENTRY CONFIG * - * Add 1 entry for each "page" of your app - * (including one that's included on every page - e.g. "app") - * * Each entry will result in one JavaScript file (e.g. app.js) * and one CSS file (e.g. app.css) if your JavaScript imports CSS. */ .addEntry('app', './assets/app.js') - //.addEntry('page1', './assets/page1.js') - //.addEntry('page2', './assets/page2.js') + + // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js) + .enableStimulusBridge('./assets/controllers.json') // When enabled, Webpack "splits" your files into smaller pieces for greater optimization. .splitEntryChunks() @@ -47,6 +45,10 @@ Encore // enables hashed filenames (e.g. app.abc123.css) .enableVersioning(Encore.isProduction()) + .configureBabel((config) => { + config.plugins.push('@babel/plugin-proposal-class-properties'); + }) + // enables @babel/preset-env polyfills .configureBabelPresetEnv((config) => { config.useBuiltIns = 'usage'; @@ -59,16 +61,15 @@ Encore // uncomment if you use TypeScript //.enableTypeScriptLoader() + // uncomment if you use React + //.enableReactPreset() + // uncomment to get integrity="..." attributes on your script & link tags // requires WebpackEncoreBundle 1.4 or higher //.enableIntegrityHashes(Encore.isProduction()) // uncomment if you're having problems with a jQuery plugin //.autoProvidejQuery() - - // uncomment if you use API Platform Admin (composer req api-admin) - //.enableReactPreset() - //.addEntry('admin', './assets/admin.js') ; module.exports = Encore.getWebpackConfig();