🎨 feat: add Vuejs, TS and SCSS support, basic style

.gitignore

@@ -22,3 +22,10 @@
 ###> phpstan/phpstan ###
 phpstan.neon
 ###< phpstan/phpstan ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

assets/app.js

@@ -0,0 +1,23 @@
+/*
+ * 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.scss';
+
+// start the Stimulus application
+import './bootstrap';
+
+export default {
+	name: 'App',
+	render() {
+		return (
+			<div>
+				Appli VueJS
+			</div>
+		)
+	}
+}

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,
+    /\.[jt]sx?$/
+));
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/hello_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/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';
+    }
+}

assets/styles/_clickables.scss

@@ -0,0 +1,6 @@
+button{
+  padding: 1rem 2rem;
+  border: solid 1px $bg_color;
+  background: $primary_color;
+  border-radius: 0.25rem;
+}

assets/styles/_forms.scss

@@ -0,0 +1,30 @@
+form {
+  label {
+    min-width: 15rem;
+    display: inline-block;
+    height: 1.5rem;
+  }
+
+  input {
+    &[type="checkbox"] {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-left: 0rem;
+    }
+    &[type="text"],
+    &[type="number"],
+    {
+      min-height: 1.5rem;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+
+    }
+  }
+
+  button {
+    &[type="submit"] {
+      float: right;
+      margin-top: 2rem;
+    }
+  }
+}

assets/styles/_global.scss

@@ -0,0 +1,12 @@
+body {
+  background-color: $bg_color;
+  font-family: "Calibri", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+#main_content{
+  margin: 0 auto;
+  padding: 2rem 4rem;
+  min-width: 40rem;
+  max-width: 60rem;
+  min-height: 100vh;
+  background-color: $bg_main_color;
+}

assets/styles/_variables.scss

@@ -0,0 +1,3 @@
+$bg_color:lightgray;
+$bg_main_color: white;
+$primary_color: #98c87e;

assets/styles/app.scss

@@ -0,0 +1,6 @@
+@import 'variables';
+@import 'global';
+@import 'forms';
+@import 'clickables';
+
+

composer.json

@@ -39,6 +39,7 @@
         "symfony/twig-bundle": "6.1.*",
         "symfony/validator": "6.1.*",
         "symfony/web-link": "6.1.*",
+        "symfony/webpack-encore-bundle": "^1.17",
         "symfony/yaml": "6.1.*",
         "symfonycasts/verify-email-bundle": "^1.17",
         "twig/extra-bundle": "^2.12|^3.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e0412fb8ef6b63c4a4a5bc492ccdbb3b",
+    "content-hash": "1a81823673e923663c105d7f3642bac1",
     "packages": [
         {
             "name": "doctrine/cache",
@@ -6852,6 +6852,79 @@
             ],
             "time": "2023-01-01T08:36:55+00:00"
         },
+        {
+            "name": "symfony/webpack-encore-bundle",
+            "version": "v1.17.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/webpack-encore-bundle.git",
+                "reference": "471ebbc03072dad6e31840dc317bc634a32785f5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/webpack-encore-bundle/zipball/471ebbc03072dad6e31840dc317bc634a32785f5",
+                "reference": "471ebbc03072dad6e31840dc317bc634a32785f5",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1.3",
+                "symfony/asset": "^4.4 || ^5.0 || ^6.0",
+                "symfony/config": "^4.4 || ^5.0 || ^6.0",
+                "symfony/dependency-injection": "^4.4 || ^5.0 || ^6.0",
+                "symfony/deprecation-contracts": "^2.1 || ^3.0",
+                "symfony/http-kernel": "^4.4 || ^5.0 || ^6.0",
+                "symfony/polyfill-php80": "^1.25.0",
+                "symfony/service-contracts": "^1.0 || ^2.0 || ^3.0"
+            },
+            "require-dev": {
+                "symfony/framework-bundle": "^4.4 || ^5.0 || ^6.0",
+                "symfony/phpunit-bridge": "^5.3 || ^6.0",
+                "symfony/twig-bundle": "^4.4 || ^5.0 || ^6.0",
+                "symfony/web-link": "^4.4 || ^5.0 || ^6.0"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/webpack-encore",
+                    "url": "https://github.com/symfony/webpack-encore"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\WebpackEncoreBundle\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Integration with your Symfony app & Webpack Encore!",
+            "support": {
+                "issues": "https://github.com/symfony/webpack-encore-bundle/issues",
+                "source": "https://github.com/symfony/webpack-encore-bundle/tree/v1.17.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2023-09-26T14:36:28+00:00"
+        },
         {
             "name": "symfony/yaml",
             "version": "v6.1.11",

config/bundles.php

@@ -12,4 +12,5 @@ return [
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
     SymfonyCasts\Bundle\VerifyEmail\SymfonyCastsVerifyEmailBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

config/packages/webpack_encore.yaml

@@ -0,0 +1,45 @@
+webpack_encore:
+    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
+    output_path: '%kernel.project_dir%/public/build'
+    # If multiple builds are defined (as shown below), you can disable the default build:
+    # output_path: false
+
+    # Set attributes that will be rendered on all script and link tags
+    script_attributes:
+        defer: true
+        # Uncomment (also under link_attributes) if using Turbo Drive
+        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
+        # 'data-turbo-track': reload
+    # link_attributes:
+        # Uncomment if using Turbo Drive
+        # 'data-turbo-track': reload
+
+    # 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 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:
+    # builds:
+        # frontend: '%kernel.project_dir%/public/frontend/build'
+
+        # pass the build name as the 3rd argument to the Twig functions
+        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
+framework:
+    assets:
+        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
+
+#when@prod:
+#    webpack_encore:
+#        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+#        # Available in version 1.2
+#        cache: true
+
+#when@test:
+#    webpack_encore:
+#        strict_mode: false

package.json

@@ -0,0 +1,31 @@
+{
+    "devDependencies": {
+        "@babel/core": "^7.17.0",
+        "@babel/preset-env": "^7.16.0",
+        "@hotwired/stimulus": "^3.0.0",
+        "@symfony/stimulus-bridge": "^3.2.0",
+        "@symfony/webpack-encore": "^4.0.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "@vue/babel-preset-jsx": "^1.4.0",
+        "core-js": "^3.23.0",
+        "regenerator-runtime": "^0.13.9",
+        "sass": "^1.77.8",
+        "sass-loader": "^14.0.0",
+        "ts-loader": "^9.0.0",
+        "typescript": "^5.5.3",
+        "vue": "^2.5",
+        "vue-loader": "^15.9.5",
+        "vue-template-compiler": "^2.7.16",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-notifier": "^1.15.0"
+    },
+    "license": "UNLICENSED",
+    "private": true,
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
+    }
+}

symfony.lock

@@ -267,6 +267,25 @@
             "config/routes/web_profiler.yaml"
         ]
     },
+    "symfony/webpack-encore-bundle": {
+        "version": "1.17",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "1.10",
+            "ref": "eff2e505d4557c967b6710fe06bd947ba555cae5"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/bootstrap.js",
+            "assets/controllers.json",
+            "assets/controllers/hello_controller.js",
+            "assets/styles/app.css",
+            "config/packages/webpack_encore.yaml",
+            "package.json",
+            "webpack.config.js"
+        ]
+    },
     "symfonycasts/verify-email-bundle": {
         "version": "v1.17.0"
     },

webpack.config.js

@@ -0,0 +1,81 @@
+const Encore = require('@symfony/webpack-encore')
+
+// Manually configure the runtime environment if not already configured yet by the "encore" command.
+// It's useful when you use tools that rely on webpack.config.js file.
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+	Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
+}
+
+Encore
+	// directory where compiled assets will be stored
+	.setOutputPath('public/build/')
+	// public path used by the web server to access the output path
+	.setPublicPath('/build')
+	// only needed for CDN's or subdirectory deploy
+	//.setManifestKeyPrefix('build/')
+
+	/*
+	 * ENTRY CONFIG
+	 *
+	 * 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')
+
+	// 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()
+
+	// will require an extra script tag for runtime.js
+	// but, you probably want this, unless you're building a single-page app
+	.enableSingleRuntimeChunk()
+
+	/*
+	 * FEATURE CONFIG
+	 *
+	 * Enable & configure other features below. For a full
+	 * list of features, see:
+	 * https://symfony.com/doc/current/frontend.html#adding-more-features
+	 */
+	.cleanupOutputBeforeBuild()
+	.enableBuildNotifications()
+	.enableSourceMaps(!Encore.isProduction())
+	// enables hashed filenames (e.g. app.abc123.css)
+	.enableVersioning(Encore.isProduction())
+
+	// configure Babel
+	// .configureBabel((config) => {
+	//     config.plugins.push('@babel/a-babel-plugin');
+	// })
+
+	// enables and configure @babel/preset-env polyfills
+	.configureBabelPresetEnv((config) => {
+		config.useBuiltIns = 'usage'
+		config.corejs = '3.23'
+	})
+
+	// enables Sass/SCSS support
+	.enableSassLoader()
+
+	// uncomment if you use TypeScript
+	.enableTypeScriptLoader()
+
+	// uncomment if you use React
+	//.enableReactPreset()
+
+	// make a Vuejs app
+	.enableVueLoader(() => {}, {
+		useJsx: true
+	})
+
+// 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()
+
+
+module.exports = Encore.getWebpackConfig()