Skip to content

Commit 0e8e2e8

Browse files
authored
Merge pull request #9 from AlexWarnes/runes-update
Runes update
2 parents 5b2dbd3 + 55024a6 commit 0e8e2e8

24 files changed

+1520
-10566
lines changed

.eslintignore

-13
This file was deleted.

.eslintrc.cjs

-20
This file was deleted.

.gitignore

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
1-
.DS_Store
21
node_modules
3-
/build
2+
3+
# Output
4+
.output
5+
.vercel
46
/.svelte-kit
5-
/package
7+
/build
8+
/dist
9+
10+
# OS
11+
.DS_Store
12+
Thumbs.db
13+
14+
# Env
615
.env
716
.env.*
817
!.env.example
18+
!.env.test
19+
20+
# Vite
21+
vite.config.js.timestamp-*
22+
vite.config.ts.timestamp-*

.prettierignore

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
.DS_Store
2-
node_modules
3-
/build
4-
/.svelte-kit
5-
/package
6-
.env
7-
.env.*
8-
!.env.example
9-
10-
# Ignore files for PNPM, NPM and YARN
11-
pnpm-lock.yaml
1+
# Package Managers
122
package-lock.json
3+
pnpm-lock.yaml
134
yarn.lock

.prettierrc

+8-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
"trailingComma": "none",
55
"printWidth": 100,
66
"plugins": ["prettier-plugin-svelte"],
7-
"pluginSearchDirs": ["."],
8-
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
7+
"overrides": [
8+
{
9+
"files": "*.svelte",
10+
"options": {
11+
"parser": "svelte"
12+
}
13+
}
14+
]
915
}

README.md

+25-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# svelte-kbc
22

3-
Configure stores for keyboard inputs and events in any Svelte app.
3+
Configure a rune for keyboard inputs and events in any Svelte app.
44

55
[Example on StackBlitz](https://stackblitz.com/edit/example-svelte-kbc?file=README.md)
66

@@ -12,32 +12,45 @@ Configure stores for keyboard inputs and events in any Svelte app.
1212
const config = [
1313
// individual key presses
1414
{ name: 'forward', keys: ['ArrowUp', 'w', 'W'] },
15-
{ name: 'jump', keys: [' '] },
15+
{ name: 'jump', keys: [' ', 'Space'] },
1616
{ name: 'click', events: ['click'] },
1717
]
1818
```
1919
**Note:** _Only certain events are currently supported. See `KbcEvent` types below._
2020

21-
2. Wrap your application (or a part of your application) in `<KeyboardControls />` to create a context from your config. Any child component can then subscribe to the control stores with the names you provided.
21+
2. Wrap your application (or a part of your application) in `<KeyboardControls />` to create a context from your config. Any child component can then access the control rune with the names you provided.
2222

2323
```html
2424
<KeyboardControls {config}>
25-
<!-- Anything in here can access the control stores 'forward', 'jump', 'click' -->
25+
<!-- Anything in here can access the control rune with properties 'forward', 'jump', 'click' -->
2626
<BrowserGame />
2727
</KeyboardControls>
2828
```
2929

30-
3. In a child component, the `useKeyboardControls()` hook will return all your controls as stores. From there, handle the events however you need to:
30+
3. In a child component, the `useKbc()` hook will return the controls rune, with the properties set in the config. From there, handle the events however you need to:
3131

3232
```js
33-
const { forward, jump, click } = useKeyboardControls();
33+
const kbc = useKbc();
3434

35-
$: if ($forward) handleMoveForward();
36-
$: if ($jump && $click) handleJumpClick();
37-
$: if ($click) processClickEvent($click)
38-
```
35+
$effect(() => {
36+
if (kbc.forward) handleMoveForward()
37+
if (kbc.forward && kbc.jump) handleForwardJump()
38+
if (kbc.click) handleClickThings()
39+
})
40+
```
41+
42+
Alternatively, you can destructure the control rune and maintain reactivity using $derived:
43+
```js
44+
const { forward, jump, click } = $derived(useKbc());
3945

40-
**Note:** Both key and event control stores will emit their respective `event` objects when they occur (or when they are "pressed"), otherwise they will emit `false`.
46+
$effect(() => {
47+
if (forward) handleMoveForward()
48+
if (forward && jump) handleForwardJump()
49+
if (click) handleClickThings()
50+
})
51+
52+
```
53+
**Note:** The keys and events will "emit" their respective `event` objects when they occur, otherwise they will "emit" `false`
4154

4255
# `<KeyboardControls />` Properties
4356

@@ -140,7 +153,7 @@ Just pass in a name mapping object when you invoke the config:
140153
wasdConfig({ space: 'jump' })
141154
```
142155

143-
Now your control stores will be named `w, a, s, d, shift, jump`
156+
Now your control rune properties will be named `w, a, s, d, shift, jump`
144157

145158
# Types
146159

0 commit comments

Comments
 (0)