mirror of
https://github.com/sveltejs/svelte.git
synced 2024-12-01 17:30:59 +01:00
993b40201c
* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
14 KiB
14 KiB
| title | description | author | authorURL |
|---|---|---|---|
| What's new in Svelte: March 2023 | SvelteHack, post-1.0 SvelteKit improvements and a huge showcase | Dani Sandoval | https://dreamindani.com |
March is coming in hot with a number of essential features having been added to SvelteKit following its 1.0 launch. Check out last week's blog post for more details.
Svelte Society also launched SvelteHack last month with over $12,000 in prizes - calling all Svelte developers, new and old, to make something awesome before the April 17th deadline!
And, if you haven't heard already, there's going to be another Svelte Summit! Head over to SvelteSummit.com and sign up for the newsletter to get updates about the next event 📬
Now let's jump into this month's changes...
What's new in SvelteKit
$app/pathscan now be used without an app - making things like component testing with Vitest, using Storybook, etc. easier (1.4.0, #8838)- Adapters can now be configured at the route level (1.5.0, Docs, #8740)
- The new snapshot mechanism preserves ephemeral DOM state even after navigation and page reloads (1.5.0,Docs, #8710)
OPTIONSare now available within the server method (1.6.0, Docs, #8731)- Richer error messages have been added for invalid exports (1.7.0, #9055)
- Streaming promises are now available for server load functions (1.8.0, Docs, #8901)
- A new configuration option,
preloadStrategy, helps tune preloading to avoid import 'waterfalls' on certain browsers (1.8.4, Docs, #9179) - The new
paths.relativeoption can control interpretation ofpaths.assetsandpaths.base(1.9.0, Docs, #9220)
What's new in Svelte and Language Tools
- The REPL on
svelte.devnow supports theexportsfield inpackage.json(#445) - The new Call Hierarchy feature lets you see where a function or a class is called and follow the call stack up (extensions-107.1.0, #1889)
declarationMapsupport has been added to the Svelte extension. Now "go to definition" on.sveltefiles will navigate to the source code when a library has declaration maps (extensions-107.1.0, #1878)- TypeScript Inlay Hints support is now available via the Svelte Extension. Enable them with
javascript.inlayHints.*ortypescript.inlayHints.*(extensions-107.1.0, #1855)
*for all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.
Community Showcase
Apps & Sites built with Svelte
- win32.run is a version of Windows XP in the browser - with a File System, programs, XP-style File Picker and Saver dialogs, 3rd-party programs, and more
- Svelte Radial Menu is a radial menu experiment - based on Rauno's radial menu
- apod color search lets you search for astronomy picture of the day (APO) photos by color
- SvHighlight is a code highlighter for SvelteKit and TailwindCSS with blur and focus blocks
- Limey lets you create beautiful one-page websites in minutes
- a/links is an extension for short, composable bookmarks
- Sprint Cards is a design challenge generator
- Plought is a tool to reduce noise in decision making
- ArcOS-Frontend is a rewrite of the Arc operating system's frontend in Svelte
- Poxi is powering the user-made web with a drag-and-drop, drawable website editor that's easy to collaborate in
- demo-threlte-scroller-rocinante is a "scrolly telling" proof-of-concept that combines svelte-sequence with Threlte
- Phonics + Stuff is a set of resources for learning & teaching phonics
Learning Resources
Featuring Svelte Contributors and Ambassadors
- Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich (on the Svelte Blog)
- View Transition Experiments with Svelte and Native Page Transitions in SvelteKit (updated for 2023) by Geoff Rich
- Ron Au's story and how to be whimsical! by Svelte Radio
- SvelteKit 1.0 with Rich Harris by PodRocket
- Svelte Society Africa has formally launched!
- SvelteKit overview with Simon and Dominik by Frontend RheinMain
To Watch or Hear
- Delightful Web Development with SvelteKit is a workshop from This Dot Labs - taking place on April 13th.
- Have More Control Over Layouts With Group Layouts In SvelteKit and Learn SvelteKit Hooks Through 6 Examples by Joy of Code
- Svelte Kit Creating Popup Modals with Tailwind CSS and SvelteKit: Creating Dynamic Tables with Tailwind CSS by Abdul Rehman 2050
To Read
- Svelte Language Server Example by VolarJS
- How I Made My App 2.4x Faster Switching to Svelte by Erik Verduin
- Smooth Page Transitions with SvelteKit and How to Build a Static SvelteKit Site by Phil Kruft
- Blazing fast PWAs with SEO power using SvelteKit and Ionic by Tommertom
- Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg
- A Business Case for SvelteKit by Chris Ellis
- How to set up a new Svelte project with SvelteKit by Igor Nowosad
- How to type Events, Slots, and Props in Svelte by Raqueebuddin Aziz
- Use TypeScript with SvelteKit and Supabase by Ross Robino
- Invoking Svelte components from your Ember apps by Rajasegar Chandran
- Add a sitemap to your server side rendered SvelteKit website and State in URL: the SvelteKit approach by Justin Ahinon
- Display crypto data real-time in a chart using Sveltekit, Chart.js & coincap.io by Hessel
Libraries, Tools & Components
UI Kits and Components
- Pink is a framework agnostic design system from Appwrite
- quick-pick is a simple search tool where you control the search catalog
- Grail UI offers a set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience
- svelte-image-comparison is a Svelte component to compare image or canvas elements
- simple-font-select is a simple font select component that exposes all local fonts as CSS font families
- svelte-datatables-net is a Svelte component that turns data into an interactive HTML table
- svelte-flextable is a toolkit for creating server-side processing datatable components with Svelte
- svelte-algolia-instantsearch is a community-developed wrapper around instantsearch.js for Svelte
- svelte-deep-zoom is a Svelte component to render interactive Deep Zoom images (tiled image pyramids)
- SVoast is a simple toast component for Svelte
- svelte-otp is a simple lightweight OTP input component for svelte
- trace-svelte is a line by line highlighter for Svelte
- Svelte Auth UI is a set of authentication components for Svelte
- KitDocs is a documentation integration for SvelteKit - a VitePress alternative for Svelte
- svelte-signature-pad is a Svelte action to capture smoothed signatures as SVG paths using the excellent perfect-freehand library
Helpers, Stores and Actions
- SvelteKit-Document is a tiny utility for SvelteKit that lets you change the
<html>,<head>, and<body>tags from any page or layout - with full SSR support - SvelteKit Form Data is an automatic SvelteKit form data parser middleware
- sveltekit-superforms supercharges your SvelteKit forms with a bunch of quality of life features. Purports to be a "powerhouse of a library"
- Houdini - the "disappearing" GraphQL client for the SvelteKit - is now 1.0
- sveltekit-modal-langchain is an example SvelteKit project using sveltekit-modal, showing how easy it is to write Python endpoints in SvelteKit
- mdsvex-excerpt allows you to show only a portion of document in certain layouts
- Svelte Action Balancer is a simple Svelte action that makes titles more readable
- svelte-object helps create and maintain objects using components. Values are stores and can therefore be intuitively subscribed to and updated
- svelte-relative-time is a tiny Svelte action and component to render relative times
- svelte-disable-preload is a simple action to apply no-op event listeners to an element that prevent the document-level SvelteKit event handlers being invoked
- SvelteKit Static Sitemap generates a sitemap.xml for your page during build
- svelte-intersection-observer-action is a Svelte action for element position notifications using IntersectionObserver
- svelte-sequence provides custom stores to compose tweened motion sequences over multiple steps
- @svelte-put/inline-svg is a Svelte action for inlining dynamic SVGs (fetched from network)
Other cool tools
- sveltekit-modal lets you write Python endpoints in SvelteKit using Modal
- svelte-kit-bot-block is a server hook to handle spam requests with SvelteKit
- Svelte Email lets you write and design email templates with Svelte and render them to HTML or plain text
- Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers
- svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
- React in Svelte is a library that enables you to use React components in Svelte
- SvelteKit Redis Session Manager is a Redis integration in SvelteKit for Session Management
Thanks for reading! Don't forget to try your hand at the Svelte Hackathon!
Feel free to let us know if we missed anything on Reddit or Discord