Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ We will also be utilizing OpenCollective funds to allow Svelte core maintainers

## What's new in Svelte & Language Tools

- [learn.svelte.dev](https://learn.svelte.dev/) is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
- [The tutorial](/tutorial) is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
- Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! ([PR](https://github.com/sveltejs/svelte/pull/5701))
- "Find File References" ([0.14.28](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.28)) and "Find Component References" ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29)) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used ([Demo](https://twitter.com/dummdidumm_/status/1532459709604716544/photo/1))
- The Svelte extension now supports CSS path completion ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29))
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
title: "What's new in Svelte: January 2023"
description: 'SvelteKit 1.0, learn.svelte.dev, and type definitions for Svelte elements.'
description: 'SvelteKit 1.0, tutorial, and type definitions for Svelte elements.'
author: Dani Sandoval
authorURL: https://dreamindani.com
---

It's been just two weeks since the release of [SvelteKit 1.0](https://svelte.dev/blog/announcing-sveltekit-1.0)! If you haven't yet, check out the [livestream](https://www.youtube.com/watch?v=N4BRVkQVoMc), [new website](https://kit.svelte.dev/) and [learn.svelte.dev](https://learn.svelte.dev/) to learn all the features of SvelteKit step-by-step.
It's been just two weeks since the release of [SvelteKit 1.0](https://svelte.dev/blog/announcing-sveltekit-1.0)! If you haven't yet, check out the [livestream](https://www.youtube.com/watch?v=N4BRVkQVoMc), [new website](https://kit.svelte.dev/) and [tutorial](/tutorial) to learn all the features of SvelteKit step-by-step.

Let's dive into the details...

Expand Down
6 changes: 3 additions & 3 deletions apps/svelte.dev/content/blog/2023-06-22-svelte-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ After months in the making, we're excited to announce the stable release of Svel

Time flies - Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas. It sets the stage for the next generation of Svelte to be released as Svelte 5 - we think you’ll love it.

If you haven't tried Svelte yet, take it for a spin in our [interactive tutorial](https://learn.svelte.dev/), on [StackBlitz](https://sveltekit.new/), or locally with `npm create svelte@latest`. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch [Svelte Radio Live](https://www.youtube.com/watch?v=72TIVhRtyWE) to learn more about this release.
If you haven't tried Svelte yet, take it for a spin in our [interactive tutorial](/tutorial), on [StackBlitz](https://sveltekit.new/), or locally with `npm create svelte@latest`. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch [Svelte Radio Live](https://www.youtube.com/watch?v=72TIVhRtyWE) to learn more about this release.

## What's new

### Performance

This release results in smaller and faster hydration code. To see the impact, SvelteKit users can see their compiled output shrink in size by examining the `.svelte-kit/output/client/_app/immutable/nodes` folder. For example, on [kit.svelte.dev](https://kit.svelte.dev) the JS generated across the whole site was reduced in size by 12.7% (126.3 kB to 110.2 kB).

Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on `npm install`. This improvement will be especially noticeable for users who are loading our interactive learning experience on [learn.svelte.dev](https://learn.svelte.dev) for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once [the eslint rewrite](https://github.com/eslint/eslint/discussions/16557) is completed the Svelte package size can drop by over another 50%.
Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on `npm install`. This improvement will be especially noticeable for users who are loading [our interactive learning experience](/tutorial) for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once [the eslint rewrite](https://github.com/eslint/eslint/discussions/16557) is completed the Svelte package size can drop by over another 50%.

The number of dependencies in Svelte has been greatly reduced from 61 down to 16. This means faster downloads for our users as well as less susceptibility to supply chain attacks. We also slightly reduced the number of dependencies in the latest versions of SvelteKit as well.

Expand All @@ -34,7 +34,7 @@ auto-imports now work more reliably

### Updated site, docs, and tutorial

The official [svelte.dev](https://svelte.dev) site has gotten an overhaul. It’s now split into multiple pages with improved mobile nav, overhauled typescript docs, dark mode, and an enhanced REPL. The SvelteKit site is also being updated to match. And we’ve updated all the tutorial links to point to our new [learn.svelte.dev](https://learn.svelte.dev) experience. The old tutorial remains available for users of Safari 16.3 and earlier.
The official [svelte.dev](https://svelte.dev) site has gotten an overhaul. It’s now split into multiple pages with improved mobile nav, overhauled typescript docs, dark mode, and an enhanced REPL. The SvelteKit site is also being updated to match. And we’ve updated all the tutorial links to point to our new [tutorial](/tutorial) experience.

Stay tuned for a more in-depth blog post about all the site changes in the coming days!

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,5 +92,5 @@ We have many more things planned to do post-launch. Some of them are:
- Redesigned blog page
- Improved search
- Playground: a unified REPL and Examples page
- Unify the infrastructure of the Svelte REPL and [learn.svelte.dev](https://learn.svelte.dev) by creating a webcontainer-based REPL with rollup as a fallback
- Unify the infrastructure of the Svelte REPL and [the tutorial](/tutorial) by creating a webcontainer-based REPL with rollup as a fallback
- Address any feedback
4 changes: 2 additions & 2 deletions apps/svelte.dev/content/blog/2023-09-20-runes.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ For example, to declare a piece of reactive state, we can use the `$state` rune:

At first glance, this might seem like a step back — perhaps even [un-Svelte-like](https://twitter.com/stolinski/status/1438173489479958536). Isn't it better if `let count` is reactive by default?

Well, no. The reality is that as applications grow in complexity, figuring out which values are reactive and which aren't can get tricky. And the heuristic only works for `let` declarations at the top level of a component, which can cause confusion. Having code behave one way inside `.svelte` files and another inside `.js` can make it hard to refactor code, for example if you need to turn something into a [store](https://learn.svelte.dev/tutorial/writable-stores) so that you can use it in multiple places.
Well, no. The reality is that as applications grow in complexity, figuring out which values are reactive and which aren't can get tricky. And the heuristic only works for `let` declarations at the top level of a component, which can cause confusion. Having code behave one way inside `.svelte` files and another inside `.js` can make it hard to refactor code, for example if you need to turn something into a [store](/tutorial/svelte/introducing-stores) so that you can use it in multiple places.

## Beyond components

With runes, reactivity extends beyond the boundaries of your `.svelte` files. Suppose we wanted to encapsulate our counter logic in a way that could be reused between components. Today, you would use a [custom store](https://learn.svelte.dev/tutorial/custom-stores) in a `.js` or `.ts` file:
With runes, reactivity extends beyond the boundaries of your `.svelte` files. Suppose we wanted to encapsulate our counter logic in a way that could be reused between components. Today, you would use a [custom store](/docs/svelte/stores) in a `.js` or `.ts` file:

```js
/// file: counter.js
Expand Down
Loading