@inertiajs/svelte 2.3.17 → 3.0.0-beta.1

package/dist/components/App.svelte

@@ -1,52 +1,128 @@
-<script context="module">import {} from "@inertiajs/core";
+<script module lang="ts">
+  import type { ComponentResolver, ResolvedComponent } from '../types'
+  import { type Page, type PageProps } from '@inertiajs/core'
+
+  export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
+    initialComponent: ResolvedComponent
+    initialPage: Page<SharedProps>
+    resolveComponent: ComponentResolver
+    defaultLayout?: (name: string, page: Page) => unknown
+  }
 </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, flash: initialPage.flash ?? {} };
-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);
-    },
-    onFlash: (flash) => {
-      page = { ...page, flash };
-      setPage(page);
+<script lang="ts">
+  import type { Component } from 'svelte'
+  import type { LayoutType, LayoutResolver } from '../types'
+  import { normalizeLayouts } from '@inertiajs/core'
+  import { router } from '@inertiajs/core'
+  import Render, { h, type RenderProps } from './Render.svelte'
+  import { setPage } from '../page.svelte'
+  import { resetLayoutProps } from '../layoutProps.svelte'
+
+  interface Props {
+    initialComponent: InertiaAppProps['initialComponent']
+    initialPage: InertiaAppProps['initialPage']
+    resolveComponent: InertiaAppProps['resolveComponent']
+    defaultLayout?: InertiaAppProps['defaultLayout']
+  }
+
+  const { initialComponent, initialPage, resolveComponent, defaultLayout }: Props = $props()
+
+  // svelte-ignore state_referenced_locally
+  let component = $state(initialComponent)
+  let key = $state<number | null>(null)
+  // svelte-ignore state_referenced_locally
+  let page = $state({ ...initialPage, flash: initialPage.flash ?? {} })
+  let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
+
+  // Reactively update the global page state when local page state changes
+  $effect.pre(() => {
+    setPage(page)
+  })
+
+  const isServer = typeof window === 'undefined'
+
+  if (!isServer) {
+    // svelte-ignore state_referenced_locally
+    router.init<ResolvedComponent>({
+      initialPage,
+      resolveComponent,
+      swapComponent: async (args) => {
+        component = args.component
+        page = args.page
+        key = args.preserveState ? key : Date.now()
+
+        if (!args.preserveState) {
+          resetLayoutProps()
+        }
+      },
+      onFlash: (flash) => {
+        page = { ...page, flash }
+      },
+    })
+  }
+
+  function isComponent(value: unknown): value is Component {
+    if (!value) {
+      return false
+    }
+
+    if (typeof value === 'function') {
+      const fn = value as Function & { name?: string }
+      return fn.name !== ''
+    }
+
+    if (typeof value === 'object' && '$$' in value) {
+      return true
     }
-  });
-}
-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, key2) {
-  if (isLayoutFunction(layout)) {
-    return layout(h, child);
+
+    return false
+  }
+
+  function isRenderFunction(value: unknown): boolean {
+    return (
+      typeof value === 'function' &&
+      (value as Function).length === 2 &&
+      typeof (value as Function).prototype === 'undefined'
+    )
   }
-  if (Array.isArray(layout)) {
-    return layout.slice().reverse().reduce((currentRender, layoutComponent) => h(layoutComponent, pageProps, [currentRender], key2), child);
+
+  function resolveRenderProps(component: ResolvedComponent, page: Page, key: number | null = null): RenderProps {
+    const child = h(component.default, page.props, [], key)
+
+    if (component.layout && isRenderFunction(component.layout)) {
+      return (component.layout as LayoutResolver)(h, child)
+    }
+
+    const effectiveLayout = (component.layout ?? defaultLayout?.(page.component, page)) as LayoutType | undefined
+
+    return effectiveLayout ? resolveLayout(effectiveLayout, child, page.props, key, !!component.layout) : child
+  }
+
+  function resolveLayout(
+    layout: LayoutType,
+    child: RenderProps,
+    pageProps: PageProps,
+    key: number | null,
+    isFromPage: boolean = true,
+  ): RenderProps {
+    if (isFromPage && isRenderFunction(layout)) {
+      return (layout as LayoutResolver)(h, child)
+    }
+
+    const layouts = normalizeLayouts(layout, isComponent, isFromPage ? isRenderFunction : undefined)
+
+    if (layouts.length > 0) {
+      return layouts.reduceRight((child, layout) => {
+        return {
+          ...h(layout.component, { ...pageProps, ...layout.props }, [child], key),
+          name: layout.name,
+        }
+      }, child)
+    }
+
+    return child
   }
-  return h(layout, pageProps, child ? [child] : [], key2);
-}
-function isLayoutFunction(layout) {
-  return typeof layout === "function" && layout.length === 2 && typeof layout.prototype === "undefined";
-}
 </script>
 
 <Render {...renderProps} />

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

@@ -1,27 +1,18 @@
-import { SvelteComponent } from "svelte";
 import type { ComponentResolver, ResolvedComponent } from '../types';
 import { type Page, type PageProps } from '@inertiajs/core';
 export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
     initialComponent: ResolvedComponent;
     initialPage: Page<SharedProps>;
     resolveComponent: ComponentResolver;
+    defaultLayout?: (name: string, page: Page) => unknown;
 }
-declare const __propDef: {
-    props: {
-        initialComponent: InertiaAppProps["initialComponent"];
-        initialPage: InertiaAppProps["initialPage"];
-        resolveComponent: InertiaAppProps["resolveComponent"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AppProps = typeof __propDef.props;
-export type AppEvents = typeof __propDef.events;
-export type AppSlots = typeof __propDef.slots;
-export default class App extends SvelteComponent<AppProps, AppEvents, AppSlots> {
+import type { Component } from 'svelte';
+interface Props {
+    initialComponent: InertiaAppProps['initialComponent'];
+    initialPage: InertiaAppProps['initialPage'];
+    resolveComponent: InertiaAppProps['resolveComponent'];
+    defaultLayout?: InertiaAppProps['defaultLayout'];
 }
-export {};
+declare const App: Component<Props, {}, "">;
+type App = ReturnType<typeof App>;
+export default App;

package/dist/components/Deferred.svelte

@@ -1,14 +1,73 @@
-<script>import { page } from "../index";
-export let data;
-const keys = Array.isArray(data) ? data : [data];
-$: loaded = keys.every((key) => typeof $page.props[key] !== "undefined");
-if (!$$slots.fallback) {
-  throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot');
-}
+<script lang="ts">
+  import { isSameUrlWithoutQueryOrHash, router } from '@inertiajs/core'
+  import { get } from 'lodash-es'
+  import { page } from '../index'
+
+  interface Props {
+    data: string | string[]
+    fallback?: import('svelte').Snippet
+    children?: import('svelte').Snippet<[{ reloading: boolean }]>
+  }
+
+  let { data, fallback, children }: Props = $props()
+
+  const keys = $derived(Array.isArray(data) ? data : [data])
+  const loaded = $derived(keys.every((key) => typeof get(page.props, key) !== 'undefined'))
+
+  let reloading = $state(false)
+  const activeReloads = new Set<object>()
+
+  const keysAreBeingReloaded = (only: string[], except: string[], keys: string[]): boolean => {
+    if (only.length === 0 && except.length === 0) {
+      return true
+    }
+
+    if (only.length > 0) {
+      return keys.some((key) => only.includes(key))
+    }
+
+    return keys.some((key) => !except.includes(key))
+  }
+
+  $effect(() => {
+    const removeStartListener = router.on('start', (e) => {
+      const visit = e.detail.visit
+
+      if (
+        visit.preserveState === true &&
+        isSameUrlWithoutQueryOrHash(visit.url, window.location) &&
+        keysAreBeingReloaded(visit.only, visit.except, keys)
+      ) {
+        activeReloads.add(visit)
+        reloading = true
+      }
+    })
+
+    const removeFinishListener = router.on('finish', (e) => {
+      const visit = e.detail.visit
+
+      if (activeReloads.has(visit)) {
+        activeReloads.delete(visit)
+        reloading = activeReloads.size > 0
+      }
+    })
+
+    return () => {
+      removeStartListener()
+      removeFinishListener()
+      activeReloads.clear()
+    }
+  })
+
+  $effect.pre(() => {
+    if (!fallback) {
+      throw new Error('`<Deferred>` requires a `fallback` snippet')
+    }
+  })
 </script>
 
 {#if loaded}
-  <slot />
+  {@render children?.({ reloading })}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}

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

@@ -1,21 +1,10 @@
-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> {
+interface Props {
+    data: string | string[];
+    fallback?: import('svelte').Snippet;
+    children?: import('svelte').Snippet<[{
+        reloading: boolean;
+    }]>;
 }
-export {};
+declare const Deferred: import("svelte").Component<Props, {}, "">;
+type Deferred = ReturnType<typeof Deferred>;
+export default Deferred;