fix: disallow `bind` and `transitions`

packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js

@@ -7,6 +7,10 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function AnimateDirective(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`animate:`');
+	}
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 
 	if (node.metadata.expression.has_await) {

packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js

@@ -27,6 +27,9 @@ export function BindDirective(node, context) {
 		parent?.type === 'SvelteDocument' ||
 		parent?.type === 'SvelteBody'
 	) {
+		if (context.state.analysis.custom_renderer) {
+			e.incompatible_with_custom_renderer(node, '`bind:`');
+		}
 		if (node.name in binding_properties) {
 			const property = binding_properties[node.name];
 			if (property.valid_elements && !property.valid_elements.includes(parent.name)) {

packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js

@@ -9,6 +9,11 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function TransitionDirective(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		const directive = node.intro && node.outro ? '`transition:`' : node.intro ? '`in:`' : '`out:`';
+		e.incompatible_with_custom_renderer(node, directive);
+	}
+
 	mark_subtree_dynamic(context.path);
 
 	context.next({ ...context.state, expression: node.metadata.expression });

packages/svelte/tests/custom-renderers/samples/animate-directive/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`animate:` is not compatible with `customRenderer`'
+});

packages/svelte/tests/custom-renderers/samples/animate-directive/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { flip } from 'svelte/animate';
+
+	let items = [1, 2, 3];
+</script>
+
+{#each items as item (item)}
+	<div animate:flip>{item}</div>
+{/each}

packages/svelte/tests/custom-renderers/samples/bind-component/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	let value = $state('hello');
+</script>
+
+{value}

packages/svelte/tests/custom-renderers/samples/bind-component/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'hello'
+});

packages/svelte/tests/custom-renderers/samples/bind-component/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Child from './Child.svelte';
+
+	let value = $state('hello');
+</script>
+
+<Child bind:value />

packages/svelte/tests/custom-renderers/samples/bind-directive/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`bind:` is not compatible with `customRenderer`'
+});

packages/svelte/tests/custom-renderers/samples/bind-directive/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	let value = $state('');
+</script>
+
+<input bind:value />

packages/svelte/tests/custom-renderers/samples/in-directive/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`in:` is not compatible with `customRenderer`'
+});

packages/svelte/tests/custom-renderers/samples/in-directive/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
+<div in:fade>content</div>

packages/svelte/tests/custom-renderers/samples/out-directive/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`out:` is not compatible with `customRenderer`'
+});

packages/svelte/tests/custom-renderers/samples/out-directive/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
+<div out:fade>content</div>

packages/svelte/tests/custom-renderers/samples/transition-directive/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`transition:` is not compatible with `customRenderer`'
+});

packages/svelte/tests/custom-renderers/samples/transition-directive/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
+<div transition:fade>content</div>