Skip to content

Commit 7d19e5b

Browse files
authored
fix: disallow mounting a snippet (#11347)
fixes #11264
1 parent d3949a6 commit 7d19e5b

File tree

4 files changed

+40
-0
lines changed

4 files changed

+40
-0
lines changed

.changeset/itchy-panthers-shave.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: disallow mounting a snippet

packages/svelte/src/internal/client/render.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { handle_event_propagation } from './dom/elements/events.js';
2121
import { reset_head_anchor } from './dom/blocks/svelte-head.js';
2222
import * as w from './warnings.js';
2323
import * as e from './errors.js';
24+
import { validate_component } from '../shared/validate.js';
2425

2526
/** @type {Set<string>} */
2627
export const all_registered_events = new Set();
@@ -102,6 +103,10 @@ export function stringify(value) {
102103
* @returns {Exports}
103104
*/
104105
export function mount(component, options) {
106+
if (DEV) {
107+
validate_component(component);
108+
}
109+
105110
const anchor = options.anchor ?? options.target.appendChild(empty());
106111
// Don't flush previous effects to ensure order of outer effects stays consistent
107112
return flush_sync(() => _mount(component, { ...options, anchor }), false);
@@ -125,6 +130,10 @@ export function mount(component, options) {
125130
* @returns {Exports}
126131
*/
127132
export function hydrate(component, options) {
133+
if (DEV) {
134+
validate_component(component);
135+
}
136+
128137
const target = options.target;
129138
const previous_hydrate_nodes = hydrate_nodes;
130139

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { test } from '../../test';
2+
3+
export default test({
4+
compileOptions: {
5+
dev: true
6+
},
7+
async test({ assert, target }) {
8+
const div = target.querySelector('div');
9+
assert.htmlEqual(div?.innerHTML || '', '');
10+
},
11+
runtime_error: 'snippet_used_as_component\nA snippet must be rendered with `{@render ...}`'
12+
});
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
import { onMount, mount } from 'svelte';
3+
4+
let el;
5+
6+
onMount(() => {
7+
mount(foo, { target: el });
8+
});
9+
</script>
10+
11+
<div bind:this={el}></div>
12+
{#snippet foo()}
13+
shouldnt be rendered
14+
{/snippet}

0 commit comments

Comments
 (0)