chore: update moduleResolution to NodeNext (#63)

.changeset/cyan-forks-poke.md

@@ -0,0 +1,5 @@
+---
+"mode-watcher": patch
+---
+
+Update `moduleResolution` to `NodeNext`

packages/mode-watcher/package.json

@@ -37,9 +37,10 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"@testing-library/dom": "^9.3.3",
 		"@testing-library/jest-dom": "^6.1.4",
@@ -62,8 +63,8 @@
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^0.32.2"
+		"vite": "^5.0.0",
+		"vitest": "^1.0.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",

packages/mode-watcher/scripts/setupTest.ts

@@ -28,9 +28,16 @@ vi.mock('$app/navigation', (): typeof navigation => ({
 	goto: () => Promise.resolve(),
 	invalidate: () => Promise.resolve(),
 	invalidateAll: () => Promise.resolve(),
-	preloadData: () => Promise.resolve(),
+	preloadData: () =>
+		Promise.resolve({
+			data: {},
+			type: 'loaded',
+			status: 200,
+		}),
 	preloadCode: () => Promise.resolve(),
 	onNavigate: () => {},
+	pushState: () => {},
+	replaceState: () => {},
 }));
 
 // Mock SvelteKit runtime module $app/stores
@@ -47,6 +54,7 @@ vi.mock('$app/stores', (): typeof stores => {
 			error: null,
 			data: {},
 			form: undefined,
+			state: {},
 		});
 		const updated = { subscribe: readable(false).subscribe, check: async () => false };
 

packages/mode-watcher/src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { modes } from './stores';
+import type { modes } from './stores.js';
 
 export type Mode = (typeof modes)[number];
 export type ThemeColors = { dark: string; light: string } | undefined;

packages/mode-watcher/src/routes/+page.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { toggleMode, setMode, resetMode, userPrefersMode, systemPrefersMode, mode } from '$lib';
+	import {
+		toggleMode,
+		setMode,
+		resetMode,
+		userPrefersMode,
+		systemPrefersMode,
+		mode,
+	} from '$lib/index.js';
 
 	import { derived } from 'svelte/store';
 	import { browser } from '$app/environment';

packages/mode-watcher/src/tests/Mode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ModeWatcher, toggleMode, setMode, resetMode, mode } from '$lib';
+	import { ModeWatcher, toggleMode, setMode, resetMode, mode } from '$lib/index.js';
 
 	export let track = true;
 </script>

packages/mode-watcher/src/tests/StealthMode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ModeWatcher, toggleMode, setMode, resetMode } from '$lib';
+	import { ModeWatcher, toggleMode, setMode, resetMode } from '$lib/index.js';
 
 	export let track = true;
 </script>

packages/mode-watcher/src/tests/mode.spec.ts

@@ -2,19 +2,25 @@ import { render } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
 import Mode from './Mode.svelte';
 import StealthMode from './StealthMode.svelte';
-import userEvent from '@testing-library/user-event';
-import { mediaQueryState } from '../../scripts/setupTest';
+import { userEvent } from '@testing-library/user-event';
+import { mediaQueryState } from '../../scripts/setupTest.js';
 import { tick } from 'svelte';
 
+function setup() {
+	const user = userEvent.setup();
+	const returned = render(Mode);
+	return { user, ...returned };
+}
+
 it('renders mode', async () => {
-	const { container } = render(Mode);
+	const { container } = setup();
 	const rootEl = container.parentElement;
 	const classes = getClasses(rootEl);
 	expect(classes).toContain('dark');
 });
 
 it('toggles the mode', async () => {
-	const { container, getByTestId } = render(Mode);
+	const { container, getByTestId, user } = setup();
 	const rootEl = container.parentElement;
 
 	const classes = getClasses(rootEl);
@@ -24,14 +30,14 @@ it('toggles the mode', async () => {
 	expect(colorScheme).toBe('dark');
 	expect(themeColor).toBe('black');
 	const toggle = getByTestId('toggle');
-	await userEvent.click(toggle);
+	await user.click(toggle);
 	const classes2 = getClasses(rootEl);
 	const colorScheme2 = getColorScheme(rootEl);
 	const themeColor2 = getThemeColor(rootEl);
 	expect(classes2).not.toContain('dark');
 	expect(colorScheme2).toBe('light');
 	expect(themeColor2).toBe('white');
-	await userEvent.click(toggle);
+	await user.click(toggle);
 	const classes3 = getClasses(rootEl);
 	const colorScheme3 = getColorScheme(rootEl);
 	const themeColor3 = getThemeColor(rootEl);
@@ -41,7 +47,7 @@ it('toggles the mode', async () => {
 });
 
 it('allows the user to set the mode', async () => {
-	const { container, getByTestId } = render(Mode);
+	const { container, getByTestId, user } = setup();
 	const rootEl = container.parentElement;
 	const classes = getClasses(rootEl);
 	const colorScheme = getColorScheme(rootEl);
@@ -50,7 +56,7 @@ it('allows the user to set the mode', async () => {
 	expect(colorScheme).toBe('dark');
 	expect(themeColor).toBe('black');
 	const light = getByTestId('light');
-	await userEvent.click(light);
+	await user.click(light);
 	const classes2 = getClasses(rootEl);
 	const colorScheme2 = getColorScheme(rootEl);
 	const themeColor2 = getThemeColor(rootEl);
@@ -59,7 +65,7 @@ it('allows the user to set the mode', async () => {
 	expect(themeColor2).toBe('white');
 
 	const dark = getByTestId('dark');
-	await userEvent.click(dark);
+	await user.click(dark);
 	const classes3 = getClasses(rootEl);
 	const colorScheme3 = getColorScheme(rootEl);
 	const themeColor3 = getThemeColor(rootEl);
@@ -69,7 +75,7 @@ it('allows the user to set the mode', async () => {
 });
 
 it('keeps the mode store in sync with current mode', async () => {
-	const { container, getByTestId } = render(Mode);
+	const { container, getByTestId, user } = setup();
 	const rootEl = container.parentElement;
 	const light = getByTestId('light');
 	const dark = getByTestId('dark');
@@ -82,7 +88,7 @@ it('keeps the mode store in sync with current mode', async () => {
 	expect(themeColor).toBe('black');
 	expect(mode.textContent).toBe('dark');
 
-	await userEvent.click(light);
+	await user.click(light);
 	const classes2 = getClasses(rootEl);
 	const colorScheme2 = getColorScheme(rootEl);
 	const themeColor2 = getThemeColor(rootEl);
@@ -91,7 +97,7 @@ it('keeps the mode store in sync with current mode', async () => {
 	expect(themeColor2).toBe('white');
 	expect(mode.textContent).toBe('light');
 
-	await userEvent.click(dark);
+	await user.click(dark);
 	const classes3 = getClasses(rootEl);
 	const colorScheme3 = getColorScheme(rootEl);
 	const themeColor3 = getThemeColor(rootEl);
@@ -102,7 +108,7 @@ it('keeps the mode store in sync with current mode', async () => {
 });
 
 it('resets the mode to system preferences', async () => {
-	const { container, getByTestId } = render(Mode);
+	const { container, getByTestId, user } = setup();
 	const rootEl = container.parentElement;
 	const light = getByTestId('light');
 	const reset = getByTestId('reset');
@@ -115,7 +121,7 @@ it('resets the mode to system preferences', async () => {
 	expect(themeColor).toBe('black');
 	expect(mode.textContent).toBe('dark');
 
-	await userEvent.click(light);
+	await user.click(light);
 	const classes2 = getClasses(rootEl);
 	const colorScheme2 = getColorScheme(rootEl);
 	const themeColor2 = getThemeColor(rootEl);
@@ -124,7 +130,7 @@ it('resets the mode to system preferences', async () => {
 	expect(themeColor2).toBe('white');
 	expect(mode.textContent).toBe('light');
 
-	await userEvent.click(reset);
+	await user.click(reset);
 	const classes3 = getClasses(rootEl);
 	const colorScheme3 = getColorScheme(rootEl);
 	const themeColor3 = getThemeColor(rootEl);
@@ -135,7 +141,7 @@ it('resets the mode to system preferences', async () => {
 });
 
 it('tracks changes to system preferences', async () => {
-	const { container, getByTestId } = render(Mode);
+	const { container, getByTestId } = setup();
 	const rootEl = container.parentElement;
 	const mode = getByTestId('mode');
 	const classes = getClasses(rootEl);
@@ -171,7 +177,7 @@ it('tracks changes to system preferences', async () => {
 });
 
 it('stops tracking changes to system preferences when user sets a mode', async () => {
-	const { container, getByTestId } = render(Mode);
+	const { container, getByTestId, user } = setup();
 	const rootEl = container.parentElement;
 	const light = getByTestId('light');
 	const reset = getByTestId('reset');
@@ -207,7 +213,7 @@ it('stops tracking changes to system preferences when user sets a mode', async (
 	expect(themeColor3).toBe('black');
 	expect(mode.textContent).toBe('dark');
 
-	await userEvent.click(light);
+	await user.click(light);
 	const classes4 = getClasses(rootEl);
 	const colorScheme4 = getColorScheme(rootEl);
 	const themeColor4 = getThemeColor(rootEl);
@@ -238,7 +244,7 @@ it('stops tracking changes to system preferences when user sets a mode', async (
 	expect(themeColor6).toBe('white');
 	expect(mode.textContent).toBe('light');
 
-	await userEvent.click(reset);
+	await user.click(reset);
 	const classes7 = getClasses(rootEl);
 	const colorScheme7 = getColorScheme(rootEl);
 	const themeColor7 = getThemeColor(rootEl);
@@ -285,6 +291,7 @@ it('does not track changes to system preference when track prop is set to false'
 });
 
 it('also works when $mode is not used in the current page', async () => {
+	const user = userEvent.setup();
 	const { container, getByTestId } = render(StealthMode);
 	const rootEl = container.parentElement;
 
@@ -295,14 +302,14 @@ it('also works when $mode is not used in the current page', async () => {
 	expect(colorScheme).toBe('dark');
 	expect(themeColor).toBe('black');
 	const toggle = getByTestId('toggle');
-	await userEvent.click(toggle);
+	await user.click(toggle);
 	const classes2 = getClasses(rootEl);
 	const colorScheme2 = getColorScheme(rootEl);
 	const themeColor2 = getThemeColor(rootEl);
 	expect(classes2).not.toContain('dark');
 	expect(colorScheme2).toBe('light');
 	expect(themeColor2).toBe('white');
-	await userEvent.click(toggle);
+	await user.click(toggle);
 	const classes3 = getClasses(rootEl);
 	const colorScheme3 = getColorScheme(rootEl);
 	const themeColor3 = getThemeColor(rootEl);

packages/mode-watcher/svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

packages/mode-watcher/tsconfig.json

@@ -9,6 +9,7 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "Bundler"
+		"moduleResolution": "NodeNext",
+		"module": "NodeNext"
 	}
 }