feat: useMounted (#22)

.changeset/fluffy-flies-bathe.md

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

.github/workflows/ci.yml

@@ -4,7 +4,11 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - '.changeset/**'
   pull_request:
+    paths-ignore:
+      - '.changeset/**'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.sha }}

packages/runed/src/lib/functions/box/box.svelte.ts

@@ -100,12 +100,12 @@ function boxWith<T>(getter: () => T, setter?: (v: T) => void) {
 
 export type BoxFrom<T> =
 	T extends WritableBox<infer U>
-	? WritableBox<U>
-	: T extends ReadableBox<infer U>
-	? ReadableBox<U>
-	: T extends Getter<infer U>
-	? ReadableBox<U>
-	: WritableBox<T>;
+		? WritableBox<U>
+		: T extends ReadableBox<infer U>
+			? ReadableBox<U>
+			: T extends Getter<infer U>
+				? ReadableBox<U>
+				: WritableBox<T>;
 
 /**
  * Creates a box from either a static value, a box, or a getter function.
@@ -131,16 +131,16 @@ type BoxFlatten<R extends Record<string, unknown>> = Expand<
 		},
 		never
 	> &
-	RemoveValues<
-		{
-			readonly [K in keyof R]: R[K] extends WritableBox<infer _>
-			? never
-			: R[K] extends ReadableBox<infer T>
-			? T
-			: never;
-		},
-		never
-	>
+		RemoveValues<
+			{
+				readonly [K in keyof R]: R[K] extends WritableBox<infer _>
+					? never
+					: R[K] extends ReadableBox<infer T>
+						? T
+						: never;
+			},
+			never
+		>
 > &
 	RemoveValues<
 		{
@@ -193,7 +193,7 @@ function boxFlatten<R extends Record<string, unknown>>(boxes: R): BoxFlatten<R>
  * const countReadonly = box.readonly(count) // ReadableBox<number>
  */
 function toReadonlyBox<T>(b: ReadableBox<T>): ReadableBox<T> {
-	if (!box.isWritableBox(b)) return b
+	if (!box.isWritableBox(b)) return b;
 
 	return {
 		[BoxSymbol]: true,

packages/runed/src/lib/functions/box/box.test.svelte.ts

@@ -141,7 +141,6 @@ describe("box.readonly", () => {
 	});
 });
 
-
 describe("box types", () => {
 	test("box without initial value", () => {
 		const count = box<number>();
@@ -189,4 +188,3 @@ describe("box types", () => {
 		expectTypeOf(readonlyCount).not.toMatchTypeOf<WritableBox<number>>();
 	});
 });
-

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

@@ -1,5 +1,6 @@
+export * from "./box/index.js";
 export * from "./useActiveElement/index.js";
 export * from "./useDebounce/index.js";
 export * from "./useElementSize/index.js";
 export * from "./useEventListener/index.js";
-export * from "./box/index.js";
+export * from "./useMounted/index.js";

packages/runed/src/lib/functions/useMounted/index.ts

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

packages/runed/src/lib/functions/useMounted/useMounted.svelte.ts

@@ -0,0 +1,16 @@
+import { untrack } from "svelte";
+import { type ReadableBox, box } from "../box/box.svelte.js";
+
+/**
+ * Returns a box with the mounted state of the component
+ * that invokes this function.
+ */
+export function useMounted(): ReadableBox<boolean> {
+	const isMounted = box(false);
+
+	$effect(() => {
+		untrack(() => (isMounted.value = true));
+	});
+
+	return box.readonly(isMounted);
+}

sites/docs/content/functions/use-mounted.md

@@ -0,0 +1,52 @@
+---
+title: useMounted
+description: A function that returns the mounted state of the component it's called in.
+---
+
+<script>
+import { UseMountedDemo } from '$lib/components/demos';
+</script>
+
+## Demo
+
+<UseMountedDemo />
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { useMounted } from "runed";
+
+	const isMounted = useMounted();
+</script>
+```
+
+Which is a shorthand for one of the following:
+
+```svelte
+<script lang="ts">
+	import { box } from "runed";
+	import { onMount } from "svelte";
+
+	const isMounted = box(false);
+
+	onMount(() => {
+		isMounted.value = true;
+	});
+</script>
+```
+
+or
+
+```svelte
+<script lang="ts">
+	import { box } from "runed";
+	import { untrack } from "svelte";
+
+	const isMounted = box(false);
+
+	$effect(() => {
+		untrack(() => (isMounted.value = true));
+	});
+</script>
+```

sites/docs/src/lib/components/demos/index.ts

@@ -2,3 +2,4 @@ export { default as UseActiveElementDemo } from "./use-active-element.svelte";
 export { default as UseDebounceDemo } from "./use-debounce.svelte";
 export { default as UseElementSizeDemo } from "./use-element-size.svelte";
 export { default as UseEventListenerDemo } from "./use-event-listener.svelte";
+export { default as UseMountedDemo } from "./use-mounted.svelte";

sites/docs/src/lib/components/demos/use-mounted.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { useMounted } from "runed";
+
+	const isMounted = useMounted();
+</script>
+
+<p>{isMounted.value ? "mounted" : "not mounted"}</p>

sites/docs/src/lib/config/navigation.ts

@@ -86,6 +86,11 @@ export const navigation: Navigation = {
 					href: "/docs/functions/use-event-listener",
 					items: [],
 				},
+				{
+					title: "useMounted",
+					href: "/docs/functions/use-mounted",
+					items: [],
+				},
 			],
 		},
 	],