2
0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-24 13:01:18 +08:00

make gradio dev tools a local dependency rather than bundling ()

This commit is contained in:
pngwn 2024-04-19 18:41:40 -04:00 committed by GitHub
parent 568eeb26a9
commit 624f9b9477
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
57 changed files with 1033 additions and 370 deletions

@ -0,0 +1,52 @@
---
"@gradio/accordion": patch
"@gradio/annotatedimage": patch
"@gradio/audio": patch
"@gradio/button": patch
"@gradio/chatbot": patch
"@gradio/checkbox": patch
"@gradio/checkboxgroup": patch
"@gradio/client": patch
"@gradio/code": patch
"@gradio/colorpicker": patch
"@gradio/column": patch
"@gradio/dataframe": patch
"@gradio/dataset": patch
"@gradio/downloadbutton": patch
"@gradio/dropdown": patch
"@gradio/fallback": patch
"@gradio/file": patch
"@gradio/fileexplorer": patch
"@gradio/form": patch
"@gradio/gallery": patch
"@gradio/group": patch
"@gradio/highlightedtext": patch
"@gradio/html": patch
"@gradio/image": patch
"@gradio/imageeditor": patch
"@gradio/json": patch
"@gradio/label": patch
"@gradio/markdown": patch
"@gradio/model3d": patch
"@gradio/multimodaltextbox": patch
"@gradio/number": patch
"@gradio/paramviewer": patch
"@gradio/plot": patch
"@gradio/preview": patch
"@gradio/radio": patch
"@gradio/row": patch
"@gradio/simpledropdown": patch
"@gradio/simpleimage": patch
"@gradio/simpletextbox": patch
"@gradio/slider": patch
"@gradio/statustracker": patch
"@gradio/tabitem": patch
"@gradio/tabs": patch
"@gradio/textbox": patch
"@gradio/uploadbutton": patch
"@gradio/video": patch
"gradio": patch
"gradio_test": patch
---
fix:make gradio dev tools a local dependency rather than bundling

@ -2,6 +2,7 @@
**/pnpm-workspace.yaml
**/js/app/dist/**
**/js/wasm/dist/**
**/js/preview/dist/**
**/client/js/dist/**
**/js/lite/dist/**
**/pnpm-lock.yaml

@ -36,6 +36,7 @@ def copy_js_code(root: str | pathlib.Path):
):
ignored.append(n)
return ignored
shutil.copytree(
str(entry),
str(pathlib.Path("gradio") / "_frontend_code" / entry.name),

@ -20,6 +20,6 @@ export default defineConfig({
ssr: {
target: "node",
format: "esm",
noExternal: ["ws", "semiver", "@gradio/upload"]
noExternal: ["ws", "semiver", "bufferutil", "@gradio/upload"]
}
});

@ -20,7 +20,6 @@ from gradio.cli.commands.components.install_component import _get_executable_pat
from gradio.cli.commands.display import LivePanelDisplay
gradio_template_path = Path(gradio.__file__).parent / "templates" / "frontend"
gradio_node_path = Path(gradio.__file__).parent / "node" / "dev" / "files" / "index.js"
def _build(
@ -120,6 +119,20 @@ def _build(
"node must be installed in order to run build command."
)
gradio_node_path = subprocess.run(
[node, "-e", "console.log(require.resolve('@gradio/preview'))"],
cwd=Path(component_directory / "frontend"),
check=False,
capture_output=True,
)
if gradio_node_path.returncode != 0:
raise ValueError(
"Could not find `@gradio/preview`. Run `npm i -D @gradio/preview` in your frontend folder."
)
gradio_node_path = gradio_node_path.stdout.decode("utf-8").strip()
node_cmds = [
node,
gradio_node_path,

@ -13,7 +13,6 @@ import gradio
from gradio.cli.commands.components.install_component import _get_executable_path
gradio_template_path = Path(gradio.__file__).parent / "templates" / "frontend"
gradio_node_path = Path(gradio.__file__).parent / "node" / "dev" / "files" / "index.js"
def _dev(
@ -63,6 +62,20 @@ def _dev(
"gradio", gradio_path, cli_arg_name="--gradio-path"
)
gradio_node_path = subprocess.run(
[node, "-e", "console.log(require.resolve('@gradio/preview'))"],
cwd=Path(component_directory / "frontend"),
check=False,
capture_output=True,
)
if gradio_node_path.returncode != 0:
raise ValueError(
"Could not find `@gradio/preview`. Run `npm i -D @gradio/preview` in your frontend folder."
)
gradio_node_path = gradio_node_path.stdout.decode("utf-8").strip()
proc = subprocess.Popen(
[
node,

@ -13,6 +13,9 @@
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:0.3.2"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"exports": {
".": "./Index.svelte",
"./package.json": "./package.json"

@ -11,6 +11,9 @@
".": "./Index.svelte",
"./package.json": "./package.json"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"dependencies": {
"@gradio/atoms": "workspace:^",
"@gradio/icons": "workspace:^",

@ -22,6 +22,9 @@
"wavesurfer.js": "^7.4.2",
"@types/wavesurfer.js": "^6.0.10"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "index.ts",
"exports": {

@ -11,6 +11,9 @@
"@gradio/upload": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main": "./Index.svelte",
"main_changeset": true,
"exports": {

@ -23,6 +23,9 @@
"@types/prismjs": "1.26.3",
"dequal": "^2.0.2"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "./Index.svelte",
"exports": {

@ -17,5 +17,8 @@
"@gradio/atoms": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -17,5 +17,8 @@
"@gradio/atoms": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -40,5 +40,8 @@
".": "./Index.svelte",
"./example": "./Example.svelte",
"./package.json": "./package.json"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -17,5 +17,8 @@
"@gradio/atoms": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -11,5 +11,8 @@
"exports": {
".": "./Index.svelte",
"./package.json": "./package.json"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -28,5 +28,8 @@
".": "./Index.svelte",
"./example": "./Example.svelte",
"./package.json": "./package.json"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -16,5 +16,8 @@
"@gradio/client": "workspace:^",
"@gradio/utils": "workspace:^",
"@gradio/upload": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -11,6 +11,9 @@
"@gradio/client": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main": "./Index.svelte",
"main_changeset": true,
"exports": {

@ -17,5 +17,8 @@
"@gradio/icons": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -17,5 +17,8 @@
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^",
"@zerodevx/svelte-json-view": "^1.0.7"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -15,6 +15,9 @@
"@gradio/utils": "workspace:^",
"@gradio/wasm": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main": "./Index.svelte",
"main_changeset": true,
"exports": {

@ -17,6 +17,9 @@
"@gradio/utils": "workspace:^",
"dequal": "^2.0.2"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"exports": {
".": "./Index.svelte",

@ -11,6 +11,9 @@
"@gradio/utils": "workspace:^",
"@gradio/icons": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "./Index.svelte",
"exports": {

@ -17,6 +17,9 @@
"@gradio/file": "workspace:^",
"dequal": "^2.0.2"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main": "./Index.svelte",
"main_changeset": true,
"exports": {

@ -10,5 +10,8 @@
"exports": {
".": "./Index.svelte",
"./package.json": "./package.json"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -14,6 +14,9 @@
"@gradio/theme": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main": "./Index.svelte",
"exports": {
".": "./Index.svelte",

@ -12,6 +12,9 @@
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"exports": {
".": "./Index.svelte",
"./example": "./Example.svelte",

@ -18,6 +18,9 @@
"lazy-brush": "^1.0.1",
"resize-observer-polyfill": "^1.5.1"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "./Index.svelte",
"exports": {

@ -19,6 +19,9 @@
"pixi.js": "^7.3.2",
"tinycolor2": "^1.6.0"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "./Index.svelte",
"exports": {

@ -12,6 +12,9 @@
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main": "./Index.svelte",
"main_changeset": true,
"exports": {

@ -12,6 +12,9 @@
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "./Index.svelte",
"exports": {

@ -27,5 +27,8 @@
"marked-gfm-heading-id": "^3.1.2",
"marked-highlight": "^2.0.1",
"prismjs": "1.29.0"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -20,6 +20,9 @@
"dequal": "^2.0.2",
"gsplat": "^1.0.5"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "./Index.svelte",
"exports": {

@ -21,5 +21,8 @@
"@gradio/upload": "workspace:^",
"@gradio/image": "workspace:^",
"@gradio/client": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -16,5 +16,8 @@
"@gradio/atoms": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -19,6 +19,7 @@
"prismjs": "^1.29.0"
},
"devDependencies": {
"@types/prismjs": "^1.26.3"
"@types/prismjs": "^1.26.3",
"@gradio/preview": "workspace:^"
}
}

@ -18,6 +18,9 @@
"vega": "^5.22.1",
"vega-lite": "^5.12.0"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"exports": {
".": "./Index.svelte",

@ -3,12 +3,14 @@
"version": "0.7.2",
"description": "Gradio UI packages",
"type": "module",
"main": "src/index.ts",
"main": "dist/index.js",
"author": "",
"license": "ISC",
"private": false,
"scripts": {
"build": "rollup -c"
"build:rollup": "rollup -c",
"build:vite": "vite build --ssr",
"build": "pnpm build:rollup && pnpm build:vite"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.4",
@ -16,24 +18,22 @@
"@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-typescript": "^11.1.2",
"rollup": "^3.28.0",
"svelte-hmr": "^0.16.0"
"@originjs/vite-plugin-commonjs": "^1.0.3",
"@rollup/plugin-sucrase": "^5.0.1"
},
"dependencies": {
"@originjs/vite-plugin-commonjs": "^1.0.3",
"@rollup/plugin-sucrase": "^5.0.1",
"@sveltejs/vite-plugin-svelte": "^2.5.2",
"@sveltejs/vite-plugin-svelte": "^3.1.0",
"@types/which": "^3.0.0",
"coffeescript": "^2.7.0",
"css-tree": "2.3.1",
"esbuild-wasm": "^0.20.0",
"lightningcss": "^1.21.7",
"pug": "^3.0.2",
"rollup-plugin-ignore": "^1.0.10",
"sass": "^1.66.1",
"stylus": "^0.63.0",
"sucrase": "^3.34.0",
"sugarss": "^4.0.1",
"vite": "^5.2.9",
"which": "4.0.0",
"yootils": "^0.3.1"
"yootils": "^0.3.1",
"svelte-hmr": "^0.16.0"
}
}

@ -1,22 +1,12 @@
// @ts-nocheck
import { createRequire } from "node:module";
import { join, dirname } from "path";
import { cpSync, writeFileSync, rmSync, existsSync } from "fs";
import { fileURLToPath } from "url";
import { join } from "path";
import ts from "@rollup/plugin-typescript";
import node from "@rollup/plugin-node-resolve";
import cjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
const __dirname = dirname(fileURLToPath(import.meta.url));
const require = createRequire(import.meta.url);
const esbuild_binary_path = require.resolve("esbuild-wasm");
const vite_client = require.resolve("vite/dist/client/client.mjs");
const hmr = require.resolve("svelte-hmr");
const output_svelte_dir = "../../gradio/templates/frontend/assets/svelte";
const onwarn = (warning, warn) => {
@ -27,140 +17,18 @@ const onwarn = (warning, warn) => {
warn(warning);
};
const RE_SVELTE_IMPORT =
/import\s+([\w*{},\s]+)\s+from\s+['"](svelte|svelte\/internal)['"]/g;
const dirname_def = `
import { dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
`;
function inject_dirname() {
return {
name: "inject __dirname",
transform(code, id) {
if (id.includes("svelte-hmr/index.js")) {
return `${dirname_def}\n${code}`;
}
}
};
}
function resolve_imports() {
return {
name: "resolve-imports",
resolveId(id) {
const pkgs = [
"sugarss",
"stylus",
"sass",
"pug",
"coffeescript",
"lightningcss"
];
if (pkgs.includes(id)) {
return join(__dirname, "src", "placeholder.ts");
}
if (id === "svelte/compiler") return "../compiler.js";
},
transform(code) {
const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => {
const identifier = $1.trim().startsWith("* as")
? $1.replace("* as", "").trim()
: $1.trim();
return `const ${identifier.replace(
" as ",
": "
)} = window.__gradio__svelte__internal;`;
});
return {
code: new_code,
map: null
};
}
};
}
export function copy_files() {
return {
name: "copy_files",
writeBundle() {
cpSync(join(vite_client, ".."), "../../gradio/node/dist/client", {
recursive: true
});
cpSync(join(hmr, "../runtime"), "../../gradio/node/dev/files/runtime", {
recursive: true
});
cpSync(
join(esbuild_binary_path, "..", "..", ".."),
"../../gradio/node/dev/node_modules",
{
recursive: true
}
);
cpSync("./src/examine.py", "../../gradio/node/examine.py");
writeFileSync(
"../../gradio/node/package.json",
`{"type": "module", "version": "0.0.0"}`,
{
encoding: "utf-8"
}
);
}
};
}
const plugins = [node({ preferBuiltins: true }), json(), cjs(), ts()];
export default [
{
input: "src/index.ts",
output: {
dir: "../../gradio/node/dev/files",
format: "esm",
minifyInternalExports: false
},
onwarn,
plugins: [
{
resolveId(id, importer) {
if (id === "esbuild") {
return "esbuild-wasm";
}
}
},
...plugins,
{
name: "clean_dir",
buildStart() {
if (existsSync("../../gradio/node")) {
rmSync("../../gradio/node", { recursive: true });
}
}
},
resolve_imports(),
inject_dirname(),
copy_files()
],
external: ["fsevents", "esbuild-wasm", "../compiler.js"]
},
{
input: "src/svelte-submodules.ts",
output: {
file: join(output_svelte_dir, "svelte-submodules.js"),
format: "esm"
},
onwarn,
plugins
},
{
input: "src/svelte-internal.ts",
output: {
@ -169,30 +37,5 @@ export default [
},
onwarn,
plugins
},
{
input: "src/compiler.ts",
output: {
file: "../../gradio/node/dev/compiler.js",
format: "esm"
},
onwarn,
plugins: [
...plugins,
json({
include: ["**/node_modules/**", "node_modules/**"]
}),
{
resolveId(id) {
if (id === "css-tree") {
return require.resolve(
"./node_modules/css-tree/dist/csstree.esm.js"
);
}
}
}
]
}
];

@ -37,7 +37,6 @@ export async function create_server({
process.env.gradio_mode = "dev";
const imports = generate_imports(component_dir, root_dir, python_path);
const NODE_DIR = join(root_dir, "..", "..", "node", "dev");
const svelte_dir = join(root_dir, "assets", "svelte");
try {
@ -48,14 +47,11 @@ export async function create_server({
configFile: false,
root: root_dir,
optimizeDeps: {
disabled: true
},
server: {
port: frontend_port,
host: host,
fs: {
allow: [root_dir, NODE_DIR, component_dir]
allow: [root_dir, component_dir]
}
},
plugins: [
@ -137,6 +133,11 @@ function generate_imports(
example: pkg.exports["./example"]
};
if (!exports.component)
throw new Error(
"Could not find component entry point. Please check the exports field of your package.json."
);
const example = exports.example
? `example: () => import("${to_posix(
join(component.frontend_dir, exports.example)
@ -144,7 +145,9 @@ function generate_imports(
: "";
return `${acc}"${component.component_class_id}": {
${example}
component: () => import("${to_posix(component.frontend_dir)}")
component: () => import("${to_posix(
join(component.frontend_dir, exports.component)
)}")
},\n`;
}, "");

@ -1,10 +1,12 @@
import { ChildProcess, spawn, spawnSync } from "node:child_process";
import { type ChildProcess, spawn, spawnSync } from "node:child_process";
import * as net from "net";
import { create_server } from "./dev";
import { make_build } from "./build";
import { join } from "path";
import which from "which";
import { join, dirname } from "path";
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url));
export interface ComponentMeta {
name: string;
@ -155,7 +157,7 @@ export function examine_module(
): ComponentMeta[] {
const _process = spawnSync(
python_path,
[join(root, "..", "..", "node", "examine.py"), "-m", mode],
[join(__dirname, "examine.py"), "-m", mode],
{
cwd: join(component_dir, "backend"),
stdio: "pipe"

@ -17,5 +17,8 @@
"@gradio/statustracker": "0.4.12",
"@gradio/utils": "0.3.2",
"@zerodevx/svelte-json-view": "^1.0.7"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

25
js/preview/vite.config.ts Normal file

@ -0,0 +1,25 @@
import { defineConfig } from "vite";
import { cpSync } from "fs";
export default defineConfig({
build: {
lib: {
entry: "./src/index.ts",
formats: ["es"]
},
outDir: "dist",
rollupOptions: {
external: ["fsevents", "vite", "@sveltejs/vite-plugin-svelte"]
}
},
plugins: [copy_files()]
});
export function copy_files() {
return {
name: "copy_files",
writeBundle() {
cpSync("./src/examine.py", "dist/examine.py");
}
};
}

@ -17,5 +17,8 @@
"@gradio/atoms": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -7,6 +7,9 @@
"license": "ISC",
"private": false,
"main_changeset": true,
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"exports": {
".": "./Index.svelte",
"./package.json": "./package.json"

@ -17,5 +17,8 @@
"@gradio/icons": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -18,6 +18,9 @@
"lazy-brush": "^1.0.1",
"resize-observer-polyfill": "^1.5.1"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"main_changeset": true,
"main": "./Index.svelte",
"exports": {

@ -17,5 +17,8 @@
"@gradio/icons": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -16,5 +16,8 @@
"@gradio/atoms": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -19,5 +19,8 @@
"@gradio/column": "workspace:^",
"@gradio/icons": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -15,5 +15,8 @@
"@gradio/column": "workspace:^",
"@gradio/tabs": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -14,5 +14,8 @@
},
"dependencies": {
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -18,5 +18,8 @@
"@gradio/icons": "workspace:^",
"@gradio/statustracker": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -17,5 +17,8 @@
"@gradio/client": "workspace:^",
"@gradio/upload": "workspace:^",
"@gradio/utils": "workspace:^"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
}
}

@ -19,6 +19,9 @@
"@ffmpeg/util": "^0.12.1",
"mrmime": "^2.0.0"
},
"devDependencies": {
"@gradio/preview": "workspace:^"
},
"exports": {
".": "./index.ts",
"./example": "./Example.svelte",

953
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff