From a912706ea7cf5c96fa76c5698b9f90338de4671c Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Sat, 30 Jul 2022 17:38:42 -0600 Subject: [PATCH] august first draft --- ...2-08-01-whats-new-in-svelte-august-2022.md | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md diff --git a/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md new file mode 100644 index 0000000000..20abab24e2 --- /dev/null +++ b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md @@ -0,0 +1,112 @@ +--- +title: "What's new in Svelte: August 2022" +description: "Changes to SvelteKit's `load` before 1.0, better Vite configurations, plus some new HTML and CSS properties!" +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +There's lots to cover this month... with 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](https://github.com/sveltejs/kit/discussions/5748). + +There's been lots of great discussion there over the last few days. If any of the comments resonate with you, feel free to drop an emoji on them 🤓 + +Now onto the rest of the updates... + +## What's new in SvelteKit +- Dynamically imported styles are now included during SSR ([#5138](https://github.com/sveltejs/kit/pull/5138)) +- Improvements to routes and prop updates to prevent unnecessary rerending ([#5654](https://github.com/sveltejs/kit/pull/5654), [#5671](https://github.com/sveltejs/kit/pull/5671)) +- Lots of improvements to error handling ([#4665](https://github.com/sveltejs/kit/pull/4665), [#5622](https://github.com/sveltejs/kit/pull/5622), [#5619](https://github.com/sveltejs/kit/pull/5619), [#5616](https://github.com/sveltejs/kit/pull/5616)) +- Custom Vite modes are now respected in SSR builds ([#5602](https://github.com/sveltejs/kit/pull/5602)) +- Custom Vite config locations are now supported ([#5705](https://github.com/sveltejs/kit/pull/5705)) + +**Breaking changes:** +- `svelte-kit` CLI commands are now run using the `vite` command and `vite.config.js` is required ([#5332](https://github.com/sveltejs/kit/pull/5332), [Docs](https://kit.svelte.dev/docs/project-structure#project-files-vite-config-js)) +- `mode`, `prod` and `server` in `$app/env` have been replaced with a more consistent set of environment variables ([#5602](https://github.com/sveltejs/kit/pull/5602)/[#5663](https://github.com/sveltejs/kit/pull/5663), [Docs](https://kit.svelte.dev/docs/configuration#env)) +- `endpointExtensions` is now `moduleExtensions` and can be used to filter param matchers ([#5085](https://github.com/sveltejs/kit/pull/5085), [Docs](https://kit.svelte.dev/docs/configuration#moduleextensions)) +- Node 16.9 is now the minimum version for SvelteKit ([#5395](https://github.com/sveltejs/kit/pull/5395)) +- %-encoded filenames are now allowed. If you had a `%` in your route, you must now encode it with `%25` ([#5056](https://github.com/sveltejs/kit/pull/5056)) +- Endpoint method names are now uppercased to match HTTP specifications (#5513, [Docs](https://kit.svelte.dev/docs/routing#endpoints)) +- `writeStatic` has been removed to align with Vite's config ([#5618](https://github.com/sveltejs/kit/pull/5618)) +- `transformPage` is now `transformPageChunk` ([#5657](https://github.com/sveltejs/kit/pull/5657), [Docs](https://kit.svelte.dev/docs/hooks#handle)) + +For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). + + +## What's new in Svelte & Language Tools +- The `@layer` [CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is now supported in Svelte components (**3.49.0**, [PR](https://github.com/sveltejs/svelte/issues/7504)) +- The `inert` [HTML attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute) is now supported in Svelte's language tools and plugins ( **105.20.0**, [PR](https://github.com/sveltejs/language-tools/pull/1565)) +- The Svelte plugin will now use `SvelteComponentTyped` typings, if available (**105.19.0**, [PR](https://github.com/sveltejs/language-tools/pull/1548)) + + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** +- [Hondo](https://www.playhondo.com/how-to-play) is a word guessing game with multiple rounds +- [Hexapipes](https://github.com/gereleth/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](https://github.com/brysonbw/vscode-jot-down) is a Visual Studio Code extension for quick and simple note taking +- [Kadium](https://kadium.kasper.space/) is an app for staying on top of YouTube channels' uploads +- [Samen zjin we #1metS10](https://1mets10.avrotros.nl/) is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish +- [Svelte-In-Motion](https://github.com/novacbn/svelte-in-motion) lets you create Svelte-animated videos in your browser +- [Svelte Terminal](https://github.com/Nico-Mayer/svelte-terminal) is a terminal-like website +- [Bulletlist](https://bulletlist.com/) is a simple tool with a single purpose: making lists +- [Remind Me Again](https://github.com/probablykasper/remind-me-again) is an app for toggleable reminders on Mac, Linux and Windows +- [Heyweek](https://heyweek.com/) is a timetracking app built for freelancers craving that extra pizzazz + +**Learning Resources** + +_Starring the Svelte team_ +- [The Svelte Documentary is out!](https://www.svelteradio.com/episodes/the-svelte-documentary-is-out) on Svelte Radio +- [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) by Vite +- [Let's write a Client-side Routing Library with Svelte](https://www.youtube.com/watch?v=3foVDSknGEY) by lihautan + +_To Watch_ +- [10 Awesome Svelte UI Component Libraries](https://www.youtube.com/watch?v=RkD88ARvucM) by LevelUpTuts +- [Learn How SvelteKit Works](https://www.youtube.com/watch?v=VizuTy3uSNE) and [SvelteKit Endpoints](https://www.youtube.com/watch?v=XnVxDLTgCgo) by Joy of Code +- [SvelteKit using TS, and Storybook setup](https://www.youtube.com/watch?v=L4F5dSu0FcQ) by Jarrod Kane +- [Building Apps with Svelte!](https://www.youtube.com/watch?v=prsXVk1fdW4) by Simon Grimm +- [SvelteKit authentication, the better way - Tutorial](https://www.youtube.com/watch?v=Y98KipzwVdM) by Pilcrow + +_To Read_ +- [Some assorted Svelte demos](https://geoffrich.net/posts/assorted-svelte-demos/) by Geoff Rich +- [Three ways to bootstrap a Svelte project](https://maier.tech/posts/three-ways-to-bootstrap-a-svelte-project) by Thilo Maier +- [Design & build an app with Svelte](https://bootcamp.uxdesign.cc/design-build-an-app-with-svelte-ecd7ed0729da) by Hugo +- [Define routes via JS in SvelteKit](https://dev.to/maxcore/define-routes-via-js-in-sveltekit-27e9) by Max Core +- [Integrating Telegram api with SvelteKit](https://dev.to/theether0/integrating-telegram-api-with-sveltekit-5gb) by Shivam Meena +- [SvelteKit SSG: how to Prerender your SvelteKit Site](https://rodneylab.com/sveltekit-ssg/) by Rodney Lab +- [ADEO Design System: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163) by Mohamed Mokhtari +- [The Svelte Handbook](https://thevalleyofcode.com/svelte/) by The Valley of Code +- [Test Svelte Component Using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) by David Peng +- [Transitional Apps with Phoenix and Svelte](https://nathancahill.com/phoenix-svelte) by Nathan Cahill + +_Tech Demos_ +- [Bringing the best GraphQL experience to Svelte](https://www.the-guild.dev/blog/houdini-and-kitql) by The Guild +- [Challenge: Explore Svelte by Building a Bubble Popping Game](https://prismic.io/blog/try-svelte-build-game) by Prismic +- [Style your Svelte website faster with Stylify CSS](https://stylifycss.com/blog/style-your-svelte-website-faster-with-stylify-css/) by Stylify +- [Revamped Auth Helpers for Supabase (with SvelteKit support)](https://supabase.com/blog/2022/07/13/supabase-auth-helpers-with-sveltekit-support) by Supabase + + +**Libraries, Tools & Components** +- [PocketBase](https://github.com/pocketbase/pocketbase) is an open source Go backend with a single file +- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database +- [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind +- [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes +- [@crikey/stores-*](https://www.npmjs.com/package/@crikey/stores-base) is a collection of 8 libraries to extend Svelte stores for common use-cases +- [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage +- [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema +- [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view +- [Snap Layout](https://github.com/ThaUnknown/snap-layout) is a window resizing module for PWAs +- [svelte-adapter-bun](https://github.com/gornostay25/svelte-adapter-bun?c) is an adapter for SvelteKit apps that generates a standalone Bun server +- [json2dir](https://www.npmjs.com/package/json2dir) converts JSON objects into directory trees +- [Svelte Command Palette](https://github.com/rohitpotato/svelte-command-palette) is a drop-in command palette component +- [svelte-use-drop-outside](https://github.com/untemps/svelte-use-drop-outside) is a Svelte action to drop an element outside an area +- [PowerTable](https://github.com/muonw/powertable) is a JavaScript component that turns JSON data into an interactive HTML table +- [svelte-slides](https://github.com/rajasegar/svelte-slides) is a slide show template for Svelte using Reveal.js +- [Svelte Theme Light](https://marketplace.visualstudio.com/items?itemName=webmaek.svelte-theme-light) is a Visual Studio Code theme based on the Svelte REPL + +Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)! + +Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! [Get your tickets now](https://www.sveltesummit.com/). + +See ya next month!