Skip to content

Commit 40e0e33

Browse files
paoloricciutiRich-Harris
paoloricciuti
and
Rich-Harris
authored
feat: ssr select value (#16017)
* feat: ssr select value * fix: adjust test output * minor aesthetic OCD tweak - the normalizer takes care of this * fix: handle implicit values * chore: implicit value test * fix: deal with spreads on select AND option * fix: spreading * chore: add test for cross component * fix: test * chore: add failing test * fix: runtime valueless option selection * tweak * fix: snapshots * fix (options are erroneously being marked as valueless * simplify a bit (pass callback direct to valueless_option) * tweak * tweak ("execute the child" is the sort of thing that gets you visited by the FBI) * lint * changeset --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>
1 parent b2fa847 commit 40e0e33

File tree

24 files changed

+351
-61
lines changed

24 files changed

+351
-61
lines changed

‎.changeset/new-turkeys-exercise.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: correctly mark <option> elements as selected during SSR

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

Lines changed: 91 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/** @import { Expression } from 'estree' */
12
/** @import { Location } from 'locate-character' */
23
/** @import { AST } from '#compiler' */
34
/** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
@@ -6,8 +7,8 @@ import { is_void } from '../../../../../utils.js';
67
import { dev, locator } from '../../../../state.js';
78
import * as b from '#compiler/builders';
89
import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
9-
import { build_element_attributes } from './shared/element.js';
10-
import { process_children, build_template } from './shared/utils.js';
10+
import { build_element_attributes, build_spread_object } from './shared/element.js';
11+
import { process_children, build_template, build_attribute_value } from './shared/utils.js';
1112

1213
/**
1314
* @param {AST.RegularElement} node
@@ -71,21 +72,96 @@ export function RegularElement(node, context) {
7172
);
7273
}
7374

74-
if (body === null) {
75-
process_children(trimmed, { ...context, state });
76-
} else {
77-
let id = body;
75+
let select_with_value = false;
7876

79-
if (body.type !== 'Identifier') {
80-
id = b.id(state.scope.generate('$$body'));
81-
state.template.push(b.const(id, body));
77+
if (node.name === 'select') {
78+
const value = node.attributes.find(
79+
(attribute) =>
80+
(attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
81+
attribute.name === 'value'
82+
);
83+
if (node.attributes.some((attribute) => attribute.type === 'SpreadAttribute')) {
84+
select_with_value = true;
85+
state.template.push(
86+
b.stmt(
87+
b.assignment(
88+
'=',
89+
b.id('$$payload.select_value'),
90+
b.member(
91+
build_spread_object(
92+
node,
93+
node.attributes.filter(
94+
(attribute) =>
95+
attribute.type === 'Attribute' ||
96+
attribute.type === 'BindDirective' ||
97+
attribute.type === 'SpreadAttribute'
98+
),
99+
context
100+
),
101+
'value',
102+
false,
103+
true
104+
)
105+
)
106+
)
107+
);
108+
} else if (value) {
109+
select_with_value = true;
110+
const left = b.id('$$payload.select_value');
111+
if (value.type === 'Attribute') {
112+
state.template.push(
113+
b.stmt(b.assignment('=', left, build_attribute_value(value.value, context)))
114+
);
115+
} else if (value.type === 'BindDirective') {
116+
state.template.push(
117+
b.stmt(
118+
b.assignment(
119+
'=',
120+
left,
121+
value.expression.type === 'SequenceExpression'
122+
? b.call(value.expression.expressions[0])
123+
: value.expression
124+
)
125+
)
126+
);
127+
}
82128
}
129+
}
130+
131+
if (
132+
node.name === 'option' &&
133+
!node.attributes.some(
134+
(attribute) =>
135+
attribute.type === 'SpreadAttribute' ||
136+
((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
137+
attribute.name === 'value')
138+
)
139+
) {
140+
const inner_state = { ...state, template: [], init: [] };
141+
process_children(trimmed, { ...context, state: inner_state });
83142

143+
state.template.push(
144+
b.stmt(
145+
b.call(
146+
'$.valueless_option',
147+
b.id('$$payload'),
148+
b.thunk(b.block([...inner_state.init, ...build_template(inner_state.template)]))
149+
)
150+
)
151+
);
152+
} else if (body !== null) {
84153
// if this is a `<textarea>` value or a contenteditable binding, we only add
85154
// the body if the attribute/binding is falsy
86155
const inner_state = { ...state, template: [], init: [] };
87156
process_children(trimmed, { ...context, state: inner_state });
88157

158+
let id = /** @type {Expression} */ (body);
159+
160+
if (body.type !== 'Identifier') {
161+
id = b.id(state.scope.generate('$$body'));
162+
state.template.push(b.const(id, body));
163+
}
164+
89165
// Use the body expression as the body if it's truthy, otherwise use the inner template
90166
state.template.push(
91167
b.if(
@@ -94,6 +170,12 @@ export function RegularElement(node, context) {
94170
b.block([...inner_state.init, ...build_template(inner_state.template)])
95171
)
96172
);
173+
} else {
174+
process_children(trimmed, { ...context, state });
175+
}
176+
177+
if (select_with_value) {
178+
state.template.push(b.stmt(b.assignment('=', b.id('$$payload.select_value'), b.void0)));
97179
}
98180

99181
if (!node_is_void) {

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

Lines changed: 69 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,29 @@ export function build_element_attributes(node, context) {
202202

203203
if (has_spread) {
204204
build_element_spread_attributes(node, attributes, style_directives, class_directives, context);
205+
if (node.name === 'option') {
206+
context.state.template.push(
207+
b.call(
208+
'$.maybe_selected',
209+
b.id('$$payload'),
210+
b.member(
211+
build_spread_object(
212+
node,
213+
node.attributes.filter(
214+
(attribute) =>
215+
attribute.type === 'Attribute' ||
216+
attribute.type === 'BindDirective' ||
217+
attribute.type === 'SpreadAttribute'
218+
),
219+
context
220+
),
221+
'value',
222+
false,
223+
true
224+
)
225+
)
226+
);
227+
}
205228
} else {
206229
const css_hash = node.metadata.scoped ? context.state.analysis.css.hash : null;
207230

@@ -236,6 +259,16 @@ export function build_element_attributes(node, context) {
236259
);
237260
}
238261

262+
if (node.name === 'option' && name === 'value') {
263+
context.state.template.push(
264+
b.call(
265+
'$.maybe_selected',
266+
b.id('$$payload'),
267+
literal_value != null ? b.literal(/** @type {any} */ (literal_value)) : b.void0
268+
)
269+
);
270+
}
271+
239272
continue;
240273
}
241274

@@ -260,6 +293,10 @@ export function build_element_attributes(node, context) {
260293
b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
261294
);
262295
}
296+
297+
if (name === 'value' && node.name === 'option') {
298+
context.state.template.push(b.call('$.maybe_selected', b.id('$$payload'), value));
299+
}
263300
}
264301
}
265302

@@ -274,7 +311,7 @@ export function build_element_attributes(node, context) {
274311

275312
/**
276313
* @param {AST.RegularElement | AST.SvelteElement} element
277-
* @param {AST.Attribute} attribute
314+
* @param {AST.Attribute | AST.BindDirective} attribute
278315
*/
279316
function get_attribute_name(element, attribute) {
280317
let name = attribute.name;
@@ -286,6 +323,36 @@ function get_attribute_name(element, attribute) {
286323
return name;
287324
}
288325

326+
/**
327+
* @param {AST.RegularElement | AST.SvelteElement} element
328+
* @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
329+
* @param {ComponentContext} context
330+
*/
331+
export function build_spread_object(element, attributes, context) {
332+
return b.object(
333+
attributes.map((attribute) => {
334+
if (attribute.type === 'Attribute') {
335+
const name = get_attribute_name(element, attribute);
336+
const value = build_attribute_value(
337+
attribute.value,
338+
context,
339+
WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
340+
);
341+
return b.prop('init', b.key(name), value);
342+
} else if (attribute.type === 'BindDirective') {
343+
const name = get_attribute_name(element, attribute);
344+
const value =
345+
attribute.expression.type === 'SequenceExpression'
346+
? b.call(attribute.expression.expressions[0])
347+
: /** @type {Expression} */ (context.visit(attribute.expression));
348+
return b.prop('init', b.key(name), value);
349+
}
350+
351+
return b.spread(/** @type {Expression} */ (context.visit(attribute)));
352+
})
353+
);
354+
}
355+
289356
/**
290357
*
291358
* @param {AST.RegularElement | AST.SvelteElement} element
@@ -336,21 +403,7 @@ function build_element_spread_attributes(
336403
flags |= ELEMENT_PRESERVE_ATTRIBUTE_CASE;
337404
}
338405

339-
const object = b.object(
340-
attributes.map((attribute) => {
341-
if (attribute.type === 'Attribute') {
342-
const name = get_attribute_name(element, attribute);
343-
const value = build_attribute_value(
344-
attribute.value,
345-
context,
346-
WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
347-
);
348-
return b.prop('init', b.key(name), value);
349-
}
350-
351-
return b.spread(/** @type {Expression} */ (context.visit(attribute)));
352-
})
353-
);
406+
const object = build_spread_object(element, attributes, context);
354407

355408
const css_hash =
356409
element.metadata.scoped && context.state.analysis.css.hash

‎packages/svelte/src/internal/server/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -535,3 +535,30 @@ export function derived(fn) {
535535
return updated_value;
536536
};
537537
}
538+
539+
/**
540+
*
541+
* @param {Payload} payload
542+
* @param {*} value
543+
*/
544+
export function maybe_selected(payload, value) {
545+
return value === payload.select_value ? ' selected' : '';
546+
}
547+
548+
/**
549+
* @param {Payload} payload
550+
* @param {() => void} children
551+
* @returns {void}
552+
*/
553+
export function valueless_option(payload, children) {
554+
var i = payload.out.length;
555+
556+
children();
557+
558+
var body = payload.out.slice(i);
559+
560+
if (body.replace(/<!---->/g, '') === payload.select_value) {
561+
// replace '>' with ' selected>' (closing tag will be added later)
562+
payload.out = payload.out.slice(0, i - 1) + ' selected>' + body;
563+
}
564+
}

‎packages/svelte/src/internal/server/payload.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export class Payload {
1818
css = new Set();
1919
out = '';
2020
uid = () => '';
21+
select_value = undefined;
2122

2223
head = new HeadPayload();
2324

‎packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { test } from '../../test';
22

33
export default test({
4-
html: `
4+
ssrHtml: `
55
<select>
6-
<option value="[object Object]">wheeee</option>
6+
<option selected value="[object Object]">wheeee</option>
77
</select>
88
`
99
});

‎packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ export default test({
1717
return { tasks, selected: tasks[0] };
1818
},
1919

20-
html: `
20+
ssrHtml: `
2121
<select>
22-
<option value='[object Object]'>put your left leg in</option>
22+
<option selected value='[object Object]'>put your left leg in</option>
2323
<option value='[object Object]'>your left leg out</option>
2424
<option value='[object Object]'>in, out, in, out</option>
2525
<option value='[object Object]'>shake it all about</option>
@@ -36,7 +36,28 @@ export default test({
3636
<p>shake it all about</p>
3737
`,
3838

39-
async test({ assert, component, target, window }) {
39+
async test({ assert, component, target, window, variant }) {
40+
assert.htmlEqual(
41+
target.innerHTML,
42+
`
43+
<select>
44+
<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
45+
<option value='[object Object]'>your left leg out</option>
46+
<option value='[object Object]'>in, out, in, out</option>
47+
<option value='[object Object]'>shake it all about</option>
48+
</select>
49+
50+
<label>
51+
<input type='checkbox'> put your left leg in
52+
</label>
53+
54+
<h2>Pending tasks</h2>
55+
<p>put your left leg in</p>
56+
<p>your left leg out</p>
57+
<p>in, out, in, out</p>
58+
<p>shake it all about</p>
59+
`
60+
);
4061
const input = target.querySelector('input');
4162
const select = target.querySelector('select');
4263
const options = target.querySelectorAll('option');
@@ -57,7 +78,7 @@ export default test({
5778
target.innerHTML,
5879
`
5980
<select>
60-
<option value='[object Object]'>put your left leg in</option>
81+
<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
6182
<option value='[object Object]'>your left leg out</option>
6283
<option value='[object Object]'>in, out, in, out</option>
6384
<option value='[object Object]'>shake it all about</option>
@@ -94,7 +115,7 @@ export default test({
94115
target.innerHTML,
95116
`
96117
<select>
97-
<option value='[object Object]'>put your left leg in</option>
118+
<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
98119
<option value='[object Object]'>your left leg out</option>
99120
<option value='[object Object]'>in, out, in, out</option>
100121
<option value='[object Object]'>shake it all about</option>

0 commit comments

Comments
 (0)