Returning to webpack

.gitignore

@@ -8,10 +8,11 @@
 /vendor/
 ###< symfony/framework-bundle ###
 .idea/
-
 .env
 
-###> pentatrion/vite-bundle ###
+###> symfony/webpack-encore-bundle ###
 /node_modules/
 /public/build/
-###< pentatrion/vite-bundle ###
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

assets/js/job/add.js

@@ -43,7 +43,7 @@ const timepickerOptions = {
 }
 function initDatePickers()
 {
-    tempusDominus.extend(momentparse, 'DD/MM/yyyy HH:mm:ss');
+    tempusDominus.extend(momentparse.load, 'DD/MM/yyyy HH:mm:ss');
     new tempusDominus.TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions);
     new tempusDominus.TempusDominus(document.querySelector('#lastrunselector'), timepickerOptions);
 }

composer.json

@@ -15,7 +15,6 @@
         "doctrine/doctrine-migrations-bundle": "^3.2",
         "doctrine/orm": "^2.12",
         "guzzlehttp/guzzle": "^7.4",
-        "pentatrion/vite-bundle": "^v2.0",
         "phpseclib/phpseclib": "^3.0",
         "scienta/doctrine-json-functions": "^5.1",
         "symfony/console": "^6.1",
@@ -28,6 +27,7 @@
         "symfony/security-bundle": "^6.1",
         "symfony/translation": "^6.1",
         "symfony/twig-bundle": "^6.1",
+        "symfony/webpack-encore-bundle": "^1.15",
         "symfony/yaml": "^6.1"
     },
     "config": {

config/bundles.php

@@ -10,5 +10,5 @@ return [
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
-    Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

config/packages/webpack_encore.yaml

@@ -0,0 +1,49 @@
+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:
+        # pass "frontend" as the 3rg arg to the Twig functions
+        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
+        # frontend: '%kernel.project_dir%/public/frontend/build'
+
+    # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+    # Put in config/packages/prod/webpack_encore.yaml
+    # cache: true
+
+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

config/routes/dev/pentatrion_vite.yaml

@@ -1,3 +0,0 @@
-_pentatrion_vite:
-    prefix: /build
-    resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

package.json

@@ -14,12 +14,13 @@
   },
   "devDependencies": {
     "sass": "^1.5",
-    "vite": "^3.0",
+    "sass-loader": "^13.0",
-    "vite-plugin-symfony": "^0.4"
+    "@symfony/webpack-encore": "^3.0",
+    "core-js": "^3.24"
   },
   "scripts": {
-    "watch": "vite build --minify=false --sourcemap --watch",
+    "watch" : "encore dev --watch",
-    "build-dev": "vite build --minify=false --sourcemap",
+    "build-dev": "encore dev",
-    "build": "vite build"
+    "build": "encore prod"
   }
 }

symfony.lock

@@ -412,6 +412,25 @@
             "config/routes/web_profiler.yaml"
         ]
     },
+    "symfony/webpack-encore-bundle": {
+        "version": "1.15",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "1.10",
+            "ref": "2e458cc7e6f1df1dad890eb104b81e4f302c9bd4"
+        },
+        "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"
+        ]
+    },
     "symfony/yaml": {
         "version": "v6.0.3"
     },

templates/job/add.html.twig

@@ -252,9 +252,9 @@
 {% endblock %}
 
 {% block styles %}
-    {{ vite_entry_link_tags('job.add') }}
+    {{ encore_entry_link_tags('job.add') }}
 {% endblock %}
 
 {% block scripts %}
-    {{ vite_entry_script_tags('job.add') }}
+    {{ encore_entry_script_tags('job.add') }}
 {% endblock %}

templates/job/edit.html.twig

@@ -289,9 +289,9 @@
 {% endblock %}
 
 {% block styles %}
-    {{ vite_entry_link_tags('job.add') }}
+    {{ encore_entry_link_tags('job.add') }}
 {% endblock %}
 
 {% block scripts %}
-    {{ vite_entry_script_tags('job.add') }}
+    {{ encore_entry_script_tags('job.add') }}
 {% endblock %}

templates/job/index.html.twig

@@ -63,9 +63,9 @@
 {% endblock %}
 
 {% block styles %}
-    {{ vite_entry_link_tags('job.index') }}
+    {{ encore_entry_link_tags('job.index') }}
 {% endblock %}
 
 {% block scripts %}
-    {{ vite_entry_script_tags('job.index') }}
+    {{ encore_entry_script_tags('job.index') }}
 {% endblock %}

templates/job/view.html.twig

@@ -36,9 +36,9 @@
 {% endblock %}
 
 {% block styles %}
-    {{ vite_entry_link_tags('job.view') }}
+    {{ encore_entry_link_tags('job.view') }}
 {% endblock %}
 
 {% block scripts %}
-    {{ vite_entry_script_tags('job.view') }}
+    {{ encore_entry_script_tags('job.view') }}
 {% endblock %}

templates/security/login.html.twig

@@ -4,9 +4,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         
         <title>Webcron management :: Log in</title>
-        {{ vite_entry_link_tags('security.login') }}
+        {{ encore_entry_link_tags('security.login') }}
 
-        {{ vite_entry_script_tags('security.login') }}
+        {{ encore_entry_script_tags('security.login') }}
     </head>
     
     <body>

vite.config.js

@@ -1,33 +0,0 @@
-import { defineConfig } from "vite";
-import symfonyPlugin from "vite-plugin-symfony";
-
-/* if you're using React */
-// import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-    plugins: [
-        /* react(), // if you're using React */
-        symfonyPlugin(),
-    ],
-    root: ".",
-    base: "/build/",
-    build: {
-        manifest: true,
-        emptyOutDir: true,
-        assetsDir: "",
-        outDir: "./public/build",
-        rollupOptions: {
-            input: {
-                'security.login' : "./assets/js/security/login.js",
-                'job.index' : "./assets/js/job/index.js",
-                'job.view' : "./assets/js/job/view.js",
-                'job.add' : "./assets/js/job/add.js"
-            },
-        },
-    },
-    server: {
-        hmr: {
-            protocol: 'ws'
-        }
-    }
-});

webpack.config.js

@@ -0,0 +1,75 @@
+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 sub-directory 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('security.login', './assets/js/security/login.js')
+    .addEntry('job.index', './assets/js/job/index.js')
+    .addEntry('job.view', './assets/js/job/view.js')
+    .addEntry('job.add', './assets/js/job/add.js')
+
+    // 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())
+
+    .configureBabel((config) => {
+        config.plugins.push('@babel/plugin-proposal-class-properties');
+    })
+
+    // enables @babel/preset-env polyfills
+    .configureBabelPresetEnv((config) => {
+        config.useBuiltIns = 'usage';
+        config.corejs = 3;
+    })
+
+    // enables Sass/SCSS support
+    .enableSassLoader()
+
+    // 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()
+
+    // uncomment if you're having problems with a jQuery plugin
+    //.autoProvidejQuery()
+;
+
+module.exports = Encore.getWebpackConfig();