7.0 vite

.gitignore

@@ -50,3 +50,7 @@ package-lock.json
 
 public/uploads/user/*
 !public/uploads/user/.gitkeep
+
+# Source maps, written only by the development build (npm run dev / watch)
+public/js/*.map
+public/css/*.map

package.json

@@ -3,10 +3,11 @@
   "version": "2.0.0",
   "description": "Web starter package suitable for admin applications.",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node_modules/.bin/webpack --mode development --progress",
-    "watch": "cross-env NODE_ENV=development webpack --watch --mode development --progress",
-    "prod": "cross-env NODE_ENV=production node_modules/.bin/webpack --mode=production --progress"
+    "dev": "vite build --mode development",
+    "watch": "vite build --watch --mode development",
+    "prod": "vite build"
   },
   "repository": {
     "type": "git",
@@ -22,39 +23,17 @@
     "url": "https://github.com/dotkernel/admin/issues"
   },
   "homepage": "https://github.com/dotkernel/admin#readme",
-  "dependencies": {
+  "devDependencies": {
     "@popperjs/core": "^2.11.8",
-    "babel-polyfill": "^6.26.0",
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "jquery": "^4.0.0",
     "jquery-migrate": "^4.0.2",
     "jquery-sparkline": "^2.4.0",
     "lodash": "^4.18.1",
-    "moment": "^2.30.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^8.0.0",
-    "@babel/plugin-transform-class-properties": "^8.0.0",
-    "@babel/plugin-transform-object-rest-spread": "^8.0.0",
-    "@babel/plugin-transform-runtime": "^8.0.0",
-    "@babel/runtime": "^8.0.0",
-    "ajv": "^8.18.0",
-    "babel-loader": "^10.1.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^14.0.0",
-    "cross-env": "^10.0.0",
-    "css-loader": "7.1.4",
-    "expose-loader": "^5.0.0",
-    "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.9.0",
     "sass": "^1.77.1",
-    "sass-loader": "^17.0.0",
-    "terser-webpack-plugin": "^5.6.1",
-    "webpack": "^5.92.1",
-    "webpack-cli": "^7.0.0"
-  },
-  "overrides": {
-    "graceful-fs": "^4.2.11"
+    "sass-embedded": "^1.102.0",
+    "vite": "^8.0.0",
+    "vite-plugin-static-copy": "^4.1.0"
   }
 }

src/Admin/templates/admin/list-admin-login.html.twig

@@ -162,5 +162,5 @@
     const storeSettingsUrl = '{{ path('setting::store-setting', {identifier: identifier}) }}';
     const getSettingsUrl = '{{ path('setting::view-setting', {identifier: identifier}) }}';
 </script>
-<script src="{{ asset('js/table_settings.js') }}" defer></script>
+<script type="module" src="{{ asset('js/table_settings.js') }}"></script>
 {% endblock %}

src/Admin/templates/admin/list-admin.html.twig

@@ -160,6 +160,6 @@
     const storeSettingsUrl = '{{ path('setting::store-setting', {identifier: identifier}) }}';
     const getSettingsUrl = '{{ path('setting::view-setting', {identifier: identifier}) }}';
 </script>
-<script src="{{ asset('js/table_settings.js') }}" defer></script>
-<script src="{{ asset('js/admin.js') }}" defer></script>
+<script type="module" src="{{ asset('js/table_settings.js') }}"></script>
+<script type="module" src="{{ asset('js/admin.js') }}"></script>
 {% endblock %}

src/Admin/templates/admin/login-form.html.twig

@@ -43,6 +43,6 @@
             </div>
         </div>
     </div>
-    <script src="{{ asset('js/app.js') }}"></script>
+    <script type="module" src="{{ asset('js/app.js') }}"></script>
 </body>
 </html>

src/App/assets/js/_jquery-setup.js

@@ -1,3 +1,7 @@
 import $ from 'jquery';
 
+// jquery-migrate and jquery-sparkline are plugins that attach themselves to the
+// global jQuery, so it has to be exposed before either of them is imported.
+window.$ = window.jQuery = $;
+
 $.migrateMute = true;

src/App/assets/js/components/_main.js

@@ -22,4 +22,4 @@ $(document).ready(function () {
     });
 
     $('.current-route').closest('.nav-group').addClass('open');
-});
+});

src/App/assets/js/components/_sparkline.js

@@ -1,4 +1,7 @@
 import $ from 'jquery';
+// jquery-sparkline reads the global jQuery rather than importing it, so the
+// setup that exposes it has to be imported first.
+import '../_jquery-setup';
 import 'jquery-sparkline';
 import { debounce } from 'lodash';
 import { COLORS } from './_colors.js';

src/App/assets/js/index.js

@@ -1,3 +1,4 @@
+import '../scss/index.scss';
 import './_jquery-setup';
 import 'jquery-migrate';
 import './components/_chart';

src/App/assets/scss/components/font-awesome.scss

@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../fonts/icons/fontawesome/fontawesome-webfont.eot?v=4.7.0');
-  src: url('../fonts/icons/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/icons/fontawesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/icons/fontawesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/icons/fontawesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/icons/fontawesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+  src: url('../../fonts/icons/fontawesome/fontawesome-webfont.eot?v=4.7.0');
+  src: url('../../fonts/icons/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../../fonts/icons/fontawesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../../fonts/icons/fontawesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../../fonts/icons/fontawesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../../fonts/icons/fontawesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }