vite.config.mjs

import md5 from 'md5'
import vue from '@vitejs/plugin-vue'
import { externals } from 'rollup-plugin-node-externals'
import browserslistToEsbuild from 'browserslist-to-esbuild'
import injectProcessEnv from 'rollup-plugin-inject-process-env'
import { loadTranslations } from './resources/translations.mjs'
import { fileURLToPath, URL } from 'url'
import { dirname, resolve } from 'path'
import { defineConfig } from 'vite'
import { readFileSync } from 'fs'

const loadJSON = (path) => JSON.parse(readFileSync(new URL(path, import.meta.url)))

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

// scope variable
// fallback for cypress testing
const appVersion = JSON.stringify(process.env.npm_package_version || 'nextcloud-vue')
const SCOPE_VERSION = md5(appVersion).slice(0, 7)

console.info('This build version hash is', SCOPE_VERSION, '\n')

const processEnvironment = {
	TRANSLATIONS: loadTranslations(resolve(__dirname, './l10n')),
	SCOPE_VERSION,
}

// Plugin for stripping out <docs> sections from vue files
const vueDocsPlugin = {
	name: 'vue-i18n',
	transform(code, id) {
		if (!/vue&type=doc/.test(id)) {
			return
		}
		return 'export default ""'
	},
}

export default defineConfig({
	plugins: [
		vue(),
		vueDocsPlugin,
	],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url)),
			'~': resolve(__dirname, './node_modules'),
		},
	},
	css: {
		devSourcemap: true,
		preprocessorOptions: {
			scss: {
				additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
				sourceMapContents: false,
				includePaths: [
					resolve(__dirname, './src/assets'),
				],
			},
		},
	},
	build: {
		target: browserslistToEsbuild(),
		sourcemap: true,
		rollupOptions: {
			plugins: [
				externals(),
				injectProcessEnv(processEnvironment),
			],
			external: [
				...Object.keys(loadJSON('./package.json').peerDependencies),
			],
		},
		lib: {
			name: 'NextcloudVue',
			entry: resolve(__dirname, 'src/index.js'),
			fileName: (format, entry) => {
				return `${entry}.${format === 'es' ? 'esm' : format}.js`
			},
		},
	},
	test: {
		environment: 'jsdom',
		setupFiles: resolve(__dirname, './tests/setup.js'),
		env: processEnvironment,
	},
})