metonym · metonym · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
+node_modules
+dist
+package
 .DS_Store
-/.svelte-kit
-/build
-/package
-/node_modules
+*.svelte.html
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ pnpm i -D svelte-focus-key
 
 Use the [bind:this](https://svelte.dev/docs#bind_element) directive to pass the element to focus to the `FocusKey` component.
 
-<!-- example-start demo/Basic.svelte -->
+<!-- example-start examples/Basic.svelte -->
 
 ```svelte
 <script>
@@ -45,18 +45,18 @@ Use the [bind:this](https://svelte.dev/docs#bind_element) directive to pass the
 
 The default focus key is the forward slash (`/`). Customize the key using the `key` prop.
 
-<!-- example-start demo/CustomFocusKey.svelte -->
+<!-- example-start examples/CustomFocusKey.svelte -->
 
 ```svelte
 <script>
   import FocusKey from "svelte-focus-key";
 
-  let textarea;
+  let element;
 </script>
 
-<textarea bind:this={textarea} placeholder={'Press "s" to focus'} />
+<textarea bind:this={element} placeholder={'Press "s" to focus'} />
 
-<FocusKey element={textarea} key="s" />
+<FocusKey {element} key="s" />
 ```
 
 <!-- example-end -->
@@ -65,18 +65,18 @@ The default focus key is the forward slash (`/`). Customize the key using the `k
 
 The `key` prop can also accept an array of keys.
 
-<!-- example-start demo/MultipleFocusKeys.svelte -->
+<!-- example-start examples/MultipleFocusKeys.svelte -->
 
 ```svelte
 <script>
   import FocusKey from "svelte-focus-key";
 
-  let node;
+  let element;
 </script>
 
-<input bind:this={node} placeholder={'Press "a" or "b"'} />
+<input bind:this={element} placeholder={'Press "a" or "b"'} />
 
-<FocusKey element={node} key={["a", "b"]} />
+<FocusKey {element} key={["a", "b"]} />
 ```
 
 <!-- example-end -->
@@ -85,22 +85,22 @@ The `key` prop can also accept an array of keys.
 
 Set `selectText` to `true` to select the text in the element when focusing.
 
-<!-- example-start demo/SelectTextOnFocus.svelte -->
+<!-- example-start examples/SelectTextOnFocus.svelte -->
 
 ```svelte
 <script>
   import FocusKey from "svelte-focus-key";
 
-  let input;
+  let element;
 </script>
 
 <input
-  bind:this={input}
+  bind:this={element}
   value={'Press "e" to focus'}
   placeholder={'Press "e" to focus'}
 />
 
-<FocusKey element={input} key="e" selectText />
+<FocusKey {element} key="e" selectText />
 ```
 
 <!-- example-end -->
@@ -109,7 +109,7 @@ Set `selectText` to `true` to select the text in the element when focusing.
 
 This utility also provides a [Svelte action](https://svelte.dev/docs#use_action).
 
-<!-- example-start demo/FocusKeyAction.svelte -->
+<!-- example-start examples/FocusKeyAction.svelte -->
 
 ```svelte
 <script>
@@ -133,5 +133,13 @@ This utility also provides a [Svelte action](https://svelte.dev/docs#use_action)
 
 The `focusKey` action has the same props as `FocusKey` except for `element`.
 
+## Changelog
+
+[Changelog](./CHANGELOG.md)
+
+## License
+
+[MIT](./LICENSE)
+
 [npm]: https://img.shields.io/npm/v/svelte-focus-key.svg?style=for-the-badge&color=%23ff3e00
 [npm-url]: https://npmjs.com/package/svelte-focus-key
diff --git a/demo/CustomFocusKey.svelte b/demo/CustomFocusKey.svelte
diff --git a/demo/MultipleFocusKeys.svelte b/demo/MultipleFocusKeys.svelte
diff --git a/demo/__layout.svelte b/demo/__layout.svelte
diff --git a/demo/_app.html b/demo/_app.html
diff --git a/demo/global.d.ts b/demo/global.d.ts
diff --git a/demo/index.svelte b/demo/index.svelte
diff --git a/demo/Basic.svelte → examples/Basic.svelte b/demo/Basic.svelte → examples/Basic.svelte
diff --git a/examples/CustomFocusKey.svelte b/examples/CustomFocusKey.svelte
@@ -0,0 +1,9 @@
+<script>
+  import FocusKey from "svelte-focus-key";
+
+  let element;
+</script>
+
+<textarea bind:this={element} placeholder={'Press "s" to focus'} />
+
+<FocusKey {element} key="s" />
diff --git a/demo/FocusKeyAction.svelte → examples/FocusKeyAction.svelte b/demo/FocusKeyAction.svelte → examples/FocusKeyAction.svelte
diff --git a/demo/FocusKeyActionUpdates.svelte → examples/FocusKeyActionUpdates.svelte b/demo/FocusKeyActionUpdates.svelte → examples/FocusKeyActionUpdates.svelte
diff --git a/examples/MultipleFocusKeys.svelte b/examples/MultipleFocusKeys.svelte
@@ -0,0 +1,9 @@
+<script>
+  import FocusKey from "svelte-focus-key";
+
+  let element;
+</script>
+
+<input bind:this={element} placeholder={'Press "a" or "b"'} />
+
+<FocusKey {element} key={["a", "b"]} />
diff --git a/demo/SelectTextOnFocus.svelte → examples/SelectTextOnFocus.svelte b/demo/SelectTextOnFocus.svelte → examples/SelectTextOnFocus.svelte
@@ -1,13 +1,13 @@
 <script>
   import FocusKey from "svelte-focus-key";
 
-  let input;
+  let element;
 </script>
 
 <input
-  bind:this={input}
+  bind:this={element}
   value={'Press "e" to focus'}
   placeholder={'Press "e" to focus'}
 />
 
-<FocusKey element={input} key="e" selectText />
+<FocusKey {element} key="e" selectText />
diff --git a/index.html b/index.html
 @@ -0,0 +1,5 @@
+<script type="module">
+  import App from "./README.md";
+
+  new App({ target: document.body });
+</script>
diff --git a/package.json b/package.json
@@ -6,17 +6,20 @@
   "author": "Eric Liu (https://github.com/metonym)",
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite",
     "build": "vite build",
-    "deploy": "yarn build && touch build/.nojekyll && gh-pages -d build -t true",
-    "package": "svelte-kit package",
+    "preview": "vite preview",
+    "prepack": "svelte-package",
     "test": "vitest"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.39",
-    "gh-pages": "^4.0.0",
-    "github-markdown-css": "^5.1.0",
-    "sveldoc": "^0.7.0"
+    "@sveltejs/package": "^1.0.0-next.3",
+    "@testing-library/svelte": "^3.2.1",
+    "@testing-library/user-event": "^14.4.3",
+    "jsdom": "^20.0.0",
+    "sveldoc": "^0.10.1",
+    "vite": "^3.0.9",
+    "vitest": "^0.22.1"
   },
   "repository": {
     "type": "git",

diff --git a/svelte.config.js b/svelte.config.js
@@ -1,16 +1,5 @@
-import adapter from "@sveltejs/adapter-static";
-import { createConfig } from "sveldoc";
-
-export default createConfig({
-  kit: {
-    adapter: adapter(),
-    paths: {
-      base: process.env.NODE_ENV === "production" ? "/svelte-focus-key" : "",
-    },
-    files: {
-      lib: "src",
-      routes: "demo",
-      template: "demo/_app.html",
-    },
+export default {
+  package: {
+    source: "src",
   },
-});
+};