support experimental options (#1124)

Author: Rich-Harris

packages/editor/src/lib/compile-worker/worker.ts

@@ -12,6 +12,8 @@ declare var self: Window & typeof globalThis & { svelte: typeof import('svelte/c
 
 let inited: PromiseWithResolvers<typeof self.svelte>;
 
+let can_use_experimental_async = false;
+
 async function init(v: string) {
 	const svelte_url = v === 'local' ? '/svelte' : `https://unpkg.com/svelte@${v}`;
 	const match = /^(?:pr|commit)-(.+)/.exec(v);
@@ -46,6 +48,23 @@ async function init(v: string) {
 
 	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
 
+	try {
+		self.svelte.compileModule('', {
+			generate: 'client',
+			// @ts-expect-error
+			experimental: {
+				async: true
+			}
+		});
+
+		can_use_experimental_async = true;
+	} catch (e) {
+		console.error(e);
+		// do nothing
+	}
+
+	console.log({ can_use_experimental_async });
+
 	return self.svelte;
 }
 
@@ -101,16 +120,28 @@ addEventListener('message', async (event) => {
 				dev: options.dev,
 				filename: file.name
 			};
+
 			if (!is_svelte_3_or_4) {
 				compilerOptions.modernAst = options.modernAst; // else Svelte 3/4 will throw an "unknown option" error
 			}
+
+			if (can_use_experimental_async) {
+				compilerOptions.experimental = { async: true };
+			}
+
 			result = svelte.compile(file.contents, compilerOptions);
 		} else {
-			result = svelte.compileModule(file.contents, {
+			const compilerOptions: any = {
 				generate: options.generate,
 				dev: options.dev,
 				filename: file.name
-			});
+			};
+
+			if (can_use_experimental_async) {
+				compilerOptions.experimental = { async: true };
+			}
+
+			result = svelte.compileModule(file.contents, compilerOptions);
 		}
 
 		postMessage({

packages/repl/src/lib/workers/bundler/index.ts

@@ -31,6 +31,8 @@ let current_id: number;
 
 let inited = Promise.withResolvers<typeof svelte>();
 
+let can_use_experimental_async = false;
+
 async function init(v: string, packages_url: string) {
 	const match = /^(pr|commit)-(.+)/.exec(v);
 
@@ -80,6 +82,23 @@ async function init(v: string, packages_url: string) {
 
 	(0, eval)(compiler + `\n//# sourceURL=${entry}@` + version);
 
+	try {
+		self.svelte.compileModule('', {
+			generate: 'client',
+			// @ts-expect-error
+			experimental: {
+				async: true
+			}
+		});
+
+		can_use_experimental_async = true;
+	} catch (e) {
+		console.error(e);
+		// do nothing
+	}
+
+	console.log({ can_use_experimental_async });
+
 	return svelte;
 }
 
@@ -405,13 +424,18 @@ async function get_bundle(
 			if (cached_id && cached_id.code === code) {
 				result = cached_id.result;
 			} else if (id.endsWith('.svelte')) {
-				result = svelte.compile(code, {
+				const compilerOptions: any = {
 					...options,
 					filename: name + '.svelte',
-					// @ts-expect-error
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
 					dev: true
-				});
+				};
+
+				if (can_use_experimental_async) {
+					compilerOptions.experimental = { async: true };
+				}
+
+				result = svelte.compile(code, compilerOptions);
 
 				if (result.css?.code) {
 					// resolve local files by inlining them
@@ -441,11 +465,18 @@ async function get_bundle(
 				`.replace(/\t/g, '');
 				}
 			} else if (id.endsWith('.svelte.js')) {
-				result = svelte.compileModule?.(code, {
+				const compilerOptions: any = {
 					filename: name + '.js',
 					generate: 'client',
 					dev: true
-				});
+				};
+
+				if (can_use_experimental_async) {
+					compilerOptions.experimental = { async: true };
+				}
+
+				result = svelte.compileModule?.(code, compilerOptions);
+
 				if (!result) {
 					return null;
 				}