basic websockets - closes #6

Author: Rich-Harris

package.json

@@ -24,6 +24,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"marked": "^4.0.15"
+		"marked": "^4.0.15",
+		"ws": "^8.6.0"
 	}
 }

src/lib/client/adapters/filesystem/index.js

@@ -8,6 +8,15 @@ export async function create() {
 
 	const { id, port } = await res.json();
 
+	const ws = new WebSocket('ws://localhost:4567');
+
+	ws.addEventListener('message', (event) => {
+		const payload = JSON.parse(event.data);
+		if (payload.id === id) {
+			console[payload.type === 'stdout' ? 'log' : 'error'](payload.data);
+		}
+	});
+
 	return {
 		base: `http://localhost:${port}`,
 

src/routes/backend/[id].js

@@ -2,24 +2,31 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { spawn } from 'node:child_process';
 import { createRequire } from 'node:module';
+import { broadcast } from './_ws';
 
-const require = createRequire(import.meta.url);
-const sveltekit_pkg_file = require.resolve('@sveltejs/kit/package.json');
-const sveltekit_pkg = JSON.parse(fs.readFileSync(sveltekit_pkg_file, 'utf-8'));
-const sveltekit = path.resolve(sveltekit_pkg_file, '..', sveltekit_pkg.bin['svelte-kit']);
+/**
+ * @typedef {{
+ *   process: import('child_process').ChildProcess,
+ *   files: string[]
+ * }} App */
 
-// poor man's HMR, pending Vite fix
+// poor man's HMR, pending https://github.com/vitejs/vite/issues/7887
 if (globalThis.__apps) {
 	globalThis.__apps.forEach((app) => {
 		app.process.kill();
 	});
 }
 
-/** @type {Map<string, { process: import('child_process').ChildProcess, files: string[] }>} */
+const require = createRequire(import.meta.url);
+const sveltekit_pkg_file = require.resolve('@sveltejs/kit/package.json');
+const sveltekit_pkg = JSON.parse(fs.readFileSync(sveltekit_pkg_file, 'utf-8'));
+const sveltekit = path.resolve(sveltekit_pkg_file, '..', sveltekit_pkg.bin['svelte-kit']);
+
+/** @type {Map<string, App>} */
 const apps = new Map();
 globalThis.__apps = apps;
 
-/** @type {import('./[id]').RequestHandler} */
+/** @type {import('./__types/[id]').RequestHandler} */
 export async function put({ request, params, url }) {
 	const { id } = params;
 	const port = /** @type {string} */ (url.searchParams.get('port'));
@@ -67,7 +74,7 @@ export async function put({ request, params, url }) {
 	};
 }
 
-/** @type {import('./[id]').RequestHandler} */
+/** @type {import('./__types/[id]').RequestHandler} */
 export async function del({ params }) {
 	const { id } = params;
 	const dir = `.apps/${id}`;
@@ -90,8 +97,15 @@ function launch(id, port) {
 	const cwd = `.apps/${id}`;
 
 	const process = spawn(`${sveltekit}`, ['dev', '--port', port], {
-		cwd,
-		stdio: 'inherit' // TODO send to the client via a webworker?
+		cwd
+	});
+
+	process.stdout.on('data', (data) => {
+		broadcast({ id, data: data.toString(), type: 'stdout' });
+	});
+
+	process.stderr.on('data', (data) => {
+		broadcast({ id, data: data.toString(), type: 'stderr' });
 	});
 
 	return process;

src/routes/backend/_ws.js

@@ -0,0 +1,34 @@
+// import './websocket.js';
+import { WebSocketServer } from 'ws';
+
+// poor man's HMR, pending https://github.com/vitejs/vite/issues/7887
+if (globalThis.__wss) {
+	globalThis.__wss.close();
+}
+
+const wss = new WebSocketServer({ port: 4567 });
+globalThis.__wss = wss;
+
+/** @type {Set<import('ws').WebSocket>} */
+const connections = new Set();
+
+wss.on('connection', (ws) => {
+	connections.add(ws);
+
+	ws.on('close', () => {
+		connections.delete(ws);
+	});
+});
+
+export const ready = new Promise((fulfil) => {
+	wss.on('listening', () => {
+		fulfil(undefined);
+	});
+});
+
+/** @param {any} data */
+export function broadcast(data) {
+	for (const connection of connections) {
+		connection.send(JSON.stringify(data));
+	}
+}

src/routes/backend/index.js

@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import { ready } from './_ws';
 
 fs.rmSync('.apps', { recursive: true, force: true });
 fs.mkdirSync('.apps', { recursive: true });
@@ -11,6 +12,8 @@ export async function post() {
 
 	fs.mkdirSync(`.apps/${id}`);
 
+	await ready;
+
 	return {
 		status: 201, // should this be a 200?
 		body: {