feat: IsFocusWithin (#103)

Co-authored-by: CokaKoala <[email protected]>

.changeset/light-walls-sing.md

@@ -0,0 +1,5 @@
+---
+"runed": minor
+---
+
+feat: `IsFocusWithin`

packages/runed/package.json

@@ -45,26 +45,30 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0-next.1"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.5.3",
 		"@sveltejs/package": "^2.3.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@testing-library/dom": "^10.2.0",
+		"@testing-library/jest-dom": "^6.4.6",
+		"@testing-library/svelte": "^5.2.0",
+		"@testing-library/user-event": "^14.5.2",
 		"@types/node": "^20.10.6",
 		"@vitest/coverage-v8": "^1.5.1",
 		"@vitest/ui": "^1.6.0",
 		"jsdom": "^24.0.0",
 		"publint": "^0.1.9",
-		"svelte": "^5.0.0-next.130",
+		"resize-observer-polyfill": "^1.5.1",
+		"svelte": "^5.0.0-next.167",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3",
 		"vitest": "^1.5.1"
 	},
 	"dependencies": {
-		"esm-env": "^1.0.0",
-		"nanoid": "^5.0.4"
+		"esm-env": "^1.0.0"
 	}
 }

packages/runed/setupTest.ts

@@ -0,0 +1,89 @@
+import "@testing-library/svelte/vitest";
+import "@testing-library/jest-dom/vitest";
+import { vi } from "vitest";
+import type { Navigation, Page } from "@sveltejs/kit";
+import { readable } from "svelte/store";
+import type * as environment from "$app/environment";
+import type * as navigation from "$app/navigation";
+import type * as stores from "$app/stores";
+
+// Mock SvelteKit runtime module $app/environment
+vi.mock("$app/environment", (): typeof environment => ({
+	browser: false,
+	dev: true,
+	building: false,
+	version: "any",
+}));
+
+// Mock SvelteKit runtime module $app/navigation
+vi.mock("$app/navigation", (): typeof navigation => ({
+	afterNavigate: () => {},
+	beforeNavigate: () => {},
+	disableScrollHandling: () => {},
+	goto: () => Promise.resolve(),
+	invalidate: () => Promise.resolve(),
+	invalidateAll: () => Promise.resolve(),
+	preloadData: () => Promise.resolve({ type: "loaded" as const, status: 200, data: {} }),
+	preloadCode: () => Promise.resolve(),
+	onNavigate: () => {},
+	pushState: () => {},
+	replaceState: () => {},
+}));
+
+// Mock SvelteKit runtime module $app/stores
+vi.mock("$app/stores", (): typeof stores => {
+	const getStores: typeof stores.getStores = () => {
+		const navigating = readable<Navigation | null>(null);
+		const page = readable<Page>({
+			url: new URL("http://localhost"),
+			params: {},
+			route: {
+				id: null,
+			},
+			status: 200,
+			error: null,
+			data: {},
+			form: undefined,
+			state: {},
+		});
+		const updated = { subscribe: readable(false).subscribe, check: async () => false };
+
+		return { navigating, page, updated };
+	};
+
+	const page: typeof stores.page = {
+		subscribe(fn) {
+			return getStores().page.subscribe(fn);
+		},
+	};
+	const navigating: typeof stores.navigating = {
+		subscribe(fn) {
+			return getStores().navigating.subscribe(fn);
+		},
+	};
+	const updated: typeof stores.updated = {
+		subscribe(fn) {
+			return getStores().updated.subscribe(fn);
+		},
+		check: async () => false,
+	};
+
+	return {
+		getStores,
+		navigating,
+		page,
+		updated,
+	};
+});
+
+// eslint-disable-next-line ts/no-require-imports
+globalThis.ResizeObserver = require("resize-observer-polyfill");
+Element.prototype.scrollIntoView = () => {};
+// eslint-disable-next-line ts/no-explicit-any
+Element.prototype.hasPointerCapture = (() => {}) as any;
+
+// @ts-expect-error - shut it
+globalThis.window.CSS.supports = (_property: string, _value: string) => true;
+
+globalThis.document.elementsFromPoint = () => [];
+globalThis.document.elementFromPoint = () => null;

packages/runed/src/lib/test/util.svelte.ts

@@ -1,3 +1,4 @@
+import { flushSync } from "svelte";
 import { test, vi } from "vitest";
 
 export function testWithEffect(name: string, fn: () => void | Promise<void>) {
@@ -22,3 +23,9 @@ export function vitestSetTimeoutWrapper(fn: () => void, timeout: number) {
 
 	vi.advanceTimersByTime(timeout);
 }
+
+export function focus(node: HTMLElement | null | undefined) {
+	if (node) {
+		flushSync(() => node.focus());
+	}
+}

packages/runed/src/lib/utilities/IsFocusWithin/IsFocusWithin.svelte.ts

@@ -0,0 +1,21 @@
+import { extract } from "../extract/extract.js";
+import { activeElement } from "../activeElement/activeElement.svelte.js";
+import type { MaybeGetter } from "$lib/internal/types.js";
+
+/**
+ * Tracks whether the focus is within a target element.
+ * @see {@link https://runed.dev/docs/utilities/is-focus-within}
+ */
+export class IsFocusWithin {
+	#node: MaybeGetter<HTMLElement | undefined>;
+	#target = $derived.by(() => extract(this.#node));
+
+	constructor(node: MaybeGetter<HTMLElement | undefined>) {
+		this.#node = node;
+	}
+
+	readonly current = $derived.by(() => {
+		if (!this.#target || !activeElement.current) return false;
+		return this.#target.contains(activeElement.current);
+	});
+}

packages/runed/src/lib/utilities/IsFocusWithin/IsFocusWithin.test.svelte.ts

@@ -0,0 +1,49 @@
+import { render } from "@testing-library/svelte/svelte5";
+import { describe, expect, it } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+import TestIsFocusWithin from "./TestIsFocusWithin.svelte";
+import { focus } from "$lib/test/util.svelte.js";
+
+function setup() {
+	const user = userEvent.setup();
+	const result = render(TestIsFocusWithin);
+	const input = result.getByTestId("input");
+	const submit = result.getByTestId("submit");
+	const outside = result.getByTestId("outside");
+	const current = result.getByTestId("current");
+
+	return {
+		...result,
+		user,
+		input,
+		submit,
+		outside,
+		current,
+	};
+}
+
+describe("IsFocusWithin", () => {
+	it("should be false on initial render", async () => {
+		const { current } = setup();
+		expect(current).toHaveTextContent("false");
+	});
+
+	it("should be true when any child of the target is focused", async () => {
+		const { user, input, current, submit } = setup();
+		expect(current).toHaveTextContent("false");
+		await user.click(input);
+		expect(current).toHaveTextContent("true");
+		focus(submit);
+		expect(submit).toHaveFocus();
+		expect(current).toHaveTextContent("true");
+	});
+
+	it("should be false when focus leaves the target after being true", async () => {
+		const { user, input, current, outside } = setup();
+		await user.click(input);
+		expect(current).toHaveTextContent("true");
+		focus(outside);
+		expect(outside).toHaveFocus();
+		expect(current).toHaveTextContent("false");
+	});
+});

packages/runed/src/lib/utilities/IsFocusWithin/TestIsFocusWithin.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { IsFocusWithin } from "./IsFocusWithin.svelte.js";
+	let formElement = $state<HTMLElement>();
+	const focusWithinForm = new IsFocusWithin(() => formElement);
+</script>
+
+<span data-testid="current">{focusWithinForm.current}</span>
+<form bind:this={formElement}>
+	<input type="text" data-testid="input" />
+	<button data-testid="submit">btn</button>
+</form>
+<button data-testid="outside">outside</button>

packages/runed/src/lib/utilities/IsFocusWithin/index.ts

@@ -0,0 +1 @@
+export * from "./IsFocusWithin.svelte.js";

packages/runed/src/lib/utilities/MediaQuery/MediaQuery.svelte.ts

@@ -46,7 +46,7 @@ export class MediaQuery {
 	}
 
 	get matches(): boolean | undefined {
-		if ($effect.active() && !this.#effectRegistered) {
+		if ($effect.tracking() && !this.#effectRegistered) {
 			this.#matches = this.#mediaQueryList.matches;
 
 			// If we are in an effect and this effect has not been registered yet
@@ -62,7 +62,7 @@ export class MediaQuery {
 
 				return () => (this.#effectRegistered = false);
 			});
-		} else if (!$effect.active() && browser) {
+		} else if (!$effect.tracking() && browser) {
 			// Otherwise, just match media to get the current value
 			this.#matches = this.#mediaQueryList.matches;
 		}

packages/runed/src/lib/utilities/Readable/readable.svelte.ts

@@ -39,7 +39,7 @@ export class Readable<T> {
 	#stop: VoidFunction | null = null;
 
 	get current(): T {
-		if ($effect.active()) {
+		if ($effect.tracking()) {
 			$effect(() => {
 				this.#subscribers++;
 				if (this.#subscribers === 1) {

packages/runed/src/lib/utilities/activeElement/activeElement.test.svelte.ts

@@ -4,7 +4,7 @@ import { activeElement } from "./index.js";
 import { testWithEffect } from "$lib/test/util.svelte.js";
 
 // Skipping because testing is weird
-describe("useActiveElement", () => {
+describe("activeElement", () => {
 	testWithEffect("initializes with `document.activeElement`", () => {
 		expect(activeElement.current).toBe(document.activeElement);
 	});

packages/runed/src/lib/utilities/index.ts

@@ -18,3 +18,4 @@ export * from "./useMutationObserver/index.js";
 export * from "./useResizeObserver/index.js";
 export * from "./AnimationFrames/index.js";
 export * from "./useIntersectionObserver/index.js";
+export * from "./IsFocusWithin/index.js";

packages/runed/tsconfig.json

@@ -11,6 +11,18 @@
 		"strict": true,
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
-		"noUncheckedIndexedAccess": true
-	}
+		"noUncheckedIndexedAccess": true,
+		"types": ["vitest/globals"]
+	},
+	"include": [
+		"./.svelte-kit/ambient.d.ts",
+		"./.svelte-kit/non-ambient.d.ts",
+		"./.svelte-kit/types/**/$types.d.ts",
+		"./src/**/*.js",
+		"./src/**/*.ts",
+		"./src/**/*.svelte",
+		"./vite.config.ts",
+		"./svelte.config.js",
+		"./setupTest.ts"
+	]
 }

packages/runed/vite.config.ts

@@ -1,13 +1,28 @@
+import process from "node:process";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vitest/config";
+import { svelteTesting } from "@testing-library/svelte/vite";
+import type { Plugin } from "vite";
+
+const vitestBrowserConditionPlugin: Plugin = {
+	name: "vite-plugin-vitest-browser-condition",
+	configResolved({ resolve }: { resolve: { conditions: string[] } }) {
+		if (process.env.VITEST) {
+			resolve.conditions.unshift("browser");
+		}
+	},
+};
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [vitestBrowserConditionPlugin, sveltekit(), svelteTesting()],
 	test: {
 		include: ["src/**/*.{test,test.svelte,spec}.{js,ts}"],
 		environment: "jsdom",
-	},
-	resolve: {
-		conditions: ["browser"],
+		includeSource: ["src/**/*.{js,ts,svelte}"],
+		setupFiles: ["./setupTest.ts"],
+		globals: true,
+		coverage: {
+			exclude: ["./setupTest.ts"],
+		},
 	},
 });