diff options
Diffstat (limited to 'subprojects/frontend/vite.config.ts')
-rw-r--r-- | subprojects/frontend/vite.config.ts | 59 |
1 files changed, 57 insertions, 2 deletions
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts index d97b0ac9..7c0c2605 100644 --- a/subprojects/frontend/vite.config.ts +++ b/subprojects/frontend/vite.config.ts | |||
@@ -6,11 +6,13 @@ import { lezer } from '@lezer/generator/rollup'; | |||
6 | import react from '@vitejs/plugin-react'; | 6 | import react from '@vitejs/plugin-react'; |
7 | import { defineConfig } from 'vite'; | 7 | import { defineConfig } from 'vite'; |
8 | import injectPreload from 'vite-plugin-inject-preload'; | 8 | import injectPreload from 'vite-plugin-inject-preload'; |
9 | import { VitePWA } from 'vite-plugin-pwa'; | ||
9 | 10 | ||
10 | const thisDir = path.dirname(fileURLToPath(import.meta.url)); | 11 | const thisDir = path.dirname(fileURLToPath(import.meta.url)); |
11 | 12 | ||
12 | const mode = process.env.MODE || 'development'; | 13 | const mode = process.env.MODE || 'development'; |
13 | const isDevelopment = mode === 'development'; | 14 | const isDevelopment = mode === 'development'; |
15 | process.env.NODE_ENV ??= mode; | ||
14 | 16 | ||
15 | function portNumberOrElse(envName: string, fallback: number): number { | 17 | function portNumberOrElse(envName: string, fallback: number): number { |
16 | const value = process.env[envName]; | 18 | const value = process.env[envName]; |
@@ -29,7 +31,7 @@ const { name: packageName, version: packageVersion } = JSON.parse( | |||
29 | readFileSync(path.join(thisDir, 'package.json'), 'utf8'), | 31 | readFileSync(path.join(thisDir, 'package.json'), 'utf8'), |
30 | ) as { name: string; version: string }; | 32 | ) as { name: string; version: string }; |
31 | process.env.VITE_PACKAGE_NAME ??= packageName; | 33 | process.env.VITE_PACKAGE_NAME ??= packageName; |
32 | process.env.VITE_PACKAGE_VERSIOn ??= packageVersion; | 34 | process.env.VITE_PACKAGE_VERSION ??= packageVersion; |
33 | 35 | ||
34 | export default defineConfig({ | 36 | export default defineConfig({ |
35 | logLevel: 'info', | 37 | logLevel: 'info', |
@@ -50,7 +52,7 @@ export default defineConfig({ | |||
50 | files: [ | 52 | files: [ |
51 | { | 53 | { |
52 | match: | 54 | match: |
53 | /(?:jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)|roboto-latin-(?:400|500)-normal).+\.woff2/, | 55 | /(?:jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)|roboto-latin-(?:400|500)-normal).+\.woff2$/, |
54 | attributes: { | 56 | attributes: { |
55 | type: 'font/woff2', | 57 | type: 'font/woff2', |
56 | as: 'font', | 58 | as: 'font', |
@@ -60,6 +62,56 @@ export default defineConfig({ | |||
60 | ], | 62 | ], |
61 | }), | 63 | }), |
62 | lezer(), | 64 | lezer(), |
65 | VitePWA({ | ||
66 | strategies: 'generateSW', | ||
67 | registerType: 'prompt', | ||
68 | injectRegister: null, | ||
69 | workbox: { | ||
70 | globPatterns: [ | ||
71 | '**/*.{css,html,js}', | ||
72 | 'roboto-latin-{300,400,500,700}-normal.*.woff2', | ||
73 | 'jetbrains-mono-latin-variable-wghtOnly-{normal,italic}.*.woff2', | ||
74 | ], | ||
75 | dontCacheBustURLsMatching: /\.(?:css|js|woff2?)$/, | ||
76 | navigateFallbackDenylist: [/^\/xtext-service/], | ||
77 | }, | ||
78 | includeAssets: ['apple-touch-icon.png', 'favicon.svg', 'mask-icon.svg'], | ||
79 | manifest: { | ||
80 | lang: 'en-US', | ||
81 | name: 'Refinery', | ||
82 | short_name: 'Refinery', | ||
83 | description: | ||
84 | 'An efficient graph sovler for generating well-formed models', | ||
85 | theme_color: '#21252b', | ||
86 | background_color: '#21252b', | ||
87 | icons: [ | ||
88 | { | ||
89 | src: 'icon-192x192.png', | ||
90 | sizes: '192x192', | ||
91 | type: 'image/png', | ||
92 | purpose: 'any maskable', | ||
93 | }, | ||
94 | { | ||
95 | src: 'icon-512x512.png', | ||
96 | sizes: '512x512', | ||
97 | type: 'image/png', | ||
98 | purpose: 'any maskable', | ||
99 | }, | ||
100 | { | ||
101 | src: 'icon-any.svg', | ||
102 | sizes: 'any', | ||
103 | type: 'image/svg+xml', | ||
104 | purpose: 'any maskable', | ||
105 | }, | ||
106 | { | ||
107 | src: 'mask-icon.svg', | ||
108 | sizes: 'any', | ||
109 | type: 'image/svg+xml', | ||
110 | purpose: 'monochrome', | ||
111 | }, | ||
112 | ], | ||
113 | }, | ||
114 | }), | ||
63 | ], | 115 | ], |
64 | base: '', | 116 | base: '', |
65 | define: { | 117 | define: { |
@@ -67,6 +119,9 @@ export default defineConfig({ | |||
67 | }, | 119 | }, |
68 | build: { | 120 | build: { |
69 | assetsDir: '.', | 121 | assetsDir: '.', |
122 | // If we don't control inlining manually, | ||
123 | // web fonts will randomly get inlined into the CSS, degrading performance. | ||
124 | assetsInlineLimit: 0, | ||
70 | outDir: path.join('build/vite', mode), | 125 | outDir: path.join('build/vite', mode), |
71 | emptyOutDir: true, | 126 | emptyOutDir: true, |
72 | sourcemap: isDevelopment, | 127 | sourcemap: isDevelopment, |