@inertiajs/svelte 3.0.0-beta.3 → 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']
@@ -98,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
   }
@@ -117,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/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,5 +1,8 @@
-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): T;

package/dist/layoutProps.svelte.js

@@ -1,7 +1,6 @@
-import { createLayoutPropsStore, mergeLayoutProps } from '@inertiajs/core';
-import { getContext } from 'svelte';
+import { createLayoutPropsStore } from '@inertiajs/core';
 const store = createLayoutPropsStore();
-const storeState = $state({
+export const storeState = $state({
     shared: {},
     named: {},
 });
@@ -18,19 +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 dynamicProps = name ? { ...storeState.shared, ...(storeState.named[name] ?? {}) } : storeState.shared;
-        return mergeLayoutProps(defaults, staticProps, dynamicProps);
-    };
-    const state = $state(resolve());
-    $effect.pre(() => {
-        Object.assign(state, resolve());
-    });
-    return state;
+    const snapshot = store.get();
+    storeState.shared = snapshot.shared;
+    storeState.named = snapshot.named;
 }

package/dist/types.d.ts

@@ -3,13 +3,14 @@ import type { Component } from 'svelte';
 import type { RenderFunction, RenderProps } from './components/Render.svelte';
 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.3",
+  "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.3"
+    "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"
   }
 }