bundle locally

site/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "description": "Docs and examples for Svelte",
   "scripts": {
-    "dev": "sapper dev",
+    "dev": "npm run copy-workers && sapper dev",
+    "copy-workers": "rm -rf static/workers && cp -r node_modules/@sveltejs/svelte-repl/workers static",
     "migrate": "node-pg-migrate -r dotenv/config",
-    "sapper": "sapper build --legacy",
+    "sapper": "npm run copy-workers && sapper build --legacy",
     "update_shimport": "cp node_modules/shimport/index.js __sapper__/build/client/shimport@0.0.14.js",
     "update": "node scripts/update_template.js && node scripts/get-contributors.js",
     "start": "node __sapper__/build",

site/src/components/Repl/ReplWidget.svelte

@@ -116,6 +116,7 @@
 		{#if process.browser}
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				fixed={mobile}
 				{svelteUrl}
 				{rollupUrl}

site/src/routes/examples/index.svelte

@@ -102,6 +102,7 @@
 		<div class="repl-container" class:loading={isLoading}>
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				orientation={replOrientation}

site/src/routes/repl/[id]/index.svelte

@@ -206,6 +206,7 @@
 		<div class="viewport" class:offset={checked}>
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				{relaxed}

site/src/routes/tutorial/[slug]/index.svelte

@@ -302,6 +302,7 @@
 		<div class="tutorial-repl">
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				orientation={mobile ? 'columns' : 'rows'}

site/src/server.js

@@ -2,11 +2,12 @@ import sirv from 'sirv';
 import * as sapper from '@sapper/server';
 import { API } from './backend/auth';
 
-const { PORT=3000 } = process.env;
+const { PORT = 3000 } = process.env;
 
 API()
 	.use(
 		sirv('static', {
+			dev: process.env.NODE_ENV === 'development',
 			setHeaders(res) {
 				res.setHeader('Access-Control-Allow-Origin', '*');
 				res.hasHeader('Cache-Control') || res.setHeader('Cache-Control', 'max-age=600'); // 10min default

site/static/workers/compiler.js

@@ -0,0 +1,59 @@
+(function () {
+	'use strict';
+
+	self.window = self; // egregious hack to get magic-string to work in a worker
+
+	let fulfil_ready;
+	const ready = new Promise(f => {
+		fulfil_ready = f;
+	});
+
+	self.addEventListener('message', async event => {
+		switch (event.data.type) {
+			case 'init':
+				importScripts(`${event.data.svelteUrl}/compiler.js`);
+				fulfil_ready();
+				break;
+
+			case 'compile':
+				await ready;
+				postMessage(compile(event.data));
+				break;
+		}
+	});
+
+	const common_options = {
+		dev: false,
+		css: false
+	};
+
+	function compile({ id, source, options }) {
+		try {
+			const { js, css } = svelte.compile(
+				source,
+				Object.assign({}, common_options, options)
+			);
+
+			return {
+				id,
+				result: {
+					js: js.code,
+					css: css.code || `/* Add a <sty` + `le> tag to see compiled CSS */`
+				}
+			};
+		} catch (err) {
+			let message = `/* Error compiling component\n\n${err.message}`;
+			if (err.frame) message += `\n${err.frame}`;
+			message += `\n\n*/`;
+
+			return {
+				id,
+				result: {
+					js: message,
+					css: message
+				}
+			};
+		}
+	}
+
+}());