docs: to writable for element binding (#24)

* docs: to writable for element binding

* docs: update

packages/core/useEventListener/index.md

@@ -10,6 +10,7 @@ Use EventListener with ease. Register using [addEventListener](https://developer
 
 ```html
 <script>
+  import { writable } from '@svelte-use/store'
   import { useEventListener } from '@svelte-use/core'
 
   useEventListener(document, 'visibilitychange', (evt) => {
@@ -20,21 +21,19 @@ Use EventListener with ease. Register using [addEventListener](https://developer
 
 You can also pass a `writable/readable` as the event target, `useEventListener` will unregister the previous event and register the new one when you change the target.
 
-```html
+```js
 <script>
   import { useEventListener } from '@svelte-use/core'
 
-  let el
-  const elStore = writable(el)
-  useEventListener(elStore, 'click', (evt) => {
+  const el = writable()
+  useEventListener(el, 'click', (evt) => {
     console.log(evt)
   })
-  $: elStore.set(el) // <--
 </script>
 
 {#if cond}
-<div bind:this="{el}">Div1</div>
+<div bind:this={$el}>Div1</div>
 {:else}
-<div bind:this="{el}">Div2</div>
+<div bind:this={$el}>Div2</div>
 {/if}
 ```

packages/core/useMutationObserver/demo.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
+  import { writable } from '@svelte-use/store'
   import { useMutationObserver } from '.'
 
-  let el: HTMLDivElement
+  const el = writable<HTMLDivElement>()
+
   let messages: string[] = []
   let className = ''
   let style = ''
 
-  onMount(() => {
-    useMutationObserver(el, mutations => {
+  useMutationObserver(
+    el,
+    (mutations) => {
       const mutation = mutations[0]
 
       if (!mutation) {
@@ -17,8 +19,9 @@
 
       messages.push(mutation.attributeName!)
       messages = messages
-    }, { attributes: true })
-  })
+    },
+    { attributes: true },
+  )
 
   setTimeout(() => {
     className = 'test test2'
@@ -29,8 +32,8 @@
   }, 1550)
 </script>
 
-<div bind:this={el} class={className} style={style}>
+<div bind:this={$el} class={className} {style}>
   {#each messages as text}
-    <div>Mutation Attribute: { text }</div>
+    <div>Mutation Attribute: {text}</div>
   {/each}
 </div>

packages/core/useMutationObserver/index.md

@@ -8,24 +8,25 @@ Watch for changes being made to the DOM tree. [MutationObserver MDN](https://dev
 
 ## Usage
 
-```html
+```js
 <script>
+  import { writable } from '@svelte-use/store'
   import { useMutationObserver } from '@svelte-use/core'
 
-  let el
+  const el = writable()
   let messages = []
 
-  onMount(() => {
-    useMutationObserver(
-      el,
-      (mutations) => {
-        if (!mutations[0]) {
-          messages.push(mutations[0].attributeName)
-          messages = messages
-        }
-      },
-      { attributes: true },
-    )
-  })
+  useMutationObserver(
+    el,
+    (mutations) => {
+      if (!mutations[0]) {
+        messages.push(mutations[0].attributeName)
+        messages = messages
+      }
+    },
+    { attributes: true },
+  )
 </script>
+
+<div bind:this={$el}></div>
 ```

packages/guide/index.md

@@ -35,3 +35,14 @@ Simply importing the functions you need from `@svelte-use/core`
 ```
 
 Refer to [functions list](/functions) for more details.
+
+:::warning
+
+We use the `writable` as element binding a lot in usage example.
+
+```js
+const el = writable()
+<div bind:this={$el}></div>
+```
+
+:::