chore: put module variables above template for later inlining (#13048)

* chore: put module variables above template for later inlining

* regenerate types

* update comment

* update comment

* Update packages/svelte/src/compiler/types/template.d.ts

Co-authored-by: Rich Harris <[email protected]>

* Update packages/svelte/src/compiler/types/template.d.ts

Co-authored-by: Rich Harris <[email protected]>

* update types

---------

Co-authored-by: Rich Harris <[email protected]>

Author: benmccann

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

@@ -457,7 +457,7 @@ export function client_component(analysis, options) {
 		analysis.uses_slots ||
 		analysis.slot_names.size > 0;
 
-	const body = [...state.hoisted, ...module.body];
+	const body = [...module.body, ...state.hoisted];
 
 	const component = b.function_declaration(
 		b.id(analysis.name),

packages/svelte/src/compiler/types/template.d.ts

@@ -457,6 +457,9 @@ export type Block = EachBlock | IfBlock | AwaitBlock | KeyBlock | SnippetBlock;
 export interface Attribute extends BaseNode {
 	type: 'Attribute';
 	name: string;
+	/**
+	 * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"`
+	 */
 	value: true | ExpressionTag | Array<Text | ExpressionTag>;
 	metadata: {
 		expression: ExpressionMetadata;

packages/svelte/tests/snapshot/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js

@@ -0,0 +1,33 @@
+import "svelte/internal/disclose-version";
+
+const __ENHANCED_IMG_1__ = "__VITE_ASSET__2AM7_y_a__";
+const __ENHANCED_IMG_2__ = "__VITE_ASSET__2AM7_y_b__";
+const __ENHANCED_IMG_3__ = "__VITE_ASSET__2AM7_y_c__";
+const __ENHANCED_IMG_4__ = "__VITE_ASSET__2AM7_y_d__";
+const __ENHANCED_IMG_5__ = "__VITE_ASSET__2AM7_y_e__";
+const __ENHANCED_IMG_6__ = "__VITE_ASSET__2AM7_y_f__";
+
+import * as $ from "svelte/internal/client";
+
+var root = $.template(`<picture><source type="image/avif"> <source type="image/webp"> <source type="image/png"> <img alt="production test" width="1440" height="1440"></picture>`);
+
+export default function Inline_module_vars($$anchor) {
+	var picture = root();
+	var source = $.child(picture);
+
+	$.set_attribute(source, "srcset", __ENHANCED_IMG_1__ + " 1440w, " + __ENHANCED_IMG_2__ + " 960w");
+
+	var source_1 = $.sibling(source, 2);
+
+	$.set_attribute(source_1, "srcset", __ENHANCED_IMG_3__ + " 1440w, " + __ENHANCED_IMG_4__ + " 960w");
+
+	var source_2 = $.sibling(source_1, 2);
+
+	$.set_attribute(source_2, "srcset", __ENHANCED_IMG_5__ + " 1440w, " + __ENHANCED_IMG_6__ + " 960w");
+
+	var img = $.sibling(source_2, 2);
+
+	$.set_attribute(img, "src", __ENHANCED_IMG_5__);
+	$.reset(picture);
+	$.append($$anchor, picture);
+}

packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js

@@ -0,0 +1,12 @@
+import * as $ from "svelte/internal/server";
+
+const __ENHANCED_IMG_1__ = "__VITE_ASSET__2AM7_y_a__";
+const __ENHANCED_IMG_2__ = "__VITE_ASSET__2AM7_y_b__";
+const __ENHANCED_IMG_3__ = "__VITE_ASSET__2AM7_y_c__";
+const __ENHANCED_IMG_4__ = "__VITE_ASSET__2AM7_y_d__";
+const __ENHANCED_IMG_5__ = "__VITE_ASSET__2AM7_y_e__";
+const __ENHANCED_IMG_6__ = "__VITE_ASSET__2AM7_y_f__";
+
+export default function Inline_module_vars($$payload) {
+	$$payload.out += `<picture><source${$.attr("srcset", __ENHANCED_IMG_1__ + " 1440w, " + __ENHANCED_IMG_2__ + " 960w")} type="image/avif"> <source${$.attr("srcset", __ENHANCED_IMG_3__ + " 1440w, " + __ENHANCED_IMG_4__ + " 960w")} type="image/webp"> <source${$.attr("srcset", __ENHANCED_IMG_5__ + " 1440w, " + __ENHANCED_IMG_6__ + " 960w")} type="image/png"> <img${$.attr("src", __ENHANCED_IMG_5__)} alt="production test" width="1440" height="1440"></picture>`;
+}

packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte

@@ -0,0 +1,17 @@
+<svelte:options runes={true} />
+
+<script module>
+	const __ENHANCED_IMG_1__ = "__VITE_ASSET__2AM7_y_a__";
+	const __ENHANCED_IMG_2__ = "__VITE_ASSET__2AM7_y_b__";
+	const __ENHANCED_IMG_3__ = "__VITE_ASSET__2AM7_y_c__";
+	const __ENHANCED_IMG_4__ = "__VITE_ASSET__2AM7_y_d__";
+	const __ENHANCED_IMG_5__ = "__VITE_ASSET__2AM7_y_e__";
+	const __ENHANCED_IMG_6__ = "__VITE_ASSET__2AM7_y_f__";
+</script>
+
+<picture>
+	<source srcset={__ENHANCED_IMG_1__ + " 1440w, " + __ENHANCED_IMG_2__ + " 960w"} type="image/avif" />
+	<source srcset={__ENHANCED_IMG_3__ + " 1440w, " + __ENHANCED_IMG_4__ + " 960w"} type="image/webp" />
+	<source srcset={__ENHANCED_IMG_5__ + " 1440w, " + __ENHANCED_IMG_6__ + " 960w"} type="image/png" />
+	<img src={__ENHANCED_IMG_5__} alt="production test" width=1440 height=1440 />
+</picture>

packages/svelte/types/index.d.ts

@@ -1918,6 +1918,9 @@ declare module 'svelte/compiler' {
 	interface Attribute extends BaseNode {
 		type: 'Attribute';
 		name: string;
+		/**
+		 * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"`
+		 */
 		value: true | ExpressionTag | Array<Text | ExpressionTag>;
 		metadata: {
 			expression: ExpressionMetadata;