feat: skip over static subtrees (#12849)

* feat: skip over static subtrees

* regenerate

* a few more

* prettier

Author: Rich-Harris

.changeset/neat-ducks-jam.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: skip over static subtrees

packages/svelte/src/compiler/phases/1-parse/utils/create.js

@@ -7,6 +7,9 @@ export function create_fragment(transparent = false) {
 	return {
 		type: 'Fragment',
 		nodes: [],
-		transparent
+		metadata: {
+			transparent,
+			dynamic: false
+		}
 	};
 }

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -61,6 +61,7 @@ import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
+import { UseDirective } from './visitors/UseDirective.js';
 import { VariableDeclarator } from './visitors/VariableDeclarator.js';
 import is_reference from 'is-reference';
 
@@ -166,6 +167,7 @@ const visitors = {
 	Text,
 	TitleElement,
 	UpdateExpression,
+	UseDirective,
 	VariableDeclarator
 };
 

packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js

@@ -1,12 +1,13 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
-/** @import { Attribute, DelegatedEvent, RegularElement } from '#compiler' */
+/** @import { Attribute, DelegatedEvent, RegularElement, SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
 import { is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
 	is_event_attribute
 } from '../../../utils/ast.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {Attribute} node
@@ -15,6 +16,14 @@ import {
 export function Attribute(node, context) {
 	context.next();
 
+	// special case
+	if (node.name === 'value') {
+		const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+		if (parent.type === 'RegularElement' && parent.name === 'option') {
+			mark_subtree_dynamic(context.path);
+		}
+	}
+
 	if (node.value !== true) {
 		for (const chunk of get_attribute_chunks(node.value)) {
 			if (chunk.type !== 'ExpressionTag') continue;

packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js

@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {AwaitBlock} node
@@ -38,5 +39,7 @@ export function AwaitBlock(node, context) {
 		}
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js

@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 /** @import { Scope } from '../../scope' */
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -36,4 +37,6 @@ export function EachBlock(node, context) {
 	context.visit(node.body);
 	if (node.key) context.visit(node.key);
 	if (node.fallback) context.visit(node.fallback);
+
+	mark_subtree_dynamic(context.path);
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js

@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {ExpressionTag} node
@@ -14,5 +15,9 @@ export function ExpressionTag(node, context) {
 		}
 	}
 
+	// TODO ideally we wouldn't do this here, we'd just do it on encountering
+	// an `Identifier` within the tag. But we currently need to handle `{42}` etc
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js

@@ -1,5 +1,6 @@
 /** @import { HtmlTag } from '#compiler' */
 /** @import { Context } from '../types' */
+import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -11,5 +12,8 @@ export function HtmlTag(node, context) {
 		validate_opening_tag(node, context.state, '@');
 	}
 
+	// unfortunately this is necessary in order to fix invalid HTML
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js

@@ -6,6 +6,7 @@ import { should_proxy } from '../../3-transform/client/utils.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { is_rune } from '../../../../utils.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {Identifier} node
@@ -19,6 +20,8 @@ export function Identifier(node, context) {
 		return;
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&

packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js

@@ -1,5 +1,6 @@
 /** @import { IfBlock } from '#compiler' */
 /** @import { Context } from '../types' */
+import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -22,5 +23,7 @@ export function IfBlock(node, context) {
 		validate_opening_tag(node, context.state, expected);
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }