Migrate from Webpack to ViteJS

Evanaellio · Nov 6, 2023 · c5fd120 · c5fd120
1 parent 0ab5c82
commit c5fd120
Show file tree

Hide file tree

Showing 14 changed files with 986 additions and 8,879 deletions.
diff --git a/apps/core/templates/core/create_dynamic_playlist.html b/apps/core/templates/core/create_dynamic_playlist.html
@@ -1,6 +1,5 @@
 {% extends "core/navigation.html" %}
 {% load static %}
-{% load render_bundle from webpack_loader %}
 
 {% block css %}
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
@@ -14,8 +13,6 @@ <h5>{{ title }}</h5>
         {% csrf_token %}
         <create-dynamic-playlist></create-dynamic-playlist>
     </div>
-
-    {% render_bundle 'app' %}
 {% endblock %}
 
 {% block javascript %}

diff --git a/apps/core/templates/core/groups.html b/apps/core/templates/core/groups.html
@@ -1,6 +1,5 @@
 {% extends "core/navigation.html" %}
 {% load static %}
-{% load render_bundle from webpack_loader %}
 
 {% block css %}
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
@@ -14,8 +13,6 @@ <h5>{{ title }}</h5>
         {% csrf_token %}
         <groups></groups>
     </div>
-
-    {% render_bundle 'app' %}
 {% endblock %}
 
 {% block javascript %}

diff --git a/apps/core/templates/core/navigation.html b/apps/core/templates/core/navigation.html
@@ -1,4 +1,5 @@
 {% load static %}
+{% load django_vite %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -14,6 +15,8 @@
     <link rel="stylesheet" href="{% static 'css/main.css' %}">
     {% block css %}{% endblock %}
     <title>{{ title | default:"Melting Potlist" }}</title>
+    {% vite_hmr_client %}
+    {% vite_asset 'src/main.js' %}
 </head>
 <body>
 

diff --git a/apps/core/templates/core/play_dynamic_playlist.html b/apps/core/templates/core/play_dynamic_playlist.html
@@ -1,6 +1,5 @@
 {% extends "core/navigation.html" %}
 {% load static %}
-{% load render_bundle from webpack_loader %}
 
 {% block css %}
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
@@ -19,8 +18,6 @@ <h5>{{ title }}</h5>
             <play-dynamic-playlist-listener></play-dynamic-playlist-listener>
         {% endif %}
     </div>
-
-    {% render_bundle 'app' %}
 {% endblock %}
 
 {% block javascript %}

diff --git a/melting_potlist/settings.py b/melting_potlist/settings.py
@@ -45,7 +45,7 @@
     "django_yamlconf",
     "rest_framework",
     "widget_tweaks",
-    "webpack_loader",
+    "django_vite",
     "django_user_agents",
     "apps.core",
     "apps.discord_login",
@@ -155,9 +155,11 @@
 
 STATIC_URL = "/content/"
 
+DJANGO_VITE_ASSETS_PATH = BASE_DIR / "vue_components" / "dist"
+
 STATICFILES_DIRS = [
     BASE_DIR / "static",
-    BASE_DIR / "vue_components" / "dist",  # Static resources compiled by vue service build (using Webpack)
+    DJANGO_VITE_ASSETS_PATH,
 ]
 
 STATIC_ROOT = BASE_DIR / "staticfiles"

diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -21,7 +21,7 @@ whitenoise = "^6.3.0"
 yt-dlp = "^2023.2.17"
 google-api-python-client = "^2.79.0"
 django-user-agents = "^0.4.0"
-django-webpack-loader = "^1.8.1"
+django-vite = "^2.1.3"
 django-widget-tweaks = "^1.4.12"
 uvicorn = "^0.20.0"
 channels = "~3.0.5"

diff --git a/vue_components/.eslintrc b/vue_components/.eslintrc
@@ -0,0 +1,4 @@
+env: {
+    node: true,
+    es2022: true,
+}
diff --git a/vue_components/babel.config.js b/vue_components/babel.config.js
diff --git a/vue_components/package.json b/vue_components/package.json
@@ -3,21 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-eslint": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
-    "@vue/compiler-sfc": "^3.3.7",
-    "babel-eslint": "^10.1.0",
-    "core-js": "^3.33.2",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^7.20.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "django-vite-plugin": "^2.0.4",
+    "eslint": "^8.53.0",
+    "eslint-plugin-vue": "^9.18.1",
     "pnpm": "^8.10.2",
-    "regenerator-runtime": "^0.13.9",
+    "vite": "^4.5.0",
     "vue": "^3.3.7",
     "vue-multiselect": "3.0.0-beta.3",
     "webpack-bundle-tracker": "^1.4.0"
@@ -34,9 +31,6 @@
       "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
     "rules": {}
   },
   "browserslist": [