feat: allow non-synchronous legacy component instantiation (#12970)

* feat: allow non-synchronous legacy component instantiation

Add a new option to the legacy class component interface so that `flush_sync` can be omitted. Part of https://github.com/sveltejs/kit/issues/12248

* lint

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

.changeset/wet-pears-buy.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow non-synchronous legacy component instantiation

packages/svelte/src/index.d.ts

@@ -17,6 +17,8 @@ export interface ComponentConstructorOptions<
 	context?: Map<any, any>;
 	hydrate?: boolean;
 	intro?: boolean;
+	recover?: boolean;
+	sync?: boolean;
 	$$inline?: boolean;
 }
 

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

@@ -17,9 +17,6 @@ import { define_property } from '../internal/shared/utils.js';
  *
  * @param {ComponentConstructorOptions<Props> & {
  * 	component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;
- * 	immutable?: boolean;
- * 	hydrate?: boolean;
- * 	recover?: boolean;
  * }} options
  * @returns {SvelteComponent<Props, Events, Slots> & Exports}
  */
@@ -64,9 +61,6 @@ class Svelte4Component {
 	/**
 	 * @param {ComponentConstructorOptions & {
 	 *  component: any;
-	 * 	immutable?: boolean;
-	 * 	hydrate?: boolean;
-	 * 	recover?: false;
 	 * }} options
 	 */
 	constructor(options) {
@@ -110,8 +104,8 @@ class Svelte4Component {
 			recover: options.recover
 		});
 
-		// We don't flush_sync for custom element wrappers
+		// We don't flush_sync for custom element wrappers or if the user doesn't want it
-		if (!options?.props?.$$host) {
+		if (!options?.props?.$$host || options.sync === false) {
 			flush_sync();
 		}
 

packages/svelte/tests/runtime-legacy/shared.ts

@@ -351,7 +351,6 @@ async function run_test_variant(
 					component: mod.default,
 					props: config.props,
 					target,
-					immutable: config.immutable,
 					intro: config.intro,
 					recover: config.recover ?? false,
 					hydrate: variant === 'hydrate'

packages/svelte/types/index.d.ts

@@ -14,6 +14,8 @@ declare module 'svelte' {
 		context?: Map<any, any>;
 		hydrate?: boolean;
 		intro?: boolean;
+		recover?: boolean;
+		sync?: boolean;
 		$$inline?: boolean;
 	}
 
@@ -2101,9 +2103,6 @@ declare module 'svelte/legacy' {
 	 * */
 	export function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {
 		component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;
-		immutable?: boolean;
-		hydrate?: boolean;
-		recover?: boolean;
 	}): SvelteComponent<Props, Events, Slots> & Exports;
 	/**
 	 * Takes the component function and returns a Svelte 4 compatible component constructor.