use module workers (#1228)

* use module workers

* fix

* fix, i think

Author: Rich-Harris

apps/svelte.dev/vite.config.ts

@@ -76,6 +76,9 @@ const config: UserConfig = {
 	ssr: {
 		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'],
 		external: ['shiki', '@shikijs/twoslash']
+	},
+	worker: {
+		format: 'es'
 	}
 };
 

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

@@ -1,5 +1,4 @@
 import { BROWSER } from 'esm-env';
-import CompileWorker from './worker?worker';
 import type { Compiled, File } from '../Workspace.svelte';
 
 const callbacks = new Map<string, Map<number, (compiled: Compiled) => void>>();
@@ -9,7 +8,9 @@ let worker: Worker;
 let uid = 1;
 
 if (BROWSER) {
-	worker = new CompileWorker();
+	worker = new Worker(new URL('./worker', import.meta.url), {
+		type: 'module'
+	});
 
 	worker.addEventListener('message', (event) => {
 		const { filename, id, payload } = event.data;

packages/repl/src/lib/Bundler.ts

@@ -1,6 +1,4 @@
-import type { CompileOptions } from 'svelte/compiler';
 import type { BundleResult } from './workers/bundler';
-import Worker from './workers/bundler/index.js?worker';
 import type { BundleMessageData } from './workers/workers';
 import type { File } from 'editor';
 
@@ -27,7 +25,10 @@ export default class Bundler {
 		this.hash = `${packages_url}:${svelte_version}`;
 
 		if (!workers.has(this.hash)) {
-			const worker = new Worker();
+			const worker = new Worker(new URL('./workers/bundler/index', import.meta.url), {
+				type: 'module'
+			});
+
 			worker.postMessage({ type: 'init', packages_url, svelte_version });
 			workers.set(this.hash, worker);
 		}

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

@@ -1,5 +1,4 @@
 import '@sveltejs/site-kit/polyfills';
-import * as tailwindcss from 'tailwindcss';
 import { walk } from 'zimmerframe';
 import '../patch_window';
 import { sleep } from '../../utils';
@@ -23,10 +22,6 @@ import type { Node } from 'estree';
 import { parseTar, type FileDescription } from 'tarparser';
 import { max } from './semver';
 
-import tailwind_preflight from 'tailwindcss/preflight.css?raw';
-import tailwind_theme from 'tailwindcss/theme.css?raw';
-import tailwind_utilities from 'tailwindcss/utilities.css?raw';
-
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
 self.window = self;
@@ -259,6 +254,12 @@ let previous: {
 let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
 
 async function init_tailwind() {
+	const tailwindcss = await import('tailwindcss');
+
+	const { default: tailwind_preflight } = await import('tailwindcss/preflight.css?raw');
+	const { default: tailwind_theme } = await import('tailwindcss/theme.css?raw');
+	const { default: tailwind_utilities } = await import('tailwindcss/utilities.css?raw');
+
 	const tailwind_files: Record<string, string> = {
 		'tailwindcss/theme.css': tailwind_theme,
 		'tailwindcss/preflight.css': tailwind_preflight,

packages/site-kit/src/lib/search/SearchBox.svelte

@@ -10,7 +10,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	import { focusable_children, forcefocus, trap } from '../actions/focus.js';
 	import Icon from '../components/Icon.svelte';
 	import SearchResults from './SearchResults.svelte';
-	import SearchWorker from './search-worker.js?worker';
 	import { page } from '$app/stores';
 
 	interface Props {
@@ -37,7 +36,9 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	const pending = new Set();
 
 	onMount(async () => {
-		worker = new SearchWorker();
+		worker = new Worker(new URL('./search-worker', import.meta.url), {
+			type: 'module'
+		});
 
 		worker.addEventListener('message', (event) => {
 			const { type, payload } = event.data;