@inertiajs/svelte 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/components/App.svelte

@@ -17,7 +17,7 @@
   import { router } from '@inertiajs/core'
   import Render, { h, type RenderProps } from './Render.svelte'
   import { setPage } from '../page.svelte'
-  import { resetLayoutProps } from '../layoutProps.svelte'
+  import { resetLayoutProps, storeState } from '../layoutProps.svelte'
 
   interface Props {
     initialComponent: InertiaAppProps['initialComponent']
@@ -35,6 +35,10 @@
   let page = $state({ ...initialPage, flash: initialPage.flash ?? {} })
   let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
 
+  // Synchronous initialization so the global page store is populated during SSR
+  // ($effect.pre does not run during Svelte 5 SSR)
+  setPage(page)
+
   // Reactively update the global page state when local page state changes
   $effect.pre(() => {
     setPage(page)
@@ -94,7 +98,18 @@
       return (component.layout as LayoutResolver)(h, child)
     }
 
-    const effectiveLayout = (component.layout ?? defaultLayout?.(page.component, page)) as LayoutType | undefined
+    let effectiveLayout: LayoutType | undefined
+    const layoutValue = component.layout
+
+    if (
+      typeof layoutValue === 'function' &&
+      (layoutValue as Function).length <= 1 &&
+      typeof (layoutValue as Function).prototype === 'undefined'
+    ) {
+      effectiveLayout = (layoutValue as Function)(page.props) as LayoutType | undefined
+    } else {
+      effectiveLayout = (layoutValue ?? defaultLayout?.(page.component, page)) as LayoutType | undefined
+    }
 
     return effectiveLayout ? resolveLayout(effectiveLayout, child, page.props, key, !!component.layout) : child
   }
@@ -113,9 +128,21 @@
     const layouts = normalizeLayouts(layout, isComponent, isFromPage ? isRenderFunction : undefined)
 
     if (layouts.length > 0) {
+      const dynamicProps = isServer ? { shared: {}, named: {} } : { shared: storeState.shared, named: storeState.named }
+
       return layouts.reduceRight((child, layout) => {
         return {
-          ...h(layout.component, { ...pageProps, ...layout.props }, [child], key),
+          ...h(
+            layout.component,
+            {
+              ...pageProps,
+              ...layout.props,
+              ...dynamicProps.shared,
+              ...(layout.name ? dynamicProps.named[layout.name] || {} : {}),
+            },
+            [child],
+            key,
+          ),
           name: layout.name,
         }
       }, child)

package/dist/components/Deferred.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { isSameUrlWithoutQueryOrHash, router } from '@inertiajs/core'
-  import { get } from 'lodash-es'
+  import { get } from 'es-toolkit/compat'
   import { page } from '../index'
 
   interface Props {

package/dist/components/Form.svelte

@@ -16,7 +16,7 @@
     UseFormUtils,
   } from '@inertiajs/core'
   import { type NamedInputEvent, type ValidationConfig, type Validator } from 'laravel-precognition'
-  import { isEqual } from 'lodash-es'
+  import { isEqual } from 'es-toolkit'
   import { onMount } from 'svelte'
   import { setFormContext } from './formContext'
   import useForm from '../useForm.svelte'

package/dist/components/InfiniteScroll.svelte

@@ -9,6 +9,7 @@
     useInfiniteScroll,
   } from '@inertiajs/core'
   import { onDestroy, onMount } from 'svelte'
+  import { usePage } from '../page.svelte'
 
   interface Props {
     data: InfiniteScrollComponentBaseProps['data']
@@ -57,11 +58,13 @@
   let itemsElementRef: HTMLElement = $state(null!)
   let startElementRef: HTMLElement = $state(null!)
   let endElementRef: HTMLElement = $state(null!)
+  const scrollProp = usePage().scrollProps?.[data]
+
   let loadingPrevious = $state(false)
   let loadingNext = $state(false)
   let requestCount = $state(0)
-  let hasPreviousPage = $state(false)
-  let hasNextPage = $state(false)
+  let hasPreviousPage = $state(!!scrollProp?.previousPage)
+  let hasNextPage = $state(!!scrollProp?.nextPage)
 
   let infiniteScrollInstance: UseInfiniteScrollProps = $state(null!)
 

package/dist/components/Render.svelte

@@ -39,23 +39,9 @@
 
 <script lang="ts">
   import Render from './Render.svelte'
-  import { setContext } from 'svelte'
-  import { LAYOUT_CONTEXT_KEY } from '../layoutProps.svelte'
 
   // svelte-ignore state_referenced_locally
-  const { component, props = {}, children = [], key = null, name }: RenderProps = $props()
-
-  // svelte-ignore state_referenced_locally
-  if (children.length > 0) {
-    setContext(LAYOUT_CONTEXT_KEY, {
-      get staticProps() {
-        return props
-      },
-      get name() {
-        return name
-      },
-    })
-  }
+  const { component, props = {}, children = [], key = null }: RenderProps = $props()
 </script>
 
 {#if component}

package/dist/components/WhenVisible.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { router, type ReloadOptions } from '@inertiajs/core'
-  import { get } from 'lodash-es'
+  import { get } from 'es-toolkit/compat'
   import { usePage } from '../page.svelte'
 
   interface Props {

package/dist/createInertiaApp.d.ts

@@ -1,4 +1,4 @@
-import { type CreateInertiaAppOptions, type CreateInertiaAppOptionsForCSR, type InertiaAppSSRResponse, type Page, type PageProps } from '@inertiajs/core';
+import { type CreateInertiaAppOptions, type CreateInertiaAppOptionsForCSR, type InertiaAppSSRResponse, type Page, type PageProps, type SharedPageProps } from '@inertiajs/core';
 import App, { type InertiaAppProps } from './components/App.svelte';
 import type { ComponentResolver, SvelteInertiaAppConfig } from './types';
 type SvelteRenderResult = {
@@ -10,14 +10,22 @@ type SetupOptions<SharedProps extends PageProps> = {
     App: typeof App;
     props: InertiaAppProps<SharedProps>;
 };
-type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig>;
+type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig> & {
+    withApp?: (context: Map<any, any>, options: {
+        ssr: boolean;
+    }) => void;
+};
 type InertiaAppOptionsAuto<SharedProps extends PageProps> = CreateInertiaAppOptions<ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig> & {
     page?: Page<SharedProps>;
+    withApp?: (context: Map<any, any>, options: {
+        ssr: boolean;
+    }) => void;
 };
 type SvelteServerRender = (component: typeof App, options: {
     props: InertiaAppProps<PageProps>;
+    context?: Map<any, any>;
 }) => 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 default function createInertiaApp<SharedProps extends PageProps = PageProps & SharedPageProps>(options: InertiaAppOptionsForCSR<SharedProps>): Promise<InertiaAppSSRResponse | void>;
+export default function createInertiaApp<SharedProps extends PageProps = PageProps & SharedPageProps>(options?: InertiaAppOptionsAuto<SharedProps>): Promise<void | RenderFunction<SharedProps>>;
 export {};

package/dist/createInertiaApp.js

@@ -2,7 +2,7 @@ import { buildSSRBody, getInitialPageFromDOM, http as httpModule, router, setupP
 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 = {}, http, layout, } = {}) {
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, defaults = {}, http, layout, withApp, } = {}) {
     config.replace(defaults);
     if (http) {
         httpModule.setClient(http);
@@ -27,7 +27,11 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
                 svelteApp = result;
             }
             else {
-                svelteApp = render(App, { props });
+                const context = new Map();
+                if (withApp) {
+                    withApp(context, { ssr: true });
+                }
+                svelteApp = render(App, { props, context });
             }
             const body = buildSSRBody(id, page, svelteApp.body);
             return {
@@ -60,11 +64,17 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
     if (setup) {
         await setup({ el: target, App, props });
     }
-    else if (target.hasAttribute('data-server-rendered')) {
-        hydrate(App, { target, props });
-    }
     else {
-        mount(App, { target, props });
+        const context = new Map();
+        if (withApp) {
+            withApp(context, { ssr: false });
+        }
+        if (target.hasAttribute('data-server-rendered')) {
+            hydrate(App, { target, props, context });
+        }
+        else {
+            mount(App, { target, props, context });
+        }
     }
     if (progress) {
         setupProgress(progress);

package/dist/index.d.ts

@@ -8,10 +8,10 @@ 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 { resetLayoutProps, setLayoutProps, setLayoutPropsFor } from './layoutProps.svelte';
 export { default as inertia } from './link';
 export { default as page, usePage } from './page.svelte';
-export { type ResolvedComponent, type SvelteInertiaAppConfig } from './types';
+export { type LayoutCallback, type ResolvedComponent, type SvelteInertiaAppConfig } from './types';
 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';

package/dist/index.js

@@ -9,7 +9,7 @@ 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 { resetLayoutProps, setLayoutProps, setLayoutPropsFor } from './layoutProps.svelte';
 export { default as inertia } from './link';
 export { default as page, usePage } from './page.svelte';
 export {} from './types';

package/dist/layoutProps.svelte.d.ts

@@ -1,6 +1,8 @@
-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;
+import { type LayoutProps, type NamedLayoutProps } from '@inertiajs/core';
+export declare const storeState: {
+    shared: Record<string, unknown>;
+    named: Record<string, Record<string, unknown>>;
+};
+export declare function setLayoutProps(props: Partial<LayoutProps>): void;
+export declare function setLayoutPropsFor<K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>): 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

@@ -1,7 +1,14 @@
-import { createLayoutPropsStore, mergeLayoutProps } from '@inertiajs/core';
-import { getContext } from 'svelte';
-import { readable } from 'svelte/store';
+import { createLayoutPropsStore } from '@inertiajs/core';
 const store = createLayoutPropsStore();
+export const storeState = $state({
+    shared: {},
+    named: {},
+});
+store.subscribe(() => {
+    const snapshot = store.get();
+    storeState.shared = snapshot.shared;
+    storeState.named = snapshot.named;
+});
 export function setLayoutProps(props) {
     store.set(props);
 }
@@ -10,16 +17,7 @@ export function setLayoutPropsFor(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())));
+    const snapshot = store.get();
+    storeState.shared = snapshot.shared;
+    storeState.named = snapshot.named;
 }

package/dist/types.d.ts

@@ -1,15 +1,16 @@
-import { type Page } from '@inertiajs/core';
+import { type Page, type SharedPageProps } from '@inertiajs/core';
 import type { Component } from 'svelte';
 import type { RenderFunction, RenderProps } from './components/Render.svelte';
-export type ComponentResolver = (name: string, page?: Page) => ResolvedComponent | Promise<ResolvedComponent>;
+export type ComponentResolver = (name: string, page?: Page<SharedPageProps>) => ResolvedComponent | Promise<ResolvedComponent>;
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps;
+export type LayoutCallback = (props: SharedPageProps) => unknown;
 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 LayoutType = LayoutResolver | LayoutCallback | Component | Component[] | LayoutTuple | LayoutObject | NamedLayouts | (Component | LayoutTuple | LayoutObject)[];
 export type ResolvedComponent = {
     default: Component;
     layout?: LayoutType;

package/dist/useForm.svelte.js

@@ -1,5 +1,5 @@
 import { router, UseFormUtils } from '@inertiajs/core';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep } from 'es-toolkit';
 import useFormState, {} from './useFormState.svelte';
 let reservedFormKeys = null;
 let bootstrapping = false;

package/dist/useFormState.svelte.js

@@ -1,6 +1,7 @@
 import { router, UseFormUtils } from '@inertiajs/core';
+import { cloneDeep, isEqual } from 'es-toolkit';
+import { get, has, set } from 'es-toolkit/compat';
 import { createValidator, resolveName, toSimpleValidationErrors } from 'laravel-precognition';
-import { cloneDeep, get, has, isEqual, set } from 'lodash-es';
 import { config } from '.';
 export default function useFormState(options) {
     const { data: dataOption, rememberKey, precognitionEndpoint: initialPrecognitionEndpoint } = options;

package/dist/useHttp.svelte.d.ts

@@ -21,12 +21,12 @@ export interface UseHttpProps<TForm extends object, TResponse = unknown> {
     resetAndClearErrors<K extends FormDataKeys<TForm>>(...fields: K[]): this;
     setError<K extends FormDataKeys<TForm>>(field: K, value: ErrorValue): this;
     setError(errors: FormDataErrors<TForm>): this;
-    submit(...args: UseHttpSubmitArguments<TResponse, TForm>): Promise<TResponse>;
-    get(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
-    post(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
-    put(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
-    patch(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
-    delete(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    submit<R = TResponse>(...args: UseHttpSubmitArguments<R, TForm>): Promise<R>;
+    get<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
+    post<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
+    put<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
+    patch<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
+    delete<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
     cancel(): void;
     dontRemember<K extends FormDataKeys<TForm>>(...fields: K[]): this;
     optimistic(callback: (currentData: TForm) => Partial<TForm>): this;

package/dist/useHttp.svelte.js

@@ -1,6 +1,6 @@
 import { hasFiles, http, HttpCancelledError, HttpResponseError, mergeDataIntoQueryString, objectToFormData, UseFormUtils, } from '@inertiajs/core';
+import { cloneDeep } from 'es-toolkit';
 import { toSimpleValidationErrors } from 'laravel-precognition';
-import { cloneDeep } from 'lodash-es';
 import useFormState, {} from './useFormState.svelte';
 export default function useHttp(...args) {
     const { rememberKey, data, precognitionEndpoint } = UseFormUtils.parseUseFormArguments(...args);
@@ -72,7 +72,7 @@ export default function useHttp(...args) {
                     options.onProgress?.(event);
                 },
             });
-            const responseData = JSON.parse(response.data);
+            const responseData = (response.data ? JSON.parse(response.data) : null);
             if (response.status >= 200 && response.status < 300) {
                 markAsSuccessful();
                 setFormState('response', responseData);

package/dist/useRemember.svelte.js

@@ -1,5 +1,5 @@
 import { router } from '@inertiajs/core';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep } from 'es-toolkit';
 export default function useRemember(initialState, key) {
     const restored = router.restore(key);
     const state = $state(restored !== undefined ? cloneDeep(restored) : initialState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -53,10 +53,9 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@types/lodash-es": "^4.17.12",
-    "laravel-precognition": "2.0.0-beta.3",
-    "lodash-es": "^4.17.23",
-    "@inertiajs/core": "3.0.0-beta.2"
+    "es-toolkit": "^1.33.0",
+    "laravel-precognition": "2.0.0-beta.5",
+    "@inertiajs/core": "3.0.0-beta.4"
   },
   "scripts": {
     "build": "pnpm package && svelte-check --tsconfig ./tsconfig.json && publint",
@@ -64,7 +63,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "pnpm package --watch",
-    "es2020-check": "pnpm build:with-deps && es-check es2020 \"dist/**/*.js\" --checkFeatures --module --noCache --verbose",
+    "es2022-check": "pnpm build:with-deps && es-check es2022 \"dist/**/*.js\" --checkFeatures --module --noCache --verbose",
     "package": "svelte-kit sync && svelte-package --input src"
   }
 }

package/resources/boost/skills/inertia-svelte-development/SKILL.blade.php

@@ -389,8 +389,8 @@ const layout = useLayoutProps({
 let { children } = $props()
 </script>
 
-<header>{$layout.title}</header>
-{#if $layout.showSidebar}
+<header>{layout.title}</header>
+{#if layout.showSidebar}
     <aside>Sidebar</aside>
 {/if}
 <main>