Repository navigation
refactor: frontend on SvelteKit 3 with adapter-static and Vite - #330
Merged
Merged
Conversation
SvelteKit's router, layout guards, error page and svelte:head replace the svelte5-router setup, main.ts, App.svelte, the error store and meta.ts; Vite replaces the Rollup config and its hand-written dev server. Imports move to package.json subpath imports since SvelteKit 3 dropped $lib. The CSP is a meta tag Kit hashes into 200.html, so nginx stops injecting nonces, and the generated schemas use zod/mini, which never probes eval. Dropping the global error handlers stops a failed API call in a click handler from replacing the app. Closes #325 Closes #291
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configuration
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
documentation
…oute files openapi-ts reads tsconfig.json, which extends the $app/tsconfig that only svelte-kit sync writes, so the Generated API job failed on a clean install. Also use replaceAll and .at() now that the tsconfig targets ESNext, and test the root layout, the guard layouts and the /admin redirect.
|
HardMax71
added a commit
that referenced
this pull request
Oct 11, 2026
…once (#332) CodeMirror injects its theme as a <style> tag in the document head, and the meta CSP from #330 blocks it, so the editor renders with no gutter and no highlighting. 200.html now carries a nonce placeholder in style-src-elem and in a csp-nonce meta tag, nginx swaps in $request_id per response, and the editor passes it to EditorView.cspNonce, as it did before #330. A Playwright test checks the gutter layout and fails on any CSP violation; it fails on main and passes here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #325, step 2 of #328. Closes #291.
The frontend now runs on SvelteKit 3 with adapter-static on Vite 8. That replaces the Rollup config with its hand-written HTTPS dev server and proxy,
@mateothegreat/svelte5-router, main.ts and App.svelte. The app stays a client-rendered SPA: the root+layout.tssetsssr = false, and nginx serves the200.htmlfallback for every path that isn't a file.Pages are
+page.sveltefiles undersrc/routes/. The login and admin checks areloadfunctions in(auth)/+layout.tsandadmin/+layout.ts, sharinglib/auth-guard.ts, so they run before a page mounts. The admin pages no longer wrap themselves in AdminLayout, sinceadmin/+layout.svelteis the sidebar now, and/adminredirects to/admin/events.<svelte:head>replacesutils/meta.ts, and page titles read "Page - Integr8sCode".+error.svelteandhandleErrorinhooks.client.tsreplace the error store and main.ts's globalonerrorandunhandledrejectionhandlers. Those handlers are what swapped the whole app for the error screen after a failed API call in a click handler (#291). Now the toast is all that happens, and the error page only shows when navigating, loading or rendering fails.SvelteKit 3 dropped the
$libalias, so imports use package.json subpath imports with explicit extensions:#lib/api/index.ts,#stores/auth.svelte.ts,#components/Header.svelte. That's a mechanical rewrite across 132 files, tests included.The CSP changes shape. SvelteKit forbids nonces on prerendered pages, so it writes the policy into
200.htmlas a<meta>tag, with a sha256 hash of its one inline bootstrap script. The directives match what nginx used to send. nginx no longer rewrites**CSP_NONCE**placeholders, and it sends onlyframe-ancestors 'none', which a meta CSP can't carry. I served the built site through the same nginx template locally and loaded it in Chrome. Every page renders, the guards redirect, and there are no CSP violations.Getting to zero meant switching the generated schemas to
zod/mini. Classic Zod probesnew Functionwhile it builds a schema, and since #329 that has logged a blocked-eval violation on every page load. Mini never tries. It ships no message locale, sofirstIssuenow words type errors itself.Also: Tailwind runs through
@tailwindcss/viteand the PostCSS chain is gone, the logger readsimport.meta.env.DEV, and the Dockerfile copiesbuild/. Rollup and its plugins, svelte-preprocess, express, http-proxy, sirv-cli and the router are uninstalled.Tests mock
$app/navigationinstead of the router. The AdminLayout test mocks$app/state, the meta spies becamedocument.titlechecks, and the guards, the error page and the client hooks have their own tests.Checked:
npm run check, lint, Stylelint, Prettier, 1137 Vitest tests with coverage above the thresholds,vite build,mkdocs build --strict, and a byte-identical client from./deploy.sh openapiplusnpm run generate:api. I couldn't build the Docker image locally, becausenpm citimed out on the network inside the build, so CI's Stack Tests run will be its first build, along with the Playwright suite.Summary by cubic
The frontend moves from Rollup with
@mateothegreat/svelte5-routerto SvelteKit 3 withadapter-staticon Vite 8, closing #325 and #291 as part of #328. The app stays a client-rendered SPA, and the new error handling fixes #291: a failed API call in a click handler now shows a toast instead of replacing the whole app with the error screen.+page.sveltefiles; auth and admin checks run asloadfunctions in(auth)/+layout.tsandadmin/+layout.tsbefore a page mounts;/adminredirects to/admin/events, and the guards and redirect now have tests.$libalias, so imports move to package.json subpath imports with explicit extensions (#lib/api/index.ts,#stores/auth.svelte.ts,#components/Header.svelte), and the build targets ESNext now that the tsconfig does.<meta>tag SvelteKit hashes into200.html; nginx now only sendsframe-ancestors 'none'.zod/mini, which never probesnew Function, removing the blocked-eval CSP violation on every page load;firstIssuenow words type errors itself.generate:apirunssvelte-kit syncfirst, sinceopenapi-tsreads the$apptsconfig only that command writes, which broke the Generated API job on a clean install.@tailwindcss/vite; Rollup, svelte-preprocess, express, http-proxy, sirv-cli and the router are removed, and the Dockerfile copiesbuild/.Written for commit cd463cf. Summary will update on new commits.