diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 999f04d80..06b94803b 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -28,7 +28,11 @@ jobs: node-version: 18.x cache: pnpm - - run: pnpm install --frozen-lockfile + - name: Install + run: pnpm install --frozen-lockfile + + - name: Build + run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); } - name: Create Release Pull Request or Publish to npm id: changesets diff --git a/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md index 675d809fe..8e49238b2 100644 --- a/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md +++ b/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md @@ -57,7 +57,7 @@ As cautioned in _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats - [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar. - [Svelte Zoomable](https://svelte.dev/repl/58dfe87756ee4db897c281b52fdef7b7?version=3.31.0) is a custom transition with a nice zoom effect -**Have a component you'd like to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). +**Have a component you'd like to share?** [Submit your own component](https://sveltesociety.dev/help/submitting?type=package) to the list of [packages](https://sveltesociety.dev/packages) on the Svelte Society site. **Learning Resources** diff --git a/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md index 9b5a5eec4..613d4a946 100644 --- a/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md +++ b/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md @@ -71,7 +71,7 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv - [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler - [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for TypeScript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules. -**Want to share your Svelte Component with the world?** Head over to the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). +**Want to share your Svelte Component with the world?** [Submit your own component](https://sveltesociety.dev/help/submitting?type=package) to the list of [packages](https://sveltesociety.dev/packages) on the Svelte Society site. **Learning Resources** diff --git a/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md index 46e45a113..04401a163 100644 --- a/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md +++ b/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md @@ -82,7 +82,7 @@ Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](ht - [svelte-heroicons](https://github.com/martinse/svelte-heroicons) is a handy wrapper for the Heroicons icon library - [supabase-ui-svelte](https://github.com/joshnuss/supabase-ui-svelte) are UI components for Supabase authentication -**Have your own Svelte Component to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). +**Have your own Svelte Component to share?** [Submit your own component](https://sveltesociety.dev/help/submitting?type=package) to the list of [packages](https://sveltesociety.dev/packages) on the Svelte Society site. **Learning Resources & Starters** diff --git a/documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md index 4c2d6ac7c..4eea7e514 100644 --- a/documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md +++ b/documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md @@ -52,7 +52,7 @@ authorURL: https://dreamindani.com - [svelte-formly](https://github.com/arabdevelop/svelte-formly) はSvelteとSapper向けに動的なフォームを生成します。 - [7ty](https://www.npmjs.com/package/@jamcart/7ty) はSvelteを使用した静的サイトジェネレーターで、コンポーネントの部分的なハイドレーションをサポートし、Sapperや11tyに似たファイルベースルーティングを使用します。 -**自分のコンポーネントを投稿してみたいですか？** [このファイルに対するPR](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json) を作成し、[コンポーネント](https://sveltesociety.dev/components) を Svelte Society site に提出してください。 +**あなたが作成したコンポーネントをコントリビュートしたいですか?** [あなたが作成したコンポーネントを Svelte Society のサイトから提出](https://sveltesociety.dev/help/submitting?type=package)して頂ければ、[パッケージ](https://sveltesociety.dev/packages)のリストに追加することができます。 **スターター(Starters)** @@ -60,7 +60,7 @@ authorURL: https://dreamindani.com - [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) はTailwindCSSと外部のAPIを使用するSvelteプロジェクトを構築するために必要なことが全て揃っており、create-svelteで作られました。 - [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) は Netlify functions 上で動作するSapper Projectです。 -**特定のスターターをお探しですか？** [svelte-adders](https://github.com/svelte-add/svelte-adders) や、その他多数のテンプレート例をコミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates/) からチェックしてみてください。 +**特定のスターターをお探しですか？** [svelte-adders](https://github.com/svelte-add/svelte-adders) や、その他多数のテンプレート例をコミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates) からチェックしてみてください。 **学習リソース** - [How to Build a Website with Svelte and SvelteKit](https://prismic.io/blog/svelte-sveltekit-tutorial) は新しいSvelteKitのセットアップを順を追って説明するチュートリアルです。 diff --git a/documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md b/documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md index 71f90c341..f858e9c98 100644 --- a/documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md +++ b/documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md @@ -54,7 +54,7 @@ authorURL: https://dreamindani.com - [Sveltekit-JUI](https://github.com/Wolfr/sveltekit-jui) は Svelte および SvelteKit と組み合わせて使用するUIコンポーネントキットです - [EZGesture](https://github.com/mhmd-22/ezgesture#integrating-with-other-frameworks) は、シンプルなネイティブDOMイベントでジェスチャー機能を簡単に追加することができます -**自分のコンポーネントを投稿してみたいですか？** [このファイルに対するPR](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json) を作成し、[コンポーネント](https://sveltesociety.dev/components) を Svelte Society site に提出してください。 +**あなたが作成したコンポーネントをコントリビュートしたいですか?** [あなたが作成したコンポーネントを Svelte Society のサイトから提出](https://sveltesociety.dev/help/submitting?type=package)して頂ければ、[パッケージ](https://sveltesociety.dev/packages)のリストに追加することができます。 **Starters** - [How to use Vercel Analytics with SvelteKit](https://ivoberger.com/posts/using-vercel-analytics-with-svelte-kit) では、ユーザーのデバイス間で Web Vitals をトラッキングする方法を説明しています diff --git a/documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md index b9ac867cb..629bd57b5 100644 --- a/documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md +++ b/documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md @@ -61,7 +61,7 @@ authorURL: https://dreamindani.com - [svelte-entity-store](https://www.npmjs.com/package/svelte-entity-store) は、エンティティオブジェクトのコレクションを保存するためのシンプルで汎用的なソリューションを提供します。 - [svelte-animation-store](https://github.com/joshnuss/svelte-animation-store) は、Svelteのトゥイーンストアをベースにしたストアで、トゥイーンの一時停止、継続、リセット、リプレイ、リバース、スピード調整などを行うことができます。 -**自分のコンポーネントを投稿してみたいですか？** [このファイルに対するPR](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json) を作成し、[コンポーネント](https://sveltesociety.dev/components) を Svelte Society site に提出してください。 +**あなたが作成したコンポーネントをコントリビュートしたいですか?** [あなたが作成したコンポーネントを Svelte Society のサイトから提出](https://sveltesociety.dev/help/submitting?type=package)して頂ければ、[パッケージ](https://sveltesociety.dev/packages)のリストに追加することができます。 ## See you next month! diff --git a/documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md b/documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md index 8c4f96691..9837e1436 100644 --- a/documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md +++ b/documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md @@ -76,7 +76,7 @@ SvelteKit のすべてのアップデートを確認するには、[SvelteKit - [Kahi UI](https://github.com/novacbn/kahi-ui) はダークモードが組み込まれた Svelte 初の UI Kit です。 - [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) は、 TypeScript や JavaScript プロジェクトのための、独断的で、完全に型安全な軽量ローカリゼーションライブラリで、外部依存はありません。 -コミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates/) では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。 +コミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates) では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。 ## See you next month! diff --git a/documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md b/documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md index 5f5e25098..36afe4d6c 100644 --- a/documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md +++ b/documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md @@ -84,7 +84,7 @@ SvelteKitのすべてのアップデートを確認するには、[SvelteKit cha - [svelte-ionic-starter](https://github.com/Zettexe/svelte-ionic-starter) は、ライブリロードとiOS/Androidビルドターゲットを備えたSvelte + Ionic + CapacitorJSアプリ用のプロジェクトテンプレートです。 - [demo-sveltekit-sanity](https://github.com/stephane-vanraes/demo-sveltekit-sanity/) は、オープンソースのReactCMSであるSvelteKitおよびSanityのスターターキットです。 -コミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates/) では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。 +コミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates) では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。 ## See you next month! diff --git a/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md index 8cbf6731f..b6c2fdadc 100644 --- a/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md +++ b/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md @@ -98,7 +98,7 @@ SvelteKitのすべての更新を確認するには、[SvelteKitのChangelog](ht - [focus-svelte](https://github.com/chanced/focus-svelte)は、依存関係をもたないSvelte用のフォーカストラップです - [filedrop-svelte](https://github.com/chanced/filedrop-svelte)は、Svelte用のファイルドロップゾーンのアクションとコンポーネントです -コミュニティサイト[sveltesociety.dev](https://sveltesociety.dev/templates/)には、Svelteエコシステムのテンプレート、アダー、アダプタが多数掲載されていますので、ぜひご覧ください。 +コミュニティサイト[sveltesociety.dev](https://sveltesociety.dev/templates)には、Svelteエコシステムのテンプレート、アダー、アダプタが多数掲載されていますので、ぜひご覧ください。 ## Before you go, answer the call for speakers! diff --git a/documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md index 0da9e9f8d..22e64ba5b 100644 --- a/documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md +++ b/documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md @@ -91,6 +91,6 @@ SvelteおよびSvelteKitのすべての更新を確認するには、それぞ - [@svelte-drama/suspense](https://www.npmjs.com/package/@svelte-drama/suspense)は、Reactの``のコアアイデアを実装したSvelteコンポーネントです。また、[SWR for Svelte](https://www.npmjs.com/package/@svelte-drama/swr)をチェックすると、リフェッチがさらに簡単になります。 - [sveltekit-adapter-browser-extension](https://github.com/antony/sveltekit-adapter-browser-extension)は、アプリをクロスプラットフォームのブラウザ拡張にするSvelteKit用のアダプタです。 -コミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates/)では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。 +コミュニティサイト [sveltesociety.dev](https://sveltesociety.dev/templates)では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。 もっと更新情報をお探しですか？ [Reddit](https://www.reddit.com/r/sveltejs/)または[Discord](https://discord.com/invite/yy75DKs) にご参加ください！ diff --git a/documentation/blog/2022-01-13-accelerating-sveltes-development.md b/documentation/blog/2022-01-13-accelerating-sveltes-development.md index 3aec4e745..d3dff7630 100644 --- a/documentation/blog/2022-01-13-accelerating-sveltes-development.md +++ b/documentation/blog/2022-01-13-accelerating-sveltes-development.md @@ -43,7 +43,7 @@ Svelte では昨年から [OpenCollective](https://opencollective.com/svelte) ## パートナーシップ (Partnerships) -複数のメジャーなクラウドベンダーが、SvelteKit アプリケーションをどこでもシームレスにデプロイできるよう取り組んでいます。Rich の新しい仕事の結果として、SvelteKit は間もなく [Vercel Edge Functions](https://vercel.com/features/edge-functions) で実行できるようになります。Netlify は SvelteKit の Netlify adapter に [大きなコントリビュート](https://github.com/sveltejs/kit/pull/2113) をしてくれて、また、SvelteKit をより良くサポートするために彼らの zip-it-and-ship-it ツールを [アップデート](https://github.com/dependents/node-precinct/pull/88) してくれました。最近の [Cloudflare Pages の発表](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) では、SvelteKit を初日のパートナーとして取り上げており、Svelte のメンテナーである [pngwn](https://twitter.com/evilpingwin) と [lukeed](https://twitter.com/lukeed05) (後者は2021年に Cloudflare にジョイン) が書いた [新しい adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) が使われています。[Begin](https://begin.com) は [SvelteKit の adapter](https://github.com/architect/sveltekit-adapter) を [Architect](https://arc.codes) アプリ向けに作成しました。そしてコミュニティメンバーは Firebase や Deno といった環境用の [adapter にコントリビュート](https://sveltesociety.dev/components#adapters) しており、JavaScript が動作する場所であればどこでも動作する SvelteKit の力を示しています。 +複数のメジャーなクラウドベンダーが、SvelteKit アプリケーションをどこでもシームレスにデプロイできるよう取り組んでいます。Rich の新しい仕事の結果として、SvelteKit は間もなく [Vercel Edge Functions](https://vercel.com/features/edge-functions) で実行できるようになります。Netlify は SvelteKit の Netlify adapter に [大きなコントリビュート](https://github.com/sveltejs/kit/pull/2113) をしてくれて、また、SvelteKit をより良くサポートするために彼らの zip-it-and-ship-it ツールを [アップデート](https://github.com/dependents/node-precinct/pull/88) してくれました。最近の [Cloudflare Pages の発表](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) では、SvelteKit を初日のパートナーとして取り上げており、Svelte のメンテナーである [pngwn](https://twitter.com/evilpingwin) と [lukeed](https://twitter.com/lukeed05) (後者は2021年に Cloudflare にジョイン) が書いた [新しい adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) が使われています。[Begin](https://begin.com) は [SvelteKit の adapter](https://github.com/architect/sveltekit-adapter) を [Architect](https://arc.codes) アプリ向けに作成しました。そしてコミュニティメンバーは Firebase や Deno といった環境用の [adapter にコントリビュート](https://sveltesociety.dev/packages?category=sveltekit-adapters) しており、JavaScript が動作する場所であればどこでも動作する SvelteKit の力を示しています。 また、SvelteKit ユーザーが発見した SSR の問題を解決するため、私たちは [Vite](https://vitejs.dev) チームと密接に連携しています。Vite は SvelteKit の開発者体験(developer experience)を実現してくれているビルドツールで、様々なフレームワークの代表者たちを含むコントリビューターのハードワークのおかげで、最近のリリースでは、 SvelteKit 1.0 のリリースブロッカーとして追跡していた問題点のほとんどを解決することができました。 diff --git a/documentation/blog/2023-12-14-sveltekit-2.md b/documentation/blog/2023-12-14-sveltekit-2.md new file mode 100644 index 000000000..1085d1bbb --- /dev/null +++ b/documentation/blog/2023-12-14-sveltekit-2.md @@ -0,0 +1,43 @@ +--- +title: 'Announcing SvelteKit 2' +description: 'A special SvelteKit anniversary release' +author: The Svelte team +authorURL: https://kit.svelte.dev/ +--- + +Version 2.0 of [SvelteKit](https://kit.svelte.dev), the official framework for building apps with Svelte, is now available. It is an incremental release that adds support for the newly-released [Vite 5](https://vitejs.dev/blog/announcing-vite5) along with a bevy of small improvements and one much-requested feature. + +If you've been paying close attention to Svelte in recent months, you'll know that we've been [hard at work on Svelte 5](https://svelte-5-preview.vercel.app/docs/introduction), which is possibly the most anticipated release in the project's history. Upgrading to SvelteKit 2 will smooth the path for Svelte 5 when it is released in 2024, and we encourage all users to upgrade when you get a chance. + +We recommend updating to the most recent 1.x release first, along with Svelte 4, in order to address any deprecation warnings. Then, upgrade to SvelteKit 2 by running the automated migration tool: + +```bash +npx svelte-migrate sveltekit-2 +``` + +The [migration guide](https://kit.svelte.dev/docs/migrating-to-sveltekit-2) has more details about what's new. + +## Shallow routing + +Way back in the mists of time — May, to be precise — we [teased a new feature](https://www.youtube.com/watch?v=HdkJTOTY-Js) that allows you to associate state with a history entry without causing navigation. It's very useful for creating modals that you can dismiss by swiping back, or pop-up views of routes you don't want to do a full navigation to. + +That feature is called [shallow routing](https://kit.svelte.dev/docs/shallow-routing), and this week we finally dusted off the pull request and added it to the framework. We're excited to see what you use it for. + +## One year of SvelteKit + +Today is the one year anniversary of SvelteKit’s launch and we’re excited to celebrate how far SvelteKit has come. SvelteKit has been quickly embraced by the web development community: + +
+ Screenshot of @flaviocopes tweet with a poll titled 'You have to create a web app from scratch'. SvelteKit is the winner above Next, Nuxt and Laravel with 42.1% of the vote +
Tweet from @flaviocopes
+
+ +In the past year, we’ve seen a number of open source projects like [Storybook](https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md), [Tailwind](https://tailwindcss.com/docs/guides/sveltekit), and [Playwright](https://playwright.dev/docs/test-components) officially support SvelteKit as well as a number of commercial entities like [Prismic](https://prismic.io/blog/svelte-sveltekit-tutorial), [Sentry](https://docs.sentry.io/platforms/javascript/guides/sveltekit/), and [InLang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs). + +SvelteKit continues to benefit from the Svelte community, which has developed numerous great UI libraries like [Skeleton](https://www.skeleton.dev/), [shadcn-svelte](https://www.shadcn-svelte.com/), [Melt UI](https://melt-ui.com/), [Flowbite Svelte](https://flowbite-svelte.com/), [daisyUI](https://daisyui.com/), and [many more](https://sveltesociety.dev/packages?category=design-system). And [our first ever hackathon](https://hack.sveltesociety.dev/) saw winners from amazing Svelte projects like [Superforms](https://superforms.rocks/), [Threlte](https://threlte.xyz/), and [SvelteLab](https://www.sveltelab.dev/). + +Finally, we’ve also launched major supporting projects like a new Svelte DevTools ([chrome web store](https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff), [GitHub](https://github.com/sveltejs/svelte-devtools), [talk](https://www.sveltesummit.com/2023/fall/exploring-svelte-devtools)), Svelte Inspector ([docs](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md), [talk](https://www.sveltesummit.com/2023/spring/svelte-inspector-update)), and experimental image optimization support ([docs](https://kit.svelte.dev/docs/images), [talk](https://www.sveltesummit.com/2023/fall/enhanced-img)). + +## Upcoming + +In addition to the ongoing image work, we’ll be working to improve support for Svelte 5 and internationalization in upcoming releases. The first parts of that work have already landed in SvelteKit 2, which includes improved support for prerendering URLs with optional path segments often used to specify a language. Thank you to the team from InLang who contributed this improvement. diff --git a/documentation/blog/2024-01-01-whats-new-in-svelte-january-2024.md b/documentation/blog/2024-01-01-whats-new-in-svelte-january-2024.md new file mode 100644 index 000000000..92bd479ea --- /dev/null +++ b/documentation/blog/2024-01-01-whats-new-in-svelte-january-2024.md @@ -0,0 +1,107 @@ +--- +title: "What's new in Svelte: January 2024" +description: 'SvelteKit 2 and a much-improved $state rune' +author: Dani Sandoval +authorURL: https://dreamindani.com +--- + +Happy New Year! It's been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the [release of SvelteKit 2](https://svelte.dev/blog/sveltekit-2)! + +You can find all the new features in both projects below, along with a bunch of resources and sites built with Svelte in the Community Showcase. + +Let's jump in... + +## What's new in SvelteKit (2.0 and more!) + +With its 2.0 release, SvelteKit is now more capable than ever. Be sure to check out the docs links in each update for more info on how to use each feature as well as the new [Performance](https://kit.svelte.dev/docs/performance) page - which explains how SvelteKit works to make your applications as performant as possible. + +- `resolvePath` has been replaced by `resolveRoute` in `$app/paths`. Use it to populate a route ID with params to resolve a pathname (**1.29.0**, [Docs](https://kit.svelte.dev/docs/modules#app-paths-resolveroute), [#11261](https://github.com/sveltejs/kit/pull/11261)) +- `response.arrayBuffer()` will now be inlined during SSR (**1.30.0**, [Docs](https://kit.svelte.dev/docs/load#making-fetch-requests), [#10535](https://github.com/sveltejs/kit/pull/10535)) +- [SvelteKit 2.0.0](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md#200) adds: + - `untrack` to `load` to opt-out of invalidation ([Docs](https://kit.svelte.dev/docs/load#rerunning-load-functions-untracking-dependencies), [#11311](https://github.com/sveltejs/kit/pull/11311)) + - shallow routing to create history entries without navigating ([Docs](https://kit.svelte.dev/docs/shallow-routing), [#11307](https://github.com/sveltejs/kit/pull/11307)) + - html typings ([#11222](https://github.com/sveltejs/kit/pull/11222)) + - redacted internal stack traces when reporting config errors ([#11292](https://github.com/sveltejs/kit/pull/11292)) + - fine grained invalidation of search params ([Docs](https://kit.svelte.dev/docs/load#rerunning-load-functions), [#11258](https://github.com/sveltejs/kit/pull/11258)) + +You can find a migration guide for SvelteKit 2.0 [on the SvelteKit docs](https://kit.svelte.dev/docs/migrating-to-sveltekit-2). Things should be pretty seamless with the `svelte-migrate` command doing much (if not all) for you! + + +## What's new in Svelte + +With [Svelte 5 in preview](https://svelte-5-preview.vercel.app/docs/introduction), Svelte 4 (`@latest`) has only been getting bug fixes - with its current version at `4.2.8`. The updates below are from version 5's preview branch: + +- The new `$inspect` rune is like `console.log` except that it will re-run whenever its argument changes (**5.0.0-next.16**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#inspect), [#9705](https://github.com/sveltejs/svelte/pull/9705)) +- `$state` is now proxied to make reactivity nested by default. This is a response to user feedback with plenty of context in the PR - so check it out if you're interested on how the syntax has improved during the preview (**5.0.0-next.18**, [Docs/Examples](https://svelte-5-preview.vercel.app/docs/fine-grained-reactivity), [#9739](https://github.com/sveltejs/svelte/pull/9739)) +- Fallback values for bindings are disallowed in runes mode since they're confusing, and a source of bugginess and implementation complexity (5.0.0-next.19, [#9784](https://github.com/sveltejs/svelte/pull/9784)) +- Fallback props are now readonly (unless used with `bind:`). By extension, default values should also be readonly (**5.0.0-next.19**, [#9789](https://github.com/sveltejs/svelte/pull/9789)) +- The new `unstate` function allows you to remove reactivity from objects and arrays created with `$state` (**5.0.0-next.19**, [Docs](https://svelte-5-preview.vercel.app/docs/functions#unstate), [#9776](https://github.com/sveltejs/svelte/pull/9776)) +- GamepadEventHandlers for window.addEventListener (`gamepadconnected` and `gamepaddisconnected`) have been added (**5.0.0-next.23**, [Docs](https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent), [#9861](https://github.com/sveltejs/svelte/pull/9861)) +- `{@const}` can now be used inside snippet blocks (**5.0.0-next.24**, [#9904](https://github.com/sveltejs/svelte/pull/9904)) +- The new `$state.frozen` rune lets you access a read-only version of `$state` that cannot be mutated. This is useful if you want to work with data using immutable patterns rather than mutable patterns (**5.0.0-next.27**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#state-frozen), [#9851](https://github.com/sveltejs/svelte/pull/9851)) + +For all the release notes going forward, check out [the CHANGELOG on main](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md). + + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** + +- [eCourse](https://github.com/Ilyas-Codes/eCourse) is a sleek and customizable website template designed for effortless self-hosting of your online course +- [Typogram](https://typogram.co/) is a brand design tool with "a sprinkle of AI" +- [calcium](https://github.com/ethanlynn/calcium) is a browser extension for devs with fuzzy-find on browser tabs, bookmarks, history +and common developer docs +- [hintable](https://github.com/willuhmjs/hintable) is an exciting word guessing game +- [domian.io](https://domian.io/) retrieves a list of the most likely misspellings for your domain, their availability, and an easy way to register them +- [Story Scroller](https://svelte.dev/repl/6182be0c3ada4a15b5046f7d0d031727?version=4.2.8) is a REPL showcasing how Svelte can be used to make a scrollable cards list +- [The Atlas of Sustainable Development Goals 2023](https://datatopics.worldbank.org/sdgatlas?lang=en) presents interactive storytelling and data visualizations about the 17 Sustainable Development Goals. +- [Lingotrack](https://lingotrack.com/) is a social platform for you as a language learner to track your progress and find engaging new media +- [Lofi Flow](https://github.com/nico-mayer/lofi-flow) lets you save your best-loved YouTube lofi live radios and videos in one spot + +**Learning Resources** + +_Featuring Svelte Contributors and Ambassadors_ +- [Svelte in dynamic e-commerce widgets with Jacob Stordahl](https://www.svelteradio.com/episodes/svelte-in-dynamic-e-commerce-widgets-with-jacob-stordahl) and [Slicing Svelte with Sam Littlefair and Prismic](https://www.svelteradio.com/episodes/slicing-svelte-with-sam-littlefair-and-prismic) from Svelte Radio +- [I already love SvelteKit v2](https://www.youtube.com/watch?v=B19DEGEclfk) by Huntabyte +- [14 Awesome Real World Projects That Use Svelte](https://www.youtube.com/watch?v=E9HxrW5yivs) by Joy of Code +- [Building a SvelteKit Adapter for WinterJS](https://www.youtube.com/watch?v=8HaAagG6V-Q) with Willow and Kev +- [Progressive Splash Screen](https://www.sveltevietnam.dev/en/blog/20231220-behind-the-screen-progressive-splashscreen) by Quang Phan (Svelte Vietnam) +- This Week in Svelte: + - [2023 Dec 1](https://www.youtube.com/watch?v=GH5NxbdCZ74) - Svelte 4.2.8, reusing searchParams, peerDependencies! + - [2023 Dec 8](https://www.youtube.com/watch?v=kgrIhRQ9sh8) - validating forms UX, suppress ESLint warnings, bound functions + - [2023 Dec 15](https://www.youtube.com/watch?v=57tawstksmc) - SvelteKit 2.0 + - [22 Dec 2023](https://www.youtube.com/watch?v=O5ElGJICg0s) - SvelteKit 2.0.6, handling peerDependencies, action params + - [29 Dec 2023](https://www.youtube.com/watch?v=byeF6ECbvGY) + +_To Watch/Hear_ + +- [Let's Build A Dropbox clone With SvelteKit And Firebase 🔥, Tailwind css, Shad-cn svelte etc 😁](https://www.youtube.com/watch?v=6RhSzX7Ac0k) by Lawal Adebola +- ["App-like" List → Detail View Transitions 🦸 with SvelteKit](https://www.youtube.com/watch?v=suuxXrMs5P4) by Johnny Magrippis +- [Learn SvelteKit · Build a Modern Landing Page w. SvelteKit & TailwindCSS](https://www.youtube.com/watch?v=N6wf2QXEHYk) by Smoljames + +_To Read_ + +- [Deploy a SvelteKit App to GitHub Pages](https://www.captaincodeman.com/deploy-a-sveltekit-app-to-github-pages) by Captain Codeman +- [A Practical Guide to Mocking Svelte Stores with Vitest](https://bentilling.com/a-practical-guide-to-mocking-svelte-stores-with-vitest) by Ben Tilling +- [Svelte 5 is good, but runes need improvement](https://kylenazario.com/blog/svelte-5-runes-impressions) by Kyle Nazario +- [Shader Park and 2D](https://untested.sonnet.io/Shader+Park+and+2D) by Untested + + +**Libraries, Tools & Components** + +- [Routify](https://routify.dev/blog/routify-3-release-candidate), the popular routing library used in many Svelte apps, has its first Release Candidate for version 3 +- [Superforms v2](https://blog.encodeart.dev/superforms-v2-supporting-all-validation-libraries) is out now - supporting all validation libraries +- [SvelteKit-Design-Pattern](https://github.com/Kreonovo/SvelteKit-Design-Pattern) is a template showcase Kreonovo's SvelteKit MVC Design patterns (more info in [the Reddit post](https://www.reddit.com/r/sveltejs/comments/18ndcd8/our_design_pattern_for_sveltekit_how_we_organize/)) +- [Shadcn's Svelte VSCode extension](https://github.com/selemondev/vscode-shadcn-svelte) helps you install and use Shadcn components directly without leaving your IDE +- [SGSG](https://github.com/mpiorowski/sgsg) is an alternative "full-stack application" template based on Svelte, Go, SQLite and gRPC +- [mistral-kit](https://github.com/kevmodrome/mistral-kit) is a prompt-to-code site using mistral-7b and ollama +- [svelte-browser-import](https://github.com/repalash/svelte-browser-import) provides functions to import and render a Svelte App/Component (.svelte files) directly inside a browser without a build step. +- [progressbar-svelte](https://www.npmjs.com/package/progressbar-svelte) is a Svelte package for customizable progress bars +- [MdCraft](https://github.com/lovelindhoni/mdcraft) is an open-source web app that serves as an in-browser Markdown editor and previewer + + +That's it for this month! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte). + +Have a great year 🥳 diff --git a/documentation/blog/2024-02-01-whats-new-in-svelte-february-2024.md b/documentation/blog/2024-02-01-whats-new-in-svelte-february-2024.md new file mode 100644 index 000000000..41582aac4 --- /dev/null +++ b/documentation/blog/2024-02-01-whats-new-in-svelte-february-2024.md @@ -0,0 +1,77 @@ +--- +title: "What's new in Svelte: February 2024" +description: 'New in Kit: `reroute`, `emulate` and more!' +author: Dani Sandoval +authorURL: https://dreamindani.com +--- + +Since SvelteKit 2.0 released late last year, there's been a bunch of new features to make the Kit dev experience even better! Meanwhile the Svelte team has been hard at work making Svelte 5 a reality. + +In case you missed it, Rich also posted [Tenets](https://github.com/sveltejs/svelte/discussions/10085#discussion-6029409), "an attempt to articulate the Svelte philosophy — our bedrock principles, that guide our design decisions." + +So let's dive in to check out what's new and see what the rest of the community has been up to... + +## What's new in SvelteKit + +- The client router is now tree shakeable (**2.1.0**, [#11340](https://github.com/sveltejs/kit/pull/11340)) +- `$env/static/public` is now exposed in service workers (**2.2.0**, [Docs](https://kit.svelte.dev/docs/modules#env-static-public), [#10994](https://github.com/sveltejs/kit/pull/10994)) +- `style-src-elem` is now supported in environments with a Content Security Policy (**2.2.1**, [Docs](https://kit.svelte.dev/docs/types#private-types-cspdirectives), [#11562](https://github.com/sveltejs/kit/pull/11562)) +- The new `reroute` hook allows you to change how URLs are translated into routes (**2.3.0**, [Docs](https://kit.svelte.dev/docs/hooks#universal-hooks-reroute), [#11537](https://github.com/sveltejs/kit/pull/11537)) +- The `read` function is now available in the `$app/server` module - allowing you to read assets from the filesystem (**2.4.0**, [Docs](https://kit.svelte.dev/docs/modules#app-server-read), [#11649](https://github.com/sveltejs/kit/pull/11649)) +- Adapters can now `emulate` the prod environment for dev and preview servers by implementing the corresponding functions. This is useful for providing access to e.g. KV namespaces in development (**2.5.0**, [Docs](https://kit.svelte.dev/docs/writing-adapters), [#11730](https://github.com/sveltejs/kit/pull/11730)) + + +## What's new in Svelte + +In case you missed it, [Svelte 5 is in preview](https://svelte-5-preview.vercel.app/docs/introduction). In the meantime, Svelte 4 (`@latest`) has had one bugfix release. There's just one new feature to highlight from the Svelte 5 changelog: + +- Snippets can now take multiple arguments (**5.0.0-next.42**, [Docs](https://svelte-5-preview.vercel.app/docs/snippets), [#9988](https://github.com/sveltejs/svelte/pull/9988)) + +For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out [the CHANGELOG on main](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md). + + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** + +- [Sprite Fusion](https://www.spritefusion.com/) is a free level design tool to craft beautiful 2D tilemaps right in your browser using any tileset +- [TypeMeUp](https://github.com/bskdany/typemeup) a typing website that teaches you how to type faster +- [Pathfinding Algorithm Visualizer](https://github.com/baterson/pathfinding-visualizer) is an interactive pathfinding algorithm visualizer with player functionality +- [Roch Dog](https://rochdog.com/en) ranks businesses and hotels based on how dog-friendly they are +- [highlight.cool](https://highlight.cool/) is a free, customizable, and real-time highlighting tool for your blog +- [Nola Devs](https://www.noladevs.org/) is a vibrant and inclusive software developers group nestled in the heart of New Orleans. This site aggregates all their events across groups +- [Startup Funding Simulator](https://www.fundingsimulator.com/) is a tool to help founders understand how modern fundraising (with safes) works, and how much dilution you can expect when raising money. + +**Learning Resources** + +_Featuring Svelte Contributors and Ambassadors_ +- [New SvelteKit feature: `import { read } from '$app/server'`](https://www.youtube.com/watch?v=m4G-6dyF1MU) by Rich Harris +- [Reading assets on the server in SvelteKit](https://geoffrich.net/posts/sveltekit-read/) by Geoff Rich +- [Tan Li Hau's new book](https://packt.link/Z4hXD), _Real-World Svelte_ is out now +- [Svelte Society San Diego - January 2024](https://www.youtube.com/watch?v=oH7XFAKh6W8): Attila covers the latest updates on Svelte 5 and also SvelteKit. +- [Svelte London - January 2024](https://www.youtube.com/watch?v=eswNQiq4T2w): featuring talks from both Rich Harris and pngwn +- [Svelte 5: Speed, Simplicity & Size](https://syntax.fm/show/723/svelte-5-speed-simplicity-and-size) by Syntax.FM +- This Week in Svelte: + - [12 Jan 2024](https://www.youtube.com/watch?v=86NNiIG_ncU): A deep dive into the SvelteKit Changelog + - [19 Jan 2024](https://www.youtube.com/watch?v=AWL_xCPT-5Q): Showcasing a new library from Paolo Ricciuti + - [26 Jan 2024](https://www.youtube.com/watch?v=_SraKYKkQAc): Featuring "Cells" - a functional and reactive programming library + +_To Read_ + +- [Customise font in TailwindCSS with SvelteKit](https://www.launchnow.pro/blog/customise-font-tailwindcss-sveltekit) by Launchnow +- [Svelte from the perspective of an Angular developer (for Svelte devs)](https://kylenazario.com/blog/svelte-from-angular-perspective-for-svelte) and [How to create a sitemap for your SvelteKit blog](https://kylenazario.com/blog/sveltekit-blog-sitemap) by Kyle Nazario +- [Get Up and Running with Svelte on the Internet Computer](https://blog.icacademy.at/blog/svelte-ic-starter) by Roland BOLE +- [SvelteKit + Socket.io server deployed on deno](https://devr.me/socket-io-deno) by Devr + + +**Libraries, Tools & Components** + +- [Lucia](https://github.com/lucia-auth/lucia/discussions/1361) - an auth library written in TypeScript that abstracts away the complexity of handling sessions - has just released its 3.0 version +- [Paraglide JS Adapter SvelteKit](https://inlang.com/m/dxnzrydw/library-inlang-paraglideJsAdapterSvelteKit) is a SvelteKit integration for ParaglideJS - a tool for i18n routing + + +That's it for this month! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte). + +See ya next month! diff --git a/documentation/docs/01-getting-started/01-introduction.md b/documentation/docs/01-getting-started/01-introduction.md index 5b4bfc6d4..bd2b08401 100644 --- a/documentation/docs/01-getting-started/01-introduction.md +++ b/documentation/docs/01-getting-started/01-introduction.md @@ -23,11 +23,11 @@ SvelteKit は [Svelte コンパイラ](https://www.npmjs.com/package/svelte) を もし何らかの理由で SvelteKit を使いたくない場合は、`npm create vite@latest` を実行して `svelte` オプションを選択することで、Vite を (SvelteKit なしで) Svelte と使用することもできます。この場合、`npm run build` を実行すると `dist` ディレクトリの中に HTML、JS、CSS ファイルが生成されます。この場合はほとんどのケースで[ルーティングライブラリの選択](/faq#is-there-a-router)も必要になるでしょう。 -他には、Svelte のコンパイルを扱うことができる[全ての主要な web バンドラ向けのプラグイン](https://sveltesociety.dev/tools#bundling)があり、HTML に挿入することができる `.js` と `.css` を出力することができますが、そのほとんどは SSR を処理しません。 +他には、Svelte のコンパイルを扱うことができる[全ての主要な web バンドラ向けのプラグイン](https://sveltesociety.dev/packages?category=bundler-plugins)があり、HTML に挿入することができる `.js` と `.css` を出力することができますが、そのほとんどは SSR を処理しません。 ## エディタツール -Svelte チームは [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) をメンテナンスしておりますが、その他様々な[エディタ](https://sveltesociety.dev/tools#editor-support)やツールとのインテグレーションがあります。 +Svelte チームは [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) をメンテナンスしておりますが、その他様々な[エディタ](https://sveltesociety.dev/resources#editor-support)やツールとのインテグレーションがあります。 ## ヘルプを求めるには diff --git a/documentation/docs/02-template-syntax/01-svelte-components.md b/documentation/docs/02-template-syntax/01-svelte-components.md index 401c48c27..800421641 100644 --- a/documentation/docs/02-template-syntax/01-svelte-components.md +++ b/documentation/docs/02-template-syntax/01-svelte-components.md @@ -18,7 +18,7 @@ title: Svelte components ``` -## <script> +## ` ``` -## <style> +## ` diff --git a/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js b/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js index 2f9ecca8d..f0854a819 100644 --- a/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js +++ b/sites/svelte.dev/src/routes/(authed)/repl/api/[id].json/+server.js @@ -9,8 +9,6 @@ export const prerender = 'auto'; const UUID_REGEX = /^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/; -/** @type {Set} */ -let examples; /** @param {import('$lib/server/examples/types').ExamplesData[number]['examples'][number]['files'][number][]} files */ function munge(files) { @@ -39,13 +37,6 @@ export async function GET({ params }) { // We prerender examples pages during build time. That means, when something like `/repl/hello-world.json` // is accessed, this function won't be run at all, as it will be served from the filesystem - examples = new Set( - get_examples_list(examples_data) - .map((category) => category.examples) - .flat() - .map((example) => example.slug) - ); - const example = get_example(examples_data, params.id); if (example) { return json({ @@ -73,13 +64,13 @@ export async function GET({ params }) { } if (!UUID_REGEX.test(params.id)) { - throw error(404); + error(404); } const app = await gist.read(params.id); if (!app) { - throw error(404, 'not found'); + error(404, 'not found'); } return json({ diff --git a/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js b/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js index bce3db03d..e7794ffbf 100644 --- a/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js +++ b/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js @@ -4,7 +4,7 @@ import { error, json } from '@sveltejs/kit'; export async function POST({ request }) { const user = await session.from_cookie(request.headers.get('cookie')); - if (!user) throw error(401); + if (!user) error(401); const body = await request.json(); const result = await gist.create(user, body); diff --git a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.js b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.js deleted file mode 100644 index b27fec14d..000000000 --- a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.js +++ /dev/null @@ -1,8 +0,0 @@ -export function load({ url }) { - const query = url.searchParams; - return { - version: query.get('version') || '3', - gist: query.get('gist'), - example: query.get('example') - }; -} diff --git a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.server.js b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.server.js new file mode 100644 index 000000000..d6f8ab11b --- /dev/null +++ b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.server.js @@ -0,0 +1,14 @@ +import { redirect } from '@sveltejs/kit'; + +export function load({ url }) { + if (!url.searchParams.has('gist')) { + throw redirect(301, '/repl/hello-world/embed'); + } else { + const searchParamsWithoutGist = new URLSearchParams(url.searchParams); + searchParamsWithoutGist.delete('gist'); + throw redirect( + 301, + `/repl/${url.searchParams.get('gist')}/embed?${searchParamsWithoutGist.toString()}` + ); + } +} diff --git a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte deleted file mode 100644 index 43fed8a1c..000000000 --- a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte +++ /dev/null @@ -1,36 +0,0 @@ - - - - REPL • Svelte - - - - - - -
- {#if browser} - - {/if} -
- - diff --git a/sites/svelte.dev/src/routes/(authed)/repl/save/[id].json/+server.js b/sites/svelte.dev/src/routes/(authed)/repl/save/[id].json/+server.js index 823db8782..f37f69943 100644 --- a/sites/svelte.dev/src/routes/(authed)/repl/save/[id].json/+server.js +++ b/sites/svelte.dev/src/routes/(authed)/repl/save/[id].json/+server.js @@ -5,7 +5,7 @@ import { error } from '@sveltejs/kit'; // TODO reimplement as an action export async function PUT({ params, request }) { const user = await session.from_cookie(request.headers.get('cookie')); - if (!user) throw error(401, 'Unauthorized'); + if (!user) error(401, 'Unauthorized'); const body = await request.json(); await gist.update(user, params.id, body); diff --git a/sites/svelte.dev/src/routes/+layout.server.js b/sites/svelte.dev/src/routes/+layout.server.js index 11330d122..7701e6329 100644 --- a/sites/svelte.dev/src/routes/+layout.server.js +++ b/sites/svelte.dev/src/routes/+layout.server.js @@ -1,8 +1,10 @@ import { fetchBanner } from '@sveltejs/site-kit/components'; export const load = async ({ url, fetch }) => { - const nav_links = fetch('/nav.json').then((r) => r.json()); - const banner = fetchBanner('svelte.dev', fetch); + const [nav_links, banner] = await Promise.all([ + fetch('/nav.json').then((r) => r.json()), + fetchBanner('svelte.dev', fetch) + ]); return { nav_title: get_nav_title(url), diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte index 037792947..356fb7f4b 100644 --- a/sites/svelte.dev/src/routes/+layout.svelte +++ b/sites/svelte.dev/src/routes/+layout.svelte @@ -33,7 +33,10 @@
- +
- - - - - - + + + + + + The Svelte compiler packaging up your component code @@ -44,6 +62,8 @@ .machine img { position: absolute; pointer-events: none; + width: 100%; + height: auto; } .hero-content { diff --git a/sites/svelte.dev/src/routes/auth/callback/+server.js b/sites/svelte.dev/src/routes/auth/callback/+server.js index 0308da2f5..161e04a9f 100644 --- a/sites/svelte.dev/src/routes/auth/callback/+server.js +++ b/sites/svelte.dev/src/routes/auth/callback/+server.js @@ -33,13 +33,13 @@ export async function GET({ url }) { github_login: profile.login, github_avatar_url: profile.avatar_url }; - const { sessionid, expires } = await session.create(user); return new Response( ` diff --git a/sites/svelte.dev/src/routes/auth/login/+server.js b/sites/svelte.dev/src/routes/auth/login/+server.js index 25d8ea5bd..f2f00d685 100644 --- a/sites/svelte.dev/src/routes/auth/login/+server.js +++ b/sites/svelte.dev/src/routes/auth/login/+server.js @@ -11,8 +11,8 @@ export const GET = client_id redirect_uri: `${url.origin}/auth/callback` }).toString(); - throw redirect(302, Location); - } + redirect(302, Location); + } : () => new Response( ` diff --git a/sites/svelte.dev/src/routes/banner.json/+server.js b/sites/svelte.dev/src/routes/banner.json/+server.js index 2d056b6a8..ffe27fd99 100644 --- a/sites/svelte.dev/src/routes/banner.json/+server.js +++ b/sites/svelte.dev/src/routes/banner.json/+server.js @@ -1,6 +1,8 @@ import { json } from '@sveltejs/kit'; import { defineBanner } from '@sveltejs/site-kit/components'; +export const prerender = true; + // This server route is used by all Svelte sites to load info about which banner to show. // site-kit contains components/helpers to make fetching+displaying them easier. export const GET = async () => { diff --git a/sites/svelte.dev/src/routes/blog/[slug]/+page.server.js b/sites/svelte.dev/src/routes/blog/[slug]/+page.server.js index 47bb643fa..dc91f6a82 100644 --- a/sites/svelte.dev/src/routes/blog/[slug]/+page.server.js +++ b/sites/svelte.dev/src/routes/blog/[slug]/+page.server.js @@ -6,7 +6,7 @@ export const prerender = true; export async function load({ params }) { const post = await get_processed_blog_post(await get_blog_data(), params.slug); - if (!post) throw error(404); + if (!post) error(404); // forgive me — terrible hack necessary to get diffs looking sensible // on the `runes` blog post diff --git a/sites/svelte.dev/src/routes/blog/[slug]/card.png/+server.js b/sites/svelte.dev/src/routes/blog/[slug]/card.png/+server.js index e8456a6fc..ed8a177ce 100644 --- a/sites/svelte.dev/src/routes/blog/[slug]/card.png/+server.js +++ b/sites/svelte.dev/src/routes/blog/[slug]/card.png/+server.js @@ -14,7 +14,7 @@ export const prerender = true; export async function GET({ params }) { const post = await get_processed_blog_post(await get_blog_data(), params.slug); - if (!post) throw error(404); + if (!post) error(404); // @ts-ignore const result = Card.render({ post }); diff --git a/sites/svelte.dev/src/routes/blog/the-easiest-way-to-get-started/+page.js b/sites/svelte.dev/src/routes/blog/the-easiest-way-to-get-started/+page.js index 242fcef47..a749ad39a 100644 --- a/sites/svelte.dev/src/routes/blog/the-easiest-way-to-get-started/+page.js +++ b/sites/svelte.dev/src/routes/blog/the-easiest-way-to-get-started/+page.js @@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit'; import { dev } from '$app/environment'; export function load() { - throw redirect(dev ? 307 : 308, '/docs'); + redirect(dev ? 307 : 308, '/docs'); } diff --git a/sites/svelte.dev/src/routes/content.json/content.server.js b/sites/svelte.dev/src/routes/content.json/content.server.js index 567399808..8c88c85df 100644 --- a/sites/svelte.dev/src/routes/content.json/content.server.js +++ b/sites/svelte.dev/src/routes/content.json/content.server.js @@ -48,14 +48,12 @@ export async function content() { const intro = sections?.shift()?.trim(); const rank = +metadata.rank; - if (intro) { - blocks.push({ - breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title ?? '')], - href: get_href([slug]), - content: await plaintext(intro), - rank - }); - } + blocks.push({ + breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title ?? '')], + href: get_href([slug]), + content: await plaintext(intro), + rank + }); for (const section of sections) { const lines = section.split('\n'); diff --git a/sites/svelte.dev/src/routes/docs/[slug]/+page.server.js b/sites/svelte.dev/src/routes/docs/[slug]/+page.server.js index 2d06cbb98..fb156a880 100644 --- a/sites/svelte.dev/src/routes/docs/[slug]/+page.server.js +++ b/sites/svelte.dev/src/routes/docs/[slug]/+page.server.js @@ -6,7 +6,7 @@ export const prerender = true; export async function load({ params }) { const processed_page = await get_parsed_docs(await get_docs_data(), params.slug); - if (!processed_page) throw error(404); + if (!processed_page) error(404); return { page: processed_page }; } diff --git a/sites/svelte.dev/src/routes/examples/+page.js b/sites/svelte.dev/src/routes/examples/+page.js index 5a11dff73..242c9cfb1 100644 --- a/sites/svelte.dev/src/routes/examples/+page.js +++ b/sites/svelte.dev/src/routes/examples/+page.js @@ -3,5 +3,5 @@ import { redirect } from '@sveltejs/kit'; export const prerender = true; export function load() { - throw redirect(301, 'examples/hello-world'); + redirect(301, 'examples/hello-world'); } diff --git a/sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js b/sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js index 0c5788f30..5255475f2 100644 --- a/sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js +++ b/sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js @@ -12,7 +12,7 @@ export const GET = ({ params }) => { .map((example) => example.slug) ); - if (!examples.has(params.slug)) throw error(404, 'Example not found'); + if (!examples.has(params.slug)) error(404, 'Example not found'); return json(get_example(examples_data, params.slug)); }; diff --git a/sites/svelte.dev/src/routes/faq/+server.js b/sites/svelte.dev/src/routes/faq/+server.js index 5b601910e..6f35cdc67 100644 --- a/sites/svelte.dev/src/routes/faq/+server.js +++ b/sites/svelte.dev/src/routes/faq/+server.js @@ -3,5 +3,5 @@ import { redirect } from '@sveltejs/kit'; export const prerender = true; export function GET() { - throw redirect(308, '/docs/faq'); + redirect(308, '/docs/faq'); } diff --git a/sites/svelte.dev/src/routes/roadmap/+page.js b/sites/svelte.dev/src/routes/roadmap/+page.js index b858441cb..2010d73c9 100644 --- a/sites/svelte.dev/src/routes/roadmap/+page.js +++ b/sites/svelte.dev/src/routes/roadmap/+page.js @@ -1,7 +1,7 @@ import { redirect } from '@sveltejs/kit'; export function load() { - throw redirect( + redirect( 307, 'https://docs.google.com/document/d/1IA9Z5rcIm_KRxvh_L42d2NDdYRHZ72MfszhyJrsmf5A' ); diff --git a/sites/svelte.dev/src/routes/tutorial/+page.server.js b/sites/svelte.dev/src/routes/tutorial/+page.server.js index ccafa42ec..d6c086859 100644 --- a/sites/svelte.dev/src/routes/tutorial/+page.server.js +++ b/sites/svelte.dev/src/routes/tutorial/+page.server.js @@ -3,5 +3,5 @@ import { redirect } from '@sveltejs/kit'; export const prerender = true; export function load() { - throw redirect(301, '/tutorial/basics'); + redirect(301, '/tutorial/basics'); } diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js index 59bc31802..a4a07b7b8 100644 --- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js +++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js @@ -8,14 +8,14 @@ import { error, redirect } from '@sveltejs/kit'; export const prerender = true; export async function load({ params }) { - if (params.slug === 'local-transitions') throw redirect(307, '/tutorial/global-transitions'); + if (params.slug === 'local-transitions') redirect(307, '/tutorial/global-transitions'); const tutorial_data = await get_tutorial_data(); const tutorials_list = get_tutorial_list(tutorial_data); const tutorial = await get_parsed_tutorial(tutorial_data, params.slug); - if (!tutorial) throw error(404); + if (!tutorial) error(404); return { tutorials_list, diff --git a/sites/svelte.dev/static/media/framework-poll.webp b/sites/svelte.dev/static/media/framework-poll.webp new file mode 100644 index 000000000..9553ad91d Binary files /dev/null and b/sites/svelte.dev/static/media/framework-poll.webp differ diff --git a/sites/svelte.dev/static/opensearch.xml b/sites/svelte.dev/static/opensearch.xml new file mode 100644 index 000000000..adaa23733 --- /dev/null +++ b/sites/svelte.dev/static/opensearch.xml @@ -0,0 +1,10 @@ + + Svelte + Search Svelte + UTF-8 + https://svelte.dev/favicon.png + + https://svelte.dev/search +