From df1cf8f6c5bb5a054f2418a0da15d5ef48a8d7fb Mon Sep 17 00:00:00 2001 From: pngwn Date: Tue, 22 Oct 2024 15:43:38 +0100 Subject: [PATCH] Speed up CI by avoiding the need to package (#9791) * optimise typechecking * fix builds --- .../actions/install-frontend-deps/action.yml | 3 - .github/workflows/publish.yml | 1 + client/js/tsconfig.json | 2 +- js/_website/tsconfig.json | 6 +- js/app/package.json | 3 +- js/app/postcss.config.js | 1 - js/app/svelte.config.js | 3 +- js/app/tsconfig.json | 9 +-- js/component-test/tsconfig.json | 6 +- js/lite/vite.config.ts | 26 +++++---- js/spa/vite.config.ts | 23 ++++---- js/wasm/package.json | 4 ++ js/wasm/src/worker-proxy.ts | 2 +- package.json | 8 +-- pnpm-lock.yaml | 57 ++++++++++++++++++- svelte.config.js | 5 ++ tsconfig.json | 15 ++--- 17 files changed, 123 insertions(+), 51 deletions(-) delete mode 100644 js/app/postcss.config.js create mode 100644 svelte.config.js diff --git a/.github/actions/install-frontend-deps/action.yml b/.github/actions/install-frontend-deps/action.yml index b6df110970..9bd9144de1 100644 --- a/.github/actions/install-frontend-deps/action.yml +++ b/.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' diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 56aea79ae2..ade1be204d 100644 --- a/.github/workflows/publish.yml +++ b/.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 diff --git a/client/js/tsconfig.json b/client/js/tsconfig.json index ddee6c5038..541ef0cb9d 100644 --- a/client/js/tsconfig.json +++ b/client/js/tsconfig.json @@ -14,7 +14,7 @@ "skipLibCheck": true, /* Bundler */ - "moduleResolution": "bundler", + "moduleResolution": "Bundler", "skipDefaultLibCheck": true, "allowImportingTsExtensions": true, "esModuleInterop": true, diff --git a/js/_website/tsconfig.json b/js/_website/tsconfig.json index 63ed1526c6..2efa6ab945 100644 --- a/js/_website/tsconfig.json +++ b/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 // diff --git a/js/app/package.json b/js/app/package.json index 809d21490f..f23c07a52d 100644 --- a/js/app/package.json +++ b/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" } } diff --git a/js/app/postcss.config.js b/js/app/postcss.config.js deleted file mode 100644 index f053ebf797..0000000000 --- a/js/app/postcss.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = {}; diff --git a/js/app/svelte.config.js b/js/app/svelte.config.js index a8d97a1947..8cf1bbb22b 100644 --- a/js/app/svelte.config.js +++ b/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" diff --git a/js/app/tsconfig.json b/js/app/tsconfig.json index c996e7b7cc..e0c09a6d79 100644 --- a/js/app/tsconfig.json +++ b/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 } diff --git a/js/component-test/tsconfig.json b/js/component-test/tsconfig.json index 7ca8abb924..7b579b486b 100644 --- a/js/component-test/tsconfig.json +++ b/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 // diff --git a/js/lite/vite.config.ts b/js/lite/vite.config.ts index 0661a42eb9..bcf65dc735 100644 --- a/js/lite/vite.config.ts +++ b/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( diff --git a/js/spa/vite.config.ts b/js/spa/vite.config.ts index 6382a50c9e..215b392cff 100644 --- a/js/spa/vite.config.ts +++ b/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" diff --git a/js/wasm/package.json b/js/wasm/package.json index b27bda3745..2f04a42a36 100644 --- a/js/wasm/package.json +++ b/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": [], diff --git a/js/wasm/src/worker-proxy.ts b/js/wasm/src/worker-proxy.ts index 03304ba173..ca03bfc50e 100644 --- a/js/wasm/src/worker-proxy.ts +++ b/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.` } diff --git a/package.json b/package.json index 3acbd7eeae..605a293f27 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a61405deb8..57a47c9ffe 100644 --- a/pnpm-lock.yaml +++ b/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 - 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) + 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) 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): diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000000..be776c5610 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; + +export default { + preprocess: vitePreprocess() +}; diff --git a/tsconfig.json b/tsconfig.json index a99a2d0728..7165d111ca 100644 --- a/tsconfig.json +++ b/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/**/*",