@inertiajs/svelte 1.0.0-beta.2 → 1.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.5",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -19,12 +19,16 @@
   "keywords": [
     "svelte"
   ],
+  "exports": {
+    ".": "./src/index.js",
+    "./server": "./src/server.js"
+  },
   "main": "src/index.js",
   "peerDependencies": {
     "svelte": "^3.20.0"
   },
   "dependencies": {
-    "@inertiajs/core": "1.0.0-beta.2",
+    "@inertiajs/core": "1.0.0-beta.5",
     "lodash.isequal": "^4.5.0"
   }
 }

package/src/App.svelte

@@ -1,22 +1,7 @@
 <script>
-  import { router } from '@inertiajs/core'
   import Render, { h } from './Render.svelte'
   import store from './store'
 
-  export let initialPage, resolveComponent
-
-  router.init({
-    initialPage,
-    resolveComponent,
-    swapComponent: async ({ component, page, preserveState }) => {
-      store.update((current) => ({
-        component,
-        page,
-        key: preserveState ? current.key : Date.now()
-      }))
-    }
-  })
-
   $: child = $store.component && h($store.component.default, $store.page.props)
   $: layout = $store.component && $store.component.layout
   $: components = layout

package/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>

package/src/Render.svelte

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

package/src/SSR.svelte

@@ -0,0 +1,8 @@
+<script>
+  import App from './App.svelte'
+  export let id, initialPage
+</script>
+
+<div data-server-rendered="true" {id} data-page={JSON.stringify(initialPage)}>
+  <App />
+</div>

package/src/createInertiaApp.js

@@ -1,32 +1,54 @@
-import { setupProgress } from '@inertiajs/core'
+import { router, setupProgress } from '@inertiajs/core'
 import App from './App.svelte'
+import SSR from './SSR.svelte'
+import store from './store'
 
-export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, render }) {
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page }) {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
   const initialPage = page || JSON.parse(el.dataset.page)
   const resolveComponent = (name) => Promise.resolve(resolve(name))
 
-  let head = []
+  await resolveComponent(initialPage.component).then((initialComponent) => {
+    store.set({
+      component: initialComponent,
+      page: initialPage,
+    })
+  })
+
+  if (!isServer) {
+    router.init({
+      initialPage,
+      resolveComponent,
+      swapComponent: async ({ component, page, preserveState }) => {
+        store.update((current) => ({
+          component,
+          page,
+          key: preserveState ? current.key : Date.now(),
+        }))
+      },
+    })
+
+    if (progress) {
+      setupProgress(progress)
+    }
 
-  const svelteApp = await resolveComponent(initialPage.component).then((initialComponent) => {
     return setup({
       el,
       App,
       props: {
         initialPage,
-        initialComponent,
         resolveComponent,
-        onHeadUpdate: isServer ? (elements) => (head = elements) : null,
       },
     })
-  })
-
-  if (!isServer && progress) {
-    setupProgress(progress)
   }
 
   if (isServer) {
-    // TODO
+    const { html, head } = SSR.render({ id, initialPage })
+
+    return {
+      body: html,
+      head: [head],
+    }
   }
 }

package/src/link.js

@@ -1,30 +1,42 @@
 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,
+      })
     }
   }
 
@@ -32,15 +44,9 @@ export default (node, options = {}) => {
 
   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)

package/src/server.js

@@ -0,0 +1 @@
+export { default as default } from '@inertiajs/core/server'