@inertiajs/svelte 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Jonathan Reinink <jonathan@reinink.ca>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@inertiajs/svelte",
+  "version": "1.0.0-beta.1",
+  "license": "MIT",
+  "description": "The Svelte adapter for Inertia.js",
+  "contributors": [
+    "Jonathan Reinink <jonathan@reinink.ca>",
+    "Pedro Borges <oi@pedroborg.es>"
+  ],
+  "homepage": "https://inertiajs.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/inertiajs/inertia.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/inertiajs/inertia/issues"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "main": "src/index.js",
+  "peerDependencies": {
+    "svelte": "^3.20.0"
+  },
+  "dependencies": {
+    "@inertiajs/core": "1.0.0-beta.1",
+    "lodash.isequal": "^4.5.0"
+  }
+}

package/readme.md

@@ -0,0 +1,3 @@
+# Inertia.js Svelte Adapter
+
+Visit [inertiajs.com](https://inertiajs.com/) to learn more.

package/src/App.svelte

@@ -0,0 +1,32 @@
+<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
+    ? Array.isArray(layout)
+      ? layout
+          .concat(child)
+          .reverse()
+          .reduce((child, layout) => h(layout, $store.page.props, [child]))
+      : h(layout, $store.page.props, [child])
+    : child
+</script>
+
+<Render {...components} />

package/src/Link.svelte

@@ -0,0 +1,49 @@
+<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 = {}
+
+  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>`)
+    }
+  })
+
+  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}>
+  <slot />
+</a>

package/src/Render.svelte

@@ -0,0 +1,25 @@
+<script context="module">
+  export const h = (component, props, children) => {
+    return {
+      component,
+      ...(props ? { props } : {}),
+      ...(children ? { children } : {})
+    }
+  }
+</script>
+
+<script>
+  import store from './store'
+
+  export let component
+  export let props = {}
+  export let children = []
+</script>
+
+{#if $store.component}
+  <svelte:component this={component} {...props}>
+    {#each children as child, index (component && component.length === index ? $store.key : null)}
+      <svelte:self {...child} />
+    {/each}
+  </svelte:component>
+{/if}

package/src/createInertiaApp.js

@@ -0,0 +1,32 @@
+import { setupProgress } from '@inertiajs/core'
+import App from './App.svelte'
+
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, render }) {
+  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 = []
+
+  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
+  }
+}

package/src/index.js

@@ -0,0 +1,7 @@
+export { router } from '@inertiajs/core'
+export { default as createInertiaApp } from './createInertiaApp'
+export { default as inertia } from './link'
+export { default as Link } from './Link.svelte'
+export { default as page } from './page'
+export { default as remember } from './remember'
+export { default as useForm } from './useForm'

package/src/link.js

@@ -0,0 +1,49 @@
+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',
+  )
+  node.href = href
+  options.data = data
+
+  const dispatch = createEventDispatcher()
+
+  function visit(event) {
+    dispatch('click', event)
+
+    const href = node.href || options.href
+
+    if (!href) {
+      throw new Error('Option "href" is required')
+    }
+
+    if (shouldIntercept(event)) {
+      event.preventDefault()
+      router.visit(href, options)
+    }
+  }
+
+  node.addEventListener('click', visit)
+
+  return {
+    update(newOptions) {
+      const [href, data] = mergeDataIntoQueryString(
+        newOptions.method || 'get',
+        node.href || newOptions.href,
+        newOptions.data || {},
+        newOptions.queryStringArrayFormat || 'brackets',
+      )
+      node.href = href
+      newOptions.data = data
+      options = newOptions
+    },
+    destroy() {
+      node.removeEventListener('click', visit)
+    },
+  }
+}

package/src/page.js

@@ -0,0 +1,6 @@
+import { derived } from 'svelte/store'
+import store from './store'
+
+const page = derived(store, ($store) => $store.page)
+
+export default page

package/src/remember.js

@@ -0,0 +1,15 @@
+import { router } from '@inertiajs/core'
+import { onDestroy } from 'svelte'
+import { writable } from 'svelte/store'
+
+function useRemember(initialState, key) {
+  const restored = router.restore(key)
+  const store = writable(restored !== undefined ? restored : initialState)
+  const unsubscribe = store.subscribe((state) => router.remember(state, key))
+
+  onDestroy(unsubscribe)
+
+  return store
+}
+
+export default useRemember

package/src/store.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store'
+
+const store = writable({
+  component: null,
+  layout: [],
+  page: {},
+  key: null,
+})
+
+export default store

package/src/useForm.js

@@ -0,0 +1,208 @@
+import { router } from '@inertiajs/core'
+import isEqual from 'lodash.isequal'
+import { writable } from 'svelte/store'
+
+function useForm(...args) {
+  const rememberKey = typeof args[0] === 'string' ? args[0] : null
+  const data = (typeof args[0] === 'string' ? args[1] : args[0]) || {}
+  const restored = rememberKey ? router.restore(rememberKey) : null
+  let defaults = data
+  let cancelToken = null
+  let recentlySuccessfulTimeoutId = null
+  let transform = (data) => data
+
+  const store = writable({
+    ...(restored ? restored.data : data),
+    isDirty: false,
+    errors: restored ? restored.errors : {},
+    hasErrors: false,
+    progress: null,
+    wasSuccessful: false,
+    recentlySuccessful: false,
+    processing: false,
+    setStore(key, value) {
+      store.update((store) => {
+        return Object.assign({}, store, typeof key === 'string' ? { [key]: value } : key)
+      })
+    },
+    data() {
+      return Object.keys(data).reduce((carry, key) => {
+        carry[key] = this[key]
+        return carry
+      }, {})
+    },
+    transform(callback) {
+      transform = callback
+
+      return this
+    },
+    defaults(key, value) {
+      if (typeof key === 'undefined') {
+        defaults = Object.assign(defaults, this.data())
+
+        return this
+      }
+
+      defaults = Object.assign(defaults, value ? { [key]: value } : key)
+
+      return this
+    },
+    reset(...fields) {
+      if (fields.length === 0) {
+        this.setStore(defaults)
+      } else {
+        this.setStore(
+          Object.keys(defaults)
+            .filter((key) => fields.includes(key))
+            .reduce((carry, key) => {
+              carry[key] = defaults[key]
+              return carry
+            }, {}),
+        )
+      }
+
+      return this
+    },
+    setError(key, value) {
+      this.setStore('errors', {
+        ...this.errors,
+        ...(value ? { [key]: value } : key),
+      })
+
+      return this
+    },
+    clearErrors(...fields) {
+      this.setStore(
+        'errors',
+        Object.keys(this.errors).reduce(
+          (carry, field) => ({
+            ...carry,
+            ...(fields.length > 0 && !fields.includes(field) ? { [field]: this.errors[field] } : {}),
+          }),
+          {},
+        ),
+      )
+
+      return this
+    },
+    submit(method, url, options = {}) {
+      const data = transform(this.data())
+      const _options = {
+        ...options,
+        onCancelToken: (token) => {
+          cancelToken = token
+
+          if (options.onCancelToken) {
+            return options.onCancelToken(token)
+          }
+        },
+        onBefore: (visit) => {
+          this.setStore('wasSuccessful', false)
+          this.setStore('recentlySuccessful', false)
+          clearTimeout(recentlySuccessfulTimeoutId)
+
+          if (options.onBefore) {
+            return options.onBefore(visit)
+          }
+        },
+        onStart: (visit) => {
+          this.setStore('processing', true)
+
+          if (options.onStart) {
+            return options.onStart(visit)
+          }
+        },
+        onProgress: (event) => {
+          this.setStore('progress', event)
+
+          if (options.onProgress) {
+            return options.onProgress(event)
+          }
+        },
+        onSuccess: async (page) => {
+          this.setStore('processing', false)
+          this.setStore('progress', null)
+          this.clearErrors()
+          this.setStore('wasSuccessful', true)
+          this.setStore('recentlySuccessful', true)
+          recentlySuccessfulTimeoutId = setTimeout(() => this.setStore('recentlySuccessful', false), 2000)
+
+          if (options.onSuccess) {
+            return options.onSuccess(page)
+          }
+        },
+        onError: (errors) => {
+          this.setStore('processing', false)
+          this.setStore('progress', null)
+          this.clearErrors().setError(errors)
+
+          if (options.onError) {
+            return options.onError(errors)
+          }
+        },
+        onCancel: () => {
+          this.setStore('processing', false)
+          this.setStore('progress', null)
+
+          if (options.onCancel) {
+            return options.onCancel()
+          }
+        },
+        onFinish: () => {
+          this.setStore('processing', false)
+          this.setStore('progress', null)
+          cancelToken = null
+
+          if (options.onFinish) {
+            return options.onFinish()
+          }
+        },
+      }
+
+      if (method === 'delete') {
+        router.delete(url, { ..._options, data })
+      } else {
+        router[method](url, data, _options)
+      }
+    },
+    get(url, options) {
+      this.submit('get', url, options)
+    },
+    post(url, options) {
+      this.submit('post', url, options)
+    },
+    put(url, options) {
+      this.submit('put', url, options)
+    },
+    patch(url, options) {
+      this.submit('patch', url, options)
+    },
+    delete(url, options) {
+      this.submit('delete', url, options)
+    },
+    cancel() {
+      if (cancelToken) {
+        cancelToken.cancel()
+      }
+    },
+  })
+
+  store.subscribe((form) => {
+    if (form.isDirty === isEqual(form.data(), defaults)) {
+      form.setStore('isDirty', !form.isDirty)
+    }
+
+    const hasErrors = Object.keys(form.errors).length > 0
+    if (form.hasErrors !== hasErrors) {
+      form.setStore('hasErrors', !form.hasErrors)
+    }
+
+    if (rememberKey) {
+      router.remember({ data: form.data(), errors: form.errors }, rememberKey)
+    }
+  })
+
+  return store
+}
+
+export default useForm