diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts index b2c6053518..ce90e79850 100644 --- a/packages/editor/src/lib/compile-worker/worker.ts +++ b/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; +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({ diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts index b65147fbec..1c4631aa62 100644 --- a/packages/repl/src/lib/workers/bundler/index.ts +++ b/packages/repl/src/lib/workers/bundler/index.ts @@ -31,6 +31,8 @@ let current_id: number; let inited = Promise.withResolvers(); +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; }