fix: allow imports from svelte/legacy in SSR (#13523)

Apps could crash if they import it in a way that is not treeshaken

Author: paoloricciuti

.changeset/two-chefs-lie.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow imports from `svelte/legacy` in SSR

packages/svelte/src/legacy/legacy-server.js

@@ -48,3 +48,19 @@ export function asClassComponent(component) {
 export function run(fn) {
 	fn();
 }
+
+const noop = () => {};
+
+// event stuff, no need to worry about it for SSR but needs to be there or it will crash
+export {
+	noop as handlers,
+	noop as createBubbler,
+	noop as once,
+	noop as preventDefault,
+	noop as self,
+	noop as stopImmediatePropagation,
+	noop as stopPropagation,
+	noop as trusted,
+	noop as passive,
+	noop as nonpassive
+};

packages/svelte/tests/server-side-rendering/samples/legacy-imports/Button.svelte

@@ -0,0 +1 @@
+<!--[--><button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <!----> <div><button>click me</button> <button>click me</button> <button>click me</button></div><!--]-->

packages/svelte/tests/server-side-rendering/samples/legacy-imports/_expected.html

@@ -0,0 +1,82 @@
+<script>
+	import Button from "./Button.svelte"
+	import { createBubbler, handlers, preventDefault, stopPropagation, stopImmediatePropagation, self, trusted, once, passive, nonpassive } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+</script>
+
+<button onclick={handlers(() => console.log('hi'), bubble('click'))}>click me</button>
+<button onclick={handlers(function(){ console.log('hi') }, bubble('click'))}>click me</button>
+<button onclick={handlers(() => console.log('before'), bubble('click'), () => console.log('after'))}
+	>click me</button
+>
+<button onclick={handlers(bubble('click'), foo)}>click me</button>
+<button onclick={bubble('click')}>click me</button>
+
+<button ondblclick={() => console.log('hi')}>click me</button>
+<button ontoggle={bubble('toggle')}>click me</button>
+<button oncustom-event={() => 'hi'}>click me</button>
+<button oncustom-event-bubble={bubble('custom-event-bubble')}>click me</button>
+
+<button onclick={preventDefault(() => (searching = true))}>click me</button>
+<button onclick={preventDefault(() => '')}>click me</button>
+<button onclick={stopPropagation(() => {})}>click me</button>
+<button onclick={stopImmediatePropagation(() => '')}>click me</button>
+<button onclickcapture={() => ''}>click me</button>
+<button onclick={self(() => '')}>click me</button>
+<button onclick={trusted(() => '')}>click me</button>
+<button onclick={once(() => '')}>click me</button>
+
+<button onclick={stopPropagation(preventDefault(() => ''))}>click me</button>
+<button onclick={stopImmediatePropagation(stopPropagation(() => {}))}>click me</button>
+<button onclick={self(stopImmediatePropagation(() => ''))}>click me</button>
+<button onclick={trusted(self(() => ''))}>click me</button>
+<button onclick={trusted(self(() => ''))}>click me</button>
+<button onclick={once(trusted(() => ''))}>click me</button>
+<button onclick={once(preventDefault(() => ''))}>click me</button>
+
+<button use:passive={['click', () => bubble('click')]}>click me</button>
+<button use:nonpassive={['click', () => bubble('click')]}>click me</button>
+<button use:passive={['click', () => ()=>'']}>click me</button>
+<button use:nonpassive={['click', () => ()=>'']}>click me</button>
+<button use:passive={['click', () => foo]}>click me</button>
+<button use:nonpassive={['click', () => foo]}>click me</button>
+<button use:passive={['click', () => stopPropagation(()=>'')]}>click me</button>
+<button use:nonpassive={['click', () => trusted(()=>'')]}>click me</button>
+
+<button
+	use:passive={['click', () => ()=>'']}
+	onclick={handlers(bubble('click'), ()=>'')}
+>click me</button>
+
+<button
+	use:nonpassive={['click', () => ()=>'']}
+	onclick={handlers(bubble('click'), ()=>{
+		return 'multiline';
+	})}
+>click me</button>
+
+
+<button
+	onclick={handlers(bubble('click'), foo, ()=>'', once(trusted(preventDefault(()=>''))))}
+	onblur={handlers(foo, once(trusted(preventDefault(bubble('blur')))))}
+>
+	click me
+</button>
+
+
+<Button on:click={() => 'leave untouched'} on:click>click me</Button>
+
+<div>
+	<button
+		onclick={() => {
+			console.log('hi');
+		}}>click me</button
+	>
+	<button
+		onclick={preventDefault(() => {
+			console.log('hi');
+		})}>click me</button
+	>
+	<button onclick={preventDefault(() => (count += 1))}>click me</button>
+</div>