From 3efdc5bc2bca9ee3f3ddea71628f465a9885f4c0 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Tue, 27 Aug 2024 14:27:08 -0700 Subject: [PATCH 1/7] chore: put module variables above template for later inlining --- .../3-transform/client/transform-client.js | 2 +- .../svelte/src/compiler/types/template.d.ts | 5 +++ packages/svelte/tests/snapshot/_config.js | 3 ++ .../_expected/client/index.svelte.js | 33 +++++++++++++++++++ .../_expected/server/index.svelte.js | 12 +++++++ .../samples/inline-module-vars/index.svelte | 17 ++++++++++ 6 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 packages/svelte/tests/snapshot/_config.js create mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js create mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js create mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js index d5a630b549c9..ae04bf14c13b 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js +++ b/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), diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts index a4480ce2f12b..2b361c65e91c 100644 --- a/packages/svelte/src/compiler/types/template.d.ts +++ b/packages/svelte/src/compiler/types/template.d.ts @@ -457,6 +457,11 @@ export type Block = EachBlock | IfBlock | AwaitBlock | KeyBlock | SnippetBlock; export interface Attribute extends BaseNode { type: 'Attribute'; name: string; + /** + * The attribute may be omitted when false. + * String values are represented by an array since it may be a combination of text and expression + * values such as `style="color: {color} !import"`. + */ value: true | ExpressionTag | Array; metadata: { expression: ExpressionMetadata; diff --git a/packages/svelte/tests/snapshot/_config.js b/packages/svelte/tests/snapshot/_config.js new file mode 100644 index 000000000000..f47bee71df87 --- /dev/null +++ b/packages/svelte/tests/snapshot/_config.js @@ -0,0 +1,3 @@ +import { test } from '../../test'; + +export default test({}); diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js new file mode 100644 index 000000000000..6af688f18073 --- /dev/null +++ b/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(` production test`); + +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); +} diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js new file mode 100644 index 000000000000..9e19c08fe67c --- /dev/null +++ b/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 += ` `; +} diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte new file mode 100644 index 000000000000..7a792f80ad12 --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte @@ -0,0 +1,17 @@ + + + + + + + + + production test + From 66059197c6cf4b779593975f9b93347d7abd24f2 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Tue, 27 Aug 2024 15:52:12 -0700 Subject: [PATCH 2/7] regenerate types --- packages/svelte/types/index.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 5b0f7e1402d1..19ab4633cd44 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -1918,6 +1918,11 @@ declare module 'svelte/compiler' { interface Attribute extends BaseNode { type: 'Attribute'; name: string; + /** + * The attribute may be omitted when false. + * String values are represented by an array since it may be a combination of text and expression + * values such as `style="color: {color} !import"`. + */ value: true | ExpressionTag | Array; metadata: { expression: ExpressionMetadata; From 5c25001df873d0855331d0d77525bc94d483aba4 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 28 Aug 2024 07:56:08 -0700 Subject: [PATCH 3/7] update comment --- packages/svelte/src/compiler/types/template.d.ts | 6 +++--- packages/svelte/types/index.d.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts index 2b361c65e91c..887661e1fd5a 100644 --- a/packages/svelte/src/compiler/types/template.d.ts +++ b/packages/svelte/src/compiler/types/template.d.ts @@ -458,9 +458,9 @@ export interface Attribute extends BaseNode { type: 'Attribute'; name: string; /** - * The attribute may be omitted when false. - * String values are represented by an array since it may be a combination of text and expression - * values such as `style="color: {color} !import"`. + * A boolean attribute is either present (true) or not. + * Quoted/string values are represented as an array of alternating text and expressions whether + * complex (`"foo{x}bar"`) or just a single expression like `"{x}"`. */ value: true | ExpressionTag | Array; metadata: { diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 19ab4633cd44..9b0df190660b 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -1919,9 +1919,9 @@ declare module 'svelte/compiler' { type: 'Attribute'; name: string; /** - * The attribute may be omitted when false. - * String values are represented by an array since it may be a combination of text and expression - * values such as `style="color: {color} !import"`. + * A boolean attribute is either present (true) or not. + * Quoted/string values are represented as an array of alternating text and expressions whether + * complex (`"foo{x}bar"`) or just a single expression like `"{x}"`. */ value: true | ExpressionTag | Array; metadata: { From 4eaff7039f00b33671e525a47980a0722b973df3 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 28 Aug 2024 07:57:34 -0700 Subject: [PATCH 4/7] update comment --- packages/svelte/src/compiler/types/template.d.ts | 2 +- packages/svelte/types/index.d.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts index 887661e1fd5a..64812d6e702f 100644 --- a/packages/svelte/src/compiler/types/template.d.ts +++ b/packages/svelte/src/compiler/types/template.d.ts @@ -460,7 +460,7 @@ export interface Attribute extends BaseNode { /** * A boolean attribute is either present (true) or not. * Quoted/string values are represented as an array of alternating text and expressions whether - * complex (`"foo{x}bar"`) or just a single expression like `"{x}"`. + * complex (`"foo{x}bar"`) or holding just a single expression like `"{x}"`. */ value: true | ExpressionTag | Array; metadata: { diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 9b0df190660b..a92ccb9c14f9 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -1921,7 +1921,7 @@ declare module 'svelte/compiler' { /** * A boolean attribute is either present (true) or not. * Quoted/string values are represented as an array of alternating text and expressions whether - * complex (`"foo{x}bar"`) or just a single expression like `"{x}"`. + * complex (`"foo{x}bar"`) or holding just a single expression like `"{x}"`. */ value: true | ExpressionTag | Array; metadata: { From 9c69d6e5e71bf69f6165003bbfa7998528e1bd8e Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 28 Aug 2024 08:48:16 -0700 Subject: [PATCH 5/7] Update packages/svelte/src/compiler/types/template.d.ts Co-authored-by: Rich Harris --- packages/svelte/src/compiler/types/template.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts index 64812d6e702f..60b57e7b62f3 100644 --- a/packages/svelte/src/compiler/types/template.d.ts +++ b/packages/svelte/src/compiler/types/template.d.ts @@ -459,8 +459,7 @@ export interface Attribute extends BaseNode { name: string; /** * A boolean attribute is either present (true) or not. - * Quoted/string values are represented as an array of alternating text and expressions whether - * complex (`"foo{x}bar"`) or holding just a single expression like `"{x}"`. + * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"` */ value: true | ExpressionTag | Array; metadata: { From a8bd699745ac5db7df3979583350614e848b3f65 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 28 Aug 2024 08:48:23 -0700 Subject: [PATCH 6/7] Update packages/svelte/src/compiler/types/template.d.ts Co-authored-by: Rich Harris --- packages/svelte/src/compiler/types/template.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts index 60b57e7b62f3..f72f07e4483c 100644 --- a/packages/svelte/src/compiler/types/template.d.ts +++ b/packages/svelte/src/compiler/types/template.d.ts @@ -458,7 +458,6 @@ export interface Attribute extends BaseNode { type: 'Attribute'; name: string; /** - * A boolean attribute is either present (true) or not. * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"` */ value: true | ExpressionTag | Array; From a89ff52fa39af419b465175af3890a1cad069929 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 28 Aug 2024 08:49:09 -0700 Subject: [PATCH 7/7] update types --- packages/svelte/types/index.d.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index a92ccb9c14f9..7b2117cad12c 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -1919,9 +1919,7 @@ declare module 'svelte/compiler' { type: 'Attribute'; name: string; /** - * A boolean attribute is either present (true) or not. - * Quoted/string values are represented as an array of alternating text and expressions whether - * complex (`"foo{x}bar"`) or holding just a single expression like `"{x}"`. + * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"` */ value: true | ExpressionTag | Array; metadata: {