diff --git a/CHANGELOG.md b/CHANGELOG.md index 313e104df3..4b150bb169 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,18 +1,23 @@ # Svelte changelog -## Unreleased +## 3.50.0 -* Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852)) -* Add a11y warning `aria-proptypes` which checks ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978)) -* Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241)) -* Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955)) -* Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164)) -* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643)) +* Add a11y warnings: + * `a11y-incorrect-aria-attribute-type`: check ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978)) + * `a11y-no-abstract-role`: check that ARIA roles are non-abstract ([#6241](https://github.com/sveltejs/svelte/pull/6241)) + * `a11y-no-interactive-element-to-noninteractive-role`: check for non-interactive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955)) + * `a11y-role-has-required-aria-props`: check that elements with `role` attribute have all required attributes for that role ([#5852](https://github.com/sveltejs/svelte/pull/5852)) * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702)) * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742)) -* Handle arrow function on `` inside `` ([#7485](https://github.com/sveltejs/svelte/issues/7485)) +* Enhance action typings ([#7805](https://github.com/sveltejs/svelte/pull/7805)) +* Remove empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164)) +* Make `a11y-label-has-associated-control` warning check all descendants for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528)) +* Only show lowercase component name warnings for non-HTML/SVG elements ([#5712](https://github.com/sveltejs/svelte/issues/5712)) +* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643)) * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723)) -* Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528)) +* Handle arrow function on `` inside `` ([#7485](https://github.com/sveltejs/svelte/issues/7485)) +* Improve parsing speed when encountering large blocks of whitespace ([#7675](https://github.com/sveltejs/svelte/issues/7675)) +* Fix `class:` directive updates in aborted/restarted transitions ([#7764](https://github.com/sveltejs/svelte/issues/7764)) ## 3.49.0 diff --git a/package-lock.json b/package-lock.json index 0db7287a64..8beef8470a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.49.0", + "version": "3.50.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 4a4d5266c3..3e22d8b627 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.49.0", + "version": "3.50.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", diff --git a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md index b8b1a9d13a..aac2c80f64 100644 --- a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md +++ b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md @@ -53,7 +53,7 @@ For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github **Components, Libraries & Tools** - [svelte-crossword](https://russellgoldenberg.github.io/svelte-crossword/) is a customizable crossword puzzle component for Svelte. -- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including Typescript and SSR support) +- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including TypeScript and SSR support) - [Svelte Nova](https://extensions.panic.com/extensions/sb.lao/sb.lao.svelte-nova/) extends the new Nova editor to support Svelte - [saos](https://github.com/shiryel/saos) is a small svelte component to animate your elements on scroll. - [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features. diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md index 2d09a3c439..cb7bcb425e 100644 --- a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md +++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md @@ -70,7 +70,7 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv - [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app - [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project - [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. +- [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). diff --git a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md index 45a03444c7..ad32088dd3 100644 --- a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md +++ b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md @@ -17,7 +17,7 @@ Let's dive into the news 🐬 * Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0)) * Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components) * A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile)) -* Continued improvement to Typescript definitions +* Continued improvement to TypeScript definitions For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) @@ -96,7 +96,7 @@ Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](ht - [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte - [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) demonstrates how to connect the TakeShape CMS with Sapper - [YastPack](https://github.com/rodabt/yastpack) is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack -- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + Typescript template +- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + TypeScript template - [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier ## See you next month! diff --git a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md index d4794b3c5e..46c483359a 100644 --- a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md +++ b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md @@ -44,7 +44,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git - [macos-web](https://github.com/PuruVJ/macos-web) by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this [Twitter thread](https://twitter.com/puruvjdev/status/1426267327687847939) - [Brave Search](https://search.brave.com/) is using Svelte - [exatorrent](https://github.com/varbhat/exatorrent) is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte -- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to Typescript Types/Interfaces +- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to TypeScript Types/Interfaces - [Histogram.dev](https://histogram.dev/) generates histograms for each feature in a CSV - [cybernetic.dev](https://cybernetic.dev/) is a collection of data-centric UI experiments made while learning Svelte - [LunaNotes](https://chrome.google.com/webstore/detail/lunanotes-youtube-video-n/oehoffnnkgcdacmbkhmlbjedinpampak?hl=en) is a Chrome extension to help with taking YouTube video notes diff --git a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md index 4b5b65d6f0..706b4907e0 100644 --- a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md +++ b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md @@ -52,7 +52,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git - [hirehive](https://www.hirehive.com/) is a candidate and job tracking site - [Microsocial](https://microsocial.xyz/) is an experimental Peer-to-Peer Social Platform - [Dylan Ipsum](https://www.dylanlyrics.app/) is a random text generator to replace lorem ipsum with Bob Dylan lyrics -- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 Typescript +- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 TypeScript **Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit. @@ -74,7 +74,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git **Libraries, Tools & Components** - [sveltekit-netlify-cms](https://github.com/buhrmi/sveltekit-netlify-cms) is a SvelteKit skeleton app configured for use with Netlify CMS -- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + Typescript + Firebase library inspired by Fireship.io +- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + TypeScript + Firebase library inspired by Fireship.io - [stores-x](https://github.com/Anyass3/stores-x) lets you use Svelte stores just like vueX - [sveltekit-snippets](https://github.com/stordahl/sveltekit-snippets) is a VSCode extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte - [svelte-xactor](https://github.com/wobsoriano/svelte-xactor) is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract diff --git a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md index 12a89a639c..0b2d82c199 100644 --- a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md +++ b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md @@ -72,7 +72,7 @@ To see all updates to Svelte and SvelteKit, check out the [Svelte](https://githu - [date-picker-svelte](https://github.com/probablykasper/date-picker-svelte) is a date and time picker for Svelte - [TwelveUI](https://twelveui.readme.io/reference/what-is-twelveui) is a Svelte component library with accessibility built-in - [svelte-outclick](https://github.com/babakfp/svelte-outclick/) is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event -- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for Typescript +- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for TypeScript - [svelte-recaptcha-v2](https://github.com/basaran/svelte-recaptcha-v2) is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites. - [Svelte Body](https://github.com/ghostdevv/svelte-body) lets you apply styles to the body in routes - designed to work with SvelteKit and Routify. - [svelte-debug-console](https://github.com/basaran/svelte-debug-console) is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser. diff --git a/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md index 2f9db93580..3858168008 100644 --- a/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md +++ b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md @@ -41,7 +41,7 @@ More on that, and what else is new in Svelte, as we dive in... **Apps & Sites built with Svelte** - [Launcher](https://launcher.team/) is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind -- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, Typescript, Python, Starlette, rclone & Docker. +- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, TypeScript, Python, Starlette, rclone & Docker. - [Simple AF Video Converter](https://github.com/berlyozzy/Simple-AF-Video-Converter) is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier - [Streamchaser](https://github.com/streamchaser/streamchaser) seeks to simplify movie, series and documentary search through a centralized entertainment technology platform - [Svelte Color Picker](https://github.com/V-Py/svelte-material-color-picker) is a simple color picker made with Svelte @@ -89,7 +89,7 @@ _To Watch_ **Libraries, Tools & Components** - [SvelTable](https://sveltable.io/) is a feature rich, data table component built with Svelte -- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and Typescript +- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and TypeScript - [Flowbite Svelte](https://github.com/shinokada/flowbite-svelte) is an unofficial Flowbite component library for Svelte - [Svelte-Tide-Project](https://github.com/jbertovic/svelte-tide-project) is a starter template for Svelte frontend apps with Rust Tide backend server - [Fetch Inject](https://github.com/vhscom/fetch-inject#sveltekit) implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support 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 index dfea1bcdd2..7757fab9ec 100644 --- 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 @@ -99,7 +99,7 @@ _Tech Demos_ - [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 +- [@crikey/stores-*](https://whenderson.github.io/stores-mono/) is a collection of 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 diff --git a/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md b/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md new file mode 100644 index 0000000000..a4a8ecfd04 --- /dev/null +++ b/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md @@ -0,0 +1,105 @@ +--- +title: "What's new in Svelte: September 2022" +description: "Migrating to SvelteKit's new filesystem-based router" +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +Still looking for something to do this month? It's your last chance to get tickets to Svelte Summit, Stockholm! [Join us on Sept 8-9th](https://www.sveltesummit.com/) 🎉 + +With the redesign of SvelteKit's filesystem-based router merging early last month, there's lots to cover this month - from the [migration script](https://github.com/sveltejs/kit/discussions/5774) to a number of new blog posts, videos and tutorials. + +But the new routing isn't the only new feature in SvelteKit... + +## What's new in SvelteKit +- `Link` is now supported as an HTTP header and works out of the box with Cloudflare's [Automatic Early Hints](https://github.com/sveltejs/kit/issues/5455) (**1.0.0-next.405**, [PR](https://github.com/sveltejs/kit/pull/5735)) +- `$env/static/*` are now virtual to prevent writing sensitive values to disk (**1.0.0-next.413**, [PR](https://github.com/sveltejs/kit/pull/5825)) +- `$app/stores` can now be used from anywhere on the browser (**1.0.0-next.428**, [PR](https://github.com/sveltejs/kit/pull/6100)) +- `config.kit.env.dir` is a new config that sets the directory to search for `.env` files (**1.0.0-next.430**, [PR](https://github.com/sveltejs/kit/pull/6175)) + +**Breaking changes:** +- The filesystem-based router and `load` API improves the way routes are managed. **Before installing version `@sveltejs/kit@1.0.0-next.406` or later, [follow this migration guide](https://github.com/sveltejs/kit/discussions/5774)** ([PR](https://github.com/sveltejs/kit/pull/5778), [Issue](https://github.com/sveltejs/kit/discussions/5748)) +- `event.session` has been removed from `load` along with the `session` store and `getSession`. Use `event.locals` instead (**1.0.0-next.415**, [PR](https://github.com/sveltejs/kit/pull/5946)) +- Named layouts have been removed in favor of `(groups)` (**1.0.0-next.432**, [Docs](https://kit.svelte.dev/docs/advanced-routing#advanced-layouts), [PR & Migration Instructions](https://github.com/sveltejs/kit/pull/6174)) +- `event.clientAddress` is now `event.getClientAddress()` (**1.0.0-next.438**, [PR](https://github.com/sveltejs/kit/pull/6237)) +- `$app/env` has been renamed to `$app/environment`, to disambiguate with `$env/...` (**1.0.0-next.445**, [PR](https://github.com/sveltejs/kit/pull/6334)) + +For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). + +**Updates to language tools** +- TypeScript doesn't resolve imports to SvelteKit's $types very well, the latest version of Svelte's language tools makes it better (**105.21.0**, [#1592](https://github.com/sveltejs/language-tools/pull/1592)) + + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** +- [canno](https://twitter.com/a_warnes/status/1556724034959818754?s=20&t=RyKWALPByqMT5A_PkLtUew) is a simple interactive 3d physics game with adjustable gravity, cannon power, and debug visualizer - made with threlte +- [straw.page](https://straw.page/) is an extremely simple website builder that lets you create unique websites straight from your phone +- [Patra](https://patra.webjeda.com/) lets you share short notes just with a link. No database. No storage +- [promptoMANIA](https://promptomania.com/) is an AI art community with an online prompt builder +- [Album by Mood](https://www.albumbymood.com/) lets you listen to music based on your mood +- [Daily Sumeiro](https://digivaux.com/sumeiro/daily/) is a daily game to test your math and logic skills +- [Lofi and Games](https://www.lofiandgames.com/) - play relaxing, casual games right from your browser +- [Pitch Pipe](https://github.com/joelgibson/pitch-pipe) is a digital pitch pipe with a frequency analyser and just-intonation intervals +- [classes.wtf](https://github.com/ekzhang/classes.wtf) is a custom, distributed search engine written in Go and Svelte to make searching for Harvard courses much quicker than the standard course catalog +- [Scrumpack](https://scrumpack.io/) is a set of tools to help agile/scrum teams with their ceremonies like Planning Poker and Retrospectives + +**Learning Resources** + +_Starring the Svelte team_ +- [Supper Club × Rich Harris, Author of Svelte — Syntax Podcast 499](https://syntax.fm/show/499/supper-club-rich-harris-author-of-svelte) +- [Let's talk routing with Rich Harris on Svelte Radio](https://www.svelteradio.com/episodes/lets-talk-routing-with-rich-harris) +- [2.17 - Building the Future of Svelte at Vercel with Rich Harris](https://www.youtube.com/watch?v=F1sSUDVoij4) +- [1.15 - What's Up With SvelteKit with Shawn Wang (swyx)](https://www.youtube.com/watch?v=xLhuUShkYkM) +- [Adding Notion Tailwindcss and DaisyUI to Svelte App](https://www.youtube.com/watch?v=l4sbqrY0XGk) +- [Svelte 101 Session](https://www.youtube.com/watch?v=IIeBERpyxx4) +- [Astro and Svelte](https://www.youtube.com/watch?v=iYKKg-50Gm4) +- [Storyblok in Svelte](https://www.youtube.com/watch?v=xXHFRzqUxoE) +- [Svelte London August Recording](https://www.youtube.com/watch?v=ua6gE2zPulw) + +_Learning the new SvelteKit routing_ +- [Migrating Breaking Changes in SvelteKit](https://www.netlify.com/blog/migrating-breaking-changes-in-sveltekit/) by Brittney Postma (Netlify) +- [Major Svelte Kit API Change - Fixing `load`, and tightening up SvelteKit's design before 1.0](https://www.youtube.com/watch?v=OUGn7VifUCg) - Video by LevelUpTuts +- [SvelteKit Is Never Going To Be The Same](https://www.youtube.com/watch?v=eVFcGA-15LA) - Video by Joy of Code +- [Let's learn SvelteKit by building a static Markdown blog from scratch](https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog) by Josh Collinsworth (updated Aug 26th to keep up with the new changes) + +_To Watch_ +- [Svelte Guide For React Developers](https://www.youtube.com/watch?v=uWDBEUkTRGk) and [Svelte State Management Guide](https://www.youtube.com/watch?v=4dDjQiOVrOo) by Joy of Code +- [What Is Bookit? The Svelte Kit Storybook Killer](https://www.youtube.com/watch?v=aOBGhvggsq0) and [What Is @type{import In Svelte Kit - JSDoc Syntax](https://www.youtube.com/watch?v=y0DvJTVO65M) by LevelUpTuts +- [TWF Yet another JS Framework... or not? Svelte!](https://www.youtube.com/watch?app=desktop&v=nT8QtDBIKZA) by TWF meetup + + +_To Read_ +- [Creating a Figma Plugin with Svelte](https://www.lekoarts.de/javascript/creating-a-figma-plugin-with-svelte) by Lennart +- [Svelte Video Blog: Vlog with Mux from your own SvelteKit Site](https://plus.rodneylab.com/tutorials/svelte-video-blog) and [Svelte Shy Header: Peekaboo Sticky Header with CSS](https://rodneylab.com/svelte-shy-header/) by Rodney Lab + + +**Libraries, Tools & Components** +- [@svelte-plugins/tooltips](https://github.com/svelte-plugins/tooltips) is a simple tooltip action and component designed for Svelte +- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple authentication library for SvelteKit that connects your SvelteKit app to your database +- [remix-router-svelte](https://github.com/brophdawg11/remix-routers/tree/main/packages/svelte) is a Svelte implementation of the `react-router-dom` API (driven by `@remix-run/router`) +- [MKRT](https://github.com/j4w8n/mkrt) is a CLI to help you create SvelteKit routes, fast +- [Histoire](https://histoire.dev/guide/) is a tool to generate stories applications - scenarios where you showcase components for specific use cases +- [sveltekit-flash-message](https://www.npmjs.com/package/sveltekit-flash-message) is a Sveltekit library that passes temporary data to the next request, usually from endpoints +- [svelte-particles](https://github.com/matteobruni/tsparticles#svelte) is a lightweight TypeScript library for creating particles +- [svelte-claps](https://github.com/bufgix/svelte-claps) adds clap button (like Medium) to any page for your SvelteKit apps +- [Neon Flicker](https://svelte.dev/repl/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style +- [ComboBox](https://svelte.dev/repl/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items +- [@svelte-put](https://github.com/vnphanquang/svelte-put) is useful svelte stuff to put in your projects +- [vite-plugin-svelte-bridge](https://github.com/joshnuss/vite-plugin-svelte-bridge) lets you write Svelte components and use them from React & Vue + +_UI Kits and Starters_ +- [Svelte-spectre](https://github.com/basf/svelte-spectre) is a UI-kit based on spectre.css and powered by Svelte +- [Skeleton](https://skeleton.brainandbonesllc.com/) allows you to build fast and reactive web UI using the power of Svelte + Tailwind +- [iconsax-svelte](https://www.npmjs.com/package/iconsax-svelte) brings the popular icon kit to Svelte +- [laravel-vite-svelte-spa-template](https://github.com/NukeJS/laravel-vite-svelte-spa-template) is a Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios, & TypeScript starter template +- [neutralino-svelte-boilerplate-js](https://github.com/Raffaele/neutralino-svelte-boilerplate-js) is a cross platform desktop template for Neutralino and Svelte +- [figma-plugin-svelte-vite](https://github.com/candidosales/figma-plugin-svelte-vite) is a boilerplate for creating Figma plugins using Svelte, Vite and Typescript +- [Urara](https://github.com/importantimport/urara) is a sweet & powerful SvelteKit blog starter +- [SvelteKit Commerce](https://vercel.com/templates/svelte/sveltekit-commerce) is an all-in-one starter kit for high-performance e-commerce sites built with SvelteKit by Vercel + +Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)! + +See ya next month! diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md index 1c64094002..23508b5c7b 100644 --- a/site/content/docs/01-component-format.md +++ b/site/content/docs/01-component-format.md @@ -55,9 +55,7 @@ In development mode (see the [compiler options](/docs#compile-time-svelte-compil --- -If you export a `const`, `class` or `function`, it is readonly from outside the component. Function *expressions* are valid props, however. - -Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this). +If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below. ```sv ``` +Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this). + --- You can use reserved words as prop names. @@ -125,15 +125,29 @@ Because Svelte's reactivity is based on assignments, using array methods like `. ``` +--- + +Svelte's ` +``` + #### 3. `$:` marks a statement as reactive --- -Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run immediately before the component updates, whenever the values that they depend on have changed. +Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed. ```sv ``` diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte index 19537cb4b3..3dd126be75 100755 --- a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte +++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte @@ -10,7 +10,7 @@
  • diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte index 19537cb4b3..3dd126be75 100755 --- a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte +++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte @@ -10,7 +10,7 @@
    • diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte index 24c9a6368a..47f3d8a87f 100644 --- a/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte +++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte @@ -1,10 +1,10 @@ @@ -13,7 +13,7 @@
      {#if key} {key === ' ' ? 'Space' : key} -

      {keyCode}

      +

      {code}

      {:else}

      Focus this window and press any key

      {/if} @@ -39,4 +39,4 @@ border-bottom: 5px solid rgba(0, 0, 0, 0.2); color: #555; } - \ No newline at end of file + diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte index 026dfa94f7..c4b5ae53b3 100644 --- a/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte +++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte @@ -1,10 +1,10 @@ @@ -13,7 +13,7 @@
      {#if key} {key === ' ' ? 'Space' : key} -

      {keyCode}

      +

      {code}

      {:else}

      Focus this window and press any key

      {/if} diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 119e187954..df0e649122 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -1,4 +1,4 @@ -import { is_void } from '../../../shared/utils/names'; +import { is_html, is_svg, is_void } from '../../../shared/utils/names'; import Node from './shared/Node'; import Attribute from './Attribute'; import Binding from './Binding'; @@ -26,8 +26,6 @@ import compiler_errors from '../compiler_errors'; import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query'; import { is_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y'; -const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/; - const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' '); const aria_attribute_set = new Set(aria_attributes); @@ -166,13 +164,13 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st const parent_element = parent.find_nearest(/^Element/); if (!parent_element) { - return explicit_namespace || (svg.test(element.name) + return explicit_namespace || (is_svg(element.name) ? namespaces.svg : null); } if (parent_element.namespace !== namespaces.foreign) { - if (svg.test(element.name.toLowerCase())) return namespaces.svg; + if (is_svg(element.name.toLowerCase())) return namespaces.svg; if (parent_element.name.toLowerCase() === 'foreignobject') return null; } @@ -373,7 +371,7 @@ export default class Element extends Node { } validate() { - if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) { + if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported && !is_svg(this.name) && !is_html(this.name)) { this.component.warn(this, compiler_warnings.component_name_lowercase(this.name)); } @@ -827,7 +825,7 @@ export default class Element extends Node { } else if (dimensions.test(name)) { if (this.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) { return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `. Use '${name.replace('offset', 'client')}' instead`)); - } else if (svg.test(this.name)) { + } else if (is_svg(this.name)) { return component.error(binding, compiler_errors.invalid_binding_on(binding.name, 'SVG elements')); } else if (is_void(this.name)) { return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `void elements like <${this.name}>. Use a wrapper element instead`)); diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index eed7c6f4ee..8e8e0d6706 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -1052,7 +1052,10 @@ export default class ElementWrapper extends Wrapper { block.chunks.update.push(updater); } else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) { const all_dependencies = this.class_dependencies.concat(...dependencies); - const condition = block.renderer.dirty(all_dependencies); + let condition = block.renderer.dirty(all_dependencies); + if (block.has_outros) { + condition = x`!#current || ${condition}`; + } // If all of the dependencies are non-dynamic (don't get updated) then there is no reason // to add an updater for this. diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts index 9d2c1cc60b..e256ba78fb 100644 --- a/src/compiler/compile/render_ssr/index.ts +++ b/src/compiler/compile/render_ssr/index.ts @@ -237,7 +237,7 @@ function trim(nodes: TemplateNode[]) { const node = nodes[end - 1] as Text; if (node.type !== 'Text') break; - node.data = node.data.replace(/\s+$/, ''); + node.data = node.data.trimRight(); if (node.data) break; } diff --git a/src/compiler/parse/index.ts b/src/compiler/parse/index.ts index 836fb670cf..e5e2260bc0 100644 --- a/src/compiler/parse/index.ts +++ b/src/compiler/parse/index.ts @@ -34,7 +34,7 @@ export class Parser { throw new TypeError('Template must be a string'); } - this.template = template.replace(/\s+$/, ''); + this.template = template.trimRight(); this.filename = options.filename; this.customElement = options.customElement; diff --git a/src/runtime/action/index.ts b/src/runtime/action/index.ts index d7cbf04b12..388f6f040e 100644 --- a/src/runtime/action/index.ts +++ b/src/runtime/action/index.ts @@ -4,9 +4,17 @@ * immediately after Svelte has applied updates to the markup. * - destroy: Method that is called after the element is unmounted * + * Additionally, you can specify which additional attributes and events the action enables on the applied element. + * This applies to TypeScript typings only and has no effect at runtime. + * * Example usage: * ```ts - * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn { + * interface Attributes { + * newprop?: string; + * 'on:event': (e: CustomEvent) => void; + * } + * + * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn { * // ... * return { * update: (updatedParameter) => {...}, @@ -17,9 +25,15 @@ * * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action */ -export interface ActionReturn { +export interface ActionReturn = Record> { update?: (parameter: Parameter) => void; destroy?: () => void; + /** + * ### DO NOT USE THIS + * This exists solely for type-checking and has no effect at runtime. + * Set this through the `Attributes` generic instead. + */ + $$_attributes?: Attributes; } /** @@ -32,11 +46,11 @@ export interface ActionReturn { * // ... * } * ``` - * You can return an object with methods `update` and `destroy` from the function. + * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has. * See interface `ActionReturn` for more details. * * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action */ -export interface Action { - (node: Node, parameter?: Parameter): void | ActionReturn; +export interface Action = Record> { + (node: Node, parameter?: Parameter): void | ActionReturn; } diff --git a/src/shared/utils/names.ts b/src/shared/utils/names.ts index 5e13e6cd87..7c7cf07cff 100644 --- a/src/shared/utils/names.ts +++ b/src/shared/utils/names.ts @@ -1,5 +1,18 @@ +/** regex of all html void element names */ const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/; +/** regex of all html element names. svg and math are omitted because they belong to the svg elements namespace */ +const html_element_names = /^(?:a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)$/; +/** regex of all svg element names */ +const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/; export function is_void(name: string) { return void_element_names.test(name) || name.toLowerCase() === '!doctype'; } + +export function is_html(name: string) { + return html_element_names.test(name); +} + +export function is_svg(name: string) { + return svg.test(name); +} diff --git a/test/runtime/samples/class-shortcut-with-transition/_config.js b/test/runtime/samples/class-shortcut-with-transition/_config.js new file mode 100644 index 0000000000..80df51bd4a --- /dev/null +++ b/test/runtime/samples/class-shortcut-with-transition/_config.js @@ -0,0 +1,30 @@ +export default { + props: { + open: false, + border: true + }, + html: '

      foo

      ', + + test({ assert, component, target, raf }) { + component.open = true; + raf.tick(100); + assert.htmlEqual( + target.innerHTML, + '

      foo

      bar

      ' + ); + + component.open = false; + raf.tick(150); + assert.htmlEqual( + target.innerHTML, + '

      foo

      bar

      ' + ); + + component.open = true; + raf.tick(250); + assert.htmlEqual( + target.innerHTML, + '

      foo

      bar

      ' + ); + } +}; diff --git a/test/runtime/samples/class-shortcut-with-transition/main.svelte b/test/runtime/samples/class-shortcut-with-transition/main.svelte new file mode 100644 index 0000000000..3291ec4a10 --- /dev/null +++ b/test/runtime/samples/class-shortcut-with-transition/main.svelte @@ -0,0 +1,17 @@ + + +

      foo

      +{#if open} +

      bar

      +{/if} + + diff --git a/test/validator/samples/component-name-lowercase/input.svelte b/test/validator/samples/component-name-lowercase/input.svelte index ebd7cf3481..bfca8cc471 100644 --- a/test/validator/samples/component-name-lowercase/input.svelte +++ b/test/validator/samples/component-name-lowercase/input.svelte @@ -1,7 +1,10 @@ - \ No newline at end of file + +
      diff --git a/test/validator/samples/component-name-lowercase/warnings.json b/test/validator/samples/component-name-lowercase/warnings.json index 37765b423d..57aac0c2a5 100644 --- a/test/validator/samples/component-name-lowercase/warnings.json +++ b/test/validator/samples/component-name-lowercase/warnings.json @@ -2,16 +2,16 @@ { "code": "component-name-lowercase", "message": " will be treated as an HTML element unless it begins with a capital letter", - "pos": 82, + "pos": 121, "start": { - "character": 82, + "character": 121, "column": 0, - "line": 6 + "line": 8 }, "end": { - "character": 102, + "character": 141, "column": 20, - "line": 6 + "line": 8 } } ]