docs: style tweaks and dep cleanups (#106)

svecosystem · Jul 1, 2024 · d8932c2 · d8932c2
1 parent 6353651
commit d8932c2
Show file tree

Hide file tree

Showing 13 changed files with 206 additions and 57 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/docs/content/getting-started.md b/sites/docs/content/getting-started.md
@@ -10,3 +10,36 @@ Install Runed using your favorite package manager:
 ```bash
 npm install runed
 ```
+
+## Usage
+
+Import one of the utilities you need to either a `.svelte` or `.svelte.js|ts` file and start using
+it:
+
+```svelte title="component.svelte"
+<script lang="ts">
+	import { activeElement } from "runed";
+
+	let inputElement = $state<HTMLInputElement | undefined>();
+</script>
+
+<input bind:this={inputElement} />
+
+{#if activeElement.current}
+	The input element is active!
+{/if}
+```
+
+or
+
+```ts title="some-module.svelte.ts"
+import { activeElement } from "runed";
+
+function logActiveElement() {
+	$effect(() => {
+		console.log("Active element is ", activeElement.current);
+	});
+}
+
+logActiveElement();
+```
diff --git a/sites/docs/content/utilities/watch.md b/sites/docs/content/utilities/watch.md
@@ -20,7 +20,7 @@ effect callback.
 
 ## Usage
 
-### `watch`
+### watch
 
 Runs a callback whenever one of the sources change.
 
@@ -67,12 +67,12 @@ watch(sources, callback, {
 });
 ```
 
-### `watch.pre`
+### watch.pre
 
 `watch.pre` is similar to `watch`, but it uses
 [`$effect.pre`](https://svelte-5-preview.vercel.app/docs/runes#$effect-pre) under the hood.
 
-### `watchOnce`
+### watchOnce
 
 In case you want to run the callback only once, you can use `watchOnce` and `watchOnce.pre`. It
 functions identically to the `watch` and `watch.pre` otherwise, but it does not accept any options

diff --git a/sites/docs/package.json b/sites/docs/package.json
@@ -41,7 +41,7 @@
 		"clsx": "^2.1.0",
 		"concurrently": "^8.2.2",
 		"contentlayer": "^0.3.4",
-		"mdsx": "^0.0.5",
+		"mdsx": "^0.0.6",
 		"phosphor-svelte": "^1.4.2",
 		"postcss": "^8.4.35",
 		"postcss-load-config": "^5.0.3",
@@ -59,17 +59,17 @@
 		"unist-builder": "^4.0.0",
 		"unist-util-visit": "^5.0.0",
 		"vite": "^5.1.3",
-		"vitest": "^1.3.0",
+		"vitest": "^1.6.0",
 		"zod": "^3.22.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "^0.74.0",
+		"@melt-ui/svelte": "^0.83.0",
 		"bits-ui": "^0.21.11",
-		"mode-watcher": "^0.3.0",
+		"mode-watcher": "^0.3.1",
 		"rehype-slug": "^6.0.0",
 		"runed": "workspace:^",
-		"svelte-sonner": "^0.3.22",
-		"vaul-svelte": "^0.3.0"
+		"svelte-sonner": "^0.3.24",
+		"vaul-svelte": "^0.3.2"
 	}
 }