:sparkles: wave-ui working with tree shaking

frontend/package.json

@@ -22,19 +22,14 @@
         "@prettier/plugin-pug": "^1.19.2",
         "@vitejs/plugin-vue": "^2.2.4",
         "@vue/compiler-sfc": "^3.2.31",
-        "autoprefixer": "^10.4.2",
         "cross-env": "^7.0.3",
         "eslint": "^8.11.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-vue": "^8.5.0",
-        "naive-ui": "^2.26.4",
-        "postcss": "^8.4.8",
-        "postcss-calc": "^8.2.4",
-        "postcss-import": "^14.0.2",
-        "precss": "^4.0.0",
         "pug": "^3.0.2",
         "pug-plain-loader": "^1.1.0",
-        "sugarss": "^4.0.1",
+        "sass": "^1.54.4",
+        "sass-loader": "^10.3.1",
         "vite": "^2.8.6",
         "vite-fs": "^0.0.2",
         "watch": "^1.0.2"

frontend/postcss.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-    parser: 'sugarss',
-    plugins: [
-        require('postcss-import'),
-        require('postcss-calc'),
-        require('precss'),
-        require('autoprefixer'),
-    ],
-}

frontend/src/App.vue

@@ -3,8 +3,7 @@ w-app
     w-badge
         template(#badge) 3
             w-button(color="primary")
-                w-icon(class="mr1") mdi mdi-email
-                    Emails
+                w-icon(class="mr1") mdi mdi-email Emails
     w-flex.my12(:gap="3" align-center wrap)
         | Show menu on:
         w-menu
@@ -25,6 +24,7 @@ w-app
 </template>
 
 <script>
+import 'wave-ui/dist/wave-ui.css'
 import SideBar from './components/SideBar.vue'
 
 import { Chatter, currentProfile, StonkAlert } from './services'

frontend/src/main.js

@@ -2,7 +2,8 @@ import { createApp } from 'vue'
 import router from './router'
 import { checkLoginStatus } from './router/guards'
 
-import WaveUI from 'wave-ui'
+import WaveUI from '../node_modules/wave-ui/src/wave-ui/core'
+import components from './wave'
 
 import App from './App.vue'
 import MainNav from './components/MainNav.vue'
@@ -15,8 +16,8 @@ const DEV = import.meta.env.VITE_DEV == 'true'
 router.beforeEach((to, from, next) => {
     /**
      * Skip any route guarding with `npm run dev` or
-     * use the loginService to deal with login details
-     * Activate with `npm run nodev`
+     * Use the loginService to deal with login details
+     * NOTE: Activate with `npm run nodev`
      */
     if (DEV) {
         next()
@@ -26,8 +27,11 @@ router.beforeEach((to, from, next) => {
 })
 
 const run = entry => {
-    const siimee = createApp(App).use(router)
-    new WaveUI(siimee, {})
+    const siimee = createApp(App)
+    siimee.use(WaveUI, { components })
+    new WaveUI(siimee)
+
+    siimee.use(router)
     siimee.component('MainNav', MainNav)
     siimee.mount(entry)
 }

frontend/src/views/SurveyView.vue

@@ -74,7 +74,8 @@ import { maxDistanceKey } from '../../../backend/db/data-generator/config.json'
 export default {
     props: {
         pid: {
-            type: Number,
+            type: String,
+            default: () => '1',
         },
     },
     data() {

frontend/src/wave.js

@@ -0,0 +1,28 @@
+/**
+ * We have to destructure the import for tree-shaking to work
+ */
+import {
+    WAlert,
+    WApp,
+    WBadge,
+    WButton,
+    WCard,
+    WFlex,
+    WIcon,
+    WImage,
+    WMenu,
+    WOverlay,
+} from '../node_modules/wave-ui/src/wave-ui/components'
+
+export default {
+    WAlert,
+    WApp,
+    WBadge,
+    WButton,
+    WCard,
+    WFlex,
+    WIcon,
+    WImage,
+    WMenu,
+    WOverlay,
+}

frontend/vite.config.js

@@ -1,9 +1,17 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import ViteFS from 'vite-fs'
+
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(), ViteFS()],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                additionalData:
+                    '$use-layout-classes: false;@import "/src/../node_modules/wave-ui/src/wave-ui/scss/_variables.scss";',
+            },
+        },
+    },
+    plugins: [vue()],
     resolve: {
         alias: {
             '@': require('path').resolve(__dirname, 'src'),