import {defineConfig} from 'vite' import react from '@vitejs/plugin-react-swc' import path from 'path' import fg from 'fast-glob' import {getAliasesFromTsConfigForRollup} from '../../devEnv/getAliasesFromTsConfig' import {definedGlobals} from '../../theatre/devEnv/definedGlobals' const fromPlaygroundDir = (folder: string) => path.resolve(__dirname, folder) const srcDir = fromPlaygroundDir('src') const sharedDir = fromPlaygroundDir('src/shared') const personalDir = fromPlaygroundDir('src/personal') const testDir = fromPlaygroundDir('src/tests') // https://vitejs.dev/config/ const config = defineConfig(async ({command}) => { const dev = command === 'serve' console.log('dev', dev) const groups = { shared: await fg(path.join(sharedDir, '*/index.html')), personal: await fg(path.join(personalDir, '*/index.html')), test: await fg(path.join(testDir, '*/index.html')), } const rollupInputs = (() => { // eg ['path/to/src/group/playground/index.html'] const paths = ([] as string[]).concat(...Object.values(groups)) // eg ['group/playground'] const names = paths.map((entry) => { // convert "/path/to/src/group/playground/index.html" to "group/playground" const relativePath = path.relative(srcDir, entry) const entryName = relativePath.replace(/\/index\.html$/, '') return entryName }) // eg { 'group/playground': 'path/to/src/group/playground/index.html' } return Object.fromEntries(names.map((name, index) => [name, paths[index]])) })() return { root: srcDir, plugins: [react()], appType: 'mpa', server: { port: 8082, // base: '/playground/', }, assetsInclude: ['**/*.gltf', '**/*.glb'], resolve: { /* This will alias paths like `@theatre/core` to `path/to/theatre/core/src/index.ts` and so on, so vite won't treat the monorepo's packages as externals and won't pre-bundle them. */ alias: [...getAliasesFromTsConfigForRollup()], }, define: { ...definedGlobals, 'window.__IS_VISUAL_REGRESSION_TESTING': 'false', }, optimizeDeps: { exclude: dev ? ['@theatre/core', '@theatre/studio'] : [], // include: !dev ? ['@theatre/core', '@theatre/studio'] : [], // needsInterop: ['@theatre/core', '@theatre/studio'], }, build: { outDir: '../build', minify: false, sourcemap: true, rollupOptions: { input: { ...rollupInputs, main: fromPlaygroundDir('src/index.html'), }, }, }, } }) export default config