Merge branch 'main' into more-precise-validate-dynamic-component

paoloricciuti · paoloricciuti · commit 71fbcbdc9bf8 · 2024-07-17T17:54:55.000+02:00
diff --git a/.changeset/clever-toys-laugh.md b/.changeset/clever-toys-laugh.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: hydrate multiple `<svelte:head>` elements correctly
diff --git a/.changeset/cold-shrimps-hug.md b/.changeset/cold-shrimps-hug.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: assign correct scope to attributes of named slot
diff --git a/.changeset/fresh-zoos-burn.md b/.changeset/fresh-zoos-burn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add createRawSnippet API
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -196,6 +196,7 @@
     "fresh-walls-bathe",
     "fresh-weeks-trade",
     "fresh-wombats-learn",
+    "fresh-zoos-burn",
     "friendly-candles-relate",
     "friendly-clouds-rhyme",
     "friendly-lies-camp",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.189
+
+### Patch Changes
+
+- feat: add createRawSnippet API ([#12425](https://github.com/sveltejs/svelte/pull/12425))
+
 ## 5.0.0-next.188
 
 ### Patch Changes
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
@@ -250,7 +250,7 @@
 
 ## snippet_invalid_rest_parameter
 
-> snippets do not support rest parameters; use an array instead
+> Snippets do not support rest parameters; use an array instead
 
 ## snippet_shadowing_prop
 
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.188",
+  "version": "5.0.0-next.189",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
@@ -1108,12 +1108,12 @@ export function snippet_conflict(node) {
 }
 
 /**
- * snippets do not support rest parameters; use an array instead
+ * Snippets do not support rest parameters; use an array instead
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function snippet_invalid_rest_parameter(node) {
-	e(node, "snippet_invalid_rest_parameter", "snippets do not support rest parameters; use an array instead");
+	e(node, "snippet_invalid_rest_parameter", "Snippets do not support rest parameters; use an array instead");
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -674,6 +674,12 @@ const validation = {
 	SnippetBlock(node, context) {
 		validate_block_not_empty(node.body, context);
 
+		for (const arg of node.parameters) {
+			if (arg.type === 'RestElement') {
+				e.snippet_invalid_rest_parameter(arg);
+			}
+		}
+
 		context.next({ ...context.state, parent_element: null });
 
 		const { path } = context;
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
@@ -386,16 +386,20 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		Component(node, { state, visit, path }) {
 			state.scope.reference(b.id(node.name), path);
 
-			for (const attribute of node.attributes) {
-				visit(attribute);
-			}
-
 			// let:x is super weird:
 			// - for the default slot, its scope only applies to children that are not slots themselves
 			// - for named slots, its scope applies to the component itself, too
 			const [scope, is_default_slot] = analyze_let_directives(node, state.scope);
-			if (!is_default_slot) {
+			if (is_default_slot) {
+				for (const attribute of node.attributes) {
+					visit(attribute);
+				}
+			} else {
 				scopes.set(node, scope);
+
+				for (const attribute of node.attributes) {
+					visit(attribute, { ...state, scope });
+				}
 			}
 
 			for (const child of node.fragment.nodes) {
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
@@ -190,3 +190,5 @@ export {
 	tick,
 	untrack
 } from './internal/client/runtime.js';
+
+export { createRawSnippet } from './internal/client/dom/blocks/snippet.js';
diff --git a/packages/svelte/src/index-server.js b/packages/svelte/src/index-server.js
@@ -35,3 +35,5 @@ export function unmount() {
 export async function tick() {}
 
 export { getAllContexts, getContext, hasContext, setContext } from './internal/server/context.js';
+
+export { createRawSnippet } from './internal/server/blocks/snippet.js';
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -1,12 +1,16 @@
+/** @import { Snippet } from 'svelte' */
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { Getters } from '#shared' */
 import { add_snippet_symbol } from '../../../shared/validate.js';
 import { EFFECT_TRANSPARENT } from '../../constants.js';
-import { branch, block, destroy_effect } from '../../reactivity/effects.js';
+import { branch, block, destroy_effect, teardown } from '../../reactivity/effects.js';
 import {
 	dev_current_component_function,
 	set_dev_current_component_function
 } from '../../runtime.js';
-import { hydrate_node, hydrating } from '../hydration.js';
+import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+import { create_fragment_from_html } from '../reconciler.js';
+import { assign_nodes } from '../template.js';
 
 /**
  * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
@@ -60,3 +64,40 @@ export function wrap_snippet(component, fn) {
 		}
 	});
 }
+
+/**
+ * Create a snippet programmatically
+ * @template {unknown[]} Params
+ * @param {(...params: Getters<Params>) => {
+ *   render: () => string
+ *   setup?: (element: Element) => void
+ * }} fn
+ * @returns {Snippet<Params>}
+ */
+export function createRawSnippet(fn) {
+	return add_snippet_symbol(
+		(/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
+			var snippet = fn(...params);
+
+			/** @type {Element} */
+			var element;
+
+			if (hydrating) {
+				element = /** @type {Element} */ (hydrate_node);
+				hydrate_next();
+			} else {
+				var html = snippet.render().trim();
+				var fragment = create_fragment_from_html(html);
+				element = /** @type {Element} */ (fragment.firstChild);
+				anchor.before(element);
+			}
+
+			const result = snippet.setup?.(element);
+			assign_nodes(element, element);
+
+			if (typeof result === 'function') {
+				teardown(result);
+			}
+		}
+	);
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -51,6 +51,7 @@ export function head(render_fn) {
 		block(() => render_fn(anchor), HEAD_EFFECT);
 	} finally {
 		if (was_hydrating) {
+			head_anchor = hydrate_node; // so that next head block starts from the correct node
 			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
 		}
 	}
diff --git a/packages/svelte/src/internal/server/blocks/snippet.js b/packages/svelte/src/internal/server/blocks/snippet.js
@@ -0,0 +1,22 @@
+/** @import { Snippet } from 'svelte' */
+/** @import { Payload } from '#server' */
+/** @import { Getters } from '#shared' */
+import { add_snippet_symbol } from '../../shared/validate.js';
+
+/**
+ * Create a snippet programmatically
+ * @template {unknown[]} Params
+ * @param {(...params: Getters<Params>) => {
+ *   render: () => string
+ *   setup?: (element: Element) => void
+ * }} fn
+ * @returns {Snippet<Params>}
+ */
+export function createRawSnippet(fn) {
+	return add_snippet_symbol((/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
+		var getters = /** @type {Getters<Params>} */ (args.map((value) => () => value));
+		payload.out += fn(...getters)
+			.render()
+			.trim();
+	});
+}
diff --git a/packages/svelte/src/internal/shared/types.d.ts b/packages/svelte/src/internal/shared/types.d.ts
@@ -7,4 +7,8 @@ export type SourceLocation =
 	| [line: number, column: number]
 	| [line: number, column: number, SourceLocation[]];
 
+export type Getters<T> = {
+	[K in keyof T]: () => T[K];
+};
+
 export type Snapshot<T> = ReturnType<typeof $state.snapshot<T>>;
diff --git a/packages/svelte/src/internal/shared/validate.js b/packages/svelte/src/internal/shared/validate.js
@@ -1,3 +1,5 @@
+/** @import { TemplateNode } from '#client' */
+/** @import { Getters } from '#shared' */
 import { is_void, IS_COMPONENT } from '../../constants.js';
 import * as w from './warnings.js';
 import * as e from './errors.js';
@@ -6,6 +8,7 @@ const snippet_symbol = Symbol.for('svelte.snippet');
 
 /**
  * @param {any} fn
+ * @returns {import('svelte').Snippet}
  */
 export function add_snippet_symbol(fn) {
 	fn[snippet_symbol] = true;
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.188';
+export const VERSION = '5.0.0-next.189';
 export const PUBLIC_VERSION = '5';
diff --git a/packages/svelte/tests/compiler-errors/samples/snippet-rest-args/_config.js b/packages/svelte/tests/compiler-errors/samples/snippet-rest-args/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'snippet_invalid_rest_parameter',
+		message: 'Snippets do not support rest parameters; use an array instead',
+		position: [19, 26]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/snippet-rest-args/main.svelte b/packages/svelte/tests/compiler-errors/samples/snippet-rest-args/main.svelte
@@ -0,0 +1,3 @@
+{#snippet children(...args)}
+	{args}
+{/snippet}
diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/HeadNested.svelte b/packages/svelte/tests/hydration/samples/head-html-and-component/HeadNested.svelte
@@ -1,2 +1,2 @@
 {@html '<meta name="head_nested_html" content="head_nested_html">'}
-<meta name="head_nested" content="head_nested">
+<meta name="head_nested" content="head_nested" />
diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/Nested.svelte b/packages/svelte/tests/hydration/samples/head-html-and-component/Nested.svelte
@@ -1,5 +1,9 @@
+<script>
+	let text = $state('foo');
+</script>
 
 <svelte:head>
 	{@html '<meta name="nested_html" content="nested_html">'}
-	<meta name="nested" content="nested">
+	<meta name="nested" content="nested" />
+	<meta name="foo" content={text} />
 </svelte:head>
diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/main.svelte b/packages/svelte/tests/hydration/samples/head-html-and-component/main.svelte
@@ -4,9 +4,12 @@
 </script>
 
 <svelte:head>
-	{@html '<meta name="main_html" content="main_html">'}
-	<meta name="main" content="main">
-	<HeadNested />
+	<!-- the if block forces a comment node; tests that the nested head starts at the correct node -->
+	{#if true}
+		{@html '<meta name="main_html" content="main_html">'}
+		<meta name="main" content="main" />
+		<HeadNested />
+	{/if}
 </svelte:head>
 
-<Nested/>
+<Nested />
diff --git a/packages/svelte/tests/hydration/samples/snippet-raw-hydrate/_config.js b/packages/svelte/tests/hydration/samples/snippet-raw-hydrate/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	snapshot(target) {
+		return {
+			p: target.querySelector('p')
+		};
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/snippet-raw-hydrate/_expected.html b/packages/svelte/tests/hydration/samples/snippet-raw-hydrate/_expected.html
@@ -0,0 +1 @@
+<!--[--><p>hydrated</p><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/snippet-raw-hydrate/main.svelte b/packages/svelte/tests/hydration/samples/snippet-raw-hydrate/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { createRawSnippet } from 'svelte';
+
+	const snippet = createRawSnippet(() => ({
+		render: () => `
+			<p>rendered</p>
+		`,
+		setup(p) {
+			p.textContent = 'hydrated';
+		}
+	}));
+</script>
+
+{@render snippet()}
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/Child.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/Child.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let onclick;
+</script>
+
+<button {onclick}>
+	<slot />
+</button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/Parent.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/Parent.svelte
@@ -0,0 +1 @@
+<slot name="item" item={1} />
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/_config.js b/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.deepEqual(logs, [1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/main.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/main.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Parent from './Parent.svelte';
+	import Child from './Child.svelte';
+</script>
+
+<Parent>
+	<Child slot="item" let:item onclick={() => console.log(item)}>asd</Child>
+</Parent>
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/_config.js
@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ target, assert, logs }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['tearing down']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { createRawSnippet } from 'svelte';
+
+	let show = $state(true);
+
+	const snippet = createRawSnippet(() => ({
+		render: () => `<hr>`,
+		setup(p) {
+			return () => console.log('tearing down')
+		}
+	}));
+</script>
+
+<button onclick={() => show = !show}>click</button>
+
+{#if show}
+	{@render snippet()}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-raw/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-raw/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true // Render in dev mode to check that the validation error is not thrown
+	},
+
+	html: `<button>click</button><p>clicks: 0</p>`,
+
+	test({ target, assert }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<button>click</button><p>clicks: 1</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-raw/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-raw/main.svelte
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: hydrate multiple `<svelte:head>` elements correctly
Original file line number	Diff line number	Diff line change
`@@ -1108,12 +1108,12 @@ export function snippet_conflict(node) {`
`1108`	`1108`	`}`
`1109`	`1109`
`1110`	`1110`	`/**`
`1111`		`- * snippets do not support rest parameters; use an array instead`
	`1111`	`+ * Snippets do not support rest parameters; use an array instead`
`1112`	`1112`	`* @param {null \| number \| NodeLike} node`
`1113`	`1113`	`* @returns {never}`
`1114`	`1114`	`*/`
`1115`	`1115`	`export function snippet_invalid_rest_parameter(node) {`
`1116`		`- e(node, "snippet_invalid_rest_parameter", "snippets do not support rest parameters; use an array instead");`
	`1116`	`+ e(node, "snippet_invalid_rest_parameter", "Snippets do not support rest parameters; use an array instead");`
`1117`	`1117`	`}`
`1118`	`1118`
`1119`	`1119`	`/**`