| b69ab31 | | | 1 | /** |
| b69ab31 | | | 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| b69ab31 | | | 3 | * |
| b69ab31 | | | 4 | * This source code is licensed under the MIT license found in the |
| b69ab31 | | | 5 | * LICENSE file in the root directory of this source tree. |
| b69ab31 | | | 6 | */ |
| b69ab31 | | | 7 | |
| b69ab31 | | | 8 | import type {Plugin, PluginOption} from 'vite'; |
| b69ab31 | | | 9 | |
| b69ab31 | | | 10 | import react from '@vitejs/plugin-react'; |
| b69ab31 | | | 11 | import fs, {existsSync} from 'node:fs'; |
| b69ab31 | | | 12 | import path from 'node:path'; |
| b69ab31 | | | 13 | import {defineConfig} from 'vite'; |
| b69ab31 | | | 14 | import styleX from 'vite-plugin-stylex'; |
| b69ab31 | | | 15 | import viteTsconfigPaths from 'vite-tsconfig-paths'; |
| b69ab31 | | | 16 | |
| b69ab31 | | | 17 | // Normalize `c:\foo\index.html` to `c:/foo/index.html`. |
| b69ab31 | | | 18 | // This affects Rollup's `facadeModuleId` (which expects the `c:/foo/bar` format), |
| b69ab31 | | | 19 | // and is important for Vite to replace the script tags in HTML files. |
| b69ab31 | | | 20 | // See https://github.com/vitejs/vite/blob/7440191715b07a50992fcf8c90d07600dffc375e/packages/vite/src/node/plugins/html.ts#L804 |
| b69ab31 | | | 21 | // Without this, building on Windows might produce HTML entry points with |
| b69ab31 | | | 22 | // missing `<script>` tags, resulting in a blank page. |
| b69ab31 | | | 23 | function normalizeInputPath(inputPath: string) { |
| b69ab31 | | | 24 | return process.platform === 'win32' ? path.resolve(inputPath).replace(/\\/g, '/') : inputPath; |
| b69ab31 | | | 25 | } |
| b69ab31 | | | 26 | |
| b69ab31 | | | 27 | const isInternal = existsSync(path.resolve(__dirname, 'facebook/README.facebook.md')); |
| b69ab31 | | | 28 | |
| b69ab31 | | | 29 | const input = [normalizeInputPath('webview.html')]; |
| b69ab31 | | | 30 | if (isInternal) { |
| b69ab31 | | | 31 | // Currently, the inline comment webview is not used in OSS |
| b69ab31 | | | 32 | input.push(normalizeInputPath('inlineCommentWebview.html')); |
| b69ab31 | | | 33 | input.push(normalizeInputPath('DiffCommentPanelWebview.html')); |
| b69ab31 | | | 34 | input.push(normalizeInputPath('InlineCommentPanelWebview.html')); |
| b69ab31 | | | 35 | } |
| b69ab31 | | | 36 | |
| b69ab31 | | | 37 | console.log(isInternal ? 'Building internal version' : 'Building OSS version'); |
| b69ab31 | | | 38 | |
| b69ab31 | | | 39 | // vite-plugin-stylex doesn't support renaming the output CSS file, so we have to do that ourselves. |
| b69ab31 | | | 40 | function moveStylexFilenamePlugin(): Plugin { |
| b69ab31 | | | 41 | return { |
| b69ab31 | | | 42 | name: 'move-stylex-filename', |
| b69ab31 | | | 43 | writeBundle(options, bundle) { |
| b69ab31 | | | 44 | for (const name in bundle) { |
| b69ab31 | | | 45 | const chunk = bundle[name]; |
| b69ab31 | | | 46 | // Check if this is the stylex output cssfile |
| b69ab31 | | | 47 | if (chunk.type === 'asset' && /assets[/\\]stylex\.[a-f0-9]+\.css/.test(chunk.fileName)) { |
| b69ab31 | | | 48 | // Rename the file, move it from "assets" to "res" where the rest of our assets are |
| b69ab31 | | | 49 | const newName = 'res/stylex.css'; |
| b69ab31 | | | 50 | if (options.dir == null) { |
| b69ab31 | | | 51 | this.error('Could not replace StyleX output, dir must be set'); |
| b69ab31 | | | 52 | } |
| b69ab31 | | | 53 | const dir = options.dir as string; |
| b69ab31 | | | 54 | const oldPath = path.resolve(dir, chunk.fileName); |
| b69ab31 | | | 55 | const newPath = path.resolve(dir, newName); |
| b69ab31 | | | 56 | this.info(`Replacing StyleX output file ${chunk.fileName} with ${newName}`); |
| b69ab31 | | | 57 | fs.renameSync(oldPath, newPath); |
| b69ab31 | | | 58 | // Update the bundle object |
| b69ab31 | | | 59 | chunk.fileName = newName; |
| b69ab31 | | | 60 | bundle[newName] = chunk; |
| b69ab31 | | | 61 | delete bundle[name]; |
| b69ab31 | | | 62 | } |
| b69ab31 | | | 63 | } |
| b69ab31 | | | 64 | }, |
| b69ab31 | | | 65 | }; |
| b69ab31 | | | 66 | } |
| b69ab31 | | | 67 | |
| b69ab31 | | | 68 | const replaceFiles = ( |
| b69ab31 | | | 69 | replacements?: Array<{ |
| b69ab31 | | | 70 | file: string; |
| b69ab31 | | | 71 | replacement: string; |
| b69ab31 | | | 72 | }>, |
| b69ab31 | | | 73 | ): PluginOption => { |
| b69ab31 | | | 74 | const projectRoot = process.cwd(); |
| b69ab31 | | | 75 | replacements = replacements?.map(x => ({ |
| b69ab31 | | | 76 | file: path.join(projectRoot, x.file), |
| b69ab31 | | | 77 | replacement: path.join(projectRoot, x.replacement), |
| b69ab31 | | | 78 | })); |
| b69ab31 | | | 79 | |
| b69ab31 | | | 80 | return { |
| b69ab31 | | | 81 | name: 'vite-plugin-replace-files', |
| b69ab31 | | | 82 | enforce: 'pre', |
| b69ab31 | | | 83 | async resolveId(source: string, importer: string | undefined, options: any) { |
| b69ab31 | | | 84 | const resolvedFile = await this.resolve(source, importer, { |
| b69ab31 | | | 85 | ...options, |
| b69ab31 | | | 86 | ...{skipSelf: true}, |
| b69ab31 | | | 87 | }); |
| b69ab31 | | | 88 | |
| b69ab31 | | | 89 | const foundReplacementFile = replacements?.find( |
| b69ab31 | | | 90 | replacement => replacement.file == resolvedFile?.id, |
| b69ab31 | | | 91 | ); |
| b69ab31 | | | 92 | |
| b69ab31 | | | 93 | if (foundReplacementFile) { |
| b69ab31 | | | 94 | return { |
| b69ab31 | | | 95 | id: foundReplacementFile.replacement, |
| b69ab31 | | | 96 | }; |
| b69ab31 | | | 97 | } |
| b69ab31 | | | 98 | return null; |
| b69ab31 | | | 99 | }, |
| b69ab31 | | | 100 | }; |
| b69ab31 | | | 101 | }; |
| b69ab31 | | | 102 | |
| b69ab31 | | | 103 | export default defineConfig(({mode}) => ({ |
| b69ab31 | | | 104 | base: '', |
| b69ab31 | | | 105 | plugins: [ |
| b69ab31 | | | 106 | replaceFiles([ |
| b69ab31 | | | 107 | { |
| b69ab31 | | | 108 | file: '../isl/src/platform.ts', |
| b69ab31 | | | 109 | replacement: './webview/vscodeWebviewPlatform.tsx', |
| b69ab31 | | | 110 | }, |
| b69ab31 | | | 111 | ]), |
| b69ab31 | | | 112 | react({ |
| b69ab31 | | | 113 | babel: { |
| b69ab31 | | | 114 | plugins: [ |
| b69ab31 | | | 115 | [ |
| b69ab31 | | | 116 | 'jotai/babel/plugin-debug-label', |
| b69ab31 | | | 117 | { |
| b69ab31 | | | 118 | customAtomNames: [ |
| b69ab31 | | | 119 | 'atomFamilyWeak', |
| b69ab31 | | | 120 | 'atomLoadableWithRefresh', |
| b69ab31 | | | 121 | 'atomWithOnChange', |
| b69ab31 | | | 122 | 'atomWithRefresh', |
| b69ab31 | | | 123 | 'configBackedAtom', |
| b69ab31 | | | 124 | 'jotaiAtom', |
| b69ab31 | | | 125 | 'lazyAtom', |
| b69ab31 | | | 126 | 'localStorageBackedAtom', |
| b69ab31 | | | 127 | ], |
| b69ab31 | | | 128 | }, |
| b69ab31 | | | 129 | ], |
| b69ab31 | | | 130 | ], |
| b69ab31 | | | 131 | }, |
| b69ab31 | | | 132 | }), |
| b69ab31 | | | 133 | styleX(), |
| b69ab31 | | | 134 | viteTsconfigPaths(), |
| b69ab31 | | | 135 | moveStylexFilenamePlugin(), |
| b69ab31 | | | 136 | ], |
| b69ab31 | | | 137 | build: { |
| b69ab31 | | | 138 | outDir: 'dist/webview', |
| b69ab31 | | | 139 | manifest: true, |
| b69ab31 | | | 140 | // FIXME: This means that all webviews will use the same css file. |
| b69ab31 | | | 141 | // This is too bloated for the inline comment webview and marginally slows down startup time. |
| b69ab31 | | | 142 | // Ideally, we'd load all the relevant css files in the webview, but our current approach |
| b69ab31 | | | 143 | // with our own manual copy of html in htmlForWebview does not support this. |
| b69ab31 | | | 144 | cssCodeSplit: false, |
| b69ab31 | | | 145 | rollupOptions: { |
| b69ab31 | | | 146 | input, |
| b69ab31 | | | 147 | output: { |
| b69ab31 | | | 148 | // Don't use hashed names, so ISL webview panel can pre-define what filename to load |
| b69ab31 | | | 149 | entryFileNames: '[name].js', |
| b69ab31 | | | 150 | chunkFileNames: '[name].js', |
| b69ab31 | | | 151 | assetFileNames: 'res/[name].[ext]', |
| b69ab31 | | | 152 | }, |
| b69ab31 | | | 153 | }, |
| b69ab31 | | | 154 | copyPublicDir: true, |
| b69ab31 | | | 155 | // No need for source maps in production. We can always build them locally to understand a wild stack trace. |
| b69ab31 | | | 156 | sourcemap: mode === 'development', |
| b69ab31 | | | 157 | }, |
| b69ab31 | | | 158 | worker: { |
| b69ab31 | | | 159 | rollupOptions: { |
| b69ab31 | | | 160 | output: { |
| b69ab31 | | | 161 | // Don't use hashed names, so ISL webview panel can pre-define what filename to load |
| b69ab31 | | | 162 | entryFileNames: 'worker/[name].js', |
| b69ab31 | | | 163 | chunkFileNames: 'worker/[name].js', |
| b69ab31 | | | 164 | assetFileNames: 'worker/[name].[ext]', |
| b69ab31 | | | 165 | }, |
| b69ab31 | | | 166 | }, |
| b69ab31 | | | 167 | }, |
| b69ab31 | | | 168 | publicDir: '../isl/public', |
| b69ab31 | | | 169 | server: { |
| b69ab31 | | | 170 | // No need to open the browser, we run inside vscode and don't really connect to the server. |
| b69ab31 | | | 171 | open: false, |
| b69ab31 | | | 172 | port: 3015, |
| b69ab31 | | | 173 | cors: { |
| b69ab31 | | | 174 | origin: /^vscode-webview:\/\/.*/, |
| b69ab31 | | | 175 | }, |
| b69ab31 | | | 176 | }, |
| b69ab31 | | | 177 | })); |