@inertiajs/svelte 2.3.17 → 3.0.0-beta.1

package/dist/components/WhenVisible.svelte

@@ -1,76 +1,93 @@
-<script>import { router } from "@inertiajs/core";
-import { onDestroy } from "svelte";
-import { usePage } from "../page";
-export let data = "";
-export let params = {};
-export let buffer = 0;
-export let as = "div";
-export let always = false;
-let loaded = false;
-let fetching = false;
-let el;
-let observer = null;
-const page = usePage();
-$: keys = data ? Array.isArray(data) ? data : [data] : [];
-$: loaded = keys.length > 0 && keys.every((key) => $page.props[key] !== void 0);
-$: if (el && (!loaded || always)) {
-  registerObserver();
-}
-function registerObserver() {
-  observer?.disconnect();
-  observer = new IntersectionObserver(
-    (entries) => {
-      if (!entries[0].isIntersecting) {
-        return;
-      }
-      if (fetching) {
-        return;
-      }
-      if (!always && loaded) {
-        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);
-          if (!always) {
-            observer?.disconnect();
-          }
+<script lang="ts">
+  import { router, type ReloadOptions } from '@inertiajs/core'
+  import { get } from 'lodash-es'
+  import { usePage } from '../page.svelte'
+
+  interface Props {
+    data?: string | string[]
+    params?: ReloadOptions
+    buffer?: number
+    as?: keyof HTMLElementTagNameMap
+    always?: boolean
+    children?: import('svelte').Snippet<[any]>
+    fallback?: import('svelte').Snippet
+  }
+
+  let { data = '', params = {}, buffer = 0, as = 'div', always = false, children, fallback }: Props = $props()
+
+  let keys = $derived(data ? (Array.isArray(data) ? data : [data]) : [])
+  let loaded = $derived(keys.length > 0 && keys.every((key) => get(page.props, key) !== undefined))
+  let fetching = $state(false)
+  let observer: IntersectionObserver | null = null
+
+  const page = usePage()
+
+  function attachObserver(el: HTMLElement) {
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0].isIntersecting) {
+          return
         }
-      });
-    },
-    {
-      rootMargin: `${buffer}px`
+
+        if (fetching) {
+          return
+        }
+
+        if (!always && loaded) {
+          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)
+
+            if (!always) {
+              observer?.disconnect()
+            }
+          },
+        })
+      },
+      {
+        rootMargin: `${buffer}px`,
+      },
+    )
+
+    observer.observe(el)
+
+    // Clean up will run like onDestroy
+    return () => {
+      observer?.disconnect()
     }
-  );
-  observer.observe(el);
-}
-onDestroy(() => {
-  observer?.disconnect();
-});
-function getReloadParams() {
-  const reloadParams = { ...params };
-  if (data !== "") {
-    reloadParams.only = Array.isArray(data) ? data : [data];
   }
-  return reloadParams;
-}
+
+  function getReloadParams(): Partial<ReloadOptions> {
+    const reloadParams: Partial<ReloadOptions> = { preserveErrors: true, ...params }
+
+    if (data !== '') {
+      reloadParams.only = (Array.isArray(data) ? data : [data]) as string[]
+    }
+
+    return reloadParams
+  }
 </script>
 
 {#if always || !loaded}
-  <svelte:element this={as} bind:this={el} />
+  <svelte:element this={as} {@attach attachObserver} />
 {/if}
 
 {#if loaded}
-  <slot {fetching} />
-{:else if $$slots.fallback}
-  <slot name="fallback" />
+  {@render children?.({ fetching })}
+{:else if fallback}
+  {@render fallback?.()}
 {/if}

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

@@ -1,28 +1,13 @@
-import { SvelteComponent } from "svelte";
 import { type ReloadOptions } from '@inertiajs/core';
-declare const __propDef: {
-    props: {
-        data?: string | string[];
-        params?: ReloadOptions;
-        buffer?: number;
-        as?: keyof HTMLElementTagNameMap;
-        always?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            fetching: boolean;
-        };
-        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> {
+interface Props {
+    data?: string | string[];
+    params?: ReloadOptions;
+    buffer?: number;
+    as?: keyof HTMLElementTagNameMap;
+    always?: boolean;
+    children?: import('svelte').Snippet<[any]>;
+    fallback?: import('svelte').Snippet;
 }
-export {};
+declare const WhenVisible: import("svelte").Component<Props, {}, "">;
+type WhenVisible = ReturnType<typeof WhenVisible>;
+export default WhenVisible;

package/dist/components/createForm.d.ts

@@ -0,0 +1,8 @@
+import type { FormComponentSlotProps } from '@inertiajs/core';
+import type { Component, ComponentProps, Snippet } from 'svelte';
+import Form from './Form.svelte';
+type TypedFormComponent<TForm extends Record<string, any>> = Component<Omit<ComponentProps<typeof Form>, 'children'> & {
+    children?: Snippet<[FormComponentSlotProps<TForm>]>;
+}>;
+export declare function createForm<TForm extends Record<string, any> = Record<string, any>>(): TypedFormComponent<TForm>;
+export {};

package/dist/components/createForm.js

@@ -0,0 +1,4 @@
+import Form from './Form.svelte';
+export function createForm() {
+    return Form;
+}

package/dist/components/formContext.d.ts

@@ -1,4 +1,4 @@
 import type { FormComponentRef } from '@inertiajs/core';
-import type { Readable } from 'svelte/store';
-export declare const FormContextKey: unique symbol;
-export declare function useFormContext(): Readable<FormComponentRef> | undefined;
+declare const setFormContext: (context: FormComponentRef) => FormComponentRef;
+export declare function useFormContext<TForm extends object = Record<string, any>>(): FormComponentRef<TForm> | undefined;
+export { setFormContext };

package/dist/components/formContext.js

@@ -1,5 +1,11 @@
-import { getContext } from 'svelte';
-export const FormContextKey = Symbol('InertiaFormContext');
+import { createContext } from 'svelte';
+const [getFormContext, setFormContext] = createContext();
 export function useFormContext() {
-    return getContext(FormContextKey);
+    try {
+        return getFormContext();
+    }
+    catch {
+        return undefined;
+    }
 }
+export { setFormContext };

package/dist/createInertiaApp.d.ts

@@ -1,18 +1,23 @@
-import { type CreateInertiaAppOptionsForCSR, type InertiaAppResponse, type PageProps } from '@inertiajs/core';
+import { type CreateInertiaAppOptions, type CreateInertiaAppOptionsForCSR, type InertiaAppSSRResponse, type Page, type PageProps } from '@inertiajs/core';
 import App, { type InertiaAppProps } from './components/App.svelte';
 import type { ComponentResolver, SvelteInertiaAppConfig } from './types';
 type SvelteRenderResult = {
-    html: string;
+    body: string;
     head: string;
-    css?: {
-        code: string;
-    };
 };
 type SetupOptions<SharedProps extends PageProps> = {
     el: HTMLElement | null;
     App: typeof App;
     props: InertiaAppProps<SharedProps>;
 };
-type InertiaAppOptions<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig>;
-export default function createInertiaApp<SharedProps extends PageProps = PageProps>({ id, resolve, setup, progress, page, defaults, }: InertiaAppOptions<SharedProps>): InertiaAppResponse;
+type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig>;
+type InertiaAppOptionsAuto<SharedProps extends PageProps> = CreateInertiaAppOptions<ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig> & {
+    page?: Page<SharedProps>;
+};
+type SvelteServerRender = (component: typeof App, options: {
+    props: InertiaAppProps<PageProps>;
+}) => SvelteRenderResult;
+type RenderFunction<SharedProps extends PageProps> = (page: Page<SharedProps>, render: SvelteServerRender) => Promise<InertiaAppSSRResponse>;
+export default function createInertiaApp<SharedProps extends PageProps = PageProps>(options: InertiaAppOptionsForCSR<SharedProps>): Promise<InertiaAppSSRResponse | void>;
+export default function createInertiaApp<SharedProps extends PageProps = PageProps>(options?: InertiaAppOptionsAuto<SharedProps>): Promise<void | RenderFunction<SharedProps>>;
 export {};

package/dist/createInertiaApp.js

@@ -1,33 +1,72 @@
-import { getInitialPageFromDOM, router, setupProgress, } from '@inertiajs/core';
-import { escape } from 'lodash-es';
+import { buildSSRBody, getInitialPageFromDOM, http as httpModule, router, setupProgress, } from '@inertiajs/core';
+import { hydrate, mount } from 'svelte';
 import App, {} from './components/App.svelte';
 import { config } from './index';
-export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, defaults = {}, }) {
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, defaults = {}, http, layout, } = {}) {
     config.replace(defaults);
+    if (http) {
+        httpModule.setClient(http);
+    }
     const isServer = typeof window === 'undefined';
-    const useScriptElementForInitialPage = config.get('future.useScriptElementForInitialPage');
-    const initialPage = page || getInitialPageFromDOM(id, useScriptElementForInitialPage);
-    const resolveComponent = (name) => Promise.resolve(resolve(name));
-    const svelteApp = await Promise.all([
-        resolveComponent(initialPage.component),
-        router.decryptHistory().catch(() => { }),
-    ]).then(([initialComponent]) => {
-        return setup({
-            el: isServer ? null : document.getElementById(id),
-            App,
-            props: { initialPage, initialComponent, resolveComponent },
-        });
-    });
-    if (isServer && svelteApp) {
-        const { html, head, css } = svelteApp;
-        return {
-            body: useScriptElementForInitialPage
-                ? `<script data-page="${id}" type="application/json">${JSON.stringify(initialPage).replace(/\//g, '\\/')}</script><div data-server-rendered="true" id="${id}">${html}</div>`
-                : `<div data-server-rendered="true" id="${id}" data-page="${escape(JSON.stringify(initialPage))}">${html}</div>`,
-            head: [head, css ? `<style data-vite-css>${css.code}</style>` : ''],
+    const resolveComponent = (name, page) => Promise.resolve(resolve(name, page));
+    if (isServer && !page) {
+        return async (page, render) => {
+            const initialComponent = (await resolveComponent(page.component, page));
+            const props = {
+                initialPage: page,
+                initialComponent,
+                resolveComponent,
+                defaultLayout: layout,
+            };
+            let svelteApp;
+            if (setup) {
+                const result = await setup({ el: null, App, props });
+                if (!result) {
+                    throw new Error('Inertia SSR setup function must return a render result ({ body, head })');
+                }
+                svelteApp = result;
+            }
+            else {
+                svelteApp = render(App, { props });
+            }
+            const body = buildSSRBody(id, page, svelteApp.body);
+            return {
+                body,
+                head: [svelteApp.head],
+            };
         };
     }
-    if (!isServer && progress) {
+    const initialPage = page || getInitialPageFromDOM(id);
+    const [initialComponent] = await Promise.all([
+        resolveComponent(initialPage.component, initialPage),
+        router.decryptHistory().catch(() => { }),
+    ]);
+    const props = { initialPage, initialComponent, resolveComponent, defaultLayout: layout };
+    if (isServer) {
+        if (!setup) {
+            throw new Error('Inertia SSR requires a setup function that returns a render result ({ body, head })');
+        }
+        const svelteApp = await setup({ el: null, App, props });
+        if (svelteApp) {
+            const body = buildSSRBody(id, initialPage, svelteApp.body);
+            return {
+                body,
+                head: [svelteApp.head],
+            };
+        }
+        return;
+    }
+    const target = document.getElementById(id);
+    if (setup) {
+        await setup({ el: target, App, props });
+    }
+    else if (target.hasAttribute('data-server-rendered')) {
+        hydrate(App, { target, props });
+    }
+    else {
+        mount(App, { target, props });
+    }
+    if (progress) {
         setupProgress(progress);
     }
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { progress, router } from '@inertiajs/core';
+export { http, progress, router } from '@inertiajs/core';
 export { default as App } from './components/App.svelte';
+export { createForm } from './components/createForm';
 export { default as Deferred } from './components/Deferred.svelte';
 export { default as Form } from './components/Form.svelte';
 export { useFormContext } from './components/formContext';
@@ -7,11 +8,13 @@ export { default as InfiniteScroll } from './components/InfiniteScroll.svelte';
 export { default as Link } from './components/Link.svelte';
 export { default as WhenVisible } from './components/WhenVisible.svelte';
 export { default as createInertiaApp } from './createInertiaApp';
+export { resetLayoutProps, setLayoutProps, setLayoutPropsFor, useLayoutProps } from './layoutProps.svelte';
 export { default as inertia } from './link';
-export { default as page, usePage } from './page';
+export { default as page, usePage } from './page.svelte';
 export { type ResolvedComponent, type SvelteInertiaAppConfig } from './types';
-export { default as useForm, type InertiaForm, type InertiaFormProps, type InertiaPrecognitiveForm } from './useForm';
+export { default as useForm, type InertiaForm, type InertiaFormProps, type InertiaPrecognitiveForm, } from './useForm.svelte';
+export { default as useHttp } from './useHttp.svelte';
 export { default as usePoll } from './usePoll';
-export { default as usePrefetch } from './usePrefetch';
-export { default as useRemember } from './useRemember';
+export { default as usePrefetch } from './usePrefetch.svelte';
+export { default as useRemember } from './useRemember.svelte';
 export declare const config: import("@inertiajs/core").Config<import("@inertiajs/core").InertiaAppConfig>;

package/dist/index.js

@@ -1,6 +1,7 @@
 import { config as coreConfig } from '@inertiajs/core';
-export { progress, router } from '@inertiajs/core';
+export { http, progress, router } from '@inertiajs/core';
 export { default as App } from './components/App.svelte';
+export { createForm } from './components/createForm';
 export { default as Deferred } from './components/Deferred.svelte';
 export { default as Form } from './components/Form.svelte';
 export { useFormContext } from './components/formContext';
@@ -8,11 +9,13 @@ export { default as InfiniteScroll } from './components/InfiniteScroll.svelte';
 export { default as Link } from './components/Link.svelte';
 export { default as WhenVisible } from './components/WhenVisible.svelte';
 export { default as createInertiaApp } from './createInertiaApp';
+export { resetLayoutProps, setLayoutProps, setLayoutPropsFor, useLayoutProps } from './layoutProps.svelte';
 export { default as inertia } from './link';
-export { default as page, usePage } from './page';
+export { default as page, usePage } from './page.svelte';
 export {} from './types';
-export { default as useForm } from './useForm';
+export { default as useForm, } from './useForm.svelte';
+export { default as useHttp } from './useHttp.svelte';
 export { default as usePoll } from './usePoll';
-export { default as usePrefetch } from './usePrefetch';
-export { default as useRemember } from './useRemember';
+export { default as usePrefetch } from './usePrefetch.svelte';
+export { default as useRemember } from './useRemember.svelte';
 export const config = coreConfig.extend({});

package/dist/layoutProps.svelte.d.ts

@@ -0,0 +1,6 @@
+import { type Readable } from 'svelte/store';
+export declare function setLayoutProps(props: Record<string, unknown>): void;
+export declare function setLayoutPropsFor(name: string, props: Record<string, unknown>): void;
+export declare function resetLayoutProps(): void;
+export declare const LAYOUT_CONTEXT_KEY: unique symbol;
+export declare function useLayoutProps<T extends Record<string, unknown>>(defaults: T): Readable<T>;

package/dist/layoutProps.svelte.js

@@ -0,0 +1,25 @@
+import { createLayoutPropsStore, mergeLayoutProps } from '@inertiajs/core';
+import { getContext } from 'svelte';
+import { readable } from 'svelte/store';
+const store = createLayoutPropsStore();
+export function setLayoutProps(props) {
+    store.set(props);
+}
+export function setLayoutPropsFor(name, props) {
+    store.setFor(name, props);
+}
+export function resetLayoutProps() {
+    store.reset();
+}
+export const LAYOUT_CONTEXT_KEY = Symbol('inertia-layout');
+export function useLayoutProps(defaults) {
+    const context = getContext(LAYOUT_CONTEXT_KEY);
+    const resolve = () => {
+        const staticProps = context?.staticProps ?? {};
+        const name = context?.name;
+        const { shared, named } = store.get();
+        const dynamicProps = name ? { ...shared, ...named[name] } : shared;
+        return mergeLayoutProps(defaults, staticProps, dynamicProps);
+    };
+    return readable(resolve(), (set) => store.subscribe(() => set(resolve())));
+}

package/dist/link.js

@@ -1,4 +1,4 @@
-import { isUrlMethodPair, mergeDataIntoQueryString, router, shouldIntercept, shouldNavigate, } from '@inertiajs/core';
+import { isUrlMethodPair, mergeDataIntoQueryString, resolveUrlMethodPairComponent, router, shouldIntercept, shouldNavigate, } from '@inertiajs/core';
 import { config } from '.';
 function link(node, initialParams = {}) {
     let inFlightCount = 0;
@@ -55,7 +55,7 @@ function link(node, initialParams = {}) {
             }
         },
     };
-    function update({ cacheFor = 0, prefetch = false, cacheTags: cacheTagValues = [], viewTransition = false, ...params }) {
+    function update({ cacheFor = 0, prefetch = false, cacheTags: cacheTagValues = [], viewTransition = false, component: componentProp, instant = false, pageProps: pagePropsProp = null, ...params }) {
         prefetchModes = (() => {
             if (prefetch === true) {
                 return ['hover'];
@@ -77,6 +77,15 @@ function link(node, initialParams = {}) {
         cacheTags = Array.isArray(cacheTagValues) ? cacheTagValues : [cacheTagValues];
         method = isUrlMethodPair(params.href) ? params.href.method : params.method?.toLowerCase() || 'get';
         [href, data] = hrefAndData(method, params);
+        const resolvedComponent = (() => {
+            if (componentProp) {
+                return componentProp;
+            }
+            if (instant && isUrlMethodPair(params.href)) {
+                return resolveUrlMethodPairComponent(params.href);
+            }
+            return null;
+        })();
         if (node.tagName === 'A') {
             node.href = href;
         }
@@ -91,6 +100,8 @@ function link(node, initialParams = {}) {
             except: params.except || [],
             headers: params.headers || {},
             async: params.async || false,
+            component: resolvedComponent,
+            pageProps: pagePropsProp,
         };
         visitParams = {
             ...baseParams,

package/dist/page.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Page, type PageProps, type SharedPageProps } from '@inertiajs/core';
+type SveltePage<TPageProps extends PageProps = PageProps> = Omit<Page<TPageProps & SharedPageProps>, 'props'> & {
+    props: Page<TPageProps & SharedPageProps>['props'] & {
+        [key: string]: any;
+    };
+};
+declare const page: SveltePage<PageProps>;
+export declare function setPage(newPage: SveltePage): void;
+export declare function usePage<TPageProps extends PageProps = PageProps>(): SveltePage<TPageProps>;
+export default page;

package/dist/page.svelte.js

@@ -0,0 +1,14 @@
+import {} from '@inertiajs/core';
+const page = $state({
+    component: '',
+    props: {},
+    url: '',
+    version: null,
+});
+export function setPage(newPage) {
+    Object.assign(page, newPage);
+}
+export function usePage() {
+    return page;
+}
+export default page;

package/dist/types.d.ts

@@ -1,10 +1,17 @@
-import type { ComponentType } from 'svelte';
+import { type Page } from '@inertiajs/core';
+import type { Component } from 'svelte';
 import type { RenderFunction, RenderProps } from './components/Render.svelte';
-export type ComponentResolver = (name: string) => ResolvedComponent | Promise<ResolvedComponent>;
+export type ComponentResolver = (name: string, page?: Page) => ResolvedComponent | Promise<ResolvedComponent>;
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps;
-export type LayoutType = LayoutResolver | ComponentType | ComponentType[];
+export type LayoutTuple = [Component, Record<string, unknown>?];
+export type LayoutObject = {
+    component: Component;
+    props?: Record<string, unknown>;
+};
+export type NamedLayouts = Record<string, Component | LayoutTuple | LayoutObject>;
+export type LayoutType = LayoutResolver | Component | Component[] | LayoutTuple | LayoutObject | NamedLayouts | (Component | LayoutTuple | LayoutObject)[];
 export type ResolvedComponent = {
-    default: ComponentType;
+    default: Component;
     layout?: LayoutType;
 };
 export type SvelteInertiaAppConfig = {};

package/dist/types.js

@@ -1 +1 @@
-export {};
+import {} from '@inertiajs/core';

package/dist/{useForm.d.ts → useForm.svelte.d.ts}

@@ -1,8 +1,7 @@
-import type { ErrorValue, FormDataErrors, FormDataKeys, FormDataType, FormDataValues, Method, Progress, UrlMethodPair, UseFormSubmitArguments, UseFormSubmitOptions, UseFormTransformCallback, UseFormWithPrecognitionArguments } from '@inertiajs/core';
+import type { ErrorValue, FormDataErrors, FormDataKeys, FormDataType, FormDataValues, Method, OptimisticCallback, Progress, UrlMethodPair, UseFormSubmitArguments, UseFormSubmitOptions, UseFormTransformCallback, UseFormWithPrecognitionArguments } from '@inertiajs/core';
 import type { NamedInputEvent, PrecognitionPath, ValidationConfig, Validator } from 'laravel-precognition';
-import { type Writable } from 'svelte/store';
-type InertiaFormStore<TForm extends object> = Writable<InertiaForm<TForm>> & InertiaForm<TForm>;
-type InertiaPrecognitiveFormStore<TForm extends object> = Writable<InertiaPrecognitiveForm<TForm>> & InertiaPrecognitiveForm<TForm>;
+type InertiaFormStore<TForm extends object> = InertiaForm<TForm>;
+type InertiaPrecognitiveFormStore<TForm extends object> = InertiaPrecognitiveForm<TForm>;
 type PrecognitionValidationConfig<TKeys> = ValidationConfig & {
     only?: TKeys[] | Iterable<TKeys> | ArrayLike<TKeys>;
 };
@@ -34,6 +33,7 @@ export interface InertiaFormProps<TForm extends object> {
     delete(url: string, options?: UseFormSubmitOptions): void;
     cancel(): void;
     dontRemember<K extends FormDataKeys<TForm>>(...fields: K[]): this;
+    optimistic<TProps>(callback: OptimisticCallback<TProps>): this;
     withPrecognition: (...args: UseFormWithPrecognitionArguments) => InertiaPrecognitiveFormStore<TForm>;
 }
 export interface InertiaFormValidationProps<TForm extends object> {