Fix active element (#55)

* rename debounced (#52)

* fix active element

* add changeset

* optimize activeElement

* fix lint

* refactor readable a bit

.changeset/mighty-jars-thank.md

@@ -0,0 +1,5 @@
+---
+"runed": patch
+---
+
+fix active element not being up to date outside effects

packages/runed/src/lib/internal/utils/function.ts

@@ -0,0 +1,3 @@
+export function noop() {
+	// noop
+}

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

@@ -1,6 +1,10 @@
 import { tick } from "svelte";
+import { noop } from "$lib/internal/utils/function.js";
 
-export type StartNotifier<TValue> = (set: (value: TValue) => void) => VoidFunction;
+export type StartNotifier<TValue> = (
+	set: (value: TValue) => void,
+	insideEffect: boolean
+) => void | VoidFunction;
 
 /**
  * A class that contains a reactive `current` property
@@ -40,7 +44,7 @@ export class Readable<TValue> {
 			$effect(() => {
 				this.#subscribers++;
 				if (this.#subscribers === 1) {
-					this.#subscribe();
+					this.#subscribe(true);
 				}
 
 				return () => {
@@ -52,21 +56,23 @@ export class Readable<TValue> {
 					});
 				};
 			});
+		} else if (this.#subscribers === 0) {
+			this.#subscribe(false);
+			this.#unsubscribe();
 		}
 
 		return this.#current;
 	}
 
-	#subscribe() {
-		this.#stop = this.#start((value) => {
-			this.#current = value;
-		});
+	#subscribe(inEffect: boolean) {
+		this.#stop =
+			this.#start((value) => {
+				this.#current = value;
+			}, inEffect) ?? null;
 	}
 
 	#unsubscribe() {
-		if (this.#stop === null) {
-			return;
-		}
+		if (this.#stop === null) return;
 
 		this.#stop();
 		this.#stop = null;

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

@@ -6,10 +6,15 @@ import { Readable } from "../Readable/readable.svelte.js";
  *
  * @see {@link https://runed.dev/docs/utilities/use-active-element}
  */
-export const activeElement = new Readable<Element | null>(null, (set) => {
+export const activeElement = new Readable<Element | null>(null, (set, insideEffect) => {
 	function update() {
 		set(document.activeElement);
 	}
+
+	update();
+
+	if (!insideEffect) return;
+
 	document.addEventListener("focusin", update);
 	document.addEventListener("focusout", update);
 

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.skip("useActiveElement", () => {
+describe("useActiveElement", () => {
 	testWithEffect("initializes with `document.activeElement`", () => {
 		expect(activeElement.current).toBe(document.activeElement);
 	});