/// /* eslint-disable no-console */ import path from 'path' import replace from '@rollup/plugin-replace' import yaml, { ValidYamlType } from '@rollup/plugin-yaml' import legacy from '@vitejs/plugin-legacy' import react from '@vitejs/plugin-react-swc' import { defineConfig, loadEnv } from 'vite' import { VitePWA } from 'vite-plugin-pwa' import { multipleSPA } from './build/multiple-SPA' import { pwaOptions } from './build/vite-pwa-options' import { compileEconomieCollaborativeYaml } from './scripts/compileEconomieColllaborativeYaml' const env = (mode: string) => loadEnv(mode, process.cwd(), '') export default defineConfig(({ command, mode }) => ({ resolve: { alias: [{ find: '@', replacement: path.resolve('./source') }], extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'], }, test: { setupFiles: ['@vitest/web-worker'], }, publicDir: 'source/public', build: { sourcemap: true, rollupOptions: { output: { chunkFileNames: (chunkInfo) => { if (chunkInfo.isDynamicEntry) { return 'assets/lazy_[name].[hash].js' } return 'assets/[name].[hash].js' }, }, }, }, define: { BRANCH_NAME: JSON.stringify(getBranch(mode)), IS_DEVELOPMENT: mode === 'development', IS_STAGING: mode === 'production' && !isProductionBranch(mode), IS_PRODUCTION: mode === 'production' && isProductionBranch(mode), }, worker: { plugins: [ yaml({ transform(data, filePath) { return filePath.endsWith('/rules-en.yaml') ? cleanAutomaticTag(data) : data }, }), ], }, plugins: [ { name: 'run-script-on-file-change', apply: 'serve', buildStart() { if (mode === 'development') { void compileEconomieCollaborativeYaml() } }, }, command === 'build' && replace({ __SENTRY_DEBUG__: false, preventAssignment: false, }), react(), yaml({ transform(data, filePath) { return filePath.endsWith('/rules-en.yaml') ? cleanAutomaticTag(data) : data }, }), multipleSPA({ defaultSite: 'mon-entreprise', templatePath: './source/entries/template.html', sites: { 'mon-entreprise': { lang: 'fr', entry: '/source/entries/entry-fr.tsx', logo: '/source/assets/images/logo-monentreprise.svg', logoAlt: 'Logo mon-entreprise, site Urssaf', }, infrance: { lang: 'en', entry: '/source/entries/entry-en.tsx', logo: '/logo-mycompany-share.png', logoAlt: 'Logo My company in France by Urssaf', }, }, }), VitePWA(pwaOptions), legacy({ targets: ['defaults', 'not IE 11'], }), ], server: { port: 3000, hmr: { clientPort: typeof env(mode).HMR_CLIENT_PORT !== 'undefined' ? parseInt(env(mode).HMR_CLIENT_PORT) : undefined, }, // Keep watching changes in the publicodes package to support live reload // when we iterate on publicodes logic. // https://vitejs.dev/config/#server-watch watch: { ignored: [ '!**/node_modules/publicodes/**', '!**/node_modules/publicodes-react/**', ], }, proxy: { '/api': 'http://localhost:3004', '/twemoji': { target: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/', changeOrigin: true, rewrite: (path) => path.replace(/^\/twemoji/, ''), timeout: 3 * 1000, }, }, }, optimizeDeps: { entries: ['./source/entries/entry-fr.tsx', './source/entries/entry-en.tsx'], include: [], exclude: [ 'publicodes-react', 'publicodes', '@publicodes/worker', '@publicodes/worker-react', ], }, ssr: { /** * Prevent listed dependencies from being externalized for SSR build cause some * packages are not esm ready or package.json setup seems wrong: */ noExternal: [/tslib/], }, })) /** * We use this function to hide some features in production while keeping them * in feature-branches. In case we do A/B testing with several branches served * in production, we should add the public faced branch names in the test below. * This is different from the import.meta.env.MODE in that a feature branch may * be build in production mode (with the NODE_ENV) but we may still want to show * or hide some features. */ const isProductionBranch = (mode: string) => { return ['master', 'next'].includes(getBranch(mode)) } const getBranch = (mode: string) => { let branch: string | undefined = env(mode) .VITE_GITHUB_REF?.split('/') ?.slice(-1)?.[0] if (branch === 'merge') { branch = env(mode).VITE_GITHUB_HEAD_REF } return branch ?? '' } const cleanAutomaticTag = (data: ValidYamlType): ValidYamlType => { if (typeof data === 'string' && data.startsWith('[automatic] ')) { return data.replace('[automatic] ', '') } if (Array.isArray(data)) { return data.map((val) => cleanAutomaticTag(val)) } if (data && typeof data === 'object') { return Object.fromEntries( Object.entries(data).map(([key, val]) => [key, cleanAutomaticTag(val)]) ) } return data }