ops/vite.config.js at main · pkp/ops · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import {defineConfig, rolldownVersion} from 'vite';
import Vue from '@vitejs/plugin-vue';
import path from 'path';
import {viteStaticCopy} from 'vite-plugin-static-copy';
import i18nExtractKeys from './lib/pkp/tools/i18nExtractKeys.vite.js';

export default defineConfig(({mode}) => {
	// its very unclear how the plugin-vue is handling inProduction option
	// in any case its still heavily relying on NODE_ENV, thats why its being set
	// so for example the devtools support is enabled in development mode
	process.env.NODE_ENV = mode;
	console.log('rolldownVersion:', rolldownVersion);

	return {
		plugins: [
			i18nExtractKeys({
				// existing in tpl files, to be replaced in future
				extraKeys: [
					'common.view',
					'common.close',
					'common.editItem',
					'stats.descriptionForStat',
					'common.commaListSeparator',
					// use directly via pkp.localeKeys
					'form.dataHasChanged',
				],
			}),
			Vue({
				isProduction: mode === 'production',
				template: {
					compilerOptions: {
						// to keep vue2 behaviour where spaces between html tags are preserved
						whitespace: 'preserve',
					},
				},
			}),
			viteStaticCopy({
				targets: [
					{
						src: 'node_modules/tinymce/skins/ui/tinymce-5/**/*.css',
						dest: 'lib/pkp/styles/tinymce',
					},
					{
						src: 'node_modules/jquery/dist/*',
						dest: 'js/build/jquery',
					},
					{
						src: 'node_modules/jquery-ui/dist/**/*.js',
						dest: 'js/build/jquery-ui',
					},
					{
						src: 'node_modules/jquery-validation/dist/*',
						dest: 'js/build/jquery-validation',
					},
					{
						src: 'node_modules/chart.js/dist/**/*.umd.js',
						dest: 'js/build/chart.js',
					},
				],
			}),
		],
		publicDir: false,
		resolve: {
			alias: {
				'@': path.resolve(__dirname, 'lib/ui-library/src'),
				// use vue version with template compiler
				vue: 'vue/dist/vue.esm-bundler.js',
			},
			// https://github.com/vitejs/vite/discussions/15906
			dedupe: [
				'@headlessui/vue',
				'@lk77/vue3-color',
				'tinymce/tinymce-vue',
				'@vue-a11y/announcer',
				'@vueuse/core',
				'chart.js',
				'clone-deep',
				'copyfiles',
				'debounce',
				'dropzone-vue3',
				'element-resize-event',
				'floating-vue',
				'highlight.js',
				'ofetch',
				'pinia',
				'reka-ui',
				'swiper',
				'tiny-emitter',
				'tinymce',
				'uuid',
				'vue',
				'vue-chartjs',
				'vue-draggable-plus',
				'vue-scrollto',
				'vue3-highlightjs',
			],
		},
		build: {
			sourcemap: mode === 'development' ? 'inline' : false,
			target: ['chrome66', 'edge79', 'firefox67', 'safari12'],
			emptyOutDir: false,
			cssCodeSplit: false,
			rolldownOptions: {
				input: {
					build: './js/load.js',
				},
				output: {
					format: 'iife', // Set the format to IIFE
					entryFileNames: 'js/build.js',
					assetFileNames: (assetInfo) => {
						if (!assetInfo.name) {
							// Fallback to a default pattern with placeholders (Vite/Rollup will handle [hash] and [ext])
							return 'assets/unnamed-[hash].[ext]';
						}
						const info = assetInfo.name.split('.');
						const extType = info[info.length - 1];
						if (/\.(css)$/.test(assetInfo.name)) {
							return 'styles/build.css';
						}
						return `[name].${extType}`;
					}, // Provide global variables to use in the UMD build
					// for externalized deps
					globals: {
						vue: 'pkp.Vue',
					},
				},
			},
			outDir: path.resolve(__dirname),
		},
	};
});