@inertiajs/svelte 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/components/App.svelte

@@ -1,25 +1,48 @@
-<script>import Render, { h } from "./Render.svelte";
-import store, {} from "../store";
-$: props = resolveProps($store);
-function resolveProps({ component, page, key = null }) {
-  const child = h(component.default, page.props, [], key);
-  const layout = component.layout;
-  return layout ? resolveLayout(layout, child, page.props, key) : child;
+<script context="module">import {} from "@inertiajs/core";
+</script>
+
+<script>import { router } from "@inertiajs/core";
+import Render, { h } from "./Render.svelte";
+import { setPage } from "../page";
+export let initialComponent;
+export let initialPage;
+export let resolveComponent;
+let component = initialComponent;
+let key = null;
+let page = initialPage;
+let renderProps = resolveRenderProps(component, page, key);
+setPage(page);
+const isServer = typeof window === "undefined";
+if (!isServer) {
+  router.init({
+    initialPage,
+    resolveComponent,
+    swapComponent: async (args) => {
+      component = args.component;
+      page = args.page;
+      key = args.preserveState ? key : Date.now();
+      renderProps = resolveRenderProps(component, page, key);
+      setPage(page);
+    }
+  });
+}
+function resolveRenderProps(component2, page2, key2 = null) {
+  const child = h(component2.default, page2.props, [], key2);
+  const layout = component2.layout;
+  return layout ? resolveLayout(layout, child, page2.props, key2) : child;
 }
-function resolveLayout(layout, child, pageProps, key) {
+function resolveLayout(layout, child, pageProps, key2) {
   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 layout.slice().reverse().reduce((currentRender, layoutComponent) => h(layoutComponent, pageProps, [currentRender], key2), child);
   }
-  return h(layout, pageProps, child ? [child] : [], key);
+  return h(layout, pageProps, child ? [child] : [], key2);
 }
 function isLayoutFunction(layout) {
   return typeof layout === "function" && layout.length === 2 && typeof layout.prototype === "undefined";
 }
 </script>
 
-{#if props}
-  <Render {...props} />
-{/if}
+<Render {...renderProps} />

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

@@ -1,6 +1,17 @@
 import { SvelteComponent } from "svelte";
+import type { ComponentResolver, ResolvedComponent } from '../types';
+import { type Page } from '@inertiajs/core';
+export interface InertiaAppProps {
+    initialComponent: ResolvedComponent;
+    initialPage: Page;
+    resolveComponent: ComponentResolver;
+}
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        initialComponent: InertiaAppProps["initialComponent"];
+        initialPage: InertiaAppProps["initialPage"];
+        resolveComponent: InertiaAppProps["resolveComponent"];
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Deferred.svelte

@@ -1,12 +1,22 @@
 <script>import { page } from "../index";
+import { onDestroy } from "svelte";
 export let data;
 const keys = Array.isArray(data) ? data : [data];
+let loaded = false;
+const unsubscribe = page.subscribe(({ props }) => {
+  window.queueMicrotask(() => {
+    loaded = keys.every((key) => typeof props[key] !== "undefined");
+  });
+});
+onDestroy(() => {
+  unsubscribe();
+});
 if (!$$slots.fallback) {
   throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot');
 }
 </script>
 
-{#if keys.every((key) => $page.props[key] !== undefined)}
+{#if loaded}
   <slot />
 {:else}
   <slot name="fallback" />

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

@@ -28,13 +28,13 @@ declare const __propDef: {
         mouseout: MouseEvent;
         mouseover: MouseEvent;
         mouseup: MouseEvent;
-        'cancel-token': FocusEvent | UIEvent | Event | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
-        before: FocusEvent | UIEvent | Event | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
-        start: FocusEvent | UIEvent | Event | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        'cancel-token': Event | FocusEvent | UIEvent | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        before: Event | FocusEvent | UIEvent | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        start: Event | FocusEvent | UIEvent | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
         progress: ProgressEvent<EventTarget>;
-        finish: FocusEvent | UIEvent | Event | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        finish: Event | FocusEvent | UIEvent | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
         cancel: Event;
-        success: FocusEvent | UIEvent | Event | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        success: Event | FocusEvent | UIEvent | MouseEvent | ProgressEvent<EventTarget> | AnimationEvent | InputEvent | CompositionEvent | ClipboardEvent | DragEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
         error: ErrorEvent;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -6,7 +6,7 @@ export type RenderProps = {
     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;

package/dist/components/WhenVisible.svelte

@@ -3,7 +3,7 @@ import { onDestroy, onMount } from "svelte";
 export let data = "";
 export let params = {};
 export let buffer = 0;
-export let elementTag = "div";
+export let as = "div";
 export let always = false;
 let loaded = false;
 let fetching = false;
@@ -62,7 +62,7 @@ function getReloadParams() {
 </script>
 
 {#if always || !loaded}
-  <svelte:element this={elementTag} bind:this={el} />
+  <svelte:element this={as} bind:this={el} />
 {/if}
 
 {#if loaded}

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         data?: string | string[];
         params?: ReloadOptions;
         buffer?: number;
-        elementTag?: keyof HTMLElementTagNameMap;
+        as?: keyof HTMLElementTagNameMap;
         always?: boolean;
     };
     events: {

package/dist/createInertiaApp.d.ts

@@ -1,18 +1,25 @@
 import { type InertiaAppResponse, type Page } from '@inertiajs/core';
 import type { ComponentType } from 'svelte';
-import App from './components/App.svelte';
+import App, { type InertiaAppProps } from './components/App.svelte';
 import type { ComponentResolver } from './types';
+type SvelteRenderResult = {
+    html: string;
+    head: string;
+    css?: {
+        code: string;
+    };
+};
+type AppComponent = ComponentType<App> & {
+    render: (props: InertiaAppProps) => SvelteRenderResult;
+};
 interface CreateInertiaAppProps {
     id?: string;
     resolve: ComponentResolver;
-    setup?: (props: {
-        el: HTMLElement;
-        App: ComponentType<App>;
-        props: {
-            initialPage: Page;
-            resolveComponent: ComponentResolver;
-        };
-    }) => void | App;
+    setup: (props: {
+        el: HTMLElement | null;
+        App: AppComponent;
+        props: InertiaAppProps;
+    }) => void | App | SvelteRenderResult;
     progress?: false | {
         delay?: number;
         color?: string;

package/dist/createInertiaApp.js

@@ -1,70 +1,29 @@
 import { router, setupProgress } from '@inertiajs/core';
 import escape from 'html-escape';
-import { version as SVELTE_VERSION } from 'svelte/package.json';
-import App from './components/App.svelte';
-import store from './store';
+import App, {} from './components/App.svelte';
 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 initialPage = page || JSON.parse(el?.dataset.page || '{}');
     const resolveComponent = (name) => Promise.resolve(resolve(name));
-    await Promise.all([resolveComponent(initialPage.component), router.decryptHistory().catch(() => { })]).then(([initialComponent]) => {
-        store.set({
-            component: initialComponent,
-            page: initialPage,
-            key: null,
-        });
+    const [initialComponent] = await Promise.all([
+        resolveComponent(initialPage.component),
+        router.decryptHistory().catch(() => { }),
+    ]);
+    const props = { initialPage, initialComponent, resolveComponent };
+    const svelteApp = setup({
+        el,
+        App: App,
+        props
     });
     if (isServer) {
-        const isSvelte5 = SVELTE_VERSION.startsWith('5');
-        const { html, head, css } = await (async () => {
-            if (isSvelte5) {
-                const { render } = await dynamicImport('svelte/server');
-                if (typeof render === 'function') {
-                    return render(App);
-                }
-            }
-            return App.render();
-        })();
+        const { html, head, css } = svelteApp;
         return {
             body: `<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>` : ''],
         };
     }
-    if (!el) {
-        throw new Error(`Element with ID "${id}" not found.`);
-    }
-    router.init({
-        initialPage,
-        resolveComponent,
-        swapComponent: async ({ component, page, preserveState }) => {
-            store.update((current) => ({
-                component: component,
-                page,
-                key: preserveState ? current.key : Date.now(),
-            }));
-        },
-    });
     if (progress) {
         setupProgress(progress);
     }
-    setup({
-        el,
-        App,
-        props: {
-            initialPage,
-            resolveComponent,
-        },
-    });
-}
-// Loads the module dynamically during execution instead of at
-// build time. The `@vite-ignore` flag prevents Vite from
-// analyzing or pre-bundling this import.
-async function dynamicImport(module) {
-    try {
-        return await import(/* @vite-ignore */ module);
-    }
-    catch {
-        return null;
-    }
 }

package/dist/link.js

@@ -2,7 +2,6 @@ import { mergeDataIntoQueryString, router, shouldIntercept, } from '@inertiajs/c
 function link(node, initialParams = {}) {
     let inFlightCount = 0;
     let hoverTimeout;
-    // Variables initialized and controlled by the "update" function
     let prefetchModes = [];
     let cacheForValue;
     let method;
@@ -36,7 +35,6 @@ function link(node, initialParams = {}) {
         },
         click: (event) => {
             if (shouldIntercept(event)) {
-                // Let the mouseup event handle the visit
                 event.preventDefault();
             }
         },
@@ -53,15 +51,11 @@ function link(node, initialParams = {}) {
         })();
         cacheForValue = (() => {
             if (cacheFor !== 0) {
-                // If they've provided a value, respect it
                 return cacheFor;
             }
             if (prefetchModes.length === 1 && prefetchModes[0] === 'click') {
-                // If they've only provided a prefetch mode of 'click',
-                // we should only prefetch for the next request but not keep it around
                 return 0;
             }
-            // Otherwise, default to 30 seconds
             return 30_000;
         })();
         method = (params.method?.toLowerCase() || 'get');
@@ -147,7 +141,6 @@ function link(node, initialParams = {}) {
         removeEventListeners();
     }
     update(initialParams);
-    // TODO: Confirm is this needs to rerun when "prefetchModes" changes
     if (prefetchModes.includes('mount')) {
         prefetch();
     }

package/dist/page.d.ts

@@ -1,2 +1,12 @@
-declare const page: import("svelte/store").Readable<import("@inertiajs/core").Page<import("@inertiajs/core").PageProps>>;
-export default page;
+import { type Page } from '@inertiajs/core';
+export declare const setPage: {
+    (this: void, value: Page<import("@inertiajs/core").PageProps>): void;
+    (this: void, value: Page<import("@inertiajs/core").PageProps>): void;
+};
+declare const _default: {
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<Page<import("@inertiajs/core").PageProps>>, invalidate?: import("svelte/store").Invalidator<Page<import("@inertiajs/core").PageProps>> | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<Page<import("@inertiajs/core").PageProps>>, invalidate?: import("svelte/store").Invalidator<Page<import("@inertiajs/core").PageProps>> | undefined): import("svelte/store").Unsubscriber;
+    };
+};
+export default _default;

package/dist/page.js

@@ -1,4 +1,5 @@
-import { derived } from 'svelte/store';
-import store from './store';
-const page = derived(store, ($store) => $store.page);
-export default page;
+import {} from '@inertiajs/core';
+import { writable } from 'svelte/store';
+const { set, subscribe } = writable();
+export const setPage = set;
+export default { subscribe };

package/dist/usePrefetch.js

@@ -5,8 +5,8 @@ export default function usePrefetch(options = {}) {
     const isPrefetched = writable(false);
     const isPrefetching = writable(false);
     const lastUpdatedAt = writable(null);
-    const cached = router.getCached(window.location.pathname, options);
-    const inFlight = router.getPrefetching(window.location.pathname, options);
+    const cached = typeof window === 'undefined' ? null : router.getCached(window.location.pathname, options);
+    const inFlight = typeof window === 'undefined' ? null : router.getPrefetching(window.location.pathname, options);
     isPrefetched.set(cached !== null);
     isPrefetching.set(inFlight !== null);
     lastUpdatedAt.set(cached?.staleTimestamp || null);
@@ -26,8 +26,12 @@ export default function usePrefetch(options = {}) {
         });
     });
     onDestroy(() => {
-        removePrefetchedListener();
-        removePrefetchingListener();
+        if (removePrefetchedListener) {
+            removePrefetchedListener();
+        }
+        if (removePrefetchingListener) {
+            removePrefetchingListener();
+        }
     });
     return {
         isPrefetched: readonly(isPrefetched),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -43,7 +43,7 @@
     "svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.244"
   },
   "dependencies": {
-    "@inertiajs/core": "2.0.0-beta.1",
+    "@inertiajs/core": "2.0.0-beta.2",
     "html-escape": "^2.0.0",
     "lodash": "^4.5.0"
   },

package/dist/store.d.ts

@@ -1,9 +0,0 @@
-import type { Page } from '@inertiajs/core';
-import type { ResolvedComponent } from './types';
-export interface InertiaStore {
-    component: ResolvedComponent;
-    page: Page;
-    key: number | null;
-}
-declare const store: import("svelte/store").Writable<InertiaStore>;
-export default store;

package/dist/store.js

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