inertiax-svelte 1.0.15

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,34 @@
+{
+  "name": "inertiax-svelte",
+  "version": "1.0.15",
+  "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"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./server": "./src/server.js"
+  },
+  "main": "src/index.js",
+  "peerDependencies": {
+    "svelte": "^5.0.0-next.0"
+  },
+  "dependencies": {
+    "lodash.clonedeep": "^4.5.0",
+    "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,17 @@
+<script>
+  import Render, { h } from './Render.svelte'
+  import store from './store'
+
+  $: 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/Frame.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { onMount } from 'svelte'
+  import Render, { h } from './Render.svelte'
+  import store from './store'
+  import { router } from '@inertiajs/svelte'
+  import { setContext } from 'svelte';
+
+  export let src
+  
+  export let id = Math.random()
+  setContext('inertia:frame-id', id)
+  $: setContext('inertia:frame-src', src)
+
+  $: components = $store.frames?.[id] && h($store.frames[id].component.default, $store.frames[id].props)
+
+  onMount(() => {
+    router.visit(src, {
+      target: id
+    })
+  })
+
+</script>
+
+<div data-inertia-frame-id={id}>
+  {#if components}
+    <Render {...components} />
+  {:else}
+    <slot />
+  {/if}
+</div>
+
+<style>
+  div {
+    display: contents;
+  }
+</style>

package/src/Link.svelte

@@ -0,0 +1,59 @@
+<script>
+  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(() => {
+    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>`,
+      )
+    }
+  })
+</script>
+
+<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 />
+</svelte:element>

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

@@ -0,0 +1,63 @@
+import { router, setupProgress } from '@inertiajs/core'
+import { render } from 'svelte/server';
+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 }) {
+  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))
+
+  await resolveComponent(initialPage.component).then((initialComponent) => {
+    store.set({
+      component: initialComponent,
+      page: initialPage,
+    })
+  })
+
+  if (!isServer) {
+    router.init({
+      initialPage,
+      resolveComponent,
+      swapComponent: async ({ component, page, preserveState }) => {
+        const targetFrame = page.target
+        if (targetFrame) store.update((current) => ({
+          ...current,
+          frames: { ...current.frames, [targetFrame]: {component, props: page.props} }
+        }))
+        else store.update((current) => ({
+          component,
+          page,
+          frames: current.frames,
+          key: preserveState ? current.key : Date.now(),
+        }))
+      },
+    })
+
+    if (progress) {
+      setupProgress(progress)
+    }
+
+    return setup({
+      el,
+      App,
+      props: {
+        initialPage,
+        resolveComponent,
+      },
+    })
+  }
+
+  if (isServer) {
+    const { html, head } = render(SSR, { props: {id, initialPage} })
+
+    return {
+      body: html,
+      head: [
+        head
+      ],
+    }
+  }
+}

package/src/index.js

@@ -0,0 +1,8 @@
+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 Frame } from './Frame.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,55 @@
+import { mergeDataIntoQueryString, router, shouldIntercept } from '@inertiajs/core'
+
+export default (node, options = {}) => {
+  const [href, data] = hrefAndData(options)
+  node.href = href
+  options.data = data
+
+  function fireEvent(name, eventOptions = {}) {
+    return node.dispatchEvent(new CustomEvent(name, eventOptions))
+  }
+
+  function hrefAndData(options) {
+    return mergeDataIntoQueryString(
+      options.method || 'get',
+      node.href || options.href || '',
+      options.data || {},
+      options.queryStringArrayFormat || 'brackets',
+    )
+  }
+
+  function visit(event) {
+    if (!node.href) {
+      throw new Error('Option "href" is required')
+    }
+
+    if (shouldIntercept(event)) {
+      event.preventDefault()
+
+      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] = hrefAndData(newOptions)
+      node.href = href
+      options = { ...newOptions, data }
+    },
+    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/server.js

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

package/src/store.js

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

package/src/useForm.js

@@ -0,0 +1,215 @@
+import { router } from '@inertiajs/core'
+import isEqual from 'lodash.isequal'
+import cloneDeep from 'lodash.clonedeep'
+import { writable } from 'svelte/store'
+import { getContext } from 'svelte'
+
+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
+  const frameId = getContext('inertia:frame-id')
+  const frameSrc = getContext('inertia:frame-src')
+  let defaults = cloneDeep(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, cloneDeep(this.data()))
+
+        return this
+      }
+
+      defaults = Object.assign(defaults, cloneDeep(value ? { [key]: value } : key))
+
+      return this
+    },
+    reset(...fields) {
+      let clonedDefaults = cloneDeep(defaults)
+      if (fields.length === 0) {
+        this.setStore(clonedDefaults)
+      } else {
+        this.setStore(
+          Object.keys(clonedDefaults)
+            .filter((key) => fields.includes(key))
+            .reduce((carry, key) => {
+              carry[key] = clonedDefaults[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())
+      if (frameSrc) data.frameSrc = frameSrc
+      const _options = {
+        ...options,
+        target: typeof(options.target) !== 'undefined' ? options.target : frameId,
+        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