Brunobkr/llama.cpp_AlgMor24_github

1# Svelte Toolbelt2 3Utilities for Svelte 5 that I find useful and will use in the various projects I work on. It's maintained by me, for me.4 5For more robust and feature-rich utilities, I recommend checking out/using [runed](https://runed.dev).6 7## Installation8 9```bash10npm install svelte-toolbelt11```12 13## Box14 15### `box`16 17Initializes a writable boxed state.18 19```svelte20<script lang="ts">21	import { box } from "runed";22	const count = box(0);23</script>24 25<button onclick={() => count.current++}>26	clicks: {count.current}27</button>28```29 30### `box.with`31 32Creates reactive state using getter and setter functions. If a setter function is provided, the box33is writable. If not, the box is readonly.34 35Useful for passing synced reactive values across boundaries.36 37```svelte38<script lang="ts">39	import { type WritableBox, box } from "runed";40	function useCounter(count: WritableBox<number>) {41		return {42			increment() {43				count.current++;44			},45			// We pass a box that doubles the count value46			double: box.with(() => count.current * 2)47		};48	}49	let count = $state(0);50	// We pass count to box.with so it stays in sync51	const { double, increment } = useCounter(52		box.with(53			() => count.current,54			(v) => (count = v)55		)56	);57</script>58 59<button onclick={increment}>60	clicks: {count}61	double: {double.current}62</button>63```64 65### `box.from`66 67Creates a box from an existing box, a getter function, or a static value.68 69Useful for receiving arguments that may or may not be reactive.70 71```svelte72<script lang="ts">73	import { box } from "runed";74	function useCounter(_count: WritableBox<number> | number) {75		const count = box.from(_count);76		return {77			count,78			increment() {79				count.current++;80			},81			// We pass a box that doubles the count value82			double: box.with(() => count.current * 2)83		};84	}85	const counter1 = useCounter(1);86	console.log(counter1.count.current); // 187	console.log(counter1.double.current); // 288	const counter2 = useCounter(box(2));89	console.log(counter2.count.current); // 290	console.log(counter2.double.current); // 491	function useDouble(_count: number | (() => number) | ReadableBox<number>) {92		const count = box.from(_count);93		return box.with(() => count.current * 2);94	}95	const double1 = useDouble(1);96	console.log(double1.current); // 297	const double2 = useDouble(box(2));98	console.log(double2.current); // 499	const double3 = useDouble(() => counter1.count.current);100	console.log(double3.current); // 2101</script>102```103 104### `box.flatten`105 106Transforms any boxes within an object to reactive properties, removing the need to access each107property with `.current`.108 109```ts110const count = box(1);111const flat = box.flatten({112	count,113	double: box.with(() => count.current * 2),114	increment() {115		count.current++;116	}117});118 119console.log(flat.count); // 1120console.log(flat.double); // 2121flat.increment();122console.log(flat.count); // 2123```124 125### `box.readonly`126 127Creates a readonly box from a writable box that remains in sync with the original box.128 129```ts130const count = box(1);131const readonlyCount = box.readonly(count);132console.log(readonlyCount.current); // 1133count.current++;134console.log(readonlyCount.current); // 2135 136readonlyCount.current = 3; // Error: Cannot assign to read only property 'value' of object137```138 139### `box.isBox`140 141Checks if a value is a `Box`.142 143```ts144const count = box(1);145console.log(box.isBox(count)); // true146console.log(box.isBox(1)); // false147```148 149### `box.isWritableBox`150 151Checks if a value is a `WritableBox`.152 153```ts154const count = box(1);155const double = box.with(() => count.current * 2);156console.log(box.isWritableBox(count)); // true157console.log(box.isWritableBox(double)); // false158```159 160### `unbox`161 162Unboxes the value from a box.163 164```ts165const count = box(1);166const double = box.with(() => count.current * 2);167console.log(unbox(double)); // 2168```169 170## Utils171 172### `afterSleep`173 174Executes a callback after a specified number of milliseconds.175 176```ts177afterSleep(1000, () => console.log("Hello, world!"));178```179 180### `afterTick`181 182Executes a callback after the next tick.183 184```ts185afterTick(() => console.log("Hello, world!"));186```187 188### `composeHandlers`189 190Composes event handlers into a single function that can be called with an event.191 192If the previous handler cancels the event using `event.preventDefault()`, the handlers193that follow will not be called.194 195```ts196import { composeHandlers } from "svelte-toolbelt";197const handler1 = () => console.log("Handler 1");198const handler2 = () => console.log("Handler 2");199const composedHandler = composeHandlers(handler1, handler2);200const event = new MouseEvent("click", { cancelable: true });201console.log(composedHandler(event)); // Handler 1, Handler 2202```203 204### `cssToStyleObj`205 206Converts a CSS string to a style object.207 208```ts209const css = "color: red; font-size: 16px;";210const styleObj = cssToStyleObj(css);211console.log(styleObj); // { color: "red", fontSize: "16px" }212```213 214### `executeCallbacks`215 216Executes an array of callback functions with the same arguments.217 218```ts219const callback1 = () => console.log("Callback 1");220const callback2 = () => console.log("Callback 2");221console.log(executeCallbacks(callback1, callback2)); // Callback 1, Callback 2222```223 224### `addEventListener`225 226Adds an event listener to the specified target element(s) for the given event(s), and returns a function to remove it.227 228```ts229import { addEventListener } from "svelte-toolbelt";230const target = document.getElementById("my-element");231const event = "click";232const handler = () => console.log("Clicked!");233const removeListener = addEventListener(target, event, handler);234 235// Later, remove the listener236removeListener();237```238 239### `mergeProps`240 241Merges props into a single object.242 243```ts244import { mergeProps } from "svelte-toolbelt";245const props1 = { a: 1 };246const props2 = { b: 2 };247const result = mergeProps(props1, props2);248console.log(result); // { a: 1, b: 2 }249```250 251#### Event Handlers252 253Event handlers are chained in the order they're passed. If a handler calls `event.preventDefault()`, subsequent handlers in the chain are not executed.254 255```ts256const props1 = { onclick: (e: MouseEvent) => console.log("First click") };257const props2 = { onclick: (e: MouseEvent) => console.log("Second click") };258 259const mergedProps = mergeProps(props1, props2);260mergedProps.onclick(new MouseEvent("click")); // Logs: "First click" then "Second click"261```262 263If `preventDefault()` is called:264 265```ts266const props1 = { onclick: (e: MouseEvent) => console.log("First click") };267const props2 = {268	onclick: (e: MouseEvent) => {269		console.log("Second click");270		e.preventDefault();271	}272};273const props3 = { onclick: (e: MouseEvent) => console.log("Third click") };274 275const mergedProps = mergeProps(props1, props2, props3);276mergedProps.onclick(new MouseEvent("click")); // Logs: "First click" then "Second click" only277```278 279Since `props2` called `event.preventDefault()`, `props3`'s `onclick` handler will not be called.280 281#### Non-Event Handler Functions282 283Non-event handler functions are also chained, but without the ability to prevent subsequent functions from executing:284 285```ts286const props1 = { doSomething: () => console.log("Action 1") };287const props2 = { doSomething: () => console.log("Action 2") };288 289const mergedProps = mergeProps(props1, props2);290mergedProps.doSomething(); // Logs: "Action 1" then "Action 2"291```292 293#### Classes294 295Class names are merged using [`clsx`](https://www.npmjs.com/package/clsx):296 297```ts298const props1 = { class: "text-lg font-bold" };299const props2 = { class: ["bg-blue-500", "hover:bg-blue-600"] };300 301const mergedProps = mergeProps(props1, props2);302console.log(mergedProps.class); // "text-lg font-bold bg-blue-500 hover:bg-blue-600"303```304 305#### Styles306 307Style objects and strings are merged, with later properties overriding earlier ones:308 309```ts310const props1 = { style: { color: "red", fontSize: "16px" } };311const props2 = { style: "background-color: blue; font-weight: bold;" };312 313const mergedProps = mergeProps(props1, props2);314console.log(mergedProps.style);315// "color: red; font-size: 16px; background-color: blue; font-weight: bold;"316```317 318```ts319import { mergeProps } from "bits-ui";320 321const props1 = { style: "--foo: red" };322const props2 = { style: { "--foo": "green", color: "blue" } };323 324const mergedProps = mergeProps(props1, props2);325 326console.log(mergedProps.style); // "--foo: green; color: blue;"327```328 329### `onDestroyEffect`330 331Executes a callback when a component is destroyed.332 333### `onMountEffect`334 335Executes a callback when a component is mounted.336 337### `styleToString`338 339Converts a style object to a CSS string.340 341```ts342const style = { color: "red", fontSize: "16px" };343const css = styleToString(style);344console.log(css); // "color: red; font-size: 16px;"345```346 347### `srOnlyStyles`348 349An object of styles that can be used to hide content from the DOM but still be accessible to screen readers.350 351```ts352export const srOnlyStyles: StyleProperties = {353	position: "absolute",354	width: "1px",355	height: "1px",356	padding: "0",357	margin: "-1px",358	overflow: "hidden",359	clip: "rect(0, 0, 0, 0)",360	whiteSpace: "nowrap",361	borderWidth: "0",362	transform: "translateX(-100%)"363};364```365 366### `srOnlyStylesString`367 368A string representation of `srOnlyStyles`.369 370### `useRefById`371 372Finds the node with the given boxed `id` and sets it to the boxed `ref`. Reactive using `$effect` to ensure when the `id` or `deps` change, an update is triggered and the node is re-found.373 374#### Props375 376```ts377type UseRefByIdProps = {378	/**379	 * The ID of the node to find.380	 */381	id: Box<string>;382 383	/**384	 * The ref to set the node to.385	 */386	ref: WritableBox<HTMLElement | null>;387 388	/**389	 * A reactive condition that will cause the node to be set.390	 */391	deps?: Getter<unknown>;392 393	/**394	 * A callback fired when the ref changes.395	 */396	onRefChange?: (node: HTMLElement | null) => void;397 398	/**399	 * A function that returns the root node to search for the element by ID.400	 * Defaults to `() => (typeof document !== "undefined" ? document : undefined)401	 */402	getRootNode?: Getter<Document | ShadowRoot | undefined>;403};404```405 406### `useOnChange`407 408A simple helper function to react to changes to reactive state. This is useful for syncing a read-only dependency that may change with some writable state in your app.409 410```svelte411<script lang="ts">412	import { useOnChange } from "svelte-toolbelt";413 414	let { data } = $props();415 416	let myData = $state(data);417 418	useOnChange(419		() => myData,420		(newData) => (myData = newData)421	);422</script>423```424