diff --git a/.changeset/eight-swans-occur.md b/.changeset/eight-swans-occur.md new file mode 100644 index 0000000000..f2436dd5fe --- /dev/null +++ b/.changeset/eight-swans-occur.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add types for popover attributes and events 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 675d809fec..8e49238b28 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 9b5a5eec4c..613d4a9466 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 46e45a1130..04401a163d 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 4c9a122385..7785d201ba 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** 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 1e176b7421..94fcce7042 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 cf05ef09fe..76e56dd07a 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/2022-01-13-accelerating-sveltes-development.md b/documentation/blog/2022-01-13-accelerating-sveltes-development.md index db94a5ca2f..1637832900 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#svelte-kit-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-14-sveltekit-2.md b/documentation/blog/2023-12-14-sveltekit-2.md index 386ffe147a..a31840797b 100644 --- a/documentation/blog/2023-12-14-sveltekit-2.md +++ b/documentation/blog/2023-12-14-sveltekit-2.md @@ -34,7 +34,7 @@ Today is the one year anniversary of SvelteKit’s launch and we’re excited to 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/components#design-systems). 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/). +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#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)). 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 0000000000..92bd479ea5 --- /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 8d3c41ce1a..62d3f954df 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#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 27b7f1df7d..08277827eb 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#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#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. diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md index ea932eff34..bed7d31c11 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#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#routers). ## Can I tell Svelte not to remove my unused styles? diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/05-misc/04-v4-migration-guide.md index 640feb1f82..a5c8b4ebbc 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/tutorial/01-introduction/06-making-an-app/text.md b/documentation/tutorial/01-introduction/06-making-an-app/text.md index 89788ea580..08126c14bd 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#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).