feat: skip static nodes

[Rich-Harris]

follow-up to #12849. implements #12855 (comment).

Basically, given some code like this...

<p>{before}</p>
<p>one</p>
<p>two</p>
<p>three</p>
<p>{after}</p>

...we can skip over all the static stuff between {before} and {after}:

export default function App($$anchor) {
  var fragment = root();
  var p = $.first_child(fragment);

  p.textContent = before;

- var p_1 = $.sibling($.sibling(p));
- var p_2 = $.sibling($.sibling(p_1));
- var p_3 = $.sibling($.sibling(p_2));
- var p_4 = $.sibling($.sibling(p_3));
+ var p_1 = $.sibling(p, 8);

- p_4.textContent = after;
+ p_1.textContent = after;
  $.append($$anchor, fragment);
}

It's a little messy, hence draft status, but you get the idea. It should result in a decent reduction in generated code size for mdsvex files etc.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 19db5e6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dummdidumm]

This can be simplified to

Suggested change

	if (within_bound_contenteditable || !has_state) {
	state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
	}
	} else {
	const update = b.stmt(b.call('$.set_text', id, value));
	expression = (is_text) => b.call('$.sibling', id, is_text && b.true);
	if (has_call && !within_bound_contenteditable) {
	state.init.push(build_update(update));
	} else if (has_state && !within_bound_contenteditable) {
	state.update.push(update);
	}
	}
	if (within_bound_contenteditable || !has_state) {
	state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
	} else if (!within_bound_contenteditable) {
	const update = b.stmt(b.call('$.set_text', id, value));
	if (has_call) {
	state.init.push(build_update(update));
	} else if (has_state) {
	state.update.push(update);
	}
	}

... which shows that there's now the possibility to not add anything to init or update at all - previously it always did. Is that a bug?

[Rich-Harris]

huh, whoops — just wanted to avoid creating update unnecessarily. reverted this drive-by change.

i notice that if we remove the contenteditable stuff altogether no tests fail, which seems weird. making a mental note to look into this

[dummdidumm]

Maybe @trueadm knows more, IIRC he worked on content editable a while back

[trueadm]

None of the contentEditable stuff is very testable unfortunately. JSDOM has no support for it and Playwright support is flaky (from experience using it with Lexical).

[Rich-Harris]

ah, i see. we should probably add a snapshot test in that case. will make a note

[dummdidumm]

why 1? Could use an explanatory comment

[Rich-Harris]

yeah, this code makes me itch. i spent an unreasonable amount of time trying to make is 0 instead and remove the skipped -= 1 below, but couldn't quite make things behave. it's a new day so will take another run at it

[Rich-Harris]

ok i gave up — the cure would be worse than the disease. settled for adding comments instead

[dummdidumm]

why -= 1? Could use an explanatory comment (I suspect it's connected to the skipped = 1 thing above)