chore: migrates to vitejs (fluidd-core#920)

Signed-off-by: Pedro Lamas <[email protected]>

.eslintrc.js

@@ -1,43 +1,29 @@
 module.exports = {
   root: true,
   env: {
+    browser: true,
     node: true
   },
   extends: [
     'plugin:vue/recommended',
     '@vue/standard',
     '@vue/typescript/recommended'
   ],
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    ecmaVersion: 2020
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module'
   },
+  plugins: [
+    'vue'
+  ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    camelcase: 0,
-    'vue/no-v-html': 0,
-    'no-use-before-define': 0,
-    '@typescript-eslint/camelcase': 0,
-    '@typescript-eslint/no-explicit-any': 0
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        mocha: true
-      }
-    },
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        jest: true
-      }
-    }
-  ]
+    camelcase: 'off',
+    'no-use-before-define': 'off',
+    'vue/no-v-html': 'off',
+    'vue/no-v-text-v-html-on-component': 'off',
+    '@typescript-eslint/no-explicit-any': 'off'
+  }
 }

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/dev-dist
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/

README.md

@@ -1,37 +1,44 @@
 # Fluidd
+
 Fluidd is a free and open-source Klipper web interface for managing your 3d printer.
 
 ![Fluidd](/docs/assets/images/preview_sliced.png "Fluidd")
 
 ## Features
+
 - Responsive UI, supports desktop, tablets and mobile
 - Customizable layouts. Move any panel where YOU want
 - Built-in color themes
 - Manage multiple printers from one Fluidd install
 - [See our docs for more!](https://docs.fluidd.xyz)
 
 ## Support & Documentation
+
 See our [Docs](https://docs.fluidd.xyz).
 Join our [Discord!](https://discord.gg/GZ3D5tqfcF).
 
 ## Where to download?
+
 You can download the latest release [here](https://github.com/fluidd-core/fluidd/releases/latest).
 
 Older releases can be found [here](https://github.com/fluidd-core/fluidd/releases).
 
 ## Docker
-We have an official docker image. This is updated for each release.
-https://hub.docker.com/r/cadriel/fluidd
+
+We have an [official docker image](https://hub.docker.com/r/cadriel/fluidd). This is updated for each release.
 
 ## How to use?
+
 Fluidd is distributed as a RaspbiOS image, with Fluidd pre-installed and setup alongside its dependencies.
 
 The recommended approach is to flash a fresh image using FluiddPI.
 
 Please see the [docs](https://docs.fluidd.xyz) for help with installation and configuration.
 
 ### Credit
-A big thank you to;
+
+A big thank you to:
+
 - the [Voron Community](http://vorondesign.com/)
 - Kevin O'Connor for [Klipper](https://github.com/KevinOConnor/klipper)
 - Eric Callahan for [Moonraker](https://github.com/Arksine/moonraker)

components.d.ts

@@ -0,0 +1,126 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AddInstanceDialog: typeof import('./src/components/common/AddInstanceDialog.vue')['default']
+    AppAnnouncementDismissMenu: typeof import('./src/components/layout/AppAnnouncementDismissMenu.vue')['default']
+    AppBar: typeof import('./src/components/layout/AppBar.vue')['default']
+    AppBtn: typeof import('./src/components/ui/AppBtn.vue')['default']
+    AppBtnCollapse: typeof import('./src/components/ui/AppBtnCollapse.vue')['default']
+    AppBtnCollapseGroup: typeof import('./src/components/ui/AppBtnCollapseGroup.vue')['default']
+    AppBtnGroup: typeof import('./src/components/ui/AppBtnGroup.vue')['default']
+    AppBtnToolheadMove: typeof import('./src/components/ui/AppBtnToolheadMove.vue')['default']
+    AppChart: typeof import('./src/components/ui/AppChart.vue')['default']
+    AppCodeView: typeof import('./src/components/ui/AppCodeView.vue')['default']
+    AppColorPicker: typeof import('./src/components/ui/AppColorPicker.vue')['default']
+    AppColumnPicker: typeof import('./src/components/ui/AppColumnPicker.vue')['default']
+    AppFooter: typeof import('./src/components/layout/AppFooter.vue')['default']
+    AppIcon: typeof import('./src/components/ui/AppIcon.vue')['default']
+    AppInlineHelp: typeof import('./src/components/ui/AppInlineHelp.vue')['default']
+    AppIroColorPicker: typeof import('./src/components/ui/AppIroColorPicker.vue')['default']
+    AppMacroBtn: typeof import('./src/components/ui/AppMacroBtn.vue')['default']
+    AppNamedInput: typeof import('./src/components/ui/AppNamedInput.vue')['default']
+    AppNavDrawer: typeof import('./src/components/layout/AppNavDrawer.vue')['default']
+    AppNavItem: typeof import('./src/components/ui/AppNavItem.vue')['default']
+    AppNotificationMenu: typeof import('./src/components/layout/AppNotificationMenu.vue')['default']
+    AppQrCode: typeof import('./src/components/ui/AppQrCode.vue')['default']
+    AppSaveConfigAndRestartBtn: typeof import('./src/components/layout/AppSaveConfigAndRestartBtn.vue')['default']
+    AppSetting: typeof import('./src/components/ui/AppSetting.vue')['default']
+    AppSettingsNav: typeof import('./src/components/layout/AppSettingsNav.vue')['default']
+    AppSlider: typeof import('./src/components/ui/AppSlider.vue')['default']
+    AppSwitch: typeof import('./src/components/ui/AppSwitch.vue')['default']
+    AppTable: typeof import('./src/components/ui/AppTable.vue')['default']
+    AppToolsDrawer: typeof import('./src/components/layout/AppToolsDrawer.vue')['default']
+    AppUserMenu: typeof import('./src/components/layout/AppUserMenu.vue')['default']
+    AppWarnings: typeof import('./src/components/common/AppWarnings.vue')['default']
+    BedScrewsAdjustDialog: typeof import('./src/components/common/BedScrewsAdjustDialog.vue')['default']
+    CollapsableCard: typeof import('./src/components/common/CollapsableCard.vue')['default']
+    FlashMessage: typeof import('./src/components/common/FlashMessage.vue')['default']
+    KlippyStatusCard: typeof import('./src/components/common/KlippyStatusCard.vue')['default']
+    ManualProbeDialog: typeof import('./src/components/common/ManualProbeDialog.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SocketDisconnected: typeof import('./src/components/common/SocketDisconnected.vue')['default']
+    SystemCommands: typeof import('./src/components/common/SystemCommands.vue')['default']
+    SystemControl: typeof import('./src/components/common/SystemControl.vue')['default']
+    SystemLayout: typeof import('./src/components/common/SystemLayout.vue')['default']
+    SystemPrinters: typeof import('./src/components/common/SystemPrinters.vue')['default']
+    UpdatingDialog: typeof import('./src/components/common/UpdatingDialog.vue')['default']
+    VAlert: typeof import('vuetify/lib')['VAlert']
+    VApp: typeof import('vuetify/lib')['VApp']
+    VAppBar: typeof import('vuetify/lib')['VAppBar']
+    VBadge: typeof import('vuetify/lib')['VBadge']
+    VBtn: typeof import('vuetify/lib')['VBtn']
+    VBtnToggle: typeof import('vuetify/lib')['VBtnToggle']
+    VCard: typeof import('vuetify/lib')['VCard']
+    VCardActions: typeof import('vuetify/lib')['VCardActions']
+    VCardSubtitle: typeof import('vuetify/lib')['VCardSubtitle']
+    VCardText: typeof import('vuetify/lib')['VCardText']
+    VCardTitle: typeof import('vuetify/lib')['VCardTitle']
+    VCheckbox: typeof import('vuetify/lib')['VCheckbox']
+    VChip: typeof import('vuetify/lib')['VChip']
+    VCol: typeof import('vuetify/lib')['VCol']
+    VCombobox: typeof import('vuetify/lib')['VCombobox']
+    VContainer: typeof import('vuetify/lib')['VContainer']
+    VDataTable: typeof import('vuetify/lib')['VDataTable']
+    VDialog: typeof import('vuetify/lib')['VDialog']
+    VDivider: typeof import('vuetify/lib')['VDivider']
+    VExpandTransition: typeof import('vuetify/lib')['VExpandTransition']
+    VExpansionPanel: typeof import('vuetify/lib')['VExpansionPanel']
+    VExpansionPanelContent: typeof import('vuetify/lib')['VExpansionPanelContent']
+    VExpansionPanelHeader: typeof import('vuetify/lib')['VExpansionPanelHeader']
+    VExpansionPanels: typeof import('vuetify/lib')['VExpansionPanels']
+    VFooter: typeof import('vuetify/lib')['VFooter']
+    VForm: typeof import('vuetify/lib')['VForm']
+    VIcon: typeof import('vuetify/lib')['VIcon']
+    VItemGroup: typeof import('vuetify/lib')['VItemGroup']
+    VLayout: typeof import('vuetify/lib')['VLayout']
+    VList: typeof import('vuetify/lib')['VList']
+    VListGroup: typeof import('vuetify/lib')['VListGroup']
+    VListItem: typeof import('vuetify/lib')['VListItem']
+    VListItemAction: typeof import('vuetify/lib')['VListItemAction']
+    VListItemContent: typeof import('vuetify/lib')['VListItemContent']
+    VListItemGroup: typeof import('vuetify/lib')['VListItemGroup']
+    VListItemIcon: typeof import('vuetify/lib')['VListItemIcon']
+    VListItemSubtitle: typeof import('vuetify/lib')['VListItemSubtitle']
+    VListItemTitle: typeof import('vuetify/lib')['VListItemTitle']
+    VMain: typeof import('vuetify/lib')['VMain']
+    VMenu: typeof import('vuetify/lib')['VMenu']
+    VNavigationDrawer: typeof import('vuetify/lib')['VNavigationDrawer']
+    VOverlay: typeof import('vuetify/lib')['VOverlay']
+    VProgressCircular: typeof import('vuetify/lib')['VProgressCircular']
+    VProgressLinear: typeof import('vuetify/lib')['VProgressLinear']
+    VRadio: typeof import('vuetify/lib')['VRadio']
+    VRadioGroup: typeof import('vuetify/lib')['VRadioGroup']
+    VRow: typeof import('vuetify/lib')['VRow']
+    VSelect: typeof import('vuetify/lib')['VSelect']
+    VSheet: typeof import('vuetify/lib')['VSheet']
+    VSimpleCheckbox: typeof import('vuetify/lib')['VSimpleCheckbox']
+    VSimpleTable: typeof import('vuetify/lib')['VSimpleTable']
+    VSlider: typeof import('vuetify/lib')['VSlider']
+    VSnackbar: typeof import('vuetify/lib')['VSnackbar']
+    VSpacer: typeof import('vuetify/lib')['VSpacer']
+    VStepper: typeof import('vuetify/lib')['VStepper']
+    VStepperContent: typeof import('vuetify/lib')['VStepperContent']
+    VStepperHeader: typeof import('vuetify/lib')['VStepperHeader']
+    VStepperItems: typeof import('vuetify/lib')['VStepperItems']
+    VStepperStep: typeof import('vuetify/lib')['VStepperStep']
+    VSubheader: typeof import('vuetify/lib')['VSubheader']
+    VSwitch: typeof import('vuetify/lib')['VSwitch']
+    VTab: typeof import('vuetify/lib')['VTab']
+    VTabItem: typeof import('vuetify/lib')['VTabItem']
+    VTabs: typeof import('vuetify/lib')['VTabs']
+    VTabsItems: typeof import('vuetify/lib')['VTabsItems']
+    VTextarea: typeof import('vuetify/lib')['VTextarea']
+    VTextField: typeof import('vuetify/lib')['VTextField']
+    VTimeline: typeof import('vuetify/lib')['VTimeline']
+    VTimelineItem: typeof import('vuetify/lib')['VTimelineItem']
+    VToolbar: typeof import('vuetify/lib')['VToolbar']
+    VToolbarItems: typeof import('vuetify/lib')['VToolbarItems']
+    VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
+    VTooltip: typeof import('vuetify/lib')['VTooltip']
+  }
+}

index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>fluidd</title>
+    <meta name="description" content="The Klipper web interface for managing your 3d printer" />
+
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png" />
+    <meta name="theme-color" content="#2196F3" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="fluidd" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon-180x180.png" />
+    <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#000000" />
+    <meta name="msapplication-TileImage" content="/img/icons/mstile-150x150.png" />
+    <meta name="msapplication-TileColor" content="#000000" />
+
+    <script type="module" src="/src/main.ts"></script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry, but fluidd doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>