Export configured Vite plugins from packages/build (#43847)

* Move `cspPlugin` to teleterm * Keep `reactPlugin` config in `build/vite` * Keep `tsconfigPathsPlugin` config in `build/vite` * Add a comment about .mjs * Lint * `resolve` -> `path.resolve` * Convert arrow function to regular function
gravitational · Jul 9, 2024 · 503afcf · 503afcf
1 parent fe4418f
commit 503afcf
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 92 deletions.
diff --git a/web/packages/build/vite/config.ts b/web/packages/build/vite/config.ts
@@ -21,14 +21,12 @@ import { resolve } from 'path';
 
 import { defineConfig } from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
-
-import react from '@vitejs/plugin-react-swc';
-import tsconfigPaths from 'vite-tsconfig-paths';
 import wasm from 'vite-plugin-wasm';
 
 import { htmlPlugin, transformPlugin } from './html';
-import { getStyledComponentsConfig } from './styled';
 import { generateAppHashFile } from './apphash';
+import { reactPlugin } from './react.mjs';
+import { tsconfigPathsPlugin } from './tsconfigPaths.mjs';
 
 import type { UserConfig } from 'vite';
 
@@ -84,21 +82,8 @@ export function createViteConfig(
         },
       },
       plugins: [
-        react({
-          plugins: [
-            ['@swc/plugin-styled-components', getStyledComponentsConfig(mode)],
-          ],
-        }),
-        tsconfigPaths({
-          // Asking vite to crawl the root directory (by defining the `root` object, rather than `projects`) causes vite builds to fail
-          // with a:
-          //
-          // "Error: ENOTDIR: not a directory, scandir '/go/src/github.com/gravitational/teleport/docker/ansible/rdir/rdir/rdir'""
-          //
-          // on a Debian GNU/Linux 10 (buster) (buildbox-node) Docker image running on an arm64 Macbook macOS 14.1.2. It's not clear why
-          // this happens, however defining the tsconfig file directly works around the issue.
-          projects: [resolve(rootDirectory, 'tsconfig.json')],
-        }),
+        reactPlugin(mode),
+        tsconfigPathsPlugin(),
         transformPlugin(),
         generateAppHashFile(outputDirectory, ENTRY_FILE_NAME),
         wasm(),

diff --git a/web/packages/build/vite/csp.ts b/web/packages/build/vite/csp.ts
diff --git a/web/packages/build/vite/styled.ts → web/packages/build/vite/react.mjs b/web/packages/build/vite/styled.ts → web/packages/build/vite/react.mjs
@@ -1,6 +1,6 @@
 /**
  * Teleport
- * Copyright (C) 2023  Gravitational, Inc.
+ * Copyright (C) 2024 Gravitational, Inc.
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,7 +16,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export function getStyledComponentsConfig(mode: string) {
+/**
+ * This needs to be an .mjs file,
+ * because Vite can't import .ts files from a workspace out of the box.
+ * https://github.com/vitejs/vite/issues/5370
+ */
+
+import react from '@vitejs/plugin-react-swc';
+
+/** @param {string} mode */
+export function reactPlugin(mode) {
+  return react({
+    plugins: [['@swc/plugin-styled-components', getStyledComponentsConfig(mode)]],
+  });
+}
+
+/** @param {string} mode */
+function getStyledComponentsConfig(mode) {
   // https://nextjs.org/docs/advanced-features/compiler#styled-components
   if (mode === 'production') {
     return {

diff --git a/web/packages/build/vite/tsconfigPaths.mjs b/web/packages/build/vite/tsconfigPaths.mjs
@@ -0,0 +1,42 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * This needs to be an .mjs file,
+ * because Vite can't import .ts files from a workspace out of the box.
+ * https://github.com/vitejs/vite/issues/5370
+ */
+
+import path from 'node:path';
+
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+const rootDirectory = path.resolve(import.meta.dirname, '../../../..');
+
+export function tsconfigPathsPlugin() {
+  return tsconfigPaths({
+    // Asking vite to crawl the root directory (by defining the `root` object, rather than `projects`) causes vite builds to fail
+    // with a:
+    //
+    // "Error: ENOTDIR: not a directory, scandir '/go/src/github.com/gravitational/teleport/docker/ansible/rdir/rdir/rdir'""
+    //
+    // on a Debian GNU/Linux 10 (buster) (buildbox-node) Docker image running on an arm64 Macbook macOS 14.1.2. It's not clear why
+    // this happens, however, defining the tsconfig file directly works around the issue.
+    projects: [path.resolve(rootDirectory, 'tsconfig.json')],
+  });
+}
diff --git a/web/packages/teleterm/electron.vite.config.mts b/web/packages/teleterm/electron.vite.config.mts
@@ -16,31 +16,27 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { resolve } from 'path';
+import path from 'node:path';
+import { existsSync, readFileSync } from 'node:fs';
 
-import { existsSync, readFileSync } from 'fs';
-
-import react from '@vitejs/plugin-react-swc';
-import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig, externalizeDepsPlugin, UserConfig } from 'electron-vite';
 
-import { cspPlugin } from '../build/vite/csp';
-
-import { getStyledComponentsConfig } from '../build/vite/styled';
+import { reactPlugin } from '@gravitational/build/vite/react.mjs';
+import { tsconfigPathsPlugin } from '@gravitational/build/vite/tsconfigPaths.mjs';
 
 import { getConnectCsp } from './csp';
 
-const rootDirectory = resolve(__dirname, '../../..');
-const outputDirectory = resolve(__dirname, 'build', 'app');
+import type { Plugin } from 'vite';
+
+const rootDirectory = path.resolve(__dirname, '../../..');
+const outputDirectory = path.resolve(__dirname, 'build', 'app');
 
 // these dependencies don't play well unless they're externalized
 // if Vite complains about a dependency, add it here
 const externalizeDeps = ['strip-ansi', 'ansi-regex', 'd3-color'];
 
 const config = defineConfig(env => {
-  const tsConfigPathsPlugin = tsconfigPaths({
-    projects: [resolve(rootDirectory, 'tsconfig.json')],
-  });
+  const tsConfigPathsPlugin = tsconfigPathsPlugin();
 
   const commonPlugins = [
     externalizeDepsPlugin({ exclude: externalizeDeps }),
@@ -50,15 +46,15 @@ const config = defineConfig(env => {
   const config: UserConfig = {
     main: {
       build: {
-        outDir: resolve(outputDirectory, 'main'),
+        outDir: path.resolve(outputDirectory, 'main'),
         rollupOptions: {
           input: {
-            index: resolve(__dirname, 'src/main.ts'),
-            sharedProcess: resolve(
+            index: path.resolve(__dirname, 'src/main.ts'),
+            sharedProcess: path.resolve(
               __dirname,
               'src/sharedProcess/sharedProcess.ts'
             ),
-            agentCleanupDaemon: resolve(
+            agentCleanupDaemon: path.resolve(
               __dirname,
               'src/agentCleanupDaemon/agentCleanupDaemon.js'
             ),
@@ -80,10 +76,10 @@ const config = defineConfig(env => {
     },
     preload: {
       build: {
-        outDir: resolve(outputDirectory, 'preload'),
+        outDir: path.resolve(outputDirectory, 'preload'),
         rollupOptions: {
           input: {
-            index: resolve(__dirname, 'src/preload.ts'),
+            index: path.resolve(__dirname, 'src/preload.ts'),
           },
           output: {
             manualChunks,
@@ -99,10 +95,10 @@ const config = defineConfig(env => {
     renderer: {
       root: '.',
       build: {
-        outDir: resolve(outputDirectory, 'renderer'),
+        outDir: path.resolve(outputDirectory, 'renderer'),
         rollupOptions: {
           input: {
-            index: resolve(__dirname, 'index.html'),
+            index: path.resolve(__dirname, 'index.html'),
           },
         },
       },
@@ -114,14 +110,7 @@ const config = defineConfig(env => {
         },
       },
       plugins: [
-        react({
-          plugins: [
-            [
-              '@swc/plugin-styled-components',
-              getStyledComponentsConfig(env.mode),
-            ],
-          ],
-        }),
+        reactPlugin(env.mode),
         cspPlugin(getConnectCsp(env.mode === 'development')),
         tsConfigPathsPlugin,
       ],
@@ -138,16 +127,16 @@ const config = defineConfig(env => {
         cert: readFileSync(process.env.VITE_HTTPS_CERT),
       };
     } else {
-      const certsDirectory = resolve(rootDirectory, 'web/certs');
+      const certsDirectory = path.resolve(rootDirectory, 'web/certs');
 
       if (!existsSync(certsDirectory)) {
         throw new Error(
           'Could not find SSL certificates. Please follow web/README.md to generate certificates.'
         );
       }
 
-      const keyPath = resolve(certsDirectory, 'server.key');
-      const certPath = resolve(certsDirectory, 'server.crt');
+      const keyPath = path.resolve(certsDirectory, 'server.key');
+      const certPath = path.resolve(certsDirectory, 'server.crt');
 
       config.renderer.server.https = {
         key: readFileSync(keyPath),
@@ -168,3 +157,23 @@ function manualChunks(id: string) {
     }
   }
 }
+
+function cspPlugin(csp: string): Plugin {
+  return {
+    name: 'teleport-connect-html-plugin',
+    transformIndexHtml(html) {
+      return {
+        html,
+        tags: [
+          {
+            tag: 'meta',
+            attrs: {
+              'http-equiv': 'Content-Security-Policy',
+              content: csp,
+            },
+          },
+        ],
+      };
+    },
+  };
+}