simplify a bit (pass callback direct to valueless_option)

pull/16017/head
Rich Harris 4 months ago
parent ca824ff948
commit c0d670d8a3

@ -127,7 +127,16 @@ export function RegularElement(node, context) {
}
}
if (body === null) {
const is_option_with_implicit_value =
node.name === 'option' &&
!node.attributes.some(
(attribute) =>
attribute.type === 'SpreadAttribute' ||
((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
attribute.name === 'value')
);
if (body === null && !is_option_with_implicit_value) {
process_children(trimmed, { ...context, state });
} else {
// we need the body if:
@ -137,14 +146,15 @@ export function RegularElement(node, context) {
const inner_state = { ...state, template: [], init: [] };
process_children(trimmed, { ...context, state: inner_state });
if (node.name === 'option') {
if (is_option_with_implicit_value) {
// in case of a valueless `<option>` element, $$body is a function that accepts the children...internally it
// will run the children to get the value of the body at runtime since it's needed to for the implicit value
// selection
state.template.push(
b.stmt(
b.call(
body,
'$.valueless_option',
b.id('$$payload'),
b.thunk(b.block([...inner_state.init, ...build_template(inner_state.template)]))
)
)

@ -200,12 +200,6 @@ export function build_element_attributes(node, context) {
}
}
let is_option_with_implicit_value =
node.name === 'option' &&
!attributes.some(
(attribute) => attribute.type === 'SpreadAttribute' || attribute.name === 'value'
);
if (has_spread) {
build_element_spread_attributes(node, attributes, style_directives, class_directives, context);
if (node.name === 'option') {
@ -306,10 +300,6 @@ export function build_element_attributes(node, context) {
}
}
if (is_option_with_implicit_value) {
content = b.call('$.valueless_option', b.id('$$payload'));
}
if (events_to_capture.size !== 0) {
for (const event of events_to_capture) {
context.state.template.push(b.literal(` ${event}="this.__e=event"`));

@ -547,21 +547,23 @@ export function maybe_selected(payload, value) {
/**
* @param {Payload} payload
* @returns {(child: () => void) => void}
* @param {() => void} children
* @returns {void}
*/
export function valueless_option(payload) {
return (child) => {
// store the initial payload before executing the child
export function valueless_option(payload, children) {
// store the initial payload before rendering children
let initial_payload = payload.out;
// execute the child to get the runtime body of the option
child();
children();
// remove the initial payload and eventual hydration comments
let body = payload.out.substring(initial_payload.length).replace(/<!---->/g, '');
// check the value of the body with the select_value
if (body === payload.select_value) {
// substring the initial payload to remove the last character (the closing `>`)
// append selected and the body (the closing tag will be added later)
payload.out = initial_payload.substring(0, initial_payload.length - 1) + ' selected>' + body;
}
};
}

@ -3,11 +3,5 @@ import * as $ from 'svelte/internal/server';
export default function Skip_static_subtree($$payload, $$props) {
let { title, content } = $$props;
$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select><option value="a"${$.maybe_selected($$payload, 'a')}>`;
$.valueless_option($$payload)(() => {
$$payload.out += `a`;
});
$$payload.out += `</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`;
$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select><option value="a"${$.maybe_selected($$payload, 'a')}>a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`;
}
Loading…
Cancel
Save