* 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>
12 KiB
title | description | author | authorURL |
---|---|---|---|
What's new in Svelte: August 2022 | Changes to SvelteKit's `load` before 1.0 plus support for Vite 3 and `vite.config.js`! | Dani Sandoval | https://dreamindani.com |
There's a lot to cover this month... big changes are coming to SvelteKit's design before 1.0 can be completed. If you haven't already, check out Rich's Discussion, Fixing load
, and tightening up SvelteKit's design before 1.0 #5748.
Also, @dummdidumm (Simon H) has joined Vercel to work on Svelte full-time and @tcc-sejohnson has joined the group of SvelteKit maintainers! We're super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!
Now onto the rest of the updates...
What's new in SvelteKit
- Dynamically imported styles are now included during SSR (#5138)
- Improvements to routes and prop updates to prevent unnecessary rerendering (#5654, #5671)
- Lots of improvements to error handling (#4665, #5622, #5619, #5616)
- Custom Vite modes are now respected in SSR builds (#5602)
- Custom Vite config locations are now supported (#5705)
- Private environment variables (aka "secrets") are now much more secure. Now if you accidentally import them to client-side code, you'll see an error (#5663, Docs)
- Vercel's v3 build output API is now being used in
adapter-vercel
(#5514) vite-plugin-svelte
has reached 1.0 and now supports Vite 3. You'll notice new default ports fordev
(port 5173) andpreview
(port 4173) (#5005, vite-plugin-svelte CHANGELOG)
Breaking changes:
mode
,prod
andserver
are no longer available in$app/env
(#5602)svelte-kit
CLI commands are now run using thevite
command andvite.config.js
is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook (#5332, Docs)endpointExtensions
is nowmoduleExtensions
and can be used to filter param matchers (#5085, Docs)- Node 16.9 is now the minimum version for SvelteKit (#5395)
- %-encoded filenames are now allowed. If you had a
%
in your route, you must now encode it with%25
(#5056) - Endpoint method names are now uppercased to match HTTP specifications (#5513, Docs)
writeStatic
has been removed to align with Vite's config (#5618)transformPage
is nowtransformPageChunk
(#5657, Docs)- The
prepare
script is no longer needed inpackage.json
(#5760) adapter-node
no longer does any compression while we wait for a bug fix in thecompression
library (#5560)
For a full list of changes, check out kit's CHANGELOG.
What's new in Svelte & Language Tools
- The
@layer
CSS at-rule is now supported in Svelte components (3.49.0, PR) - The
inert
HTML attribute is now supported in Svelte's language tools and plugins (105.20.0, PR) - The Svelte plugin will now use
SvelteComponentTyped
typings, if available (105.19.0, PR)
Community Showcase
Apps & Sites built with Svelte
- PocketBase is an open source Go backend with a single file and an admin dashboard built with Svelte
- Hondo is a word guessing game with multiple rounds
- Hexapipes is a site for playing hexagonal pipes puzzle
- Mail Must Move is an email made for those who want to get more done
- Jot Down is a Visual Studio Code extension for quick and simple note taking
- Kadium is an app for staying on top of YouTube channels' uploads
- Samen zjin we #1metS10 is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
- On Writing Code is an interactive website to learn programming design patterns
- Svelte-In-Motion lets you create Svelte-animated videos in your browser
- Svelte Terminal is a terminal-like website
- Bulletlist is a simple tool with a single purpose: making lists
- Remind Me Again is an app for toggleable reminders on Mac, Linux and Windows
- Heyweek is a timetracking app built for freelancers craving that extra pizzazz
Learning Resources
Starring the Svelte team
- The Svelte Documentary is out! on Svelte Radio
- Beginner SvelteKit by Vercel
- Challenge: Explore Svelte by Building a Bubble Popping Game by Brittney Postma
- Let's write a Client-side Routing Library with Svelte by lihautan
- Svelte Sirens July Talk - Testing in Svelte with Jess Sachs
To Watch
- 10 Awesome Svelte UI Component Libraries by LevelUpTuts
- Learn How SvelteKit Works and SvelteKit Endpoints by Joy of Code
- SvelteKit using TS, and Storybook setup by Jarrod Kane
- Building Apps with Svelte! by Simon Grimm
- SvelteKit authentication, the better way - Tutorial by Pilcrow
To Read
- Some assorted Svelte demos by Geoff Rich
- Three ways to bootstrap a Svelte project by Thilo Maier
- Design & build an app with Svelte by Hugo
- Define routes via JS in SvelteKit by Max Core
- Integrating Telegram api with SvelteKit by Shivam Meena
- SvelteKit SSG: how to Prerender your SvelteKit Site by Rodney Lab
- ADEO Design System: Building a Web Component library with Svelte and Rollup by Mohamed Mokhtari
- The Svelte Handbook by The Valley of Code
- Test Svelte Component Using Vitest & Playwright by David Peng
- Transitional Apps with Phoenix and Svelte by Nathan Cahill
Tech Demos
- Bringing the best GraphQL experience to Svelte by The Guild
- Style your Svelte website faster with Stylify CSS by Stylify
- Revamped Auth Helpers for Supabase (with SvelteKit support) by Supabase
Libraries, Tools & Components
- Lucia is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
- Skeleton is a UI component library for use with Svelte + Tailwind
- pass-composer helps you compose your postprocessing passes for threlte scenes
- @crikey/stores-* is a collection of libraries to extend Svelte stores for common use-cases
- Svelte Chrome Storage is a lightweight abstraction between Svelte stores and Chrome extension storage
- Svelte Schema Form is a form generator for JSON schema
- svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view
- Snap Layout and universal-title-bar bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a
.svelte
module or as a web component - svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
- json2dir converts JSON objects into directory trees
- Svelte Command Palette is a drop-in command palette component
- svelte-use-drop-outside is a Svelte action to drop an element outside an area
- PowerTable is a JavaScript component that turns JSON data into an interactive HTML table
- svelte-slides is a slide show template for Svelte using Reveal.js
- Svelte Theme Light is a Visual Studio Code theme based on the Svelte REPL
Did we miss anything? Let us know on Reddit or Discord!
Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! Get your tickets now.
See ya next month!