Sapper からの移行

SvelteKit は Sapper の後継であり、その設計の多くの要素を共有しています。

もし、既存の Sapper アプリを SvelteKit に移行する予定がある場合、いくつかの変更が必要になります。移行する際には、examples を見ていただくと参考になると思います。

package.jsonpermalink

type: "module"permalink

package.json に "type": "module" を追加します。もし Sapper 0.29.3 以降を使用している場合は、インクリメンタルマイグレーションの一部として、このステップを他のステップとは別に行うことができます。

dependenciespermalink

polka や express を使用している場合はそれを削除し、sirv や compression などのミドルウェア(middleware)も削除します。

devDependenciespermalink

devDependencies から sapper を削除し、@sveltejs/kit と使用予定の adapterに置き換えます(次のセクションをご覧ください)。

scriptspermalink

sapper を参照しているスクリプトを全て更新します:

sapper build は、Node adapter を使用した svelte-kit build にします
sapper export は、static adapter を使用した svelte-kit build にします
sapper dev は svelte-kit dev にします
node __sapper__/build は node build にします

プロジェクトファイルpermalink

アプリの大部分を占める src/routes の中はそのままで大丈夫ですが、いくつかのプロジェクトファイルを移動または更新する必要があります。

Configurationpermalink

こちらに記載されている通り、webpack.config.js または rollup.config.js を svelte.config.js に置き換えてください。Svelte の preprocessor オプションは config.preprocess に移動してください。

adapter を追加する必要があります。sapper build は adapter-node とおおよそ同じで、sapper export は adapter-static とおおよそ同じですが、デプロイ先のプラットフォーム向けにデザインされた adapter を使用するのも良いでしょう。

Vite では自動的に処理されないファイルタイプのプラグインを使用している場合は、Vite において同等なことを行う方法を探し、Vite config に追加する必要があります。

src/client.jspermalink

SvelteKit にはこのファイルに相当するものはありません。カスタムロジック(sapper.start(...) 以降) は、__layout.svelte ファイルの onMount コールバック内に記述してくさい。

src/server.jspermalink

adapter-node を使用する場合は、custom server がこれと同等のものです。それ以外の場合は、同等のものに該当するものはありません。なぜならSvelteKit アプリはサーバーレス環境でも実行だからです。セッションロジックを実装する場合は、hooks module をお使いいただけます。

src/service-worker.jspermalink

@sapper/service-worker からインポートするほとんどのものは、$service-worker に同等なものがあります:

files は変更されていません
routes は削除されました
shell は現在 build になりました
timestamp は現在 version になりました

src/template.htmlpermalink

src/template.html は src/app.html にリネームする必要があります。

Remove %sapper.base%, %sapper.scripts% and %sapper.styles%. Replace %sapper.head% with %sveltekit.head% and %sapper.html% with %sveltekit.body%. The <div id="sapper"> is no longer necessary.

src/node_modulespermalink

Sapper アプリでよくあるパターンとして、内部ライブラリを src/node_modules 内のディレクトリに配置する、というものがあります。これは Vite だと動作しないため、代わりに src/lib を使用します。

ページとレイアウトpermalink

名前が変わったファイルpermalink

カスタムエラーページコンポーネントを _error.svelte から __error.svelte にリネームしてください。同様に、_layout.svelte ファイルも __layout.svelte にリネームしてください。SvelteKit では二重のアンダースコアの接頭辞をリザーブしています。プライベートモジュールにはまだ接頭辞として _ を 1 つ付けます(ルート(routes)コンフィグで変更可能です)。

Importspermalink

@sapper/app からインポートしていた goto、prefetch、prefetchRoutes は $app/navigation からのインポートに置き換えてください。

@sapper/app からインポートしていた stores については置き換える必要があります — 以下の Stores) をご覧ください。

src/node_modules にあるディレクトリからインポートしてたファイルは、$lib からのインポートに置き換えてください。

Preloadpermalink

以前と同様に、ページやレイアウトではレンダリングが行われる前にデータをロードできる関数をエクスポートすることができます。

この関数は preload から load にリネームされ、その API が変更されました。2 つの引数 — page と session — の代わりに、両方を 1 つにまとめた引数と、fetch (this.fetch からの置き換え)、そして新たに stuff オブジェクトが追加されました。

this オブジェクトはなくなり、その結果 this.fetch、this.error、this.redirect もなくなりました。プロパティ(props)を直接返す代わりに、load は props やその他様々なものを含むオブジェクトを返すようになりました。

最後に、もしページに load メソッドがある場合は、必ず何かを返すようにしてください。そうしないと Not found になります。

Storespermalink

Sapper では、提供されるストアをこのように参照していたかと思います:

ts
import { stores } from '@sapper/app';
const { preloading, page, session } = stores();

page と session ストアはまだ存在しています。preloading は、from プロパティと to プロパティを含む navigating ストアに置き換えられました。page は url、params を持つようになりましたが、path と query はありません。

SvelteKit では、それらにアクセスする方法が異なります。stores は getStores になりましたが、$app/stores から直接 navigating、page、session をインポートできるので、ほとんどの場合は必要ありません。

ルーティングpermalink

ルート(routes) の正規表現はもうサポートされていません。代わりに、advanced route matching をお使いください。

Segmentspermalink

以前までは、レイアウトコンポーネントは子のセグメントを表す segment プロパティを受け取っていましたが、この機能は削除されました。より柔軟な $page.url.pathname の値を使用し、お望みのセグメントを取得してください。

URLspermalink

Sapper では、相対 URL は、現在のページに対してではなく、base URL (basepath オプションが使用されていない限り、大抵の場合は /) に対して解決されていました。

これによって問題が発生していましたが、SvelteKit ではもうそのようなことはありません。相対 URL が現在のページ (または load 関数の fetch URL の場合は移動先のページ) に対して解決されるようになりました。多くの場合、(例えば、/ 始まるような) ルート相対な URL を使用するほうが簡単です。なぜなら、それらの意図がコンテキストに依存しないからです。

<a> attributespermalink

sapper:prefetch は現在 sveltekit:prefetch になりました
sapper:noscroll は現在 sveltekit:noscroll になりました

Endpointspermalink

Sapper では、'server routes' (現在はエンドポイント(endpoints) と呼ばれる) は、Node の http モジュールによって公開される req と res オブジェクト(または Polka や Express などのフレームワークが提供するその拡張版) を受け取っていました。

SvelteKit は、アプリが動作する場所に依存しないように設計されています(Node サーバーで動作し、サーバーレスプラットフォームや Cloudflare Worker でも同様に動作します)。そのため、もう req と res を直接扱いません。エンドポイントを、新しいシグネチャに合わせて更新する必要があります。

環境非依存な動作をサポートするため、グローバルコンテキストで fetch が利用できるようになり、node-fetch や cross-fetch などのサーバーサイドの fetch 実装をインポートする必要がなくなりました。

インテグレーションpermalink

インテグレーションに関する詳細情報については FAQ をご参照ください。

HTML minifierpermalink

Sapper はデフォルトで html-minifier を含んでいました。SvelteKit はこれを含まないのですが、hook としてこれを追加することができます:

ts
import { minify } from 'html-minifier';
import { prerendering } from '$app/env';
 
const minification_options = {
  collapseBooleanAttributes: true,
  collapseWhitespace: true,
  conservativeCollapse: true,
  decodeEntities: true,
  html5: true,
  ignoreCustomComments: [/^#/],
  minifyCSS: true,
  minifyJS: false,
  removeAttributeQuotes: true,
  removeComments: true,
  removeOptionalTags: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  sortAttributes: true,
  sortClassName: true
};
 
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
  const response = await resolve(event);
 
  if (prerendering && response.headers.get('content-type') === 'text/html') {
    return new Response(minify(await response.text(), minification_options), {
      status: response.status,
      headers: response.headers
    });
  }
 
  return response;
}

サイトのプロダクションビルドをテストするのに svelte-kit preview を使用しているとき、prerendering が false となることにご注意ください。そのため、minify の結果を検証するには、ビルド済の HTML を直接確認する必要があります。

previous アセットハンドリング

next Additional Resources