From 6ce6e52439bc6a4bda8a9d27b87134ceb7bea8fe Mon Sep 17 00:00:00 2001 From: hugocasa Date: Tue, 23 Dec 2025 16:26:23 +0100 Subject: [PATCH] improve windmill-components compat with hub (#7437) --- frontend/.gitignore | 1 + frontend/package.json | 20 +++- frontend/scripts/package-system-prompts.js | 91 +++++++++++++++++++ .../lib/components/ArrayTypeNarrowing.svelte | 15 +-- .../copilot/chat/sharedChatState.svelte.ts | 18 ++-- frontend/src/lib/components/icons/index.ts | 3 +- 6 files changed, 131 insertions(+), 17 deletions(-) create mode 100644 frontend/scripts/package-system-prompts.js diff --git a/frontend/.gitignore b/frontend/.gitignore index 0366724a82..2e81ffd6f8 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -16,3 +16,4 @@ ui_builder.tar.gz ui_builder_serve/ src/lib/components/copilot/chat/__tests__/flow/results/ src/lib/components/copilot/chat/__tests__/app/results/ +.npmrc diff --git a/frontend/package.json b/frontend/package.json index 2c12e5c217..7a18b1bcc9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,7 @@ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .", - "package": "svelte-package -o package", + "package": "svelte-package -o package && node scripts/package-system-prompts.js", "generate-backend-client": "openapi-ts --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions --enums javascript --format false", "generate-backend-client-mac": "openapi-ts --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions --enums javascript", "pretest": "tsc --incremental -p tests/tsconfig.json", @@ -251,6 +251,16 @@ "svelte": "./package/components/common/tabs/Tab.svelte", "default": "./package/components/common/tabs/Tab.svelte" }, + "./components/common/toggleButton-v2/ToggleButtonGroup.svelte": { + "types": "./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte.d.ts", + "svelte": "./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte", + "default": "./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte" + }, + "./components/common/toggleButton-v2/ToggleButton.svelte": { + "types": "./package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts", + "svelte": "./package/components/common/toggleButton-v2/ToggleButton.svelte", + "default": "./package/components/common/toggleButton-v2/ToggleButton.svelte" + }, "./components/common/alert/Alert.svelte": { "types": "./package/components/common/alert/Alert.svelte.d.ts", "svelte": "./package/components/common/alert/Alert.svelte", @@ -446,6 +456,12 @@ "components/Toggle.svelte": [ "./package/components/Toggle.svelte.d.ts" ], + "components/common/toggleButton-v2/ToggleButtonGroup.svelte": [ + "./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte.d.ts" + ], + "components/common/toggleButton-v2/ToggleButton.svelte": [ + "./package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts" + ], "components/common/tabs/Tabs.svelte": [ "./package/components/common/tabs/Tabs.svelte.d.ts" ], @@ -548,4 +564,4 @@ "@rollup/rollup-linux-x64-gnu": "^4.35.0", "fsevents": "^2.3.3" } -} \ No newline at end of file +} diff --git a/frontend/scripts/package-system-prompts.js b/frontend/scripts/package-system-prompts.js new file mode 100644 index 0000000000..3379fa0f0b --- /dev/null +++ b/frontend/scripts/package-system-prompts.js @@ -0,0 +1,91 @@ +import { execSync } from 'child_process' +import { writeFileSync, mkdirSync, cpSync, existsSync, rmSync, readdirSync, readFileSync } from 'fs' +import { fileURLToPath } from 'url' +import { dirname, join, resolve, relative } from 'path' + +const __filename = fileURLToPath(import.meta.url) +const __dirname = dirname(__filename) + +const frontendDir = resolve(__dirname, '..') +const rootDir = resolve(frontendDir, '..') +const systemPromptsDir = join(rootDir, 'system_prompts', 'auto-generated') +const packageDir = join(frontendDir, 'package') +const packageSystemPromptsDir = join(packageDir, 'system_prompts') + +// Create package/system_prompts directory +if (!existsSync(packageSystemPromptsDir)) { + mkdirSync(packageSystemPromptsDir, { recursive: true }) +} + +// Create a temporary tsconfig for compiling system_prompts +const tempTsConfig = { + compilerOptions: { + target: 'ES2021', + module: 'ESNext', + moduleResolution: 'bundler', + lib: ['ES2021'], + declaration: true, + declarationMap: false, + sourceMap: false, + outDir: packageSystemPromptsDir, + rootDir: systemPromptsDir, + esModuleInterop: true, + skipLibCheck: true, + strict: false, + isolatedModules: true, + resolveJsonModule: true, + allowSyntheticDefaultImports: true + }, + include: [join(systemPromptsDir, '**/*.ts')], + exclude: ['node_modules'] +} + +const tempTsConfigPath = join(frontendDir, 'tsconfig.system-prompts.json') +writeFileSync(tempTsConfigPath, JSON.stringify(tempTsConfig, null, 2)) + +try { + // Compile TypeScript files + console.log('Compiling system_prompts...') + execSync(`npx tsc --project ${tempTsConfigPath}`, { + stdio: 'inherit', + cwd: frontendDir + }) + + console.log('system_prompts compiled and copied to package/system_prompts') + + // Rewrite imports in packaged files to use the correct path + console.log('Rewriting $system_prompts imports in packaged files...') + + function rewriteImportsInFile(filePath) { + const content = readFileSync(filePath, 'utf-8') + + // Specifically rewrite: ../../../../../../../system_prompts/auto-generated to ../../../../system_prompts + const pattern = /from\s+['"](\.\.\/){7}system_prompts\/auto-generated['"]/g + + const modified = content.replace(pattern, "from '../../../../system_prompts'") + + if (modified !== content) { + writeFileSync(filePath, modified, 'utf-8') + } + } + + function processDirectory(dir) { + const entries = readdirSync(dir, { withFileTypes: true }) + for (const entry of entries) { + const fullPath = join(dir, entry.name) + if (entry.isDirectory()) { + processDirectory(fullPath) + } else if (entry.isFile() && entry.name.endsWith('.js')) { + rewriteImportsInFile(fullPath) + } + } + } + + processDirectory(packageDir) + console.log('Finished rewriting imports') +} finally { + // Clean up temporary tsconfig + if (existsSync(tempTsConfigPath)) { + rmSync(tempTsConfigPath) + } +} diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte index 7feec29713..9c68f4523a 100644 --- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte +++ b/frontend/src/lib/components/ArrayTypeNarrowing.svelte @@ -185,13 +185,14 @@ () => { return itemsType?.properties != undefined }, - async (v) => { - await tick() - if (v) { - itemsType = { type: 'object', properties: {} } - } else { - itemsType = { type: 'object', properties: undefined } - } + (v) => { + tick().then(() => { + if (v) { + itemsType = { type: 'object', properties: {} } + } else { + itemsType = { type: 'object', properties: undefined } + } + }) } } options={{ left: 'JSON', right: 'Custom Object' }} diff --git a/frontend/src/lib/components/copilot/chat/sharedChatState.svelte.ts b/frontend/src/lib/components/copilot/chat/sharedChatState.svelte.ts index 6e083ff38b..6c94756b21 100644 --- a/frontend/src/lib/components/copilot/chat/sharedChatState.svelte.ts +++ b/frontend/src/lib/components/copilot/chat/sharedChatState.svelte.ts @@ -1,17 +1,21 @@ +import { BROWSER } from 'esm-env' + export const triggerablesByAi = $state({}) export type TriggerablesMap = Record< - string, - { - description: string - onTrigger: ((value?: string) => void) | undefined - } + string, + { + description: string + onTrigger: ((value?: string) => void) | undefined + } > export const DEFAULT_SIZE = 22 type ChatState = { - size: number + size: number } + +// we first check BROWSER before localStorage to avoid SSR issues when using Drawer in a SvelteKit app (chatState is imported in Drawer.svelte) export const chatState = $state({ - size: localStorage.getItem('ai-chat-open') === 'true' ? DEFAULT_SIZE : 0, + size: BROWSER && localStorage.getItem('ai-chat-open') === 'true' ? DEFAULT_SIZE : 0 }) diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts index cf9bcacbeb..37cebf804c 100644 --- a/frontend/src/lib/components/icons/index.ts +++ b/frontend/src/lib/components/icons/index.ts @@ -103,6 +103,7 @@ import ApifyIcon from './ApifyIcon.svelte' import McpIcon from './McpIcon.svelte' import SageIcon from './SageIcon.svelte' import ZohoIcon from './ZohoIcon.svelte' +import type { Component } from 'svelte' export const APP_TO_ICON_COMPONENT = { postgresql: PostgresIcon, mysql: Mysql, @@ -211,7 +212,7 @@ export const APP_TO_ICON_COMPONENT = { apify: ApifyIcon, mcp: McpIcon, zoho: ZohoIcon -} as const +} as unknown as Record // to generate correct svelte package types export { AirtableIcon,