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/postcss.config.js

@@ -1 +0,0 @@
-module.exports = {};

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 { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import sveltePreprocess from "svelte-preprocess";
+import { sveltePreprocess } from "svelte-preprocess";
 // @ts-ignore
 import custom_media from "postcss-custom-media";
 import global_data from "@csstools/postcss-global-data";
@@ -146,7 +146,9 @@ export default defineConfig(({ mode }) => {
 					accessors: true
 				},
 				hot: !process.env.VITEST && !production,
-				preprocess: sveltePreprocess({
+				preprocess: [
+					vitePreprocess(),
+					sveltePreprocess({
 						postcss: {
 							plugins: [
 								global_data({ files: [theme_token_path] }),
@@ -154,6 +156,7 @@ export default defineConfig(({ mode }) => {
 							]
 						}
 					})
+				]
 			}),
 
 			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 { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import sveltePreprocess from "svelte-preprocess";
+import { sveltePreprocess } from "svelte-preprocess";
 // @ts-ignore
 import custom_media from "postcss-custom-media";
 import global_data from "@csstools/postcss-global-data";
@@ -121,7 +121,9 @@ export default defineConfig(({ mode }) => {
 					accessors: true
 				},
 				hot: !process.env.VITEST && !production,
-				preprocess: sveltePreprocess({
+				preprocess: [
+					vitePreprocess(),
+					sveltePreprocess({
 						postcss: {
 							plugins: [
 								global_data({ files: [theme_token_path] }),
@@ -129,6 +131,7 @@ export default defineConfig(({ mode }) => {
 							]
 						}
 					})
+				]
 			}),
 			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",

pnpm-lock.yaml

@@ -167,8 +167,8 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0(svelte@4.2.15)
       svelte-preprocess:
-        specifier: ^5.1.4
+        specifier: ^6.0.3
-        version: 5.1.4(@babel/core@7.24.5)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(pug@3.0.2)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))(svelte@4.2.15)(typescript@5.5.4)
+        version: 6.0.3(@babel/core@7.24.5)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(pug@3.0.2)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))(svelte@4.2.15)(typescript@5.5.4)
       tailwindcss:
         specifier: ^3.4.3
         version: 3.4.3
@@ -591,6 +591,9 @@ importers:
       '@sveltejs/adapter-node':
         specifier: ^5.2.2
         version: 5.2.2(@sveltejs/kit@2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))
+      svelte-preprocess:
+        specifier: ^6.0.3
+        version: 6.0.3(@babel/core@7.24.5)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(pug@3.0.2)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))(svelte@4.2.15)(typescript@5.5.4)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
@@ -9600,6 +9603,43 @@ packages:
       typescript:
         optional: true
 
+  svelte-preprocess@6.0.3:
+    resolution: {integrity: sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==}
+    engines: {node: '>= 18.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.10.2
+      coffeescript: ^2.5.1
+      less: ^3.11.3 || ^4.0.0
+      postcss: ^7 || ^8
+      postcss-load-config: '>=3'
+      pug: ^3.0.0
+      sass: ^1.26.8
+      stylus: '>=0.55'
+      sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
+      svelte: ^4.0.0 || ^5.0.0-next.100 || ^5.0.0
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      coffeescript:
+        optional: true
+      less:
+        optional: true
+      postcss:
+        optional: true
+      postcss-load-config:
+        optional: true
+      pug:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      typescript:
+        optional: true
+
   svelte-range-slider-pips@2.0.1:
     resolution: {integrity: sha512-sCHvcTgi0ZYE4c/mwSsdALRsfuqEmpwTsSUdL+PUrumZ8u2gv1GKwZ3GohcAcTB6gfmqRBkyn6ujRXrOIga1gw==}
 
@@ -18722,6 +18762,19 @@ snapshots:
       sugarss: 4.0.1(postcss@8.4.38)
       typescript: 5.5.4
 
+  svelte-preprocess@6.0.3(@babel/core@7.24.5)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(pug@3.0.2)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))(svelte@4.2.15)(typescript@5.5.4):
+    dependencies:
+      svelte: 4.2.15
+    optionalDependencies:
+      '@babel/core': 7.24.5
+      coffeescript: 2.7.0
+      postcss: 8.4.38
+      postcss-load-config: 4.0.2(postcss@8.4.38)
+      pug: 3.0.2
+      sass: 1.66.1
+      sugarss: 4.0.1(postcss@8.4.38)
+      typescript: 5.5.4
+
   svelte-range-slider-pips@2.0.1: {}
 
   svelte2tsx@0.7.7(svelte@4.2.15)(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",
+		"moduleResolution": "bundler",
-		"module": "ESNext",
+		"module": "esnext",
-		"lib": ["es2020", "DOM", "dom.iterable"],
+		"lib": ["es2022", "DOM", "dom.iterable"],
-		"target": "es2020",
 		/**
 			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"],
+			"./pure": ["./pure.js"]
-			"@gradio/client": ["./client/js/src/index.ts"]
+			// "@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/**/*",