diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2eb842967a45..c04ee83f97ab 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -49,4 +49,13 @@ jobs: with: node-version: 16 cache: pnpm - - run: 'pnpm i && pnpm check && pnpm lint' + - name: install + run: pnpm install --frozen-lockfile + - name: type check + run: pnpm check + - name: lint + if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail (avoids multiple runs uncovering different issues at different steps) + run: pnpm lint + - name: build and check generated types + if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail + 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); } diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 999f04d80c9d..06b94803bb7b 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 675d809fec0b..8e49238b2877 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 9b5a5eec4c7c..613d4a9466cc 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 46e45a11309e..04401a163d96 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 4c9a12238510..ce94c6510615 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 @@ -45,7 +45,7 @@ Want to learn more about how to get started, what's different compared to Sapper - [svelte-formly](https://github.com/arabdevelop/svelte-formly) generates dynamic forms for Svelte and Sapper - [7ty](https://www.npmjs.com/package/@jamcart/7ty) is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty. -**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). +**Want to contribute your own component?** [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. **Starters** @@ -53,7 +53,7 @@ Want to learn more about how to get started, what's different compared to Sapper - [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte. - [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function. -**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) +**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates) **Learning Resources** 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 1e176b742191..94fcce704259 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 @@ -49,7 +49,7 @@ Last week, Svelte Summit blew us away with a mountain of content! [Check out the - [Sveltekit-JUI](https://github.com/Wolfr/sveltekit-jui) is a kit of UI components to be used in conjunction with Svelte and Svelte Kit. - [EZGesture](https://github.com/mhmd-22/ezgesture#integrating-with-other-frameworks) makes it easy to add gestures functionality with simple native DOM events -**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). +**Want to contribute your own component?** [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. **Starters** 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 cf05ef09fe9b..76e56dd07a49 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 @@ -56,7 +56,7 @@ This month, we saw lots of contributions to SvelteKit and its docs. The language - [svelte-entity-store](https://www.npmjs.com/package/svelte-entity-store) is to provide a simple, generic solution for storing collections of entity objects. - [svelte-animation-store](https://github.com/joshnuss/svelte-animation-store) is a store that is based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween. -**Want to contribute a component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). +**Want to contribute a component?** [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. ## 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 97bd24605fc4..f660a43bfaf0 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 @@ -68,7 +68,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git - [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in. - [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies. -Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem. +Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more templates, adders and adapters from across the Svelte ecosystem. ## 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 1cbffd5baf62..3ed0545c2791 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 @@ -77,7 +77,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git - [svelte-ionic-starter](https://github.com/Zettexe/svelte-ionic-starter) a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets - [demo-sveltekit-sanity](https://github.com/stephane-vanraes/demo-sveltekit-sanity/) is a starter kit for SvelteKit and Sanity, an open source React CMS -Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem. +Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more templates, adders and adapters from across the Svelte ecosystem. ## 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 c3611c255296..05d80147ba40 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 @@ -89,7 +89,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git - [focus-svelte](https://github.com/chanced/focus-svelte) is a focus trap for Svelte with zero dependencies - [filedrop-svelte](https://github.com/chanced/filedrop-svelte) is a file dropzone action & component for Svelte -Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem. +Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more templates, adders and adapters from across the Svelte ecosystem. ## 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 2ac151af8548..3a545152956b 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 @@ -83,6 +83,6 @@ To see all updates to Svelte and SvelteKit, check out the [Svelte](https://githu - [@svelte-drama/suspense](https://www.npmjs.com/package/@svelte-drama/suspense) is a Svelte component that implements the core idea of React's ``. Also check out [SWR for Svelte](https://www.npmjs.com/package/@svelte-drama/swr) to make refetching even easier. - [sveltekit-adapter-browser-extension](https://github.com/antony/sveltekit-adapter-browser-extension) is an adapter for SvelteKit which turns your app into a cross-platform browser extension -Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more tools, templates, adders and adapters from across the Svelte ecosystem. +Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more tools, templates, adders and adapters from across the Svelte ecosystem. Looking for more Svelte goodness? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [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 db94a5ca2f41..b3805bf3d1dd 100644 --- a/documentation/blog/2022-01-13-accelerating-sveltes-development.md +++ b/documentation/blog/2022-01-13-accelerating-sveltes-development.md @@ -35,7 +35,7 @@ Svelte began accepting donations via [OpenCollective](https://opencollective.com ## Partnerships -Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/components#adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does. +Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does. We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers. diff --git a/documentation/blog/2023-12-01-whats-new-in-svelte-december-2023.md b/documentation/blog/2023-12-01-whats-new-in-svelte-december-2023.md new file mode 100644 index 000000000000..dffac3dfe2de --- /dev/null +++ b/documentation/blog/2023-12-01-whats-new-in-svelte-december-2023.md @@ -0,0 +1,115 @@ +--- +title: "What's new in Svelte: December 2023" +description: 'Svelte 5 preview announced at Svelte Summit Fall 2023' +author: Dani Sandoval +authorURL: https://dreamindani.com +--- + +Svelte Summit Fall 2023 was epic! Featuring talks from across the ecosystem and the launches from the core team of new Svelte Dev Tools, image optimization, and a preview version of Svelte 5.0! The whole talk can be found [here](https://www.youtube.com/watch?v=pTgIx-ucMsY) (timestamps below): +- [0:00](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=0s) Hype music! +- [18:20](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=1100s) Exploring Svelte DevTools - Ignatius B (4 minutes) +- [25:27](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=1527s) How does SvelteKit fare as a SPA Framework - Henry Lie (25 minutes) +- [53:00](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=3180s) enhanced:img - Ben McCann (6 minutes) +- [1:03:44](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=3824s) inlang-paraglide JS for SvelteKit i18n - Samuel Stroschein (10 minutes) +- [1:17:32](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=4652s) How Svelte & GraphQL plays well together - Jean-Yves Couet (31 minutes) +- [1:53:10](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=6790s) svelte-ecosystem-ci - Dominik G (10 minutes) +- [2:23:06](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=8586s) Svelte for Creative Development - Steven Stavrakis (10 minutes) +- [2:35:33](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=9333s) Translating the docs - Romain I'Ourson (11 minutes) +- [2:49:48](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=10188s) ENHANCE! - Paolo Ricciuti (25 minutes) +- [3:18:25](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=11905s) Accessibility tips with Svelte solutions - Enrico Sacchetti (25 minutes) +- [3:49:11](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=13751s) svelte@next - Rich Harris (18 minutes) + +Today is also the first day of [Advent of Svelte](https://advent.sveltesociety.dev/): A Svelte challenge for each day of December. Join the festivities and participate in a daily frontend challenge using Svelte! + +Now let's dive into the updates... + +## What's new in Svelte (5.0 Preview!) + +[Svelte 5 preview](https://svelte-5-preview.vercel.app/docs/introduction) is now available at [svelte@next](https://www.npmjs.com/package/svelte?activeTab=versions) while Svelte 4's current version (`@latest`) is `4.2.7`. All the changes below are from the preview's branch: + +- TypeScript is now supported natively via acorn-typescript (**5.0.0-next.9**, [#9482](https://github.com/sveltejs/svelte/pull/9482)) +- The new `$effect.active` rune returns a boolean to indicate if an effect is active. This lets you set up subscriptions when a value is read (in an effect, or in the template) but also read values without creating subscriptions (**5.0.0-next.10**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#effect-active), [#9591](https://github.com/sveltejs/svelte/pull/9591)) +- The new `$effect.root` rune creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control (**5.0.0-next.14**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#effect-root), [#9638](https://github.com/sveltejs/svelte/pull/9638)) + +For all the release notes going forward, check out [the CHANGELOG on main](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md). For the highlights, take a look below! + + +## What's new in SvelteKit + +- Creating a new SvelteKit project will now ask if you want to try the Svelte 5 beta ([#11026](https://github.com/sveltejs/kit/pull/11026)) +- Prettier 3 and `prettier-plugin-svelte` 3 are now the default versions when creating new SvelteKit projects ([#10410](https://github.com/sveltejs/kit/pull/10410)) +- nodejs20.x is now supported via the Vercel adapter ([#11067](https://github.com/sveltejs/kit/pull/11067)) +- `@sveltejs/enhanced-img` makes serving different sizes of images easy, thanks to pre-processing ([Docs](https://kit.svelte.dev/docs/images#sveltejs-enhanced-img), [#10788](https://github.com/sveltejs/kit/pull/10788)) + +For a complete list of bug fixes and performance updates, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages). + + +## What's new in Language Tools + +- The latest version of language tools adds best-effort fallback typings to `$props()` rune (**extensions-108.1.0**) +- Language tools better supports the `@render` tag by using the `Snippet` type (**extensions-108.0.0**) +- The Svelte ESLint plugin has been updated to support the Svelte 5 preview ([v2.36.0-next.2](https://github.com/sveltejs/eslint-plugin-svelte/releases/tag/v2.36.0-next.2)) + + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** + +- [MobileView](https://mobileview.io/) is a Chrome Extension for real-time, cross-device website simulation +- [ClassroomIO](https://www.classroomio.com/) is an Open Source Platform for Tech Bootcamps +- [sshx](https://github.com/ekzhang/sshx) is a secure web-based, collaborative terminal +- [ToneShift](https://www.toneshift.cc/) lets you clone any voice, create music, and join a community of voices +- [CanvasGPT](https://www.canvasgpt.com/) is Autonomous Mind Maps. Powered by AI +- [Wordplay](https://wordplay.dev/) is a new educational, accessible, and language-inclusive programming language for creating playful, interactive typography ([Blog Post](https://medium.com/bits-and-behavior/wordplay-accessible-language-inclusive-interactive-typography-e4b9027eaf10)) +- [CodeFlow](https://github.com/SikandarJODD/CodeFlow) is a roadmap for programmers to learn, think and code better +- [Teller](https://github.com/Valink-Solutions/teller) is a comprehensive Minecraft backup solution designed to facilitate both local backups and interfacing with the ChunkVault Backend +- [Sudoku](https://github.com/betofigueiredo/sudoku) is a board created with SvelteKit, Typescript and Tailwind + +**Learning Resources** + +_Featuring Svelte Contributors and Ambassadors_ +- [View Transitions in SvelteKit and beyond with Geoff Rich](https://www.svelteradio.com/episodes/view-transitions-in-sveltekit-and-beyond-with-geoff-rich) and [Melting UIs with Thomas G. Lopes](https://www.svelteradio.com/episodes/melting-uis-with-thomas-g-lopes) by Svelte Radio +- [Making The Best Svelte SVG Animation Library](https://www.youtube.com/watch?v=_jWnyJRKOvU), [How To Publish Your JavaScript Code To Npm With SvelteKit](https://www.youtube.com/watch?v=Xvq8rCl1lIM), and [What's New In Svelte 5? (Runes, Events, Snippets)](https://www.youtube.com/watch?v=gGwnF-lxS_Q) by Joy of Code +- Svelte Society Talks + - [Svelte Society - San Diego November 2023](https://www.youtube.com/watch?v=Gh4ESdKP3yQ) + - [Building a SvelteKit Adapter for WinterJS](https://www.youtube.com/watch?v=8HaAagG6V-Q) with Willow and Kev +- This Week in Svelte: + - [2023 October 27](https://www.youtube.com/watch?v=jCNl6dtFDn4) - SvelteKit 1.27.1, the pillars of a component library + - [2023 November 3](https://www.youtube.com/watch?v=-cyO9xzBXtk) - SvelteKit 1.27.2, choosing a database, preprocessors + - [2023 November 10](https://www.youtube.com/watch?v=1ZWqySQNrtQ) - SvelteKit 1.27.4, Svelte 4.2.3, closing modals + - [2023 Nov 17](https://www.youtube.com/watch?v=9lK6VvBEtL0) - SvelteKit 1.27.6, Svelte 4.2.5, new Svelte 5 features! + - [2023 Nov 24](https://www.youtube.com/watch?v=vofaP86-HKU) - Svelte 4.2.7, TypeScript in markup, websockets in SvelteKit + +_To Watch/Hear_ + +- [Why Stack Overflow is embracing Svelte](https://stackoverflow.blog/2023/10/31/why-stack-overflow-is-embracing-svelte/) by The Stack Overflow Podcast +- [Building a Twitter Clone with Svelte, SvelteKit, ,Firebase, Tailwind Css, Shad-cn Svelte etc](https://www.youtube.com/watch?v=MoHtXyRI7CQ) by Lawal Adebola +- [SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial](https://www.youtube.com/watch?v=QKxJW6VVp6w) by Prismic + +_To Read_ + +- [Hands-On Experience: How to Build an eCommerce Store with SvelteKit?](https://crystallize.com/blog/building-ecommerce-with-sveltekit) by Bård Farstad +- [Productive Dark Mode with SvelteKit, PostCSS, and TailwindCSS (Behind the Screen)](https://www.sveltevietnam.dev/en/blog/20231110-behind-the-screen-dark-mode-with-sveltekit-tailwindcss-and-postcss) by Quang Phan +- [Setting up OAuth with Auth.js in a SvelteKit Project](https://mainmatter.com/blog/2023/11/23/setting-up-oauth-with-auth-js-and-sveltekit/) by Andrey Mikhaylov +- [SvelteKit 🤝 Storybook](https://mainmatter.com/blog/2023/11/28/sveltekit-storybook/) by Paolo Ricciuti +- [Integrate Storybook in Svelte: Doing it the Svelte-way](https://mainmatter.com/blog/2023/09/18/integrate-storybook-in-svelte-doing-it-the-svelte-way/) by Óscar Domínguez Celada +- [Drizzle ORM with Sveltekit](https://medium.com/@anasmohammed361/drizzle-orm-with-sveltekit-8aecbc8cc39d) and [Sveltekit — Streaming SSR](https://medium.com/@anasmohammed361/sveltekit-streaming-ssr-40ce666daffa) by Mohammed Anas +- [Svelte & WordPress Full Stack Course](https://www.udemy.com/course/svelte-wordpress-full-stack/) by Artneo Web Design on udemy +- [Add a loading indicator to a Form Action in SvelteKit](https://snippets.khromov.se/add-a-loading-indicator-to-a-form-action-in-sveltekit/) by Useful Snippets (Stanislav Khromov) + +**Libraries, Tools & Components** + +- [sveltekit-view-transition](https://github.com/paoloricciuti/sveltekit-view-transition) provides a simplified `view-transition-api` for Sveltekit +- [T18S](https://t18s.sigrist.dev/) aims to provide the best internationalization experience for SvelteKit, delivering typesafety, performance, and ease of use +- [Svelte Flow](https://svelteflow.dev/) is a customizable Svelte component for building node-based editors and interactive diagrams +- [Super Sitemap](https://github.com/jasongitmail/super-sitemap) is a SvelteKit sitemap focused on ease of use and making it impossible to forget to add your paths +- [Svelte UX](https://svelte-ux.techniq.dev/) is a Tailwind-based component library to simplify creating highly interactive and visual applications +- [CanIKit](https://github.com/tombroomfield/CanIKit) provides a simple way to add authorization to your SvelteKit application +- [Svelte Toggles](https://github.com/Team-GOATS/svelte-toggles-npm-package) manages light & dark mode interactions and preference storage +- [Baselime](https://baselime.io/docs/sending-data/cloudflare/pages/sveltekit/) now supports SvelteKit for the edge-logger package + +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). + +Until next time 👋 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 000000000000..1085d1bbb74b --- /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 000000000000..92bd479ea50e --- /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/docs/01-getting-started/01-introduction.md b/documentation/docs/01-getting-started/01-introduction.md index 8d3c41ce1ace..73766b1b9bc9 100644 --- a/documentation/docs/01-getting-started/01-introduction.md +++ b/documentation/docs/01-getting-started/01-introduction.md @@ -23,11 +23,11 @@ SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/packag If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well. -Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR. +Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/packages?category=bundler-plugins) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR. ## Editor tooling -The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well. +The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well. ## Getting help diff --git a/documentation/docs/04-compiler-and-api/01-svelte-compiler.md b/documentation/docs/04-compiler-and-api/01-svelte-compiler.md index 014a2617a3a2..11e9246011de 100644 --- a/documentation/docs/04-compiler-and-api/01-svelte-compiler.md +++ b/documentation/docs/04-compiler-and-api/01-svelte-compiler.md @@ -2,7 +2,7 @@ title: 'svelte/compiler' --- -Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/tools/#bundling) for additional tools like Rollup and Webpack. +Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/packages?category=bundler-plugins) for additional tools like Rollup and Webpack. Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you. @@ -74,7 +74,7 @@ const ast = parse(source, { filename: 'App.svelte' }); > EXPORT_SNIPPET: svelte/compiler#preprocess -A number of [official and community-maintained preprocessing plugins](https://sveltesociety.dev/tools#preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less. +A number of [official and community-maintained preprocessing plugins](https://sveltesociety.dev/packages?category=preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less. You can write your own preprocessor using the `svelte.preprocess` API. @@ -136,6 +136,27 @@ declare global { export {}; +// @filename: sass.d.ts +declare module 'sass' { + export function render( + options: { + file: string; + data: string; + includePaths: string[]; + }, + callback: (err: Error, result: Result) => void + ): Result; + + export interface Result { + css: { + toString(): string; + }; + stats: { + includedFiles: string[]; + }; + } +} + // @filename: main.ts // @errors: 2322 2345 2339 /// diff --git a/documentation/docs/04-compiler-and-api/02-client-side-component-api.md b/documentation/docs/04-compiler-and-api/02-client-side-component-api.md index 93856cf010fd..6889b192e571 100644 --- a/documentation/docs/04-compiler-and-api/02-client-side-component-api.md +++ b/documentation/docs/04-compiler-and-api/02-client-side-component-api.md @@ -152,6 +152,7 @@ A function is returned that will remove the event listener when called. ```ts /// file: index.js +// @errors: 7006 // @filename: ambient.d.ts import { SvelteComponent, ComponentConstructorOptions } from 'svelte'; diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md index ea932eff344b..b6382002147d 100644 --- a/documentation/docs/05-misc/01-faq.md +++ b/documentation/docs/05-misc/01-faq.md @@ -65,7 +65,7 @@ There will be a blog post about this eventually, but in the meantime, check out ## Is there a UI component library? -There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/components#design-systems) on the Svelte Society website. +There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/packages?category=design-system) on the Svelte Society website. ## How do I test Svelte apps? @@ -100,7 +100,7 @@ If you need hash-based routing on the client side, check out [svelte-spa-router] [Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR. -You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers). +You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/packages?category=routers). ## Can I tell Svelte not to remove my unused styles? diff --git a/documentation/docs/05-misc/03-typescript.md b/documentation/docs/05-misc/03-typescript.md index 3fe3580f7ee3..13e59e47abb4 100644 --- a/documentation/docs/05-misc/03-typescript.md +++ b/documentation/docs/05-misc/03-typescript.md @@ -28,6 +28,23 @@ If you don't need or want all the features SvelteKit has to offer, you can scaff ```ts /// file: svelte.config.js +// @filename: ambient.d.ts +declare module '@sveltejs/vite-plugin-svelte' { + import { ResolvedConfig } from 'vite'; + import { InlineConfig } from 'vite/dist/node/config'; + + export interface VitePreprocessOptions { + script?: boolean; + style?: boolean | InlineConfig | ResolvedConfig; + } + + export function vitePreprocess( + options?: VitePreprocessOptions + ): import('svelte/compiler').PreprocessorGroup; +} + +// @filename: index.ts +// ---cut--- import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; const config = { diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/05-misc/04-v4-migration-guide.md index 640feb1f82e9..a5c8b4ebbc57 100644 --- a/documentation/docs/05-misc/04-v4-migration-guide.md +++ b/documentation/docs/05-misc/04-v4-migration-guide.md @@ -19,7 +19,7 @@ If you're a library author, consider whether to only support Svelte 4 or if it's Bundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration. - For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details -- For wepback this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details +- For webpack this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details ([#8516](https://github.com/sveltejs/svelte/issues/8516)) diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte index f92468ab79f7..5cceed3e45cd 100644 --- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte +++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte @@ -13,7 +13,7 @@ - diff --git a/documentation/tutorial/01-introduction/06-making-an-app/text.md b/documentation/tutorial/01-introduction/06-making-an-app/text.md index 89788ea58085..768c8468e24a 100644 --- a/documentation/tutorial/01-introduction/06-making-an-app/text.md +++ b/documentation/tutorial/01-introduction/06-making-an-app/text.md @@ -10,11 +10,11 @@ First, you'll need to integrate Svelte with a build tool. We recommend using [Sv npm create svelte@latest myapp ``` -There are also a number of [community-maintained integrations](https://sveltesociety.dev/tools). +There are also a number of [community-maintained integrations](https://sveltesociety.dev/packages?category=bundler-plugins). Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process. -You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/tools#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). +You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/resources#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). @@ -31,6 +31,7 @@ foo