Speed up CI by avoiding the need to package (#9791)

* optimise typechecking

* fix builds

.github/actions/install-frontend-deps/action.yml

@@ -33,9 +33,6 @@ runs:
     - name: Build Css
       shell: bash
       run: pnpm css
-    - name: Create packages
-      shell: bash
-      run: pnpm package
     - name: Build frontend
       if: inputs.skip_build == 'false'
       # && steps.frontend-cache.outputs.cache-hit != 'true'

.github/workflows/publish.yml

@@ -30,6 +30,7 @@ jobs:
         run: |
           . venv/bin/activate
           pip install -U build hatch packaging>=23.2  # packaging>=23.2 is needed to build Lite due to https://github.com/pypa/hatch/issues/1381
+          pnpm package
           pnpm --filter @gradio/client --filter @gradio/lite --filter @gradio/preview build
 
       - name: create and publish versions

client/js/tsconfig.json

@@ -14,7 +14,7 @@
 		"skipLibCheck": true,
 
 		/* Bundler */
-		"moduleResolution": "bundler",
+		"moduleResolution": "Bundler",
 		"skipDefaultLibCheck": true,
 		"allowImportingTsExtensions": true,
 		"esModuleInterop": true,

js/_website/tsconfig.json

@@ -9,7 +9,11 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"typeRoots": ["node_modules/@types", "./app.d.ts"]
+		"typeRoots": ["node_modules/@types", "./app.d.ts"],
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"customConditions": ["gradio"],
+		"target": "es2022"
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//

js/app/package.json

@@ -30,6 +30,7 @@
 		"@gradio/wasm": "workspace:^",
 		"@huggingface/space-header": "^1.0.3",
 		"@self/build": "workspace:^",
-		"@sveltejs/adapter-node": "^5.2.2"
+		"@sveltejs/adapter-node": "^5.2.2",
+		"svelte-preprocess": "^6.0.3"
 	}
 }

js/app/svelte.config.js

@@ -1,6 +1,6 @@
 import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import sveltePreprocess from "svelte-preprocess";
+import { sveltePreprocess } from "svelte-preprocess";
 import custom_media from "postcss-custom-media";
 import global_data from "@csstools/postcss-global-data";
 import { resolve } from "path";
@@ -13,7 +13,6 @@ const theme_token_path = join(
 	__dirname,
 	"..",
 	"..",
-
 	"theme",
 	"src",
 	"tokens.css"

js/app/tsconfig.json

@@ -10,11 +10,8 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-		"module": "esnext"
+		"module": "esnext",
+		"customConditions": ["gradio"],
+		"target": "esnext"
 	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
 }

js/component-test/tsconfig.json

@@ -10,7 +10,11 @@
 		"sourceMap": true,
 		"strict": true,
 		"typeRoots": ["node_modules/@types", "./app.d.ts"],
-		"outDir": "./.svelte-kit"
+		"outDir": "./.svelte-kit",
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"target": "es2022",
+		"customConditions": ["gradio"]
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//

js/lite/vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-import sveltePreprocess from "svelte-preprocess";
+import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
 // @ts-ignore
 import custom_media from "postcss-custom-media";
 import global_data from "@csstools/postcss-global-data";
@@ -146,14 +146,17 @@ export default defineConfig(({ mode }) => {
 					accessors: true
 				},
 				hot: !process.env.VITEST && !production,
-				preprocess: sveltePreprocess({
-					postcss: {
-						plugins: [
-							global_data({ files: [theme_token_path] }),
-							custom_media()
-						]
-					}
-				})
+				preprocess: [
+					vitePreprocess(),
+					sveltePreprocess({
+						postcss: {
+							plugins: [
+								global_data({ files: [theme_token_path] }),
+								custom_media()
+							]
+						}
+					})
+				]
 			}),
 
 			inject_ejs(),
@@ -163,7 +166,7 @@ export default defineConfig(({ mode }) => {
 			mode === "test" && mock_modules()
 		],
 		optimizeDeps: {
-			exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"]
+			exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util", "@gradio/wasm"]
 		},
 		test: {
 			setupFiles: [resolve(__dirname, "../../.config/setup_vite_tests.ts")],
@@ -180,6 +183,7 @@ export default defineConfig(({ mode }) => {
 		},
 
 		resolve: {
+			conditions: ["gradio"],
 			alias: {
 				// For the Wasm app to import the wheel file URLs.
 				"gradio.whl": resolve(

js/spa/vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-import sveltePreprocess from "svelte-preprocess";
+import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
 // @ts-ignore
 import custom_media from "postcss-custom-media";
 import global_data from "@csstools/postcss-global-data";
@@ -121,14 +121,17 @@ export default defineConfig(({ mode }) => {
 					accessors: true
 				},
 				hot: !process.env.VITEST && !production,
-				preprocess: sveltePreprocess({
-					postcss: {
-						plugins: [
-							global_data({ files: [theme_token_path] }),
-							custom_media()
-						]
-					}
-				})
+				preprocess: [
+					vitePreprocess(),
+					sveltePreprocess({
+						postcss: {
+							plugins: [
+								global_data({ files: [theme_token_path] }),
+								custom_media()
+							]
+						}
+					})
+				]
 			}),
 			generate_dev_entry({
 				enable: !development && mode !== "test"

js/wasm/package.json

@@ -19,6 +19,10 @@
 		"./network": {
 			"import": "./network/index.ts",
 			"types": "./dist/network/index.d.ts"
+		},
+		"./webworker": {
+			"import": "./webworker/webworker.js",
+			"types": "./webworker/webworker.d.ts"
 		}
 	},
 	"keywords": [],

js/wasm/src/worker-proxy.ts

@@ -41,7 +41,7 @@ export class WorkerProxy extends EventTarget {
 		// HACK: Use `CrossOriginWorkerMaker` imported as `Worker` here.
 		// Read the comment in `cross-origin-worker.ts` for the detail.
 		const workerMaker = new Worker(
-			new URL("../webworker/webworker.js", import.meta.url),
+			new URL("../dist/webworker/webworker.js", import.meta.url),
 			{
 				/* @vite-ignore */ shared: sharedWorkerMode // `@vite-ignore` is needed to avoid an error `Vite is unable to parse the worker options as the value is not static.`
 			}

package.json

@@ -4,10 +4,10 @@
 	"description": "Gradio UI packages",
 	"scripts": {
 		"dev": "pnpm css && pnpm --filter @gradio/preview build && pnpm --filter @self/app dev",
-		"dev:lite": "pnpm package && pnpm --filter @gradio/lite dev",
+		"dev:lite": " pnpm --filter @gradio/lite dev",
 		"css": "pnpm --filter @gradio/theme generate",
 		"build": "pnpm css && pnpm --filter @self/app build --emptyOutDir && pnpm --filter @self/spa build --emptyOutDir && pnpm --filter @gradio/preview build",
-		"build:lite": "pnpm package && pnpm --filter @gradio/lite build",
+		"build:lite": "pnpm --filter @gradio/lite build",
 		"format:check": "prettier --ignore-path .config/.prettierignore --check --config .config/.prettierrc.json --plugin prettier-plugin-svelte .",
 		"format:write": "prettier --ignore-path .config/.prettierignore --write --config .config/.prettierrc.json --plugin prettier-plugin-svelte .",
 		"lint": "ESLINT_USE_FLAT_CONFIG=true eslint -c .config/eslint.config.js js client/js",
@@ -17,7 +17,7 @@
 		"test:client": "pnpm --filter=@gradio/client test",
 		"test:browser": "pnpm --filter @self/spa test:browser",
 		"test:browser:reload": "CUSTOM_TEST=1 pnpm --filter @self/spa test:browser:reload",
-		"test:browser:full": "run-s build package test:browser",
+		"test:browser:full": "run-s build test:browser",
 		"test:browser:verbose": "pnpm test:browser",
 		"test:browser:dev": "pnpm --filter @self/spa test:browser:dev",
 		"storybook": "storybook dev -p 6006 --config-dir js/storybook",
@@ -84,7 +84,7 @@
 		"svelte-check": "^3.7.0",
 		"svelte-eslint-parser": "^0.36.0",
 		"svelte-i18n": "^4.0.0",
-		"svelte-preprocess": "^5.1.4",
+		"svelte-preprocess": "^6.0.3",
 		"tailwindcss": "^3.4.3",
 		"tinyspy": "^3.0.0",
 		"typescript": "^5.5.4",

svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+	preprocess: vitePreprocess()
+};

tsconfig.json

@@ -1,9 +1,8 @@
 {
 	"compilerOptions": {
-		"moduleResolution": "Bundler",
-		"module": "ESNext",
-		"lib": ["es2020", "DOM", "dom.iterable"],
-		"target": "es2020",
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"lib": ["es2022", "DOM", "dom.iterable"],
 		/**
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
 			to enforce using \`import type\` instead of \`import\` for Types.
@@ -20,8 +19,8 @@
 		"outDir": "dist",
 		"baseUrl": ".",
 		"paths": {
-			"./pure": ["./pure.js"],
-			"@gradio/client": ["./client/js/src/index.ts"]
+			"./pure": ["./pure.js"]
+			// "@gradio/client": ["./client/js/src/index.ts"]
 		},
 		"plugins": [
 			{
@@ -31,7 +30,9 @@
 				"assumeIsSvelteProject": false // if true, skip detection and always assume it's a Svelte project
 			}
 		],
-		"types": ["vite/client"]
+		"types": ["vite/client"],
+		"customConditions": ["gradio"],
+		"target": "es2022"
 	},
 	"exclude": [
 		"**/_website/**/*",