perf(vite): chunk webcams, locales and large libraries

package.json

@@ -34,8 +34,6 @@
         "@jaames/iro": "^5.5.2",
         "@lezer/highlight": "^1.0.0",
         "@sindarius/gcodeviewer": "^3.2.2",
-        "@types/node": "^18.0.0",
-        "@types/overlayscrollbars": "^1.12.1",
         "@uiw/codemirror-theme-vscode": "^4.19.11",
         "axios": "^0.27.0",
         "codemirror": "^6.0.1",
@@ -45,12 +43,12 @@
         "echarts-gl": "^2.0.8",
         "hls.js": "^1.3.3",
         "jmuxer": "^2.0.5",
-        "js-sha256": "^0.9.0",
+        "js-sha256": "^0.10.0",
         "lodash.kebabcase": "^4.1.1",
         "lodash.throttle": "^4.1.1",
         "overlayscrollbars": "^1.13.1",
         "overlayscrollbars-vue": "^0.2.2",
-        "regenerator-runtime": "^0.13.9",
+        "regenerator-runtime": "^0.14.0",
         "resize-observer-polyfill": "^1.5.1",
         "semver": "^7.5.2",
         "typed_janus_js": "^1.0.14",
@@ -76,8 +74,10 @@
         "@types/jmuxer": "^2.0.3",
         "@types/lodash.kebabcase": "^4.1.6",
         "@types/lodash.throttle": "^4.1.6",
+        "@types/node": "^20.0.0",
+        "@types/overlayscrollbars": "^1.12.1",
         "@types/semver": "^7.3.8",
-        "@types/uuid": "^8.3.1",
+        "@types/uuid": "^9.0.0",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vue/eslint-config-typescript": "^12.0.0",
@@ -87,13 +87,15 @@
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-jsonc": "^2.2.1",
         "eslint-plugin-vue": "^9.0.0",
+        "postcss": "^8.4.31",
+        "postcss-nesting": "^12.0.1",
         "prettier": "^3.0.0",
         "sass": "~1.32",
-        "start-server-and-test": "^1.14.0",
+        "start-server-and-test": "^2.0.0",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
-        "vite": "^3.2.7",
-        "vite-plugin-checker": "^0.5.0",
+        "vite": "^4.4.9",
+        "vite-plugin-checker": "^0.6.0",
         "vite-plugin-package-version": "^1.0.2",
         "vite-plugin-pwa": "^0.16.4",
         "vite-plugin-vue2": "^2.0.1",

src/App.vue

@@ -40,6 +40,7 @@ import TheUploadSnackbar from '@/components/TheUploadSnackbar.vue'
 import TheManualProbeDialog from '@/components/dialogs/TheManualProbeDialog.vue'
 import TheBedScrewsDialog from '@/components/dialogs/TheBedScrewsDialog.vue'
 import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustDialog.vue'
+import { setAndLoadLocale } from './plugins/i18n'
 
 Component.registerHooks(['metaInfo'])
 
@@ -162,8 +163,8 @@ export default class App extends Mixins(BaseMixin) {
     }
 
     @Watch('language')
-    languageChanged(newVal: string): void {
-        this.$i18n.locale = newVal
+    async languageChanged(newVal: string): Promise<void> {
+        await setAndLoadLocale(newVal)
     }
 
     @Watch('customStylesheet')
@@ -310,10 +311,10 @@ export default class App extends Mixins(BaseMixin) {
 <style>
 @import './assets/styles/fonts.css';
 @import './assets/styles/toastr.css';
-@import './assets/styles/page.scss';
-@import './assets/styles/sidebar.scss';
-@import './assets/styles/utils.scss';
-@import './assets/styles/updateManager.scss';
+@import './assets/styles/page.css';
+@import './assets/styles/sidebar.css';
+@import './assets/styles/utils.css';
+@import './assets/styles/updateManager.css';
 
 :root {
     --app-height: 100%;

src/assets/styles/utils.scss → src/assets/styles/utils.css

@@ -1,12 +1,3 @@
-@mixin no-select {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
 .user-select-none {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

src/components/CommandHelpModal.vue

@@ -124,7 +124,7 @@ export default class CommandHelpModal extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .command-help-content {
     overflow-x: hidden;
 

src/components/TheEditor.vue

@@ -341,7 +341,7 @@ export default class TheEditor extends Mixins(BaseMixin) {
     }
 }
 </script>
-<style lang="scss" scoped>
+<style scoped>
 ::v-deep .ͼ1 .cm-panel.cm-search *:focus:not(.focus-visible) {
     outline: none;
 }

src/components/console/ConsoleTable.vue

@@ -1,4 +1,4 @@
-<style scoped lang="scss"></style>
+<style scoped></style>
 
 <template>
     <div :class="'consoleTable ' + (isMini ? 'mini' : '')">

src/components/console/ConsoleTableEntry.vue

@@ -1,4 +1,4 @@
-<style scoped lang="scss">
+<style scoped>
 .consoleTableRow {
     font-family: 'Roboto Mono', monospace;
     font-size: 0.95em;

src/components/dialogs/TheBedScrewsDialog.vue

@@ -173,4 +173,4 @@ export default class TheBedScrewsDialog extends Mixins(BaseMixin, ControlMixin)
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

src/components/dialogs/TheManualProbeDialog.vue

@@ -181,7 +181,7 @@ export default class TheManualProbeDialog extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .v-btn-toggle {
     width: 100%;
 }

src/components/panels/Extruder/ExtruderControlPanelControl.vue

@@ -274,7 +274,7 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ExtruderMixi
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 ._btn-group {
     border-radius: 4px;
     display: inline-flex;

src/components/panels/Extruder/ExtruderControlPanelTools.vue

@@ -49,14 +49,13 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 ._btn-group {
     border-radius: 4px;
     display: inline-flex;
     flex-wrap: nowrap;
     max-width: 100%;
     min-width: 100%;
-    width: 100%;
 
     .v-btn {
         border-radius: 0;

src/components/panels/Machine/UpdatePanel/GitCommitsList.vue

@@ -116,7 +116,7 @@ export default class GitCommitsList extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .groupedCommits {
     padding-top: 0;
 }

src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue

@@ -99,7 +99,7 @@ export default class GitCommitsListDayCommit extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 li.commit {
     border-color: rgb(48, 54, 61);
     border-style: solid;

src/components/panels/MacrogroupPanel.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <panel

src/components/panels/Status/ExcludeObject.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <div v-if="['printing', 'paused'].includes(printer_state) && printing_objects.length">

src/components/panels/Status/ExcludeObjectDialog.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <div>

src/components/panels/Status/ExcludeObjectDialogList.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <div>

src/components/panels/Status/ExcludeObjectDialogMap.vue

@@ -1,6 +1,5 @@
-<style lang="scss" scoped>
+<style scoped>
 svg {
-    //background: rgba(200, 200, 200);
     border: 2px solid #888;
 }
 

src/components/panels/Status/Jobqueue.vue

@@ -156,7 +156,7 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .filesJobqueue {
     position: relative;
 }

src/components/panels/Status/JobqueueEntry.vue

@@ -275,7 +275,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .filesJobqueue {
     position: relative;
 }

src/components/panels/Status/PauseAtLayerDialog.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <div>

src/components/panels/Status/Printstatus.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <div>

src/components/panels/Status/PrintstatusComplete.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <v-card-text class="pa-0">

src/components/panels/Status/PrintstatusPrinting.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <template>
     <v-card-text class="pa-0">

src/components/panels/Status/PrintstatusThumbnail.vue

@@ -223,7 +223,7 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .statusPanel-big-thumbnail {
     transition: height 0.25s ease-out;
 }

src/components/panels/StatusPanel.vue

@@ -397,7 +397,7 @@ export default class StatusPanel extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 ._border-radius {
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;

src/components/panels/Temperature/TemperaturePanelList.vue

@@ -155,7 +155,7 @@ export default class TemperaturePanelList extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .temperature-panel-table th,
 .temperature-panel-table ::v-deep td {
     padding-top: 5px !important;

src/components/panels/Temperature/TemperaturePanelListItem.vue

@@ -273,7 +273,7 @@ export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 ::v-deep .v-icon._no-focus-style:focus::after {
     opacity: 0 !important;
 }

src/components/panels/Temperature/TemperaturePanelListItemNevermore.vue

@@ -99,7 +99,7 @@ export default class TemperaturePanelListItemNevermore extends Mixins(BaseMixin)
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 ::v-deep .v-icon._no-focus-style:focus::after {
     opacity: 0 !important;
 }

src/components/panels/Temperature/TemperaturePanelPresets.vue

@@ -107,7 +107,7 @@ export default class TemperaturePanelPresets extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 ._preset-title {
     font-size: 0.8125rem;
     font-weight: 500;

src/components/panels/ToolheadControls/BarsControl.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped>
+<style scoped>
 .btnHomeAxis {
     width: 36px;
     min-width: 36px !important;

src/components/panels/ToolheadControls/CircleControl.vue

@@ -706,7 +706,7 @@ export default class CircleControl extends Mixins(BaseMixin, ControlMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 svg {
     max-height: 350px;
     min-height: 275px;

src/components/panels/ToolheadControls/CrossControl.vue

@@ -1,4 +1,4 @@
-<style lang="scss" scoped>
+<style scoped>
 .btnMinWidthAuto {
     min-width: auto !important;
 }

src/components/panels/ToolheadControls/ZoffsetControl.vue

@@ -267,7 +267,7 @@ export default class ZoffsetControl extends Mixins(BaseMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .v-btn-toggle {
     width: 100%;
 }

src/components/settings/SettingsGeneralTab.vue

@@ -82,6 +82,25 @@ export default class SettingsGeneralTab extends Mixins(BaseMixin, SettingsGenera
     mdiHelpCircle = mdiHelpCircle
     mdiCloseThick = mdiCloseThick
 
+    availableLanguages: { text: string; value: string }[] = []
+
+    async created() {
+        const locales = import.meta.glob<string>('../../locales/*.json', { import: 'title' })
+        const languages: { text: string; value: string }[] = []
+
+        for (const file in locales) {
+            const langKey = file.slice(file.lastIndexOf('.') - 2, file.lastIndexOf('.'))
+            const title = await locales[file]()
+
+            languages.push({
+                text: title,
+                value: langKey,
+            })
+        }
+
+        this.availableLanguages = languages
+    }
+
     get printerName() {
         return this.$store.state.gui.general.printername
     }
@@ -98,22 +117,6 @@ export default class SettingsGeneralTab extends Mixins(BaseMixin, SettingsGenera
         this.$store.dispatch('gui/saveSetting', { name: 'general.language', value: newVal })
     }
 
-    get availableLanguages() {
-        const locales = import.meta.glob('../../locales/*.json', { eager: true }) as { [key: string]: any }
-        const languages: { text: string; value: string }[] = []
-
-        Object.keys(locales).map((file: string) => {
-            const langKey = file.slice(file.lastIndexOf('.') - 2, file.lastIndexOf('.'))
-
-            languages.push({
-                text: locales[file].title,
-                value: langKey,
-            })
-        })
-
-        return languages
-    }
-
     get dateFormat() {
         return this.$store.state.gui.general.dateFormat
     }