diff --git a/.changeset/curly-cats-make.md b/.changeset/curly-cats-make.md deleted file mode 100644 index 393f8ec7e8..0000000000 --- a/.changeset/curly-cats-make.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: mark subtree of svelte boundary as dynamic diff --git a/.changeset/little-aliens-pick.md b/.changeset/little-aliens-pick.md deleted file mode 100644 index 1433625551..0000000000 --- a/.changeset/little-aliens-pick.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: don't reset static elements with debug/snippets diff --git a/.changeset/social-foxes-pull.md b/.changeset/social-foxes-pull.md new file mode 100644 index 0000000000..d164d43f7b --- /dev/null +++ b/.changeset/social-foxes-pull.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: trigger `selectedcontent` reactivity diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index a767760641..e222997351 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,17 @@ # svelte +## 5.47.0 + +### Minor Changes + +- feat: customizable `: elements inside `); // super edge case, but may as well handle it if (head) { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index 96c48a055c..38b2a77f4a 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -4,5 +4,5 @@ * The current version, as set in package.json. * @type {string} */ -export const VERSION = '5.46.4'; +export const VERSION = '5.47.0'; export const PUBLIC_VERSION = '5'; diff --git a/packages/svelte/tests/css/samples/selectedcontent/expected.css b/packages/svelte/tests/css/samples/selectedcontent/expected.css new file mode 100644 index 0000000000..87b4e04de7 --- /dev/null +++ b/packages/svelte/tests/css/samples/selectedcontent/expected.css @@ -0,0 +1,44 @@ + + select.svelte-xyz, + .svelte-xyz::picker(select) { + appearance: base-select; + } + selectedcontent.svelte-xyz b:where(.svelte-xyz){ + color: red; + } + e.svelte-xyz{ + selectedcontent:where(.svelte-xyz) &{ + color: green; + } + } + select.svelte-xyz > button:where(.svelte-xyz) > selectedcontent:where(.svelte-xyz) > b:where(.svelte-xyz) { + color: blue; + } + + select.svelte-xyz > button:where(.svelte-xyz) > selectedcontent:where(.svelte-xyz) i:where(.svelte-xyz) { + color: blue; + } + + selectedcontent.svelte-xyz:has(b:where(.svelte-xyz)){ + background-color: rebeccapurple; + } + + selectedcontent.svelte-xyz:has(i:where(.svelte-xyz)){ + background-color: rebeccapurple; + } + + option.svelte-xyz > b:where(.svelte-xyz){ + color: orange; + } + + option.svelte-xyz b:where(.svelte-xyz){ + color: #ff3e00; + } + + option.svelte-xyz > b:where(.svelte-xyz) > i:where(.svelte-xyz){ + text-decoration: underline; + } + + option.svelte-xyz i:where(.svelte-xyz){ + text-decoration: dashed; + } diff --git a/packages/svelte/tests/css/samples/selectedcontent/input.svelte b/packages/svelte/tests/css/samples/selectedcontent/input.svelte new file mode 100644 index 0000000000..b8305551d7 --- /dev/null +++ b/packages/svelte/tests/css/samples/selectedcontent/input.svelte @@ -0,0 +1,53 @@ + + + \ No newline at end of file diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js new file mode 100644 index 0000000000..36ca2e6ae5 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js @@ -0,0 +1,31 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + // This test verifies that hydration works correctly for + // optgroup elements with rich HTML content (non-option elements inside optgroup) + snapshot(target) { + const select = target.querySelector('select'); + + return { + select + }; + }, + + async test(assert, target) { + const optgroup = target.querySelector('optgroup'); + const options = target.querySelectorAll('option'); + const button = target.querySelector('button'); + + // Check options content - the span inside optgroup gets stripped but text remains + assert.equal(options[0]?.textContent, 'hello hello'); + assert.equal(options[1]?.textContent, 'Plain option'); + + // Update via button click + flushSync(() => { + button?.click(); + }); + + assert.equal(options[0]?.textContent, 'changed changed'); + } +}); diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html new file mode 100644 index 0000000000..911b92770b --- /dev/null +++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html @@ -0,0 +1 @@ + diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte b/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte new file mode 100644 index 0000000000..227c4d56d5 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js new file mode 100644 index 0000000000..a2163b7c67 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js @@ -0,0 +1,34 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + // This test verifies that hydration continues correctly after + // an option element with rich HTML content + snapshot(target) { + const select = target.querySelector('select'); + const options = target.querySelectorAll('option'); + const p = target.querySelector('p'); + const button = target.querySelector('button'); + + return { + select, + option1: options[0], + option2: options[1], + p, + button + }; + }, + + async test(assert, target) { + const option = target.querySelector('option'); + const button = target.querySelector('button'); + + assert.equal(option?.textContent, 'hello hello'); + + flushSync(() => { + button?.click(); + }); + + assert.equal(option?.textContent, 'changed changed'); + } +}); diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html new file mode 100644 index 0000000000..d3e209c990 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html @@ -0,0 +1 @@ + diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte b/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte new file mode 100644 index 0000000000..47edc28035 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte @@ -0,0 +1,12 @@ + + + + + diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js b/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js new file mode 100644 index 0000000000..ca8c2b6ec1 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js @@ -0,0 +1,39 @@ +import { test } from '../../test'; + +export default test({ + // This test verifies that completely static select with rich option content + // hydrates correctly and the content is preserved + snapshot(target) { + const select = target.querySelector('select'); + const options = target.querySelectorAll('option'); + + return { + select, + option1: options[0], + option2: options[1], + option3: options[2] + }; + }, + + async test(assert, target) { + const options = target.querySelectorAll('option'); + + // Verify the rich content is present in the options + assert.equal(options[0]?.textContent, 'Bold Option'); + assert.equal(options[1]?.textContent, 'Italic Option'); + assert.equal(options[2]?.textContent, 'Plain Option'); + + // Check that the rich elements are actually there (on supporting browsers) + const strong = options[0]?.querySelector('strong'); + const em = options[1]?.querySelector('em'); + + // These may or may not exist depending on browser support + // but the text content should always be correct + if (strong) { + assert.equal(strong.textContent, 'Bold'); + } + if (em) { + assert.equal(em.textContent, 'Italic'); + } + } +}); diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html b/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html new file mode 100644 index 0000000000..93cfa49dd1 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html @@ -0,0 +1 @@ + diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte b/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte new file mode 100644 index 0000000000..bd81687434 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte @@ -0,0 +1,5 @@ + diff --git a/packages/svelte/tests/hydration/samples/rich-select/Option.svelte b/packages/svelte/tests/hydration/samples/rich-select/Option.svelte new file mode 100644 index 0000000000..783915d571 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/rich-select/Option.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/svelte/tests/hydration/samples/rich-select/_config.js b/packages/svelte/tests/hydration/samples/rich-select/_config.js new file mode 100644 index 0000000000..f47bee71df --- /dev/null +++ b/packages/svelte/tests/hydration/samples/rich-select/_config.js @@ -0,0 +1,3 @@ +import { test } from '../../test'; + +export default test({}); diff --git a/packages/svelte/tests/hydration/samples/rich-select/main.svelte b/packages/svelte/tests/hydration/samples/rich-select/main.svelte new file mode 100644 index 0000000000..bb77d8e57a --- /dev/null +++ b/packages/svelte/tests/hydration/samples/rich-select/main.svelte @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + +{#snippet opt()} + +{/snippet} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{#snippet option_snippet()} + +{/snippet} + + + + + + + + + +{#snippet option_snippet2()} + +{/snippet} + + + + + + + + + +{#snippet conditional_option()} + +{/snippet} + + + + + + + diff --git a/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js new file mode 100644 index 0000000000..9de60bcb56 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js @@ -0,0 +1,31 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +// Test that optgroup with rich HTML content (non-option elements) and dynamic expressions works correctly +export default test({ + mode: ['client', 'hydrate'], + test({ assert, target }) { + const select = /** @type {HTMLSelectElement} */ (target.querySelector('select')); + const optgroups = target.querySelectorAll('optgroup'); + const options = target.querySelectorAll('option'); + const button = /** @type {HTMLButtonElement} */ (target.querySelector('button')); + + assert.ok(select); + assert.equal(optgroups.length, 2); + assert.equal(options.length, 4); + + // Check initial option content (rich content inside optgroup) + assert.equal(options[0]?.textContent, 'apple apple'); + assert.equal(options[1]?.textContent, 'banana'); + assert.equal(options[2]?.textContent, 'carrot carrot'); + assert.equal(options[3]?.textContent, 'Plain celery'); + + // Click button to change dynamic content + button.click(); + flushSync(); + + // Check updated option content + assert.equal(options[0]?.textContent, 'orange orange'); + assert.equal(options[2]?.textContent, 'broccoli broccoli'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte new file mode 100644 index 0000000000..03777a1cfb --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js b/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js new file mode 100644 index 0000000000..3c9e5847cd --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js @@ -0,0 +1,37 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +// Test that rich HTML content in diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js new file mode 100644 index 0000000000..a4b18a011b --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js @@ -0,0 +1,11 @@ +import 'svelte/internal/disclose-version'; +import 'svelte/internal/flags/legacy'; +import * as $ from 'svelte/internal/client'; + +var root = $.from_html(``); + +export default function Option($$anchor) { + var option = root(); + + $.append($$anchor, option); +} \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js new file mode 100644 index 0000000000..8f8b115d70 --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js @@ -0,0 +1,412 @@ +import 'svelte/internal/disclose-version'; +import 'svelte/internal/flags/legacy'; +import * as $ from 'svelte/internal/client'; +import Option from './Option.svelte'; + +const opt = ($$anchor) => { + var option = root_1(); + + $.append($$anchor, option); +}; + +const option_snippet = ($$anchor) => { + var option_1 = root_2(); + + $.append($$anchor, option_1); +}; + +const option_snippet2 = ($$anchor) => { + var option_2 = root_3(); + + $.append($$anchor, option_2); +}; + +const conditional_option = ($$anchor) => { + var option_3 = root_4(); + + $.append($$anchor, option_3); +}; + +var root_1 = $.from_html(``); +var root_2 = $.from_html(``); +var root_3 = $.from_html(``); +var root_4 = $.from_html(``); +var option_content = $.from_html(`Rich`, 1); +var root_5 = $.from_html(``); +var root_6 = $.from_html(``); +var root_7 = $.from_html(``); +var select_content = $.from_html(``, 1); +var root_8 = $.from_html(``); +var option_content_1 = $.from_html(`Bold`, 1); +var root_9 = $.from_html(``); +var option_content_2 = $.from_html(`Italic text`, 1); +var option_content_3 = $.from_html(` `, 1); +var root_10 = $.from_html(``); +var root_12 = $.from_html(``); +var root_13 = $.from_html(``); +var option_content_4 = $.from_html(`Rich in boundary`, 1); +var root_14 = $.from_html(``); +var select_content_1 = $.from_html(``, 1); +var select_content_2 = $.from_html(``, 1); +var select_content_3 = $.from_html(``, 1); +var optgroup_content = $.from_html(``, 1); +var optgroup_content_1 = $.from_html(``, 1); +var option_content_5 = $.from_html(``, 1); +var select_content_4 = $.from_html(``, 1); +var select_content_5 = $.from_html(``, 1); +var root = $.from_html(` `, 1); + +export default function Select_with_rich_content($$anchor) { + let items = [1, 2, 3]; + let show = true; + let html = ''; + var fragment = root(); + var select = $.first_child(fragment); + var option_4 = $.child(select); + + $.customizable_select(option_4, () => { + var anchor = $.child(option_4); + var fragment_1 = option_content(); + + $.append(anchor, fragment_1); + }); + + $.reset(select); + + var select_1 = $.sibling(select, 2); + + $.each(select_1, 5, () => items, $.index, ($$anchor, item) => { + var option_5 = root_5(); + var text = $.child(option_5, true); + + $.reset(option_5); + + var option_5_value = {}; + + $.template_effect(() => { + $.set_text(text, $.get(item)); + + if (option_5_value !== (option_5_value = $.get(item))) { + option_5.__value = $.get(item); + } + }); + + $.append($$anchor, option_5); + }); + + $.reset(select_1); + + var select_2 = $.sibling(select_1, 2); + var node = $.child(select_2); + + { + var consequent = ($$anchor) => { + var option_6 = root_6(); + + $.append($$anchor, option_6); + }; + + $.if(node, ($$render) => { + if (show) $$render(consequent); + }); + } + + $.reset(select_2); + + var select_3 = $.sibling(select_2, 2); + var node_1 = $.child(select_3); + + $.key(node_1, () => items, ($$anchor) => { + var option_7 = root_7(); + + $.append($$anchor, option_7); + }); + + $.reset(select_3); + + var select_4 = $.sibling(select_3, 2); + + $.customizable_select(select_4, () => { + var anchor_1 = $.child(select_4); + var fragment_2 = select_content(); + var node_2 = $.first_child(fragment_2); + + opt(node_2); + $.append(anchor_1, fragment_2); + }); + + var select_5 = $.sibling(select_4, 2); + + $.each(select_5, 5, () => items, $.index, ($$anchor, item) => { + const x = $.derived_safe_equal(() => $.get(item) * 2); + var option_8 = root_8(); + var text_1 = $.child(option_8, true); + + $.reset(option_8); + + var option_8_value = {}; + + $.template_effect(() => { + $.set_text(text_1, $.get(x)); + + if (option_8_value !== (option_8_value = $.get(x))) { + option_8.__value = $.get(x); + } + }); + + $.append($$anchor, option_8); + }); + + $.reset(select_5); + + var select_6 = $.sibling(select_5, 2); + var optgroup = $.child(select_6); + var option_9 = $.child(optgroup); + + $.customizable_select(option_9, () => { + var anchor_2 = $.child(option_9); + var fragment_3 = option_content_1(); + + $.append(anchor_2, fragment_3); + }); + + $.reset(optgroup); + $.reset(select_6); + + var select_7 = $.sibling(select_6, 2); + var optgroup_1 = $.child(select_7); + + $.each(optgroup_1, 5, () => items, $.index, ($$anchor, item) => { + var option_10 = root_9(); + var text_2 = $.child(option_10, true); + + $.reset(option_10); + + var option_10_value = {}; + + $.template_effect(() => { + $.set_text(text_2, $.get(item)); + + if (option_10_value !== (option_10_value = $.get(item))) { + option_10.__value = $.get(item); + } + }); + + $.append($$anchor, option_10); + }); + + $.reset(optgroup_1); + $.reset(select_7); + + var select_8 = $.sibling(select_7, 2); + var option_11 = $.child(select_8); + + $.customizable_select(option_11, () => { + var anchor_3 = $.child(option_11); + var fragment_4 = option_content_2(); + + $.next(); + $.append(anchor_3, fragment_4); + }); + + option_11.value = option_11.__value = 'a'; + $.reset(select_8); + + var select_9 = $.sibling(select_8, 2); + + $.each(select_9, 5, () => items, $.index, ($$anchor, item) => { + var option_12 = root_10(); + + $.customizable_select(option_12, () => { + var anchor_4 = $.child(option_12); + var fragment_5 = option_content_3(); + var span = $.first_child(fragment_5); + var text_3 = $.child(span, true); + + $.reset(span); + $.template_effect(() => $.set_text(text_3, $.get(item))); + $.append(anchor_4, fragment_5); + }); + + $.append($$anchor, option_12); + }); + + $.reset(select_9); + + var select_10 = $.sibling(select_9, 2); + var node_3 = $.child(select_10); + + { + var consequent_1 = ($$anchor) => { + var fragment_6 = $.comment(); + var node_4 = $.first_child(fragment_6); + + $.each(node_4, 1, () => items, $.index, ($$anchor, item) => { + var option_13 = root_12(); + var text_4 = $.child(option_13, true); + + $.reset(option_13); + + var option_13_value = {}; + + $.template_effect(() => { + $.set_text(text_4, $.get(item)); + + if (option_13_value !== (option_13_value = $.get(item))) { + option_13.__value = $.get(item); + } + }); + + $.append($$anchor, option_13); + }); + + $.append($$anchor, fragment_6); + }; + + $.if(node_3, ($$render) => { + if (show) $$render(consequent_1); + }); + } + + $.reset(select_10); + + var select_11 = $.sibling(select_10, 2); + var node_5 = $.child(select_11); + + $.boundary(node_5, {}, ($$anchor) => { + var option_14 = root_13(); + + $.append($$anchor, option_14); + }); + + $.reset(select_11); + + var select_12 = $.sibling(select_11, 2); + var node_6 = $.child(select_12); + + $.boundary(node_6, {}, ($$anchor) => { + var option_15 = root_14(); + + $.customizable_select(option_15, () => { + var anchor_5 = $.child(option_15); + var fragment_7 = option_content_4(); + + $.append(anchor_5, fragment_7); + }); + + $.append($$anchor, option_15); + }); + + $.reset(select_12); + + var select_13 = $.sibling(select_12, 2); + + $.customizable_select(select_13, () => { + var anchor_6 = $.child(select_13); + var fragment_8 = select_content_1(); + var node_7 = $.first_child(fragment_8); + + Option(node_7, {}); + $.append(anchor_6, fragment_8); + }); + + var select_14 = $.sibling(select_13, 2); + + $.customizable_select(select_14, () => { + var anchor_7 = $.child(select_14); + var fragment_9 = select_content_2(); + var node_8 = $.first_child(fragment_9); + + option_snippet(node_8); + $.append(anchor_7, fragment_9); + }); + + var select_15 = $.sibling(select_14, 2); + + $.customizable_select(select_15, () => { + var anchor_8 = $.child(select_15); + var fragment_10 = select_content_3(); + var node_9 = $.first_child(fragment_10); + + $.html(node_9, () => html); + $.append(anchor_8, fragment_10); + }); + + var select_16 = $.sibling(select_15, 2); + var optgroup_2 = $.child(select_16); + + $.customizable_select(optgroup_2, () => { + var anchor_9 = $.child(optgroup_2); + var fragment_11 = optgroup_content(); + var node_10 = $.first_child(fragment_11); + + Option(node_10, {}); + $.append(anchor_9, fragment_11); + }); + + $.reset(select_16); + + var select_17 = $.sibling(select_16, 2); + var optgroup_3 = $.child(select_17); + + $.customizable_select(optgroup_3, () => { + var anchor_10 = $.child(optgroup_3); + var fragment_12 = optgroup_content_1(); + var node_11 = $.first_child(fragment_12); + + option_snippet2(node_11); + $.append(anchor_10, fragment_12); + }); + + $.reset(select_17); + + var select_18 = $.sibling(select_17, 2); + var option_16 = $.child(select_18); + + $.customizable_select(option_16, () => { + var anchor_11 = $.child(option_16); + var fragment_13 = option_content_5(); + var node_12 = $.first_child(fragment_13); + + $.html(node_12, () => 'Bold HTML'); + $.append(anchor_11, fragment_13); + }); + + $.reset(select_18); + + var select_19 = $.sibling(select_18, 2); + + $.customizable_select(select_19, () => { + var anchor_12 = $.child(select_19); + var fragment_14 = select_content_4(); + var node_13 = $.first_child(fragment_14); + + $.each(node_13, 1, () => items, $.index, ($$anchor, item) => { + Option($$anchor, {}); + }); + + $.append(anchor_12, fragment_14); + }); + + var select_20 = $.sibling(select_19, 2); + + $.customizable_select(select_20, () => { + var anchor_13 = $.child(select_20); + var fragment_16 = select_content_5(); + var node_14 = $.first_child(fragment_16); + + { + var consequent_2 = ($$anchor) => { + conditional_option($$anchor); + }; + + $.if(node_14, ($$render) => { + if (show) $$render(consequent_2); + }); + } + + $.append(anchor_13, fragment_16); + }); + + $.append($$anchor, fragment); +} \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js new file mode 100644 index 0000000000..1c76c9493b --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js @@ -0,0 +1,7 @@ +import * as $ from 'svelte/internal/server'; + +export default function Option($$renderer) { + $$renderer.option({}, ($$renderer) => { + $$renderer.push(`Component Option`); + }); +} \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js new file mode 100644 index 0000000000..acf873ac09 --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js @@ -0,0 +1,233 @@ +import * as $ from 'svelte/internal/server'; +import Option from './Option.svelte'; + +function opt($$renderer) { + $$renderer.option({}, ($$renderer) => { + $$renderer.push(`Snippet`); + }); +} + +function option_snippet($$renderer) { + $$renderer.option({}, ($$renderer) => { + $$renderer.push(`Rendered`); + }); +} + +function option_snippet2($$renderer) { + $$renderer.option({}, ($$renderer) => { + $$renderer.push(`Rendered in group`); + }); +} + +function conditional_option($$renderer) { + $$renderer.option({}, ($$renderer) => { + $$renderer.push(`Conditional`); + }); +} + +export default function Select_with_rich_content($$renderer) { + let items = [1, 2, 3]; + let show = true; + let html = ''; + + $$renderer.push(` `); +} \ No newline at end of file diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte b/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte new file mode 100644 index 0000000000..0363bf6a96 --- /dev/null +++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + + +{#snippet opt()} + +{/snippet} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{#snippet option_snippet()} + +{/snippet} + + + + + + + + + +{#snippet option_snippet2()} + +{/snippet} + + + + + + + + + +{#snippet conditional_option()} + +{/snippet} + diff --git a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte index 463889dc4f..023ca920e9 100644 --- a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte @@ -14,3 +14,14 @@ Link text Link text + + diff --git a/playgrounds/sandbox/svelte.config.js b/playgrounds/sandbox/svelte.config.js index 68ac605385..33e8c98908 100644 --- a/playgrounds/sandbox/svelte.config.js +++ b/playgrounds/sandbox/svelte.config.js @@ -1,5 +1,8 @@ export default { + /** @type {import('svelte/compiler').CompileOptions} */ compilerOptions: { + css: 'injected', + hmr: false, experimental: {