chg: dev: replace webpack w/ vite & remove old, legacy jQuery from the code #4

.gitignore

@@ -3,6 +3,7 @@
 .idea/
 node_modules/
 nohup.out
+/public/build/
 ###< system7 - jotunheimr ###
 
 ###> symfony/framework-bundle ###
@@ -11,10 +12,3 @@ nohup.out
 /var/
 /vendor/
 ###< symfony/framework-bundle ###
-
-###> symfony/webpack-encore-bundle ###
-/node_modules/
-/public/build/
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###

assets/css/style.layout.scss

@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&subset=latin-ext');
-@import "~bootstrap/dist/css/bootstrap.min.css";
 @import "style";
 @import "style.homepage";
 

assets/css/style.mineseeker.scss

@@ -1012,6 +1012,7 @@ main {
 
     #mine-wrapper .grid .field-wrapper {
         width: 6.25%;
+        aspect-ratio: 1;
     }
 
     #mine-wrapper .grid .field-wrapper > img.field-target {

assets/js/app.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+
 import MineSeeker from './mine-seeker/MineSeeker';
 
 const wrapper = document.getElementById('mine-wrapper');

assets/js/mine-seeker/hooks/useServerCommunication.jsx

@@ -24,16 +24,6 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
   const rpcUsersRef = useRef(null);
   const stepCacheRef = useRef([]);
 
-  /** HELPERS */
-
-  const correctGridSize = () => {
-    let $f = $('#mine-wrapper .grid');
-    $f.height($f.width());
-    $f = $('#mine-wrapper .grid .field-wrapper');
-    $f.height($f.width());
-    $('#mine-wrapper .grid .field-wrapper .field').height($f.width()).css('line-height', ($f.width() - 2) + 'px');
-  };
-
   /** REST mutations / queries */
 
   const connectQuery = useQuery({
@@ -112,8 +102,6 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
       syncWebPlayer(isBlue ? 'blue' : 'red');
     }
 
-    900 > $(document).width() && correctGridSize();
-
     if (
       2 === payload.userCnt
       && (!connectionLostRef.current

composer.json

@@ -9,6 +9,7 @@
         "doctrine/doctrine-bundle": ">=2.11 <2.14",
         "doctrine/doctrine-migrations-bundle": "^3.0",
         "doctrine/orm": "^2.6",
+        "pentatrion/vite-bundle": "^8.2",
         "symfony/console": "6.4.*",
         "symfony/flex": "^2.10.0",
         "symfony/framework-bundle": "6.4.*",
@@ -20,7 +21,6 @@
         "symfony/security-bundle": "6.4.*",
         "symfony/translation": "6.4.*",
         "symfony/twig-bundle": "6.4.*",
-        "symfony/webpack-encore-bundle": "^1.0",
         "symfony/yaml": "6.4.*"
     },
     "require-dev": {

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": "c77d12baceb4246bf494147134d62712",
+    "content-hash": "531ad478e33058035109129d7e19ebfd",
     "packages": [
         {
             "name": "doctrine/cache",
@@ -1569,6 +1569,67 @@
             ],
             "time": "2026-01-02T08:56:05+00:00"
         },
+        {
+            "name": "pentatrion/vite-bundle",
+            "version": "v8.2.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/lhapaipai/vite-bundle.git",
+                "reference": "80a5391af3a924597d65e7c81a4b28d212fea5fe"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/lhapaipai/vite-bundle/zipball/80a5391af3a924597d65e7c81a4b28d212fea5fe",
+                "reference": "80a5391af3a924597d65e7c81a4b28d212fea5fe",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.0",
+                "symfony/asset": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0",
+                "symfony/config": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0",
+                "symfony/dependency-injection": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0",
+                "symfony/framework-bundle": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0",
+                "symfony/http-client": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0",
+                "symfony/http-kernel": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0",
+                "symfony/twig-bundle": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.9",
+                "phpstan/phpstan": "^1.8",
+                "phpstan/phpstan-symfony": "^1.3",
+                "phpunit/phpunit": "^9.5",
+                "symfony/phpunit-bridge": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0",
+                "symfony/web-link": "^4.4 || ^5.0 || ^6.0 || ^7.0 || ^8.0"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Pentatrion\\ViteBundle\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Hugues Tavernier",
+                    "email": "hugues.tavernier@protonmail.com"
+                }
+            ],
+            "description": "Vite integration for your Symfony app",
+            "keywords": [
+                "bundle",
+                "symfony",
+                "vite",
+                "vitejs"
+            ],
+            "support": {
+                "issues": "https://github.com/lhapaipai/vite-bundle/issues",
+                "source": "https://github.com/lhapaipai/vite-bundle/tree/v8.2.4"
+            },
+            "time": "2026-03-22T11:41:50+00:00"
+        },
         {
             "name": "psr/cache",
             "version": "3.0.0",
@@ -6291,79 +6352,6 @@
             ],
             "time": "2026-01-01T13:45:34+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": {
-                    "url": "https://github.com/symfony/webpack-encore",
-                    "name": "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.4.34",

config/bundles.php

@@ -8,7 +8,7 @@ return [
     Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
     Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
-    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\MercureBundle\MercureBundle::class => ['all' => true],
+    Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
 ];

config/packages/assets.yaml

@@ -1,3 +0,0 @@
-framework:
-  assets:
-    json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

config/packages/prod/webpack_encore.yaml

@@ -1,4 +0,0 @@
-#webpack_encore:
-# Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
-# Available in version 1.2
-#cache: true

config/packages/vite.yaml

@@ -0,0 +1,3 @@
+pentatrion_vite:
+    build_directory: build
+    public_directory: public

config/packages/webpack_encore.yaml

@@ -1,14 +0,0 @@
-webpack_encore:
-  # The path where Encore is building the assets.
-  # This should match Encore.setOutputPath() in webpack.config.js.
-  output_path: '%kernel.project_dir%/public/build'
-  # If multiple builds are defined (as shown below), you can disable the default build:
-  # output_path: false
-
-  # if using Encore.enableIntegrityHashes() specify the crossorigin attribute value (default: false, or use 'anonymous' or 'use-credentials')
-  # crossorigin: 'anonymous'
-
-  # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes).
-  # To enable caching for the production environment, creating a webpack_encore.yaml in the config/packages/prod directory with this value set to true
-  # Available in version 1.2
-  #cache: false

config/routes/dev/pentatrion_vite.yaml

@@ -0,0 +1,4 @@
+_profiler_vite:
+    path: /_profiler/vite
+    defaults:
+        _controller: Pentatrion\ViteBundle\Controller\ProfilerController::info

package.json

@@ -14,41 +14,30 @@
     "private": true,
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.2.0",
-        "@tanstack/react-query": "^5.97.0",
+        "@tanstack/react-query": "^5.0.0",
-        "bootstrap": "3",
         "howler": "^2.1.2",
-        "jquery": "^3.4.1",
         "lodash": "^4.18.1",
         "prop-types": "^15.7.2",
-        "react": "^19.2.5",
+        "react": "^19.0.0",
-        "react-dom": "^19.2.5"
+        "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.29.0",
-        "@babel/preset-env": "^7.23.0",
-        "@babel/preset-react": "^7.6.3",
         "@eslint/eslintrc": "^3.3.5",
         "@eslint/js": "^9.0.0",
         "@stylistic/eslint-plugin": "^4.0.0",
-        "@symfony/webpack-encore": "^4.0",
+        "@vitejs/plugin-react": "^6.0.1",
-        "autoprefixer": "^10.0.0",
-        "babel-loader": "^9.0",
-        "core-js": "^3.0.0",
         "eslint": "^9.0.0",
-        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react": "^7.0.0",
         "eslint-plugin-react-hooks": "^5.0.0",
         "globals": "^15.0.0",
         "sass": "^1.77.0",
-        "sass-loader": "^13.0",
+        "vite": "^8.0.8",
-        "webpack": "^5.72",
+        "vite-plugin-symfony": "^8.2.4"
-        "webpack-cli": "^5.0",
-        "webpack-notifier": "^1.15.0"
     },
     "scripts": {
-        "dev-server": "encore dev-server",
+        "dev": "vite",
-        "dev": "encore dev",
+        "watch": "vite build --watch",
-        "watch": "encore dev --watch",
+        "build": "vite build",
-        "build": "encore production",
         "lint": "eslint assets/js/"
     }
 }

symfony.lock

@@ -95,6 +95,15 @@
     "paragonie/random_compat": {
         "version": "v2.0.12"
     },
+    "pentatrion/vite-bundle": {
+        "version": "8.2",
+        "recipe": {
+            "repo": "github.com/symfony/recipes-contrib",
+            "branch": "main",
+            "version": "6.5",
+            "ref": "3a6673f248f8fc1dd364dadfef4c5b381d1efab6"
+        }
+    },
     "psr/cache": {
         "version": "1.0.1"
     },
@@ -363,24 +372,6 @@
             "ref": "6bdfa1a95f6b2e677ab985cd1af2eae35d62e0f6"
         }
     },
-    "symfony/webpack-encore-bundle": {
-        "version": "1.0",
-        "recipe": {
-            "repo": "github.com/symfony/recipes",
-            "branch": "master",
-            "version": "1.0",
-            "ref": "d3b160b9799c91cbfc3df6f018c795f3bf88698a"
-        },
-        "files": [
-            "assets/css/app.css",
-            "assets/js/MineSeeker.js",
-            "config/packages/assets.yaml",
-            "config/packages/prod/webpack_encore.yaml",
-            "config/packages/webpack_encore.yaml",
-            "package.json",
-            "webpack.config.js"
-        ]
-    },
     "symfony/yaml": {
         "version": "v4.0.9"
     },

templates/Game/index.html.twig

@@ -91,5 +91,5 @@
 
 {% block stylesheets %}
     {{ parent() }}
-    {{ encore_entry_link_tags('homeStyle') }}
+    {{ vite_entry_link_tags('homeStyle') }}
 {% endblock %}

templates/Game/play.html.twig

@@ -26,7 +26,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-    {{ encore_entry_link_tags('mineseekerStyle') }}
+    {{ vite_entry_link_tags('mineseekerStyle') }}
 
     <style>
         .mine-container {
@@ -37,5 +37,5 @@
 
 {% block javascripts %}
     {{ parent() }}
-    {{ encore_entry_script_tags('mineseeker') }}
+    {{ vite_entry_script_tags('mineseeker') }}
 {% endblock %}

vite.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import symfonyPlugin from 'vite-plugin-symfony';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    symfonyPlugin({ refresh: true }),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        mineseeker: './assets/js/app.jsx',
+        mineseekerStyle: './assets/css/style.mineseeker.scss',
+        homeStyle: './assets/css/style.layout.scss',
+      },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern',
+        silenceDeprecations: ['import'],
+      },
+    },
+  },
+});

webpack.config.js

@@ -1,62 +0,0 @@
-var Encore = require('@symfony/webpack-encore');
-var webpack = require('webpack');
-
-// 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');
-}
-
-// the project directory where compiled assets will be stored
-Encore
-  .setOutputPath('public/build/')
-// the public path used by the web server to access the previous directory
-  .setPublicPath('/build')
-
-// .cleanupOutputBeforeBuild()
-  .enableBuildNotifications()
-  .enableSourceMaps(!Encore.isProduction())
-// uncomment to create hashed filenames (e.g. app.abc123.css)
-  .enableVersioning(Encore.isProduction())
-
-// .copyFiles([
-//     {from: './public/bundles/goswebsocket/', to: '/[path][name].[ext]', pattern: /\.(js|css|map)$/, includeSubdirectories: false},
-// ])
-
-// uncomment to define the assets of the project
-// .addEntry('js/app', './assets/js/MineSeeker.js')
-// .addStyleEntry('css/app', './assets/css/app.scss')
-
-// .addEntry('mineseeker', ['babel-polyfill', './assets/js/MineSeeker.js'])
-  .addEntry('mineseeker', './assets/js/app.jsx')
-  .addEntry('mineseekerStyle', './assets/css/style.mineseeker.scss')
-  .addEntry('homeStyle', './assets/css/style.layout.scss')
-
-// uncomment if you use Sass/SCSS files
-  .enableSassLoader(options => {
-    options.api = 'modern';
-    options.sassOptions = { silenceDeprecations: ['import'] };
-  })
-  .configureCssLoader(options => {
-    // don't process absolute URLs (e.g. /images/...) — served by the web server
-    options.url = { filter: url => !url.startsWith('/') };
-  })
-
-// provide $/jQuery as global variables for Bootstrap 3 and legacy code
-  .addPlugin(new webpack.ProvidePlugin({
-    $: 'jquery',
-    jQuery: 'jquery',
-    'window.jQuery': 'jquery',
-  }))
-
-  .enableReactPreset()
-  .configureBabel(babelConfig => {
-    const idx = babelConfig.presets.findIndex(p => (Array.isArray(p) ? p[0] : p).includes('preset-react'));
-    if (-1 < idx) babelConfig.presets[idx] = [require.resolve('@babel/preset-react'), { runtime: 'automatic' }];
-  })
-
-// .enableSingleRuntimeChunk()
-  .disableSingleRuntimeChunk()
-;
-
-module.exports = Encore.getWebpackConfig();