add web worker boilerplate

pngwn · Oct 18, 2020 · abd5974 · abd5974
1 parent fd783d8
commit abd5974
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 28 deletions.
diff --git a/public/worker.js b/public/worker.js
diff --git a/public/worker.js.map b/public/worker.js.map
diff --git a/rollup.config.js b/rollup.config.js
@@ -7,6 +7,9 @@ import typescript from "@rollup/plugin-typescript";
 
 const production = !process.env.ROLLUP_WATCH;
 
+const onwarn = ({ message }) =>
+	message.includes("@rollup/plugin-typescript TS2315");
+
 function serve() {
 	let server;
 
@@ -32,33 +35,57 @@ function serve() {
 	};
 }
 
-export default {
-	input: "src/main.ts",
-	output: {
-		sourcemap: true,
-		format: "iife",
-		name: "app",
-		file: "public/build/bundle.js",
-	},
-	plugins: [
-		svelte({
-			dev: !production,
-			css: (css) => {
-				css.write("bundle.css");
-			},
-			preprocess: sveltePreprocess(),
-		}),
+export default [
+	{
+		input: "src/main.ts",
+		output: {
+			sourcemap: true,
+			format: "iife",
+			name: "app",
+			file: "public/build/bundle.js",
+		},
+		plugins: [
+			svelte({
+				dev: !production,
+				css: (css) => {
+					css.write("bundle.css");
+				},
+				preprocess: sveltePreprocess(),
+			}),
 
-		resolve({
-			browser: true,
-			dedupe: ["svelte"],
-		}),
-		commonjs(),
-		typescript(),
-		!production && serve(),
-		!production && livereload("public"),
-	],
-	watch: {
-		clearScreen: false,
+			resolve({
+				browser: true,
+				dedupe: ["svelte"],
+			}),
+			commonjs(),
+			typescript(),
+			!production && serve(),
+			!production && livereload("public"),
+		],
+		watch: {
+			clearScreen: false,
+		},
+		onwarn,
+	},
+	{
+		input: "src/worker.ts",
+		output: {
+			sourcemap: true,
+			format: "esm",
+			name: "app",
+			file: "public/worker.js",
+		},
+		plugins: [
+			resolve({
+				browser: true,
+				dedupe: ["svelte"],
+			}),
+			commonjs(),
+			typescript(),
+		],
+		watch: {
+			clearScreen: false,
+		},
+		onwarn,
 	},
-};
+];
diff --git a/src/App.svelte b/src/App.svelte
@@ -24,6 +24,18 @@
 	];
 
 	let current: number = 0;
+
+	const worker = new Worker("./worker.js");
+
+	worker.addEventListener("message", (event) => {
+		console.log(event.data);
+	});
+
+	function compile(_components: Component[]): void {
+		worker.postMessage(_components);
+	}
+
+	$: compile(components);
 </script>
 
 <main>

diff --git a/src/worker.ts b/src/worker.ts
@@ -0,0 +1,8 @@
+import type { Component } from "./types";
+
+self.addEventListener(
+	"message",
+	async (event: MessageEvent<Component[]>): Promise<void> => {
+		console.log(event.data);
+	}
+);