From d8932c2b22b98c85e42616e5fb9fc017b61f7dab Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Mon, 1 Jul 2024 13:45:44 -0400
Subject: [PATCH] docs: style tweaks and dep cleanups (#106)
---
pnpm-lock.yaml | 162 +++++++++++++++---
sites/docs/content/getting-started.md | 33 ++++
sites/docs/content/utilities/watch.md | 6 +-
sites/docs/package.json | 12 +-
.../components/demos/animation-frames.svelte | 14 +-
.../lib/components/demos/use-debounce.svelte | 12 +-
.../demos/use-intersection-observer.svelte | 2 +-
.../src/lib/components/ui/button/index.ts | 2 +-
sites/docs/src/lib/config/site.ts | 2 +-
sites/docs/src/lib/icons/index.ts | 2 +
sites/docs/src/lib/styles/app.pcss | 10 +-
sites/docs/static/og.png | Bin 896654 -> 896187 bytes
sites/docs/tailwind.config.js | 6 +-
13 files changed, 206 insertions(+), 57 deletions(-)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cab7a5d0..a59f05e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,14 +112,14 @@ importers:
sites/docs:
dependencies:
'@melt-ui/svelte':
- specifier: ^0.74.0
- version: 0.74.4(svelte@5.0.0-next.168)
+ specifier: ^0.83.0
+ version: 0.83.0(svelte@5.0.0-next.168)
bits-ui:
specifier: ^0.21.11
version: 0.21.11(svelte@5.0.0-next.168)
mode-watcher:
- specifier: ^0.3.0
- version: 0.3.0(svelte@5.0.0-next.168)
+ specifier: ^0.3.1
+ version: 0.3.1(svelte@5.0.0-next.168)
rehype-slug:
specifier: ^6.0.0
version: 6.0.0
@@ -127,11 +127,11 @@ importers:
specifier: workspace:^
version: link:../../packages/runed
svelte-sonner:
- specifier: ^0.3.22
- version: 0.3.22(svelte@5.0.0-next.168)
+ specifier: ^0.3.24
+ version: 0.3.24(svelte@5.0.0-next.168)
vaul-svelte:
- specifier: ^0.3.0
- version: 0.3.0(svelte@5.0.0-next.168)
+ specifier: ^0.3.2
+ version: 0.3.2(svelte@5.0.0-next.168)
devDependencies:
'@sveltejs/adapter-cloudflare':
specifier: ^4.1.0
@@ -164,8 +164,8 @@ importers:
specifier: ^0.3.4
version: 0.3.4(esbuild@0.20.2)
mdsx:
- specifier: ^0.0.5
- version: 0.0.5(svelte@5.0.0-next.168)
+ specifier: ^0.0.6
+ version: 0.0.6(svelte@5.0.0-next.168)
phosphor-svelte:
specifier: ^1.4.2
version: 1.4.2(svelte@5.0.0-next.168)
@@ -218,8 +218,8 @@ importers:
specifier: ^5.1.3
version: 5.2.10(@types/node@20.12.7)
vitest:
- specifier: ^1.3.0
- version: 1.5.2(@types/node@20.12.7)(@vitest/ui@1.6.0)(jsdom@24.0.0)
+ specifier: ^1.6.0
+ version: 1.6.0
zod:
specifier: ^3.22.4
version: 3.23.4
@@ -1605,8 +1605,8 @@ packages:
- supports-color
dev: true
- /@melt-ui/svelte@0.74.4(svelte@5.0.0-next.168):
- resolution: {integrity: sha512-EeDP3C1grK+bPTezJQXKid2k4RRGZakyHTghD/zg//fM6Gqe4JykVtV0Yih4QJs+yGTgJq/EaNQMQ6JkTnvHxg==}
+ /@melt-ui/svelte@0.76.2(svelte@5.0.0-next.168):
+ resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==}
peerDependencies:
svelte: '>=3 <5'
dependencies:
@@ -1619,10 +1619,10 @@ packages:
svelte: 5.0.0-next.168
dev: false
- /@melt-ui/svelte@0.76.2(svelte@5.0.0-next.168):
- resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==}
+ /@melt-ui/svelte@0.83.0(svelte@5.0.0-next.168):
+ resolution: {integrity: sha512-E7QT+8YSftz+Hdk1W0hNR3f+cnaF2COMWkStn+2u4vk0RO1I9mXRJl+bJD6uhYaH146oxEB+5elu/ABbv6rpsA==}
peerDependencies:
- svelte: '>=3 <5'
+ svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
dependencies:
'@floating-ui/core': 1.6.0
'@floating-ui/dom': 1.6.3
@@ -2668,6 +2668,14 @@ packages:
chai: 4.4.1
dev: true
+ /@vitest/expect@1.6.0:
+ resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==}
+ dependencies:
+ '@vitest/spy': 1.6.0
+ '@vitest/utils': 1.6.0
+ chai: 4.4.1
+ dev: true
+
/@vitest/runner@1.5.2:
resolution: {integrity: sha512-7IJ7sJhMZrqx7HIEpv3WrMYcq8ZNz9L6alo81Y6f8hV5mIE6yVZsFoivLZmr0D777klm1ReqonE9LyChdcmw6g==}
dependencies:
@@ -2676,6 +2684,14 @@ packages:
pathe: 1.1.2
dev: true
+ /@vitest/runner@1.6.0:
+ resolution: {integrity: sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==}
+ dependencies:
+ '@vitest/utils': 1.6.0
+ p-limit: 5.0.0
+ pathe: 1.1.2
+ dev: true
+
/@vitest/snapshot@1.5.2:
resolution: {integrity: sha512-CTEp/lTYos8fuCc9+Z55Ga5NVPKUgExritjF5VY7heRFUfheoAqBneUlvXSUJHUZPjnPmyZA96yLRJDP1QATFQ==}
dependencies:
@@ -2684,12 +2700,26 @@ packages:
pretty-format: 29.7.0
dev: true
+ /@vitest/snapshot@1.6.0:
+ resolution: {integrity: sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==}
+ dependencies:
+ magic-string: 0.30.10
+ pathe: 1.1.2
+ pretty-format: 29.7.0
+ dev: true
+
/@vitest/spy@1.5.2:
resolution: {integrity: sha512-xCcPvI8JpCtgikT9nLpHPL1/81AYqZy1GCy4+MCHBE7xi8jgsYkULpW5hrx5PGLgOQjUpb6fd15lqcriJ40tfQ==}
dependencies:
tinyspy: 2.2.1
dev: true
+ /@vitest/spy@1.6.0:
+ resolution: {integrity: sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==}
+ dependencies:
+ tinyspy: 2.2.1
+ dev: true
+
/@vitest/ui@1.6.0(vitest@1.5.2):
resolution: {integrity: sha512-k3Lyo+ONLOgylctiGovRKy7V4+dIN2yxstX3eY5cWFXH6WP+ooVX79YSyi0GagdTQzLmT43BF27T0s6dOIPBXA==}
peerDependencies:
@@ -6129,10 +6159,10 @@ packages:
'@types/mdast': 4.0.3
dev: true
- /mdsx@0.0.5(svelte@5.0.0-next.168):
- resolution: {integrity: sha512-crYbZC0L5kQjaRABvHIXj9H2O1qikIw9KKqS3bo2En4XVgvHH7TO5bJ2X86PxJK7H6QEBAubjUma9+qpbsPC5A==}
+ /mdsx@0.0.6(svelte@5.0.0-next.168):
+ resolution: {integrity: sha512-hfIlNzOlT153M37ZzbjuGSN8ZFNqlyEWaPnGr9L92Ty/dkZdIfgyDeFrsJDuQ77oY1bf3jeNCycR19ocD/BpfA==}
peerDependencies:
- svelte: ^4.0.0
+ svelte: ^4.0.0 || ^5.0.0-next.1
dependencies:
esrap: 1.2.2
hast-util-to-html: 9.0.1
@@ -6856,10 +6886,10 @@ packages:
ufo: 1.5.3
dev: true
- /mode-watcher@0.3.0(svelte@5.0.0-next.168):
- resolution: {integrity: sha512-k8jjuTx94HaaRKWO6JDf8wL761hFatrTIHJKl+E+3JWcnv+GnMBH062zcLsy0lbCI3n7RZxxHaWi66auFnUO4g==}
+ /mode-watcher@0.3.1(svelte@5.0.0-next.168):
+ resolution: {integrity: sha512-inghSVSXpEENV0SHM98+AvjDmTOjh9EJIrJXMScK42GNkDm5QJL7a/nZQ8M8i8RK7loFHqsQKBKdlXfw5e5C4w==}
peerDependencies:
- svelte: ^4.0.0
+ svelte: ^4.0.0 || ^5.0.0-next.1
dependencies:
svelte: 5.0.0-next.168
dev: false
@@ -8559,8 +8589,8 @@ packages:
typescript: 5.4.5
dev: true
- /svelte-sonner@0.3.22(svelte@5.0.0-next.168):
- resolution: {integrity: sha512-1AEBl7rTP4oeMAmBmkcvoHNOwB8gPzz73RYApcY8pyDwbjBewU8ATnXV8N42omV1sQvtSX/X0o5A1nfkN3T6cg==}
+ /svelte-sonner@0.3.24(svelte@5.0.0-next.168):
+ resolution: {integrity: sha512-txuL0JBUs0v6qGrr0PGCsbXmKHuthdrAkfISYi8umuveF7+gINb6EXl6VmKY9aHhyxCqvVgqd6yophQNrnor4w==}
peerDependencies:
svelte: '>=3 <5'
dependencies:
@@ -9121,10 +9151,10 @@ packages:
spdx-expression-parse: 3.0.1
dev: true
- /vaul-svelte@0.3.0(svelte@5.0.0-next.168):
- resolution: {integrity: sha512-+PBfKDWl+xfloe8Tm1G8x3TqbCiUWoyUedU2WC5iE3v6LOYPKo8FyEtzNC5ZqFVVnUKSKNg+4Fi73nuzMkT7JA==}
+ /vaul-svelte@0.3.2(svelte@5.0.0-next.168):
+ resolution: {integrity: sha512-X4OGWttSTVUl417qGDsSFgOvIx24DoiMRY/jaP9z0v9FL8LQQJ0RQ1ZM0QpdyQPRlNd24ewjNQHh5EgYDtfNpw==}
peerDependencies:
- svelte: ^4.0.0
+ svelte: ^4.0.0 || ^5.0.0-next.1
dependencies:
bits-ui: 0.21.11(svelte@5.0.0-next.168)
svelte: 5.0.0-next.168
@@ -9196,6 +9226,27 @@ packages:
- terser
dev: true
+ /vite-node@1.6.0:
+ resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==}
+ engines: {node: ^18.0.0 || >=20.0.0}
+ hasBin: true
+ dependencies:
+ cac: 6.7.14
+ debug: 4.3.4
+ pathe: 1.1.2
+ picocolors: 1.0.0
+ vite: 5.2.10(@types/node@20.12.7)
+ transitivePeerDependencies:
+ - '@types/node'
+ - less
+ - lightningcss
+ - sass
+ - stylus
+ - sugarss
+ - supports-color
+ - terser
+ dev: true
+
/vite@5.2.10(@types/node@20.12.7):
resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==}
engines: {node: ^18.0.0 || >=20.0.0}
@@ -9301,6 +9352,61 @@ packages:
- terser
dev: true
+ /vitest@1.6.0:
+ resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==}
+ engines: {node: ^18.0.0 || >=20.0.0}
+ hasBin: true
+ peerDependencies:
+ '@edge-runtime/vm': '*'
+ '@types/node': ^18.0.0 || >=20.0.0
+ '@vitest/browser': 1.6.0
+ '@vitest/ui': 1.6.0
+ happy-dom: '*'
+ jsdom: '*'
+ peerDependenciesMeta:
+ '@edge-runtime/vm':
+ optional: true
+ '@types/node':
+ optional: true
+ '@vitest/browser':
+ optional: true
+ '@vitest/ui':
+ optional: true
+ happy-dom:
+ optional: true
+ jsdom:
+ optional: true
+ dependencies:
+ '@vitest/expect': 1.6.0
+ '@vitest/runner': 1.6.0
+ '@vitest/snapshot': 1.6.0
+ '@vitest/spy': 1.6.0
+ '@vitest/utils': 1.6.0
+ acorn-walk: 8.3.2
+ chai: 4.4.1
+ debug: 4.3.4
+ execa: 8.0.1
+ local-pkg: 0.5.0
+ magic-string: 0.30.10
+ pathe: 1.1.2
+ picocolors: 1.0.0
+ std-env: 3.7.0
+ strip-literal: 2.1.0
+ tinybench: 2.8.0
+ tinypool: 0.8.4
+ vite: 5.2.10(@types/node@20.12.7)
+ vite-node: 1.6.0
+ why-is-node-running: 2.2.2
+ transitivePeerDependencies:
+ - less
+ - lightningcss
+ - sass
+ - stylus
+ - sugarss
+ - supports-color
+ - terser
+ dev: true
+
/vue-eslint-parser@9.4.2(eslint@9.1.1):
resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
engines: {node: ^14.17.0 || >=16.0.0}
diff --git a/sites/docs/content/getting-started.md b/sites/docs/content/getting-started.md
index 4d6c664c..f10a7659 100644
--- 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"
+
+
+
+
+{#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
index 0dbfb0c6..46168d94 100644
--- 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
index 3c5949e0..927a497b 100644
--- 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"
}
}
diff --git a/sites/docs/src/lib/components/demos/animation-frames.svelte b/sites/docs/src/lib/components/demos/animation-frames.svelte
index 2ef2b400..27b8a960 100644
--- a/sites/docs/src/lib/components/demos/animation-frames.svelte
+++ b/sites/docs/src/lib/components/demos/animation-frames.svelte
@@ -1,8 +1,9 @@
{logged || "Press the button!"} {logged || "Press the button!"}
Ebqp)?TWg|P
z74I2LFqW`D<`wq6C$f&?oTV~4z 8lOWiWus0aP09-a@m9%vp4m*Jx=as=sZZ2JCDCmy)jx`Y)QaYf-%IX3dOb$Lq
z)aPwke*pyO@&Xehpo;n07r>OiLxpA0&+m06e~b*@(2kFwMEXr#<%Jf;W%t7@y2Z8C
zsOZ_qN`xN6J@-e_SB(R_03p~5lv}!EdX4PfgQZ2dn{|W0B!CzI0Ko>1s~Zy;tbMQ2
zlzr<7%q62xf94)I%h;f&K&B#$)FuX0jDvSd`bbcog9b2W-?wFrJsyfKNPL_L9K-Ng
ze}%&%ldo3GX9;5;X%|#Bc2!+Bz~YgIdmV&6BLEk@CveGrgwlQ-bSrHM{JJhm9x?=#
z2(PvT&FHAdbw@g_wXQE4Dlcntbb5jbuhOL{J*y`1{t|fiu{p2BIme9`xTi6&RtzG7
zsOeQVEyS0TyWtMhrUdsc}+a@vTE`7TQVCI{>43MB({m!E6JFStTUP-xdb5SfaIZ4@K)Mv4p>>U(r}{e&hmbbtJs?WJtiCN_jw_lu6b?6
zM79>=`J}UVTb%lo4bb<0teO7|igfl&`!$1EXMn<-)S2@n9XtThl+hTW9mlv{0+e=X
zVR3#?nz%23
${kLbfu$o6c$4`R+i<^fS3S?
z2u6n;7i&c}yy+~6ptfhS!S#{0(lhe86OhLF5JBpYaC5YV-}{nfo;Rfk1E(K{{8&mJ
zWIX+zZmsq`HZ_6sj)sJ}&Q@y1SSyBq%vR+~=zpvXo!j=9%vh72!Pq%dP`+6OHZf-b
zK+xsS^qIR#eM#oDW-341(iR*F;9$Omqa5?`q^_V*atLVFlbNw~I*7$wdWSicNxvM$
zNX#?G!pWL#-~sUBjO*#dy}#|LVHE&k_z@Fez~MvF>Qi+|oBzQw3T9V;Z2@|JFHK3z
zq*K#8F!8RcvfuCa056}Fksk^OKYcxY9QIya2~SQg
z!ym>j452*SAJ<7TNvkse!1{p|(*h)M#^2H%y0wa9&vBJClM}+e@g%yyEAE>$HRIe1
za)Q|syGib4+aADw8vpuOoRxI2^7$zp&2ro^GL|K-DrQ=Hh?A4GJ07Kmi2osH)HC+P
zB2wmL(Z*)|e2i}-d1F*H+0bA`xi^fj(qqPNtImG{rz~O_$`_mFJgeIlza4@@VH%&s
zUDk6vah3Hvz^7im_cPaOElEess`3r2XvI}7?I$W|`Z8XBtSw%vy<7hscDr=q5(s_w
z?%kKkjBw%n;72z;Yg1Rl;Mz~ymQ+d{B_0I2DrI8
5GjO_=!x~l|<%h6NVBSrJpm#t#Y7O1g*=^n{x
4DY&60>iL((h;-Lq@b)BfGF*j
zY-BJys~qWASP}tjUdh0dnTY$ou4F#E9!F*q=TjY5mEAZ9*n&;rqR;1*`)Yv8$upVH
zep5$FFL4?p8Cq2$8P}hJ@nqFuKbf3fI)T+%3|rx>2)F%}fhMT}f0zQph;mGlAP!ia
zS32o9^oY*m%w+el8T{S$03sB~?gCX#1$<3=inTHsId^qtYO=4~J0js3U|9tzHcVwU
zJ%f~{`E}5sNr+k{GbCMLgiL1AeE*Z!C1{-RjFdWU4RPN1ewo~4j+RDHtn(AFeN@td
z^Jxd{Wd3Dj0J4v3e@M$}h#?c@fC%$Dc%-usjiuN_RTj~E&oUf>nF&&zvO|
>zRp3;#*N##&0;TFi*PPuH_Wk6mqRb4SvxQbuuo6d>IdX1<{*1YEzAfk3+PU=9
zIkqnc^}P2fj_fSA3t%@&DRE3^8}Tj>W{d&{o#m%M(a(gY(!miWF9_MsXQK<}5QsOw
zd*1U0mFwLlq6`ZW!TXu4e}26d9hF|fuu~t+?Q$;$M=&*}V02u^gLDObXb%A@?Q+lv
z{4y}HSbMXSZGPVe7j=(7=C1os?LUj@4~E*F`=Ti*hGE2cK^f&52y$(=L1XxJTiTr}
ziTV7yC;$HW9g{`n4)_ItOR^}~6s+0aYd_6
hOVSs1y5X