fluidd

1
/// <reference types="vitest" />
2

3
import { defineConfig } from 'vite'
4
import vue from '@vitejs/plugin-vue2'
5
import { VitePWA } from 'vite-plugin-pwa'
6
import Components from 'unplugin-vue-components/vite'
7
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'
8
import path from 'path'
9
import content from '@originjs/vite-plugin-content'
10
import monacoEditorPluginModule from 'vite-plugin-monaco-editor'
11
import checker from 'vite-plugin-checker'
12
import version from './vite.config.inject-version'
13

14
// Fix for incorrect typings on vite-plugin-monaco-editor
15
const isObjectWithDefaultFunction = (module: unknown): module is { default: typeof monacoEditorPluginModule } => (
16
  module != null &&
17
  typeof module === 'object' &&
18
  'default' in module &&
19
  typeof module.default === 'function'
20
)
21

22
const monacoEditorPlugin = isObjectWithDefaultFunction(monacoEditorPluginModule)
23
  ? monacoEditorPluginModule.default
24
  : monacoEditorPluginModule
25

26
export default defineConfig({
27
  plugins: [
28
    VitePWA({
29
      srcDir: 'src',
30
      filename: 'sw.ts',
31
      strategies: 'injectManifest',
32
      includeAssets: [
33
        '**/*.svg',
34
        '**/*.png',
35
        '**/*.ico',
36
        'editor.theme.json'
37
      ],
38
      injectManifest: {
39
        globPatterns: [
40
          '**/*.{js,css,html,ttf,woff,woff2,wasm}'
41
        ],
42
        maximumFileSizeToCacheInBytes: 4 * 1024 ** 2
43
      },
44
      manifest: {
45
        name: 'fluidd',
46
        short_name: 'fluidd',
47
        description: 'The Klipper web interface for managing your 3d printer',
48
        theme_color: '#2196F3',
49
        background_color: '#000000',
50
        icons: [
51
          {
52
            src: 'img/icons/android-chrome-192x192.png',
53
            sizes: '192x192',
54
            type: 'image/png'
55
          },
56
          {
57
            src: 'img/icons/android-chrome-512x512.png',
58
            sizes: '512x512',
59
            type: 'image/png'
60
          },
61
          {
62
            src: 'img/icons/android-chrome-maskable-192x192.png',
63
            sizes: '192x192',
64
            type: 'image/png',
65
            purpose: 'maskable'
66
          },
67
          {
68
            src: 'img/icons/android-chrome-maskable-512x512.png',
69
            sizes: '512x512',
70
            type: 'image/png',
71
            purpose: 'maskable'
72
          }
73
        ],
74
        shortcuts: [
75
          {
76
            name: 'Configuration',
77
            url: '#/configure',
78
            icons: [
79
              {
80
                src: 'img/icons/shortcut-configuration-96x96.png',
81
                sizes: '96x96',
82
                type: 'image/png'
83
              }
84
            ]
85
          },
86
          {
87
            name: 'Settings',
88
            url: '#/settings',
89
            icons: [
90
              {
91
                src: 'img/icons/shortcut-settings-96x96.png',
92
                sizes: '96x96',
93
                type: 'image/png'
94
              }
95
            ]
96
          }
97
        ]
98
      },
99
      devOptions: {
100
        enabled: true,
101
        type: 'module',
102
        navigateFallback: 'index.html'
103
      }
104
    }),
105
    vue(),
106
    version(),
107
    content(),
108
    monacoEditorPlugin({
109
      languageWorkers: ['editorWorkerService', 'json', 'css']
110
    }),
111
    checker({
112
      vueTsc: {
113
        tsconfigPath: path.resolve(__dirname, './tsconfig.app.json')
114
      }
115
    }),
116
    Components({
117
      dts: true,
118
      dirs: [
119
        'src/components/common',
120
        'src/components/layout',
121
        'src/components/ui'
122
      ],
123
      resolvers: [
124
        VuetifyResolver()
125
      ]
126
    })
127
  ],
128

129
  css: {
130
    preprocessorOptions: {
131
      css: { charset: false },
132
      scss: {
133
        additionalData: '@import "@/scss/variables";\n'
134
      },
135
      sass: {
136
        additionalData: '@import "@/scss/variables.scss"\n'
137
      }
138
    }
139
  },
140

141
  envPrefix: 'VUE_',
142

143
  resolve: {
144
    alias: {
145
      '@': path.resolve(__dirname, './src')
146
    }
147
  },
148

149
  test: {
150
    globals: true,
151
    environment: 'jsdom',
152
    setupFiles: [
153
      './tests/unit/setup.ts'
154
    ],
155
    alias: [
156
      { find: /^vue$/, replacement: 'vue/dist/vue.runtime.common.js' }
157
    ]
158
  },
159

160
  base: './',
161

162
  server: {
163
    host: '0.0.0.0',
164
    port: 8080
165
  }
166
})
167