Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Jun 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/cold-donkeys-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@gradio/preview": minor
"gradio": minor
---

feat:Add build target option to the custom component `gradio.config.js` file
3 changes: 3 additions & 0 deletions gradio/cli/commands/components/files/gradio.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,7 @@ export default {
svelte: {
preprocess: [],
},
build: {
target: "modules",
},
};
1 change: 1 addition & 0 deletions guides/06_custom-components/05_frontend.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
5 changes: 5 additions & 0 deletions js/preview/src/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export async function make_build({
plugins: [],
svelte: {
preprocess: []
},
build: {
target: []
}
};

Expand All @@ -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[][] = [
Expand All @@ -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: {
Expand Down
12 changes: 11 additions & 1 deletion js/preview/src/dev.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -116,6 +119,9 @@ export interface ComponentConfig {
preprocess: PreprocessorGroup[];
extensions?: string[];
};
build: {
target: string | string[];
};
}

async function generate_imports(
Expand All @@ -134,10 +140,13 @@ async function generate_imports(
);
}

let component_config = {
let component_config: ComponentConfig = {
plugins: [],
svelte: {
preprocess: []
},
build: {
target: []
}
};

Expand All @@ -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 {
}
})
Expand Down
2 changes: 1 addition & 1 deletion js/preview/src/index.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand Down