lots of progress, couple of failing tests around selects

Author: elliott-with-the-longest-name-on-github

.github/workflows/ci.yml

@@ -57,6 +57,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
       - run: pnpm playwright install chromium
       - run: pnpm test runtime-runes
+      - run: pnpm test server-side-rendering
         env:
           CI: true
           SVELTE_NO_ASYNC: true

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

@@ -240,7 +240,7 @@ export function server_component(analysis, options) {
 			b.call(
 				'$$payload.child',
 				b.arrow(
-					[b.object_pattern([b.init('$$payload', b.id('$$payload'))])],
+					[b.id('$$payload')],
 					b.block([
 						.../** @type {Statement[]} */ (instance.body),
 						.../** @type {Statement[]} */ (template.body)
@@ -304,7 +304,7 @@ export function server_component(analysis, options) {
 		const code = b.literal(render_stylesheet(analysis.source, analysis, options).code);
 
 		body.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));
-		component_block.body.unshift(b.stmt(b.call('$$payload.css.add', b.id('$$css'))));
+		component_block.body.unshift(b.stmt(b.call('$$payload.global.css.add', b.id('$$css'))));
 	}
 
 	let should_inject_props =

packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js

@@ -44,12 +44,12 @@ export function EachBlock(node, context) {
 	);
 
 	if (node.fallback) {
-		const open = b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), block_open));
+		const open = b.stmt(b.call(b.member(b.id('$$payload'), b.id('push')), block_open));
 
 		const fallback = /** @type {BlockStatement} */ (context.visit(node.fallback));
 
 		fallback.body.unshift(
-			b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
+			b.stmt(b.call(b.member(b.id('$$payload'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
 		);
 
 		state.template.push(

packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js

@@ -17,12 +17,10 @@ export function IfBlock(node, context) {
 		? /** @type {BlockStatement} */ (context.visit(node.alternate))
 		: b.block([]);
 
-	consequent.body.unshift(
-		b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), block_open))
-	);
+	consequent.body.unshift(b.stmt(b.call(b.member(b.id('$$payload'), b.id('push')), block_open)));
 
 	alternate.body.unshift(
-		b.stmt(b.call(b.member(b.id('$$payload.out'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
+		b.stmt(b.call(b.member(b.id('$$payload'), b.id('push')), b.literal(BLOCK_OPEN_ELSE)))
 	);
 
 	context.state.template.push(b.if(test, consequent, alternate), block_close);

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

@@ -92,7 +92,7 @@ export function RegularElement(node, context) {
 				b.stmt(
 					b.assignment(
 						'=',
-						b.id('$$payload.select_value'),
+						b.id('$$payload.local.select_value'),
 						b.member(
 							build_spread_object(
 								node,
@@ -113,7 +113,7 @@ export function RegularElement(node, context) {
 			);
 		} else if (value) {
 			select_with_value = true;
-			const left = b.id('$$payload.select_value');
+			const left = b.id('$$payload.local.select_value');
 			if (value.type === 'Attribute') {
 				state.template.push(
 					b.stmt(b.assignment('=', left, build_attribute_value(value.value, context)))
@@ -151,7 +151,11 @@ export function RegularElement(node, context) {
 				b.call(
 					'$.valueless_option',
 					b.id('$$payload'),
-					b.thunk(b.block([...inner_state.init, ...build_template(inner_state.template)]))
+					b.arrow(
+						[b.id('$$payload')],
+						b.block([...inner_state.init, ...build_template(inner_state.template)]),
+						context.state.analysis.has_blocking_await
+					)
 				)
 			)
 		);

packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js

@@ -17,7 +17,7 @@ export function SnippetBlock(node, context) {
 				b.call(
 					'$$payload.child',
 					b.arrow(
-						[b.object_pattern([b.init('$$payload', b.id('$$payload'))])],
+						[b.id('$$payload')],
 						/** @type {BlockStatement} */ (context.visit(node.body)),
 						node.metadata.has_await
 					)

packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteHead.js

@@ -11,6 +11,14 @@ export function SvelteHead(node, context) {
 	const block = /** @type {BlockStatement} */ (context.visit(node.fragment));
 
 	context.state.template.push(
-		b.stmt(b.call('$.head', b.id('$$payload'), b.arrow([b.id('$$payload')], block)))
+		b.stmt(
+			b.call(
+				'$.head',
+				b.id('$$payload'),
+				// same thing as elsewhere; this will create more async functions than necessary but should never be _wrong_
+				// because the component rendering this head block will always be async if the head block is async
+				b.arrow([b.id('$$payload')], block, context.state.analysis.has_blocking_await)
+			)
+		)
 	);
 }

packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js

@@ -13,20 +13,30 @@ export function TitleElement(node, context) {
 	process_children(node.fragment.nodes, { ...context, state: { ...context.state, template } });
 	template.push(b.literal('</title>'));
 
-	if (!node.metadata.has_await) {
-		context.state.init.push(...build_template(template, b.id('$$payload.title.value'), '='));
-	} else {
-		const async_template = b.thunk(
-			// TODO I'm sure there is a better way to do this
-			b.block([
-				b.let('title'),
-				...build_template(template, b.id('title'), '='),
-				b.return(b.id('title'))
-			]),
-			true
-		);
-		context.state.init.push(
-			b.stmt(b.assignment('=', b.id('$$payload.title.value'), b.call(async_template)))
-		);
-	}
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$$payload.child',
+				// this nonsense is necessary so that the write to the title is as tightly scoped to a specific location
+				// in the async tree as possible. This lets us use `get_path` to compare this assignment to other assignments
+				// so that we can overwrite earlier assignments with later ones.
+				b.arrow(
+					[b.id('$$payload')],
+					b.block([
+						b.const('path', b.call('$$payload.get_path')),
+						b.let('title'),
+						...build_template(template, b.id('title'), '='),
+						b.stmt(
+							b.assignment(
+								'=',
+								b.id('$$payload.global.head.title'),
+								b.object([b.init('path', b.id('path')), b.init('value', b.id('title'))])
+							)
+						)
+					]),
+					node.metadata.has_await
+				)
+			)
+		)
+	);
 }

packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js

@@ -238,7 +238,7 @@ export function build_inline_component(node, expression, context) {
 					b.call(
 						'$$payload.child',
 						b.arrow(
-							[b.object_pattern([b.init('$$payload', b.id('$$payload'))])],
+							[b.id('$$payload')],
 							b.block(block.body),
 							context.state.analysis.has_blocking_await
 						)

packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js

@@ -99,7 +99,7 @@ function is_statement(node) {
  * @param {AssignmentOperator | 'push'} operator
  * @returns {Statement[]}
  */
-export function build_template(template, out = b.id('$$payload.out'), operator = 'push') {
+export function build_template(template, out = b.id('$$payload'), operator = 'push') {
 	/** @type {string[]} */
 	let strings = [];
 
@@ -264,10 +264,5 @@ export function build_getter(node, state) {
  * @returns {Statement}
  */
 export function wrap_in_child_payload(body, async) {
-	return b.stmt(
-		b.call(
-			'$$payload.child',
-			b.arrow([b.object_pattern([b.init('$$payload', b.id('$$payload'))])], body, async)
-		)
-	);
+	return b.stmt(b.call('$$payload.child', b.arrow([b.id('$$payload')], body, async)));
 }