Merge branch 'master' into const

Author: benmccann

.changeset/clever-ghosts-laugh.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure `svelte:component` evaluates props once

.changeset/lucky-knives-crash.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle destructured primitive literals

documentation/blog/2022-12-01-whats-new-in-svelte-december-2022.md

@@ -47,7 +47,7 @@ For all the changes to the Svelte compiler, including unreleased changes, check
 
 **Apps & Sites built with Svelte**
 
-- [Appwrite's new console](https://github.com/appwrite/console) makes its secure backend server for web, mobile & Flutter developers avaiable in the browser
+- [Appwrite's new console](https://github.com/appwrite/console) makes its secure backend server for web, mobile & Flutter developers available in the browser
 - [RepoMagic](https://www.repomagic.com/) is a search and analytics tool for GitHub
 - [Podman Desktop](https://github.com/containers/podman-desktop) is a graphical tool for developing on containers and Kubernetes
 - [Ballerine](https://github.com/ballerine-io/ballerine) is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations

documentation/docs/05-misc/03-typescript.md

@@ -10,7 +10,7 @@ To use TypeScript within Svelte components, you need to add a preprocessor that
 
 ### Using SvelteKit or Vite
 
-The easiest way to get started is scaffolding a new SvelteKit project by typing `npm create svelte@latest`, following the prompts and chosing the TypeScript option.
+The easiest way to get started is scaffolding a new SvelteKit project by typing `npm create svelte@latest`, following the prompts and choosing the TypeScript option.
 
 ```ts
 /// file: svelte.config.js

documentation/docs/05-misc/04-v4-migration-guide.md

@@ -17,7 +17,11 @@ If you're a library author, consider whether to only support Svelte 4 or if it's
 
 ## Browser conditions for bundlers
 
-Bundlers must now specify the browser condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. For Rollup or webpack you may need to adjust your config to ensure it matches what is shown in the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) and [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation. ([#8516](https://github.com/sveltejs/svelte/issues/8516))
+Bundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration.
+- For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details
+- For wepback this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details
+
+([#8516](https://github.com/sveltejs/svelte/issues/8516))
 
 ## Removal of CJS related output
 

documentation/tutorial/11-animations/01-animate/app-a/App.svelte

@@ -104,6 +104,7 @@
 	}
 
 	label {
+		display: block;
 		position: relative;
 		line-height: 1.2;
 		padding: 0.5em 2.5em 0.5em 2em;

documentation/tutorial/11-animations/01-animate/app-b/App.svelte

@@ -105,6 +105,7 @@
 	}
 
 	label {
+		display: block;
 		position: relative;
 		line-height: 1.2;
 		padding: 0.5em 2.5em 0.5em 2em;

package.json

@@ -23,8 +23,8 @@
     "@changesets/cli": "^2.26.1",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "eslint": "^8.43.0",
-    "eslint-plugin-svelte": "^2.31.0",
+    "eslint": "^8.44.0",
+    "eslint-plugin-svelte": "^2.32.2",
     "eslint-plugin-unicorn": "^47.0.0",
     "playwright": "^1.35.1",
     "prettier": "^2.8.8",

packages/playground/README.md

@@ -4,4 +4,6 @@ To prevent any changes you make in this directory from being accidentally commit
 
 If you would actually like to make some changes to the files here for everyone then run `git update-index --no-skip-worktree ./**/*.*` before committing.
 
-If you're using VS Code, you can use the "Playground: Full" launch configuration to run the playground and attach the debugger to both the compiler and the browser.
+If you're using VS Code, you can use the "Playground: Full" launch configuration to run the playground and attach the debugger to both the compiler and the browser. This will SSR the component and then also hydrate it on the client side using rollup to bundle any other imports.
+
+You can also just compile the `App.svelte` file by running `node compile.js` if you'd like to check some compiler behaviour in isolation.

packages/playground/compile.js

@@ -0,0 +1,6 @@
+import { readFileSync } from 'node:fs';
+import { compile } from '../svelte/src/compiler/index.js';
+
+const code = readFileSync('src/App.svelte', 'utf8');
+
+console.log(compile(code));

packages/svelte/package.json

@@ -127,14 +127,14 @@
     "@types/node": "^14.18.51",
     "agadoo": "^3.0.0",
     "dts-buddy": "^0.1.7",
-    "esbuild": "^0.17.19",
+    "esbuild": "^0.18.11",
     "happy-dom": "^9.20.3",
     "jsdom": "^21.1.2",
     "kleur": "^4.1.5",
-    "rollup": "^3.25.1",
+    "rollup": "^3.26.2",
     "source-map": "^0.7.4",
     "tiny-glob": "^0.2.9",
     "typescript": "^5.1.3",
-    "vitest": "^0.31.4"
+    "vitest": "^0.33.0"
   }
 }

packages/svelte/src/compiler/compile/Component.js

@@ -1290,26 +1290,22 @@ export default class Component {
 					// everything except const values can be changed by e.g. svelte devtools
 					// which means we can't hoist it
 					if (node.kind !== 'const' && this.compile_options.dev) return false;
-					const { name } = /** @type {import('estree').Identifier} */ (d.id);
-					const v = this.var_lookup.get(name);
-					if (v.reassigned) return false;
-					if (v.export_name) return false;
-					if (this.var_lookup.get(name).reassigned) return false;
-					if (
-						this.vars.find(
-							/** @param {any} variable */ (variable) => variable.name === name && variable.module
-						)
-					) {
-						return false;
+					for (const name of extract_names(d.id)) {
+						const v = this.var_lookup.get(name);
+						if (v.reassigned) return false;
+						if (v.export_name) return false;
+
+						if (this.vars.find((variable) => variable.name === name && variable.module)) {
+							return false;
+						}
 					}
 					return true;
 				});
 				if (all_hoistable) {
 					node.declarations.forEach((d) => {
-						const variable = this.var_lookup.get(
-							/** @type {import('estree').Identifier} */ (d.id).name
-						);
-						variable.hoistable = true;
+						for (const name of extract_names(d.id)) {
+							this.var_lookup.get(name).hoistable = true;
+						}
 					});
 					hoistable_nodes.add(node);
 					body.splice(i--, 1);

packages/svelte/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js

@@ -436,11 +436,6 @@ export default class InlineComponentWrapper extends Wrapper {
 					b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`
 				);
 			}
-			if (updates.length) {
-				block.chunks.update.push(b`
-					${updates}
-				`);
-			}
 			const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
 			const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
 			const update_mount_node = has_css_custom_properties
@@ -481,6 +476,7 @@ export default class InlineComponentWrapper extends Wrapper {
 						${name} = null;
 					}
 				} else if (${switch_value}) {
+					${updates}
 					${updates.length > 0 && b`${name}.$set(${name_changes});`}
 				}
 			`);

packages/svelte/test/hydration/hydration.test.js

@@ -1,5 +1,4 @@
 // @vitest-environment jsdom
-// TODO: https://github.com/capricorn86/happy-dom/issues/916
 
 import * as fs from 'node:fs';
 import * as path from 'node:path';

packages/svelte/test/js/samples/hoisted-const/expected.js

@@ -15,7 +15,7 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			b = element("b");
-			b.textContent = `${get_answer()}`;
+			b.textContent = `${get_answer()} ${length}`;
 		},
 		m(target, anchor) {
 			insert(target, b, anchor);
@@ -32,6 +32,7 @@ function create_fragment(ctx) {
 }
 
 const ANSWER = 42;
+const { length } = 'abc';
 
 function get_answer() {
 	return ANSWER;

packages/svelte/test/js/samples/hoisted-const/input.svelte

@@ -1,6 +1,7 @@
 <script>
 	const ANSWER = 42;
+	const { length } = 'abc';
 	function get_answer() { return ANSWER; }
 </script>
 
-<b>{get_answer()}</b>
+<b>{get_answer()} {length}</b>

packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp1.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let value;
+</script>
+
+<p>value(1) = {value}</p>

packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/Comp2.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let value;
+</script>
+
+<p>value(2) = {value}</p>

packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/_config.js

@@ -0,0 +1,28 @@
+export default {
+	html: `
+		<p>value(1) = 1</p>
+		<button>Toggle Component</button>
+	`,
+
+	async test({ assert, component, window, target }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(2) = 2</p>
+				<button>Toggle Component</button>
+			`
+		);
+		assert.equal(component.n, 2);
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(1) = 3</p>
+				<button>Toggle Component</button>
+			`
+		);
+		assert.equal(component.n, 3);
+	}
+};

packages/svelte/test/runtime/samples/dynamic-component-evals-props-once/main.svelte

@@ -0,0 +1,12 @@
+<script>
+  import Comp1 from './Comp1.svelte';
+  import Comp2 from './Comp2.svelte';
+
+  export let n = 0;
+  let view = { comp: Comp1, fn: () => ++n };
+</script>
+
+<svelte:component this={view.comp} value={view.fn()}/>
+
+<button on:click={e => view.comp = view.comp === Comp1 ? Comp2 : Comp1}>Toggle Component</button>
+