Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: exclude service worker from tsconfig again #11727

Merged
merged 2 commits into from
Mar 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/odd-masks-check.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@sveltejs/kit": patch
---

fix: exclude server worker from tsconfig again
2 changes: 1 addition & 1 deletion documentation/docs/30-advanced/40-service-workers.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const sw = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (self
const sw = self as unknown as ServiceWorkerGlobalScope;
```

This disables access to DOM typings like `HTMLElement` which are not available inside a service worker and instantiates the correct globals. The reassignment of `self` to `sw` allows you to type cast it in the process (there are a couple of ways to do this, but the easiest that requires no additional files). Use `sw` instead of `self` in the rest of the file. The reference to the SvelteKit types ensures that the `$service-worker` import has proper type definitions.
This disables access to DOM typings like `HTMLElement` which are not available inside a service worker and instantiates the correct globals. The reassignment of `self` to `sw` allows you to type cast it in the process (there are a couple of ways to do this, but this is the easiest that requires no additional files). Use `sw` instead of `self` in the rest of the file. The reference to the SvelteKit types ensures that the `$service-worker` import has proper type definitions. If you import `$env/static/public` you either have to `// @ts-ignore` the import or add `/// <reference types="../.svelte-kit/ambient.d.ts" />` to the reference types.

## Other solutions

Expand Down
11 changes: 10 additions & 1 deletion packages/kit/src/core/sync/write_tsconfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function get_tsconfig(kit) {
const config_relative = (file) => posixify(path.relative(kit.outDir, file));

const include = new Set([
'ambient.d.ts',
'ambient.d.ts', // careful: changing this name would be a breaking change, because it's referenced in the service-workers documentation
'non-ambient.d.ts',
'./types/**/$types.d.ts',
config_relative('vite.config.js'),
Expand All @@ -81,6 +81,15 @@ export function get_tsconfig(kit) {
include.add(config_relative(`${test_folder}/**/*.svelte`));

const exclude = [config_relative('node_modules/**')];
// Add service worker to exclude list so that worker types references in it don't spill over into the rest of the app
// (i.e. suddenly ServiceWorkerGlobalScope would be available throughout the app, and some types might even clash)
if (path.extname(kit.files.serviceWorker)) {
exclude.push(config_relative(kit.files.serviceWorker));
} else {
exclude.push(config_relative(`${kit.files.serviceWorker}.js`));
exclude.push(config_relative(`${kit.files.serviceWorker}.ts`));
exclude.push(config_relative(`${kit.files.serviceWorker}.d.ts`));
}

const config = {
compilerOptions: {
Expand Down