Fix esbuild (#5624)

* fix build

* fix build

* add changeset

* fix build

* fix

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/sad-ears-sink.md

@@ -0,0 +1,7 @@
+---
+"@gradio/preview": minor
+"@gradio/utils": minor
+"gradio": minor
+---
+
+feat:Fix esbuild

gradio/cli/commands/create.py

@@ -273,7 +273,15 @@ def dev(
         )
 
     print(f":recycle: [green]Launching[/] {app} in reload mode\n")
-
+    print(
+        gradio_node_path,
+        "--component-directory",
+        component_directory,
+        "--root",
+        gradio_template_path,
+        "--app",
+        str(app),
+    )
     proc = subprocess.Popen(
         [
             "node",

js/gradio-preview/package.json → js/preview/package.json

@@ -25,7 +25,7 @@
 		"@sveltejs/vite-plugin-svelte": "^2.4.2",
 		"coffeescript": "^2.7.0",
 		"css-tree": "2.3.1",
-		"esbuild": "^0.19.0",
+		"esbuild-wasm": "^0.19.0",
 		"lightningcss": "^1.21.7",
 		"pug": "^3.0.2",
 		"rollup-plugin-ignore": "^1.0.10",

js/gradio-preview/rollup.config.js → js/preview/rollup.config.js

@@ -14,10 +14,15 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const require = createRequire(import.meta.url);
 
-const esbuild_binary_path = require.resolve("esbuild");
+const esbuild_binary_path = require.resolve("esbuild-wasm");
+console.log(esbuild_binary_path);
 const vite_client = require.resolve("vite/dist/client/client.mjs");
 const hmr = require.resolve("svelte-hmr");
-console.log(__dirname);
+
+const onwarn = (warning, warn) => {
+	if (warning.plugin === "typescript") return;
+	warn(warning);
+};
 export default [
 	{
 		input: "src/index.ts",
@@ -26,7 +31,18 @@ export default [
 			format: "esm",
 			minifyInternalExports: false
 		},
+		onwarn,
+
 		plugins: [
+			{
+				resolveId(id, importer) {
+					// console.log(id);
+					if (id === "esbuild") {
+						console.log(id, importer);
+						return "esbuild-wasm";
+					}
+				}
+			},
 			ts(),
 			node(),
 			cjs(),
@@ -41,7 +57,7 @@ export default [
 			json(),
 			{
 				name: "inject __dirname",
-				resolveId(id) {
+				resolveId(id, importer) {
 					const pkgs = [
 						"sugarss",
 						"stylus",
@@ -112,14 +128,15 @@ export default [
 				}
 			}
 		],
-		external: ["fsevents", "esbuild", "../compiler.js", "../svelte.js"]
+		external: ["fsevents", "esbuild-wasm", "../compiler.js", "../svelte.js"]
 	},
 	{
 		input: "src/svelte.ts",
 		output: {
 			file: "../../gradio/node/dev/svelte.js",
 			format: "esm"
 		},
+		onwarn,
 		external: ["./svelte-internal.js"],
 		plugins: [
 			node(),
@@ -152,6 +169,7 @@ export default [
 			file: "../../gradio/node/dev/svelte-action.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [node(), json(), cjs(), ts()]
 	},
 	{
@@ -160,6 +178,7 @@ export default [
 			file: "../../gradio/node/dev/svelte-internal.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [node(), json(), cjs(), ts()]
 	},
 	{
@@ -168,6 +187,7 @@ export default [
 			file: "../../gradio/node/dev/svelte-animate.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [node(), json(), cjs(), ts()]
 	},
 	{
@@ -176,6 +196,7 @@ export default [
 			file: "../../gradio/node/dev/svelte-motion.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [node(), json(), cjs(), ts()]
 	},
 	{
@@ -184,6 +205,7 @@ export default [
 			file: "../../gradio/node/dev/svelte-store.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [node(), json(), cjs(), ts()]
 	},
 	{
@@ -192,6 +214,7 @@ export default [
 			file: "../../gradio/node/dev/svelte-transition.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [node(), json(), cjs(), ts()]
 	},
 	{
@@ -200,6 +223,7 @@ export default [
 			file: "../../gradio/node/dev/svelte-disclose.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [node(), json(), cjs(), ts()]
 	},
 	{
@@ -208,6 +232,7 @@ export default [
 			file: "../../gradio/node/dev/compiler.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [
 			node(),
 			json({
@@ -232,6 +257,7 @@ export default [
 			file: "../../gradio/node/dev/files/compiler.js",
 			format: "esm"
 		},
+		onwarn,
 		plugins: [
 			node(),
 			json({

js/gradio-preview/src/dev_server.ts → js/preview/src/dev_server.ts

@@ -39,109 +39,117 @@ export async function create_server({
 
 	const NODE_DIR = join(root_dir, "..", "..", "node", "dev");
 
-	const server = await createServer({
-		// any valid user config options, plus `mode` and `configFile`
-		customLogger: logger,
-		mode: "development",
-		configFile: false,
-		root: root_dir,
-		build: {
-			rollupOptions: {
-				external: [
-					"../../../node/dev/svelte.js",
-					"../../../node/dev/svelte-internal.js",
-					"../../../../../../gradio/node/dev/svelte-internal.js",
-					"../../../../../../gradio/node/dev/svelte.js"
-				]
-			}
-		},
-		optimizeDeps: {
-			disabled: true
-		},
-		server: {
-			port: frontend_port,
-			fs: {
-				allow: [root_dir, NODE_DIR, component_dir]
-			}
-		},
-		plugins: [
-			//@ts-ignore
-			viteCommonjs(),
-			{
-				name: "gradio",
-				enforce: "pre",
-				resolveId(importee, importer) {
-					if (importee === "svelte/internal/disclose-version") {
-						return join(NODE_DIR, "svelte-action.js");
-					}
+	try {
+		console.log("Atttempting to start server...");
+		const server = await createServer({
+			// any valid user config options, plus `mode` and `configFile`
+			esbuild: false,
+			customLogger: logger,
+			mode: "development",
+			configFile: false,
+			root: root_dir,
+			build: {
+				rollupOptions: {
+					external: [
+						"../../../node/dev/svelte.js",
+						"../../../node/dev/svelte-internal.js",
+						"../../../../../../gradio/node/dev/svelte-internal.js",
+						"../../../../../../gradio/node/dev/svelte.js"
+					]
+				}
+			},
 
-					if (importee.startsWith("svelte/")) {
-						return join(
-							NODE_DIR,
-							importee.replace("svelte/", "svelte-") + ".js"
-						);
-					}
-					if (importee === "svelte") {
-						return join(NODE_DIR, "svelte-internal.js");
-					}
-				},
-				transform(code) {
-					if (code.includes("__ROOT_PATH__")) {
-						return code.replace(`"__ROOT_PATH__"`, imports);
-					}
-				},
-				transformIndexHtml(html) {
-					return html.replace(
-						`window.__GRADIO_DEV__ = "dev"`,
-						`window.__GRADIO_DEV__ = "dev";
-						window.__GRADIO__SERVER_PORT__ = ${backend_port};`
-					);
+			optimizeDeps: {
+				disabled: true
+			},
+			server: {
+				port: frontend_port,
+				fs: {
+					allow: [root_dir, NODE_DIR, component_dir]
 				}
 			},
-			//@ts-ignore
-			svelte({
-				onwarn(warning, handler) {
-					if (
-						svelte_codes_to_ignore.hasOwnProperty(warning.code) &&
-						svelte_codes_to_ignore[warning.code] &&
-						warning.message.includes(svelte_codes_to_ignore[warning.code])
-					) {
-						return;
-					}
+			plugins: [
+				//@ts-ignore
+				viteCommonjs(),
+				{
+					name: "gradio",
+					enforce: "pre",
+					resolveId(importee, importer) {
+						if (importee === "svelte/internal/disclose-version") {
+							return join(NODE_DIR, "svelte-action.js");
+						}
 
-					handler!(warning);
-				},
-				prebundleSvelteLibraries: false,
-				hot: true,
-				compilerOptions: {
-					discloseVersion: false
-				},
-				preprocess: [
-					{
-						script: ({ attributes, filename, content }) => {
-							if (attributes.lang === "ts") {
-								const compiledCode = transform(content, {
-									transforms: ["typescript"],
-									keepUnusedImports: true
-								});
-
-								return {
-									code: compiledCode.code,
-									map: compiledCode.sourceMap
-								};
-							}
+						if (importee.startsWith("svelte/")) {
+							return join(
+								NODE_DIR,
+								importee.replace("svelte/", "svelte-") + ".js"
+							);
 						}
+						if (importee === "svelte") {
+							return join(NODE_DIR, "svelte-internal.js");
+						}
+					},
+					transform(code) {
+						if (code.includes("__ROOT_PATH__")) {
+							return code.replace(`"__ROOT_PATH__"`, imports);
+						}
+					},
+					transformIndexHtml(html) {
+						return html.replace(
+							`window.__GRADIO_DEV__ = "dev"`,
+							`window.__GRADIO_DEV__ = "dev";
+							window.__GRADIO__SERVER_PORT__ = ${backend_port};`
+						);
 					}
-				]
-			})
-		]
-	});
-
-	await server.listen();
+				},
+				//@ts-ignore
+				svelte({
+					onwarn(warning, handler) {
+						if (
+							svelte_codes_to_ignore.hasOwnProperty(warning.code) &&
+							svelte_codes_to_ignore[warning.code] &&
+							warning.message.includes(svelte_codes_to_ignore[warning.code])
+						) {
+							return;
+						}
 
-	console.info(
-		`[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}`
-	);
+						handler!(warning);
+					},
+					prebundleSvelteLibraries: false,
+					hot: true,
+					compilerOptions: {
+						discloseVersion: false
+					},
+					preprocess: [
+						{
+							script: ({ attributes, filename, content }) => {
+								if (attributes.lang === "ts") {
+									const compiledCode = transform(content, {
+										transforms: ["typescript"],
+										keepUnusedImports: true
+									});
+
+									return {
+										code: compiledCode.code,
+										map: compiledCode.sourceMap
+									};
+								}
+							}
+						}
+					]
+				})
+			]
+		});
+
+		await server.listen();
+
+		console.info(
+			`[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}`
+		);
+	} catch (e) {
+		console.log("Error starting server:");
+		console.error(e);
+	}
 }
 
 import * as fs from "fs";

js/preview/test/imageslider/.gitignore

@@ -0,0 +1,9 @@
+# Python build
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi

js/preview/test/imageslider/backend/imageslider/__init__.py

@@ -0,0 +1,4 @@
+
+from .imageslider import ImageSlider
+
+__all__ = ['ImageSlider']