merge main

Author: Rich-Harris

.changeset/eleven-teachers-drive.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat module-level imports as non-reactive in legacy mode

.changeset/hot-tips-appear.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: more efficient text-only fragments

.changeset/six-vans-add.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: stricter `crossorigin` and `wrap` attributes types

CONTRIBUTING.md

@@ -160,6 +160,10 @@ When adding a new breaking change, follow this template in your pull request:
 - **Severity (number of people affected x effort)**:
 ```
 
+### Reviewing pull requests
+
+If you'd like to manually test a pull request in another pnpm project, you can do so by running `pnpm add -D "github:sveltejs/svelte#path:packages/svelte&branch-name"` in that project.
+
 ## License
 
 By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE.md).

packages/svelte/elements.d.ts

@@ -1091,7 +1091,7 @@ export interface HTMLLiAttributes extends HTMLAttributes<HTMLLIElement> {
 
 export interface HTMLLinkAttributes extends HTMLAttributes<HTMLLinkElement> {
 	as?: string | undefined | null;
-	crossorigin?: string | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
 	href?: string | undefined | null;
 	hreflang?: string | undefined | null;
 	integrity?: string | undefined | null;
@@ -1125,7 +1125,7 @@ export interface HTMLMediaAttributes<T extends HTMLMediaElement> extends HTMLAtt
 		| (string & {})
 		| undefined
 		| null;
-	crossorigin?: string | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
 	currenttime?: number | undefined | null;
 	defaultmuted?: boolean | undefined | null;
 	defaultplaybackrate?: number | undefined | null;
@@ -1236,7 +1236,7 @@ export interface HTMLScriptAttributes extends HTMLAttributes<HTMLScriptElement>
 	async?: boolean | undefined | null;
 	/** @deprecated */
 	charset?: string | undefined | null;
-	crossorigin?: string | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
 	defer?: boolean | undefined | null;
 	fetchpriority?: 'auto' | 'high' | 'low' | undefined | null;
 	integrity?: string | undefined | null;
@@ -1306,7 +1306,7 @@ export interface HTMLTextareaAttributes extends HTMLAttributes<HTMLTextAreaEleme
 	required?: boolean | undefined | null;
 	rows?: number | undefined | null;
 	value?: string | string[] | number | undefined | null;
-	wrap?: string | undefined | null;
+	wrap?: 'hard' | 'soft' | undefined | null;
 
 	'on:change'?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;
 	onchange?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -197,7 +197,7 @@ export function client_component(analysis, options) {
 		)
 	);
 
-	instance.body.unshift(...state.legacy_reactive_imports);
+	module.body.unshift(...state.legacy_reactive_imports);
 
 	/** @type {ESTree.Statement[]} */
 	const store_setup = [];

packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js

@@ -128,6 +128,14 @@ export function Fragment(node, context) {
 	} else if (is_single_child_not_needing_template) {
 		context.visit(trimmed[0], state);
 		body.push(...state.before_init, ...state.init);
+	} else if (trimmed.length === 1 && trimmed[0].type === 'Text') {
+		const id = b.id(context.state.scope.generate('text'));
+		body.push(
+			b.var(id, b.call('$.text', b.literal(trimmed[0].data))),
+			...state.before_init,
+			...state.init
+		);
+		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 	} else if (trimmed.length > 0) {
 		const id = b.id(context.state.scope.generate('fragment'));
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js

@@ -1,4 +1,4 @@
-/** @import { Expression, MemberExpression, Program } from 'estree' */
+/** @import { Expression, ImportDeclaration, MemberExpression, Program } from 'estree' */
 /** @import { ComponentContext } from '../types' */
 import { build_getter, is_prop_source } from '../utils.js';
 import * as b from '../../../../utils/builders.js';
@@ -16,16 +16,26 @@ export function Program(_, context) {
 
 		for (const [name, binding] of context.state.scope.declarations) {
 			if (binding.declaration_kind === 'import' && binding.mutated) {
-				const id = b.id('$$_import_' + name);
+				// the declaration itself is hoisted to the module scope, so we need
+				// to resort to cruder measures to differentiate instance/module imports
+				const { start, end } = context.state.analysis.instance.ast;
+				const node = /** @type {ImportDeclaration} */ (binding.initial);
+				const is_instance_import =
+					/** @type {number} */ (node.start) > /** @type {number} */ (start) &&
+					/** @type {number} */ (node.end) < /** @type {number} */ (end);
 
-				context.state.transform[name] = {
-					read: (_) => b.call(id),
-					mutate: (_, mutation) => b.call(id, mutation)
-				};
+				if (is_instance_import) {
+					const id = b.id('$$_import_' + name);
+
+					context.state.transform[name] = {
+						read: (_) => b.call(id),
+						mutate: (_, mutation) => b.call(id, mutation)
+					};
 
-				context.state.legacy_reactive_imports.push(
-					b.var(id, b.call('$.reactive_import', b.thunk(b.id(name))))
-				);
+					context.state.legacy_reactive_imports.push(
+						b.var(id, b.call('$.reactive_import', b.thunk(b.id(name))))
+					);
+				}
 			}
 		}
 	}

packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -27,7 +27,12 @@ import {
 	build_style_directives
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
-import { build_render_statement, build_update, build_update_assignment } from './shared/utils.js';
+import {
+	build_render_statement,
+	build_template_literal,
+	build_update,
+	build_update_assignment
+} from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
 
 /**
@@ -320,28 +325,43 @@ export function RegularElement(node, context) {
 		context.visit(node, child_state);
 	}
 
-	/** @type {Expression} */
-	let arg = context.state.node;
-
-	// If `hydrate_node` is set inside the element, we need to reset it
-	// after the element has been hydrated
-	let needs_reset = trimmed.some((node) => node.type !== 'Text');
+	// special case — if an element that only contains text, we don't need
+	// to descend into it if the text is non-reactive
+	const text_content =
+		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
+		trimmed.some((node) => node.type === 'ExpressionTag') &&
+		build_template_literal(trimmed, context.visit, child_state);
 
-	// The same applies if it's a `<template>` element, since we need to
-	// set the value of `hydrate_node` to `node.content`
-	if (node.name === 'template') {
-		needs_reset = true;
-		child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
-		arg = b.member(arg, b.id('content'));
-	}
+	if (text_content && !text_content.has_state) {
+		child_state.init.push(
+			b.stmt(
+				b.assignment('=', b.member(context.state.node, b.id('textContent')), text_content.value)
+			)
+		);
+	} else {
+		/** @type {Expression} */
+		let arg = context.state.node;
+
+		// If `hydrate_node` is set inside the element, we need to reset it
+		// after the element has been hydrated
+		let needs_reset = trimmed.some((node) => node.type !== 'Text');
+
+		// The same applies if it's a `<template>` element, since we need to
+		// set the value of `hydrate_node` to `node.content`
+		if (node.name === 'template') {
+			needs_reset = true;
+			child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
+			arg = b.member(arg, b.id('content'));
+		}
 
-	process_children(trimmed, () => b.call('$.child', arg), true, {
-		...context,
-		state: child_state
-	});
+		process_children(trimmed, () => b.call('$.child', arg), true, {
+			...context,
+			state: child_state
+		});
 
-	if (needs_reset) {
-		child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
+		if (needs_reset) {
+			child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
+		}
 	}
 
 	if (has_declaration) {

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js

@@ -34,53 +34,26 @@ export function process_children(nodes, expression, is_element, { visit, state }
 				state.template.push(node.raw);
 				return;
 			}
+		}
 
-			state.template.push(' ');
+		const text_id = get_node_id(expression(true), state, 'text');
 
-			const text_id = get_node_id(expression(true), state, 'text');
+		state.template.push(' ');
 
-			const update = b.stmt(
-				b.call('$.set_text', text_id, /** @type {Expression} */ (visit(node.expression, state)))
-			);
+		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
 
-			if (node.metadata.expression.has_call && !within_bound_contenteditable) {
-				state.init.push(build_update(update));
-			} else if (node.metadata.expression.has_state && !within_bound_contenteditable) {
-				state.update.push(update);
-			} else {
-				state.init.push(
-					b.stmt(
-						b.assignment(
-							'=',
-							b.member(text_id, b.id('nodeValue')),
-							/** @type {Expression} */ (visit(node.expression))
-						)
-					)
-				);
-			}
+		const update = b.stmt(b.call('$.set_text', text_id, value));
 
-			expression = (is_text) =>
-				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
+		if (has_call && !within_bound_contenteditable) {
+			state.init.push(build_update(update));
+		} else if (has_state && !within_bound_contenteditable) {
+			state.update.push(update);
 		} else {
-			const text_id = get_node_id(expression(true), state, 'text');
-
-			state.template.push(' ');
-
-			const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
-
-			const update = b.stmt(b.call('$.set_text', text_id, value));
-
-			if (has_call && !within_bound_contenteditable) {
-				state.init.push(build_update(update));
-			} else if (has_state && !within_bound_contenteditable) {
-				state.update.push(update);
-			} else {
-				state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), value)));
-			}
-
-			expression = (is_text) =>
-				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
+			state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), value)));
 		}
+
+		expression = (is_text) =>
+			is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
 	}
 
 	for (let i = 0; i < nodes.length; i += 1) {