diff --git a/.gitignore b/.gitignore index 9051930..30aa117 100644 --- a/.gitignore +++ b/.gitignore @@ -60,6 +60,7 @@ ###> symfony/webpack-encore-bundle ### /node_modules/ +/public/build/ npm-debug.log yarn-error.log ###< symfony/webpack-encore-bundle ### diff --git a/assets/app.js b/assets/app.js new file mode 100644 index 0000000..bb0a6aa --- /dev/null +++ b/assets/app.js @@ -0,0 +1,12 @@ +/* + * Welcome to your app's main JavaScript file! + * + * We recommend including the built version of this JavaScript file + * (and its CSS file) in your base layout (base.html.twig). + */ + +// any CSS you import will output into a single css file (app.css in this case) +import './styles/app.css'; + +// start the Stimulus application +import './bootstrap'; diff --git a/assets/bootstrap.js b/assets/bootstrap.js new file mode 100644 index 0000000..58308a6 --- /dev/null +++ b/assets/bootstrap.js @@ -0,0 +1,11 @@ +import { startStimulusApp } from '@symfony/stimulus-bridge'; + +// Registers Stimulus controllers from controllers.json and in the controllers/ directory +export const app = startStimulusApp(require.context( + '@symfony/stimulus-bridge/lazy-controller-loader!./controllers', + true, + /\.(j|t)sx?$/ +)); + +// register any custom, 3rd party controllers here +// app.register('some_controller_name', SomeImportedController); diff --git a/assets/controllers.json b/assets/controllers.json new file mode 100644 index 0000000..a1c6e90 --- /dev/null +++ b/assets/controllers.json @@ -0,0 +1,4 @@ +{ + "controllers": [], + "entrypoints": [] +} diff --git a/assets/controllers/hello_controller.js b/assets/controllers/hello_controller.js new file mode 100644 index 0000000..8c79f65 --- /dev/null +++ b/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/assets/styles/app.css b/assets/styles/app.css new file mode 100644 index 0000000..cb33b13 --- /dev/null +++ b/assets/styles/app.css @@ -0,0 +1,3 @@ +body { + background-color: lightgray; +} diff --git a/config/packages/webpack_encore.yaml b/config/packages/webpack_encore.yaml index 9191f4f..90f1a1d 100644 --- a/config/packages/webpack_encore.yaml +++ b/config/packages/webpack_encore.yaml @@ -4,16 +4,21 @@ webpack_encore: # If multiple builds are defined (as shown below), you can disable the default build: # output_path: false - # if using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials') + # Set attributes that will be rendered on all script and link tags + script_attributes: + defer: true + # link_attributes: + + # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials') # crossorigin: 'anonymous' - # preload all rendered script and link tags automatically via the http2 Link header + # Preload all rendered script and link tags automatically via the HTTP/2 Link header # preload: true # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data # strict_mode: false - # if you have multiple builds: + # If you have multiple builds: # builds: # pass "frontend" as the 3rg arg to the Twig functions # {{ encore_entry_script_tags('entry1', null, 'frontend') }} diff --git a/package.json b/package.json index 66db6ef..7599cd4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "devDependencies": { - "@symfony/webpack-encore": "^0.31.0", + "@symfony/stimulus-bridge": "^2.0.0", + "@symfony/webpack-encore": "^1.0.0", "bootstrap": "^4.5.3", "copy-webpack-plugin": "^6.2.1", "core-js": "^3.0.0", @@ -9,6 +10,7 @@ "popper.js": "^1.16.1", "regenerator-runtime": "^0.13.2", "sass-loader": "8.0.0", + "stimulus": "^2.0.0", "webpack-notifier": "^1.6.0" }, "license": "UNLICENSED", diff --git a/symfony.lock b/symfony.lock index e231cdb..0190312 100644 --- a/symfony.lock +++ b/symfony.lock @@ -540,16 +540,19 @@ ] }, "symfony/webpack-encore-bundle": { - "version": "1.6", + "version": "1.9", "recipe": { "repo": "github.com/symfony/recipes", "branch": "master", - "version": "1.6", - "ref": "69e1d805ad95964088bd510c05995e87dc391564" + "version": "1.9", + "ref": "9399a0bfc6ee7a0c019f952bca46d6a6045dd451" }, "files": [ - "./assets/css/app.css", - "./assets/js/app.js", + "./assets/app.js", + "./assets/bootstrap.js", + "./assets/controllers.json", + "./assets/controllers/hello_controller.js", + "./assets/styles/app.css", "./config/packages/assets.yaml", "./config/packages/prod/webpack_encore.yaml", "./config/packages/test/webpack_encore.yaml", diff --git a/webpack.config.js b/webpack.config.js index 5aca02f..45488fc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,4 @@ -var Encore = require('@symfony/webpack-encore'); +const Encore = require('@symfony/webpack-encore'); // add the the copy-webpack-plugin const CopyPlugin = require('copy-webpack-plugin'); @@ -32,16 +32,14 @@ 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/js/app.js') .addEntry('pdf', './assets/js/pdf.js') - //.addEntry('page1', './assets/js/page1.js') - //.addEntry('page2', './assets/js/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() @@ -63,6 +61,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'; @@ -75,16 +77,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/js/admin.js') - ; +; module.exports = Encore.getWebpackConfig();