Release v2

docs/content/docs/core/async-state/index.md

@@ -8,31 +8,29 @@ A reactive state that handles the loading and error states of a promise.
 
 ## Usage
 
-```svelte
-<script>
-	import { asyncState } from '@sv-use/core';
+```ts
+import { asyncState } from '@sv-use/core';
 
-	const recipe = asyncState(
-		fetch(`https://dummyjson.com/recipes/1`)
-            .then((res) => res.json()),
-		null
-	);
-</script>
+const recipe = asyncState(() => {
+    const result = fetch(`https://dummyjson.com/recipes/1`);
+
+    return result.json();
+}, null );
 ```
 
-## Examples
+### Examples
 
 A basic example where you wait for the value to be resolved.
 
 ```svelte
 <script>
 	import { asyncState } from '@sv-use/core';
 
-	const recipe = asyncState(
-		fetch(`https://dummyjson.com/recipes/1`)
-            .then((res) => res.json()),
-		null
-	);
+	const recipe = asyncState(() => {
+		const result = fetch(`https://dummyjson.com/recipes/1`);
+
+        return result.json();
+    }, null );
 </script>
 
 {#if recipe.isLoading}
@@ -52,8 +50,9 @@ Note that you have to set `immediate` to `false` if you are using a function tha
 
 	let id = $state(1);
 	const recipe = asyncState((id) => {
-        return fetch(`https://dummyjson.com/recipes/${id}`)
-                .then((res) => res.json());
+        const result = fetch(`https://dummyjson.com/recipes/${id}`);
+
+        return result.json();
     }, null, { immediate: false });
 
 	$effect(() => {

docs/content/docs/core/auto-reset-state/index.md

@@ -8,15 +8,13 @@ A state that automatically resets to the default value after a delay.
 
 ## Usage
 
-```svelte
-<script>
-	import { autoResetState } from '@sv-use/core';
+```ts
+import { autoResetState } from '@sv-use/core';
 
-	const message = autoResetState('This is the default message', 3000);
+const message = autoResetState('This is the default message', 3000);
 
-	function changeMessage() {
-        // Changes to the default value after 3 seconds
-		message.current = 'This is the new message';
-	}
-</script>
+function changeMessage() {
+    // Changes to the default value after 3 seconds
+    message.current = 'This is the new message';
+}
 ```

docs/content/docs/core/create-eye-dropper/index.md

@@ -10,10 +10,8 @@ Using this tool, users can sample colors from their screens, including outside o
 
 ## Usage
 
-```svelte
-<script>
-	import { createEyeDropper } from '@sv-use/core';
+```ts
+import { createEyeDropper } from '@sv-use/core';
 
-	const eyeDropper = createEyeDropper();
-</script>
+const eyeDropper = createEyeDropper();
 ```

docs/content/docs/core/create-file-dialog/index.md

@@ -8,32 +8,30 @@ Creates a file dialog to interact with programatically.
 
 ## Usage
 
-```svelte
-<script>
-	import { createFileDialog } from '@sv-use/core';
+```ts
+import { createFileDialog } from '@sv-use/core';
 
-	const dialog = createFileDialog();
-</script>
+const dialog = createFileDialog();
 ```
 
 ### Examples
 
-```svelte
-<script>
-	import { createFileDialog } from '@sv-use/core';
-
-	const dialog = createFileDialog({
-		accept: 'image/*',
-		multiple: true,
-		onChange(files) {
-			console.log($state.snapshot(files));
-		},
-		onCancel() {
-			console.log('cancelled');
-		}
-	});
-</script>
+```ts
+import { createFileDialog } from '@sv-use/core';
+
+const dialog = createFileDialog({
+    accept: 'image/*',
+    multiple: true,
+    onChange(files) {
+        console.log($state.snapshot(files));
+    },
+    onCancel() {
+        console.log('cancelled');
+    }
+});
+```
 
+```svelte
 <button onclick={dialog.open}>
     Open file dialog
 </button>

docs/content/docs/core/create-share/index.md

@@ -10,12 +10,12 @@ URLs, or files.
 The available share targets depend on the device, but might include the
 clipboard, contacts and email applications, websites, Bluetooth, etc.
 
-## Usage
-
 > [!IMPORTANT]
 > To prevent abuse, it must be triggered off a UI event like a button click and
 > cannot be launched at arbitrary points by a script.
 
+## Usage
+
 ```js
 import { createShare } from '@sv-use/core';
 

docs/content/docs/core/debounce/index.md

@@ -11,11 +11,9 @@ Debounces the update of the value after a delay.
 > [!TIP]
 > If you'd rather have them combined in one variable, check out [debouncedState](/docs/core/debounced-state).
 
-```svelte
-<script>
-	import { debounce } from '@sv-use/core';
+```ts
+import { debounce } from '@sv-use/core';
 
-	let search = $state('');
-	const debouncedSearch = debounce(() => search);
-</script>
+let search = $state('');
+const debouncedSearch = debounce(() => search);
 ```

docs/content/docs/core/debounced-state/index.md

@@ -11,10 +11,8 @@ A reactive state that updates its value after a delay.
 > [!TIP]
 > If you'd rather have them separate, check out [debounce](/docs/core/debounce).
 
-```svelte
-<script>
-	import { debouncedState } from '@sv-use/core';
+```ts
+import { debouncedState } from '@sv-use/core';
 
-	const search = debouncedState('', { delay: 1000 });
-</script>
+const search = debouncedState('', { delay: 1000 });
 ```

docs/content/docs/core/default-state/index.md

@@ -13,14 +13,14 @@ A reactive state that falls back to `defaultValue` if set to `null` or `undefine
 >
 > This is to ensure that you can set a nullable value when changing the state without TS complaining.
 
-```svelte
-<script>
-    import { defaultState } from "@sv-use/core";
+```ts
+import { defaultState } from "@sv-use/core";
 
-    const message = defaultState("fallback message", "initial message");
+const message = defaultState("fallback message", "initial message");
 
-    message.current = "Hello, World!";
+// Change the value normally
+message.current = "Hello, World!";
 
-    message.current = null; // message is now "fallback message"
-</script>
+// Set the message to the fallback message
+message.current = null;
 ```

docs/content/docs/core/get-active-element/index.md

@@ -8,10 +8,8 @@ Gets the current active element in the DOM.
 
 ## Usage
 
-```svelte
-<script>
-	import { getActiveElement } from '@sv-use/core';
+```ts
+import { getActiveElement } from '@sv-use/core';
 
-	const activeElement = getActiveElement();
-</script>
+const activeElement = getActiveElement();
 ```

docs/content/docs/core/get-clipboard-text/index.md

@@ -10,15 +10,13 @@ Provides write (and optionally read) access to the text clipboard.
 
 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.
 
-```svelte
-<script>
-	import { getClipboardText } from '@sv-use/core';
+```ts
+import { getClipboardText } from '@sv-use/core';
 
-	const clipboard = getClipboardText({
-        allowRead: true,
-        legacyCopy: true
-    });
-</script>
+const clipboard = getClipboardText({
+    allowRead: true,
+    legacyCopy: true
+});
 ```
 
 ## Examples

docs/content/docs/core/get-device-motion/index.md

@@ -9,10 +9,8 @@ rotation rate.
 
 ## Usage
 
-```svelte
-<script>
-	import { getDeviceMotion } from '@sv-use/core';
+```ts
+import { getDeviceMotion } from '@sv-use/core';
 
-	const deviceMotion = getDeviceMotion();
-</script>
+const deviceMotion = getDeviceMotion();
 ```

docs/content/docs/core/get-device-orientation/index.md

@@ -9,10 +9,8 @@ device running the web page.
 
 ## Usage
 
-```svelte
-<script>
-	import { getDeviceOrientation } from '@sv-use/core';
+```ts
+import { getDeviceOrientation } from '@sv-use/core';
 
-	const deviceOrientation = getDeviceOrientation();
-</script>
+const deviceOrientation = getDeviceOrientation();
 ```

docs/content/docs/core/get-device-pixel-ratio/index.md

@@ -9,10 +9,8 @@ pixels for the current display device.
 
 ## Usage
 
-```svelte
-<script>
-	import { getDevicePixelRatio } from '@sv-use/core';
+```ts
+import { getDevicePixelRatio } from '@sv-use/core';
 
-	const devicePixelRatio = getDevicePixelRatio();
-</script>
+const devicePixelRatio = getDevicePixelRatio();
 ```

docs/content/docs/core/get-document-visibility/index.md

@@ -11,10 +11,8 @@ minimized window, or is otherwise not visible to the user.
 
 ## Usage
 
-```svelte
-<script>
-	import { getDocumentVisibility } from '@sv-use/core';
+```ts
+import { getDocumentVisibility } from '@sv-use/core';
 
-	const documentVisibility = getDocumentVisibility();
-</script>
+const documentVisibility = getDocumentVisibility();
 ```

docs/content/docs/core/get-fps/index.md

@@ -8,10 +8,8 @@ Get the current frames per second of the device.
 
 ## Usage
 
-```svelte
-<script>
-	import { getFps } from '@sv-use/core';
+```ts
+import { getFps } from '@sv-use/core';
 
-	const fps = getFps();
-</script>
+const fps = getFps();
 ```

docs/content/docs/core/get-geolocation/index.md

@@ -7,15 +7,14 @@ category: sensors
 It allows the user to provide their location to web applications if they so
 desire.
 
-For privacy reasons, the user is asked for permission to report location
-information.
+> [!IMPORTANT]
+> For privacy reasons, the user is asked for permission to report location
+> information.
 
 ## Usage
 
-```svelte
-<script>
-	import { getGeolocation } from '@sv-use/core';
+```ts
+import { getGeolocation } from '@sv-use/core';
 
-	const geolocation = getGeolocation();
-</script>
+const geolocation = getGeolocation();
 ```

docs/content/docs/core/get-last-changed/index.md

@@ -8,11 +8,9 @@ Get the last time the reactive value changed. It is returned as a number in mill
 
 ## Usage
 
-```svelte
-<script>
-	import { getLastChanged } from '@sv-use/core';
+```ts
+import { getLastChanged } from '@sv-use/core';
 
-	let value = $state(0);
-	const lastChanged = getLastChanged(() => value);
-</script>
+let value = $state(0);
+const lastChanged = getLastChanged(() => value);
 ```

docs/content/docs/core/get-mouse-pressed/index.md

@@ -8,10 +8,8 @@ Reactive values for mouse/touch/drag pressing state.
 
 ## Usage
 
-```svelte
-<script>
-	import { getMousePressed } from '@sv-use/core';
+```ts
+import { getMousePressed } from '@sv-use/core';
 
-	const mousePressed = getMousePressed();
-</script>
+const mousePressed = getMousePressed();
 ```