documentation/blog/2023-09-20-runes.md

@@ -8,6 +8,7 @@ authorURL: /
 In 2019, Svelte 3 turned JavaScript into a [reactive language](/blog/svelte-3-rethinking-reactivity). Svelte is a web UI framework that uses a compiler to turn declarative component code like this...
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = 0;
 
@@ -54,6 +55,7 @@ Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses
 For example, to declare a piece of reactive state, we can use the `$state` rune:
 
 ```diff
+<!--- file: App.svelte --->
 <script>
 -	let count = 0;
 +	let count = $state(0);
@@ -77,6 +79,7 @@ Well, no. The reality is that as applications grow in complexity, figuring out w
 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:
 
 ```js
+/// file: counter.js
 import { writable } from 'svelte/store';
 
 export function createCounter() {
@@ -92,7 +95,9 @@ export function createCounter() {
 Because this implements the _store contract_ — the returned value has a `subscribe` method — we can reference the store value by prefixing the store name with `$`:
 
 ```diff
+<!--- file: App.svelte --->
 <script>
+/// file: App.svelte
 +	import { createCounter } from './counter.js';
 +
 +	const counter = createCounter();
@@ -115,6 +120,7 @@ This works, but it's pretty weird! We've found that the store API can get rather
 With runes, things get much simpler:
 
 ```diff
+/// file: counter.svelte.js
 -import { writable } from 'svelte/store';
 
 export function createCounter() {
@@ -131,8 +137,10 @@ export function createCounter() {
 ```
 
 ```diff
+<!--- file: App.svelte --->
 <script>
-	import { createCounter } from './counter.js';
+-	import { createCounter } from './counter.js';
++	import { createCounter } from './counter.svelte.js';
 
 	const counter = createCounter();
 </script>
@@ -143,6 +151,8 @@ export function createCounter() {
 </button>
 ```
 
+> Outside `.svelte` components, runes can only be used in `.svelte.js` and `.svelte.ts` modules.
+
 Note that we're using a [get property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) in the returned object, so that `counter.count` always refers to the current value rather than the value at the time the function was called.
 
 ## Runtime reactivity

packages/svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # svelte
 
+## 4.2.17
+
+### Patch Changes
+
+- fix: correctly handle falsy values of style directives in SSR mode ([#11584](https://github.com/sveltejs/svelte/pull/11584))
+
 ## 4.2.16
 
 ### Patch Changes

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "4.2.16",
+  "version": "4.2.17",
   "description": "Cybernetically enhanced web apps",
   "type": "module",
   "module": "src/runtime/index.js",

packages/svelte/src/runtime/internal/ssr.js

@@ -193,7 +193,7 @@ export function add_classes(classes) {
 /** @returns {string} */
 function style_object_to_string(style_object) {
 	return Object.keys(style_object)
-		.filter((key) => style_object[key])
+		.filter((key) => style_object[key] != null && style_object[key] !== '')
 		.map((key) => `${key}: ${escape_attribute_value(style_object[key])};`)
 		.join(' ');
 }

packages/svelte/src/shared/version.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '4.2.16';
+export const VERSION = '4.2.17';
 export const PUBLIC_VERSION = '4';

packages/svelte/test/runtime/samples/inline-style-directive-falsy-value/_config.js

@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<p style="--a: 0;"></p>
+		<p style="--b: false;"></p>
+		<p></p>
+		<p></p>
+		<p></p>
+	`
+};

packages/svelte/test/runtime/samples/inline-style-directive-falsy-value/main.svelte

@@ -0,0 +1,5 @@
+<p style:--a={0}></p>
+<p style:--b={false}></p>
+<p style:--c=""></p>
+<p style:--d={undefined}></p>
+<p style:--e={null}></p>