From e0702bea7d323c56e18e4d18aff18d62069c1eb1 Mon Sep 17 00:00:00 2001 From: Felix Kling Date: Thu, 8 Aug 2024 16:18:29 +0200 Subject: [PATCH] build(svelte): Build Svelte app with enterprise runset (#64355) Fixes srch-867 This commit adds a new command, `web-sveltekit-prod`, which simplies builds the SvelteKit app and exits. This command is now run by default when using `sg start`, so the assets will be available locally. Note however that the build process is quite slow, which is why I didn't make it rebuild on file changes. Using the vite dev server, e.g. via `sg start enterprise-sveltekit`, delivers a much better experience. To make the integration a bit more ergonomic, I made additional changes: - When run via `sg` (determined by checking `DEPLOY_TYPE`) compiler warnings are not printed. That reduces noise in the `sg` output. - I made similar changes to the svelte check bazel target to make it easier to spot actuall errors (warnings are still important to fix but since they don't cause the target to fail they just make it difficult to spot the actual error). - Since I finally found out about the `onwarn` handler, I made it so that warnings about missing declarations are ignored. These warnings occur for every icon because the Svelte compiler doesn't respect ambient d.ts files. - And since I made icon warning related changes I also documented a bit how icons work in the app. ## Test plan - `sg start` runs the `web-sveltekit-prod` command and the Svelte app is served when going to `https://sourcegraph.test:3443/search`. - The output of `bazel test //client/web-sveltekit:svelte-check` now only contains errors. - The output of `pnpm dev` (vite devserver) shows warnings that are not related to icons. --- client/web-sveltekit/BUILD.bazel | 8 ++++---- client/web-sveltekit/README.md | 28 +++++++++++++++++++++++++++ client/web-sveltekit/package.json | 1 + client/web-sveltekit/svelte.config.js | 14 +++++++++++--- sg.config.yaml | 17 ++++++++++++---- 5 files changed, 57 insertions(+), 11 deletions(-) diff --git a/client/web-sveltekit/BUILD.bazel b/client/web-sveltekit/BUILD.bazel index 814f1707b67..671577c88c3 100644 --- a/client/web-sveltekit/BUILD.bazel +++ b/client/web-sveltekit/BUILD.bazel @@ -328,10 +328,10 @@ svelte_check.svelte_check_test( args = [ "--tsconfig", "tsconfig.json", - "--compiler-warnings", - # missing-declaration is raised for our icon components. The Svelte compiler - # does not take into account ambient declarations (will be fixed in Svelte 5). - "missing-declaration:ignore", + # This causes only errors to be displayed, which is what we want + # to keep noise down in CI + "--threshold", + "error", ], chdir = package_name(), data = SRCS + BUILD_DEPS + CONFIGS + [ diff --git a/client/web-sveltekit/README.md b/client/web-sveltekit/README.md index 22d88937c32..72ef8a385e9 100644 --- a/client/web-sveltekit/README.md +++ b/client/web-sveltekit/README.md @@ -123,6 +123,34 @@ This noise can be avoided by running the corresponding bazel command instead: bazel test //client/web-sveltekit:svelte-check ``` +### Icons + +We use [unplugin-icons](https://github.com/unplugin/unplugin-icons) together +with [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import) +to manage icons. This allows us to use icons from multiple icon sets without +having to import them manually. + +For a list of currently available icon sets see the `@iconify-json/*` packages +in the `package.json` file. + +Icon references have the form `I`. For example the +[corner down left arrow from Lucide](https://lucide.dev/icons/corner-down-left) +can be referenced as `ILucideCornerDownLeft`. + +The icon reference is then used in the `Icon` component. Note that the icon +doesn't have to be imported manually. + +```svelte + + + +``` + +When the development server is running, the icon will be automatically added to +`auto-imports.d.ts` so TypeScript knows about it. + ### Data loading with GraphQL This project makes use of query composition, i.e. components define their own diff --git a/client/web-sveltekit/package.json b/client/web-sveltekit/package.json index 03a5fd5b49d..0f518033c48 100644 --- a/client/web-sveltekit/package.json +++ b/client/web-sveltekit/package.json @@ -8,6 +8,7 @@ "build": "vite build", "build:preview": "vite build --mode=preview", "build:watch": "vite build --watch", + "build:enterprise": "DEPLOY_TYPE=dev vite build", "preview": "vite preview", "install:browsers": "playwright install", "test": "DISABLE_APP_ASSETS_MOCKING=true playwright test", diff --git a/client/web-sveltekit/svelte.config.js b/client/web-sveltekit/svelte.config.js index 0e6250ad2b7..1527e12985a 100644 --- a/client/web-sveltekit/svelte.config.js +++ b/client/web-sveltekit/svelte.config.js @@ -55,9 +55,6 @@ if (process.env.BAZEL || process.env.DEPLOY_TYPE === 'dev') { /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://github.com/sveltejs/svelte-preprocess - // for more information about preprocessors - //preprocess: preprocess(), // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: vitePreprocess(), @@ -69,6 +66,17 @@ const config = { }, }, + onwarn: (warning, defaultHandler) => { + // When run as part of sg, don't show any warnings to keep the noise down + if (process.env.DEPLOY_TYPE === 'dev') return + + // The Svelte compiler doesn't seem to respect ambient declarations, and thus + // emits warnings about missing declarations for our icon variables. + // We can safely ignore these warnings, TypeScript will catch any actual errors. + if (warning.code === 'missing-declaration') return + defaultHandler(warning) + }, + kit: { adapter, appDir, diff --git a/sg.config.yaml b/sg.config.yaml index 82dfa79aa4f..f353561c3d6 100644 --- a/sg.config.yaml +++ b/sg.config.yaml @@ -522,11 +522,19 @@ commands: # Needed so that node can ping the caddy server NODE_TLS_REJECT_UNAUTHORIZED: 0 - web-sveltekit: - description: Enterprise version of the web sveltekit app + web-sveltekit-prod: + description: Builds the production version of the SvelteKit app + cmd: pnpm --filter @sourcegraph/web-sveltekit build + install: | + pnpm install + pnpm run generate + + web-sveltekit-server: + description: Starts the vite dev server for the SvelteKit app cmd: pnpm --filter @sourcegraph/web-sveltekit dev install: | pnpm install + pnpm run generate env: # The SvelteKit app uses this environment variable to determine where # to store the generated assets. We don't need to store them in a different @@ -1545,6 +1553,7 @@ commandsets: - worker - repo-updater - web + - web-sveltekit-prod - gitserver-0 - gitserver-1 - searcher @@ -1573,7 +1582,7 @@ commandsets: - worker - repo-updater - web - - web-sveltekit + - web-sveltekit-server - gitserver-0 - gitserver-1 - searcher @@ -1985,7 +1994,7 @@ commandsets: web-sveltekit-standalone: commands: - - web-sveltekit + - web-sveltekit-server - caddy env: SK_PORT: 3080