From 72b066b7fd694287ac0cdb381310cd2dd17c441b Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 24 Aug 2024 17:35:21 +0200
Subject: [PATCH] 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                    |  5 +++++
 packages/svelte/src/index.d.ts                 |  2 ++
 packages/svelte/src/legacy/legacy-client.js    | 10 ++--------
 packages/svelte/tests/runtime-legacy/shared.ts |  1 -
 packages/svelte/types/index.d.ts               |  5 ++---
 5 files changed, 11 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/wet-pears-buy.md

diff --git a/.changeset/wet-pears-buy.md b/.changeset/wet-pears-buy.md
new file mode 100644
index 000000000000..b4cf666950a7
--- /dev/null
+++ b/.changeset/wet-pears-buy.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow non-synchronous legacy component instantiation
diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts
index 79d048b81584..3955f14dc245 100644
--- a/packages/svelte/src/index.d.ts
+++ b/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;
 }
 
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index ff145f3fb2c3..23f00bc30a75 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/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
-		if (!options?.props?.$$host) {
+		// We don't flush_sync for custom element wrappers or if the user doesn't want it
+		if (!options?.props?.$$host || options.sync === false) {
 			flush_sync();
 		}
 
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 640e9a49ee55..1474641c9428 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/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'
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 6f41adfa3df3..cefb0134a02b 100644
--- a/packages/svelte/types/index.d.ts
+++ b/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.