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

package/dist/components/App.svelte

@@ -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)

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/layoutProps.svelte.d.ts

@@ -1,6 +1,5 @@
-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>;
+export declare function useLayoutProps<T extends Record<string, unknown>>(defaults: T): T;

package/dist/layoutProps.svelte.js

@@ -1,7 +1,15 @@
 import { createLayoutPropsStore, mergeLayoutProps } from '@inertiajs/core';
 import { getContext } from 'svelte';
-import { readable } from 'svelte/store';
 const store = createLayoutPropsStore();
+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);
 }
@@ -17,9 +25,12 @@ export function useLayoutProps(defaults) {
     const resolve = () => {
         const staticProps = context?.staticProps ?? {};
         const name = context?.name;
-        const { shared, named } = store.get();
-        const dynamicProps = name ? { ...shared, ...named[name] } : shared;
+        const dynamicProps = name ? { ...storeState.shared, ...(storeState.named[name] ?? {}) } : storeState.shared;
         return mergeLayoutProps(defaults, staticProps, dynamicProps);
     };
-    return readable(resolve(), (set) => store.subscribe(() => set(resolve())));
+    const state = $state(resolve());
+    $effect.pre(() => {
+        Object.assign(state, resolve());
+    });
+    return state;
 }

package/dist/types.d.ts

@@ -1,7 +1,7 @@
-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 LayoutTuple = [Component, Record<string, unknown>?];
 export type LayoutObject = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -56,7 +56,7 @@
     "@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"
+    "@inertiajs/core": "3.0.0-beta.3"
   },
   "scripts": {
     "build": "pnpm package && svelte-check --tsconfig ./tsconfig.json && publint",

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>