better

huntabyte · Sep 21, 2024 · 097500c · 097500c
1 parent f340b5b
commit 097500c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 66 deletions.
diff --git a/sites/docs/src/lib/cmdk/command-state.svelte.ts b/sites/docs/src/lib/cmdk/command-state.svelte.ts
@@ -11,8 +11,6 @@ import { isUndefined, kbd } from "$lib/internal/index.js";
 import { createContext } from "$lib/internal/createContext.js";
 import { findNextSibling, findPreviousSibling } from "$lib/internal/helpers/siblings.js";
 import { sleep } from "$lib/internal/helpers/sleep.js";
-import { type ScheduleEffect, useScheduleEffect } from "$lib/internal/useScheduledEffect.svelte.js";
-import { useLazyBox } from "$lib/internal/useLazyBox.svelte.js";
 import { afterSleep } from "$lib/internal/helpers/afterSleep.js";
 
 export const LIST_SELECTOR = `[data-cmdk-list-sizer]`;
@@ -63,7 +61,6 @@ class CommandRootState {
 	state = $state.raw<State>(null!);
 	// internal state that we mutate in batches and publish to the `state` at once
 	#state = $state<State>(null!);
-	schedule: ScheduleEffect;
 	snapshot = () => this.#state;
 	setState: SetState = (key, value, opts) => {
 		if (Object.is(this.#state[key], value)) return;
@@ -73,12 +70,12 @@ class CommandRootState {
 			// Filter synchronously before emitting back to children
 			this.#filterItems();
 			this.#sort();
-			this.schedule(1, this.#selectFirstItem);
+			this.#selectFirstItem();
 		} else if (key === "value") {
 			// opts is a boolean referring to whether it should NOT be scrolled into view
 			if (!opts) {
 				// Scroll the selected item into view
-				this.schedule(5, this.#scrollSelectedIntoView);
+				this.#scrollSelectedIntoView();
 			}
 		}
 		// notify subscribers that the state has changed
@@ -112,16 +109,14 @@ class CommandRootState {
 		this.#state = defaultState;
 		this.state = defaultState;
 
-		this.schedule = useScheduleEffect();
-
 		useRefById({
 			id: this.id,
 			ref: this.ref,
 		});
 
 		$effect(() => {
 			untrack(() => {
-				this.schedule(6, this.#scrollSelectedIntoView);
+				this.#scrollSelectedIntoView();
 			});
 		});
 	}
@@ -330,10 +325,8 @@ class CommandRootState {
 		if (value === this.allIds.get(id)?.value) return;
 		this.allIds.set(id, { value, keywords });
 		this.#state.filtered.items.set(id, this.#score(value, keywords));
-		this.schedule(2, () => {
-			this.#sort();
-			this.emit();
-		});
+		this.#sort();
+		this.emit();
 	};
 
 	registerItem = (id: string, groupId: string | undefined) => {
@@ -350,17 +343,15 @@ class CommandRootState {
 
 		// Batch this, multiple items can mount in one pass
 		// and we should not be filtering/sorting/emitting each time
-		this.schedule(3, () => {
-			this.#filterItems();
-			this.#sort();
+		this.#filterItems();
+		this.#sort();
 
-			// Could be initial mount, select the first item if none already selected
-			if (!this.#state.value) {
-				this.#selectFirstItem();
-			}
+		// Could be initial mount, select the first item if none already selected
+		if (!this.#state.value) {
+			this.#selectFirstItem();
+		}
 
-			this.emit();
-		});
+		this.emit();
 
 		return () => {
 			this.allIds.delete(id);
@@ -371,15 +362,13 @@ class CommandRootState {
 			this.#filterItems();
 
 			// Batch this, multiple items could be removed in one pass
-			this.schedule(4, () => {
-				this.#filterItems();
+			this.#filterItems();
 
-				// The item removed have been the selected one,
-				// so selection should be moved to the first
-				if (selectedItem?.getAttribute("id") === id) this.#selectFirstItem();
+			// The item removed have been the selected one,
+			// so selection should be moved to the first
+			if (selectedItem?.getAttribute("id") === id) this.#selectFirstItem();
 
-				this.emit();
-			});
+			this.emit();
 		};
 	};
 

diff --git a/sites/docs/src/lib/internal/useLazyBox.svelte.ts b/sites/docs/src/lib/internal/useLazyBox.svelte.ts
diff --git a/sites/docs/src/lib/internal/useScheduledEffect.svelte.ts b/sites/docs/src/lib/internal/useScheduledEffect.svelte.ts
diff --git a/sites/docs/src/routes/sink/+page.svelte b/sites/docs/src/routes/sink/+page.svelte
@@ -1,25 +1,32 @@
 <script lang="ts">
-	import { Command } from '$lib/index.js';
+	import { Command } from "$lib/index.js";
 
 	// prettier-ignore
 	const ten_first_names = ["John", "Doe", "Jane", "Smith", "Michael", "Brown", "William", "Johnson", "David", "Williams"];
 	// prettier-ignore
 	const ten_middle_names = ["James", "Lee", "Robert", "Michael", "David", "Joseph", "Thomas", "Charles", "Christopher", "Daniel"];
 	// prettier-ignore
 	const ten_last_names = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez"];
+	// prettier-ignore
+	const ten_second_first_names = [ "Emma", "Liam", "Sophia", "Noah", "Olivia", "Ethan", "Ava", 	"Mason", "Isabella", "William"];
 
 	const names = ten_first_names
 		.map((first) => {
 			return ten_middle_names.map((middle) => {
 				return ten_last_names.map((last) => {
-					return `${first} ${middle} ${last}`;
+					return ten_second_first_names.map((second) => {
+						return `${first} ${second} ${middle} ${last}`;
+					});
 				});
 			});
 		})
-		.flat(2)
-		.slice(500);
+		.flat(3)
+		.slice(0, 3000);
 </script>
 
+<div>
+	Total items: {names.length}
+</div>
 <div style:padding="16px">
 	<Command.Root loop>
 		<Command.Input placeholder="Search items..." />