Vite update

package.json

@@ -23,43 +23,17 @@
   },
   "homepage": "https://github.com/dotkernel/light#readme",
   "devDependencies": {
-    "@rollup/plugin-alias": "^6.0.0",
+    "@popperjs/core": "^2.11.8",
     "autoprefixer": "^10.4.20",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "^10.0.0",
-    "babel-preset-env": "^1.7.0",
     "bootstrap": "^5.3.3",
-    "bootstrap-fileinput": "^5.5.4",
-    "bootstrap-sass": "^3.4.3",
     "cross-env": "^10.0.0",
-    "css-loader": "^7.1.2",
-    "file-loader": "^6.2.0",
-    "jquery": "^4.0.0",
-    "jquery-mousewheel": "^3.1.13",
-    "mini-css-extract-plugin": "^2.9.1",
-    "postcss-loader": "^8.1.1",
+    "lightningcss": "^1.29.3",
     "pre-commit": "^2.0.0",
     "sass": "^1.86.3",
-    "sass-loader": "^17.0.0",
-    "style-loader": "^4.0.0",
-    "toastr": "^2.1.4",
-    "ts-loader": "^9.5.1",
-    "typescript": "^6.0.0",
     "vite": "^8.0.0",
-    "vite-plugin-static-copy": "^4.1.0"
-  },
-  "dependencies": {
-    "@babel/core": "^7.26.9",
-    "@popperjs/core": "^2.11.8",
-    "bootstrap-slider": "^11.0.2",
-    "lightningcss": "^1.29.3",
-    "npm": "^11.0.0",
-    "npm-check": "^6.0.1",
-    "popper.js": "^1.16.1",
-    "vite-jsconfig-paths": "^2.0.1",
     "vite-plugin-bundle-css": "^0.1.1",
-    "vite-plugin-commonjs": "^0.10.4",
     "vite-plugin-css-injected-by-js": "^5.0.0",
-    "vite-plugin-minify": "^2.1.0"
+    "vite-plugin-minify": "^3.0.0",
+    "vite-plugin-static-copy": "^4.1.0"
   }
 }

src/App/assets/js/index.js

@@ -1,6 +1,5 @@
-// Load jQuery and Bootstrap
 // Import our custom CSS
 import '../scss/index.scss'
-import './components/_main'
+
+// Import all of Bootstrap's JS (includes Popper)
 import 'bootstrap/dist/js/bootstrap.bundle';
-window.$ = window.jQuery = require('jquery');

src/App/assets/scss/index.scss

@@ -1,11 +1,5 @@
 // Bootstrap
-$navbar-height: 60px;
-$grid-float-breakpoint: 767px;
-$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
-@import "../../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../../../node_modules/toastr/toastr";
-@import "../../../../node_modules/bootstrap-slider/src/sass/bootstrap-slider";
-
+@use "~bootstrap/scss/bootstrap";
 // Base
-@import "components/general";
-@import "components/pages";
+@use "components/general";
+@use "components/pages";

src/App/templates/layout/default.html.twig

@@ -41,7 +41,7 @@
         <link href="https://fonts.googleapis.com/css?family=Barlow:400,500,600" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet">
 
-        <link href="{{ asset('css/app.css?v=13') }}" rel="stylesheet" />
+        <link href="{{ asset('css/app.css?v=14') }}" rel="stylesheet" />
 
         {% block stylesheets %}{% endblock %}
     </head>
@@ -207,7 +207,7 @@
             © Copyright Dotkernel {{ "now"|date('Y') }}. All rights reserved.
         </div>
 
-        <script src="{{ asset('js/app.js?v=4') }}"></script>
+        <script src="{{ asset('js/app.js?v=5') }}"></script>
         {% block javascript %}{% endblock %}
     </body>
 </html>

vite.config.js

@@ -1,12 +1,9 @@
 import {defineConfig} from 'vite';
 import { ViteMinifyPlugin } from 'vite-plugin-minify'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
-import alias from '@rollup/plugin-alias'
 import path from 'path'
-import commonjs from "vite-plugin-commonjs";
 export default defineConfig({
     plugins: [
-        alias(), commonjs(),
         viteStaticCopy({
             targets: [
                 {
@@ -23,31 +20,39 @@ export default defineConfig({
         }),
         ViteMinifyPlugin({}),
     ],
-    emptyOutDir: true,
-    root: path.resolve(__dirname, 'src'), //'src', // Set the root directory for Vite
-    build: {
-        commonjsOptions: { transformMixedEsModules: true }, // Change
-        outDir: '../public', // Output directory for compiled assets
-        rollupOptions: {
-            input: {
-                main: '/App/assets/js/index.js', // Main JavaScript entry point
-                style: '/App/assets/scss/index.scss', // Main CSS entry point
-            },
-            output: {
-                manualChunks: undefined,
-                entryFileNames: "js/app.js",
-                assetFileNames: "css/app.css",
-            },
+emptyOutDir: true,
+root: path.resolve(__dirname, 'src'), // Set the root directory for Vite
+build: {
+    outDir: '../public', // Output directory for compiled assets
+    rollupOptions: {
+        input: {
+            main: '/App/assets/js/index.js', // Main JavaScript entry point
+            style: '/App/assets/scss/index.scss', // Main CSS entry point
         },
+        output: {
+            manualChunks: undefined,
+            entryFileNames: "js/app.js",
+            assetFileNames: "css/app.css",
+        },
+    },
     },
     optimizeDeps: { force: true, },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                // Bootstrap 5.3 still uses @import internally; silence
+                // deprecation warnings coming from node_modules only.
+                quietDeps: true,
+            },
+        },
+    },
     resolve: {
         alias: [
             {
                 // this is required for the SCSS modules
                 find: /^~(.*)$/,
                 replacement: '$1',
-            }
+        }
         ],
     },
 });