State and Stores

// From '$app/state'
const page: Page;

interface Page {
  url: URL;
  params: Record<string, string>;
  route: { id: string | null };
  status: number;
  error: App.Error | null;
  data: Record<string, any>;
  state: Record<string, any>;
  form: any;
}

<script>
  import { page } from '$app/state';
</script>

<h1>{page.data.title}</h1>
<p>Route: {page.route.id}</p>
<p>Status: {page.status}</p>

{#if page.error}
  <p>Error: {page.error.message}</p>
{/if}

{#if page.form?.success}
  <p>Form submitted successfully!</p>
{/if}

// From '$app/state'
const navigating: Navigation | null;

type Navigation =
  | NavigationExternal
  | NavigationFormSubmit
  | NavigationPopState
  | NavigationLink;

interface NavigationBase {
  from: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  to: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  willUnload: boolean;
  delta?: number;
  complete: Promise<void>;
}

interface NavigationExternal extends NavigationBase {
  type: 'leave' | 'goto';
}

interface NavigationFormSubmit extends NavigationBase {
  type: 'form';
}

interface NavigationPopState extends NavigationBase {
  type: 'popstate';
}

interface NavigationLink extends NavigationBase {
  type: 'link';
}

<script>
  import { navigating } from '$app/state';
</script>

{#if navigating}
  <div class="loading">
    Navigating to {navigating.to?.url.pathname}...
  </div>
{/if}

// From '$app/state'
const updated: { get current(): boolean; check(): Promise<boolean> };

<script>
  import { updated } from '$app/state';
</script>

{#if updated.current}
  <div class="toast">
    New version available!
    <button on:click={() => location.reload()}>Reload</button>
  </div>
{/if}

<button on:click={async () => {
  const hasUpdate = await updated.check();
  if (hasUpdate) console.log('Update available');
}}>
  Check for updates
</button>

// From '$app/stores'
const page: Readable<Page>;
const navigating: Readable<Navigation | null>;
const updated: Readable<boolean> & { check(): Promise<boolean> };

function getStores(): {
  page: Readable<Page>;
  navigating: Readable<Navigation | null>;
  updated: Readable<boolean> & { check(): Promise<boolean> };
};

<script>
  import { page, navigating } from '$app/stores';
</script>

<h1>{$page.data.title}</h1>

{#if $navigating}
  <p>Loading...</p>
{/if}