Improve Svelte use:inertia and <Link /> (#1344)

* Simplify options merge logic

* Stop dispatching click event

* Dispatch Inertia events on the HTML node

With this they can be listened the Svelte way on HTML elements.

```svelte
<a use:inertia={{ method: 'post' }} href="/toggle" on:success={({ detail }) => alert('Success!')}>Toggle</a>
```

* Add "as" prop and remove duplicated logic

* Forward all Inertia events

* Add default preserveState value

* Add Svelte Prettier plugin

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>

Author: pedroborges

package.json

@@ -4,6 +4,7 @@
     "packages/*"
   ],
   "dependencies": {
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.8.1"
   }
 }

packages/svelte/src/App.svelte

@@ -12,9 +12,9 @@
       store.update((current) => ({
         component,
         page,
-        key: preserveState ? current.key : Date.now()
+        key: preserveState ? current.key : Date.now(),
       }))
-    }
+    },
   })
 
   $: child = $store.component && h($store.component.default, $store.page.props)

packages/svelte/src/Link.svelte

@@ -1,49 +1,59 @@
 <script>
-  import { mergeDataIntoQueryString, router, shouldIntercept } from '@inertiajs/core'
-  import { beforeUpdate, createEventDispatcher } from 'svelte'
-
-  const dispatch = createEventDispatcher()
-
-  export let
-    data = {},
-    href,
-    method = 'get',
-    replace = false,
-    preserveScroll = false,
-    preserveState = null,
-    only = [],
-    headers = {}
+  import { beforeUpdate } from 'svelte'
+  import { default as inertia } from './link'
+
+  export let href
+  export let as = 'a'
+  export let data = {}
+  export let method = 'get'
+  export let replace = false
+  export let preserveScroll = false
+  export let preserveState = null
+  export let only = []
+  export let headers = {}
+  export let queryStringArrayFormat = 'brackets'
 
   beforeUpdate(() => {
-    method = method.toLowerCase()
-    const [_href, _data] = mergeDataIntoQueryString(method, href, data)
-    href = _href
-    data = _data
-
-    if (method !== 'get') {
-      console.warn(`Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "inertia" directive. For example:\n\n<button use:inertia={{ method: 'post', href: '${href}' }}>...</button>`)
+    if (as === 'a' && method.toLowerCase() !== 'get') {
+      console.warn(
+        `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
+      )
     }
   })
-
-  function visit(event) {
-    dispatch('click', event)
-
-    if (shouldIntercept(event)) {
-      event.preventDefault()
-
-      router.visit(href, {
-        data,
-        method,
-        preserveScroll,
-        preserveState: preserveState !== null ? preserveState : (method !== 'get'),
-        replace,
-        only,
-        headers,
-      })
-    }
-  }
 </script>
 
-<a {...$$restProps} {href} on:click={visit}>
+<svelte:element
+  this={as}
+  use:inertia={{
+    ...(as !== 'a' ? { href } : {}),
+    data,
+    method,
+    replace,
+    preserveScroll,
+    preserveState: preserveState ?? method !== 'get',
+    only,
+    headers,
+    queryStringArrayFormat,
+  }}
+  {...as === 'a' ? { href } : {}}
+  {...$$restProps}
+  on:focus
+  on:blur
+  on:click
+  on:dblclick
+  on:mousedown
+  on:mousemove
+  on:mouseout
+  on:mouseover
+  on:mouseup
+  on:cancel-token
+  on:before
+  on:start
+  on:progress
+  on:finish
+  on:cancel
+  on:success
+  on:error
+>
   <slot />
-</a>
+</svelte:element>

packages/svelte/src/Render.svelte

@@ -3,7 +3,7 @@
     return {
       component,
       ...(props ? { props } : {}),
-      ...(children ? { children } : {})
+      ...(children ? { children } : {}),
     }
   }
 </script>

packages/svelte/src/link.js

@@ -1,46 +1,52 @@
 import { mergeDataIntoQueryString, router, shouldIntercept } from '@inertiajs/core'
-import { createEventDispatcher } from 'svelte'
 
 export default (node, options = {}) => {
-  const [href, data] = mergeDataIntoQueryString(
-    options.method || 'get',
-    node.href || options.href || '',
-    options.data || {},
-    options.queryStringArrayFormat || 'brackets',
-  )
+  const [href, data] = hrefAndData(options)
   node.href = href
   options.data = data
 
-  const dispatch = createEventDispatcher()
-
-  function visit(event) {
-    dispatch('click', event)
+  function fireEvent(name, eventOptions = {}) {
+    return node.dispatchEvent(new CustomEvent(name, eventOptions))
+  }
 
-    const href = node.href || options.href
+  function hrefAndData(options) {
+    return mergeDataIntoQueryString(
+      options.method || 'get',
+      node.href || options.href || '',
+      options.data || {},
+      options.queryStringArrayFormat || 'brackets',
+    )
+  }
 
-    if (!href) {
+  function visit(event) {
+    if (!node.href) {
       throw new Error('Option "href" is required')
     }
 
     if (shouldIntercept(event)) {
       event.preventDefault()
-      router.visit(href, options)
+
+      router.visit(node.href, {
+        onCancelToken: () => fireEvent('cancel-token'),
+        onBefore: (visit) => fireEvent('before', { detail: { visit } }),
+        onStart: (visit) => fireEvent('start', { detail: { visit } }),
+        onProgress: (progress) => fireEvent('progress', { detail: { progress } }),
+        onFinish: (visit) => fireEvent('finish', { detail: { visit } }),
+        onCancel: () => fireEvent('cancel'),
+        onSuccess: (page) => fireEvent('success', { detail: { page } }),
+        onError: (errors) => fireEvent('error', { detail: { errors } }),
+        ...options,
+      })
     }
   }
 
   node.addEventListener('click', visit)
 
   return {
     update(newOptions) {
-      const [href, data] = mergeDataIntoQueryString(
-        newOptions.method || 'get',
-        node.href || newOptions.href,
-        newOptions.data || {},
-        newOptions.queryStringArrayFormat || 'brackets',
-      )
+      const [href, data] = hrefAndData(newOptions)
       node.href = href
-      newOptions.data = data
-      options = newOptions
+      options = { ...newOptions, data }
     },
     destroy() {
       node.removeEventListener('click', visit)