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

@@ -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 + [

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<IconSetName><IconName>`. 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
+<script lang="ts">
+  import { Icon } from '$lib/Icon.svelte';
+</script>
+
+<Icon icon={ILucideCornerDownLeft} />
+```
+
+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

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",

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,

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