20 |
--------------------------------------------------------------------------------
/docs/content/docs/core/get-previous/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: reactivity
3 | ---
4 |
5 | # getPrevious
6 |
7 | A reactive state of a given state's previous value.
8 |
9 | It is set to `undefined` until the first change if `initial` is not set.
10 |
11 | ## Usage
12 |
13 | > [!TIP]
14 | > If you only care about the previous value when the value changes, you can use [watch](/docs/core/watch).
15 | >
16 | > It supplies the previous value in the callback.
17 |
18 | ```svelte
19 |
25 | ```
26 |
--------------------------------------------------------------------------------
/docs/content/docs/core/create-eye-dropper/Demo.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {#if eyeDropper.isSupported}
10 |
11 | Current value :
12 | {eyeDropper.current}
13 |
14 |
15 | {:else}
16 |
Your browser doesn't support the Eye Dropper API :(
29 |
--------------------------------------------------------------------------------
/packages/core/src/debounce/index.svelte.ts:
--------------------------------------------------------------------------------
1 | import { untrack } from 'svelte';
2 |
3 | type DebounceOptions = {
4 | /**
5 | * The delay in milliseconds before updating the state.
6 | * @default 1000
7 | */
8 | delay?: number;
9 | };
10 |
11 | /**
12 | * Debounces the update of the value after a delay.
13 | * @param initial The reactive value as a getter.
14 | * @param options Additional options to customize the behavior.
15 | * @see https://svelte-librarian.github.io/sv-use/docs/core/debounce
16 | */
17 | export function debounce(value: () => T, options: DebounceOptions = {}) {
18 | const { delay = 1000 } = options;
19 |
20 | let timeout: number;
21 | const _state = $state<{ current: T | undefined }>({ current: undefined });
22 |
23 | $effect(() => {
24 | value();
25 |
26 | if (timeout) {
27 | clearTimeout(timeout);
28 | }
29 |
30 | untrack(() => {
31 | timeout = setTimeout(() => {
32 | _state.current = value();
33 | }, delay) as unknown as number;
34 | });
35 |
36 | return () => {
37 | clearTimeout(timeout);
38 | };
39 | });
40 |
41 | return _state;
42 | }
43 |
--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "module": "NodeNext",
13 | "moduleResolution": "NodeNext"
14 | },
15 | "include": [
16 | "./.svelte-kit/ambient.d.ts",
17 | "./.svelte-kit/non-ambient.d.ts",
18 | "./.svelte-kit/types/**/$types.d.ts",
19 | "./vite.config.js",
20 | "./vite.config.ts",
21 | "./src/**/*.js",
22 | "./src/**/*.ts",
23 | "./src/**/*.svelte",
24 | "./content/**/*.js",
25 | "./content/**/*.ts",
26 | "./content/**/*.svelte",
27 | "./tests/**/*.js",
28 | "./tests/**/*.ts",
29 | "./tests/**/*.svelte"
30 | ],
31 | "exclude": [
32 | "./node_modules/**",
33 | "./src/service-worker.js",
34 | "./src/service-worker/**/*.js",
35 | "./src/service-worker.ts",
36 | "./src/service-worker/**/*.ts",
37 | "./src/service-worker.d.ts",
38 | "./src/service-worker/**/*.d.ts"
39 | ]
40 | }
41 |
--------------------------------------------------------------------------------
/packages/core/src/whenever/index.svelte.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it, vi } from 'vitest';
2 | import { whenever } from './index.svelte.js';
3 | import { flushSync } from 'svelte';
4 |
5 | describe("Tests 'whenever'", () => {
6 | it('Works with booleans', () => {
7 | const cleanup = $effect.root(() => {
8 | const callback = vi.fn(() => {});
9 |
10 | let isActive = $state(false);
11 |
12 | whenever(() => isActive, callback);
13 |
14 | expect(callback).not.toHaveBeenCalled();
15 |
16 | flushSync(() => {
17 | isActive = true;
18 | });
19 |
20 | expect(callback).toHaveBeenCalledOnce();
21 | });
22 |
23 | cleanup();
24 | });
25 |
26 | it('Works with comparisons', () => {
27 | const cleanup = $effect.root(() => {
28 | const callback = vi.fn(() => {});
29 |
30 | let counter = $state(1);
31 |
32 | whenever(() => counter % 2 === 0, callback);
33 |
34 | expect(callback).not.toHaveBeenCalled();
35 |
36 | flushSync(() => {
37 | counter = 2;
38 | });
39 |
40 | expect(callback).toHaveBeenCalledOnce();
41 | });
42 |
43 | cleanup();
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/packages/core/src/create-object-url/index.svelte.ts:
--------------------------------------------------------------------------------
1 | import { normalizeValue } from '../__internal__/utils.svelte.js';
2 | import type { CleanupFunction, MaybeGetter } from '../__internal__/types.js';
3 |
4 | type CreateObjectUrlReturn = {
5 | readonly current: string | null;
6 | cleanup: CleanupFunction;
7 | };
8 |
9 | /**
10 | * Creates a reactive URL representing the given object.
11 | * @param object The object to generate the url for.
12 | * @see https://svelte-librarian.github.io/sv-use/docs/create-object-url
13 | */
14 | export function createObjectUrl(
15 | object: MaybeGetter
16 | ): CreateObjectUrlReturn {
17 | let current = $state(null);
18 | const _object = $derived(normalizeValue(object));
19 |
20 | $effect(() => {
21 | if (_object) {
22 | current = URL.createObjectURL(_object);
23 | }
24 |
25 | return cleanup;
26 | });
27 |
28 | function cleanup() {
29 | if (current) {
30 | URL.revokeObjectURL(current);
31 | }
32 |
33 | current = null;
34 | }
35 |
36 | return {
37 | get current() {
38 | return current;
39 | },
40 | cleanup
41 | };
42 | }
43 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Sajidur Rahman
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/core/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Sajidur Rahman
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/content/docs/core/create-vibration/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: browser
3 | ---
4 |
5 | # createVibration
6 |
7 | Most modern mobile devices include vibration hardware, which lets software code
8 | provide physical feedback to the user by causing the device to shake.
9 |
10 | The Vibration API offers Web apps the ability to access this hardware, if it
11 | exists, and does nothing if the device doesn't support it.
12 |
13 | ## Usage
14 |
15 | Vibration is described as a pattern of on-off pulses, which may be of varying
16 | lengths.
17 |
18 | The pattern may consist of either a single integer, describing the number of
19 | milliseconds to vibrate, or an array of integers describing a pattern of
20 | vibrations and pauses.
21 |
22 | ```js
23 | import { createVibration } from '@sv-use/core';
24 |
25 | // 1. Vibrates the device for 300ms
26 | // 2. Pauses for 100ms
27 | // 3. Vibrates the device again for 200ms
28 | const vibration = createVibration({ pattern: [300, 100, 200] });
29 |
30 | // Start the vibration
31 | // It will automatically stop when the pattern is completed
32 | vibration.vibrate();
33 |
34 | // Or you can manually stop it
35 | vibration.stop();
36 | ```
37 |
--------------------------------------------------------------------------------
/docs/content/docs/core/on-hover/Demo.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
17 | {#if isHovering.current}
18 |
25 | SvelteUse is awesome
26 |
29 |
30 | {/if}
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/core/src/get-previous/index.svelte.ts:
--------------------------------------------------------------------------------
1 | import { watch } from '../watch/index.svelte.js';
2 |
3 | type GetPreviousReturn = {
4 | current: T;
5 | };
6 |
7 | /**
8 | * A reactive state of a given state's previous value.
9 | * @param getter The state as a getter function.
10 | * @note The state is `undefined` until the given state is updated for the first time.
11 | * @see https://svelte-librarian.github.io/sv-use/docs/get-previous
12 | */
13 | export function getPrevious(getter: () => T): GetPreviousReturn;
14 |
15 | /**
16 | * A reactive state of a given state's previous value.
17 | * @param getter The state as a getter function.
18 | * @param initial The initial value of the state.
19 | * @see https://svelte-librarian.github.io/sv-use/docs/get-previous
20 | */
21 | export function getPrevious(getter: () => T, initial: T): GetPreviousReturn;
22 |
23 | export function getPrevious(
24 | getter: () => T,
25 | initial: T | undefined = undefined
26 | ): GetPreviousReturn | GetPreviousReturn {
27 | const _previous = $state({ current: initial });
28 |
29 | watch(
30 | () => $state.snapshot(getter()) as T,
31 | (_, prev) => {
32 | _previous.current = prev;
33 | }
34 | );
35 |
36 | return _previous;
37 | }
38 |
--------------------------------------------------------------------------------
/docs/content/docs/core/get-clipboard-text/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: browser
3 | ---
4 |
5 | # getClipboardText
6 |
7 | Provides write (and optionally read) access to the text clipboard.
8 |
9 | ## Usage
10 |
11 | Set `options.legacyCopy: true` to keep the ability to copy if the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is not available. It will handle copy with [document.execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) as the fallback.
12 |
13 | ```svelte
14 |
22 | ```
23 |
24 | ## Examples
25 |
26 | ```svelte
27 |
36 |
37 |
32 | Value : {item.snapshot} ({new Date(item.timestamp).toLocaleTimeString()})
33 |
34 | {/each}
35 |
36 | {:else}
37 |
Empty...
38 | {/if}
39 |
40 | {/snippet}
41 |
--------------------------------------------------------------------------------
/docs/content/docs/core/watch/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: lifecycle
3 | ---
4 |
5 | # watch
6 |
7 | Triggers a callback when a dependency changes.
8 |
9 | Provides the previous value(s) as well as the current one(s) as parameters in the callback.
10 |
11 | ## Usage
12 |
13 | You can watch changes on a single value :
14 |
15 | ```svelte
16 |
25 | ```
26 |
27 | Or on multiple values by supplying an array :
28 |
29 | ```svelte
30 |
43 | ```
44 |
45 | ### onMount
46 |
47 | By default, the callback runs when the component is first mounted in the DOM,
48 | as well as when a dependency changes.
49 |
50 | You might not want that and only run when a dependency changes. You can set
51 | this in the options.
52 |
53 | ```svelte
54 |
63 | ```
64 |
--------------------------------------------------------------------------------
/packages/core/README.md:
--------------------------------------------------------------------------------
1 | # SvelteUse
2 |
3 | A collection of Svelte 5 utilities.
4 |
5 | ## Features
6 |
7 | - Feature Rich (not exactly *yet*, but we're getting there)
8 | - Complete documentation and demos
9 | - Strongly-typed with Typescript
10 | - Supports Svelte and SvelteKit (even with SSR enabled)
11 |
12 | ## Installation
13 |
14 | ```bash
15 | npm install @sv-use/core
16 | ```
17 |
18 | For more information and documentation, see the [official website](https://svelte-librarian.github.io/sv-use).
19 |
20 | ## FAQ
21 |
22 | 1. Aren't there other libraries that do this already ?
23 | Yes there are. However, most of the libraries haven't transitioned to Svelte 5.
24 | 1. Why use this one instead of [`svecosystem/runed`](https://github.com/svecosystem/runed) (or other libraries) ?
25 | 1. I wanted to make a library that had a lot of utilities to the level of [vueuse/vueuse](https://github.com/vueuse/vueuse) and/or [streamich/react-use](https://github.com/streamich/react-use). It's not there yet, but it's slowly growing.
26 | 1. I'm not a big fan of using the `use` prefix *everywhere*, especially when other verbs could be more descriptive.
27 |
28 | ## Acknowledgements
29 |
30 | Though it's not a 1:1 port, I heavily took inspiration from these libraries to adapt the library for the Svelte ecosystem :
31 |
32 | - [vueuse/vueuse](https://github.com/vueuse/vueuse)
33 | - [streamich/react-use](https://github.com/streamich/react-use)
34 | - [svecosystem/runed](https://github.com/svecosystem/runed)
35 |
--------------------------------------------------------------------------------
/docs/content/docs/core/observe-intersection/Demo.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
27 |
28 |
32 |
33 | Scroll down...
34 |
38 | i'm the target element
39 |
40 |
41 |
42 |
43 | Element
44 |
45 | {isVisible ? 'inside' : 'outside'}
46 | the viewport
47 |
48 |
49 |
--------------------------------------------------------------------------------
/packages/core/src/default-state/index.svelte.ts:
--------------------------------------------------------------------------------
1 | type DefaultStateReturn = {
2 | // ? Is there a way to have the getter be defined but the setter be nullable
3 | /**
4 | * @note Although it is typed as nullable, reading the value will never return a nullable value.
5 | *
6 | * This is to ensure that you can set a nullable value when changing the state without TS complaining.
7 | */
8 | current: T | null | undefined;
9 | };
10 |
11 | /**
12 | * A reactive state that falls back to `defaultValue` if set to `null` or `undefined`.
13 | * @param defaultValue The fallback value when the value is set to `null` or `undefined`.
14 | * @param initialValue The initial value of the state. Defaults to `defaultValue` if omitted.
15 | * @see https://svelte-librarian.github.io/sv-use/docs/core/default-state
16 | */
17 | export function defaultState(defaultValue: T, initialValue?: T): DefaultStateReturn {
18 | const _default = $state({ current: initialValue ?? defaultValue });
19 |
20 | const handler: ProxyHandler<{ current: T }> = {
21 | get(target: Record, key: string) {
22 | if (
23 | target &&
24 | typeof target === 'object' &&
25 | typeof target[key] === 'object' &&
26 | target[key] !== null
27 | ) {
28 | return new Proxy(target[key], handler);
29 | } else {
30 | return target[key];
31 | }
32 | },
33 | set(target: Record, key: string, value: unknown) {
34 | if (value || JSON.stringify(target) !== JSON.stringify($state.snapshot(_default))) {
35 | target[key] = value;
36 | } else {
37 | target[key] = defaultValue;
38 | }
39 |
40 | return true;
41 | }
42 | };
43 |
44 | return new Proxy(_default, handler);
45 | }
46 |
--------------------------------------------------------------------------------
/packages/core/src/get-document-visibility/index.svelte.ts:
--------------------------------------------------------------------------------
1 | import { handleEventListener } from '../handle-event-listener/index.svelte.js';
2 | import { noop } from '../__internal__/utils.svelte.js';
3 | import { defaultDocument, type ConfigurableDocument } from '../__internal__/configurable.js';
4 | import type { CleanupFunction } from '../__internal__/types.js';
5 |
6 | interface GetDocumentVisibilityOptions extends ConfigurableDocument {
7 | /**
8 | * Whether to auto-cleanup the event listener or not.
9 | *
10 | * If set to `true`, it must run in the component initialization lifecycle.
11 | * @default true
12 | */
13 | autoCleanup?: boolean;
14 | }
15 |
16 | type GetDocumentVisibilityReturn = {
17 | readonly current: DocumentVisibilityState;
18 | /**
19 | * Cleans up the event listener.
20 | * @note Is called automatically if `options.autoCleanup` is `true`.
21 | */
22 | cleanup: CleanupFunction;
23 | };
24 |
25 | /**
26 | * Whether the document is visible or not.
27 | * @see https://svelte-librarian.github.io/sv-use/docs/core/get-document-visibility
28 | */
29 | export function getDocumentVisibility(
30 | options: GetDocumentVisibilityOptions = {}
31 | ): GetDocumentVisibilityReturn {
32 | const { autoCleanup = true, document = defaultDocument } = options;
33 |
34 | let cleanup: CleanupFunction = noop;
35 | let _current = $state(document?.visibilityState ?? 'visible');
36 |
37 | if (document) {
38 | cleanup = handleEventListener(
39 | document,
40 | 'visibilitychange',
41 | () => (_current = document.visibilityState),
42 | { autoCleanup }
43 | );
44 | }
45 |
46 | return {
47 | get current() {
48 | return _current;
49 | },
50 | cleanup
51 | };
52 | }
53 |
--------------------------------------------------------------------------------
/packages/core/src/create-vibration/index.svelte.ts:
--------------------------------------------------------------------------------
1 | import { normalizeValue } from '../__internal__/utils.svelte.js';
2 | import { defaultNavigator, type ConfigurableNavigator } from '../__internal__/configurable.js';
3 | import type { MaybeGetter } from '../__internal__/types.js';
4 |
5 | interface CreateVibrationOptions extends ConfigurableNavigator {
6 | /**
7 | * An array of values describes alternating periods in which the device is
8 | * vibrating and not vibrating. Each value in the array is converted to an
9 | * integer, then interpreted alternately as the number of milliseconds the
10 | * device should vibrate and the number of milliseconds it should not be
11 | * vibrating.
12 | * @default []
13 | */
14 | pattern?: MaybeGetter;
15 | }
16 |
17 | type CreateVibrationReturn = {
18 | readonly isSupported: boolean;
19 | vibrate: () => void;
20 | stop: () => void;
21 | };
22 |
23 | /**
24 | * Reactive vibrate.
25 | * @param options Additional options to customize the behavior.
26 | * @see https://svelte-librarian.github.io/sv-use/docs/core/create-vibration
27 | */
28 | export function createVibration(options: CreateVibrationOptions = {}): CreateVibrationReturn {
29 | const { pattern = [], navigator = defaultNavigator } = options;
30 |
31 | const isSupported = $derived(typeof navigator !== 'undefined' && 'vibrate' in navigator);
32 | const _pattern = $derived(normalizeValue(pattern));
33 |
34 | function vibrate() {
35 | if (!isSupported) return;
36 |
37 | navigator!.vibrate(_pattern);
38 | }
39 |
40 | function stop() {
41 | if (!isSupported) return;
42 |
43 | navigator!.vibrate(0);
44 | }
45 |
46 | return {
47 | get isSupported() {
48 | return isSupported;
49 | },
50 | vibrate,
51 | stop
52 | };
53 | }
54 |
--------------------------------------------------------------------------------
/packages/core/src/whenever/index.svelte.ts:
--------------------------------------------------------------------------------
1 | import type { Arrayable, Getter } from '../__internal__/types.js';
2 | import { normalizeValue, toArray } from '../__internal__/utils.svelte.js';
3 |
4 | type WheneverOptions = {
5 | /**
6 | * Whether to run the effect on mount or not.
7 | * @default true
8 | */
9 | runOnMount?: boolean;
10 | };
11 |
12 | /**
13 | * Triggers a callback when the dependency is `true`.
14 | * @param dep The dependency to watch.
15 | * @param fn The callback to trigger when the dependency is `true`.
16 | * @param options Additional options to customize the behavior.
17 | * @see https://svelte-librarian.github.io/sv-use/docs/core/whenever
18 | */
19 | export function whenever(dep: Getter, fn: () => void, options?: WheneverOptions): void;
20 |
21 | /**
22 | * Triggers a callback when the dependencies are `true`.
23 | * @param deps The dependencies to watch.
24 | * @param fn The callback to trigger when the dependencies are `true`.
25 | * @param options Additional options to customize the behavior.
26 | * @see https://svelte-librarian.github.io/sv-use/docs/core/whenever
27 | */
28 | export function whenever(
29 | deps: Array>,
30 | fn: () => void,
31 | options?: WheneverOptions
32 | ): void;
33 |
34 | export function whenever(
35 | deps: Arrayable>,
36 | fn: () => void,
37 | options: WheneverOptions = {}
38 | ): void {
39 | const { runOnMount = true } = options;
40 |
41 | let active = runOnMount;
42 |
43 | $effect(() => {
44 | // Allows to run even with deeply nested object changes
45 | const values = $state.snapshot(toArray(deps).map(normalizeValue));
46 |
47 | if (!active) {
48 | active = true;
49 | return;
50 | }
51 |
52 | if (values.every((v) => v)) {
53 | fn();
54 | }
55 | });
56 | }
57 |
--------------------------------------------------------------------------------
/packages/core/src/get-text-direction/index.svelte.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest';
2 | import { getTextDirection } from './index.svelte.js';
3 | import { flushSync } from 'svelte';
4 |
5 | describe('getTextDirection', () => {
6 | it("has a default value of 'ltr'", () => {
7 | const cleanup = $effect.root(() => {
8 | const dir = getTextDirection({ autoCleanup: false });
9 |
10 | expect(dir.current).toBe('ltr');
11 | });
12 |
13 | cleanup();
14 | });
15 |
16 | it("takes 'initial' as default value if passed", () => {
17 | const cleanup = $effect.root(() => {
18 | const dir = getTextDirection({ initial: 'rtl', autoCleanup: false });
19 |
20 | expect(dir.current).toBe('rtl');
21 | });
22 |
23 | cleanup();
24 | });
25 |
26 | it('reflects the changes on the dom when current is set', () => {
27 | const cleanup = $effect.root(() => {
28 | const element = $state(document.createElement('div'));
29 | const dir = getTextDirection({ element: () => element, autoCleanup: false });
30 |
31 | expect(element.getAttribute('dir')).toBeNull();
32 |
33 | dir.current = 'rtl';
34 |
35 | expect(element.getAttribute('dir')).toBe('rtl');
36 | });
37 |
38 | cleanup();
39 | });
40 |
41 | it('observes the changes in the dom', () => {
42 | const cleanup = $effect.root(() => {
43 | const element = $state(document.createElement('div'));
44 | const dir = getTextDirection({ element: () => element, observe: true, autoCleanup: false });
45 |
46 | expect(dir.current).toBe('ltr');
47 | expect(element.getAttribute('dir')).toBeNull();
48 |
49 | element.setAttribute('dir', 'rtl');
50 |
51 | flushSync();
52 |
53 | expect(dir.current).toBe('rtl');
54 | expect(element.getAttribute('dir')).toBe('rtl');
55 | });
56 |
57 | cleanup();
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/docs/src/routes/ThemeHandler.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
55 |
--------------------------------------------------------------------------------
/docs/content/docs/core/on-long-press/Demo.svelte:
--------------------------------------------------------------------------------
1 |
49 |
50 |
51 |
Is long press ? {isLongPress}
52 |
Is click ? {isClick}
53 |
54 |
57 |
60 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/docs/content/docs/core/async-state/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: state
3 | ---
4 |
5 | # asyncState
6 |
7 | A reactive state that handles the loading and error states of a promise.
8 |
9 | ## Usage
10 |
11 | ```svelte
12 |
21 | ```
22 |
23 | ## Examples
24 |
25 | A basic example where you wait for the value to be resolved.
26 |
27 | ```svelte
28 |
37 |
38 | {#if recipe.isLoading}
39 |
Loading your recipe...
40 | {:else}
41 |
{JSON.stringify(recipe.current, null, 4)}
42 | {/if}
43 | ```
44 |
45 | A more advanced usage where the recipe is fetched again when the `id` changes and shows the last result before swapping instead of showing the loading tag.
46 |
47 | Note that you have to set `immediate` to `false` if you are using a function that depends on arguments for the promise parameter, and then manually call the `execute` function.
48 |
49 | ```svelte
50 |
63 |
64 | {#if !recipe.current}
65 |
34 | {@render feature(
35 | 'Feature Rich',
36 | `More than ${data.totalUtilities} utilities to choose from. (Alright, it's not that much yet...)`
37 | )}
38 | {@render feature('SSR Friendly', 'Supports SSR out of the box.')}
39 | {@render feature('Strongly typed', 'Written in Typescript for type safety.')}
40 | {@render feature('Interactive demos', 'Every function has an interactive demo.')}
41 |