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