Add build target option to the custom component gradio.config.js file (#8520)

Author: pngwn

.changeset/cold-donkeys-jump.md

@@ -0,0 +1,6 @@
+---
+"@gradio/preview": minor
+"gradio": minor
+---
+
+feat:Add build target option to the custom component `gradio.config.js` file

gradio/cli/commands/components/files/gradio.config.js

@@ -3,4 +3,7 @@ export default {
   svelte: {
     preprocess: [],
   },
+  build: {
+    target: "modules",
+  },
 };

guides/06_custom-components/05_frontend.md

@@ -267,6 +267,7 @@ Vite options:
 Svelte options:
 - `preprocess`: A list of svelte preprocessors to use.
 - `extensions`: A list of file extensions to compile to `.svelte` files.
+- `build.target`: The target to build for, this may be necessary to support newer javascript features. See the [esbuild docs](https://esbuild.github.io/api/#target) for more information.
 
 The `gradio.config.js` file should be placed in the root of your component's `frontend` directory. A default config file is created for you when you create a new component. But you can also create your own config file, if one doesn't exist, and use it to customize your component's build process.
 

js/preview/src/build.ts

@@ -37,6 +37,9 @@ export async function make_build({
 				plugins: [],
 				svelte: {
 					preprocess: []
+				},
+				build: {
+					target: []
 				}
 			};
 
@@ -48,6 +51,7 @@ export async function make_build({
 
 				component_config.plugins = m.default.plugins || [];
 				component_config.svelte.preprocess = m.default.svelte?.preprocess || [];
+				component_config.build.target = m.default.build?.target || "modules";
 			}
 
 			const exports: string[][] = [
@@ -65,6 +69,7 @@ export async function make_build({
 							make_gradio_plugin({ mode: "build", svelte_dir })
 						],
 						build: {
+							target: component_config.build.target,
 							emptyOutDir: true,
 							outDir: join(template_dir, entry),
 							lib: {

js/preview/src/dev.ts

@@ -57,6 +57,9 @@ export async function create_server({
 					allow: [root_dir, component_dir]
 				}
 			},
+			build: {
+				target: config.build.target
+			},
 			plugins: [
 				...plugins(config),
 				make_gradio_plugin({
@@ -116,6 +119,9 @@ export interface ComponentConfig {
 		preprocess: PreprocessorGroup[];
 		extensions?: string[];
 	};
+	build: {
+		target: string | string[];
+	};
 }
 
 async function generate_imports(
@@ -134,10 +140,13 @@ async function generate_imports(
 		);
 	}
 
-	let component_config = {
+	let component_config: ComponentConfig = {
 		plugins: [],
 		svelte: {
 			preprocess: []
+		},
+		build: {
+			target: []
 		}
 	};
 
@@ -153,6 +162,7 @@ async function generate_imports(
 
 				component_config.plugins = m.default.plugins || [];
 				component_config.svelte.preprocess = m.default.svelte?.preprocess || [];
+				component_config.build.target = m.default.build?.target || "modules";
 			} else {
 			}
 		})

js/preview/src/index.ts

@@ -1,7 +1,7 @@
 import { type ChildProcess, spawn, spawnSync } from "node:child_process";
 import * as net from "net";
 
-import { create_server } from "./dev";
+import { create_server, type ComponentConfig } from "./dev";
 import { make_build } from "./build";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";