inertiax-svelte 2.6.1 → 5.0.0

package/dist/components/Deferred.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from "svelte";
+const { page } = getContext("inertia");
+export let data;
+const keys = Array.isArray(data) ? data : [data];
+if (!$$slots.fallback) {
+  throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot');
+}
+</script>
+
+{#if keys.every((key) => $page.props[key] !== undefined)}
+  <slot />
+{:else}
+  <slot name="fallback" />
+{/if}

package/dist/components/Deferred.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data: string | string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        fallback: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DeferredProps = typeof __propDef.props;
+export type DeferredEvents = typeof __propDef.events;
+export type DeferredSlots = typeof __propDef.slots;
+export default class Deferred extends SvelteComponent<DeferredProps, DeferredEvents, DeferredSlots> {
+}
+export {};

package/dist/components/Frame.svelte

@@ -0,0 +1,110 @@
+<script>
+  import { setContext } from 'svelte'
+  import { toStore } from 'svelte/store';
+  import { Router } from 'inertiax-core';
+
+  import Render, { h } from './Render.svelte';
+  
+  let {
+    name = Math.random(),
+    renderLayout = name == '_top',
+    component,
+    props,
+    url,
+    version
+  } = $props()
+  
+
+  // const store = writable({ component: null, frame: null, key: null })
+  
+  let resolvedComponent = $state(null)
+  let key = $state(null)
+  
+  export const router = new Router({
+    frame: name,
+    initialState: {component, props, url, version},
+    swapComponent: async (opts) => {
+      ({ component: resolvedComponent, frame: {component, props, url} } = opts);
+      if (!opts.preserveState) key = Date.now();
+    },
+  })
+    
+  if (url) {
+    router.visit(url, {
+      preserveState: true,
+      preserveScroll: true
+    })
+  }
+  
+  if (component) {
+    Promise.all([Router.resolveComponent(component), router.decryptHistory().catch(() => {})]).then(
+      ([initialComponent]) => {
+        resolvedComponent = initialComponent
+        key = null
+      },
+    )
+  }
+  
+  const page = toStore(() => {component, props, url, version})
+  
+  const context = {router, page}
+  setContext('inertia', context)
+  setContext(`inertia:${name}`, context)
+  
+  const resolvedProps = $derived(resolveProps())
+  
+  function resolveProps() {
+    if (!resolvedComponent) return
+    const child = h(resolvedComponent.default, props, [], key);
+  
+    const layout = renderLayout && resolvedComponent.layout;
+  
+    return layout ? resolveLayout(layout, child, props, key) : child;
+  }
+  
+  function resolveLayout(layout, child, resolvedProps, key) {
+    if (isLayoutFunction(layout)) {
+      return layout(h, child);
+    }
+  
+    if (Array.isArray(layout)) {
+      return layout
+        .slice()
+        .reverse()
+        .reduce((currentRender, layoutComponent) => h(layoutComponent, pageProps, [currentRender], key), child);
+    }
+  
+    return h(layout, resolvedProps, child ? [child] : [], key);
+  }
+  
+  function isLayoutFunction(layout) {
+    return typeof layout === 'function' && layout.length === 2 && typeof layout.prototype === 'undefined';
+  }
+
+  function onclick(event) {
+    if (event.defaultPrevented) return
+    if (event.target.closest('[data-inertia-ignore]')) return;
+    
+    
+    const href = event.target.closest('[href]')?.getAttribute('href')
+    if (!href) return
+    
+    event.preventDefault();
+    
+    router.visit(href);
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="frame" {onclick}>
+  {#if resolvedProps}
+    <Render {...resolvedProps} />
+  {/if}
+</div>
+
+<style>
+  .frame {
+    display: contents;
+  }
+</style>

package/dist/components/Frame.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FrameProps */
+/** @typedef {typeof __propDef.events}  FrameEvents */
+/** @typedef {typeof __propDef.slots}  FrameSlots */
+export default class Frame extends SvelteComponent<{
+    router?: Router | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get router(): Router;
+}
+export type FrameProps = typeof __propDef.props;
+export type FrameEvents = typeof __propDef.events;
+export type FrameSlots = typeof __propDef.slots;
+import { Router } from 'inertiax-core';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        router?: Router | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/Link.svelte

@@ -0,0 +1,62 @@
+<script>import { inertia } from "../index";
+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 except = [];
+export let headers = {};
+export let queryStringArrayFormat = "brackets";
+export let async = false;
+export let prefetch = false;
+export let cacheFor = 0;
+$: asProp = method !== "get" ? "button" : as.toLowerCase();
+$: elProps = {
+  a: { href },
+  button: { type: "button" }
+}[asProp] || {};
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<svelte:element
+  this={asProp}
+  use:inertia={{
+    ...(as !== 'a' ? { href } : {}),
+    data,
+    method,
+    replace,
+    preserveScroll,
+    preserveState: preserveState ?? method !== 'get',
+    only,
+    except,
+    headers,
+    queryStringArrayFormat,
+    async,
+    prefetch,
+    cacheFor,
+  }}
+  {...$$restProps}
+  {...elProps}
+  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/dist/components/Link.svelte.d.ts

@@ -0,0 +1,53 @@
+import { SvelteComponent } from "svelte";
+import type { CacheForOption, FormDataConvertible, LinkPrefetchOption, Method, PreserveStateOption } from 'inertiax-core';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href: string;
+        as?: keyof HTMLElementTagNameMap | undefined;
+        data?: Record<string, FormDataConvertible> | undefined;
+        method?: Method | undefined;
+        replace?: boolean | undefined;
+        preserveScroll?: PreserveStateOption | undefined;
+        preserveState?: (PreserveStateOption | null) | undefined;
+        only?: string[] | undefined;
+        except?: string[] | undefined;
+        headers?: Record<string, string> | undefined;
+        queryStringArrayFormat?: ("brackets" | "indices") | undefined;
+        async?: boolean | undefined;
+        prefetch?: (boolean | LinkPrefetchOption | LinkPrefetchOption[]) | undefined;
+        cacheFor?: (CacheForOption | CacheForOption[]) | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        mousedown: MouseEvent;
+        mousemove: MouseEvent;
+        mouseout: MouseEvent;
+        mouseover: MouseEvent;
+        mouseup: MouseEvent;
+        'cancel-token': Event | MouseEvent | UIEvent | KeyboardEvent | ProgressEvent<EventTarget> | ErrorEvent | SubmitEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
+        before: Event | MouseEvent | UIEvent | KeyboardEvent | ProgressEvent<EventTarget> | ErrorEvent | SubmitEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
+        start: Event | MouseEvent | UIEvent | KeyboardEvent | ProgressEvent<EventTarget> | ErrorEvent | SubmitEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
+        progress: ProgressEvent<EventTarget>;
+        finish: Event | MouseEvent | UIEvent | KeyboardEvent | ProgressEvent<EventTarget> | ErrorEvent | SubmitEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
+        cancel: Event;
+        success: Event | MouseEvent | UIEvent | KeyboardEvent | ProgressEvent<EventTarget> | ErrorEvent | SubmitEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
+        error: ErrorEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/dist/components/Render.svelte

@@ -0,0 +1,34 @@
+<script context="module">export const h = (component, propsOrChildren, childrenOrKey, key = null) => {
+  const hasProps = typeof propsOrChildren === "object" && propsOrChildren !== null && !Array.isArray(propsOrChildren);
+  return {
+    component,
+    key: hasProps ? key : typeof childrenOrKey === "number" ? childrenOrKey : null,
+    props: hasProps ? propsOrChildren : {},
+    children: hasProps ? Array.isArray(childrenOrKey) ? childrenOrKey : childrenOrKey !== null ? [childrenOrKey] : [] : Array.isArray(propsOrChildren) ? propsOrChildren : propsOrChildren !== null ? [propsOrChildren] : []
+  };
+};
+</script>
+
+<script>export let component;
+export let props = {};
+export let children = [];
+export let key = null;
+</script>
+
+{#if component}
+  <!--
+  Add the `key` only to the last (page) component in the tree.
+  This ensures that the page component re-renders when `preserveState` is disabled,
+  while the layout components are persisted across page changes. -->
+  {#key children?.length === 0 ? key : null}
+    {#if children.length > 0}
+      <svelte:component this={component} {...props}>
+        {#each children as child}
+          <svelte:self {...child} />
+        {/each}
+      </svelte:component>
+    {:else}
+      <svelte:component this={component} {...props} />
+    {/if}
+  {/key}
+{/if}

package/dist/components/Render.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+import type { PageProps } from 'inertiax-core';
+import type { ComponentType } from 'svelte';
+export type RenderProps = {
+    component: ComponentType;
+    props?: PageProps;
+    children?: RenderProps[];
+    key?: number | null;
+} | null;
+export type RenderFunction = {
+    (component: ComponentType, props?: PageProps, children?: RenderProps[], key?: number | null): RenderProps;
+    (component: ComponentType, children?: RenderProps[], key?: number | null): RenderProps;
+};
+export declare const h: RenderFunction;
+declare const __propDef: {
+    props: {
+        component: ComponentType;
+        props?: PageProps;
+        children?: RenderProps[];
+        key?: number | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type RenderProps_ = typeof __propDef.props;
+export type RenderEvents = typeof __propDef.events;
+export type RenderSlots = typeof __propDef.slots;
+export default class Render extends SvelteComponent<RenderProps_, RenderEvents, RenderSlots> {
+}
+export {};

package/dist/components/WhenVisible.svelte

@@ -0,0 +1,73 @@
+<script>import {} from "inertiax-core";
+import { getContext, onDestroy, onMount } from "svelte";
+export let data = "";
+export let params = {};
+export let buffer = 0;
+export let as = "div";
+export let always = false;
+const { router } = getContext("inertia");
+let loaded = false;
+let fetching = false;
+let el;
+let observer = null;
+onMount(() => {
+  if (!el) {
+    return;
+  }
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (!entries[0].isIntersecting) {
+        return;
+      }
+      if (!always) {
+        observer?.disconnect();
+      }
+      if (fetching) {
+        return;
+      }
+      fetching = true;
+      const reloadParams = getReloadParams();
+      router.reload({
+        ...reloadParams,
+        onStart: (event) => {
+          fetching = true;
+          reloadParams.onStart?.(event);
+        },
+        onFinish: (event) => {
+          loaded = true;
+          fetching = false;
+          reloadParams.onFinish?.(event);
+        }
+      });
+    },
+    {
+      rootMargin: `${buffer}px`
+    }
+  );
+  observer.observe(el);
+});
+onDestroy(() => {
+  observer?.disconnect();
+});
+function getReloadParams() {
+  if (data !== "") {
+    return {
+      only: Array.isArray(data) ? data : [data]
+    };
+  }
+  if (!params.data) {
+    throw new Error("You must provide either a `data` or `params` prop.");
+  }
+  return params;
+}
+</script>
+
+{#if always || !loaded}
+  <svelte:element this={as} bind:this={el} />
+{/if}
+
+{#if loaded}
+  <slot />
+{:else if $$slots.fallback}
+  <slot name="fallback" />
+{/if}

package/dist/components/WhenVisible.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import { type ReloadOptions } from 'inertiax-core';
+declare const __propDef: {
+    props: {
+        data?: string | string[];
+        params?: ReloadOptions;
+        buffer?: number;
+        as?: keyof HTMLElementTagNameMap;
+        always?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        fallback: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type WhenVisibleProps = typeof __propDef.props;
+export type WhenVisibleEvents = typeof __propDef.events;
+export type WhenVisibleSlots = typeof __propDef.slots;
+export default class WhenVisible extends SvelteComponent<WhenVisibleProps, WhenVisibleEvents, WhenVisibleSlots> {
+}
+export {};

package/dist/createInertiaApp.d.ts

@@ -0,0 +1,10 @@
+export default function createInertiaApp({ id, resolve, setup, progress, page, }: {
+    id?: string | undefined;
+    resolve: any;
+    setup: any;
+    progress?: {} | undefined;
+    page: any;
+}): Promise<{
+    body: string;
+    head: any[];
+} | undefined>;

package/dist/createInertiaApp.js

@@ -0,0 +1,46 @@
+import { setupProgress, Router } from 'inertiax-core';
+import escape from 'html-escape';
+import Frame from './components/Frame.svelte';
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, }) {
+    const el = import.meta.env.SSR ? null : document.getElementById(id);
+    const initialState = page || JSON.parse(el?.dataset?.page || '{}');
+    // Router.setVersion(initialState.version);
+    Router.resolveComponent = (name) => Promise.resolve(resolve(name));
+    if (import.meta.env.SSR) {
+        const { render } = await dynamicImport('svelte/server');
+        const { html, head } = await (async () => {
+            return render(Frame, {
+                props: {
+                    name: "_top",
+                    ...initialState,
+                },
+            });
+        })();
+        return {
+            body: `<div data-server-rendered="true" id="${id}" data-page="${escape(JSON.stringify(initialState))}">${html}</div>`,
+            head: [head],
+        };
+    }
+    if (!el) {
+        throw new Error(`Element with ID "${id}" not found.`);
+    }
+    if (progress) {
+        setupProgress(progress);
+    }
+    setup({
+        el,
+        App: Frame,
+        props: {
+            name: "_top",
+            ...initialState,
+        },
+    });
+}
+async function dynamicImport(module) {
+    try {
+        return await import(/* @vite-ignore */ module);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Frame } from './components/Frame.svelte';
+export { default as Deferred } from './components/Deferred.svelte';
+export { default as WhenVisible } from './components/WhenVisible.svelte';
+export { default as createInertiaApp } from './createInertiaApp';
+export { type ResolvedComponent } from './types';
+export { default as useForm, type InertiaForm, type InertiaFormProps } from './useForm';
+export { default as usePoll } from './usePoll';
+export { default as usePrefetch } from './usePrefetch';
+export { default as useRemember } from './useRemember';

package/dist/index.js

@@ -0,0 +1,9 @@
+export { default as Frame } from './components/Frame.svelte';
+export { default as Deferred } from './components/Deferred.svelte';
+export { default as WhenVisible } from './components/WhenVisible.svelte';
+export { default as createInertiaApp } from './createInertiaApp';
+export {} from './types';
+export { default as useForm } from './useForm';
+export { default as usePoll } from './usePoll';
+export { default as usePrefetch } from './usePrefetch';
+export { default as useRemember } from './useRemember';

package/dist/link.d.ts

@@ -0,0 +1,22 @@
+import { type CacheForOption, type FormDataConvertible, type GlobalEventsMap, type LinkPrefetchOption, type VisitOptions } from 'inertiax-core';
+import type { CancelTokenSource } from 'axios';
+import type { ActionReturn } from 'svelte/action';
+interface ActionElement extends HTMLElement {
+    href?: string;
+}
+type ActionParameters = Omit<VisitOptions, 'data' | 'prefetch'> & {
+    href?: string;
+    data?: Record<string, FormDataConvertible>;
+    prefetch?: boolean | LinkPrefetchOption | LinkPrefetchOption[];
+    cacheFor?: CacheForOption | CacheForOption[];
+};
+type SelectedEventKeys = 'start' | 'progress' | 'finish' | 'before' | 'cancel' | 'success' | 'error';
+type SelectedGlobalEventsMap = Pick<GlobalEventsMap, SelectedEventKeys>;
+type ActionAttributes = {
+    [K in keyof SelectedGlobalEventsMap as `on:${K}` | `on${K}`]?: (event: CustomEvent<SelectedGlobalEventsMap[K]['details']>) => void;
+} & {
+    'on:cancel-token'?: (event: CustomEvent<CancelTokenSource>) => void;
+    oncanceltoken?: (event: CustomEvent<CancelTokenSource>) => void;
+};
+declare function link(node: ActionElement, initialParams?: ActionParameters): ActionReturn<ActionParameters, ActionAttributes>;
+export default link;