From 3f8c886b9669914747944d36fbb629537c2162d5 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 13 May 2024 13:45:35 +0100
Subject: [PATCH 1/7] fix param name

---
 js/app/src/api_docs/CodeSnippet.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/app/src/api_docs/CodeSnippet.svelte b/js/app/src/api_docs/CodeSnippet.svelte
index a2876ba9d8284..f7a98d2ff2a7f 100644
--- a/js/app/src/api_docs/CodeSnippet.svelte
+++ b/js/app/src/api_docs/CodeSnippet.svelte
@@ -29,11 +29,11 @@
 	let bash_get_code: HTMLElement;
 
 	let has_file_path = endpoint_parameters.some((param: EndpointParameter) =>
-		is_potentially_nested_file_data(param.example_input)
+		is_potentially_nested_file_data(param.example_input),
 	);
 	let blob_components = ["Audio", "File", "Image", "Video"];
 	let blob_examples: any[] = endpoint_parameters.filter(
-		(param: EndpointParameter) => blob_components.includes(param.component)
+		(param: EndpointParameter) => blob_components.includes(param.component),
 	);
 </script>
 
@@ -65,7 +65,7 @@ result = client.<span class="highlight">predict</span
 								>{represent_value(
 									parameter_has_default ? parameter_default : example_input,
 									python_type.type,
-									"py"
+									"py",
 								)}</span
 							>,{/each}<!--
 
@@ -114,7 +114,7 @@ const result = await client.predict({#if named}<span class="api-name"
 									>{parameter_name}: {represent_value(
 										example_input,
 										python_type.type,
-										"js"
+										"js",
 									)}</span
 								>, <!--
 --><!--

From 60983b5a78fdd2d6c0a1a0806bfda3a6faf8c884 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 13 May 2024 15:00:57 +0100
Subject: [PATCH 2/7] format

---
 js/app/src/api_docs/CodeSnippet.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/app/src/api_docs/CodeSnippet.svelte b/js/app/src/api_docs/CodeSnippet.svelte
index f7a98d2ff2a7f..a2876ba9d8284 100644
--- a/js/app/src/api_docs/CodeSnippet.svelte
+++ b/js/app/src/api_docs/CodeSnippet.svelte
@@ -29,11 +29,11 @@
 	let bash_get_code: HTMLElement;
 
 	let has_file_path = endpoint_parameters.some((param: EndpointParameter) =>
-		is_potentially_nested_file_data(param.example_input),
+		is_potentially_nested_file_data(param.example_input)
 	);
 	let blob_components = ["Audio", "File", "Image", "Video"];
 	let blob_examples: any[] = endpoint_parameters.filter(
-		(param: EndpointParameter) => blob_components.includes(param.component),
+		(param: EndpointParameter) => blob_components.includes(param.component)
 	);
 </script>
 
@@ -65,7 +65,7 @@ result = client.<span class="highlight">predict</span
 								>{represent_value(
 									parameter_has_default ? parameter_default : example_input,
 									python_type.type,
-									"py",
+									"py"
 								)}</span
 							>,{/each}<!--
 
@@ -114,7 +114,7 @@ const result = await client.predict({#if named}<span class="api-name"
 									>{parameter_name}: {represent_value(
 										example_input,
 										python_type.type,
-										"js",
+										"js"
 									)}</span
 								>, <!--
 --><!--

From 1cfb2e74ae057d62e1b1e912e0cb4855255cabbd Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 10 Jun 2024 13:19:32 +0100
Subject: [PATCH 3/7] add build.target to gradio config

---
 js/preview/src/build.ts |  5 +++++
 js/preview/src/dev.ts   | 12 +++++++++++-
 js/preview/src/index.ts |  2 +-
 pnpm-lock.yaml          |  6 +++++-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/js/preview/src/build.ts b/js/preview/src/build.ts
index ff66e2b13f0cc..8ecb6157a95c2 100644
--- a/js/preview/src/build.ts
+++ b/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: {
diff --git a/js/preview/src/dev.ts b/js/preview/src/dev.ts
index 2428fbf69c4bd..8f6f0aeb5dbf2 100644
--- a/js/preview/src/dev.ts
+++ b/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 {
 			}
 		})
diff --git a/js/preview/src/index.ts b/js/preview/src/index.ts
index 48a22ce179131..3f081cd859b81 100644
--- a/js/preview/src/index.ts
+++ b/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";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 084e1d1a8b61d..0f628710537b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1504,7 +1504,11 @@ importers:
         specifier: ^3.28.0
         version: 3.28.0
 
-  js/preview/test/test/frontend: {}
+  js/preview/test/test/frontend:
+    devDependencies:
+      '@gradio/preview':
+        specifier: workspace:*
+        version: link:../../..
 
   js/radio:
     dependencies:

From 4c5082ed3d69b2d8e3ba954650bc02f6fc7ae417 Mon Sep 17 00:00:00 2001
From: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Date: Mon, 10 Jun 2024 12:22:43 +0000
Subject: [PATCH 4/7] add changeset

---
 .changeset/cold-donkeys-jump.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cold-donkeys-jump.md

diff --git a/.changeset/cold-donkeys-jump.md b/.changeset/cold-donkeys-jump.md
new file mode 100644
index 0000000000000..77dc3e2a26bc7
--- /dev/null
+++ b/.changeset/cold-donkeys-jump.md
@@ -0,0 +1,5 @@
+---
+"@gradio/preview": minor
+---
+
+feat:Add build target option to the custom component `gradio.config.js` file

From dac8724a4fc706ba7e2baedd6a65698648dfe73c Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 10 Jun 2024 13:52:51 +0100
Subject: [PATCH 5/7] fix lockfile

---
 pnpm-lock.yaml | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f628710537b2..084e1d1a8b61d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1504,11 +1504,7 @@ importers:
         specifier: ^3.28.0
         version: 3.28.0
 
-  js/preview/test/test/frontend:
-    devDependencies:
-      '@gradio/preview':
-        specifier: workspace:*
-        version: link:../../..
+  js/preview/test/test/frontend: {}
 
   js/radio:
     dependencies:

From bf787dbd835721cfb80465e2c13573b3d5c64816 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 10 Jun 2024 18:20:06 +0100
Subject: [PATCH 6/7] add docs + update gradio.config template

---
 gradio/cli/commands/components/files/gradio.config.js | 3 +++
 guides/06_custom-components/05_frontend.md            | 1 +
 2 files changed, 4 insertions(+)

diff --git a/gradio/cli/commands/components/files/gradio.config.js b/gradio/cli/commands/components/files/gradio.config.js
index 2584abb9c3e01..19f8f32584367 100644
--- a/gradio/cli/commands/components/files/gradio.config.js
+++ b/gradio/cli/commands/components/files/gradio.config.js
@@ -3,4 +3,7 @@ export default {
   svelte: {
     preprocess: [],
   },
+  build: {
+    target: "modules",
+  },
 };
\ No newline at end of file
diff --git a/guides/06_custom-components/05_frontend.md b/guides/06_custom-components/05_frontend.md
index 1b320a49f37a2..ac3b3dff481b5 100644
--- a/guides/06_custom-components/05_frontend.md
+++ b/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.
 

From bd261008a1ee5945a7d366da69ce026914329800 Mon Sep 17 00:00:00 2001
From: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Date: Mon, 10 Jun 2024 17:21:04 +0000
Subject: [PATCH 7/7] add changeset

---
 .changeset/cold-donkeys-jump.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/cold-donkeys-jump.md b/.changeset/cold-donkeys-jump.md
index 77dc3e2a26bc7..2c104809b6029 100644
--- a/.changeset/cold-donkeys-jump.md
+++ b/.changeset/cold-donkeys-jump.md
@@ -1,5 +1,6 @@
 ---
 "@gradio/preview": minor
+"gradio": minor
 ---
 
 feat:Add build target option to the custom component `gradio.config.js` file