SvelteKitの$app/xxxの各種モジュールの使い方

import { browser, dev, building, version } from '$app/environment'

<script>
  import { browser } from '$app/environment'
</script>

<h1>browser: {browser}</h1>

<script>
  import { dev } from '$app/environment'
</script>

<h1>dev: {dev}</h1>

<script>
  import { building } from '$app/environment'
</script>

<h1>building: {building}</h1>

const config = {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
    }),
    version: {
      name: '1.2.3',
    },
  },
  preprocess: vitePreprocess(),
}

<script>
  import { version } from '$app/environment'
</script>

<h1>version: {version}</h1>

import { applyAction, deserialize, enhance } from '$app/forms'

<script>
  import { applyAction } from '$app/forms'

  let name = ''

  function handleSubmit() {
    applyAction(name)
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <label for="name">名前:</label>
  <input type="text" id="name" bind:value={name} />
  <button type="submit">送信</button>
</form>

<script>
  import { deserialize } from '$app/forms'

  let str = '{"name": "John", "age": 35}'
  let dObj

  function handleDeserialize() {
    dObj = deserialize(str)
  }
</script>

<textarea bind:value={str} rows="4" cols="30"></textarea><br>
<button on:click={handleDeserialize}>deserialize</button>

{#if dObj}
  {(console.log(dObj), '')}
  <h1>結果</h1>
  <pre>{JSON.stringify(dObj, null, 2)}</pre>
{/if}

<script>
  import { enhance } from '$app/forms'
</script>

<form
  use:enhance={({ form, data, action, cancel, submitter }) => {
  }}
>
  <!-- formの内容 -->
</form>

import {
    afterNavigate,
    beforeNavigate,
    disableScrollHandling,
    goto,
    invalidate,
    invalidateAll,
    preloadCode,
    preloadData
} from '$app/navigation'

<script>
  import { afterNavigate } from '$app/navigation'

  afterNavigate(() => {
    console.log('&#x1f34e; 遷移前のページ')
  })
</script>

<!-- /afterNavigate/ -->
<h1>&#x1f34e; 遷移前のページ</h1>
<p><a href="/afterNavigateNext/">&#x1f34c; 遷移後のページへ</a></p>

<script>
  import { afterNavigate } from '$app/navigation'

  afterNavigate(() => {
    console.log('&#x1f34c; 遷移後のページ')
  })
</script>

<!-- /afterNavigateNext/ -->
<h1>&#x1f34c; 遷移後のページ</h1>
<p><a href="/afterNavigate/">&#x1f34e; 遷移前のページへ</a></p>

<script>
  import { beforeNavigate } from '$app/navigation'

  beforeNavigate(() => {
    alert('iwb.jpのトップページに遷移します')
  })
</script>

<p><a href="https://iwb.jp/">iwb.jpのトップページへ</a></p>

<script>
  import { afterNavigate, disableScrollHandling } from '$app/navigation'

  afterNavigate(() => {
    disableScrollHandling()
  })
</script>

<h1>disableScrollHandling Sample</h1>
<p>別ページに遷移後にスクロール位置が変更されません。</p>
<p><a href="/disableScrollHandlingNext/">別ページに遷移</a></p>

<script>
  import { goto } from '$app/navigation'

  async function handleClick() {
    await new Promise(s => setTimeout(s, 3000))
    await goto('/version/')
  }
</script>

<button on:click|once={handleClick}>クリックから3秒後に/version/のページに遷移</button>

import { preloadData } from '$app/navigation'

preloadData('/foo');

<a href="/foo" data-sveltekit-preload-data>foo link</a>

import { preloadCode } from '$app/navigation'

preloadCode('/bar')

<a href="/bar" data-sveltekit-preload-code>bar link</a>

<script>
  import { base, assets } from '$app/paths'
</script>

<h1>SvelteKit Paths</h1>
<p>Base Path: <code>{base}</code></p>
<p>Assets Path: <code>{assets}</code></p>

// svelte.config.js
const config = {
  kit: {
    paths: {
      base: '/foo',
      assets: 'https://iwb.jp',
    },
  },
}